x-ui-design 0.6.99 → 0.7.21

package/lib/components/Form/Item/Item.tsx

@@ -83,7 +83,7 @@ const FormItem = ({
     if (initialValue && getFieldValue(name) === undefined) {
       setFieldValue(name, initialValue);
     }
-  }, []);
+  }, [name]);
 
   useEffect(() => {
     if (name && dependencies.length > 0) {

package/lib/components/Select/Select.tsx

@@ -107,7 +107,8 @@ const Select = ({
   dropdownRender,
   onDropdownVisibleChange,
   iconClick,
-  ref
+  ref,
+  controlled
 }: SelectProps
 ): ReactElement => {
   const asTag = mode === 'tags';
@@ -396,19 +397,19 @@ const Select = ({
         ? (selected as string[]).filter(item => item !== optionValue)
         : [...selected, optionValue];
 
-      setSelected(newSelection);
+      !controlled && setSelected(newSelection);
       onChange?.(newSelection, option);
 
       if (selected.includes(optionValue)) {
-        onDeselect?.(optionValue, option);
+        !controlled && onDeselect?.(optionValue, option);
       } else {
-        onSelect?.(optionValue, option);
+        !controlled && onSelect?.(optionValue, option);
       }
     } else {
       setIsOpen(defaultOpen);
-      setSelected(optionValue);
+      !controlled && setSelected(optionValue);
       onChange?.(optionValue, option);
-      onSelect?.(optionValue, option);
+      !controlled && onSelect?.(optionValue, option);
     }
 
     handleClearInputValue();
@@ -417,9 +418,9 @@ const Select = ({
   const handleClear = () => {
     const value = hasMode ? [] : '';
 
-    setSelected(value);
+    !controlled && setSelected(value);
     onChange?.('');
-    onSelect?.('');
+    !controlled && onSelect?.('');
     onClear?.();
 
     handleClearInputValue();

package/lib/hooks/useForm.ts

@@ -21,9 +21,9 @@ const useForm = (
   scrollToFirstError?: boolean,
   onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined,
   onFinishFailed?: (errorInfo: {
-      values: Record<string, RuleTypes>;
-      errorFields: Pick<FieldError, 'errors' | 'name'>[];
-    }) => void
+    values: Record<string, RuleTypes>;
+    errorFields: Pick<FieldError, 'errors' | 'name'>[];
+  }) => void
 ): FormInstance => {
   const touchedFieldsRef = useRef(new Set<string>());
   const rulesRef = useRef<Record<string, RuleObject[] | RuleRender>>({});
@@ -53,7 +53,7 @@ const useForm = (
   const fieldInstancesRef = useRef<Record<string, FieldInstancesRef | null>>({});
 
   const [isReseting, setIsReseting] = useState(false);
-  
+
   const errorsRef = useRef<Record<string, string[]>>({});
   const errorSubscribers = useRef<
     Record<string, ((errors: string[]) => void)[]>
@@ -83,7 +83,7 @@ const useForm = (
 
   function getFieldsValue(nameList?: string[]) {
     const formData = getFormFields();
-    
+
     if (!nameList) {
       return formData;
     }
@@ -111,7 +111,7 @@ const useForm = (
     name: string,
     value: RuleTypes,
     errors?: string[],
-    reset: boolean | null | undefined = undefined,
+    reset: boolean | null | -1 | undefined = undefined,
     touch?: boolean
   ) {
     if (
@@ -132,7 +132,7 @@ const useForm = (
         return;
       }
     })
- 
+
     if (!isFieldExist) {
       formRef.current[stepRef.current][name] = value;
     }
@@ -163,7 +163,15 @@ const useForm = (
         }
       });
     } else {
-      errorsRef.current[name] = errors;
+      if (reset === -1) {
+        setTimeout(() => {
+          errorsRef.current[name] = errors;
+          notifyErrorSubscribers(name);
+        }, 0);
+      } else {
+        errorsRef.current[name] = errors;
+        notifyErrorSubscribers(name);
+      }
     }
   }
 
@@ -175,7 +183,12 @@ const useForm = (
 
   function setFields(fields: FieldData[]) {
     fields.forEach(({ name, value, errors }) =>
-      setFieldValue(Array.isArray(name) ? name[0] : name, value, errors)
+      setFieldValue(
+        Array.isArray(name) ? name[0] : name,
+        value ?? getFieldValue(Array.isArray(name) ? name[0] : name),
+        errors,
+        -1
+      )
     );
   }
 
@@ -224,7 +237,7 @@ const useForm = (
               delete formRef.current[step][name];
             }
           })
-          
+
           formRef.current[stepRef.current][name] = initialValues?.[name];
 
           if (Object.keys(existFields).length) {
@@ -307,7 +320,7 @@ const useForm = (
         }
       })
     );
-    
+
     errorsRef.current[name] = fieldErrors
     warningsRef.current[name] = fieldWarnings;
 

package/lib/types/select.ts

@@ -65,7 +65,8 @@ export type SelectProps = DefaultProps & {
   removeIcon?: ReactNode;
   maxTagCount?: number | 'responsive',
   ref?: ForwardedRef<HTMLDivElement>,
-  closeFromParent?: boolean
+  closeFromParent?: boolean;
+  controlled?: boolean
 };
 
 export interface OptionType {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.6.99",
+  "version": "0.7.21",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -1904,7 +1904,7 @@ export default function Home() {
     // }, []);
 
     const [aa, bb] = useState([new Date(), new Date()])
-    const [c, d] = useState(false)
+    const [selected, setSelected] = useState('Armenia')
 
     useEffect(() => {
         setTimeout(() => {
@@ -1912,13 +1912,30 @@ export default function Home() {
         }, 3000);
     }, [])
 
+    const disableDate = useCallback(
+    (date: any) => {
+        const startDate = aa[0];
+        const endDate = aa[1];
+        const dateToCheck = date;
+
+        console.log({
+            endDate,
+            startDate,
+            dateToCheck
+        });
+        
+        if (dateToCheck >= startDate && dateToCheck <= endDate) {
+            return false
+        }
+        
+        return true
+    },
+    [aa]
+  );
+
     return (
         <>
-        <button onClick={() => { d(!c) }}>aaaa</button>
-            <RangePicker size="middle" format={'YYYY-MM-DD'} value={aa} defaultValue={aa} />
-            <Switch checked={c} onChange={(ccc) => {
-                d(!c)
-            }} />
+            <RangePicker size="middle" format={'YYYY-MM-DD'} value={aa} defaultValue={aa} disabledDate={disableDate} />
 
             <Form
                 form={form}
@@ -1949,10 +1966,12 @@ export default function Home() {
                             </RadioGroup>
                         </Item>}
 
-                        <Item rules={[{ required: true }]} initialValue={'Philippines'} name="country" label="Country">
+                        <Item rules={[{ required: true }]} name="country" label="Country">
                             <Select
                                 showSearch
                                 iconClickClear
+                                value={selected}
+                                controlled
                                 // suffixIcon={<>clear</>}
                                 // style={{ width: 400 }}
                                 placeholder="Select..."