@scbt-ecom/ui 0.154.0 → 0.154.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/shared/ui/carousel/Carousel.js +1 -1
- package/dist/lib/shared/ui/carousel/Carousel.js.map +1 -1
- package/dist/lib/widgets/carouselBlock/CarouselBlock.js +1 -1
- package/dist/lib/widgets/carouselBlock/CarouselBlock.js.map +1 -1
- package/dist/lib/widgets/dynamicForm/DynamicForm.js +1 -1
- package/dist/lib/widgets/dynamicForm/DynamicForm.js.map +1 -1
- package/dist/lib/widgets/dynamicFormDialog/DynamicFormDialog.js +1 -1
- package/dist/lib/widgets/dynamicFormDialog/DynamicFormDialog.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/types/lib/shared/ui/carousel/Carousel.d.ts +2 -2
- package/dist/types/lib/widgets/carouselBlock/CarouselBlock.d.ts +1 -1
- package/dist/types/lib/widgets/dynamicForm/DynamicForm.d.ts +2 -1
- package/dist/types/lib/widgets/dynamicFormDialog/DynamicFormDialog.d.ts +2 -1
- package/dist/types/lib/widgets/model/helpers.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useCarousel as L}from"./model/hooks/useCarousel.js";import{useDotsNavigation as H}from"./model/hooks/useDotsNavigation.js";import{useArrowNavigation as M}from"./model/hooks/useArrowNavigation.js";import{cn as t}from"../../utils/cn.js";import{RenderSlides as R}from"./ui/RenderSlides.js";import{defaultNavigationOptions as T,defaultCarouselOptions as G,defaultAutoPlayOptions as V}from"./model/constant.js";import{ArrowNavigationButton as u}from"./ui/ArrowNavigationButton.js";import{TypeGuards as W}from"../../utils/typeGuards.js";import{StepsList as q}from"./ui/stepsList/StepsList.js";import{DotsNavigations as z}from"./ui/DotsNavigations.js";import{Heading as E}from"../heading/Heading.js";const eo=({carouselOptions:x,navigationOptions:w,autoPlayOptions:k,slidesOptions:d,setVisibleIndex:m,visibleIndex:l,heading:i,stepsList:p,carouselClasses:o})=>{const O={...G,...x},y={...T,...w},A={...V,...k},{arrowsOnMob:r,arrowsOnDesk:n,dotsOnMob:c,dotsOnDesk:f}=y,{slideVariant:D}=d,v=D==="stepsList",{emblaApi:a,navigationHandler:b,emblaRef:B}=L({carouselOptions:O,autoPlayOptions:A}),P=H({emblaApi:a,navigationHandler:b,setVisibleIndex:m}),{prevBtnDisabled:S,nextBtnDisabled:j,onClickNavigationButton:g}=M({emblaApi:a,navigationHandler:b}),C=N=>{a?.scrollTo(N),m(N)},h=e("div",{className:t("overflow-hidden",o?.overlay,{"max-w-[328px] desktop:max-w-[464px]":v}),ref:B,children:e(R,{classes:o?.renderSlidesClasses,slidesOptions:d})});return s("div",{className:"flex w-full flex-col",children:[s("div",{className:t("mb-6 flex items-center justify-between gap-6 desktop:mb-12",{"desktop:hidden":!n&&!i,"mobile:hidden":!r&&!i},o?.header),children:[!!i&&e(E,{as:"h2",className:t(o?.heading),children:i}),(r||n)&&s("div",{className:t("ml-auto flex items-center gap-2",{"mobile:hidden":!r,"desktop:hidden":!n},o?.arrowsWrapper),children:[e(u,{mode:"prev",onClick:g,disabled:S,classes:o?.arrowPrevClasses}),e(u,{mode:"next",onClick:g,disabled:j,classes:o?.arrowNextClasses})]})]}),v&&W.isArray(p)?s("div",{className:t("flex items-start gap-10 mobile:flex-col mobile:gap-4 desktop:justify-between",o?.content),children:[e(q,{visibleIndex:l,onChangeStep:C,stepsList:p,classes:o?.stepsListClasses}),h]}):h,(c||f)&&e("div",{className:t("mx-auto",{"mobile:hidden":!c,"desktop:hidden":!f},o?.dots),children:e(z,{visibleIndex:l,...P})})]})};export{eo as Carousel};
|
|
2
2
|
//# sourceMappingURL=Carousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../../../../lib/shared/ui/carousel/Carousel.tsx"],"sourcesContent":["import { type Dispatch, type SetStateAction } from 'react'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport { type AutoplayOptionsType } from 'embla-carousel-autoplay'\nimport { Heading } from '../heading'\nimport { useArrowNavigation, useCarousel, useDotsNavigation } from './model'\nimport {\n defaultAutoPlayOptions,\n defaultCarouselOptions,\n defaultNavigationOptions,\n type NavigationOptions,\n type SlidesOptions,\n type SlideVariant\n} from './model'\nimport {\n ArrowNavigationButton,\n type ArrowNavigationButtonClasses,\n DotsNavigations,\n RenderSlides,\n type RenderSlidesClasses,\n type StepListClasses,\n type StepListItemType,\n StepsList\n} from './ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\ntype CarouselClasses = {\n overlay?: string\n arrowsWrapper?: string\n header?: string\n heading?: string\n dots?: string\n content?: string\n arrowNextClasses?: ArrowNavigationButtonClasses\n arrowPrevClasses?: ArrowNavigationButtonClasses\n stepsListClasses?: StepListClasses\n renderSlidesClasses?: RenderSlidesClasses\n}\n\nexport interface CarouselProps<V extends SlideVariant> {\n setVisibleIndex: Dispatch<SetStateAction<number>>\n visibleIndex: number\n slidesOptions: SlidesOptions<V>\n\n heading?: string\n carouselOptions?: EmblaOptionsType\n autoPlayOptions?: AutoplayOptionsType\n navigationOptions?: NavigationOptions\n stepsList?: StepListItemType[]\n
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../../../../lib/shared/ui/carousel/Carousel.tsx"],"sourcesContent":["import { type Dispatch, type SetStateAction } from 'react'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport { type AutoplayOptionsType } from 'embla-carousel-autoplay'\nimport { Heading } from '../heading'\nimport { useArrowNavigation, useCarousel, useDotsNavigation } from './model'\nimport {\n defaultAutoPlayOptions,\n defaultCarouselOptions,\n defaultNavigationOptions,\n type NavigationOptions,\n type SlidesOptions,\n type SlideVariant\n} from './model'\nimport {\n ArrowNavigationButton,\n type ArrowNavigationButtonClasses,\n DotsNavigations,\n RenderSlides,\n type RenderSlidesClasses,\n type StepListClasses,\n type StepListItemType,\n StepsList\n} from './ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\ntype CarouselClasses = {\n overlay?: string\n arrowsWrapper?: string\n header?: string\n heading?: string\n dots?: string\n content?: string\n arrowNextClasses?: ArrowNavigationButtonClasses\n arrowPrevClasses?: ArrowNavigationButtonClasses\n stepsListClasses?: StepListClasses\n renderSlidesClasses?: RenderSlidesClasses\n}\n\nexport interface CarouselProps<V extends SlideVariant> {\n setVisibleIndex: Dispatch<SetStateAction<number>>\n visibleIndex: number\n slidesOptions: SlidesOptions<V>\n\n heading?: string\n carouselOptions?: EmblaOptionsType\n autoPlayOptions?: AutoplayOptionsType\n navigationOptions?: NavigationOptions\n stepsList?: StepListItemType[]\n carouselClasses?: CarouselClasses\n}\n\nexport const Carousel = <V extends SlideVariant>({\n carouselOptions,\n navigationOptions,\n autoPlayOptions,\n slidesOptions,\n setVisibleIndex,\n visibleIndex,\n heading,\n stepsList,\n carouselClasses\n}: CarouselProps<V>) => {\n const mergedCarouselOptions = { ...defaultCarouselOptions, ...carouselOptions }\n const mergedNavigationOptions = { ...defaultNavigationOptions, ...navigationOptions }\n const mergedAutoPlayOptions = { ...defaultAutoPlayOptions, ...autoPlayOptions }\n const { arrowsOnMob, arrowsOnDesk, dotsOnMob, dotsOnDesk } = mergedNavigationOptions\n const { slideVariant } = slidesOptions\n const isStepListVariant = slideVariant === 'stepsList'\n\n const { emblaApi, navigationHandler, emblaRef } = useCarousel({\n carouselOptions: mergedCarouselOptions,\n autoPlayOptions: mergedAutoPlayOptions\n })\n\n const dotsProps = useDotsNavigation({ emblaApi, navigationHandler, setVisibleIndex })\n const { prevBtnDisabled, nextBtnDisabled, onClickNavigationButton } = useArrowNavigation({\n emblaApi,\n navigationHandler\n })\n\n const onChangeStep = (stepIndex: number) => {\n emblaApi?.scrollTo(stepIndex)\n setVisibleIndex(stepIndex)\n }\n\n const slidesContent = (\n <div\n className={cn('overflow-hidden', carouselClasses?.overlay, { 'max-w-[328px] desktop:max-w-[464px]': isStepListVariant })}\n ref={emblaRef}\n >\n <RenderSlides classes={carouselClasses?.renderSlidesClasses} slidesOptions={slidesOptions} />\n </div>\n )\n\n return (\n <div className='flex w-full flex-col'>\n <div\n className={cn(\n 'mb-6 flex items-center justify-between gap-6 desktop:mb-12',\n {\n 'desktop:hidden': !arrowsOnDesk && !heading,\n 'mobile:hidden': !arrowsOnMob && !heading\n },\n carouselClasses?.header\n )}\n >\n {Boolean(heading) && (\n <Heading as='h2' className={cn(carouselClasses?.heading)}>\n {heading}\n </Heading>\n )}\n\n {(arrowsOnMob || arrowsOnDesk) && (\n <div\n className={cn(\n 'ml-auto flex items-center gap-2',\n { 'mobile:hidden': !arrowsOnMob, 'desktop:hidden': !arrowsOnDesk },\n carouselClasses?.arrowsWrapper\n )}\n >\n <ArrowNavigationButton\n mode='prev'\n onClick={onClickNavigationButton}\n disabled={prevBtnDisabled}\n classes={carouselClasses?.arrowPrevClasses}\n />\n <ArrowNavigationButton\n mode='next'\n onClick={onClickNavigationButton}\n disabled={nextBtnDisabled}\n classes={carouselClasses?.arrowNextClasses}\n />\n </div>\n )}\n </div>\n\n {isStepListVariant && TypeGuards.isArray(stepsList) ? (\n <div\n className={cn('flex items-start gap-10 mobile:flex-col mobile:gap-4 desktop:justify-between', carouselClasses?.content)}\n >\n <StepsList\n visibleIndex={visibleIndex}\n onChangeStep={onChangeStep}\n stepsList={stepsList}\n classes={carouselClasses?.stepsListClasses}\n />\n {slidesContent}\n </div>\n ) : (\n slidesContent\n )}\n\n {(dotsOnMob || dotsOnDesk) && (\n <div className={cn('mx-auto', { 'mobile:hidden': !dotsOnMob, 'desktop:hidden': !dotsOnDesk }, carouselClasses?.dots)}>\n <DotsNavigations visibleIndex={visibleIndex} {...dotsProps} />\n </div>\n )}\n </div>\n )\n}\n"],"names":["Carousel","carouselOptions","navigationOptions","autoPlayOptions","slidesOptions","setVisibleIndex","visibleIndex","heading","stepsList","carouselClasses","mergedCarouselOptions","defaultCarouselOptions","mergedNavigationOptions","defaultNavigationOptions","mergedAutoPlayOptions","defaultAutoPlayOptions","arrowsOnMob","arrowsOnDesk","dotsOnMob","dotsOnDesk","slideVariant","isStepListVariant","emblaApi","navigationHandler","emblaRef","useCarousel","dotsProps","useDotsNavigation","prevBtnDisabled","nextBtnDisabled","onClickNavigationButton","useArrowNavigation","onChangeStep","stepIndex","slidesContent","jsx","cn","RenderSlides","jsxs","Heading","ArrowNavigationButton","TypeGuards","StepsList","DotsNavigations"],"mappings":"8uBAmDO,MAAMA,GAAW,CAAyB,CAC/C,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,gBAAAC,CACF,IAAwB,CACtB,MAAMC,EAAwB,CAAE,GAAGC,EAAwB,GAAGV,CAAA,EACxDW,EAA0B,CAAE,GAAGC,EAA0B,GAAGX,CAAA,EAC5DY,EAAwB,CAAE,GAAGC,EAAwB,GAAGZ,CAAA,EACxD,CAAE,YAAAa,EAAa,aAAAC,EAAc,UAAAC,EAAW,WAAAC,GAAeP,EACvD,CAAE,aAAAQ,GAAiBhB,EACnBiB,EAAoBD,IAAiB,YAErC,CAAE,SAAAE,EAAU,kBAAAC,EAAmB,SAAAC,CAAA,EAAaC,EAAY,CAC5D,gBAAiBf,EACjB,gBAAiBI,CAAA,CAClB,EAEKY,EAAYC,EAAkB,CAAE,SAAAL,EAAU,kBAAAC,EAAmB,gBAAAlB,EAAiB,EAC9E,CAAE,gBAAAuB,EAAiB,gBAAAC,EAAiB,wBAAAC,CAAA,EAA4BC,EAAmB,CACvF,SAAAT,EACA,kBAAAC,CAAA,CACD,EAEKS,EAAgBC,GAAsB,CAC1CX,GAAU,SAASW,CAAS,EAC5B5B,EAAgB4B,CAAS,CAC3B,EAEMC,EACJC,EAAC,MAAA,CACC,UAAWC,EAAG,kBAAmB3B,GAAiB,QAAS,CAAE,sCAAuCY,EAAmB,EACvH,IAAKG,EAEL,SAAAW,EAACE,EAAA,CAAa,QAAS5B,GAAiB,oBAAqB,cAAAL,CAAA,CAA8B,CAAA,CAAA,EAI/F,OACEkC,EAAC,MAAA,CAAI,UAAU,uBACb,SAAA,CAAAA,EAAC,MAAA,CACC,UAAWF,EACT,6DACA,CACE,iBAAkB,CAACnB,GAAgB,CAACV,EACpC,gBAAiB,CAACS,GAAe,CAACT,CAAA,EAEpCE,GAAiB,MAAA,EAGlB,SAAA,CAAA,EAAQF,GACP4B,EAACI,EAAA,CAAQ,GAAG,KAAK,UAAWH,EAAG3B,GAAiB,OAAO,EACpD,SAAAF,CAAA,CACH,GAGAS,GAAeC,IACfqB,EAAC,MAAA,CACC,UAAWF,EACT,kCACA,CAAE,gBAAiB,CAACpB,EAAa,iBAAkB,CAACC,CAAA,EACpDR,GAAiB,aAAA,EAGnB,SAAA,CAAA0B,EAACK,EAAA,CACC,KAAK,OACL,QAASV,EACT,SAAUF,EACV,QAASnB,GAAiB,gBAAA,CAAA,EAE5B0B,EAACK,EAAA,CACC,KAAK,OACL,QAASV,EACT,SAAUD,EACV,QAASpB,GAAiB,gBAAA,CAAA,CAC5B,CAAA,CAAA,CACF,CAAA,CAAA,EAIHY,GAAqBoB,EAAW,QAAQjC,CAAS,EAChD8B,EAAC,MAAA,CACC,UAAWF,EAAG,+EAAgF3B,GAAiB,OAAO,EAEtH,SAAA,CAAA0B,EAACO,EAAA,CACC,aAAApC,EACA,aAAA0B,EACA,UAAAxB,EACA,QAASC,GAAiB,gBAAA,CAAA,EAE3ByB,CAAA,CAAA,CAAA,EAGHA,GAGAhB,GAAaC,IACbgB,EAAC,MAAA,CAAI,UAAWC,EAAG,UAAW,CAAE,gBAAiB,CAAClB,EAAW,iBAAkB,CAACC,GAAcV,GAAiB,IAAI,EACjH,WAACkC,EAAA,CAAgB,aAAArC,EAA6B,GAAGoB,CAAA,CAAW,CAAA,CAC9D,CAAA,EAEJ,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{useState as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{useState as a}from"react";import{cn as s}from"../../shared/utils/cn.js";import{Carousel as c}from"../../shared/ui/carousel/Carousel.js";import{widgetIds as r}from"../model/helpers.js";import{ResponsiveContainer as l}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";const x=e=>{const[t,i]=a(0);return o("section",{id:r.carouselBlock,"data-test-id":r.carouselBlock,className:s(e.classes?.root),children:o(l,{className:s(e.classes?.container),children:o(c,{visibleIndex:t,setVisibleIndex:i,...e})})})};export{x as CarouselBlock,x as default};
|
|
2
2
|
//# sourceMappingURL=CarouselBlock.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselBlock.js","sources":["../../../../lib/widgets/carouselBlock/CarouselBlock.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { widgetIds } from '../model'\nimport { Carousel, type CarouselProps, ResponsiveContainer, type SlideVariant } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\n\nexport interface CarouselBlockProps<V extends SlideVariant> extends Omit<CarouselProps<V>, 'setVisibleIndex' | 'visibleIndex'> {\n
|
|
1
|
+
{"version":3,"file":"CarouselBlock.js","sources":["../../../../lib/widgets/carouselBlock/CarouselBlock.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { widgetIds } from '../model'\nimport { Carousel, type CarouselProps, ResponsiveContainer, type SlideVariant } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\n\nexport interface CarouselBlockProps<V extends SlideVariant> extends Omit<CarouselProps<V>, 'setVisibleIndex' | 'visibleIndex'> {\n classes?: {\n root?: string\n container?: string\n }\n}\n\nexport const CarouselBlock = <V extends SlideVariant>(props: CarouselBlockProps<V>) => {\n const [visibleIndex, setVisibleIndex] = useState(0)\n\n return (\n <section id={widgetIds.carouselBlock} data-test-id={widgetIds.carouselBlock} className={cn(props.classes?.root)}>\n <ResponsiveContainer className={cn(props.classes?.container)}>\n <Carousel visibleIndex={visibleIndex} setVisibleIndex={setVisibleIndex} {...props} />\n </ResponsiveContainer>\n </section>\n )\n}\n\nexport default CarouselBlock\n"],"names":["CarouselBlock","props","visibleIndex","setVisibleIndex","useState","jsx","widgetIds","cn","ResponsiveContainer","Carousel"],"mappings":"wUAYO,MAAMA,EAAyCC,GAAiC,CACrF,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAS,CAAC,EAElD,OACEC,EAAC,UAAA,CAAQ,GAAIC,EAAU,cAAe,eAAcA,EAAU,cAAe,UAAWC,EAAGN,EAAM,SAAS,IAAI,EAC5G,SAAAI,EAACG,EAAA,CAAoB,UAAWD,EAAGN,EAAM,SAAS,SAAS,EACzD,SAAAI,EAACI,EAAA,CAAS,aAAAP,EAA4B,gBAAAC,EAAmC,GAAGF,CAAA,CAAO,EACrF,EACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as
|
|
1
|
+
import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as I,createElement as L}from"react";import{getDynamicSchema as M}from"../../../src/shared/utils/getDynamicSchema.js";import{ZodUtils as R}from"../../shared/validation/utils/zodUtils.js";import{getFieldsProgress as Z,withAuthProvider as k,withApprovement as z}from"./model/helpers.js";import{useFieldsProgress as A}from"../../shared/hooks/useFieldsProgress.js";import{QueryClientProvider as Q}from"../queryClientProvider/QueryClientProvider.js";import{cn as t}from"../../shared/utils/cn.js";import{ProgressBar as U}from"../../shared/ui/progressBar/ProgressBar.js";import{HTMLRenderer as f}from"../htmlParser/HTMLRenderer.js";import{FieldMapper as q}from"../fieldMapper/FieldMapper.js";import{useControlledForm as J}from"../../shared/hooks/useControlledForm.js";import{widgetIds as y}from"../model/helpers.js";import{ResponsiveContainer as K}from"../../shared/ui/responsiveContainer/ResponsiveContainer.js";import{Icon as O}from"../../shared/ui/icon/Icon.js";import{Heading as w}from"../../shared/ui/heading/Heading.js";import{Button as T}from"../../shared/ui/button/Button.js";const fe=({fields:s,title:p,progress:r,approvement:i,chips:m,submitProps:N,auth:h,classes:o,buttonGroup:a,ssoAuthorizationTop:g=!1,backgroundColor:u,disabledButtons:S})=>{const{submitCallback:x,onErrorCallback:P}=N||{},[n,C]=I(i.type==="checkbox"?i.defaultValue:!1),c=M(s),v=R.getZodDefaults(c),{control:b,handleSubmit:B,formState:{isValid:F}}=J({schema:c,defaultValues:v,mode:"onBlur"}),j=Z(r,s),D=A({control:b,fields:j||[],schema:c}),V=l=>{x&&x({...l,agree:n})};return e(Q,{children:e("section",{id:y.form,"data-test-id":y.form,className:t("w-full",o?.root,u&&"desktop:py-[80px]"),style:{backgroundColor:u},children:d(K,{className:t("border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14","relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border"),children:[m.enabled&&d("div",{className:t("desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute","bg-color-blue-grey-100 px-2 py-1 text-color-tetriary","right-4 top-4 w-max",o?.chips?.root),children:[m.image&&e(O,{name:m.image,className:t("size-6",o?.chips?.icon)}),m.content]}),e(w,{as:"h2",className:t("text-color-dark desktop:hidden",o?.title),children:p}),e(w,{as:"h3",className:t("text-color-dark mobile:hidden",o?.title),children:p}),g&&k(h),d("form",{"data-valid":F,onSubmit:B(V,l=>P?.(l)),className:t("flex w-full flex-col gap-y-6","desktop:gap-y-8",o?.form),children:[r.enabled&&e(U,{progress:D,topContent:e(f,{html:r.title}),leftSubtitle:e(f,{html:r.leftSubtitle}),rightSubtitle:e(f,{html:r.rightSubtitle}),maxPercent:r.maxPercent,classes:o?.progressBar}),e(q,{control:b,fields:s}),d("div",{className:t("mob-body-regular-s flex flex-col items-start justify-between gap-4",{"desktop:flex-row desktop:items-center":a.length===1}),children:[z(i,n,C,o?.approvement),e("div",{className:t("flex w-full flex-col items-center justify-between gap-4 desktop:flex-row",{"desktop:w-fit":a.length===1}),children:a?.map((l,E)=>{const H=l.type==="submit"&&i.type==="checkbox"?!n:!1;return L(T,{...l,size:"lg",key:E,disabled:S||H,className:t("w-full whitespace-nowrap",{"desktop:!w-fit":a.length===1},{"w-full":!!i},o?.submit)})})})]}),!g&&k(h)]})]})})})};export{fe as DynamicForm,fe as default};
|
|
2
2
|
//# sourceMappingURL=DynamicForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicForm.js","sources":["../../../../lib/widgets/dynamicForm/DynamicForm.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { type Control, type SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport { HTMLRenderer } from '../htmlParser'\nimport { widgetIds } from '../model'\nimport {\n type Approvement,\n type ApprovementClasses,\n type ApprovementType,\n type Auth,\n type AuthMode,\n type Chips,\n type ChipsClasses,\n type ChipsType,\n getFieldsProgress,\n type Progress,\n type ProgressField,\n type ProgressType,\n type SubmitProps,\n withApprovement,\n withAuthProvider\n} from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { type BackgroundColors } from '$/shared/constants'\nimport { useControlledForm, useFieldsProgress } from '$/shared/hooks'\nimport { Button, type ButtonProps, type CheckedState, Heading, Icon, ProgressBar, ResponsiveContainer } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\ntype DynamicFormClasses = {\n root?: string\n title?: string\n fields?: string\n form?: string\n chips?: ChipsClasses\n approvement?: ApprovementClasses\n progressBar?: React.ComponentProps<typeof ProgressBar>['classes']\n submit?: string\n}\n\nexport type DynamicFormProps<\n AType extends ApprovementType,\n CType extends ChipsType,\n PType extends ProgressType,\n AuthType extends AuthMode\n> = {\n fields: FieldElement<any, any, { validation: FieldValidation; progress: ProgressField }>[]\n ssoAuthorizationTop: boolean\n title: string\n progress: Progress<PType>\n approvement: Approvement<AType>\n chips: Chips<CType>\n submitProps?: SubmitProps\n classes?: DynamicFormClasses\n buttonGroup: ButtonProps[]\n auth: Auth<AuthType>\n backgroundColor?: BackgroundColors\n}\n\nexport const DynamicForm = <\n AType extends ApprovementType,\n CType extends ChipsType,\n PType extends ProgressType,\n AuthType extends AuthMode\n>({\n fields,\n title,\n progress,\n approvement,\n chips,\n submitProps,\n auth,\n classes,\n buttonGroup,\n ssoAuthorizationTop = false,\n backgroundColor\n}: DynamicFormProps<AType, CType, PType, AuthType>) => {\n const { submitCallback, onErrorCallback } = submitProps || {}\n\n const [checked, onCheckedChange] = useState<CheckedState>(approvement.type === 'checkbox' ? approvement.defaultValue : false)\n\n const schema = getDynamicSchema(fields)\n const defaultValues = ZodUtils.getZodDefaults(schema)\n\n const {\n control,\n handleSubmit,\n formState: { isValid }\n } = useControlledForm({\n schema,\n defaultValues,\n mode: 'onBlur'\n })\n\n const fieldsProgress = getFieldsProgress(progress, fields)\n\n const formattedProgress = useFieldsProgress({ control, fields: fieldsProgress || [], schema })\n\n const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n if (submitCallback) submitCallback({ ...values, agree: checked })\n }\n\n return (\n <QueryClientProvider>\n <section\n id={widgetIds.form}\n data-test-id={widgetIds.form}\n className={cn('w-full', classes?.root, backgroundColor && `desktop:py-[80px]`)}\n style={{ backgroundColor }}\n >\n <ResponsiveContainer\n className={cn(\n 'border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14',\n 'relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border'\n )}\n >\n {chips.enabled && (\n <div\n className={cn(\n 'desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute',\n 'bg-color-blue-grey-100 px-2 py-1 text-color-tetriary',\n 'right-4 top-4 w-max',\n classes?.chips?.root\n )}\n >\n {chips.image && <Icon name={chips.image} className={cn('size-6', classes?.chips?.icon)} />}\n {chips.content}\n </div>\n )}\n <Heading as='h2' className={cn('text-color-dark desktop:hidden', classes?.title)}>\n {title}\n </Heading>\n <Heading as='h3' className={cn('text-color-dark mobile:hidden', classes?.title)}>\n {title}\n </Heading>\n {ssoAuthorizationTop && withAuthProvider(auth)}\n <form\n data-valid={isValid}\n onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))}\n className={cn('flex w-full flex-col gap-y-6', 'desktop:gap-y-8', classes?.form)}\n >\n {progress.enabled && (\n <ProgressBar\n progress={formattedProgress}\n topContent={<HTMLRenderer html={progress.title} />}\n leftSubtitle={<HTMLRenderer html={progress.leftSubtitle} />}\n rightSubtitle={<HTMLRenderer html={progress.rightSubtitle} />}\n maxPercent={progress.maxPercent}\n classes={classes?.progressBar}\n />\n )}\n <FieldMapper control={control as unknown as Control} fields={fields} />\n <div\n className={cn('mob-body-regular-s flex flex-col items-start justify-between gap-4', {\n ['desktop:flex-row desktop:items-center']: buttonGroup.length === 1\n })}\n >\n {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n <div\n className={cn('flex w-full flex-col items-center justify-between gap-4 desktop:flex-row', {\n 'desktop:w-fit': buttonGroup.length === 1\n })}\n >\n {buttonGroup?.map((button, index) => {\n const disabled = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n return (\n <Button\n {...button}\n size='lg'\n key={index}\n disabled={disabled}\n className={cn(\n 'w-full whitespace-nowrap',\n {\n ['desktop:!w-fit']: buttonGroup.length === 1\n },\n {\n 'w-full': Boolean(approvement)\n },\n classes?.submit\n )}\n />\n )\n })}\n </div>\n </div>\n {!ssoAuthorizationTop && withAuthProvider(auth)}\n </form>\n </ResponsiveContainer>\n </section>\n </QueryClientProvider>\n )\n}\n\nexport default DynamicForm\n"],"names":["DynamicForm","fields","title","progress","approvement","chips","submitProps","auth","classes","buttonGroup","ssoAuthorizationTop","backgroundColor","submitCallback","onErrorCallback","checked","onCheckedChange","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","isValid","useControlledForm","fieldsProgress","getFieldsProgress","formattedProgress","useFieldsProgress","onSubmit","values","QueryClientProvider","jsx","widgetIds","cn","jsxs","ResponsiveContainer","Icon","Heading","withAuthProvider","error","ProgressBar","HTMLRenderer","FieldMapper","withApprovement","button","index","disabled","createElement","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DynamicForm.js","sources":["../../../../lib/widgets/dynamicForm/DynamicForm.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { type Control, type SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport { HTMLRenderer } from '../htmlParser'\nimport { widgetIds } from '../model'\nimport {\n type Approvement,\n type ApprovementClasses,\n type ApprovementType,\n type Auth,\n type AuthMode,\n type Chips,\n type ChipsClasses,\n type ChipsType,\n getFieldsProgress,\n type Progress,\n type ProgressField,\n type ProgressType,\n type SubmitProps,\n withApprovement,\n withAuthProvider\n} from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { type BackgroundColors } from '$/shared/constants'\nimport { useControlledForm, useFieldsProgress } from '$/shared/hooks'\nimport { Button, type ButtonProps, type CheckedState, Heading, Icon, ProgressBar, ResponsiveContainer } from '$/shared/ui'\nimport { cn } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\ntype DynamicFormClasses = {\n root?: string\n title?: string\n fields?: string\n form?: string\n chips?: ChipsClasses\n approvement?: ApprovementClasses\n progressBar?: React.ComponentProps<typeof ProgressBar>['classes']\n submit?: string\n}\n\nexport type DynamicFormProps<\n AType extends ApprovementType,\n CType extends ChipsType,\n PType extends ProgressType,\n AuthType extends AuthMode\n> = {\n fields: FieldElement<any, any, { validation: FieldValidation; progress: ProgressField }>[]\n ssoAuthorizationTop: boolean\n title: string\n progress: Progress<PType>\n approvement: Approvement<AType>\n chips: Chips<CType>\n submitProps?: SubmitProps\n classes?: DynamicFormClasses\n buttonGroup: ButtonProps[]\n auth: Auth<AuthType>\n backgroundColor?: BackgroundColors\n disabledButtons?: boolean\n}\n\nexport const DynamicForm = <\n AType extends ApprovementType,\n CType extends ChipsType,\n PType extends ProgressType,\n AuthType extends AuthMode\n>({\n fields,\n title,\n progress,\n approvement,\n chips,\n submitProps,\n auth,\n classes,\n buttonGroup,\n ssoAuthorizationTop = false,\n backgroundColor,\n disabledButtons\n}: DynamicFormProps<AType, CType, PType, AuthType>) => {\n const { submitCallback, onErrorCallback } = submitProps || {}\n\n const [checked, onCheckedChange] = useState<CheckedState>(approvement.type === 'checkbox' ? approvement.defaultValue : false)\n\n const schema = getDynamicSchema(fields)\n const defaultValues = ZodUtils.getZodDefaults(schema)\n\n const {\n control,\n handleSubmit,\n formState: { isValid }\n } = useControlledForm({\n schema,\n defaultValues,\n mode: 'onBlur'\n })\n\n const fieldsProgress = getFieldsProgress(progress, fields)\n\n const formattedProgress = useFieldsProgress({ control, fields: fieldsProgress || [], schema })\n\n const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n if (submitCallback) submitCallback({ ...values, agree: checked })\n }\n\n return (\n <QueryClientProvider>\n <section\n id={widgetIds.form}\n data-test-id={widgetIds.form}\n className={cn('w-full', classes?.root, backgroundColor && `desktop:py-[80px]`)}\n style={{ backgroundColor }}\n >\n <ResponsiveContainer\n className={cn(\n 'border-warm-grey-200 px-4 desktop:w-[636px] desktop:gap-8 desktop:p-14',\n 'relative mx-auto flex flex-col gap-6 rounded-sm bg-color-white py-8 desktop:border'\n )}\n >\n {chips.enabled && (\n <div\n className={cn(\n 'desk-body-regular-l flex items-center gap-x-2 rounded-sm desktop:absolute',\n 'bg-color-blue-grey-100 px-2 py-1 text-color-tetriary',\n 'right-4 top-4 w-max',\n classes?.chips?.root\n )}\n >\n {chips.image && <Icon name={chips.image} className={cn('size-6', classes?.chips?.icon)} />}\n {chips.content}\n </div>\n )}\n <Heading as='h2' className={cn('text-color-dark desktop:hidden', classes?.title)}>\n {title}\n </Heading>\n <Heading as='h3' className={cn('text-color-dark mobile:hidden', classes?.title)}>\n {title}\n </Heading>\n {ssoAuthorizationTop && withAuthProvider(auth)}\n <form\n data-valid={isValid}\n onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))}\n className={cn('flex w-full flex-col gap-y-6', 'desktop:gap-y-8', classes?.form)}\n >\n {progress.enabled && (\n <ProgressBar\n progress={formattedProgress}\n topContent={<HTMLRenderer html={progress.title} />}\n leftSubtitle={<HTMLRenderer html={progress.leftSubtitle} />}\n rightSubtitle={<HTMLRenderer html={progress.rightSubtitle} />}\n maxPercent={progress.maxPercent}\n classes={classes?.progressBar}\n />\n )}\n <FieldMapper control={control as unknown as Control} fields={fields} />\n <div\n className={cn('mob-body-regular-s flex flex-col items-start justify-between gap-4', {\n ['desktop:flex-row desktop:items-center']: buttonGroup.length === 1\n })}\n >\n {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n <div\n className={cn('flex w-full flex-col items-center justify-between gap-4 desktop:flex-row', {\n 'desktop:w-fit': buttonGroup.length === 1\n })}\n >\n {buttonGroup?.map((button, index) => {\n const isDisabledByLogic = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n const disabled = disabledButtons || isDisabledByLogic\n\n return (\n <Button\n {...button}\n size='lg'\n key={index}\n disabled={disabled}\n className={cn(\n 'w-full whitespace-nowrap',\n {\n ['desktop:!w-fit']: buttonGroup.length === 1\n },\n {\n 'w-full': Boolean(approvement)\n },\n classes?.submit\n )}\n />\n )\n })}\n </div>\n </div>\n {!ssoAuthorizationTop && withAuthProvider(auth)}\n </form>\n </ResponsiveContainer>\n </section>\n </QueryClientProvider>\n )\n}\n\nexport default DynamicForm\n"],"names":["DynamicForm","fields","title","progress","approvement","chips","submitProps","auth","classes","buttonGroup","ssoAuthorizationTop","backgroundColor","disabledButtons","submitCallback","onErrorCallback","checked","onCheckedChange","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","isValid","useControlledForm","fieldsProgress","getFieldsProgress","formattedProgress","useFieldsProgress","onSubmit","values","QueryClientProvider","jsx","widgetIds","cn","jsxs","ResponsiveContainer","Icon","Heading","withAuthProvider","error","ProgressBar","HTMLRenderer","FieldMapper","withApprovement","button","index","isDisabledByLogic","createElement","Button"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as
|
|
1
|
+
import{jsx as o,jsxs as g}from"react/jsx-runtime";import{useState as j,createElement as v}from"react";import{getDynamicSchema as A}from"../../../src/shared/utils/getDynamicSchema.js";import{QueryClientProvider as P}from"../queryClientProvider/QueryClientProvider.js";import{Dialog as E}from"../../shared/ui/dialog/Dialog.js";import{TypeGuards as L}from"../../shared/utils/typeGuards.js";import{FieldMapper as M}from"../fieldMapper/FieldMapper.js";import{cn as x}from"../../shared/utils/cn.js";import{HTMLRenderer as p}from"../htmlParser/HTMLRenderer.js";import{ZodUtils as Z}from"../../shared/validation/utils/zodUtils.js";import{useControlledForm as H}from"../../shared/hooks/useControlledForm.js";import{Button as I}from"../../shared/ui/button/Button.js";import{AuthProvider as s}from"../authProvider/AuthProvider.js";import{CheckboxBase as Q}from"../../shared/ui/formElements/uncontrolled/checkbox/Checkbox.js";const R=(e,l,t,m)=>e.type==="off"?null:e.type==="text"?o(p,{html:e.message,as:"div",className:m?.content}):g("label",{className:x("mob-body-regular-s text-color-dark","desktop:desk-body-regular-m desktop:gap-x-4","flex items-center justify-items-start gap-x-3"),children:[o(Q,{classes:m?.checkbox,checked:l,onCheckedChange:t}),o(p,{html:e.content,as:"div",className:m?.content})]}),b=e=>{switch(e.mode){case"esia":return o(s,{...e,mode:e.mode});case"mobileId":return o(s,{...e,mode:e.mode});case"combine":return o(s,{...e,mode:e.mode});case"off":return null}},re=({fields:e,title:l,approvement:t,submitProps:m,dialogId:h,classes:c,auth:a,buttonGroup:n,ssoAuthorizationTop:d=!1,disabledButtons:y,...k})=>{const{submitCallback:f,onErrorCallback:w}=m??{},[i,C]=j(!1),u=A(e),D=Z.getZodDefaults(u),{control:N,handleSubmit:S}=H({schema:u,defaultValues:D,mode:"onBlur"});return o(P,{children:o(E,{id:h,title:l,...k,children:g("form",{onSubmit:S(r=>{f&&f({...r,agree:i})},r=>w?.(r)),className:"flex flex-col gap-6",children:[d&&b(a),o(M,{control:N,fields:e}),R(t,i,C,c?.approvement),L.isArrayFilled(n)&&o("div",{className:"flex flex-col gap-4",children:n?.map((r,B)=>{const F=r.type==="submit"&&t.type==="checkbox"?!i:!1;return v(I,{...r,size:"lg",key:B,disabled:y||F,className:x("w-full whitespace-nowrap",{"w-full":!!t},c?.submit)})})}),!d&&b(a)]})})})};export{re as DynamicFormDialog,re as default};
|
|
2
2
|
//# sourceMappingURL=DynamicFormDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicFormDialog.js","sources":["../../../../lib/widgets/dynamicFormDialog/DynamicFormDialog.tsx"],"sourcesContent":["'use client'\nimport { useState } from 'react'\nimport type { Control, FieldValues, SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport { AuthProvider } from '../authProvider'\nimport { type Auth, type AuthMode } from '../dynamicForm/model'\nimport { HTMLRenderer } from '../htmlParser'\nimport type { Approvement, ApprovementType } from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { useControlledForm } from '$/shared/hooks'\nimport { Button, type ButtonProps, CheckboxBase, type CheckedState, Dialog } from '$/shared/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\ntype SubmitProps = {\n submitCallback: <T extends FieldValues>(values: T) => void\n onErrorCallback?: <T extends FieldValues>(error: T) => void\n}\n\ntype ApprovementClasses = {\n checkbox?: React.ComponentProps<typeof CheckboxBase>['classes']\n content?: string\n}\n\ntype DynamicFormDialogClasses = {\n root?: string\n title?: string\n fields?: string\n form?: string\n approvement?: ApprovementClasses\n submit?: string\n}\n\nexport type DynamicFormDialogProps<\n AType extends ApprovementType,\n AuthType extends AuthMode\n> = React.DialogHTMLAttributes<HTMLDialogElement> & {\n fields: FieldElement<any, any, { validation: FieldValidation }>[]\n title: string\n approvement: Approvement<AType>\n dialogId: string\n submitProps?: SubmitProps\n classes?: DynamicFormDialogClasses\n buttonGroup: ButtonProps[]\n auth: Auth<AuthType>\n ssoAuthorizationTop?: boolean\n}\n\nconst withApprovement = <Type extends ApprovementType>(\n approvement: Approvement<Type>,\n checked: CheckedState,\n onCheckedChange: (checked: CheckedState) => void,\n classes?: ApprovementClasses\n) => {\n if (approvement.type === 'off') return null\n\n if (approvement.type === 'text') {\n return <HTMLRenderer html={approvement.message} as='div' className={classes?.content} />\n }\n\n return (\n <label\n className={cn(\n 'mob-body-regular-s text-color-dark',\n 'desktop:desk-body-regular-m desktop:gap-x-4',\n 'flex items-center justify-items-start gap-x-3'\n )}\n >\n <CheckboxBase classes={classes?.checkbox} checked={checked} onCheckedChange={onCheckedChange} />\n <HTMLRenderer html={approvement.content} as='div' className={classes?.content} />\n </label>\n )\n}\n\nconst withAuthProvider = <Mode extends AuthMode>(auth: Auth<Mode>) => {\n switch (auth.mode) {\n case 'esia':\n return <AuthProvider {...auth} mode={auth.mode} />\n case 'mobileId':\n return <AuthProvider {...auth} mode={auth.mode} />\n case 'combine':\n return <AuthProvider {...auth} mode={auth.mode} />\n case 'off':\n return null\n }\n}\n\nexport const DynamicFormDialog = <AType extends ApprovementType, AuthType extends AuthMode>({\n fields,\n title,\n approvement,\n submitProps,\n dialogId,\n classes,\n auth,\n buttonGroup,\n ssoAuthorizationTop = false,\n ...props\n}: DynamicFormDialogProps<AType, AuthType>) => {\n const { submitCallback, onErrorCallback } = submitProps ?? {}\n\n const [checked, onCheckedChange] = useState<CheckedState>(false)\n\n const schema = getDynamicSchema(fields)\n const defaultValues = ZodUtils.getZodDefaults(schema)\n\n const { control, handleSubmit } = useControlledForm({\n schema,\n defaultValues,\n mode: 'onBlur'\n })\n\n const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n if (submitCallback) submitCallback({ ...values, agree: checked })\n }\n\n return (\n <QueryClientProvider>\n <Dialog id={dialogId} title={title} {...props}>\n <form onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))} className='flex flex-col gap-6'>\n {ssoAuthorizationTop && withAuthProvider(auth)}\n <FieldMapper control={control as unknown as Control} fields={fields} />\n {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n {TypeGuards.isArrayFilled(buttonGroup) && (\n <div className='flex flex-col gap-4'>\n {buttonGroup?.map((button, index) => {\n const
|
|
1
|
+
{"version":3,"file":"DynamicFormDialog.js","sources":["../../../../lib/widgets/dynamicFormDialog/DynamicFormDialog.tsx"],"sourcesContent":["'use client'\nimport { useState } from 'react'\nimport type { Control, FieldValues, SubmitHandler } from 'react-hook-form'\nimport { type TypeOf } from 'zod'\nimport { AuthProvider } from '../authProvider'\nimport { type Auth, type AuthMode } from '../dynamicForm/model'\nimport { HTMLRenderer } from '../htmlParser'\nimport type { Approvement, ApprovementType } from './model'\nimport { type FieldValidation, getDynamicSchema } from '@/shared/utils'\nimport { useControlledForm } from '$/shared/hooks'\nimport { Button, type ButtonProps, CheckboxBase, type CheckedState, Dialog } from '$/shared/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\nimport { ZodUtils } from '$/shared/validation'\nimport { type FieldElement, FieldMapper } from '$/widgets/fieldMapper'\nimport { QueryClientProvider } from '$/widgets/queryClientProvider'\n\ntype SubmitProps = {\n submitCallback: <T extends FieldValues>(values: T) => void\n onErrorCallback?: <T extends FieldValues>(error: T) => void\n}\n\ntype ApprovementClasses = {\n checkbox?: React.ComponentProps<typeof CheckboxBase>['classes']\n content?: string\n}\n\ntype DynamicFormDialogClasses = {\n root?: string\n title?: string\n fields?: string\n form?: string\n approvement?: ApprovementClasses\n submit?: string\n}\n\nexport type DynamicFormDialogProps<\n AType extends ApprovementType,\n AuthType extends AuthMode\n> = React.DialogHTMLAttributes<HTMLDialogElement> & {\n fields: FieldElement<any, any, { validation: FieldValidation }>[]\n title: string\n approvement: Approvement<AType>\n dialogId: string\n submitProps?: SubmitProps\n classes?: DynamicFormDialogClasses\n buttonGroup: ButtonProps[]\n auth: Auth<AuthType>\n ssoAuthorizationTop?: boolean\n disabledButtons?: boolean\n}\n\nconst withApprovement = <Type extends ApprovementType>(\n approvement: Approvement<Type>,\n checked: CheckedState,\n onCheckedChange: (checked: CheckedState) => void,\n classes?: ApprovementClasses\n) => {\n if (approvement.type === 'off') return null\n\n if (approvement.type === 'text') {\n return <HTMLRenderer html={approvement.message} as='div' className={classes?.content} />\n }\n\n return (\n <label\n className={cn(\n 'mob-body-regular-s text-color-dark',\n 'desktop:desk-body-regular-m desktop:gap-x-4',\n 'flex items-center justify-items-start gap-x-3'\n )}\n >\n <CheckboxBase classes={classes?.checkbox} checked={checked} onCheckedChange={onCheckedChange} />\n <HTMLRenderer html={approvement.content} as='div' className={classes?.content} />\n </label>\n )\n}\n\nconst withAuthProvider = <Mode extends AuthMode>(auth: Auth<Mode>) => {\n switch (auth.mode) {\n case 'esia':\n return <AuthProvider {...auth} mode={auth.mode} />\n case 'mobileId':\n return <AuthProvider {...auth} mode={auth.mode} />\n case 'combine':\n return <AuthProvider {...auth} mode={auth.mode} />\n case 'off':\n return null\n }\n}\n\nexport const DynamicFormDialog = <AType extends ApprovementType, AuthType extends AuthMode>({\n fields,\n title,\n approvement,\n submitProps,\n dialogId,\n classes,\n auth,\n buttonGroup,\n ssoAuthorizationTop = false,\n disabledButtons,\n ...props\n}: DynamicFormDialogProps<AType, AuthType>) => {\n const { submitCallback, onErrorCallback } = submitProps ?? {}\n\n const [checked, onCheckedChange] = useState<CheckedState>(false)\n\n const schema = getDynamicSchema(fields)\n const defaultValues = ZodUtils.getZodDefaults(schema)\n\n const { control, handleSubmit } = useControlledForm({\n schema,\n defaultValues,\n mode: 'onBlur'\n })\n\n const onSubmit: SubmitHandler<TypeOf<typeof schema>> = (values) => {\n if (submitCallback) submitCallback({ ...values, agree: checked })\n }\n\n return (\n <QueryClientProvider>\n <Dialog id={dialogId} title={title} {...props}>\n <form onSubmit={handleSubmit(onSubmit, (error) => onErrorCallback?.(error))} className='flex flex-col gap-6'>\n {ssoAuthorizationTop && withAuthProvider(auth)}\n <FieldMapper control={control as unknown as Control} fields={fields} />\n {withApprovement(approvement, checked, onCheckedChange, classes?.approvement)}\n {TypeGuards.isArrayFilled(buttonGroup) && (\n <div className='flex flex-col gap-4'>\n {buttonGroup?.map((button, index) => {\n const isDisabledByLogic = button.type === 'submit' && approvement.type === 'checkbox' ? !checked : false\n\n const disabled = disabledButtons || isDisabledByLogic\n\n return (\n <Button\n {...button}\n size='lg'\n key={index}\n disabled={disabled}\n className={cn(\n 'w-full whitespace-nowrap',\n {\n 'w-full': Boolean(approvement)\n },\n classes?.submit\n )}\n />\n )\n })}\n </div>\n )}\n {/*<Button {...buttonProps} type='submit' disabled={approvement.type === 'checkbox' ? !checked : false} className='w-full'>*/}\n {/* {children ?? 'Отправить форму'}*/}\n {/*</Button>*/}\n {!ssoAuthorizationTop && withAuthProvider(auth)}\n </form>\n </Dialog>\n </QueryClientProvider>\n )\n}\n\nexport default DynamicFormDialog\n"],"names":["withApprovement","approvement","checked","onCheckedChange","classes","jsx","HTMLRenderer","jsxs","cn","CheckboxBase","withAuthProvider","auth","AuthProvider","DynamicFormDialog","fields","title","submitProps","dialogId","buttonGroup","ssoAuthorizationTop","disabledButtons","props","submitCallback","onErrorCallback","useState","schema","getDynamicSchema","defaultValues","ZodUtils","control","handleSubmit","useControlledForm","QueryClientProvider","Dialog","values","error","FieldMapper","TypeGuards","button","index","isDisabledByLogic","createElement","Button"],"mappings":"k5BAmDA,MAAMA,EAAkB,CACtBC,EACAC,EACAC,EACAC,IAEIH,EAAY,OAAS,MAAc,KAEnCA,EAAY,OAAS,OAChBI,EAACC,GAAa,KAAML,EAAY,QAAS,GAAG,MAAM,UAAWG,GAAS,OAAA,CAAS,EAItFG,EAAC,QAAA,CACC,UAAWC,EACT,qCACA,8CACA,+CAAA,EAGF,SAAA,CAAAH,EAACI,EAAA,CAAa,QAASL,GAAS,SAAU,QAAAF,EAAkB,gBAAAC,EAAkC,EAC9FE,EAACC,GAAa,KAAML,EAAY,QAAS,GAAG,MAAM,UAAWG,GAAS,OAAA,CAAS,CAAA,CAAA,CAAA,EAK/EM,EAA2CC,GAAqB,CACpE,OAAQA,EAAK,KAAA,CACX,IAAK,OACH,SAAQC,EAAA,CAAc,GAAGD,EAAM,KAAMA,EAAK,KAAM,EAClD,IAAK,WACH,SAAQC,EAAA,CAAc,GAAGD,EAAM,KAAMA,EAAK,KAAM,EAClD,IAAK,UACH,SAAQC,EAAA,CAAc,GAAGD,EAAM,KAAMA,EAAK,KAAM,EAClD,IAAK,MACH,OAAO,IAAA,CAEb,EAEaE,GAAoB,CAA2D,CAC1F,OAAAC,EACA,MAAAC,EACA,YAAAd,EACA,YAAAe,EACA,SAAAC,EACA,QAAAb,EACA,KAAAO,EACA,YAAAO,EACA,oBAAAC,EAAsB,GACtB,gBAAAC,EACA,GAAGC,CACL,IAA+C,CAC7C,KAAM,CAAE,eAAAC,EAAgB,gBAAAC,CAAA,EAAoBP,GAAe,CAAA,EAErD,CAACd,EAASC,CAAe,EAAIqB,EAAuB,EAAK,EAEzDC,EAASC,EAAiBZ,CAAM,EAChCa,EAAgBC,EAAS,eAAeH,CAAM,EAE9C,CAAE,QAAAI,EAAS,aAAAC,CAAA,EAAiBC,EAAkB,CAClD,OAAAN,EACA,cAAAE,EACA,KAAM,QAAA,CACP,EAMD,OACEtB,EAAC2B,GACC,SAAA3B,EAAC4B,EAAA,CAAO,GAAIhB,EAAU,MAAAF,EAAe,GAAGM,EACtC,SAAAd,EAAC,QAAK,SAAUuB,EAPkCI,GAAW,CAC7DZ,GAAgBA,EAAe,CAAE,GAAGY,EAAQ,MAAOhC,EAAS,CAClE,EAK8CiC,GAAUZ,IAAkBY,CAAK,CAAC,EAAG,UAAU,sBACpF,SAAA,CAAAhB,GAAuBT,EAAiBC,CAAI,EAC7CN,EAAC+B,EAAA,CAAY,QAAAP,EAAwC,OAAAf,CAAA,CAAgB,EACpEd,EAAgBC,EAAaC,EAASC,EAAiBC,GAAS,WAAW,EAC3EiC,EAAW,cAAcnB,CAAW,GACnCb,EAAC,MAAA,CAAI,UAAU,sBACZ,SAAAa,GAAa,IAAI,CAACoB,EAAQC,IAAU,CACnC,MAAMC,EAAoBF,EAAO,OAAS,UAAYrC,EAAY,OAAS,WAAa,CAACC,EAAU,GAInG,OACEuC,EAACC,EAAA,CACE,GAAGJ,EACJ,KAAK,KACL,IAAKC,EACL,SAPanB,GAAmBoB,EAQhC,UAAWhC,EACT,2BACA,CACE,SAAU,EAAQP,CAAW,EAE/BG,GAAS,MAAA,CACX,CAAA,CAGN,CAAC,CAAA,CACH,EAKD,CAACe,GAAuBT,EAAiBC,CAAI,CAAA,CAAA,CAChD,EACF,EACF,CAEJ"}
|