form-craft-package 1.9.2 → 1.9.3-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.9.2",
+  "version": "1.9.3-dev.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook.ts

@@ -1,6 +1,6 @@
 import { DeviceBreakpointEnum, FormElementConditionalKeyEnum, FormPreservedItemKeys } from '../../../../enums'
 import { isValidationsMet } from './visibility-utils'
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 import useGetCurrentBreakpoint from '../use-window-width.hook'
 import { Form, FormInstance } from 'antd'
 import { hiddenStore } from './visibility-store'
@@ -19,7 +19,7 @@ export function useSetHiddenNodes(
   const currentBreakpoint = useGetCurrentBreakpoint()
   const isFormValuesSet = Form.useWatch(FormPreservedItemKeys.IsDetailsDataSet, { form: formDataRef, preserve: true })
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     // during the initial renders, handle the initially hidden nodes
     if (!formDataRef) return
 

package/src/components/common/custom-hooks/use-node-condition.hook/use-node-condition.hook.ts

@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from 'react'
+import { useLayoutEffect, useState, useSyncExternalStore } from 'react'
 import { disabledStore, hiddenStore } from './visibility-store'
 
 export const useIsNodeHidden = (id: string): boolean =>
@@ -8,7 +8,24 @@ export const useIsNodeHidden = (id: string): boolean =>
     () => hiddenStore.getSnapshot().includes(id),
   )
 
-export const checkIsNodeHidden = (id: string): boolean => hiddenStore.getSnapshot().includes(id)
+// export const checkIsNodeHidden = (id: string): boolean => hiddenStore.getSnapshot().includes(id)
+const arraysEqual = (a: string[], b: string[]) => {
+  if (a.length !== b.length) return false
+  return a.every((x, i) => x === b[i])
+}
+export function useHiddenIds(): string[] {
+  const [ids, setIds] = useState<string[]>(() => hiddenStore.getSnapshot())
+
+  useLayoutEffect(() => {
+    const unsubscribe = hiddenStore.subscribe(() => {
+      const next = hiddenStore.getSnapshot()
+      setIds((prev) => (arraysEqual(prev, next) ? prev : next))
+    })
+    return unsubscribe
+  }, [])
+
+  return ids
+}
 
 export const useIsNodeDisabled = (id: string): boolean =>
   useSyncExternalStore(

package/src/components/companies/3-config-provider/index.tsx

@@ -20,7 +20,23 @@ export function ConfigProviderLayout({ children }: { children: ReactNode }): JSX
 
   return (
     <ConfigContext.Provider value={{ config }}>
-      <ConfigProvider theme={theme}>
+      <ConfigProvider
+        theme={{
+          ...theme,
+          token: {
+            ...theme.token,
+            screenXSMin: 320,
+            screenXS: 375,
+            screenXSMax: 425,
+            screenSMMax: 768,
+            screenMDMax: 1024,
+            screenLGMin: 1025,
+            screenLG: 1100,
+            screenLGMax: 1200,
+            screenXLMax: 1440,
+          },
+        }}
+      >
         {showSwitchCompany && (
           <div className="absolute top-2 right-2 z-20">
             <Button_FillerPortal

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -7,19 +7,15 @@ import { LayoutRowRepeatableRenderer } from './repeatable-render'
 import { IDndLayoutElement, IDndLayoutRow, IFormJoin } from '../../../../types'
 import { IDynamicButton_DisplayStateProps } from '../3-element/1-dynamic-button'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
-import {
-  checkIsNodeHidden,
-  useIsNodeHidden,
-} from '../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
+import { useHiddenIds } from '../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
 
 export const LayoutRendererRow = memo(
   ({ basePath = [], rowData, dataCount, formContext, elements, renderButton }: ILayoutRendererRow) => {
-    const isHidden = useIsNodeHidden(rowData.id)
-
+    const hiddenIds = useHiddenIds()
 
     return (
       <div
-        style={{ display: isHidden ? 'none' : undefined }}
+        style={{ display: hiddenIds.includes(rowData.id) ? 'none' : undefined }}
         id={rowData.id}
         className={ELEMENTS_DEFAULT_CLASS.LayoutRowContainer}
       >
@@ -41,7 +37,7 @@ export const LayoutRendererRow = memo(
                 ...getGridContainerStyle(rowData.display),
               }
               const hiddenColsIndices = rowData.children.reduce(
-                (curr: number[], col, colIdx) => (checkIsNodeHidden(col.id) ? [...curr, colIdx] : curr),
+                (curr: number[], col, colIdx) => (hiddenIds.includes(col.id) ? [...curr, colIdx] : curr),
                 [],
               )
 
@@ -55,7 +51,7 @@ export const LayoutRendererRow = memo(
 
               return (
                 <div
-                  className={`${ELEMENTS_DEFAULT_CLASS.LayoutRow} ${isHidden ? 'hidden' : ''}`}
+                  className={`${ELEMENTS_DEFAULT_CLASS.LayoutRow} ${hiddenIds.includes(rowData.id) ? 'hidden' : ''}`}
                   style={{ ...style, gridTemplateColumns, maxWidth: '100vw', overflowX: 'auto' }}
                 >
                   {rowData.children.map((col, colIdx) => (

package/src/components/form/layout-renderer/3-element/1-dynamic-button/index.tsx

@@ -266,9 +266,9 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       >
         {isPublic &&
           isNewFormDataPage(formDataId) &&
-          btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges && (
-            <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
-          )}
+          ![ButtonActionCategoryEnum.SaveDataChanges, ButtonActionCategoryEnum.Navigate].includes(
+            btnProps.category,
+          ) && <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />}
         {t({ key: btnKey, type: TranslationTextTypeEnum.Label })}
       </Button_FillerPortal>
       {!!dataLoadingType && (

package/src/components/form/layout-renderer/3-element/11-breadcrumb/index.scss

@@ -0,0 +1,10 @@
+.ant-select.ant-select-outlined.fc-breadcrumb.responsive {
+  .ant-select-selector {
+    @apply bg-transparent border-none;
+  }
+  &.ant-select-focused {
+    .ant-select-selector {
+      @apply shadow-none;
+    }
+  }
+}

package/src/components/form/layout-renderer/3-element/11-breadcrumb/index.tsx

@@ -0,0 +1,100 @@
+import { IBreadcrumb, useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
+import { Button_FillerPortal } from '../../../../common/button'
+import { useNavigate } from 'react-router-dom'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
+import React, { memo, useMemo } from 'react'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
+import { IElementBaseProps } from '../'
+import { useTranslation } from '../../../../common/custom-hooks/use-translation.hook/hook'
+import useGetCurrentBreakpoint from '../../../../common/custom-hooks/use-window-width.hook'
+import { Select } from 'antd'
+import {
+  DeviceBreakpointEnum,
+  PageViewTypEnum,
+  TranslationTextSubTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../../enums'
+
+import './index.scss'
+
+function LayoutRenderer_Breadcrumb({ formId, elementKey }: { formId?: number } & IElementBaseProps) {
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  const { t } = useTranslation(formId)
+  const navigate = useNavigate()
+  const { breadcrumbs, sliceAt } = useBreadcrumb()
+
+  const [detailText, newText, listText] = t([
+    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbDetail },
+    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbNew },
+    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbList },
+  ])
+
+  const showAsSelect = useMemo(
+    () =>
+      [DeviceBreakpointEnum.Mobile, DeviceBreakpointEnum.TabletPortrait].includes(currentBreakpoint) &&
+      breadcrumbs.length > 1,
+    [currentBreakpoint, breadcrumbs],
+  )
+
+  if (showAsSelect)
+    return (
+      <Select
+        suffixIcon={null}
+        value={breadcrumbs[breadcrumbs.length - 1].href}
+        showSearch
+        optionFilterProp="label"
+        allowClear={false}
+        className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} responsive`}
+        onChange={(bc) => {
+          const decodedUri = decodeURIComponent(bc)
+          const bcIdx = breadcrumbs.findIndex((bc) => bc.href === decodedUri)
+
+          sliceAt(bcIdx)
+          navigate(decodedUri)
+        }}
+        options={breadcrumbs.map((bc) => ({
+          value: bc.href,
+          label: (
+            <div className="flex gap-2 items-center">
+              <FaChevronLeft className="text-primary" size={10} />
+              {getText(bc, { newText, detailText, listText })}
+            </div>
+          ),
+        }))}
+      />
+    )
+
+  return (
+    <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
+      {breadcrumbs.map((bc, bcIdx) => (
+        <React.Fragment key={bcIdx}>
+          <Button_FillerPortal
+            link
+            disabled={breadcrumbs.length - 1 === bcIdx}
+            onClick={() => {
+              sliceAt(bcIdx)
+              navigate(bc.href)
+            }}
+          >
+            {getText(bc, { newText, detailText, listText })}
+          </Button_FillerPortal>
+          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+export default memo(LayoutRenderer_Breadcrumb)
+
+const getText = (bc: IBreadcrumb, texts: { newText: string; detailText: string; listText: string }) => (
+  <span className="font-normal italic">
+    {bc.type === PageViewTypEnum.New ? `${texts.newText} ` : ''}
+    {bc.label}
+    {bc.type === PageViewTypEnum.Details
+      ? ` ${texts.detailText}`
+      : bc.type === PageViewTypEnum.List
+      ? ` ${texts.listText}`
+      : ''}
+  </span>
+)

package/src/components/form/layout-renderer/3-element/2-field-element.tsx

@@ -264,7 +264,7 @@ interface IMapperFieldObj {
   nameFullPath?: string | (string | number)[]
   label?: string | ReactNode
   description?: string
-  placeholder?: string | [string, string]
+  placeholder?: string | [string, string] | ReactNode
   disabled?: boolean
   options?: ISelectOption[]
   isMultiValue?: boolean

package/src/components/form/layout-renderer/3-element/8-fields-with-options.tsx

@@ -1,10 +1,4 @@
 import { memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  PageViewTypEnum,
-  FieldElementOptionSourceEnum,
-  FilterConfigTypeEnum,
-  TranslationTextTypeEnum,
-} from '../../../../enums'
 import { IElementBaseProps } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
@@ -16,6 +10,17 @@ import { useFindDynamiForm } from '../../../common/custom-hooks'
 import { useNavigate } from 'react-router-dom'
 import { constructDynamicFormHref, getIdEqualsQuery, isNewFormDataPage } from '../../../../functions'
 import { useCacheFormLayoutConfig } from '../../../common/custom-hooks/use-cache-form-layout-config.hook'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import useGetCurrentBreakpoint from '../../../common/custom-hooks/use-window-width.hook'
+import {
+  PageViewTypEnum,
+  FieldElementOptionSourceEnum,
+  FilterConfigTypeEnum,
+  TranslationTextTypeEnum,
+  ElementTypeEnum,
+  DeviceBreakpointEnum,
+  TranslationTextSubTypeEnum,
+} from '../../../../enums'
 import {
   IFilterConfig,
   IFormJoin,
@@ -29,7 +34,6 @@ import {
   ISelectElement,
   ISelectElementProps,
 } from '../../../../types'
-import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 
 function LayoutRenderer_FieldsWithOptions({
   formContext,
@@ -38,6 +42,7 @@ function LayoutRenderer_FieldsWithOptions({
   isDisabled,
   elementKey,
 }: ILayoutRenderer_FieldsWithOptions) {
+  const currentBreakpoint = useGetCurrentBreakpoint()
   const { t } = useTranslation(formContext.formId)
   const navigate = useNavigate()
   const { getFormById } = useFindDynamiForm()
@@ -178,7 +183,6 @@ function LayoutRenderer_FieldsWithOptions({
   const fetchDetailsStaticOptions = useCallback(
     (optionSource: IOptionSourceReadFromDetails) => {
       const { formId, optionFieldPath } = optionSource
-      setLoading(false)
       if (!formId || !cachedConfig) {
         setLoading(false)
         return
@@ -191,11 +195,16 @@ function LayoutRenderer_FieldsWithOptions({
       const element = elements[field]
       const fieldOptionSource = (element as ISelectElement | IRadioElement).props?.optionSource as IOptionSourceConstant
       if (fieldOptionSource?.type === FieldElementOptionSourceEnum.Static && Array.isArray(fieldOptionSource.options))
-        setOptions(fieldOptionSource.options.map((op) => ({ value: op.id, label: op.value })))
+        setOptions(
+          fieldOptionSource.options.map((op) => ({
+            value: op.id,
+            label: t({ key: element.key, type: TranslationTextTypeEnum.OptionValue, subType: op.id }),
+          })),
+        )
 
       setLoading(false)
     },
-    [cachedConfig],
+    [cachedConfig, elementKey],
   )
 
   useEffect(() => {
@@ -236,11 +245,24 @@ function LayoutRenderer_FieldsWithOptions({
     }
   }, [])
 
-  const [label, placeholder] = t([
+  const [label, placeholder, goToDetailsText] = t([
     { key: elementData.key, type: TranslationTextTypeEnum.Label },
     { key: elementData.key, type: TranslationTextTypeEnum.Placeholder },
+    { key: elementData.key, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.Secondary },
   ])
 
+  const type = useMemo(() => {
+    // converting Radio into Select on XS, and SM screens if the options are more than 2
+    if (
+      elementData.elementType === ElementTypeEnum.Radio &&
+      [DeviceBreakpointEnum.Mobile, DeviceBreakpointEnum.TabletPortrait].includes(currentBreakpoint) &&
+      options.length > 2
+    )
+      return ElementTypeEnum.Select
+
+    return elementData.elementType
+  }, [currentBreakpoint, elementData.elementType, options.length])
+
   return (
     <div className="relative">
       <LayoutRenderer_FieldElement formRef={formRef} elementKey={elementData.key} formId={formContext.formId}>
@@ -250,25 +272,23 @@ function LayoutRenderer_FieldsWithOptions({
           label: label && (
             <div className="flex items-center gap-2 w-full">
               <span>{label}</span>
-              {(props as ISelectElementProps).goToDetails?.enabled &&
-                (props as ISelectElementProps).goToDetails?.text &&
-                selectedValue && (
-                  <div
-                    className="px-2 text-primary font-bold text-12 hover:underline cursor-pointer"
-                    onClick={() => {
-                      const formInfo = getFormById(props.optionSource.formId)
-                      if (!formInfo) return
-
-                      push({ label: formInfo.name, href: location.pathname, type: PageViewTypEnum.Details })
-                      navigate(`${constructDynamicFormHref(formInfo.name)}/${selectedValue}`)
-                    }}
-                  >
-                    {(props as ISelectElementProps).goToDetails!.text}
-                  </div>
-                )}
+              {(props as ISelectElementProps).goToDetails?.enabled && goToDetailsText && selectedValue && (
+                <div
+                  className="px-2 text-primary font-bold text-12 hover:underline cursor-pointer"
+                  onClick={() => {
+                    const formInfo = getFormById(props.optionSource.formId)
+                    if (!formInfo) return
+
+                    push({ label: formInfo.name, href: location.pathname, type: PageViewTypEnum.Details })
+                    navigate(`${constructDynamicFormHref(formInfo.name)}/${selectedValue}`)
+                  }}
+                >
+                  {goToDetailsText}
+                </div>
+              )}
             </div>
           ),
-          type: elementData.elementType,
+          type,
           name: formItem.name,
           validations: elementData.validations,
           options,

package/src/constants.ts

@@ -26,7 +26,7 @@ export const LANGUAGE_LABELS = {
   [CountryEnum.CN]: 'Chinese',
 }
 export const DEVICE_BREAKPOINTS = {
-  [DeviceBreakpointEnum.Mobile]: '576px',
+  [DeviceBreakpointEnum.Mobile]: '425px',
   [DeviceBreakpointEnum.TabletPortrait]: '768px',
   [DeviceBreakpointEnum.TabletLandscape]: '992px',
   [DeviceBreakpointEnum.Laptop]: '1200px',

package/src/components/form/layout-renderer/3-element/11-breadcrumb.tsx

@@ -1,51 +0,0 @@
-import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
-import { Button_FillerPortal } from '../../../common/button'
-import { useNavigate } from 'react-router-dom'
-import { FaChevronRight } from 'react-icons/fa6'
-import React, { memo } from 'react'
-import { PageViewTypEnum, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
-import { IElementBaseProps } from '.'
-import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
-
-function LayoutRenderer_Breadcrumb({ formId, elementKey }: { formId?: number } & IElementBaseProps) {
-  const { t } = useTranslation(formId)
-  const navigate = useNavigate()
-  const { breadcrumbs, sliceAt } = useBreadcrumb()
-
-  const [detailText, newText, listText] = t([
-    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbDetail },
-    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbNew },
-    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbList },
-  ])
-
-  return (
-    <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
-      {breadcrumbs.map((bc, bcIdx) => (
-        <React.Fragment key={bcIdx}>
-          <Button_FillerPortal
-            link
-            disabled={breadcrumbs.length - 1 === bcIdx}
-            onClick={() => {
-              sliceAt(bcIdx)
-              navigate(bc.href)
-            }}
-          >
-            <span className="font-normal italic">
-              {bc.type === PageViewTypEnum.New ? `${newText} ` : ''}
-              {bc.label}
-              {bc.type === PageViewTypEnum.Details
-                ? ` ${detailText}`
-                : bc.type === PageViewTypEnum.List
-                ? ` ${listText}`
-                : ''}
-            </span>
-          </Button_FillerPortal>
-          {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
-        </React.Fragment>
-      ))}
-    </div>
-  )
-}
-
-export default memo(LayoutRenderer_Breadcrumb)