dynamic-modal 1.1.4 → 1.1.7

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 }, 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
+'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 }, 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
+'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 }, 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
+'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 }, 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
+'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

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

@@ -1,40 +1,40 @@
-'use client'
-
-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 }, enableIf, renderIf, ...element }, ...props }) => {
-  const { render, enable } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
-
-  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 } }) => (
-          <InputUpload
-            {...element}
-            onChange={onChange}
-            disabled={element.disabled ?? !enable}
-          />
-        )}
-      />
-      : null
-  )
-}
-
-export default MakeUpload
+'use client'
+
+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 }, enableIf, renderIf, ...element }, ...props }) => {
+  const { render, enable } = useFieldRender({ ...props, element: { enableIf, renderIf, ...element} })
+
+  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 } }) => (
+          <InputUpload
+            {...element}
+            onChange={onChange}
+            disabled={element.disabled ?? !enable}
+          />
+        )}
+      />
+      : null
+  )
+}
+
+export default MakeUpload

package/src/components/portal/portal.tsx

@@ -1,37 +1,37 @@
-'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
+  )
+}