Merge pull request #56 from tomonarifeehan/refactor-custom-select

fix: refactored-custom-select

src/UI/FormComponents/FieldTypes/SmartFolderField.jsx

@@ -1,9 +1,9 @@
-import CustomSelect from "./CustomSelectComponent"
+import CustomSelect from "../../../components/ui/custom-select"
 import React from "react"
 
 const extractSecondLevelKeys = (obj) => {
 
-  const options = [];
+  const options = []
 
   const traverse = (obj, level = 0) => {
     if (level === 1) {
@@ -21,7 +21,7 @@ const extractSecondLevelKeys = (obj) => {
 
   traverse(obj)
 
-  return options;
+  return options
 }
 
 export function SmartFolderField({ folder, folderContent }) {
@@ -43,4 +43,4 @@ export function SmartFolderField({ folder, folderContent }) {
       isMulti = { isMultipleFolder }
     />
   )
-}
+}

src/components/ui/custom-select.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import Select from 'react-select'
+
+import { Field } from 'formik'
+
+const CustomSelectComponent = ({
+  className,
+  placeholder,
+  field,
+  form,
+  options,
+  isMulti = false,
+  ...props
+}) => {
+
+  const onChange = (option) => {
+    form.setFieldValue(
+      field.name,
+      isMulti ? option.map((item) => item.value) : option.value
+    )
+  }
+
+  const getValue = () => {
+    if (options) {
+
+      const fieldValue = Array.isArray(field.value) ? field.value : []
+      return isMulti ? options.filter(option => fieldValue.includes(option.value)) : options.find(option => option.value === field.value)
+
+    } else {
+      return isMulti ? [] : ""
+    }
+  }
+
+  return (
+    <Select
+      className = { className }
+      name = { field.name }
+      value = { getValue() }
+      onChange = { onChange }
+      placeholder = { placeholder }
+      options = { options }
+      isMulti = { isMulti }
+      { ...props }
+    />
+  )
+}
+
+// Formik field wrapper for custom select.
+const CustomSelect = (props) => (
+  <Field component = { CustomSelectComponent } { ...props } />
+)
+
+export default CustomSelect