diff --git a/package.json b/package.json index ec6342e..25ae4af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@agility/plenum-ui", - "version": "2.1.17", + "version": "2.1.18", "license": "MIT", "main": "dist/index.js", "module": "dist/index.js", diff --git a/stories/molecules/inputs/select/Select.tsx b/stories/molecules/inputs/select/Select.tsx index 93440aa..00b7c75 100644 --- a/stories/molecules/inputs/select/Select.tsx +++ b/stories/molecules/inputs/select/Select.tsx @@ -1,37 +1,33 @@ -import React, { useEffect, useState } from "react" -import InputLabel from "@/stories/molecules/inputs/InputLabel" -import { useId } from "@/utils/useId" -import { default as cn } from "classnames" +import React, { useEffect, useState } from "react"; +import InputLabel from "@/stories/molecules/inputs/InputLabel"; +import { useId } from "@/utils/useId"; +import { default as cn } from "classnames"; export interface ISimpleSelectOptions { - label: string - value: string + label: string; + value: string; } export interface ISelectProps { /** Label */ - label?: string + label?: string; /** Select ID prop */ - id?: string + id?: string; /** Select name prop */ - name?: string + name?: string; /** List of options to display in the select menu */ - options: ISimpleSelectOptions[] + options: ISimpleSelectOptions[]; /** Select name prop */ - onChange?(value: string): void + onChange?(value: string): void; /** Select disabled state */ - isDisabled?: boolean + isDisabled?: boolean; /** Select error state */ - isError?: boolean + isError?: boolean; /** Select required state */ - isRequired?: boolean - - value?: string - - className?: string - - onFocus?: () => void - - onBlur?: () => void + isRequired?: boolean; + value?: string; + className?: string; + onFocus?: () => void; + onBlur?: () => void; } const Select: React.FC = ({ label, @@ -47,23 +43,23 @@ const Select: React.FC = ({ onFocus, onBlur }) => { - const [selectedOption, setSelectedOption] = useState(value || options[0].value) - const uniqueID = useId() - if (!id) id = `select-${uniqueID}` - if (!name) name = id + const [selectedOption, setSelectedOption] = useState(value || options[0].value); + const uniqueID = useId(); + if (!id) id = `select-${uniqueID}`; + if (!name) name = id; useEffect(() => { if (value !== undefined && value !== null) { - setSelectedOption(value) + setSelectedOption(value); } - }, [value]) + }, [value]); const handleChange = (e: React.ChangeEvent) => { - const targetValue = e.target.value - typeof onChange == "function" && onChange(targetValue) - setSelectedOption(targetValue) - } - const wrapperStyle = cn("group", { "opacity-50": isDisabled }) + const targetValue = e.target.value; + typeof onChange == "function" && onChange(targetValue); + setSelectedOption(targetValue); + }; + const wrapperStyle = cn("group", { "opacity-50": isDisabled }); return (
{label && ( @@ -95,14 +91,14 @@ const Select: React.FC = ({ > {options.map(({ value, label }) => { return ( - - ) + ); })}
- ) -} + ); +}; -export default Select +export default Select;