@flatbiz/antd 4.4.13 → 4.4.15
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/esm/date-range-picker-wrapper-form-item/index.js +2 -1
- package/esm/date-range-picker-wrapper-form-item/index.js.map +1 -1
- package/esm/dialog-confirm/index.js +1 -1
- package/esm/dialog-confirm/index.js.map +1 -1
- package/esm/dialog-drawer/index.js +1 -1
- package/esm/dialog-drawer/index.js.map +1 -1
- package/esm/dialog-drawer-content/index.js.map +1 -1
- package/esm/dialog-modal/index.js +1 -1
- package/esm/dialog-modal/index.js.map +1 -1
- package/esm/drag-form-list/index.css +1 -1
- package/esm/drag-form-list/index.js +4 -1
- package/esm/drag-form-list/index.js.map +1 -1
- package/esm/easy-form/index.js +2 -1
- package/esm/easy-form/index.js.map +1 -1
- package/esm/easy-table/index.js +5 -2
- package/esm/easy-table/index.js.map +1 -1
- package/esm/fba-app/index.js +1 -1
- package/esm/fba-app/index.js.map +1 -1
- package/esm/file-export/index.js +1 -1
- package/esm/file-export/index.js.map +1 -1
- package/esm/file-import/index.js.map +1 -1
- package/esm/form-item-group/index.js.map +1 -1
- package/esm/form-item-text/index.js +2 -1
- package/esm/form-item-text/index.js.map +1 -1
- package/esm/form-item-wrapper/index.css +1 -0
- package/esm/form-item-wrapper/index.js +2 -1
- package/esm/form-item-wrapper/index.js.map +1 -1
- package/esm/form-list-wrapper/index.css +1 -1
- package/esm/form-list-wrapper/index.js +4 -1
- package/esm/form-list-wrapper/index.js.map +1 -1
- package/esm/form-wrapper/index.css +1 -0
- package/esm/form-wrapper/index.js +2 -1
- package/esm/form-wrapper/index.js.map +1 -1
- package/esm/index.js +5 -4
- package/esm/modal-action/index.js.map +1 -1
- package/esm/pre-defined-class-name/index.js +1 -1
- package/esm/pre-defined-class-name/index.js.map +1 -1
- package/esm/rich-text-editor/index.js +1 -1
- package/esm/rich-text-editor/index.js.map +1 -1
- package/esm/upload-wrapper/index.js.map +1 -1
- package/index.d.ts +278 -115
- package/package.json +1 -1
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import './../date-range-picker-wrapper/index.css';
|
|
3
3
|
import './../fba-hooks/index.css';
|
|
4
4
|
import './../form-item-wrapper/index.css';
|
|
5
|
+
import './../pre-defined-class-name/index.css';
|
|
5
6
|
import './../types/index.css';
|
|
6
7
|
import './index.css';
|
|
7
8
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
8
|
-
import{a as e,_ as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{hooks as r}from"@wove/react/cjs/hooks";import{isArray as a}from"@dimjs/lang/cjs/is-array";import{Form as t,Input as
|
|
9
|
+
import{a as e,_ as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{hooks as r}from"@wove/react/cjs/hooks";import{isArray as a}from"@dimjs/lang/cjs/is-array";import{Form as t,Input as i}from"antd";import{useMemo as o,useRef as l,forwardRef as u,useImperativeHandle as s}from"react";import{DateRangePickerWrapper as m}from"../date-range-picker-wrapper/index.js";import{fbaHooks as c}from"../fba-hooks/index.js";import{FormItemWrapper as d}from"../form-item-wrapper/index.js";import{jsxs as v,Fragment as f,jsx as p}from"react/jsx-runtime";import"@flatbiz/utils";import"dayjs";import"../time-53b3f55f.js";import"../use-responsive-point-21b8c601.js";import"../pre-defined-class-name/index.js";import"@dimjs/utils/cjs/class-names";var h=["startName","endName","formListName","dateRangePickerWrapperProps"];var g=function i(u){var s=u.startName,g=u.endName,C=u.formListName,_=u.dateRangePickerWrapperProps,P=e(u,h);var k=t.useFormInstance();var x=o((function(){if(a(s)&&a(g)){return s.slice(0,s.length-1).concat("__#invalid_date_"+s[s.length-1]+"_"+g[g.length-1])}return"__#invalid_date_"+s+"_"+g}),[s,g]);var N=o((function(){return C?[].concat(C,s):s}),[s,C]);var b=o((function(){return C?[].concat(C,g):g}),[g,C]);var F=t.useWatch(N,k);var W=t.useWatch(b,k);var w=c.usePrevious(F);var I=c.usePrevious(W);c.useEffectCustom((function(){var e=C?[].concat(C,x):x;if(F&&W){k.setFields([{name:e,value:[F,W]}])}if(w&&I&&!F&&!W){k.setFields([{name:e,value:undefined}])}}),[F,W]);var R=l(null);var y=l(null);var L=r.useCallbackRef((function(e){var n,r;k.setFields([{name:N,value:e==null?void 0:e[0]},{name:b,value:e==null?void 0:e[1]}]);(n=R.current)==null||n.onChange==null?void 0:n.onChange(e==null?void 0:e[0]);(r=y.current)==null||r.onChange==null?void 0:r.onChange(e==null?void 0:e[1]);_==null||_.onChange==null?void 0:_.onChange(e)}));return v(f,{children:[p(t.Item,{name:s,hidden:true,children:p(j,{ref:R})}),p(t.Item,{name:g,hidden:true,children:p(j,{ref:y})}),p(d,n({},P,{name:x,children:p(m,n({},_,{onChange:L}))}))]})};var j=u((function(e,n){s(n,(function(){return{onChange:function n(r){e.onChange==null?void 0:e.onChange(r)}}}));return p(i,{value:e.value})}));export{g as DateRangePickerWrapperFormItem};
|
|
9
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/date-range-picker-wrapper-form-item/date-range-picker-wrapper-form-item.tsx"],"sourcesContent":["import { isArray } from '@dimjs/lang';\nimport { TAny } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Form, Input } from 'antd';\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { DateRangePickerWrapper, DateRangePickerWrapperProps } from '../date-range-picker-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormItemWrapper, FormItemWrapperProps } from '../form-item-wrapper';\nimport { FormItemNamePath } from '../types';\n\nexport type DateRangePickerWrapperFormItemProps = Omit<FormItemWrapperProps, 'name'> & {\n /**\n * 开始的时间name\n */\n startName: FormItemNamePath;\n /**\n * 结束的时间name\n */\n endName: FormItemNamePath;\n /**\n * 如果 DateRangePickerWrapperFormItem 在Form.List场景下 必传\n */\n formListName?: FormItemNamePath;\n dateRangePickerWrapperProps?: DateRangePickerWrapperProps;\n};\n/**\n * 包含了Form.Item组件的时间区间选择组件\n * ```\n * 1. 时间区间组件可以定义成两个字段操作，不用再通过数组处理\n * 2. 会在form中产生一个 `__#invalid_date_xxxx_xxxx` 的无效字段，可以直接忽略\n * ```\n */\nexport const DateRangePickerWrapperFormItem = (props: DateRangePickerWrapperFormItemProps) => {\n const { startName, endName, formListName, dateRangePickerWrapperProps, ...otherProps } = props;\n const form = Form.useFormInstance();\n const bodyName = useMemo(() => {\n if (isArray(startName) && isArray(endName)) {\n return startName\n .slice(0, startName.length - 1)\n .concat(`__#invalid_date_${startName[startName.length - 1]}_${endName[endName.length - 1]}`);\n }\n return `__#invalid_date_${startName}_${endName}`;\n }, [startName, endName]);\n\n const startNameMerge = useMemo(() => {\n return formListName ? ([] as (string | number)[]).concat(formListName, startName) : startName;\n }, [startName, formListName]);\n\n const endNameMerge = useMemo(() => {\n return formListName ? ([] as (string | number)[]).concat(formListName, endName) : endName;\n }, [endName, formListName]);\n\n const startVal = Form.useWatch(startNameMerge, form);\n const endVal = Form.useWatch(endNameMerge, form);\n // const bodyVal = Form.useWatch(bodyName, form);\n\n const preValue1 = fbaHooks.usePrevious(startVal);\n const preValue2 = fbaHooks.usePrevious(endVal);\n\n fbaHooks.useEffectCustom(() => {\n const name = formListName ? ([] as (string | number)[]).concat(formListName, bodyName) : bodyName;\n if (startVal && endVal) {\n form.setFields([{ name, value: [startVal, endVal] }]);\n }\n if (preValue1 && preValue2 && !startVal && !endVal) {\n form.setFields([{ name, value: undefined }]);\n }\n }, [startVal, endVal]);\n\n const reftest = useRef<InputContentRef>(null);\n const reftest2 = useRef<InputContentRef>(null);\n\n const onChange = hooks.useCallbackRef((data) => {\n form.setFields([\n { name: startNameMerge, value: data?.[0] },\n { name: endNameMerge, value: data?.[1] },\n ]);\n // 为了解决 外部Form onValuesChange获取到操作值\n reftest.current?.onChange?.(data?.[0]);\n reftest2.current?.onChange?.(data?.[1]);\n dateRangePickerWrapperProps?.onChange?.(data);\n });\n\n return (\n <>\n <Form.Item name={startName} hidden>\n <InputContent ref={reftest} />\n </Form.Item>\n <Form.Item name={endName} hidden>\n <InputContent ref={reftest2} />\n </Form.Item>\n <FormItemWrapper {...otherProps} name={bodyName}>\n <DateRangePickerWrapper {...dateRangePickerWrapperProps} onChange={onChange} />\n </FormItemWrapper>\n </>\n );\n};\n\ntype InputContentProps = {\n onChange?: (data: TAny) => void;\n value?: string;\n};\n\ntype InputContentRef = {\n onChange?: (data: TAny) => void;\n};\n\nconst InputContent = forwardRef<InputContentRef, InputContentProps>((props, ref) => {\n useImperativeHandle(ref, () => {\n return {\n onChange: (startVal) => {\n props.onChange?.(startVal);\n },\n };\n });\n\n return <Input value={props.value} />;\n});\n"],"names":["DateRangePickerWrapperFormItem","props","startName","endName","formListName","dateRangePickerWrapperProps","otherProps","_objectWithoutPropertiesLoose","_excluded","form","Form","useFormInstance","bodyName","useMemo","_isArray","slice","length","concat","startNameMerge","endNameMerge","startVal","useWatch","endVal","preValue1","fbaHooks","usePrevious","preValue2","useEffectCustom","name","setFields","value","undefined","reftest","useRef","reftest2","onChange","_hooks","useCallbackRef","data","_reftest$current","_reftest2$current","current","_jsxs","_Fragment","children","_jsx","Item","hidden","InputContent","ref","FormItemWrapper","_extends","DateRangePickerWrapper","forwardRef","useImperativeHandle","Input"],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/date-range-picker-wrapper-form-item/date-range-picker-wrapper-form-item.tsx"],"sourcesContent":["import { isArray } from '@dimjs/lang';\nimport { TAny } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Form, Input } from 'antd';\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { DateRangePickerWrapper, DateRangePickerWrapperProps } from '../date-range-picker-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormItemWrapper, FormItemWrapperProps } from '../form-item-wrapper';\nimport { FormItemNamePath } from '../types';\n\nexport type DateRangePickerWrapperFormItemProps = Omit<FormItemWrapperProps, 'name'> & {\n /**\n * 开始的时间name\n */\n startName: FormItemNamePath;\n /**\n * 结束的时间name\n */\n endName: FormItemNamePath;\n /**\n * 如果 DateRangePickerWrapperFormItem 在Form.List场景下 必传\n */\n formListName?: FormItemNamePath;\n dateRangePickerWrapperProps?: DateRangePickerWrapperProps;\n};\n/**\n * 包含了Form.Item组件的时间区间选择组件\n * ```\n * 1. 时间区间组件可以定义成两个字段操作，不用再通过数组处理\n * 2. 会在form中产生一个 `__#invalid_date_xxxx_xxxx` 的无效字段，可以直接忽略\n * ```\n */\nexport const DateRangePickerWrapperFormItem = (props: DateRangePickerWrapperFormItemProps) => {\n const { startName, endName, formListName, dateRangePickerWrapperProps, ...otherProps } = props;\n const form = Form.useFormInstance();\n const bodyName = useMemo(() => {\n if (isArray(startName) && isArray(endName)) {\n return startName\n .slice(0, startName.length - 1)\n .concat(`__#invalid_date_${startName[startName.length - 1]}_${endName[endName.length - 1]}`);\n }\n return `__#invalid_date_${startName}_${endName}`;\n }, [startName, endName]);\n\n const startNameMerge = useMemo(() => {\n return formListName ? ([] as (string | number)[]).concat(formListName, startName) : startName;\n }, [startName, formListName]);\n\n const endNameMerge = useMemo(() => {\n return formListName ? ([] as (string | number)[]).concat(formListName, endName) : endName;\n }, [endName, formListName]);\n\n const startVal = Form.useWatch(startNameMerge, form);\n const endVal = Form.useWatch(endNameMerge, form);\n // const bodyVal = Form.useWatch(bodyName, form);\n\n const preValue1 = fbaHooks.usePrevious(startVal);\n const preValue2 = fbaHooks.usePrevious(endVal);\n\n fbaHooks.useEffectCustom(() => {\n const name = formListName ? ([] as (string | number)[]).concat(formListName, bodyName) : bodyName;\n if (startVal && endVal) {\n form.setFields([{ name, value: [startVal, endVal] }]);\n }\n if (preValue1 && preValue2 && !startVal && !endVal) {\n form.setFields([{ name, value: undefined }]);\n }\n }, [startVal, endVal]);\n\n const reftest = useRef<InputContentRef>(null);\n const reftest2 = useRef<InputContentRef>(null);\n\n const onChange = hooks.useCallbackRef((data) => {\n form.setFields([\n { name: startNameMerge, value: data?.[0] },\n { name: endNameMerge, value: data?.[1] },\n ]);\n // 为了解决 外部Form onValuesChange获取到操作值\n reftest.current?.onChange?.(data?.[0]);\n reftest2.current?.onChange?.(data?.[1]);\n dateRangePickerWrapperProps?.onChange?.(data);\n });\n\n return (\n <>\n <Form.Item name={startName} hidden>\n <InputContent ref={reftest} />\n </Form.Item>\n <Form.Item name={endName} hidden>\n <InputContent ref={reftest2} />\n </Form.Item>\n <FormItemWrapper {...otherProps} name={bodyName}>\n <DateRangePickerWrapper {...dateRangePickerWrapperProps} onChange={onChange} />\n </FormItemWrapper>\n </>\n );\n};\n\ntype InputContentProps = {\n onChange?: (data: TAny) => void;\n value?: string;\n};\n\ntype InputContentRef = {\n onChange?: (data: TAny) => void;\n};\n\nconst InputContent = forwardRef<InputContentRef, InputContentProps>((props, ref) => {\n useImperativeHandle(ref, () => {\n return {\n onChange: (startVal) => {\n props.onChange?.(startVal);\n },\n };\n });\n\n return <Input value={props.value} />;\n});\n"],"names":["DateRangePickerWrapperFormItem","props","startName","endName","formListName","dateRangePickerWrapperProps","otherProps","_objectWithoutPropertiesLoose","_excluded","form","Form","useFormInstance","bodyName","useMemo","_isArray","slice","length","concat","startNameMerge","endNameMerge","startVal","useWatch","endVal","preValue1","fbaHooks","usePrevious","preValue2","useEffectCustom","name","setFields","value","undefined","reftest","useRef","reftest2","onChange","_hooks","useCallbackRef","data","_reftest$current","_reftest2$current","current","_jsxs","_Fragment","children","_jsx","Item","hidden","InputContent","ref","FormItemWrapper","_extends","DateRangePickerWrapper","forwardRef","useImperativeHandle","Input"],"mappings":";6yBAgCaA,EAAiC,SAAjCA,EAAkCC,GAC7C,IAAQC,EAAiFD,EAAjFC,UAAWC,EAAsEF,EAAtEE,QAASC,EAA6DH,EAA7DG,aAAcC,EAA+CJ,EAA/CI,4BAAgCC,EAAUC,EAAKN,EAAKO,GAC9F,IAAMC,EAAOC,EAAKC,kBAClB,IAAMC,EAAWC,GAAQ,WACvB,GAAIC,EAAQZ,IAAcY,EAAQX,GAAU,CAC1C,OAAOD,EACJa,MAAM,EAAGb,EAAUc,OAAS,GAC5BC,OAA0Bf,mBAAAA,EAAUA,EAAUc,OAAS,GAAMb,IAAAA,EAAQA,EAAQa,OAAS,GAC3F,CACA,MAA0Bd,mBAAAA,MAAaC,CACzC,GAAG,CAACD,EAAWC,IAEf,IAAMe,EAAiBL,GAAQ,WAC7B,OAAOT,EAAgB,GAA2Ba,OAAOb,EAAcF,GAAaA,CACtF,GAAG,CAACA,EAAWE,IAEf,IAAMe,EAAeN,GAAQ,WAC3B,OAAOT,EAAgB,GAA2Ba,OAAOb,EAAcD,GAAWA,CACpF,GAAG,CAACA,EAASC,IAEb,IAAMgB,EAAWV,EAAKW,SAASH,EAAgBT,GAC/C,IAAMa,EAASZ,EAAKW,SAASF,EAAcV,GAG3C,IAAMc,EAAYC,EAASC,YAAYL,GACvC,IAAMM,EAAYF,EAASC,YAAYH,GAEvCE,EAASG,iBAAgB,WACvB,IAAMC,EAAOxB,EAAgB,GAA2Ba,OAAOb,EAAcQ,GAAYA,EACzF,GAAIQ,GAAYE,EAAQ,CACtBb,EAAKoB,UAAU,CAAC,CAAED,KAAAA,EAAME,MAAO,CAACV,EAAUE,KAC5C,CACA,GAAIC,GAAaG,IAAcN,IAAaE,EAAQ,CAClDb,EAAKoB,UAAU,CAAC,CAAED,KAAAA,EAAME,MAAOC,YACjC,CACF,GAAG,CAACX,EAAUE,IAEd,IAAMU,EAAUC,EAAwB,MACxC,IAAMC,EAAWD,EAAwB,MAEzC,IAAME,EAAWC,EAAMC,gBAAe,SAACC,GAAS,IAAAC,EAAAC,EAC9C/B,EAAKoB,UAAU,CACb,CAAED,KAAMV,EAAgBY,MAAOQ,GAAAA,UAAAA,EAAAA,EAAO,IACtC,CAAEV,KAAMT,EAAcW,MAAOQ,GAAAA,UAAAA,EAAAA,EAAO,OAGtCC,EAAAP,EAAQS,UAARF,MAAAA,EAAiBJ,UAAQ,UAAA,EAAzBI,EAAiBJ,SAAWG,GAAI,UAAA,EAAJA,EAAO,KACnCE,EAAAN,EAASO,UAATD,MAAAA,EAAkBL,UAAQ,UAAA,EAA1BK,EAAkBL,SAAWG,GAAI,UAAA,EAAJA,EAAO,IACpCjC,GAA2B,MAA3BA,EAA6B8B,UAAQ,UAAA,EAArC9B,EAA6B8B,SAAWG,EAC1C,IAEA,OACEI,EAAAC,EAAA,CAAAC,SACEC,CAAAA,EAACnC,EAAKoC,KAAI,CAAClB,KAAM1B,EAAW6C,OAAM,KAAAH,SAChCC,EAACG,EAAY,CAACC,IAAKjB,MAErBa,EAACnC,EAAKoC,KAAI,CAAClB,KAAMzB,EAAS4C,OAAM,KAAAH,SAC9BC,EAACG,EAAY,CAACC,IAAKf,MAErBW,EAACK,EAAeC,KAAK7C,EAAU,CAAEsB,KAAMhB,EAASgC,SAC9CC,EAACO,EAAsBD,KAAK9C,EAA2B,CAAE8B,SAAUA,UAI3E,EAWA,IAAMa,EAAeK,GAA+C,SAACpD,EAAOgD,GAC1EK,EAAoBL,GAAK,WACvB,MAAO,CACLd,SAAU,SAAAA,EAACf,GACTnB,EAAMkC,UAANlC,UAAAA,EAAAA,EAAMkC,SAAWf,EACnB,EAEJ,IAEA,OAAOyB,EAACU,EAAK,CAACzB,MAAO7B,EAAM6B,OAC7B"}
|
|
@@ -8,5 +8,5 @@ import './../fba-utils/index.css';
|
|
|
8
8
|
import './../flex-layout/index.css';
|
|
9
9
|
import './index.css';
|
|
10
10
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
11
|
-
import{_ as i}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as o}from"@dimjs/utils/cjs/class-names";import{dialogModal as
|
|
11
|
+
import{_ as i}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as o}from"@dimjs/utils/cjs/class-names";import{dialogModal as s}from"../dialog-modal/index.js";import"@dimjs/lang/cjs/is-string";import"@dimjs/lang/cjs/is-null";import"@dimjs/lang/cjs/is-promise";import"@wove/react/cjs/hooks";import"@flatbiz/utils";import"ahooks";import"antd";import"react";import"react-dom/client";import"../button-wrapper/index.js";import"@ant-design/icons/es/icons/LoadingOutlined";import"../index-7f4ad045.js";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"../fba-hooks/index.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"@dimjs/utils/cjs/extend";import"react/jsx-runtime";import"../fba-utils/index.js";import"../flex-layout/index.js";var t={open:function t(r){var a=o("v-dialog-confirm",r.className);return s.open(i({width:350,okText:"确定",cancelText:"取消",maskClosable:true,size:null},r,{className:a}))}};export{t as dialogConfirm};
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-confirm/dialog-confirm.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dialogModal, DialogModalProps } from '../dialog-modal';\nimport './style.less';\n\n/**\n * 确认弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogConfirm.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 3. 需要修改默认主题风格的场景，请使用\n * const { appDialogConfirm } = FbaApp.useDialogConfirm();\n * appDialogConfirm.open({})\n * ```\n */\nexport const dialogConfirm = {\n open: (props: DialogModalProps) => {\n const className = classNames('v-dialog-confirm', props.className);\n return dialogModal.open({\n width: 350,\n okText: '确定',\n cancelText: '取消',\n maskClosable: true,\n ...props,\n className,\n });\n },\n};\n"],"names":["dialogConfirm","open","props","className","_classNames","dialogModal","_extends","width","okText","cancelText","maskClosable"],"mappings":";2jCAgBO,IAAMA,EAAgB,CAC3BC,KAAM,SAAAA,EAACC,GACL,IAAMC,EAAYC,EAAW,mBAAoBF,EAAMC,WACvD,OAAOE,EAAYJ,KAAIK,EAAA,CACrBC,MAAO,IACPC,OAAQ,KACRC,WAAY,KACZC,aAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-confirm/dialog-confirm.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dialogModal, DialogModalProps } from '../dialog-modal';\nimport './style.less';\n\n/**\n * 确认弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogConfirm.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 3. 需要修改默认主题风格的场景，请使用\n * const { appDialogConfirm } = FbaApp.useDialogConfirm();\n * appDialogConfirm.open({})\n * ```\n */\nexport const dialogConfirm = {\n open: (props: DialogModalProps) => {\n const className = classNames('v-dialog-confirm', props.className);\n return dialogModal.open({\n width: 350,\n okText: '确定',\n cancelText: '取消',\n maskClosable: true,\n size: null,\n ...props,\n className,\n });\n },\n};\n"],"names":["dialogConfirm","open","props","className","_classNames","dialogModal","_extends","width","okText","cancelText","maskClosable","size"],"mappings":";2jCAgBO,IAAMA,EAAgB,CAC3BC,KAAM,SAAAA,EAACC,GACL,IAAMC,EAAYC,EAAW,mBAAoBF,EAAMC,WACvD,OAAOE,EAAYJ,KAAIK,EAAA,CACrBC,MAAO,IACPC,OAAQ,KACRC,WAAY,KACZC,aAAc,KACdC,KAAM,MACHT,EAAK,CACRC,UAAAA,IAEJ"}
|
|
@@ -6,5 +6,5 @@ import './../types/index.css';
|
|
|
6
6
|
import './../fba-utils/index.css';
|
|
7
7
|
import './index.css';
|
|
8
8
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
9
|
-
import{isString as e}from"@dimjs/lang/cjs/is-string";import{_ as
|
|
9
|
+
import{isString as e}from"@dimjs/lang/cjs/is-string";import{_ as t,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as o}from"@dimjs/lang/cjs/is-promise";import{hooks as n}from"@wove/react/cjs/hooks";import{dom as i}from"@flatbiz/utils";import{Form as a,Space as l,Drawer as d}from"antd";import{useState as s,useMemo as c}from"react";import{createRoot as m}from"react-dom/client";import{ButtonWrapper as u}from"../button-wrapper/index.js";import{C as p}from"../index-7f4ad045.js";import{fbaHooks as f}from"../fba-hooks/index.js";import{C as v}from"../context-1f2093c6.js";import{jsx as j,jsxs as y}from"react/jsx-runtime";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/utils/cjs/class-names";import"../fba-utils/index.js";import"@dimjs/lang/cjs/is-array";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"@dimjs/utils/cjs/extend";import"../use-responsive-point-21b8c601.js";import"@wove/react/cjs/create-ctx";var h=["divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","operatePosition","operateRender","width","okHidden","cancelHidden","extra"];var w=function e(i){var m;var w=i.divElement,x=i.elementId,g=i.onOk,k=i.onCancel,C=i.content,b=i.configProviderProps,P=i.okText,_=i.cancelText,E=i.okButtonExtraProps,B=i.cancelButtonExtraProps,I=i.operatePosition,R=I===void 0?"footer":I,H=i.operateRender;i.width;var O=i.okHidden,W=i.cancelHidden,T=i.extra,z=r(i,h);var F=s(true),S=F[0],D=F[1];var Y=s(),A=Y[0],L=Y[1];var N=a.useForm(),U=N[0];var q=f.useResponsivePoint()||"";var G=n.useCallbackRef((function(){try{delete window[x]}catch(e){}D(false)}));f.useEffectCustom((function(){window[x]=G}),[G]);var J=n.useCallbackRef((function(e){if(k){var t=k(U,e);if(t&&o(t)){return t.then(G)}}return G()}));var K=n.useCallbackRef((function(e){if(g){var t=g(U,e);if(t&&o(t)){return t.then(G)}}return G()}));var M=y(l,{children:[W||B!=null&&B.hidden?null:j(u,t({},B,{onClick:J,children:_||"取消"})),O||E!=null&&E.hidden?null:j(u,t({type:"primary"},E,{onClick:K,children:P||"提交"}))]});var Q=function e(){if(H){return H(U)}if(!O||!W){return M}return null};var V=typeof T==="function"?T(U):T;var X=function e(t){L(t)};var Z=c((function(){if(!q)return undefined;if(["xs","sm"].includes(q)){return{width:"90%",maxWidth:"90%"}}return{width:"40%",maxWidth:"calc(100% - 200px)"}}),[q]);return j(v,{value:{onClose:G,updateBodyStyle:X},children:j(p,t({},b,{children:j(d,t({maskClosable:true,destroyOnClose:true,onClose:G,width:Z==null?void 0:Z.width,contentWrapperStyle:{maxWidth:Z==null?void 0:Z.maxWidth},footer:R==="footer"?Q():null},z,{styles:t({},z.styles,{body:t({},A,(m=z.styles)==null?void 0:m.body)}),extra:R==="header"?Q():V,open:S,getContainer:w,children:typeof C==="function"?C(U,{onClose:G}):C}))}))})};var x={open:function e(r){var o=i.bodyAppendDivElement(),n=o.divElement,a=o.elementId;window["__dialog_drawer_elementId"]=a;var l=m(n);l.render(j(w,t({},r,{divElement:n,elementId:a})));return{close:function e(){var t,r;(t=(r=window)[a])==null?void 0:t.call(r)}}},close:function t(){try{var r,o;var n=window["__dialog_drawer_elementId"];if(e(n))(r=(o=window)[n])==null?void 0:r.call(o)}catch(e){}}};export{x as dialogDrawer};
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-drawer/dialog-drawer.tsx"],"sourcesContent":["import { isPromise, isString } from '@dimjs/lang';\nimport { TNoopDefine } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Drawer, DrawerProps, Form, FormInstance, Space } from 'antd';\nimport { CSSProperties, ReactElement, ReactNode, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { bodyAppendDivElement, BodyAppendDivElementProps } from '../_utils/dom';\nimport { CtxProvider } from './context';\n\nexport type DialogDrawerProps = Omit<\n DrawerProps,\n 'onOk' | 'onCancel' | 'getContainer' | 'open' | 'open' | 'footer' | 'extra'\n> & {\n okText?: string | ReactElement;\n cancelText?: string | ReactElement;\n onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);\n configProviderProps?: ConfigProviderWrapperProps;\n okButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n cancelButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children'>;\n operatePosition?: 'header' | 'footer';\n operateRender?: (form: FormInstance) => ReactElement;\n okHidden?: boolean;\n cancelHidden?: boolean;\n extra?: ReactNode | ((form: FormInstance) => ReactElement);\n};\n\nconst ModalRender = (props: BodyAppendDivElementProps & DialogDrawerProps) => {\n const {\n divElement,\n elementId,\n onOk,\n onCancel,\n content,\n configProviderProps,\n okText,\n cancelText,\n okButtonExtraProps,\n cancelButtonExtraProps,\n operatePosition = 'footer',\n operateRender,\n width = 600,\n okHidden,\n cancelHidden,\n extra,\n ...otherProps\n } = props;\n const [open, setOpen] = useState(true);\n const [innerBodyStyle, setInnerBodyStyle] = useState<CSSProperties>();\n const [form] = Form.useForm();\n\n const onClose = hooks.useCallbackRef(() => {\n try {\n delete window[elementId];\n } catch (error) {\n //\n }\n setOpen(false);\n });\n\n fbaHooks.useEffectCustom(() => {\n window[elementId] = onClose;\n }, [onClose]);\n\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const operateGroup = (\n <Space>\n {cancelHidden || cancelButtonExtraProps?.hidden ? null : (\n <ButtonWrapper {...cancelButtonExtraProps} onClick={onCancelHandle}>\n {cancelText || '取消'}\n </ButtonWrapper>\n )}\n {okHidden || okButtonExtraProps?.hidden ? null : (\n <ButtonWrapper type=\"primary\" {...okButtonExtraProps} onClick={onOkHandle}>\n {okText || '提交'}\n </ButtonWrapper>\n )}\n </Space>\n );\n\n const operateRenderHandle = () => {\n if (operateRender) {\n return operateRender(form);\n }\n if (!okHidden || !cancelHidden) {\n return operateGroup;\n }\n return null;\n };\n\n const extraRender = typeof extra === 'function' ? extra(form) : extra;\n\n const updateBodyStyle = (bodyStyle?: CSSProperties) => {\n setInnerBodyStyle(bodyStyle);\n };\n\n return (\n <CtxProvider value={{ onClose, updateBodyStyle }}>\n <ConfigProviderWrapper {...configProviderProps}>\n <Drawer\n maskClosable={true}\n destroyOnClose\n onClose={onClose}\n width={'80%'}\n contentWrapperStyle={{ maxWidth: width }}\n footer={operatePosition === 'footer' ? operateRenderHandle() : null}\n {...otherProps}\n styles={{\n ...otherProps.styles,\n body: { ...innerBodyStyle, ...otherProps.styles?.body },\n }}\n extra={operatePosition === 'header' ? operateRenderHandle() : extraRender}\n open={open}\n getContainer={divElement}\n >\n {typeof content === 'function' ? content(form, { onClose }) : content}\n </Drawer>\n </ConfigProviderWrapper>\n </CtxProvider>\n );\n};\n\n/**\n * 抽屉弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogDrawer.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 3. 需要修改默认主题风格的场景，请使用\n * const { appDialogDrawer } = FbaApp.useDialogDrawer();\n * appDialogDrawer.open({})\n * ```\n */\nexport const dialogDrawer = {\n open: (props: DialogDrawerProps) => {\n const { divElement, elementId } = bodyAppendDivElement();\n window['__dialog_drawer_elementId'] = elementId;\n const root = createRoot(divElement);\n root.render(<ModalRender {...props} divElement={divElement} elementId={elementId} />);\n return {\n close: () => {\n window[elementId]?.();\n },\n };\n },\n /**\n * ```\n * 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个\n * 2. 多个弹框主动关闭，只能使用 dialogDrawer.open()返回值中的close\n * ```\n */\n close: () => {\n try {\n const elementId = window['__dialog_drawer_elementId'] as string;\n if (isString(elementId)) window[elementId]?.();\n } catch (error) {\n //\n }\n },\n};\n"],"names":["ModalRender","props","_otherProps$styles","divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","_props$operatePositio","operatePosition","operateRender","_props$width","width","okHidden","cancelHidden","extra","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","open","setOpen","_useState2","innerBodyStyle","setInnerBodyStyle","_Form$useForm","Form","useForm","form","onClose","_hooks","useCallbackRef","window","error","fbaHooks","useEffectCustom","onCancelHandle","e","response","_isPromise","then","onOkHandle","operateGroup","_jsxs","Space","children","hidden","_jsx","ButtonWrapper","_extends","onClick","type","operateRenderHandle","extraRender","updateBodyStyle","bodyStyle","CtxProvider","value","ConfigProviderWrapper","Drawer","maskClosable","destroyOnClose","contentWrapperStyle","maxWidth","footer","styles","body","getContainer","dialogDrawer","_bodyAppendDivElement","bodyAppendDivElement","root","createRoot","render","close","_window$elementId","_window","call","_window$elementId2","_window2","_isString"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-drawer/dialog-drawer.tsx"],"sourcesContent":["import { isPromise, isString } from '@dimjs/lang';\nimport { dom, TNoopDefine } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Drawer, DrawerProps, Form, FormInstance, Space } from 'antd';\nimport { CSSProperties, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { BodyAppendDivElementProps } from '../_utils/dom';\nimport { CtxProvider } from './context';\n\nexport type DialogDrawerProps = Omit<\n DrawerProps,\n 'onOk' | 'onCancel' | 'getContainer' | 'open' | 'open' | 'footer' | 'extra'\n> & {\n okText?: string | ReactElement;\n cancelText?: string | ReactElement;\n onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);\n configProviderProps?: ConfigProviderWrapperProps;\n okButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n cancelButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children'>;\n operatePosition?: 'header' | 'footer';\n operateRender?: (form: FormInstance) => ReactElement;\n okHidden?: boolean;\n cancelHidden?: boolean;\n extra?: ReactNode | ((form: FormInstance) => ReactElement);\n};\n\nconst ModalRender = (props: BodyAppendDivElementProps & DialogDrawerProps) => {\n const {\n divElement,\n elementId,\n onOk,\n onCancel,\n content,\n configProviderProps,\n okText,\n cancelText,\n okButtonExtraProps,\n cancelButtonExtraProps,\n operatePosition = 'footer',\n operateRender,\n width,\n okHidden,\n cancelHidden,\n extra,\n ...otherProps\n } = props;\n const [open, setOpen] = useState(true);\n const [innerBodyStyle, setInnerBodyStyle] = useState<CSSProperties>();\n const [form] = Form.useForm();\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const onClose = hooks.useCallbackRef(() => {\n try {\n delete window[elementId];\n } catch (error) {\n //\n }\n setOpen(false);\n });\n\n fbaHooks.useEffectCustom(() => {\n window[elementId] = onClose;\n }, [onClose]);\n\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const operateGroup = (\n <Space>\n {cancelHidden || cancelButtonExtraProps?.hidden ? null : (\n <ButtonWrapper {...cancelButtonExtraProps} onClick={onCancelHandle}>\n {cancelText || '取消'}\n </ButtonWrapper>\n )}\n {okHidden || okButtonExtraProps?.hidden ? null : (\n <ButtonWrapper type=\"primary\" {...okButtonExtraProps} onClick={onOkHandle}>\n {okText || '提交'}\n </ButtonWrapper>\n )}\n </Space>\n );\n\n const operateRenderHandle = () => {\n if (operateRender) {\n return operateRender(form);\n }\n if (!okHidden || !cancelHidden) {\n return operateGroup;\n }\n return null;\n };\n\n const extraRender = typeof extra === 'function' ? extra(form) : extra;\n\n const updateBodyStyle = (bodyStyle?: CSSProperties) => {\n setInnerBodyStyle(bodyStyle);\n };\n\n const customSize = useMemo(() => {\n if (!screenType) return undefined;\n if (['xs', 'sm'].includes(screenType)) {\n return {\n width: '90%',\n maxWidth: '90%',\n };\n }\n return { width: '40%', maxWidth: 'calc(100% - 200px)' };\n }, [screenType]);\n\n return (\n <CtxProvider value={{ onClose, updateBodyStyle }}>\n <ConfigProviderWrapper {...configProviderProps}>\n <Drawer\n maskClosable={true}\n destroyOnClose\n onClose={onClose}\n width={customSize?.width}\n // 5.13.0 新增 styles.wrapper，并废弃 contentWrapperStyle drawerStyle maskStyle 属性\n contentWrapperStyle={{ maxWidth: customSize?.maxWidth }}\n footer={operatePosition === 'footer' ? operateRenderHandle() : null}\n {...otherProps}\n styles={{\n ...otherProps.styles,\n body: { ...innerBodyStyle, ...otherProps.styles?.body },\n // wrapper: {\n // maxWidth: customSize?.maxWidth,\n // ...otherProps.styles?.wrapper,\n // },\n }}\n extra={operatePosition === 'header' ? operateRenderHandle() : extraRender}\n open={open}\n getContainer={divElement}\n >\n {typeof content === 'function' ? content(form, { onClose }) : content}\n </Drawer>\n </ConfigProviderWrapper>\n </CtxProvider>\n );\n};\n\n/**\n * 抽屉弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogDrawer.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 3. 需要修改默认主题风格的场景，请使用\n * const { appDialogDrawer } = FbaApp.useDialogDrawer();\n * appDialogDrawer.open({})\n * ```\n */\nexport const dialogDrawer = {\n open: (props: DialogDrawerProps) => {\n const { divElement, elementId } = dom.bodyAppendDivElement();\n window['__dialog_drawer_elementId'] = elementId;\n const root = createRoot(divElement);\n root.render(<ModalRender {...props} divElement={divElement} elementId={elementId} />);\n return {\n close: () => {\n window[elementId]?.();\n },\n };\n },\n /**\n * ```\n * 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个\n * 2. 多个弹框主动关闭，只能使用 dialogDrawer.open()返回值中的close\n * ```\n */\n close: () => {\n try {\n const elementId = window['__dialog_drawer_elementId'] as string;\n if (isString(elementId)) window[elementId]?.();\n } catch (error) {\n //\n }\n },\n};\n"],"names":["ModalRender","props","_otherProps$styles","divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","_props$operatePositio","operatePosition","operateRender","width","okHidden","cancelHidden","extra","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","open","setOpen","_useState2","innerBodyStyle","setInnerBodyStyle","_Form$useForm","Form","useForm","form","screenType","fbaHooks","useResponsivePoint","onClose","_hooks","useCallbackRef","window","error","useEffectCustom","onCancelHandle","e","response","_isPromise","then","onOkHandle","operateGroup","_jsxs","Space","children","hidden","_jsx","ButtonWrapper","_extends","onClick","type","operateRenderHandle","extraRender","updateBodyStyle","bodyStyle","customSize","useMemo","undefined","includes","maxWidth","CtxProvider","value","ConfigProviderWrapper","Drawer","maskClosable","destroyOnClose","contentWrapperStyle","footer","styles","body","getContainer","dialogDrawer","_dom$bodyAppendDivEle","dom","bodyAppendDivElement","root","createRoot","render","close","_window$elementId","_window","call","_window$elementId2","_window2","_isString"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-drawer-content/content.tsx"],"sourcesContent":["import { isPromise } from '@dimjs/lang';\nimport { hooks } from '@wove/react';\nimport { Space } from 'antd';\nimport { CSSProperties, ReactElement, ReactNode } from 'react';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { useDialogDrawerCtx } from '../dialog-drawer/context';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type DialogDrawerContentProps = {\n footer?: (data: { onClose: () => void }) => ReactElement;\n footerStyle?: CSSProperties;\n children?: ReactNode;\n okHidden?: boolean;\n cancelHidden?: boolean;\n okButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n cancelButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n okText?: string | ReactElement;\n cancelText?: string | ReactElement;\n onOk?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n};\n/**\n * 当dialogDrawer底部操作按钮在业务content内部时，使用\n * ```\n * 1. 设置 footer 后，okHidden、cancelHidden、okButtonExtraProps、cancelButtonExtraProps、okText、cancelText、onOk、onCancel全部失效\n * ```\n */\nexport const DialogDrawerContent = (props: DialogDrawerContentProps) => {\n const ctx = useDialogDrawerCtx();\n const onClose = ctx.onClose;\n\n fbaHooks.useEffectCustom(() => {\n ctx.updateBodyStyle({ padding: 0 });\n }, []);\n\n const {\n okHidden,\n onCancel,\n onOk,\n cancelHidden,\n cancelText,\n okText,\n okButtonExtraProps,\n cancelButtonExtraProps,\n footer,\n } = props;\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n const operateGroup = (\n <Space>\n {cancelHidden || cancelButtonExtraProps?.hidden ? null : (\n <ButtonWrapper {...cancelButtonExtraProps} onClick={onCancelHandle}>\n {cancelText || '取消'}\n </ButtonWrapper>\n )}\n {okHidden || okButtonExtraProps?.hidden ? null : (\n <ButtonWrapper type=\"primary\" {...okButtonExtraProps} onClick={onOkHandle}>\n {okText || '提交'}\n </ButtonWrapper>\n )}\n </Space>\n );\n return (\n <div className=\"dialog-drawer-content-wrapper\">\n <div className=\"dialog-drawer-content\">{props.children}</div>\n <div className=\"dialog-drawer-footer\" style={props.footerStyle}>\n {footer?.({ onClose }) || operateGroup}\n </div>\n </div>\n );\n};\n"],"names":["DialogDrawerContent","props","ctx","useDialogDrawerCtx","onClose","fbaHooks","useEffectCustom","updateBodyStyle","padding","okHidden","onCancel","onOk","cancelHidden","cancelText","okText","okButtonExtraProps","cancelButtonExtraProps","footer","onCancelHandle","_hooks","useCallbackRef","e","response","_isPromise","then","onOkHandle","operateGroup","_jsxs","Space","children","hidden","_jsx","ButtonWrapper","_extends","onClick","type","className","style","footerStyle"],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-drawer-content/content.tsx"],"sourcesContent":["import { isPromise } from '@dimjs/lang';\nimport { hooks } from '@wove/react';\nimport { Space } from 'antd';\nimport { CSSProperties, ReactElement, ReactNode } from 'react';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { useDialogDrawerCtx } from '../dialog-drawer/context';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type DialogDrawerContentProps = {\n footer?: (data: { onClose: () => void }) => ReactElement;\n footerStyle?: CSSProperties;\n children?: ReactNode;\n okHidden?: boolean;\n cancelHidden?: boolean;\n okButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n cancelButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n okText?: string | ReactElement;\n cancelText?: string | ReactElement;\n onOk?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n};\n/**\n * 当dialogDrawer底部操作按钮在业务content内部时，使用\n * ```\n * 1. 只能与 dialogDrawer 配合使用；与 FbaApp.useDialogDrawer 配合使用无效\n * 2. 设置 footer 后，okHidden、cancelHidden、okButtonExtraProps、cancelButtonExtraProps、okText、cancelText、onOk、onCancel全部失效\n * ```\n */\nexport const DialogDrawerContent = (props: DialogDrawerContentProps) => {\n const ctx = useDialogDrawerCtx();\n const onClose = ctx.onClose;\n\n fbaHooks.useEffectCustom(() => {\n ctx.updateBodyStyle({ padding: 0 });\n }, []);\n\n const {\n okHidden,\n onCancel,\n onOk,\n cancelHidden,\n cancelText,\n okText,\n okButtonExtraProps,\n cancelButtonExtraProps,\n footer,\n } = props;\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n const operateGroup = (\n <Space>\n {cancelHidden || cancelButtonExtraProps?.hidden ? null : (\n <ButtonWrapper {...cancelButtonExtraProps} onClick={onCancelHandle}>\n {cancelText || '取消'}\n </ButtonWrapper>\n )}\n {okHidden || okButtonExtraProps?.hidden ? null : (\n <ButtonWrapper type=\"primary\" {...okButtonExtraProps} onClick={onOkHandle}>\n {okText || '提交'}\n </ButtonWrapper>\n )}\n </Space>\n );\n return (\n <div className=\"dialog-drawer-content-wrapper\">\n <div className=\"dialog-drawer-content\">{props.children}</div>\n <div className=\"dialog-drawer-footer\" style={props.footerStyle}>\n {footer?.({ onClose }) || operateGroup}\n </div>\n </div>\n );\n};\n"],"names":["DialogDrawerContent","props","ctx","useDialogDrawerCtx","onClose","fbaHooks","useEffectCustom","updateBodyStyle","padding","okHidden","onCancel","onOk","cancelHidden","cancelText","okText","okButtonExtraProps","cancelButtonExtraProps","footer","onCancelHandle","_hooks","useCallbackRef","e","response","_isPromise","then","onOkHandle","operateGroup","_jsxs","Space","children","hidden","_jsx","ButtonWrapper","_extends","onClick","type","className","style","footerStyle"],"mappings":";8iCA6BaA,EAAsB,SAAtBA,EAAuBC,GAClC,IAAMC,EAAMC,IACZ,IAAMC,EAAUF,EAAIE,QAEpBC,EAASC,iBAAgB,WACvBJ,EAAIK,gBAAgB,CAAEC,QAAS,GAChC,GAAE,IAEH,IACEC,EASER,EATFQ,SACAC,EAQET,EARFS,SACAC,EAOEV,EAPFU,KACAC,EAMEX,EANFW,aACAC,EAKEZ,EALFY,WACAC,EAIEb,EAJFa,OACAC,EAGEd,EAHFc,mBACAC,EAEEf,EAFFe,uBACAC,EACEhB,EADFgB,OAEF,IAAMC,EAAiBC,EAAMC,gBAAe,SAACC,GAC3C,GAAIX,EAAU,CACZ,IAAMY,EAAWZ,EAASW,GAC1B,GAAIC,GAAYC,EAAUD,GAAW,CACnC,OAAOA,EAASE,KAAKpB,EACvB,CACF,CACA,OAAOA,GACT,IAEA,IAAMqB,EAAaN,EAAMC,gBAAe,SAACC,GACvC,GAAIV,EAAM,CACR,IAAMW,EAAWX,EAAKU,GACtB,GAAIC,GAAYC,EAAUD,GAAW,CACnC,OAAOA,EAASE,KAAKpB,EACvB,CACF,CACA,OAAOA,GACT,IACA,IAAMsB,EACJC,EAACC,EAAK,CAAAC,UACHjB,GAAgBI,GAAsB,MAAtBA,EAAwBc,OAAS,KAChDC,EAACC,EAAaC,KAAKjB,EAAsB,CAAEkB,QAAShB,EAAeW,SAChEhB,GAAc,QAGlBJ,GAAYM,SAAAA,EAAoBe,OAAS,KACxCC,EAACC,EAAaC,EAAA,CAACE,KAAK,WAAcpB,EAAkB,CAAEmB,QAAST,EAAWI,SACvEf,GAAU,WAKnB,OACEa,EAAA,MAAA,CAAKS,UAAU,gCAA+BP,UAC5CE,EAAA,MAAA,CAAKK,UAAU,wBAAuBP,SAAE5B,EAAM4B,WAC9CE,EAAA,MAAA,CAAKK,UAAU,uBAAuBC,MAAOpC,EAAMqC,YAAYT,UAC5DZ,GAAM,UAAA,EAANA,EAAS,CAAEb,QAAAA,MAAcsB,MAIlC"}
|
|
@@ -7,5 +7,5 @@ import './../fba-utils/index.css';
|
|
|
7
7
|
import './../flex-layout/index.css';
|
|
8
8
|
import './index.css';
|
|
9
9
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
10
|
-
import{isString as e}from"@dimjs/lang/cjs/is-string";import{classNames as
|
|
10
|
+
import{isString as e}from"@dimjs/lang/cjs/is-string";import{classNames as i}from"@dimjs/utils/cjs/class-names";import{isNull as t}from"@dimjs/lang/cjs/is-null";import{_ as o,a as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as r}from"@dimjs/lang/cjs/is-promise";import{hooks as l}from"@wove/react/cjs/hooks";import{dom as a}from"@flatbiz/utils";import{useSize as d}from"ahooks";import{Form as s,Modal as m}from"antd";import{useState as c,useMemo as u}from"react";import{createRoot as p}from"react-dom/client";import{ButtonWrapper as f}from"../button-wrapper/index.js";import{C as h}from"../index-7f4ad045.js";import{fbaHooks as v}from"../fba-hooks/index.js";import{FlexLayout as g}from"../flex-layout/index.js";import{jsx as j,jsxs as y}from"react/jsx-runtime";import"@ant-design/icons/es/icons/LoadingOutlined";import"../fba-utils/index.js";import"@dimjs/lang/cjs/is-array";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"@dimjs/utils/cjs/extend";import"../use-responsive-point-21b8c601.js";var w=["title","titleExtra","divElement","elementId","onOk","onCancel","okButtonProps","cancelButtonProps","content","configProviderProps","className","okHidden","cancelHidden","footer","cancelText","okText","size"];var k=function e(p){var k,x;var C=p.title,b=p.titleExtra,_=p.divElement,P=p.elementId,E=p.onOk,I=p.onCancel,z=p.okButtonProps,B=p.cancelButtonProps,H=p.content,O=p.configProviderProps,R=p.className,N=p.okHidden,T=p.cancelHidden,F=p.footer,D=p.cancelText,S=p.okText,Y=p.size,q=n(p,w);var A=c(true),L=A[0],U=A[1];var G=s.useForm(),J=G[0];var K=d(document.querySelector("html"));var M=v.useResponsivePoint()||"";var Q=Y===null?undefined:Y===undefined?"middle":Y;var V=l.useCallbackRef((function(){try{delete window[P]}catch(e){}U(false)}));v.useEffectCustom((function(){window[P]=V}),[V]);var W=l.useCallbackRef((function(e){if(I){var i=I(J,e);if(i&&r(i)){return i.then(V)}}return V()}));var X=l.useCallbackRef((function(e){if(E){var i=E(J,e);if(i&&r(i)){return i.then(V)}}return V()}));var Z=l.useCallbackRef((function(){a.removeBodyChild("#"+P);p.afterClose==null?void 0:p.afterClose()}));var $=[j(f,o({},B,{onClick:W,hidden:T,children:D||"取消"}),"0"),j(f,o({type:"primary"},z,{onClick:X,hidden:N,children:S||"提交"}),"1")];var ee=t(F)?null:$;var ie=u((function(){if(!(K!=null&&K.height)||!M)return undefined;if(["xs","sm"].includes(M)){return{height:(K==null?void 0:K.height)*.7}}if(Q=="large"){return{height:(K==null?void 0:K.height)*.7,width:K.width*.6}}if(Q=="small"){var e=K.width*.3;return{height:(K==null?void 0:K.height)*.4,width:e<470?470:e}}if(Q=="middle"){return{height:(K==null?void 0:K.height)*.55,width:K.width*.5}}return undefined}),[K==null?void 0:K.height,Q,(k=q.styles)==null||(k=k.body)==null?void 0:k.height,q.width,M]);return j(h,o({},O,{children:j(m,o({title:b?y(g,{direction:"horizontal",fullIndex:0,children:[j("span",{children:C}),b]}):C,maskClosable:true,centered:true,onCancel:V,destroyOnClose:true,width:ie==null?void 0:ie.width},q,{styles:o({},q.styles,{body:o({height:ie==null?void 0:ie.height,maxHeight:"calc(100vh - 200px)"},(x=q.styles)==null?void 0:x.body)}),className:i("v-dialog-modal",{"v-dialog-modal-title-extra":!!b},R),open:L,afterClose:Z,getContainer:_,footer:ee,children:typeof H==="function"?H(J,{onClose:V}):H}))}))};var x={open:function e(i){var t=a.bodyAppendDivElement(),n=t.divElement,r=t.elementId;window["__dialog_modal_elementId"]=r;var l=p(n);l.render(j(k,o({},i,{divElement:n,elementId:r})));return{close:function e(){var i,t;(i=(t=window)[r])==null?void 0:i.call(t)}}},close:function i(){try{var t,o;var n=window["__dialog_modal_elementId"];if(e(n))(t=(o=window)[n])==null?void 0:t.call(o)}catch(e){}}};export{x as dialogModal};
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-modal/dialog-modal.tsx"],"sourcesContent":["import { isNull, isPromise, isString } from '@dimjs/lang';\nimport { classNames } from '@dimjs/utils';\n\nimport { BodyAppendDivElementProps, dom, TNoopDefine } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { useSize } from 'ahooks';\nimport { Form, FormInstance, Modal, ModalProps } from 'antd';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { FlexLayout } from '../flex-layout';\nimport './style.less';\n\nexport type DialogModalProps = Omit<\n ModalProps,\n 'onOk' | 'onCancel' | 'getContainer' | 'open' | 'open' | 'okButtonProps' | 'cancelButtonProps' | 'footer'\n> & {\n onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);\n configProviderProps?: ConfigProviderWrapperProps;\n okHidden?: boolean;\n cancelHidden?: boolean;\n okButtonProps?: Omit<ButtonWrapperProps, 'hidden' | 'children' | 'onClick'>;\n cancelButtonProps?: Omit<ButtonWrapperProps, 'hidden' | 'children' | 'onClick'>;\n /**\n * 设置modal body height 为当前窗口height的百分比，例如：30\n * ```\n * 1. 最大值：80\n * 1. 设置bodyStyle.height 后，bodyHeightPercent失效\n * ```\n */\n bodyHeightPercent?: number;\n titleExtra?: ReactElement;\n /** null则隐藏footer */\n footer?: null | ReactElement | ReactElement[];\n};\n\nconst ModalRender = (props: BodyAppendDivElementProps & DialogModalProps) => {\n const {\n title,\n titleExtra,\n divElement,\n elementId,\n onOk,\n onCancel,\n okButtonProps,\n cancelButtonProps,\n content,\n configProviderProps,\n className,\n okHidden,\n cancelHidden,\n footer,\n cancelText,\n okText,\n bodyHeightPercent,\n ...otherProps\n } = props;\n const [open, setOpen] = useState(true);\n const [form] = Form.useForm();\n const size = useSize(document.querySelector('html'));\n\n const onClose = hooks.useCallbackRef(() => {\n try {\n delete window[elementId];\n } catch (error) {\n //\n }\n setOpen(false);\n });\n\n fbaHooks.useEffectCustom(() => {\n window[elementId] = onClose;\n }, [onClose]);\n\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onAfterClose = hooks.useCallbackRef(() => {\n dom.removeBodyChild(`#${elementId}`);\n props.afterClose?.();\n });\n\n const operateGroup = [\n <ButtonWrapper key=\"0\" {...cancelButtonProps} onClick={onCancelHandle} hidden={cancelHidden}>\n {cancelText || '取消'}\n </ButtonWrapper>,\n <ButtonWrapper key=\"1\" type=\"primary\" {...okButtonProps} onClick={onOkHandle} hidden={okHidden}>\n {okText || '提交'}\n </ButtonWrapper>,\n ];\n\n const footerNew = isNull(footer) ? null : operateGroup;\n\n const height = useMemo(() => {\n if (!size?.height || !bodyHeightPercent) {\n return 'auto';\n }\n return size?.height * (bodyHeightPercent / 100);\n }, [bodyHeightPercent, size?.height]);\n\n return (\n <ConfigProviderWrapper {...configProviderProps}>\n <Modal\n title={\n titleExtra ? (\n <FlexLayout direction=\"horizontal\" fullIndex={0}>\n <span>{title}</span>\n {titleExtra}\n </FlexLayout>\n ) : (\n title\n )\n }\n maskClosable={true}\n centered={true}\n onCancel={onClose}\n destroyOnClose\n {...otherProps}\n styles={{\n ...otherProps.styles,\n body: {\n height,\n maxHeight: size?.height ? size?.height * 0.8 : 'calc(100vh - 200px)',\n ...otherProps.styles?.body,\n },\n }}\n className={classNames('v-dialog-modal', { 'v-dialog-modal-title-extra': !!titleExtra }, className)}\n open={open}\n afterClose={onAfterClose}\n getContainer={divElement}\n footer={footerNew}\n >\n {typeof content === 'function' ? content(form, { onClose }) : content}\n </Modal>\n </ConfigProviderWrapper>\n );\n};\n\n/**\n * 居中弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogModal.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 3. 需要修改默认主题风格的场景，请使用\n * const { appDialogModal } = FbaApp.useDialogModal();\n * appDialogModal.open({})\n * ```\n */\nexport const dialogModal = {\n open: (props: DialogModalProps) => {\n const { divElement, elementId } = dom.bodyAppendDivElement();\n window['__dialog_modal_elementId'] = elementId;\n const root = createRoot(divElement);\n root.render(<ModalRender {...props} divElement={divElement} elementId={elementId} />);\n return {\n close: () => {\n window[elementId]?.();\n },\n };\n },\n /**\n * ```\n * 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个\n * 2. 多个弹框主动关闭，只能使用 dialogModal.open()返回值中的close\n * ```\n */\n close: () => {\n try {\n const elementId = window['__dialog_modal_elementId'] as string;\n if (isString(elementId)) window[elementId]?.();\n } catch (error) {\n //\n }\n },\n};\n"],"names":["ModalRender","props","_otherProps$styles","title","titleExtra","divElement","elementId","onOk","onCancel","okButtonProps","cancelButtonProps","content","configProviderProps","className","okHidden","cancelHidden","footer","cancelText","okText","bodyHeightPercent","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","open","setOpen","_Form$useForm","Form","useForm","form","size","useSize","document","querySelector","onClose","_hooks","useCallbackRef","window","error","fbaHooks","useEffectCustom","onCancelHandle","e","response","_isPromise","then","onOkHandle","onAfterClose","dom","removeBodyChild","afterClose","operateGroup","_jsx","ButtonWrapper","_extends","onClick","hidden","children","type","footerNew","_isNull","height","useMemo","ConfigProviderWrapper","Modal","_jsxs","FlexLayout","direction","fullIndex","maskClosable","centered","destroyOnClose","styles","body","maxHeight","_classNames","getContainer","dialogModal","_dom$bodyAppendDivEle","bodyAppendDivElement","root","createRoot","render","close","_window$elementId","_window","call","_window$elementId2","_window2","_isString"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-modal/dialog-modal.tsx"],"sourcesContent":["import { isNull, isPromise, isString } from '@dimjs/lang';\nimport { classNames } from '@dimjs/utils';\n\nimport { BodyAppendDivElementProps, dom, TNoopDefine } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { useSize } from 'ahooks';\nimport { Form, FormInstance, Modal, ModalProps } from 'antd';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { FlexLayout } from '../flex-layout';\nimport './style.less';\n\nexport type DialogModalProps = Omit<\n ModalProps,\n 'onOk' | 'onCancel' | 'getContainer' | 'open' | 'open' | 'okButtonProps' | 'cancelButtonProps' | 'footer'\n> & {\n /**\n * 内置尺寸，根据比例固定高度、宽度，默认：middle\n * ```\n * 1. 如果自定义了width、styles.body.height属性，size中的height、width将对应失效\n * 2. 可传 null 值，取消内置尺寸\n * ```\n */\n size?: 'small' | 'middle' | 'large' | null;\n onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);\n configProviderProps?: ConfigProviderWrapperProps;\n okHidden?: boolean;\n cancelHidden?: boolean;\n okButtonProps?: Omit<ButtonWrapperProps, 'hidden' | 'children' | 'onClick'>;\n cancelButtonProps?: Omit<ButtonWrapperProps, 'hidden' | 'children' | 'onClick'>;\n /**\n * 设置modal body height 为当前窗口height的百分比，例如：30\n * @deprecated 已失效，可通过size属性设置\n * ```\n * 1. 最大值：80\n * 1. 设置bodyStyle.height 后，bodyHeightPercent失效\n * ```\n */\n bodyHeightPercent?: number;\n titleExtra?: ReactElement;\n /** null则隐藏footer */\n footer?: null | ReactElement | ReactElement[];\n};\n\nconst ModalRender = (props: BodyAppendDivElementProps & DialogModalProps) => {\n const {\n title,\n titleExtra,\n divElement,\n elementId,\n onOk,\n onCancel,\n okButtonProps,\n cancelButtonProps,\n content,\n configProviderProps,\n className,\n okHidden,\n cancelHidden,\n footer,\n cancelText,\n okText,\n size,\n ...otherProps\n } = props;\n\n const [open, setOpen] = useState(true);\n const [form] = Form.useForm();\n const htmlSize = useSize(document.querySelector('html'));\n const screenType = fbaHooks.useResponsivePoint() || '';\n const sizeFt = size === null ? undefined : size === undefined ? 'middle' : size;\n\n const onClose = hooks.useCallbackRef(() => {\n try {\n delete window[elementId];\n } catch (error) {\n //\n }\n setOpen(false);\n });\n\n fbaHooks.useEffectCustom(() => {\n window[elementId] = onClose;\n }, [onClose]);\n\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onAfterClose = hooks.useCallbackRef(() => {\n dom.removeBodyChild(`#${elementId}`);\n props.afterClose?.();\n });\n\n const operateGroup = [\n <ButtonWrapper key=\"0\" {...cancelButtonProps} onClick={onCancelHandle} hidden={cancelHidden}>\n {cancelText || '取消'}\n </ButtonWrapper>,\n <ButtonWrapper key=\"1\" type=\"primary\" {...okButtonProps} onClick={onOkHandle} hidden={okHidden}>\n {okText || '提交'}\n </ButtonWrapper>,\n ];\n\n const footerNew = isNull(footer) ? null : operateGroup;\n\n const customSize = useMemo(() => {\n if (!htmlSize?.height || !screenType) return undefined;\n if (['xs', 'sm'].includes(screenType)) {\n return {\n height: (htmlSize?.height as number) * 0.7,\n };\n }\n if (sizeFt == 'large') {\n return {\n height: (htmlSize?.height as number) * 0.7,\n width: htmlSize.width * 0.6,\n };\n }\n if (sizeFt == 'small') {\n const width = htmlSize.width * 0.3;\n return {\n height: (htmlSize?.height as number) * 0.4,\n width: width < 470 ? 470 : width,\n };\n }\n\n if (sizeFt == 'middle') {\n return {\n height: (htmlSize?.height as number) * 0.55,\n width: htmlSize.width * 0.5,\n };\n }\n\n return undefined;\n }, [htmlSize?.height, sizeFt, otherProps.styles?.body?.height, otherProps.width, screenType]);\n\n return (\n <ConfigProviderWrapper {...configProviderProps}>\n <Modal\n title={\n titleExtra ? (\n <FlexLayout direction=\"horizontal\" fullIndex={0}>\n <span>{title}</span>\n {titleExtra}\n </FlexLayout>\n ) : (\n title\n )\n }\n maskClosable={true}\n centered={true}\n onCancel={onClose}\n destroyOnClose\n width={customSize?.width}\n {...otherProps}\n styles={{\n ...otherProps.styles,\n body: {\n height: customSize?.height,\n maxHeight: 'calc(100vh - 200px)',\n ...otherProps.styles?.body,\n },\n }}\n className={classNames('v-dialog-modal', { 'v-dialog-modal-title-extra': !!titleExtra }, className)}\n open={open}\n afterClose={onAfterClose}\n getContainer={divElement}\n footer={footerNew}\n >\n {typeof content === 'function' ? content(form, { onClose }) : content}\n </Modal>\n </ConfigProviderWrapper>\n );\n};\n\n/**\n * 居中弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogModal.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 3. 需要修改默认主题风格的场景，请使用\n * const { appDialogModal } = FbaApp.useDialogModal();\n * appDialogModal.open({})\n * 4. 配置size属性可使用预设的弹窗尺寸\n * ```\n */\nexport const dialogModal = {\n open: (props: DialogModalProps) => {\n const { divElement, elementId } = dom.bodyAppendDivElement();\n window['__dialog_modal_elementId'] = elementId;\n const root = createRoot(divElement);\n root.render(<ModalRender {...props} divElement={divElement} elementId={elementId} />);\n return {\n close: () => {\n window[elementId]?.();\n },\n };\n },\n /**\n * ```\n * 1. 关闭最新弹框，如果有多个弹框只能关闭最后一个\n * 2. 多个弹框主动关闭，只能使用 dialogModal.open()返回值中的close\n * ```\n */\n close: () => {\n try {\n const elementId = window['__dialog_modal_elementId'] as string;\n if (isString(elementId)) window[elementId]?.();\n } catch (error) {\n //\n }\n },\n};\n"],"names":["ModalRender","props","_otherProps$styles","_otherProps$styles2","title","titleExtra","divElement","elementId","onOk","onCancel","okButtonProps","cancelButtonProps","content","configProviderProps","className","okHidden","cancelHidden","footer","cancelText","okText","size","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","open","setOpen","_Form$useForm","Form","useForm","form","htmlSize","useSize","document","querySelector","screenType","fbaHooks","useResponsivePoint","sizeFt","undefined","onClose","_hooks","useCallbackRef","window","error","useEffectCustom","onCancelHandle","e","response","_isPromise","then","onOkHandle","onAfterClose","dom","removeBodyChild","afterClose","operateGroup","_jsx","ButtonWrapper","_extends","onClick","hidden","children","type","footerNew","_isNull","customSize","useMemo","height","includes","width","styles","body","ConfigProviderWrapper","Modal","_jsxs","FlexLayout","direction","fullIndex","maskClosable","centered","destroyOnClose","maxHeight","_classNames","getContainer","dialogModal","_dom$bodyAppendDivEle","bodyAppendDivElement","root","createRoot","render","close","_window$elementId","_window","call","_window$elementId2","_window2","_isString"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.block-layout{background-color:var(--block-bg-color)}.light-theme .block-layout{color:rgba(0,0,0,.88)}.dark-theme .block-layout{color:hsla(0,0%,100%,.85)}.drag-form-list-item-grap *{opacity:.7!important}.drag-form-list-item-disabled .drag-form-list-item-trigger{cursor:no-drop;opacity:.6}.drag-form-list-overlay{border:none;border-radius:6px;box-shadow:0 0 12px 4px rgba(34,33,81,.1)}.drag-form-list-overlay .ant-collapse-item{border-bottom:none}.drag-form-list-overlay .drag-form-list-item-trigger{background-color:transparent}.drag-form-list-icon{display:inline-block;width:30px}.drag-form-list-item{align-items:center;background-color:var(--block-bg-color);display:flex;padding:8px
|
|
1
|
+
.block-layout{background-color:var(--block-bg-color)}.light-theme .block-layout{color:rgba(0,0,0,.88)}.dark-theme .block-layout{color:hsla(0,0%,100%,.85)}.union-after-text,.union-before-text{align-self:flex-start;flex-shrink:0;line-height:32px}.union-after-element,.union-before-element{align-self:flex-start}.form-item-group-horizontal-union .v-flex-layout .ant-form-item{align-self:flex-start;margin-bottom:0}.form-item-group-horizontal-union .v-flex-layout{align-items:flex-start}.drag-form-list-item-grap *{opacity:.7!important}.drag-form-list-item-disabled .drag-form-list-item-trigger{cursor:no-drop;opacity:.6}.drag-form-list-overlay{border:none;border-radius:6px;box-shadow:0 0 12px 4px rgba(34,33,81,.1)}.drag-form-list-overlay .ant-collapse-item{border-bottom:none}.drag-form-list-overlay .drag-form-list-item-trigger{background-color:transparent}.drag-form-list-icon{display:inline-block;width:30px}.drag-form-list-item{align-items:center;background-color:var(--block-bg-color);display:flex;padding:8px 0}.drag-form-list-item-content{flex:1}.drag-form-list-item-content .ant-form-item{margin-bottom:0}.drag-form-list-item-trigger{align-items:center;border-radius:6px;cursor:move;display:inline-flex;font-size:16px;height:30px;justify-content:center;margin-right:5px;width:30px}.drag-form-list-item-trigger:hover{background-color:rgba(0,0,0,.1)}
|
|
@@ -4,7 +4,10 @@ import './../config-provider-wrapper/index.css';
|
|
|
4
4
|
import './../fba-hooks/index.css';
|
|
5
5
|
import './../types/index.css';
|
|
6
6
|
import './../fba-utils/index.css';
|
|
7
|
+
import './../form-item-group/index.css';
|
|
8
|
+
import './../flex-layout/index.css';
|
|
9
|
+
import './../text-symbol-wrapper/index.css';
|
|
7
10
|
import './index.css';
|
|
8
11
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
9
|
-
import{
|
|
12
|
+
import{classNames as e}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{_ as t}from"../_rollupPluginBabelHelpers-a0769acd.js";import{DndContext as i,closestCenter as n,DragOverlay as a}from"@dnd-kit/core";import{useSortable as o,SortableContext as d,verticalListSortingStrategy as l,arrayMove as m}from"@dnd-kit/sortable";import{toArray as s,getUuid as u}from"@flatbiz/utils";import{Form as c,Empty as p}from"antd";import{Fragment as f,useState as g,useRef as v,useMemo as h}from"react";import{B as y}from"../index-1f45bfd5.js";import{ButtonWrapper as I}from"../button-wrapper/index.js";import{FormItemGroup as j}from"../form-item-group/index.js";import{TextSymbolWrapper as D}from"../text-symbol-wrapper/index.js";import x from"@ant-design/icons/es/icons/DragOutlined";import{CSS as b}from"@dnd-kit/utilities";import{jsx as L,jsxs as N}from"react/jsx-runtime";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/lang/cjs/is-promise";import"../index-7f4ad045.js";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"../fba-hooks/index.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"@dimjs/utils/cjs/extend";import"../fba-utils/index.js";import"../flex-layout/index.js";function C(i){var n=c.useFormInstance();var a=i.isOverlay?false:i.getItemDragDisabled==null?void 0:i.getItemDragDisabled(i.uid,i.index);var d=o({id:i.uid,disabled:a}),l=d.listeners,m=d.setNodeRef,s=d.transform,u=d.transition;var p=r.useCallbackRef((function(){var e=i.dragIcon?i.dragIcon:L(x,{});return i.dragDisabled?L(f,{}):L("span",t({className:"drag-form-list-item-trigger"},l,{children:L("span",{children:e})}))}));var g=t({transform:b.Transform.toString(s),transition:u},i.style);var v=e("drag-form-list-item",{"drag-form-list-item-grap":i.isGray,"drag-form-list-item-disabled":a},i.className);return N("div",{style:t({},g),ref:m,className:v,children:[L(c.Item,{style:{margin:0},children:p()}),L("div",{className:"drag-form-list-item-content",children:i.children({formListFieldData:i.formListFieldData,operation:i.formListOperate,formStageCompleteName:i.formStageCompleteName,index:i.index,getInsideFormItemName:function e(r){return[i.formListFieldData.name,r]},getInsideFormItemData:function e(){return n.getFieldValue(i.formStageCompleteName)||{}},prevCompleteName:i.prevCompleteName,uidKey:i.uidFieldName})})]})}var w=function e(r){if(r.wrapper)return r.wrapper({children:r.children});return r.children};var F=function e(r){var i,n,a;var o=(i=r.formListItemTitleHProps)==null?void 0:i.gap;var d=r.dragDisabled?[]:[{width:35,mainItem:L("div",{style:{marginRight:o===undefined?-15:-o}})}];return L(j.HorizontalUnion,t({},r.formListItemTitleHProps,{style:t({marginBottom:10},(n=r.formListItemTitleHProps)==null?void 0:n.style),groupConfigList:d.concat(((a=r.formListItemTitleList)==null?void 0:a.map((function(e){if(e.required){return{width:e.width,mainItem:L("div",{style:{textAlign:"center"},children:L(D,{text:e.title,symbolType:"required"})})}}return{width:e.width,mainItem:L("div",{style:{textAlign:"center"},children:e.title})}})))||[])}))};var k=function o(j){var D=[].concat(j.prevCompleteName,s(j.name));var x=g(),b=x[0],k=x[1];var R=c.useFormInstance();var T=v([]);var S=j.uidFieldName||"uid";var A=c.useWatch(D,R);var P=r.useCallbackRef((function(e){return e==null?void 0:e[S]}));function E(e){var r=e.active;k(r.id)}var O=r.useCallbackRef((function(){return R.getFieldValue(D)||[]}));function H(e){var r=e.active,t=e.over;var i=O();if(r.id!==t.id){var n=i.findIndex((function(e){return P(e)===r.id}));var a=i.findIndex((function(e){return P(e)===t.id}));var o=m(i,n,a);R.setFields([{name:j.name,value:o}]);j.onDropChange==null?void 0:j.onDropChange(o)}k(undefined)}var B=h((function(){if(!b)return undefined;var e=O();var r=e.findIndex((function(e){return P(e)===b}));return T.current.find((function(e){return e.name===r}))}),[b,O,P]);return L(y,{className:e("drag-form-list",j.className),style:j.style,children:L(i,{collisionDetection:n,onDragStart:E,onDragEnd:H,children:L(c.List,{name:j.name,rules:j.rules,children:function e(r,i,n){var o;var m=n.errors;T.current=r;return N("div",{style:{borderRadius:"6px",border:m!=null&&m.length?"1px solid #ff4d4f":"1px solid transparent"},children:[(o=j.formListItemTitleList)!=null&&o.length?L(F,{formListItemTitleList:j.formListItemTitleList,formListItemTitleHProps:j.formListItemTitleHorizontalUnionProps,dragDisabled:j.dragDisabled}):null,!j.hiddenEmptyRender&&!(A!=null&&A.length)?L(p,{image:p.PRESENTED_IMAGE_SIMPLE,style:{margin:"15px 0"}}):null,L(w,{wrapper:j.formListChildrenWrapper,children:N(f,{children:[L(d,{items:O().map((function(e){return P(e)})),strategy:l,children:N(f,{children:[r.map((function(e,r){var t=P(O()[r]);if(!t)return null;return L(C,{formListOperate:i,formListFieldData:e,uid:t,dragIcon:j.dragIcon,getItemDragDisabled:j.getItemDragDisabled,dragDisabled:j.dragDisabled,isGray:!!t&&t===b,index:r,formStageCompleteName:[].concat(D,[e.name]),prevCompleteName:D,uidFieldName:S,style:j.itemStyle,children:j.children},t+"-"+e.key)})),j.onCustomAddRowButton?j.onCustomAddRowButton(i):L(I,{hidden:j.hiddenAddRowButton,type:"dashed",block:true,onClick:function e(){var r;return i.add(t((r={},r[S]=u(),r),j.getAddRowDefaultValues==null?void 0:j.getAddRowDefaultValues()))},children:"添加"})]})}),L(a,{dropAnimation:{duration:0},children:b&&B?L(C,{isOverlay:true,uid:b,className:"drag-form-list-overlay",formListFieldData:B,dragIcon:j.dragIcon,formListOperate:null,index:0,formStageCompleteName:[].concat(D,[B.name]),prevCompleteName:D,uidFieldName:S,children:j.children},b):null}),L(c.ErrorList,{errors:m?[L("div",{style:{color:"#ff4d4f",padding:"5px"},children:m})]:undefined})]})})]})}})})})};export{k as DragFormList};
|
|
10
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/drag-form-list/sortable-item.tsx","@flatbiz/antd/src/drag-form-list/drag-form-list.tsx"],"sourcesContent":["import { DragOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { hooks } from '@wove/react';\nimport { Form, type FormListFieldData, type FormListOperation } from 'antd';\nimport { Fragment, type CSSProperties, type ReactElement } from 'react';\nimport { type DragFormListContentProps, type DragFormListProps } from './types';\nexport type SortableItemProps = {\n formListFieldData: FormListFieldData;\n formListOperate: FormListOperation;\n dragIcon?: DragFormListProps['dragIcon'];\n getItemDragDisabled?: DragFormListProps['getItemDragDisabled'];\n dragDisabled?: DragFormListProps['dragDisabled'];\n isGray?: boolean;\n className?: string;\n style?: CSSProperties;\n uid: string | number;\n index: number;\n isOverlay?: boolean;\n formStageCompleteName: (string | number)[];\n children: (data: DragFormListContentProps) => ReactElement;\n prevCompleteName: (string | number)[];\n uidFieldName: string;\n};\nexport function SortableItem(props: SortableItemProps) {\n const form = Form.useFormInstance();\n const isDisabled = props.isOverlay ? false : props.getItemDragDisabled?.(props.uid, props.index);\n const { listeners, setNodeRef, transform, transition } = useSortable({\n id: props.uid,\n disabled: isDisabled,\n });\n\n const dragIconRender = hooks.useCallbackRef(() => {\n const dragIcon = props.dragIcon ? props.dragIcon : <DragOutlined />;\n return props.dragDisabled ? (\n <Fragment />\n ) : (\n <span className=\"drag-form-list-item-trigger\" {...listeners}>\n <span>{dragIcon}</span>\n </span>\n );\n });\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n ...props.style,\n };\n\n const cname = classNames(\n 'drag-form-list-item',\n {\n 'drag-form-list-item-grap': props.isGray,\n 'drag-form-list-item-disabled': isDisabled,\n },\n props.className,\n );\n return (\n <div style={{ ...style }} ref={setNodeRef} className={cname}>\n <Form.Item style={{ margin: 0 }}>{dragIconRender()}</Form.Item>\n <div className=\"drag-form-list-item-content\">\n {props.children({\n formListFieldData: props.formListFieldData,\n operation: props.formListOperate,\n formStageCompleteName: props.formStageCompleteName,\n index: props.index,\n getInsideFormItemName: (key: string) => {\n return [props.formListFieldData.name, key];\n },\n getInsideFormItemData: () => {\n return form.getFieldValue(props.formStageCompleteName) || {};\n },\n prevCompleteName: props.prevCompleteName,\n uidKey: props.uidFieldName,\n })}\n </div>\n </div>\n );\n}\n","import { classNames } from '@dimjs/utils';\nimport { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { getUuid, toArray, type TAny, type TPlainObject } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Empty, Form, type FormListFieldData } from 'antd';\nimport { Fragment, useMemo, useRef, useState, type ReactElement } from 'react';\nimport { BlockLayout } from '../block-layout';\nimport { ButtonWrapper } from '../button-wrapper';\nimport { SortableItem } from './sortable-item';\nimport './style.less';\nimport { type DragFormListProps } from './types';\n\ntype FormListChildrenWrapperProps = {\n wrapper?: DragFormListProps['formListChildrenWrapper'];\n children: ReactElement;\n};\nconst FormListChildrenWrapper = (props: FormListChildrenWrapperProps) => {\n if (props.wrapper) return props.wrapper({ children: props.children });\n return props.children;\n};\n\n/**\n * 可拖拽FormList\n * ```\n * 1. FormList数组中必须要有唯一值字段，默认值字段名称uid，可通过uidFieldName自定义设置\n * 2. Demo: https://fex.qa.tcshuke.com/docs/admin/main/form/list\n * ```\n */\nexport const DragFormList = (props: DragFormListProps) => {\n const stageCompleteName = [...props.prevCompleteName, ...toArray(props.name)] as Array<string | number>;\n const [dragActiveId, setDragActiveId] = useState<string | number>();\n const form = Form.useFormInstance();\n const formListOperationRef = useRef<FormListFieldData[]>([]);\n\n const uidFieldName = props.uidFieldName || 'uid';\n // 使用 useWatch 可确保FormList在变更后及时刷新\n const formListValue = Form.useWatch(stageCompleteName, form);\n\n const getUidValue = hooks.useCallbackRef((item) => {\n return item?.[uidFieldName] as string | number;\n });\n\n function handleDragStart(event) {\n const { active } = event;\n setDragActiveId(active.id);\n }\n\n const getItems = hooks.useCallbackRef(() => {\n /** 只能通过getFieldValue取值 */\n return (form.getFieldValue(stageCompleteName) || []) as TPlainObject[];\n });\n\n function handleDragEnd(event) {\n const { active, over } = event;\n const items = getItems();\n if (active.id !== over.id) {\n const oldIndex = items.findIndex((item) => getUidValue(item) === active.id);\n const newIndex = items.findIndex((item) => getUidValue(item) === over.id);\n const newList = arrayMove<TPlainObject>(items, oldIndex, newIndex);\n form.setFields([\n {\n name: props.name,\n value: newList,\n },\n ]);\n props.onDropChange?.(newList);\n }\n setDragActiveId(undefined);\n }\n\n const dragOverlayItem = useMemo(() => {\n if (!dragActiveId) return undefined;\n const items = getItems();\n const targetIndex = items.findIndex((item) => getUidValue(item) === dragActiveId);\n return formListOperationRef.current.find((item) => item.name === targetIndex);\n }, [dragActiveId, getItems, getUidValue]);\n\n return (\n <BlockLayout className={classNames('drag-form-list', props.className)} style={props.style}>\n {!props.hiddenEmptyRender && !formListValue?.length ? (\n <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: '15px 0' }} />\n ) : null}\n <DndContext collisionDetection={closestCenter} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>\n <Form.List name={props.name} rules={props.rules}>\n {(fields, operation) => {\n formListOperationRef.current = fields;\n return (\n <FormListChildrenWrapper wrapper={props.formListChildrenWrapper}>\n <Fragment>\n <SortableContext\n items={getItems().map((temp) => getUidValue(temp))}\n strategy={verticalListSortingStrategy}\n >\n <Fragment>\n {fields.map((item, index) => {\n const uid = getUidValue(getItems()[index]);\n if (!uid) return null;\n return (\n <SortableItem\n formListOperate={operation}\n formListFieldData={item}\n uid={uid}\n key={`${uid}-${item.key}`}\n dragIcon={props.dragIcon}\n getItemDragDisabled={props.getItemDragDisabled}\n dragDisabled={props.dragDisabled}\n isGray={!!uid && uid === dragActiveId}\n index={index}\n formStageCompleteName={[...stageCompleteName, item.name]}\n prevCompleteName={stageCompleteName}\n uidFieldName={uidFieldName}\n style={props.itemStyle}\n >\n {props.children}\n </SortableItem>\n );\n })}\n {props.onCustomAddRowButton ? (\n props.onCustomAddRowButton(operation)\n ) : (\n <ButtonWrapper\n hidden={props.hiddenAddRowButton}\n type=\"dashed\"\n block\n onClick={() =>\n operation.add({\n [uidFieldName]: getUuid(),\n ...props.getAddRowDefaultValues?.(),\n })\n }\n >\n 添加\n </ButtonWrapper>\n )}\n </Fragment>\n </SortableContext>\n <DragOverlay dropAnimation={{ duration: 0 }}>\n {dragActiveId && dragOverlayItem ? (\n <SortableItem\n isOverlay={true}\n uid={dragActiveId}\n key={dragActiveId}\n className=\"drag-form-list-overlay\"\n formListFieldData={dragOverlayItem}\n dragIcon={props.dragIcon}\n formListOperate={null as TAny}\n index={0}\n formStageCompleteName={[...stageCompleteName, dragOverlayItem.name]}\n prevCompleteName={stageCompleteName}\n uidFieldName={uidFieldName}\n >\n {props.children}\n </SortableItem>\n ) : null}\n </DragOverlay>\n </Fragment>\n </FormListChildrenWrapper>\n );\n }}\n </Form.List>\n </DndContext>\n </BlockLayout>\n );\n};\n"],"names":["SortableItem","props","form","Form","useFormInstance","isDisabled","isOverlay","getItemDragDisabled","uid","index","_useSortable","useSortable","id","disabled","listeners","setNodeRef","transform","transition","dragIconRender","_hooks","useCallbackRef","dragIcon","_jsx","_DragOutlined","dragDisabled","Fragment","_extends","className","children","style","CSS","Transform","toString","cname","_classNames","isGray","_jsxs","ref","Item","margin","formListFieldData","operation","formListOperate","formStageCompleteName","getInsideFormItemName","key","name","getInsideFormItemData","getFieldValue","prevCompleteName","uidKey","uidFieldName","FormListChildrenWrapper","wrapper","DragFormList","stageCompleteName","concat","toArray","_useState","useState","dragActiveId","setDragActiveId","formListOperationRef","useRef","formListValue","useWatch","getUidValue","item","handleDragStart","event","active","getItems","handleDragEnd","over","items","oldIndex","findIndex","newIndex","newList","arrayMove","setFields","value","onDropChange","undefined","dragOverlayItem","useMemo","targetIndex","current","find","BlockLayout","hiddenEmptyRender","length","Empty","image","PRESENTED_IMAGE_SIMPLE","DndContext","collisionDetection","closestCenter","onDragStart","onDragEnd","List","rules","fields","formListChildrenWrapper","SortableContext","map","temp","strategy","verticalListSortingStrategy","itemStyle","onCustomAddRowButton","ButtonWrapper","hidden","hiddenAddRowButton","type","block","onClick","_extends2","add","getUuid","getAddRowDefaultValues","DragOverlay","dropAnimation","duration"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/drag-form-list/sortable-item.tsx","@flatbiz/antd/src/drag-form-list/drag-form-list.tsx"],"sourcesContent":["import { DragOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { hooks } from '@wove/react';\nimport { Form, type FormListFieldData, type FormListOperation } from 'antd';\nimport { Fragment, type CSSProperties, type ReactElement } from 'react';\nimport { type DragFormListContentProps, type DragFormListProps } from './types';\nexport type SortableItemProps = {\n formListFieldData: FormListFieldData;\n formListOperate: FormListOperation;\n dragIcon?: DragFormListProps['dragIcon'];\n getItemDragDisabled?: DragFormListProps['getItemDragDisabled'];\n dragDisabled?: DragFormListProps['dragDisabled'];\n isGray?: boolean;\n className?: string;\n style?: CSSProperties;\n uid: string | number;\n index: number;\n isOverlay?: boolean;\n formStageCompleteName: (string | number)[];\n children: (data: DragFormListContentProps) => ReactElement;\n prevCompleteName: (string | number)[];\n uidFieldName: string;\n};\nexport function SortableItem(props: SortableItemProps) {\n const form = Form.useFormInstance();\n const isDisabled = props.isOverlay ? false : props.getItemDragDisabled?.(props.uid, props.index);\n const { listeners, setNodeRef, transform, transition } = useSortable({\n id: props.uid,\n disabled: isDisabled,\n });\n\n const dragIconRender = hooks.useCallbackRef(() => {\n const dragIcon = props.dragIcon ? props.dragIcon : <DragOutlined />;\n return props.dragDisabled ? (\n <Fragment />\n ) : (\n <span className=\"drag-form-list-item-trigger\" {...listeners}>\n <span>{dragIcon}</span>\n </span>\n );\n });\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n ...props.style,\n };\n\n const cname = classNames(\n 'drag-form-list-item',\n {\n 'drag-form-list-item-grap': props.isGray,\n 'drag-form-list-item-disabled': isDisabled,\n },\n props.className,\n );\n return (\n <div style={{ ...style }} ref={setNodeRef} className={cname}>\n <Form.Item style={{ margin: 0 }}>{dragIconRender()}</Form.Item>\n <div className=\"drag-form-list-item-content\">\n {props.children({\n formListFieldData: props.formListFieldData,\n operation: props.formListOperate,\n formStageCompleteName: props.formStageCompleteName,\n index: props.index,\n getInsideFormItemName: (key: string) => {\n return [props.formListFieldData.name, key];\n },\n getInsideFormItemData: () => {\n return form.getFieldValue(props.formStageCompleteName) || {};\n },\n prevCompleteName: props.prevCompleteName,\n uidKey: props.uidFieldName,\n })}\n </div>\n </div>\n );\n}\n","import { classNames } from '@dimjs/utils';\nimport { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { getUuid, toArray, type TAny, type TPlainObject } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Empty, Form, type FormListFieldData } from 'antd';\nimport { Fragment, useMemo, useRef, useState, type ReactElement } from 'react';\nimport { BlockLayout } from '../block-layout';\nimport { ButtonWrapper } from '../button-wrapper';\nimport { FormItemGroup } from '../form-item-group';\nimport { FormItemHorizontalUnionProps } from '../form-item-group/horizontal-union';\nimport { TextSymbolWrapper } from '../text-symbol-wrapper';\nimport { SortableItem } from './sortable-item';\nimport './style.less';\nimport { type DragFormListProps } from './types';\n\ntype FormListChildrenWrapperProps = {\n wrapper?: DragFormListProps['formListChildrenWrapper'];\n\n children: ReactElement;\n};\nconst FormListChildrenWrapper = (props: FormListChildrenWrapperProps) => {\n if (props.wrapper) return props.wrapper({ children: props.children });\n return props.children;\n};\n\nconst FormListTitleRender = (props: {\n formListItemTitleList: DragFormListProps['formListItemTitleList'];\n formListItemTitleHProps?: DragFormListProps['formListItemTitleHorizontalUnionProps'];\n dragDisabled?: boolean;\n}) => {\n const gap = props.formListItemTitleHProps?.gap;\n const innerList: FormItemHorizontalUnionProps['groupConfigList'] = props.dragDisabled\n ? []\n : [{ width: 35, mainItem: <div style={{ marginRight: gap === undefined ? -15 : -gap }} /> }];\n return (\n <FormItemGroup.HorizontalUnion\n {...props.formListItemTitleHProps}\n style={{ marginBottom: 10, ...props.formListItemTitleHProps?.style }}\n groupConfigList={innerList.concat(\n props.formListItemTitleList?.map((item) => {\n if (item.required) {\n return {\n width: item.width,\n mainItem: (\n <div style={{ textAlign: 'center' }}>\n <TextSymbolWrapper text={item.title} symbolType=\"required\" />\n </div>\n ),\n };\n }\n return { width: item.width, mainItem: <div style={{ textAlign: 'center' }}>{item.title}</div> };\n }) || [],\n )}\n />\n );\n};\n\n/**\n * 可拖拽FormList\n * ```\n * Demo: https://fex.qa.tcshuke.com/docs/admin/main/form/list\n * 1. FormList数组中必须要有唯一值字段，默认值字段名称uid，可通过uidFieldName自定义设置\n * ```\n */\nexport const DragFormList = (props: DragFormListProps) => {\n const stageCompleteName = [...props.prevCompleteName, ...toArray(props.name)] as Array<string | number>;\n const [dragActiveId, setDragActiveId] = useState<string | number>();\n const form = Form.useFormInstance();\n const formListOperationRef = useRef<FormListFieldData[]>([]);\n\n const uidFieldName = props.uidFieldName || 'uid';\n // 使用 useWatch 可确保FormList在变更后及时刷新\n const formListValue = Form.useWatch(stageCompleteName, form);\n\n const getUidValue = hooks.useCallbackRef((item) => {\n return item?.[uidFieldName] as string | number;\n });\n\n function handleDragStart(event) {\n const { active } = event;\n setDragActiveId(active.id);\n }\n\n const getItems = hooks.useCallbackRef(() => {\n /** 只能通过getFieldValue取值 */\n return (form.getFieldValue(stageCompleteName) || []) as TPlainObject[];\n });\n\n function handleDragEnd(event) {\n const { active, over } = event;\n const items = getItems();\n if (active.id !== over.id) {\n const oldIndex = items.findIndex((item) => getUidValue(item) === active.id);\n const newIndex = items.findIndex((item) => getUidValue(item) === over.id);\n const newList = arrayMove<TPlainObject>(items, oldIndex, newIndex);\n form.setFields([\n {\n name: props.name,\n value: newList,\n },\n ]);\n props.onDropChange?.(newList);\n }\n setDragActiveId(undefined);\n }\n\n const dragOverlayItem = useMemo(() => {\n if (!dragActiveId) return undefined;\n const items = getItems();\n const targetIndex = items.findIndex((item) => getUidValue(item) === dragActiveId);\n return formListOperationRef.current.find((item) => item.name === targetIndex);\n }, [dragActiveId, getItems, getUidValue]);\n\n return (\n <BlockLayout className={classNames('drag-form-list', props.className)} style={props.style}>\n <DndContext collisionDetection={closestCenter} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>\n <Form.List name={props.name} rules={props.rules}>\n {(fields, operation, { errors }) => {\n formListOperationRef.current = fields;\n return (\n <div\n style={{\n borderRadius: '6px',\n border: errors?.length ? '1px solid #ff4d4f' : '1px solid transparent',\n }}\n >\n {props.formListItemTitleList?.length ? (\n <FormListTitleRender\n formListItemTitleList={props.formListItemTitleList}\n formListItemTitleHProps={props.formListItemTitleHorizontalUnionProps}\n dragDisabled={props.dragDisabled}\n />\n ) : null}\n {!props.hiddenEmptyRender && !formListValue?.length ? (\n <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: '15px 0' }} />\n ) : null}\n <FormListChildrenWrapper wrapper={props.formListChildrenWrapper}>\n <Fragment>\n <SortableContext\n items={getItems().map((temp) => getUidValue(temp))}\n strategy={verticalListSortingStrategy}\n >\n <Fragment>\n {fields.map((item, index) => {\n const uid = getUidValue(getItems()[index]);\n if (!uid) return null;\n return (\n <SortableItem\n formListOperate={operation}\n formListFieldData={item}\n uid={uid}\n key={`${uid}-${item.key}`}\n dragIcon={props.dragIcon}\n getItemDragDisabled={props.getItemDragDisabled}\n dragDisabled={props.dragDisabled}\n isGray={!!uid && uid === dragActiveId}\n index={index}\n formStageCompleteName={[...stageCompleteName, item.name]}\n prevCompleteName={stageCompleteName}\n uidFieldName={uidFieldName}\n style={props.itemStyle}\n >\n {props.children}\n </SortableItem>\n );\n })}\n {props.onCustomAddRowButton ? (\n props.onCustomAddRowButton(operation)\n ) : (\n <ButtonWrapper\n hidden={props.hiddenAddRowButton}\n type=\"dashed\"\n block\n onClick={() =>\n operation.add({\n [uidFieldName]: getUuid(),\n ...props.getAddRowDefaultValues?.(),\n })\n }\n >\n 添加\n </ButtonWrapper>\n )}\n </Fragment>\n </SortableContext>\n <DragOverlay dropAnimation={{ duration: 0 }}>\n {dragActiveId && dragOverlayItem ? (\n <SortableItem\n isOverlay={true}\n uid={dragActiveId}\n key={dragActiveId}\n className=\"drag-form-list-overlay\"\n formListFieldData={dragOverlayItem}\n dragIcon={props.dragIcon}\n formListOperate={null as TAny}\n index={0}\n formStageCompleteName={[...stageCompleteName, dragOverlayItem.name]}\n prevCompleteName={stageCompleteName}\n uidFieldName={uidFieldName}\n >\n {props.children}\n </SortableItem>\n ) : null}\n </DragOverlay>\n <Form.ErrorList\n errors={\n errors\n ? [<div style={{ color: '#ff4d4f', padding: '5px' }}>{errors}</div>]\n : undefined\n }\n />\n </Fragment>\n </FormListChildrenWrapper>\n </div>\n );\n }}\n </Form.List>\n </DndContext>\n </BlockLayout>\n );\n};\n"],"names":["SortableItem","props","form","Form","useFormInstance","isDisabled","isOverlay","getItemDragDisabled","uid","index","_useSortable","useSortable","id","disabled","listeners","setNodeRef","transform","transition","dragIconRender","_hooks","useCallbackRef","dragIcon","_jsx","_DragOutlined","dragDisabled","Fragment","_extends","className","children","style","CSS","Transform","toString","cname","_classNames","isGray","_jsxs","ref","Item","margin","formListFieldData","operation","formListOperate","formStageCompleteName","getInsideFormItemName","key","name","getInsideFormItemData","getFieldValue","prevCompleteName","uidKey","uidFieldName","FormListChildrenWrapper","wrapper","FormListTitleRender","_props$formListItemTi","_props$formListItemTi2","_props$formListItemTi3","gap","formListItemTitleHProps","innerList","width","mainItem","marginRight","undefined","FormItemGroup","HorizontalUnion","marginBottom","groupConfigList","concat","formListItemTitleList","map","item","required","textAlign","TextSymbolWrapper","text","title","symbolType","DragFormList","stageCompleteName","toArray","_useState","useState","dragActiveId","setDragActiveId","formListOperationRef","useRef","formListValue","useWatch","getUidValue","handleDragStart","event","active","getItems","handleDragEnd","over","items","oldIndex","findIndex","newIndex","newList","arrayMove","setFields","value","onDropChange","dragOverlayItem","useMemo","targetIndex","current","find","BlockLayout","DndContext","collisionDetection","closestCenter","onDragStart","onDragEnd","List","rules","fields","_ref","_props$formListItemTi4","errors","borderRadius","border","length","formListItemTitleHorizontalUnionProps","hiddenEmptyRender","Empty","image","PRESENTED_IMAGE_SIMPLE","formListChildrenWrapper","SortableContext","temp","strategy","verticalListSortingStrategy","itemStyle","onCustomAddRowButton","ButtonWrapper","hidden","hiddenAddRowButton","type","block","onClick","_extends2","add","getUuid","getAddRowDefaultValues","DragOverlay","dropAnimation","duration","ErrorList","color","padding"],"mappings":"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"}
|
package/esm/easy-form/index.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import './../box-grid/index.css';
|
|
3
3
|
import './../fba-hooks/index.css';
|
|
4
4
|
import './../form-wrapper/index.css';
|
|
5
|
+
import './../pre-defined-class-name/index.css';
|
|
5
6
|
import './index.css';
|
|
6
7
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
7
|
-
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as e,_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as t,dom as i}from"@flatbiz/utils";import{useMemo as n,useRef as a,Fragment as
|
|
8
|
+
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as e,_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as t,dom as i}from"@flatbiz/utils";import{useMemo as n,useRef as a,Fragment as s,Children as m}from"react";import{BoxGrid as o}from"../box-grid/index.js";import{fbaHooks as f}from"../fba-hooks/index.js";import{FormWrapper as u}from"../form-wrapper/index.js";import{jsxs as d,jsx as c}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";import"antd";import"../pre-defined-class-name/index.js";var p=["column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure"];var x=function x(v){var h=f.useResponsivePoint()||"";var g=v.column,b=v.forceColumn,y=v.children,j=v.width,I=v.gridGutter,N=v.labelWidth,w=v.labelItemVertical,G=v.labelAlign,C=v.formItemGap,P=v.isPure,A=e(v,p);var T=n((function(){if(b){var r=24/b;return{xs:r,sm:r,md:r,lg:r,xl:r,xxl:r}}if(!g){return{xs:24,sm:12,md:12,lg:8,xl:8,xxl:6}}var e={1:{xs:24,sm:24,md:24,lg:24,xl:24,xxl:24},2:{xs:24,sm:12,md:12,lg:12,xl:12,xxl:12},3:{xs:24,sm:12,md:12,lg:8,xl:8,xxl:8},4:{xs:24,sm:12,md:12,lg:6,xl:6,xxl:6}};return e[g]}),[g,b]);var W=function r(){return m.toArray(y).map((function(r,e){if(r.props["hidden"])return null;if(r.type["domTypeName"]==="BoxGridCol")return c(s,{children:r},e);var t=undefined;if(r.type["domTypeName"]==="FormItemWrapper"||r.type["domTypeName"]==="FormItemText"){t=r.props["span"];if(t){if(h==="xs"){t=24}else if(h==="sm"){t=t>12?t:12}}}return c(o.Col,l({},T,{span:t,children:r}),e)})).filter(Boolean)};var k=n((function(){if(["xs","sm"].includes(h)||!j){return{}}return{width:j}}),[h]);var B=t(I)?[15,0]:I;var R=a(null);var V=n((function(){try{if(R.current){var r=i.findParentsElement(R.current,(function(r){var e;return(e=r.classList)==null||e.contains==null?void 0:e.contains("easy-form")}));return r?true:false}return undefined}catch(r){return false}}),[R.current]);var F=n((function(){var r="";if(N){r+="form-label-"+N}if(w){r+=" form-label-value-vertical"}if(G){r+=" form-label-align-"+G}if(C){r+=" form-formitem-gap-"+C}return r}),[N,w,G,C]);return d(s,{children:[c("div",{className:"easy-form-anchor",ref:R}),V===true?c("div",{style:l({},k,A.style),className:r(F,"easy-form","easy-form-nested",A.className),children:P?y:c(o.Row,{gutter:B,children:W()})}):undefined,V===false?c(u,l({},A,{labelWidth:N,labelAlign:G,labelItemVertical:w,formItemGap:C,style:l({},k,A.style),className:r("easy-form",A.className),autoComplete:"off",children:P?y:c(o.Row,{gutter:B,children:W()})})):undefined]})};export{x as EasyForm};
|
|
8
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactNode, useMemo, useRef } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormWrapper, FormWrapperProps } from '../form-wrapper';\nimport './style.less';\n\nexport type EasyFormProps = Omit<FormWrapperProps, 'children'> & {\n /**\n * 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3\n * ```\n * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）\n * 2. 宽度尺寸定义\n * xs: 宽度 < 576px\n * sm: 宽度 ≥ 576px\n * md: 宽度 ≥ 768px\n * lg: 宽度 ≥ 992px\n * xl: 宽度 ≥ 1200px\n * xxl: 宽度 ≥ 1600px\n * 3. 列数尺寸定义\n * {\n * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n * };\n * ```\n */\n column?: 1 | 2 | 3 | 4;\n /**\n * 强制定义一行显示几列，不考虑响应式\n * ```\n * 1. 优先级大于column\n * 2. 建议优先使用column配置\n * ```\n */\n forceColumn?: 1 | 2 | 3 | 4;\n /**\n * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效\n */\n width?: number | string;\n /** 网格间距 */\n gridGutter?: BoxRowProps['gutter'];\n children: ReactNode;\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form属性失效，例如属性form、initialValues等都失效\n * 3. 布局网格以当前节点的宽度来计算的，不是屏幕宽度\n * 4. EasyForm 子节点包含 hidden = true 会被忽略\n * 5. 通过 column 可定义一行显示几列FormItem\n * 6. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 7. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 8. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 9. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 10. 自定义栅格占位格数，见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <Form.Item name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </Form.Item>\n *\t <Form.Item name=\"field2\" label=\"条件2\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </Form.Item>\n *\t <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <Form.Item name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </Form.Item>\n *\t </BoxGrid.Col>\n *\t <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->\n *\t <FormItemWrapper name=\"field6\" label=\"条件6\" span={24}>\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n * </EasyForm>\n * ```\n */\nexport const EasyForm = (props: EasyFormProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const {\n column,\n forceColumn,\n children,\n width,\n gridGutter,\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap,\n ...otherProps\n } = props;\n\n const gridSize = useMemo(() => {\n if (forceColumn) {\n const num = 24 / forceColumn;\n return { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num };\n }\n if (!column) {\n return { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };\n }\n const columnMap = {\n 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n };\n return columnMap[column];\n }, [column, forceColumn]);\n\n const getFormRowChildren = () => {\n return Children.toArray(children)\n .map((item: any, index) => {\n if (item.props['hidden']) return null;\n if (item.type['domTypeName'] === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n let span: number | undefined = undefined;\n if (item.type['domTypeName'] === 'FormItemWrapper') {\n span = item.props['span'] as number;\n if (span) {\n if (screenType === 'xs') {\n span = 24;\n } else if (screenType === 'sm') {\n span = span > 12 ? span : 12;\n }\n }\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span}>\n {item}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType]);\n\n const gutter = (isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter) as BoxRowProps['gutter'];\n const anchorRef = useRef<HTMLDivElement>(null);\n\n // 是否嵌套EasyForm节点\n const isNestedEasyForm = useMemo(() => {\n try {\n if (anchorRef.current) {\n const target = dom.findParentsElement(anchorRef.current, (node) => {\n return node.classList?.contains?.('easy-form');\n });\n return target ? true : false;\n }\n return undefined;\n } catch (error) {\n return false;\n }\n }, [anchorRef.current]);\n\n const fromLayoutClassName = useMemo(() => {\n let cn = '';\n if (labelWidth) {\n cn += `form-label-${labelWidth}`;\n }\n if (labelItemVertical) {\n cn += ` form-label-value-vertical`;\n }\n if (labelAlign) {\n cn += ` form-label-align-${labelAlign}`;\n }\n if (formItemGap) {\n cn += ` form-formitem-gap-${formItemGap}`;\n }\n return cn;\n }, [labelWidth, labelItemVertical, labelAlign, formItemGap]);\n\n return (\n <Fragment>\n <div className=\"easy-form-anchor\" ref={anchorRef}></div>\n {isNestedEasyForm === true ? (\n <div\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames(fromLayoutClassName, 'easy-form', 'easy-form-nested', otherProps.className)}\n >\n <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>\n </div>\n ) : undefined}\n {isNestedEasyForm === false ? (\n <FormWrapper\n {...otherProps}\n labelWidth={labelWidth}\n labelAlign={labelAlign}\n labelItemVertical={labelItemVertical}\n formItemGap={formItemGap}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', otherProps.className)}\n autoComplete=\"off\"\n >\n <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>\n </FormWrapper>\n ) : undefined}\n </Fragment>\n );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","Children","toArray","map","item","index","type","_jsx","Fragment","span","undefined","BoxGrid","Col","_extends","filter","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","isNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","fromLayoutClassName","cn","_jsxs","className","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactNode, useMemo, useRef } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormWrapper, FormWrapperProps } from '../form-wrapper';\nimport './style.less';\n\nexport type EasyFormProps = Omit<FormWrapperProps, 'children'> & {\n /**\n * 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3\n * ```\n * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）\n * 2. 宽度尺寸定义\n * xs: 宽度 < 576px\n * sm: 宽度 ≥ 576px\n * md: 宽度 ≥ 768px\n * lg: 宽度 ≥ 992px\n * xl: 宽度 ≥ 1200px\n * xxl: 宽度 ≥ 1600px\n * 3. 列数尺寸定义\n * {\n * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n * };\n * ```\n */\n column?: 1 | 2 | 3 | 4;\n /**\n * 强制定义一行显示几列，不考虑响应式\n * ```\n * 1. 优先级大于column\n * 2. 建议优先使用column配置\n * ```\n */\n forceColumn?: 1 | 2 | 3 | 4;\n /**\n * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效\n */\n width?: number | string;\n /** 网格间距 */\n gridGutter?: BoxRowProps['gutter'];\n children: ReactNode;\n /** 是否为纯净模式，对EasyForm的子节点不做任何包装处理 */\n isPure?: boolean;\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效\n * 3. 布局网格以当前节点的宽度来计算的，不是屏幕宽度\n * 4. EasyForm 子节点包含 hidden = true 会被忽略\n * 5. 通过 column 可定义一行显示几列FormItem\n * 6. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 7. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 8. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 9. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 10. 自定义栅格占位格数，见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <FormItemWrapper name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <FormItemWrapper name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t </BoxGrid.Col>\n *\t <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->\n *\t <FormItemWrapper name=\"field6\" label=\"条件6\" span={24}>\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n * </EasyForm>\n * ```\n */\nexport const EasyForm = (props: EasyFormProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const {\n column,\n forceColumn,\n children,\n width,\n gridGutter,\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap,\n isPure,\n ...otherProps\n } = props;\n\n const gridSize = useMemo(() => {\n if (forceColumn) {\n const num = 24 / forceColumn;\n return { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num };\n }\n if (!column) {\n return { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };\n }\n const columnMap = {\n 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n };\n return columnMap[column];\n }, [column, forceColumn]);\n\n const getFormRowChildren = () => {\n return Children.toArray(children)\n .map((item: any, index) => {\n if (item.props['hidden']) return null;\n if (item.type['domTypeName'] === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n let span: number | undefined = undefined;\n if (item.type['domTypeName'] === 'FormItemWrapper' || item.type['domTypeName'] === 'FormItemText') {\n span = item.props['span'] as number;\n if (span) {\n if (screenType === 'xs') {\n span = 24;\n } else if (screenType === 'sm') {\n span = span > 12 ? span : 12;\n }\n }\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span}>\n {item}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType]);\n\n const gutter = (isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter) as BoxRowProps['gutter'];\n const anchorRef = useRef<HTMLDivElement>(null);\n\n // 是否嵌套EasyForm节点\n const isNestedEasyForm = useMemo(() => {\n try {\n if (anchorRef.current) {\n const target = dom.findParentsElement(anchorRef.current, (node) => {\n return node.classList?.contains?.('easy-form');\n });\n return target ? true : false;\n }\n return undefined;\n } catch (error) {\n return false;\n }\n }, [anchorRef.current]);\n\n const fromLayoutClassName = useMemo(() => {\n let cn = '';\n if (labelWidth) {\n cn += `form-label-${labelWidth}`;\n }\n if (labelItemVertical) {\n cn += ` form-label-value-vertical`;\n }\n if (labelAlign) {\n cn += ` form-label-align-${labelAlign}`;\n }\n if (formItemGap) {\n cn += ` form-formitem-gap-${formItemGap}`;\n }\n return cn;\n }, [labelWidth, labelItemVertical, labelAlign, formItemGap]);\n\n return (\n <Fragment>\n <div className=\"easy-form-anchor\" ref={anchorRef}></div>\n {isNestedEasyForm === true ? (\n <div\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames(fromLayoutClassName, 'easy-form', 'easy-form-nested', otherProps.className)}\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </div>\n ) : undefined}\n {isNestedEasyForm === false ? (\n <FormWrapper\n {...otherProps}\n labelWidth={labelWidth}\n labelAlign={labelAlign}\n labelItemVertical={labelItemVertical}\n formItemGap={formItemGap}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', otherProps.className)}\n autoComplete=\"off\"\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </FormWrapper>\n ) : undefined}\n </Fragment>\n );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","Children","toArray","map","item","index","type","_jsx","Fragment","span","undefined","BoxGrid","Col","_extends","filter","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","isNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","fromLayoutClassName","cn","_jsxs","className","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|