Improve value prop so it can either be a primitive string value or an Option

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Inputs/Select/Select.stories.tsx

@@ -47,14 +47,45 @@ SingleSelect.args = {
   value: "foo"
 };
 
+export const SingleSelectWithStringValue = (args: ISelectProps) => {
+  const [input, setInput] = useState<
+    Record<
+      string,
+      MultiValue<Option | undefined> | SingleValue<Option | undefined | string>
+    >
+  >({
+    foo: "foo"
+  });
+
+  useEffect(() => {
+    console.log(input);
+  }, [input]);
+
+  return <Select {...args} name='foo' value={input.foo} onChange={setInput} />;
+};
+
+SingleSelectWithStringValue.args = {
+  name: "single-select",
+  onChange: action("onChange"),
+  options: [
+    { value: "foo", label: "Foo" },
+    { value: "bar", label: "Bar" },
+    { value: "baz", label: "Baz" }
+  ],
+  value: "foo"
+};
+
 export const MultiSelect = (args: ISelectProps) => {
   const [input, setInput] = useState<
     Record<
       string,
       MultiValue<Option | undefined> | SingleValue<Option | undefined>
     >
   >({
-    foo: []
+    foo: [
+      { value: "foo", label: "foo" },
+      { value: "bar", label: "bar" }
+    ]
   });
 
   useEffect(() => {
@@ -73,3 +104,31 @@ MultiSelect.args = {
     { value: "baz", label: "Baz" }
   ]
 };
+
+export const MultiSelectWithStringArray = (args: ISelectProps) => {
+  const [input, setInput] = useState<
+    Record<
+      string,
+      | MultiValue<Option | undefined>
+      | SingleValue<Option | undefined | string[]>
+    >
+  >({
+    foo: ["foo", "bar"]
+  });
+
+  useEffect(() => {
+    console.log(input);
+  }, [input]);
+
+  return <Select {...args} value={input.foo} onChange={setInput} />;
+};
+
+MultiSelectWithStringArray.args = {
+  name: "foo",
+  isMulti: true,
+  options: [
+    { value: "foo", label: "Foo" },
+    { value: "bar", label: "Bar" },
+    { value: "baz", label: "Baz" }
+  ]
+};

src/Components/Inputs/Select/index.tsx

@@ -21,6 +21,32 @@ const Select: FC<ISelectProps> = props => {
     return props.onChange({ [props.name]: option });
   };
 
+  const getValue = () => {
+    if (!props.value) {
+      return;
+    }
+
+    if (isMulti && Array.isArray(props.value)) {
+      const values = props.value.map(value => {
+        if (typeof value === "object" && value !== null && "value" in value) {
+          return options.find(
+            option => option.value === (value as Option)?.value
+          );
+        } else {
+          return options.find(option => option.value === value);
+        }
+      });
+
+      return values.filter(Boolean).length ? values : undefined;
+    }
+
+    return options.find(
+      option =>
+        option.value === props.value ||
+        option.value === (props.value as Option)?.value
+    );
+  };
+
   return (
     <div className={classNames(props.inputWrapperClassName)}>
       {max || label || hint ? (
@@ -39,7 +65,7 @@ const Select: FC<ISelectProps> = props => {
         closeMenuOnSelect={isMulti ? false : true}
         isMulti={isMulti}
         defaultValue={defaultValue}
-        value={props.value}
+        value={getValue()}
         styles={styles()}
         className='pn-select-container text-sm'
         classNamePrefix='pn-select'

src/Components/Inputs/Select/types.ts

@@ -9,7 +9,7 @@ export interface ISelectProps {
   name: string;
   type?: string;
   required?: boolean;
-  value: PropsValue<Option | undefined>;
+  value: PropsValue<Option | undefined> | string | string[];
   defaultValue?: PropsValue<Option | undefined>;
   error?: string;
   hint?: string;