dynamic-modal 1.1.1 → 1.1.7

package/src/components/input-upload/input-upload.tsx

@@ -1,67 +1,67 @@
-'use client'
-
-import React, { ChangeEvent, FC } from 'react'
-import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
-
-const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }: IInputUpload) => {
-  
-  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-    if (props.read && event.target.files) {
-      readFileBlob(event.target.files[0], false)
-        .then((result) => onChange(result))
-        .catch((err) => {
-          console.error('file read error', err)
-          onChange({name:'', size: 0, data: ''})
-        })
-    } else {
-      onChange(event.target.files)
-    }
-  }
-
-  const readFileBlob = (blob: File, image: boolean): Promise<IFileResult> => {
-    return new Promise((resolve, reject) => {
-      const fileReader = new FileReader()
-      if(image) fileReader.readAsDataURL(blob) 
-      else if (readAsArrayBuffer) fileReader.readAsArrayBuffer(blob)
-      else fileReader.readAsText(blob)
-
-      fileReader.onload = () => {
-        const fileResult: IFileResult = {
-          name: blob.name,
-          size: blob.size,
-          data: fileReader.result as string
-        }
-
-        resolve(fileResult)
-      }
-      fileReader.onerror = (error) => {
-        reject(error)
-      }
-    })
-  }
-
-  return (
-    <div className='flex flex-col w-full gap-1 text-center'>
-      {props.label && <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" htmlFor={`file-input-${props.id}`}>{props.label}</label>}
-      <input
-        className="file:transition-all file:delay-150 block w-full text-sm text-slate-500
-        file:mr-4 file:py-2 file:px-4 file:rounded-md
-        file:border-0 file:text-sm file:font-semibold
-        file:bg-gray-100 file:text-blue-600
-        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed"
-        aria-describedby={`file-input-${props.id}-help`}
-        id={`file-input-${props.id}`}
-        type="file"
-        onChange={onChangeHandler}
-        {...props}
-      />
-      <p
-        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
-        id={`file-input-${props.id}-help`}>
-        {props.helpText?.toUpperCase()}
-      </p>
-    </div>
-  )
-}
-
-export default InputUpload
+'use client'
+
+import React, { ChangeEvent, FC } from 'react'
+import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
+
+const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }: IInputUpload) => {
+  
+  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+    if (props.read && event.target.files) {
+      readFileBlob(event.target.files[0], false)
+        .then((result) => onChange(result))
+        .catch((err) => {
+          console.error('file read error', err)
+          onChange({name:'', size: 0, data: ''})
+        })
+    } else {
+      onChange(event.target.files)
+    }
+  }
+
+  const readFileBlob = (blob: File, image: boolean): Promise<IFileResult> => {
+    return new Promise((resolve, reject) => {
+      const fileReader = new FileReader()
+      if(image) fileReader.readAsDataURL(blob) 
+      else if (readAsArrayBuffer) fileReader.readAsArrayBuffer(blob)
+      else fileReader.readAsText(blob)
+
+      fileReader.onload = () => {
+        const fileResult: IFileResult = {
+          name: blob.name,
+          size: blob.size,
+          data: fileReader.result as string
+        }
+
+        resolve(fileResult)
+      }
+      fileReader.onerror = (error) => {
+        reject(error)
+      }
+    })
+  }
+
+  return (
+    <div className='flex flex-col w-full gap-1 text-center'>
+      {props.label && <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" htmlFor={`file-input-${props.id}`}>{props.label}</label>}
+      <input
+        className="file:transition-all file:delay-150 block w-full text-sm text-slate-500
+        file:mr-4 file:py-2 file:px-4 file:rounded-md
+        file:border-0 file:text-sm file:font-semibold
+        file:bg-gray-100 file:text-blue-600
+        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed"
+        aria-describedby={`file-input-${props.id}-help`}
+        id={`file-input-${props.id}`}
+        type="file"
+        onChange={onChangeHandler}
+        {...props}
+      />
+      <p
+        className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
+        id={`file-input-${props.id}-help`}>
+        {props.helpText?.toUpperCase()}
+      </p>
+    </div>
+  )
+}
+
+export default InputUpload

package/src/components/make-button/make-button.tsx

@@ -1,18 +1,18 @@
-'use client'
-
-import React, { FC, useContext, useMemo } from 'react'
-import { IMakeButtonProps } from '../../interfaces/make-button'
-import { ComponentStateContext } from '../../context/component/component-state'
-import { generateId } from '../../tools/general'
-
-const MakeButton: FC<IMakeButtonProps> = ({ element }) => {
-  const { Button } = useContext(ComponentStateContext)
-
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
-  return (
-    <Button {...element} id={elementId} />
-  )
-}
-
-export default MakeButton
+'use client'
+
+import React, { FC, useContext, useMemo } from 'react'
+import { IMakeButtonProps } from '../../interfaces/make-button'
+import { ComponentStateContext } from '../../context/component/component-state'
+import { generateId } from '../../tools/general'
+
+const MakeButton: FC<IMakeButtonProps> = ({ element }) => {
+  const { Button } = useContext(ComponentStateContext)
+
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
+  return (
+    <Button {...element} id={elementId} />
+  )
+}
+
+export default MakeButton

package/src/components/make-description/make-description.tsx

@@ -1,15 +1,15 @@
-'use client'
-
-import React, { FC } from 'react'
-import { IMakeDescriptionProps } from '../../interfaces/make-description'
-
-const MakeDescription: FC<IMakeDescriptionProps> = ({ element: { text, Icon, containerStyle, textStyle } }) => {
-  return (
-    <div className='flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md' style={containerStyle}>
-      {Icon && <Icon />}
-      <p style={textStyle}>{text}</p>
-    </div>
-  )
-}
-
-export default MakeDescription
+'use client'
+
+import React, { FC } from 'react'
+import { IMakeDescriptionProps } from '../../interfaces/make-description'
+
+const MakeDescription: FC<IMakeDescriptionProps> = ({ element: { text, Icon, containerStyle, textStyle } }) => {
+  return (
+    <div className='flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md' style={containerStyle}>
+      {Icon && <Icon />}
+      <p style={textStyle}>{text}</p>
+    </div>
+  )
+}
+
+export default MakeDescription

package/src/components/make-input/make-input.tsx

@@ -1,53 +1,53 @@
-'use client'
-
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeInputProps } from '../../interfaces/make-input'
-import { ComponentStateContext } from '../../context/component/component-state'
-import { generateId } from '../../tools/general'
-
-const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { Input } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
-
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props])
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Input 
-            {...element} 
-            id={elementId}
-            onChange={onChange} 
-            value={value ?? ''} 
-            invalid={invalid}
-            error={error} 
-            disabled={element.disabled ?? !enable} 
-            />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeInput
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeInputProps } from '../../interfaces/make-input'
+import { ComponentStateContext } from '../../context/component/component-state'
+import { generateId } from '../../tools/general'
+
+const MakeInput: FC<IMakeInputProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Input } = useContext(ComponentStateContext)
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
+
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
+  useEffect(() => {
+    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
+    return () => subscription.unsubscribe()
+  }, [checkField, props])
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={element.name}
+        rules={{
+          required: {
+            value: required,
+            message: validation.message ?? ''
+          },
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
+          <Input 
+            {...element} 
+            id={elementId}
+            onChange={onChange} 
+            value={value ?? ''} 
+            invalid={invalid}
+            error={error} 
+            disabled={element.disabled ?? !enable} 
+            />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeInput

package/src/components/make-select/make-select.tsx

@@ -1,55 +1,55 @@
-'use client'
-
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { IMakeSelectProps } from '../../interfaces/make-select'
-import { ComponentStateContext } from '../../context/component/component-state'
-
-const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { Select } = useContext(ComponentStateContext)
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
-
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Select
-            {...element}
-            id={elementId}
-            onChange={onChange}
-            value={value}
-            invalid={invalid}
-            error={error}
-            disabled={element.disabled ?? !enable} 
-            liveSearching={liveSearching}
-            options={liveData || (element.options ?? [])}
-          />
-        )}
-      />
-      : <></>
-  )
-}
-
-export default MakeSelect
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { generateId } from '../../tools/general'
+import { IMakeSelectProps } from '../../interfaces/make-select'
+import { ComponentStateContext } from '../../context/component/component-state'
+
+const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Select } = useContext(ComponentStateContext)
+  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element: { renderIf, enableIf, ...element} })
+
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+
+  useEffect(() => {
+    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
+    return () => subscription.unsubscribe()
+  }, [checkField, props, props.watch])
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={element.name}
+        rules={{
+          required: {
+            value: required,
+            message: validation.message ?? ''
+          },
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
+          <Select
+            {...element}
+            id={elementId}
+            onChange={onChange}
+            value={value}
+            invalid={invalid}
+            error={error}
+            disabled={element.disabled ?? !enable} 
+            liveSearching={liveSearching}
+            options={liveData || (element.options ?? [])}
+          />
+        )}
+      />
+      : <></>
+  )
+}
+
+export default MakeSelect

package/src/components/make-textarea/make-textarea.tsx

@@ -1,53 +1,53 @@
-'use client'
-
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { IMakeTextareaProps } from '../../interfaces/make-textarea'
-import { ComponentStateContext } from '../../context/component/component-state'
-
-const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { Textarea } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
-
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
-
-  return (
-    render
-      ? <Controller
-        name={element.name}
-        control={props.control}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Textarea
-            {...element}
-            id={elementId}
-            onChange={onChange}
-            value={value ?? ''}
-            invalid={invalid}
-            error={error}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeTextarea
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { generateId } from '../../tools/general'
+import { IMakeTextareaProps } from '../../interfaces/make-textarea'
+import { ComponentStateContext } from '../../context/component/component-state'
+
+const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Textarea } = useContext(ComponentStateContext)
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element } })
+
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
+  useEffect(() => {
+    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
+    return () => subscription.unsubscribe()
+  }, [checkField, props, props.watch])
+
+  return (
+    render
+      ? <Controller
+        name={element.name}
+        control={props.control}
+        rules={{
+          required: {
+            value: required,
+            message: validation.message ?? ''
+          },
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
+          <Textarea
+            {...element}
+            id={elementId}
+            onChange={onChange}
+            value={value ?? ''}
+            invalid={invalid}
+            error={error}
+            disabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeTextarea

package/src/components/make-toggle/make-toggle.tsx

@@ -1,53 +1,53 @@
-'use client'
-
-import React, { FC, useContext, useEffect, useMemo } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeToggleProps } from '../../interfaces/make-toggle'
-import { generateId } from '../../tools/general'
-import { ComponentStateContext } from '../../context/component/component-state'
-
-const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { Toggle } = useContext(ComponentStateContext)
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
-
-  const elementId = useMemo(() => element.id ?? generateId(), [])
-  
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required: {
-            value: required,
-            message: validation.message ?? ''
-          },
-          pattern: validation.regex ?  {
-            value: validation.regex,
-            message: validation.message ?? ''
-          } : undefined,
-          ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
-          <Toggle
-            {...element}
-            id={elementId}
-            onChange={onChange}
-            value={value ?? ''}
-            invalid={invalid}
-            error={error}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeToggle
+'use client'
+
+import React, { FC, useContext, useEffect, useMemo } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeToggleProps } from '../../interfaces/make-toggle'
+import { generateId } from '../../tools/general'
+import { ComponentStateContext } from '../../context/component/component-state'
+
+const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, enableIf, renderIf, ...element }, ...props }) => {
+  const { Toggle } = useContext(ComponentStateContext)
+  const { render, enable, checkField } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element } })
+
+  const elementId = useMemo(() => element.id ?? generateId(), [])
+  
+  useEffect(() => {
+    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
+    return () => subscription.unsubscribe()
+  }, [checkField, props, props.watch])
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={element.name}
+        rules={{
+          required: {
+            value: required,
+            message: validation.message ?? ''
+          },
+          pattern: validation.regex ?  {
+            value: validation.regex,
+            message: validation.message ?? ''
+          } : undefined,
+          ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid, error } }) => (
+          <Toggle
+            {...element}
+            id={elementId}
+            onChange={onChange}
+            value={value ?? ''}
+            invalid={invalid}
+            error={error}
+            disabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeToggle