dynamic-modal 1.0.11 → 1.0.12

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

@@ -1,55 +1,56 @@
-import React, { FC, useEffect } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { IMakeMultiSelectProps } from '../../interfaces/make-multi-select'
-import { Select, SelectItem } from '@nextui-org/react'
-
-const MakeMultiSelect: FC<IMakeMultiSelectProps> = ({ element, ...props }) => {
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ element, ...props })
-
-  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: element.validation.required,
-          pattern: {
-            value: element.validation.regex as RegExp ?? /(.*)/,
-            message: element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Select
-            size='sm'
-            {...element}
-            id={element.id ?? generateId()}
-            onSelectionChange={onChange}
-            label={liveSearching ? 'Loading...' : element.label}
-            selectionMode="multiple"
-            selectedKeys={value}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
-            disabled={element.disabled ?? !enable}
-            className='max-w-lg'
-          >
-            {
-              (liveData || (element.options ?? [])).map((opt) => (
-                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
-              ))
-            }
-          </Select>
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeMultiSelect
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { generateId } from '../../tools/general'
+import { IMakeMultiSelectProps } from '../../interfaces/make-multi-select'
+import { Select, SelectItem } from '@nextui-org/react'
+
+const MakeMultiSelect: FC<IMakeMultiSelectProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
+
+  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,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          },
+            ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+          <Select
+            size='sm'
+            {...element}
+            id={element.id ?? generateId()}
+            onSelectionChange={onChange}
+            label={liveSearching ? 'Loading...' : element.label}
+            selectionMode="multiple"
+            selectedKeys={value}
+            color={invalid ? 'danger' : undefined}
+            isInvalid={invalid}
+            errorMessage={invalid ? (validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+            className='max-w-lg'
+          >
+            {
+              (liveData || (element.options ?? [])).map((opt) => (
+                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
+              ))
+            }
+          </Select>
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeMultiSelect

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

@@ -1,53 +1,54 @@
-import React, { FC, useEffect } 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 { Select, SelectItem } from '@nextui-org/react'
-
-const MakeSelect: FC<IMakeSelectProps> = ({ element, ...props }) => {
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ element, ...props })
-
-  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: element.validation.required,
-          pattern: {
-            value: element.validation.regex as RegExp ?? /(.*)/,
-            message: element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Select
-            size='sm'
-            {...element}
-            id={element.id ?? generateId()}
-            onChange={onChange}
-            label={liveSearching ? 'Loading...' : element.label}
-            selectedKeys={[value]}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
-            disabled={element.disabled ?? !enable}
-          >
-            {
-              (liveData || (element.options ?? [])).map((opt) => (
-                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
-              ))
-            }
-          </Select>
-        )}
-      />
-      : <></>
-  )
-}
-
-export default MakeSelect
+import React, { FC, useEffect } 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 { Select, SelectItem } from '@nextui-org/react'
+
+const MakeSelect: FC<IMakeSelectProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
+
+  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,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          },
+            ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+          <Select
+            size='sm'
+            {...element}
+            id={element.id ?? generateId()}
+            onChange={onChange}
+            label={liveSearching ? 'Loading...' : element.label}
+            selectedKeys={[value]}
+            color={invalid ? 'danger' : undefined}
+            isInvalid={invalid}
+            errorMessage={invalid ? (validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+          >
+            {
+              (liveData || (element.options ?? [])).map((opt) => (
+                <SelectItem key={opt.id} value={opt.id}>{opt.name}</SelectItem>
+              ))
+            }
+          </Select>
+        )}
+      />
+      : <></>
+  )
+}
+
+export default MakeSelect

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

@@ -1,16 +1,16 @@
-import React, { FC } from 'react'
-import { IMakeTextProps } from '../../interfaces/make-text'
-
-const MakeText: FC<IMakeTextProps> = ({
-  element
-}) => {
-  return (
-    <div className='text-xs text-center'>
-      <p style={element.styles}>
-        {element.text}
-      </p>
-    </div>
-  )
-}
-
-export default MakeText
+import React, { FC } from 'react'
+import { IMakeTextProps } from '../../interfaces/make-text'
+
+const MakeText: FC<IMakeTextProps> = ({
+  element
+}) => {
+  return (
+    <div className='text-xs text-center'>
+      <p style={element.styles}>
+        {element.text}
+      </p>
+    </div>
+  )
+}
+
+export default MakeText

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

@@ -1,47 +1,48 @@
-import React, { FC, useEffect } 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 { Textarea } from '@nextui-org/react'
-
-const MakeTextarea: FC<IMakeTextareaProps> = ({ element, ...props }) => {
-  const { render, enable, checkField } = useFieldRender({ ...props, element })
-
-  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: element.validation.required,
-          pattern: {
-            value: element.validation.regex as RegExp ?? /(.*)/,
-            message: element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Textarea
-            {...element}
-            disableAutosize
-            id={element.id ?? generateId()}
-            onChange={onChange}
-            label={element.label}
-            value={value ?? ''}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (element.validation.message ?? '') : undefined}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeTextarea
+import React, { FC, useEffect } 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 { Textarea } from '@nextui-org/react'
+
+const MakeTextarea: FC<IMakeTextareaProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable, checkField } = useFieldRender({ ...props, element })
+
+  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,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          },
+            ...validation
+        }}
+        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
+          <Textarea
+            {...element}
+            disableAutosize
+            id={element.id ?? generateId()}
+            onChange={onChange}
+            label={element.label}
+            value={value ?? ''}
+            color={invalid ? 'danger' : undefined}
+            isInvalid={invalid}
+            errorMessage={invalid ? (validation.message ?? '') : undefined}
+            disabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeTextarea

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

@@ -1,12 +1,12 @@
-import React, { FC } from 'react'
-import { IMakeTitle } from '../../interfaces/make-title'
-
-const MakeTitle: FC<IMakeTitle> = ({ title }) => {
-  return (
-    <div className='flex text-center items-center justify-center text-xl'>
-      {title}
-    </div>
-  )
-}
-
-export default MakeTitle
+import React, { FC } from 'react'
+import { IMakeTitle } from '../../interfaces/make-title'
+
+const MakeTitle: FC<IMakeTitle> = ({ title }) => {
+  return (
+    <div className='flex text-center items-center justify-center text-xl'>
+      {title}
+    </div>
+  )
+}
+
+export default MakeTitle

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

@@ -1,44 +1,44 @@
-import React, { FC, useEffect } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeToggleProps } from '../../interfaces/make-toggle'
-import { Switch } from '@nextui-org/react'
-import { generateId } from '../../tools/general'
-
-const MakeToggle: FC<IMakeToggleProps> = (props) => {
-  const { render, enable, checkField } = useFieldRender(props)
-
-  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={props.element.name}
-        rules={{
-          required: props.element.validation.required,
-          pattern: {
-            value: props.element.validation.regex as RegExp ?? /(.*)/,
-            message: props.element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange, value } }) => (
-          <Switch
-            {...props.element}
-            id={props.element.id ?? generateId()}
-            isSelected={value}
-            onValueChange={onChange}
-            isDisabled={props.element.disabled ?? !enable}
-          >
-            {props.element.label}
-          </Switch>
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeToggle
+import React, { FC, useEffect } from 'react'
+import { Controller } from 'react-hook-form'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeToggleProps } from '../../interfaces/make-toggle'
+import { Switch } from '@nextui-org/react'
+import { generateId } from '../../tools/general'
+
+const MakeToggle: FC<IMakeToggleProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable, checkField } = useFieldRender({ ...props, element })
+
+  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,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          }
+        }}
+        render={({ field: { onChange, value } }) => (
+          <Switch
+            {...element}
+            id={element.id ?? generateId()}
+            isSelected={value}
+            onValueChange={onChange}
+            isDisabled={element.disabled ?? !enable}
+          >
+            {element.label}
+          </Switch>
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeToggle

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

@@ -1,41 +1,34 @@
-import React,{ FC } from 'react'
-import { Controller } from 'react-hook-form'
-import InputUpload from '../input-upload/input-upload'
-import { useFieldRender } from '../../hooks/field-render'
-import { IMakeUploadProps } from '../../interfaces/make-upload'
-
-const MakeUpload : FC<IMakeUploadProps> = (props) => {
-  const { render, enable } = useFieldRender(props)
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={props.element.name}
-        rules={{
-          required: props.element.validation.required,
-          pattern: {
-            value: props.element.validation.regex as RegExp ?? /(.*)/,
-            message: props.element.validation.message ?? ''
-          }
-        }}
-        render={({ field: { onChange } }) => (
-          <InputUpload
-            id={props.element.id}
-            name={props.element.name}
-            disabled={props.element.disabled ?? !enable}
-            onChange={onChange}
-            label={props.element.label}
-            helpText={props.element.helpText}
-            style={props.element.styles}
-            accept={props.element.accept}
-            read={props.element.read}
-            readAsArrayBuffer={props.element.readAsArrayBuffer}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeUpload
+import React,{ FC } from 'react'
+import { Controller } from 'react-hook-form'
+import InputUpload from '../input-upload/input-upload'
+import { useFieldRender } from '../../hooks/field-render'
+import { IMakeUploadProps } from '../../interfaces/make-upload'
+
+const MakeUpload : FC<IMakeUploadProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
+  const { render, enable } = useFieldRender({ ...props, element })
+
+  return (
+    render
+      ? <Controller
+        control={props.control}
+        name={element.name}
+        rules={{
+          required,
+          pattern: {
+            value: validation.regex as RegExp ?? /(.*)/,
+            message: validation.message ?? ''
+          }
+        }}
+        render={({ field: { onChange } }) => (
+          <InputUpload
+              {...element}
+            disabled={element.disabled ?? !enable}
+            onChange={onChange}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeUpload

package/src/components/portal/portal.tsx

@@ -1,36 +1,36 @@
-'use client'
-import React, { useRef, useEffect, useState, FC } from 'react'
-import { createPortal } from 'react-dom'
-import { IPortal } from '../../interfaces/portal'
-
-export const Portal: FC<IPortal> = (props) => {
-  const ref = useRef<Element | null>(null)
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    if (mounted && !props.portalOpen && props.closeTime > 0) {
-      const timeoutId = setTimeout(() => {
-        setMounted(false)
-        ref.current = null
-      }, props.closeTime)
-
-      return () => clearTimeout(timeoutId)
-    } else if (mounted && !props.portalOpen) {
-      setMounted(false)
-      ref.current = null
-    } else if (!mounted && props.portalOpen) {
-      ref.current = document.querySelector<HTMLElement>(props.portalTag ?? '#portal')
-      setMounted(true)
-    }
-  }, [mounted, props.closeTime, props.portalOpen, props.portalTag])
-
-  return (
-    mounted && ref.current
-      ? createPortal(
-        <div className='transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20'>
-          {props.children}
-        </div>
-        , ref.current)
-      : null
-  )
-}
+'use client'
+import React, { useRef, useEffect, useState, FC } from 'react'
+import { createPortal } from 'react-dom'
+import { IPortal } from '../../interfaces/portal'
+
+export const Portal: FC<IPortal> = (props) => {
+  const ref = useRef<Element | null>(null)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    if (mounted && !props.portalOpen && props.closeTime > 0) {
+      const timeoutId = setTimeout(() => {
+        setMounted(false)
+        ref.current = null
+      }, props.closeTime)
+
+      return () => clearTimeout(timeoutId)
+    } else if (mounted && !props.portalOpen) {
+      setMounted(false)
+      ref.current = null
+    } else if (!mounted && props.portalOpen) {
+      ref.current = document.querySelector<HTMLElement>(props.portalTag ?? '#portal')
+      setMounted(true)
+    }
+  }, [mounted, props.closeTime, props.portalOpen, props.portalTag])
+
+  return (
+    mounted && ref.current
+      ? createPortal(
+        <div className='transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20'>
+          {props.children}
+        </div>
+        , ref.current)
+      : null
+  )
+}