@flatbiz/antd 4.3.0 → 4.4.0
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/amount-fen-input/index.js.map +1 -1
- package/esm/bootstrap/index.css +1 -0
- package/esm/bootstrap/index.js +12 -0
- package/esm/bootstrap/index.js.map +1 -0
- package/esm/card-layout/index.css +1 -0
- package/esm/card-layout/index.js +5 -0
- package/esm/card-layout/index.js.map +1 -0
- package/esm/dialog-drawer/index.js +1 -1
- package/esm/dialog-drawer/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-editable-table/index.js +1 -1
- package/esm/drag-editable-table/index.js.map +1 -1
- package/esm/drag-form-list/index.css +1 -1
- package/esm/drag-form-list/index.js +1 -1
- package/esm/drag-form-list/index.js.map +1 -1
- package/esm/drag-table/index.js +1 -1
- package/esm/drag-table/index.js.map +1 -1
- package/esm/easy-table/index.css +1 -1
- package/esm/easy-table/index.js +2 -2
- package/esm/easy-table/index.js.map +1 -1
- package/esm/fba-app/index.css +1 -1
- package/esm/fba-app/index.js +1 -1
- package/esm/fba-app/index.js.map +1 -1
- package/esm/fba-hooks/index.js +1 -1
- package/esm/fba-hooks/index.js.map +1 -1
- package/esm/form-item-group/index.css +1 -1
- package/esm/form-list-wrapper/index.css +1 -1
- package/esm/index-1f45bfd5.js +3 -0
- package/esm/index-1f45bfd5.js.map +1 -0
- package/esm/index.css +1 -0
- package/esm/index.js +9 -7
- package/esm/json-editor/index.js +1 -1
- package/esm/json-editor/index.js.map +1 -1
- package/esm/label-value-layout/index.css +1 -1
- package/esm/local-loading/index.js +1 -1
- package/esm/local-loading/index.js.map +1 -1
- package/esm/page-fixed-footer/index.css +1 -1
- package/esm/rule-describe/index.css +1 -1
- package/esm/search-form/index.css +1 -0
- package/esm/search-form/index.js +2 -1
- package/esm/search-form/index.js.map +1 -1
- package/esm/selector-wrapper/index.js.map +1 -1
- package/esm/simple-layout/index.js.map +1 -1
- package/esm/split-wrapper/index.css +1 -1
- package/esm/tips-title/index.css +1 -1
- package/esm/tree-selector-wrapper/index.js +2 -2
- package/esm/tree-selector-wrapper/index.js.map +1 -1
- package/esm/tree-wrapper/index.css +1 -1
- package/esm/tree-wrapper/index.js +1 -1
- package/esm/tree-wrapper/index.js.map +1 -1
- package/index.d.ts +132 -23
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/amount-fen-input/amount-fen-input.tsx"],"sourcesContent":["import { flatbizPrice, isUndefinedOrNull } from '@flatbiz/utils';\nimport { InputNumber, InputNumberProps } from 'antd';\n\nexport type AmountFenInputProps = Omit<InputNumberProps, 'defaultValue'> & {\n value?: number;\n onChange?: (value?: number) => void;\n};\n\nexport const AmountFenInput = (props: AmountFenInputProps) => {\n const value = isUndefinedOrNull(props.value) ? undefined : flatbizPrice.fen2yuan(props.value);\n return (\n <InputNumber\n {...props}\n style={{ width: '100%', ...props.style }}\n value={value}\n onChange={(value) => {\n props.onChange?.(\n isUndefinedOrNull(value) ? undefined : Number(flatbizPrice.yuan2fen(value as number)),\n );\n }}\n />\n );\n};\n"],"names":["AmountFenInput","props","value","isUndefinedOrNull","undefined","flatbizPrice","fen2yuan","_jsx","InputNumber","_extends","style","width","onChange","Number","yuan2fen"],"mappings":";iNAQaA,EAAiB,SAAjBA,EAAkBC,GAC7B,IAAMC,EAAQC,EAAkBF,EAAMC,OAASE,UAAYC,EAAaC,SAASL,EAAMC,OACvF,OACEK,EAACC,EAAWC,KACNR,EAAK,CACTS,MAAKD,EAAA,CAAIE,MAAO,QAAWV,EAAMS,OACjCR,MAAOA,EACPU,SAAU,SAAAA,EAACV,GACTD,EAAMW,UAANX,UAAAA,EAAAA,EAAMW,SACJT,EAAkBD,GAASE,UAAYS,OAAOR,EAAaS,SAASZ,IAExE,IAGN"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/amount-fen-input/amount-fen-input.tsx"],"sourcesContent":["import { flatbizPrice, isUndefinedOrNull } from '@flatbiz/utils';\nimport { InputNumber, type InputNumberProps } from 'antd';\n\nexport type AmountFenInputProps = Omit<InputNumberProps, 'defaultValue'> & {\n value?: number;\n onChange?: (value?: number) => void;\n};\n\nexport const AmountFenInput = (props: AmountFenInputProps) => {\n const value = isUndefinedOrNull(props.value) ? undefined : flatbizPrice.fen2yuan(props.value);\n return (\n <InputNumber\n {...props}\n style={{ width: '100%', ...props.style }}\n value={value}\n onChange={(value) => {\n props.onChange?.(\n isUndefinedOrNull(value) ? undefined : Number(flatbizPrice.yuan2fen(value as number)),\n );\n }}\n />\n );\n};\n"],"names":["AmountFenInput","props","value","isUndefinedOrNull","undefined","flatbizPrice","fen2yuan","_jsx","InputNumber","_extends","style","width","onChange","Number","yuan2fen"],"mappings":";iNAQaA,EAAiB,SAAjBA,EAAkBC,GAC7B,IAAMC,EAAQC,EAAkBF,EAAMC,OAASE,UAAYC,EAAaC,SAASL,EAAMC,OACvF,OACEK,EAACC,EAAWC,KACNR,EAAK,CACTS,MAAKD,EAAA,CAAIE,MAAO,QAAWV,EAAMS,OACjCR,MAAOA,EACPU,SAAU,SAAAA,EAACV,GACTD,EAAMW,UAANX,UAAAA,EAAAA,EAAMW,SACJT,EAAkBD,GAASE,UAAYS,OAAOR,EAAaS,SAASZ,IAExE,IAGN"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.bootstrap-app{background-color:var(--bg-color)}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import './../config-provider-wrapper/index.css';
|
|
3
|
+
import './../fba-hooks/index.css';
|
|
4
|
+
import './../types/index.css';
|
|
5
|
+
import './../fba-app/index.css';
|
|
6
|
+
import './../fba-utils/index.css';
|
|
7
|
+
import './../button-wrapper/index.css';
|
|
8
|
+
import './../flex-layout/index.css';
|
|
9
|
+
import './index.css';
|
|
10
|
+
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
11
|
+
import{_ as o}from"../_rollupPluginBabelHelpers-a0769acd.js";import{get as r}from"@dimjs/utils/cjs/get";import{theme as i,App as e}from"antd";import{C as t}from"../index-7f4ad045.js";import{FbaApp as s}from"../fba-app/index.js";import{fbaHooks as a}from"../fba-hooks/index.js";import{jsx as l}from"react/jsx-runtime";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"../fba-utils/index.js";import"@dimjs/lang/cjs/is-array";import"@flatbiz/utils";import"@wove/react/cjs/hooks";import"react";import"@dimjs/utils/cjs/class-names";import"@dimjs/lang/cjs/is-promise";import"ahooks";import"../button-wrapper/index.js";import"@ant-design/icons/es/icons/LoadingOutlined";import"../flex-layout/index.js";import"../index-1f45bfd5.js";import"../use-responsive-point-21b8c601.js";var m=function m(d){var n;a.useEffectCustom((function(){var o=document.body.style.cssText;var i={};if(o){var e=/(.+?):\s*(.+?);/g;var t;while(t=e.exec(o)){var s=t[1].trim();var a=t[2];i[s]=a}}if(d.dark){i["--bg-color"]=r(d,"bgColorConfig.dark.bgColor","#1b1a1a");i["--block-bg-color"]=r(d,"bgColorConfig.dark.blockBgColor","#000")}else{i["--bg-color"]=r(d,"bgColorConfig.light.bgColor","#f9f9f9");i["--block-bg-color"]=r(d,"bgColorConfig.light.blockBgColor","#FFF")}var l="";Object.keys(i).forEach((function(o){if(i[o]){l=l+(o+":"+i[o]+";")}}));document.body.style.cssText=l;if(d.dark){document.body.classList.add("dark-theme")}else{document.body.classList.add("light-theme")}}),[d.bgColorConfig,d.dark]);var p=a.useThemeToken();return l(t,o({locale:d.locale,componentSize:"middle",space:{size:"middle"}},d.configProviderProps,{theme:o({},(n=d.configProviderProps)==null?void 0:n.theme,{algorithm:d.dark?i.darkAlgorithm:undefined}),children:l(e,{style:{"--color-primary":p.colorPrimary},className:"bootstrap-app",children:l(s,{children:d.children})})}))};export{m as Bootstrap};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/bootstrap/bootstrap.tsx"],"sourcesContent":["import { get } from '@dimjs/utils';\nimport { TAny } from '@flatbiz/utils';\nimport { App, theme } from 'antd';\nimport { CSSProperties, ReactNode } from 'react';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { FbaApp } from '../fba-app';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type BootstrapProps = {\n dark?: boolean;\n children: ReactNode;\n configProviderProps?: ConfigProviderWrapperProps;\n /** @default zhCN */\n locale?: 'en' | 'zh-cn';\n /**\n * 背景颜色配置\n * ```\n * 默认值：\n * dark: { bgColor: '#1b1a1a', blockBgColor: '#000' }\n * light: { bgColor: '#f9f9f9', blockBgColor: '#FFF' }\n * ```\n */\n bgColorConfig?: {\n dark?: {\n bgColor?: string;\n blockBgColor?: string;\n };\n light?: {\n bgColor?: string;\n blockBgColor?: string;\n };\n };\n};\n/**\n * 如果当前项目入口不使用@flatbiz/pro-layout，必须使用 Bootstrap 组件包装\n * ```\n * Bootstrap 内部\n * 1. 封装 antd App组件\n * 2. 封装 @flatbiz/antd FbaApp组件\n * 3. 适配 light/dark模式\n * 4. 封装 antd ConfigProvider 可配置主题\n * ```\n */\nexport const Bootstrap = (props: BootstrapProps) => {\n fbaHooks.useEffectCustom(() => {\n const bodyStyle = document.body.style.cssText;\n const keyValuePairs = {};\n if (bodyStyle) {\n const regex = /(.+?):\\s*(.+?);/g;\n\n let match;\n while ((match = regex.exec(bodyStyle))) {\n const key = match[1].trim();\n const value = match[2];\n keyValuePairs[key] = value;\n }\n }\n if (props.dark) {\n keyValuePairs['--bg-color'] = get(props, 'bgColorConfig.dark.bgColor', '#1b1a1a');\n keyValuePairs['--block-bg-color'] = get(props, 'bgColorConfig.dark.blockBgColor', '#000');\n } else {\n keyValuePairs['--bg-color'] = get(props, 'bgColorConfig.light.bgColor', '#f9f9f9');\n keyValuePairs['--block-bg-color'] = get(props, 'bgColorConfig.light.blockBgColor', '#FFF');\n }\n let varStyleText = '';\n Object.keys(keyValuePairs).forEach((key) => {\n if (keyValuePairs[key]) {\n varStyleText = varStyleText + `${key}:${keyValuePairs[key]};`;\n }\n });\n document.body.style.cssText = varStyleText;\n\n if (props.dark) {\n document.body.classList.add('dark-theme');\n } else {\n document.body.classList.add('light-theme');\n }\n }, [props.bgColorConfig, props.dark]);\n\n const innerTheme = fbaHooks.useThemeToken();\n\n return (\n <ConfigProviderWrapper\n locale={props.locale as TAny}\n componentSize={'middle'}\n space={{ size: 'middle' }}\n {...props.configProviderProps}\n theme={{\n ...props.configProviderProps?.theme,\n algorithm: props.dark ? theme.darkAlgorithm : undefined,\n }}\n >\n <App style={{ '--color-primary': innerTheme.colorPrimary } as CSSProperties} className=\"bootstrap-app\">\n <FbaApp>{props.children}</FbaApp>\n </App>\n </ConfigProviderWrapper>\n );\n};\n"],"names":["Bootstrap","props","_props$configProvider","fbaHooks","useEffectCustom","bodyStyle","document","body","style","cssText","keyValuePairs","regex","match","exec","key","trim","value","dark","_get","varStyleText","Object","keys","forEach","classList","add","bgColorConfig","innerTheme","useThemeToken","_jsx","ConfigProviderWrapper","_extends","locale","componentSize","space","size","configProviderProps","theme","algorithm","darkAlgorithm","undefined","children","App","colorPrimary","className","FbaApp"],"mappings":";mlCA4CaA,EAAY,SAAZA,EAAaC,GAA0B,IAAAC,EAClDC,EAASC,iBAAgB,WACvB,IAAMC,EAAYC,SAASC,KAAKC,MAAMC,QACtC,IAAMC,EAAgB,CAAA,EACtB,GAAIL,EAAW,CACb,IAAMM,EAAQ,mBAEd,IAAIC,EACJ,MAAQA,EAAQD,EAAME,KAAKR,GAAa,CACtC,IAAMS,EAAMF,EAAM,GAAGG,OACrB,IAAMC,EAAQJ,EAAM,GACpBF,EAAcI,GAAOE,CACvB,CACF,CACA,GAAIf,EAAMgB,KAAM,CACdP,EAAc,cAAgBQ,EAAIjB,EAAO,6BAA8B,WACvES,EAAc,oBAAsBQ,EAAIjB,EAAO,kCAAmC,OACpF,KAAO,CACLS,EAAc,cAAgBQ,EAAIjB,EAAO,8BAA+B,WACxES,EAAc,oBAAsBQ,EAAIjB,EAAO,mCAAoC,OACrF,CACA,IAAIkB,EAAe,GACnBC,OAAOC,KAAKX,GAAeY,SAAQ,SAACR,GAClC,GAAIJ,EAAcI,GAAM,CACtBK,EAAeA,GAAkBL,MAAOJ,EAAcI,GAAO,IAC/D,CACF,IACAR,SAASC,KAAKC,MAAMC,QAAUU,EAE9B,GAAIlB,EAAMgB,KAAM,CACdX,SAASC,KAAKgB,UAAUC,IAAI,aAC9B,KAAO,CACLlB,SAASC,KAAKgB,UAAUC,IAAI,cAC9B,CACD,GAAE,CAACvB,EAAMwB,cAAexB,EAAMgB,OAE/B,IAAMS,EAAavB,EAASwB,gBAE5B,OACEC,EAACC,EAAqBC,EAAA,CACpBC,OAAQ9B,EAAM8B,OACdC,cAAe,SACfC,MAAO,CAAEC,KAAM,WACXjC,EAAMkC,oBAAmB,CAC7BC,MAAKN,EAAA,IAAA5B,EACAD,EAAMkC,sBAAmB,UAAA,EAAzBjC,EAA2BkC,MAAK,CACnCC,UAAWpC,EAAMgB,KAAOmB,EAAME,cAAgBC,YAC9CC,SAEFZ,EAACa,EAAG,CAACjC,MAAO,CAAE,kBAAmBkB,EAAWgB,cAAiCC,UAAU,gBAAeH,SACpGZ,EAACgB,EAAM,CAAAJ,SAAEvC,EAAMuC,eAIvB"}
|
|
@@ -0,0 +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)}.card-layout{border-radius:6px;padding:15px}.card-layout-title-sign{padding-left:10px;position:relative}.card-layout-title-sign:before{background:var(--color-primary);border-radius:3px;content:"";height:14px;left:0;margin-top:-7px;position:absolute;top:50%;width:3px}.card-layout-title{align-items:center;display:flex;position:relative}.card-layout-title-content{flex:1;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-layout-title-extra{margin-left:15px}.card-layout-desc,.card-layout-desc-list{font-size:12px;opacity:.7}.card-layout+.card-layout,.card-layout-content{margin-top:8px}.card-layout-title-fixed{display:flex;flex-direction:column;height:100%;overflow:hidden}.card-layout-title-fixed>.card-layout-content{flex:1;overflow-y:auto}.card-layout-small{padding:8px 15px}.card-layout-small .card-layout-content{margin-top:0}.card-layout-tight{border-radius:0;padding:0}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import './index.css';
|
|
3
|
+
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
+
import{isArray as t}from"@dimjs/lang/cjs/is-array";import{extend as e}from"@dimjs/utils/cjs/extend";import{classNames as l}from"@dimjs/utils/cjs/class-names";import{Space as i}from"antd";import{Fragment as a}from"react";import{B as r}from"../index-1f45bfd5.js";import{jsx as d,jsxs as s}from"react/jsx-runtime";import"../_rollupPluginBabelHelpers-a0769acd.js";var c=function c(n){var o;var u=l("card-layout",{"card-layout-tight":n.layoutType==="tight","card-layout-title-fixed":n.titleFixed,"card-layout-small":n.size==="small"},n.className);var m=e(n.style,{padding:n.padding,width:n.width,height:n.height,overflowY:!n.titleFixed&&(n.height||(o=n.style)!=null&&o.height)?"auto":undefined});if(n.hidden)return d(a,{});return s(r,{className:u,style:m,onClick:n.onClick,children:[s("div",{className:l("card-layout-title",{"card-layout-title-sign":n.titleLeftLine}),style:n.titleStyle,children:[d("div",{className:"card-layout-title-content",style:n.titleContentStyle,children:n.title}),n.titleExtra?d("div",{className:"card-layout-title-extra",style:n.titleExtraStyle,children:n.titleExtra}):null]}),n.desc&&!t(n.desc)?d("div",{className:"card-layout-desc",children:n.desc}):null,n.desc&&t(n.desc)?d("div",{className:"card-layout-desc-list",children:d(i,{direction:"vertical",size:0,children:n.desc.map((function(t,e){return d(a,{children:t},e)}))})}):null,n.children?d("div",{className:"card-layout-content",style:n.contentStyle,children:n.children}):null]})};c.defaultProps={titleLeftLine:true,layoutType:"layer"};export{c as CardLayout};
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/card-layout/card-layout.tsx"],"sourcesContent":["import { isArray } from '@dimjs/lang';\nimport { classNames, extend } from '@dimjs/utils';\nimport { Space } from 'antd';\nimport { Fragment, type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport { BlockLayout } from '../block-layout';\nimport './style.less';\n\nexport type CardLayoutProps = {\n desc?: string | string[] | ReactElement | ReactElement[];\n title?: string | ReactElement;\n /**\n * layoutType 布局类型\n * ```\n * 1. layer：分层布局\n * 2. tight：紧凑布局（没有外边距）\n * ```\n */\n layoutType?: 'layer' | 'tight';\n /** 隐藏标题左侧符号 */\n titleLeftLine?: boolean;\n titleStyle?: CSSProperties;\n titleContentStyle?: CSSProperties;\n titleExtraStyle?: CSSProperties;\n contentStyle?: CSSProperties;\n /** 优先级大于 style padding */\n padding?: CSSProperties['padding'];\n /** 优先级大于 style width */\n width?: CSSProperties['width'];\n /** 优先级大于 style height */\n height?: CSSProperties['height'];\n /** 标题右侧布局 */\n titleExtra?: string | ReactElement;\n /** 当存在滚动条时，标题固定，滚动区域为内部部分 */\n titleFixed?: boolean;\n /**\n * 间距尺寸\n * 1. default = 15\n * 2. small = 8\n */\n size?: 'default' | 'small';\n onClick?: (event) => void;\n hidden?: boolean;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n};\n\n/**\n * 卡片结构布局，替代 SimpleLayout 组件\n * @param props\n * @returns\n * ```\n * 1. layoutType 布局类型\n * layer：分层布局\n * tight：紧凑布局（没有外边距）\n * ```\n */\nexport const CardLayout = (props: CardLayoutProps) => {\n const className = classNames(\n 'card-layout',\n {\n 'card-layout-tight': props.layoutType === 'tight',\n // 'card-layout-formlabel-left': labelAlign === 'left',\n 'card-layout-title-fixed': props.titleFixed,\n 'card-layout-small': props.size === 'small',\n },\n props.className,\n );\n\n // const theme = fbaHooks.useThemeToken();\n const style = extend(\n // { '--card-layout-colorPrimary': theme.colorPrimary },\n props.style,\n {\n padding: props.padding,\n width: props.width,\n height: props.height,\n overflowY: !props.titleFixed && (props.height || props.style?.height) ? 'auto' : undefined,\n },\n );\n\n if (props.hidden) return <Fragment />;\n\n return (\n <BlockLayout className={className} style={style} onClick={props.onClick}>\n <div\n className={classNames('card-layout-title', {\n 'card-layout-title-sign': props.titleLeftLine,\n })}\n style={props.titleStyle}\n >\n <div className=\"card-layout-title-content\" style={props.titleContentStyle}>\n {props.title}\n </div>\n {props.titleExtra ? (\n <div className=\"card-layout-title-extra\" style={props.titleExtraStyle}>\n {props.titleExtra}\n </div>\n ) : null}\n </div>\n {props.desc && !isArray(props.desc) ? <div className=\"card-layout-desc\">{props.desc}</div> : null}\n {props.desc && isArray(props.desc) ? (\n <div className=\"card-layout-desc-list\">\n <Space direction=\"vertical\" size={0}>\n {(props.desc as string[]).map((item, index) => {\n return <Fragment key={index}>{item}</Fragment>;\n })}\n </Space>\n </div>\n ) : null}\n {props.children ? (\n <div className=\"card-layout-content\" style={props.contentStyle}>\n {props.children}\n </div>\n ) : null}\n </BlockLayout>\n );\n};\n\nCardLayout.defaultProps = {\n titleLeftLine: true,\n layoutType: 'layer',\n};\n"],"names":["CardLayout","props","_props$style","className","_classNames","layoutType","titleFixed","size","style","_extend","padding","width","height","overflowY","undefined","hidden","_jsx","Fragment","_jsxs","BlockLayout","onClick","children","titleLeftLine","titleStyle","titleContentStyle","title","titleExtra","titleExtraStyle","desc","_isArray","Space","direction","map","item","index","contentStyle","defaultProps"],"mappings":";4WAyDaA,EAAa,SAAbA,EAAcC,GAA2B,IAAAC,EACpD,IAAMC,EAAYC,EAChB,cACA,CACE,oBAAqBH,EAAMI,aAAe,QAE1C,0BAA2BJ,EAAMK,WACjC,oBAAqBL,EAAMM,OAAS,SAEtCN,EAAME,WAIR,IAAMK,EAAQC,EAEZR,EAAMO,MACN,CACEE,QAAST,EAAMS,QACfC,MAAOV,EAAMU,MACbC,OAAQX,EAAMW,OACdC,WAAYZ,EAAMK,aAAeL,EAAMW,SAAMV,EAAID,EAAMO,QAANN,MAAAA,EAAaU,QAAU,OAASE,YAIrF,GAAIb,EAAMc,OAAQ,OAAOC,EAACC,EAAQ,CAAE,GAEpC,OACEC,EAACC,EAAW,CAAChB,UAAWA,EAAWK,MAAOA,EAAOY,QAASnB,EAAMmB,QAAQC,UACtEH,EAAA,MAAA,CACEf,UAAWC,EAAW,oBAAqB,CACzC,yBAA0BH,EAAMqB,gBAElCd,MAAOP,EAAMsB,WAAWF,UAExBL,EAAA,MAAA,CAAKb,UAAU,4BAA4BK,MAAOP,EAAMuB,kBAAkBH,SACvEpB,EAAMwB,QAERxB,EAAMyB,WACLV,EAAA,MAAA,CAAKb,UAAU,0BAA0BK,MAAOP,EAAM0B,gBAAgBN,SACnEpB,EAAMyB,aAEP,QAELzB,EAAM2B,OAASC,EAAQ5B,EAAM2B,MAAQZ,EAAA,MAAA,CAAKb,UAAU,mBAAkBkB,SAAEpB,EAAM2B,OAAc,KAC5F3B,EAAM2B,MAAQC,EAAQ5B,EAAM2B,MAC3BZ,EAAA,MAAA,CAAKb,UAAU,wBAAuBkB,SACpCL,EAACc,EAAK,CAACC,UAAU,WAAWxB,KAAM,EAAEc,SAChCpB,EAAM2B,KAAkBI,KAAI,SAACC,EAAMC,GACnC,OAAOlB,EAACC,EAAQ,CAAAI,SAAcY,GAARC,UAI1B,KACHjC,EAAMoB,SACLL,EAAA,MAAA,CAAKb,UAAU,sBAAsBK,MAAOP,EAAMkC,aAAad,SAC5DpB,EAAMoB,WAEP,OAGV,EAEArB,EAAWoC,aAAe,CACxBd,cAAe,KACfjB,WAAY"}
|
|
@@ -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 o,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as t}from"@dimjs/lang/cjs/is-promise";import{hooks as n}from"@wove/react/cjs/hooks";import{Form as i,Space as a,Drawer as l}from"antd";import{useState as
|
|
9
|
+
import{isString as e}from"@dimjs/lang/cjs/is-string";import{_ as o,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as t}from"@dimjs/lang/cjs/is-promise";import{hooks as n}from"@wove/react/cjs/hooks";import{Form as i,Space as a,Drawer as l}from"antd";import{useState as s}from"react";import{createRoot as d}from"react-dom/client";import{ButtonWrapper as c}from"../button-wrapper/index.js";import{C as m}from"../index-7f4ad045.js";import{fbaHooks as p}from"../fba-hooks/index.js";import{b as u}from"../dom-4d04aa64.js";import{C as f}from"../context-1f2093c6.js";import{jsx as v,jsxs as j}from"react/jsx-runtime";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/utils/cjs/class-names";import"@flatbiz/utils";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 y=["divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","operatePosition","operateRender","width","okHidden","cancelHidden","extra"];var w=function e(d){var u;var w=d.divElement,h=d.elementId,x=d.onOk,g=d.onCancel,k=d.content,C=d.configProviderProps,b=d.okText,P=d.cancelText,_=d.okButtonExtraProps,E=d.cancelButtonExtraProps,B=d.operatePosition,I=B===void 0?"footer":B,H=d.operateRender,O=d.width,R=O===void 0?600:O,T=d.okHidden,z=d.cancelHidden,F=d.extra,S=r(d,y);var W=s(true),Y=W[0],D=W[1];var L=s(),N=L[0],U=L[1];var q=i.useForm(),A=q[0];var G=n.useCallbackRef((function(){try{delete window[h]}catch(e){}D(false)}));p.useEffectCustom((function(){window[h]=G}),[G]);var J=n.useCallbackRef((function(e){if(g){var o=g(A,e);if(o&&t(o)){return o.then(G)}}return G()}));var K=n.useCallbackRef((function(e){if(x){var o=x(A,e);if(o&&t(o)){return o.then(G)}}return G()}));var M=j(a,{children:[z||E!=null&&E.hidden?null:v(c,o({},E,{onClick:J,children:P||"取消"})),T||_!=null&&_.hidden?null:v(c,o({type:"primary"},_,{onClick:K,children:b||"提交"}))]});var Q=function e(){if(H){return H(A)}if(!T||!z){return M}return null};var V=typeof F==="function"?F(A):F;var X=function e(o){U(o)};return v(f,{value:{onClose:G,updateBodyStyle:X},children:v(m,o({},C,{children:v(l,o({maskClosable:true,destroyOnClose:true,onClose:G,width:"80%",contentWrapperStyle:{maxWidth:R},footer:I==="footer"?Q():null},S,{styles:o({},S.styles,{body:o({},N,(u=S.styles)==null?void 0:u.body)}),extra:I==="header"?Q():V,open:Y,getContainer:w,children:typeof k==="function"?k(A,{onClose:G}):k}))}))})};var h={open:function e(r){var t=u(),n=t.divElement,i=t.elementId;window["__dialog_drawer_elementId"]=i;var a=d(n);a.render(v(w,o({},r,{divElement:n,elementId:i})));return{close:function e(){var o,r;(o=(r=window)[i])==null?void 0:o.call(r)}}},close:function o(){try{var r,t;var n=window["__dialog_drawer_elementId"];if(e(n))(r=(t=window)[n])==null?void 0:r.call(t)}catch(e){}}};export{h 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
|
|
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 * @deprecated 已过期\n * ```\n * 1. 为什么过期\n * dialogConfirm.open 打开的内容无法配兼自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 2. 请使用\n * const { appDialogModal } = FbaApp.useDialogModal();\n * appDialogModal.open({})\n *\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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"}
|
|
@@ -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 o}from"@dimjs/utils/cjs/class-names";import{_ as t,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as n}from"@dimjs/lang/cjs/is-promise";import{hooks as i}from"@wove/react/cjs/hooks";import{dom as l}from"@flatbiz/utils";import{useSize as a}from"ahooks";import{Form as d,Modal as s}from"antd";import{useState as c,useMemo as m}from"react";import{createRoot as u}from"react-dom/client";import{ButtonWrapper as p}from"../button-wrapper/index.js";import{C as f}from"../index-7f4ad045.js";import{fbaHooks as v}from"../fba-hooks/index.js";import{FlexLayout as h}from"../flex-layout/index.js";import{jsx as g,jsxs as j}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 y=["title","titleExtra","divElement","elementId","onOk","onCancel","okButtonProps","cancelButtonProps","content","configProviderProps","className","okHidden","cancelHidden","footer","cancelText","okText","bodyHeightPercent"];var k=function e(u){var k=u.title,
|
|
10
|
+
import{isString as e}from"@dimjs/lang/cjs/is-string";import{classNames as o}from"@dimjs/utils/cjs/class-names";import{_ as t,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as n}from"@dimjs/lang/cjs/is-promise";import{hooks as i}from"@wove/react/cjs/hooks";import{dom as l}from"@flatbiz/utils";import{useSize as a}from"ahooks";import{Form as d,Modal as s}from"antd";import{useState as c,useMemo as m}from"react";import{createRoot as u}from"react-dom/client";import{ButtonWrapper as p}from"../button-wrapper/index.js";import{C as f}from"../index-7f4ad045.js";import{fbaHooks as v}from"../fba-hooks/index.js";import{FlexLayout as h}from"../flex-layout/index.js";import{jsx as g,jsxs as j}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 y=["title","titleExtra","divElement","elementId","onOk","onCancel","okButtonProps","cancelButtonProps","content","configProviderProps","className","okHidden","cancelHidden","footer","cancelText","okText","bodyHeightPercent"];var k=function e(u){var k;var C=u.title,x=u.titleExtra,w=u.divElement,b=u.elementId,P=u.onOk,_=u.onCancel,E=u.okButtonProps,H=u.cancelButtonProps,I=u.content,B=u.configProviderProps,O=u.className,z=u.okHidden,N=u.cancelHidden,R=u.footer,T=u.cancelText,F=u.okText,D=u.bodyHeightPercent,S=r(u,y);var Y=c(true),q=Y[0],A=Y[1];var L=d.useForm(),U=L[0];var G=a(document.querySelector("html"));var J=i.useCallbackRef((function(){try{delete window[b]}catch(e){}A(false)}));v.useEffectCustom((function(){window[b]=J}),[J]);var K=i.useCallbackRef((function(e){if(_){var o=_(U,e);if(o&&n(o)){return o.then(J)}}return J()}));var M=i.useCallbackRef((function(e){if(P){var o=P(U,e);if(o&&n(o)){return o.then(J)}}return J()}));var Q=i.useCallbackRef((function(){l.removeBodyChild("#"+b);u.afterClose==null?void 0:u.afterClose()}));var V=[g(p,t({},H,{onClick:K,hidden:N,children:T||"取消"}),"0"),g(p,t({type:"primary"},E,{onClick:M,hidden:z,children:F||"提交"}),"1")];var W=R||V;var X=m((function(){if(!(G!=null&&G.height)||!D){return"auto"}return(G==null?void 0:G.height)*(D/100)}),[D,G==null?void 0:G.height]);return g(f,t({},B,{children:g(s,t({title:x?j(h,{direction:"horizontal",fullIndex:0,children:[g("span",{children:C}),x]}):C,maskClosable:true,centered:true,onCancel:J,destroyOnClose:true},S,{styles:t({},S.styles,{body:t({height:X,maxHeight:G!=null&&G.height?(G==null?void 0:G.height)*.8:"calc(100vh - 200px)"},(k=S.styles)==null?void 0:k.body)}),className:o("v-dialog-modal",{"v-dialog-modal-title-extra":!!x},O),open:q,afterClose:Q,getContainer:w,footer:W,children:typeof I==="function"?I(U,{onClose:J}):I}))}))};var C={open:function e(o){var r=l.bodyAppendDivElement(),n=r.divElement,i=r.elementId;window["__dialog_modal_elementId"]=i;var a=u(n);a.render(g(k,t({},o,{divElement:n,elementId:i})));return{close:function e(){var o,t;(o=(t=window)[i])==null?void 0:o.call(t)}}},close:function o(){try{var t,r;var n=window["__dialog_modal_elementId"];if(e(n))(t=(r=window)[n])==null?void 0:t.call(r)}catch(e){}}};export{C 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 { 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'\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};\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 = footer || 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
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-modal/dialog-modal.tsx"],"sourcesContent":["import { 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'\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};\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 = footer || 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 * @deprecated 已过期\n * ```\n * 1. 为什么过期\n * dialogModal.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器（https://ant-design.antgroup.com/docs/react/compatible-style-cn）\n * 2. 请使用\n * const { appDialogModal } = FbaApp.useDialogModal();\n * appDialogModal.open({})\n *\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","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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"}
|
|
@@ -24,5 +24,5 @@ import './../input-text-area-wrapper/index.css';
|
|
|
24
24
|
import './../icon-wrapper/index.css';
|
|
25
25
|
import './index.css';
|
|
26
26
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
27
|
-
import{a as i,_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useSensors as r,useSensor as t,PointerSensor as o,DndContext as n}from"@dnd-kit/core";import{restrictToVerticalAxis as s}from"@dnd-kit/modifiers";import{useSortable as a,SortableContext as d,verticalListSortingStrategy as m,arrayMove as
|
|
27
|
+
import{a as i,_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useSensors as r,useSensor as t,PointerSensor as o,DndContext as n}from"@dnd-kit/core";import{restrictToVerticalAxis as s}from"@dnd-kit/modifiers";import{useSortable as a,SortableContext as d,verticalListSortingStrategy as m,arrayMove as l}from"@dnd-kit/sortable";import{Form as p}from"antd";import{useMemo as c,createElement as u,Children as j,cloneElement as g,forwardRef as v,useRef as f,useImperativeHandle as x}from"react";import{EditableTable as y}from"../editable-table/index.js";import{createCtx as b}from"@wove/react/cjs/create-ctx";import I from"@ant-design/icons/es/icons/DragOutlined";import{CSS as w}from"@dnd-kit/utilities";import{isUndefinedOrNull as h,noop as k}from"@flatbiz/utils";import{IconWrapper as F}from"../icon-wrapper/index.js";import{jsx as D}from"react/jsx-runtime";import"@ant-design/icons/es/icons/PlusOutlined";import"../button-wrapper/index.js";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/lang/cjs/is-promise";import"@wove/react/cjs/hooks";import"@dimjs/utils/cjs/class-names";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"../table-title-tooltip/index.js";import"@ant-design/icons/es/icons/QuestionCircleOutlined";import"../tips-wrapper/index.js";import"../table-cell-render/index.js";import"@dimjs/lang/cjs/is-string";import"@dimjs/lang/cjs/is-object";import"@dimjs/utils/cjs/get";import"@dimjs/lang/cjs/is-plain-object";import"@dimjs/lang/cjs/is-empty";import"../button-operate/index.js";import"@ant-design/icons/es/icons/MoreOutlined";import"@dimjs/lang/cjs/is-undefined";import"../dropdown-menu-wrapper/index.js";import"@ant-design/icons/es/icons/ExclamationCircleFilled";import"../dialog-confirm/index.js";import"../dialog-modal/index.js";import"ahooks";import"react-dom/client";import"../flex-layout/index.js";import"../tag-list-select/index.js";import"../date-picker-wrapper/index.js";import"../time-53b3f55f.js";import"../date-range-picker-wrapper/index.js";import"../input-wrapper/index.js";import"../selector-wrapper/index.js";import"@ant-design/icons/es/icons/RedoOutlined";import"../request-status/index.js";import"@dimjs/lang/cjs/is-deep-equal";import"@dimjs/utils/cjs/json";import"pubsub-js";import"../switch-wrapper/index.js";import"@dimjs/lang/cjs/is-boolean";import"@dimjs/lang/cjs/is-number";import"../input-text-area-wrapper/index.js";import"../upload-wrapper/index.js";import"react-dom";import"@ant-design/icons/es/icons/DeleteOutlined";var K=b(),_=K[0],C=K[1];var O=["dragIcon"];var P=function r(t){var o=t.dragIcon,n=i(t,O);var s=n["data-row-key"];var d=c((function(){var i;return!h(s)?(i=t.getTableItemDataByFormListItemKey(s))==null?void 0:i[t.uidFieldKey]:undefined}),[t,s]);var m=a({id:d}),l=m.setActivatorNodeRef,p=m.listeners,v=m.setNodeRef,f=m.transform,x=m.transition,y=m.isDragging;if(h(d)){return D("tr",e({},n))}var b=e({},n.style,{transform:w.Transform.toString(f&&e({},f,{scaleY:1})),transition:x,cursor:"move"},y?{position:"relative",zIndex:9999,boxShadow:" 0px 0px 12px 4px rgba(34, 33, 81, 0.1)",backgroundColor:"var(--block-bg-color)"}:{});var K=o||D(I,{});return u("tr",e({},n,{ref:v,style:b,key:d}),j.map(t.children,(function(i){if(i.key==="__sort"){return g(i,{children:D("span",e({ref:l,style:{touchAction:"none",cursor:"move"}},p,{children:D(F,{style:{touchAction:"none",cursor:"move",padding:"1px 0px",margin:0,justifyContent:"center",color:"#787878"},icon:K,onClick:k})}))})}return i})))};var B=function i(r){var t=_();return D(P,e({},r,{dragIcon:t.dragIcon,uidFieldKey:t.uidFieldKey,getTableItemDataByFormListItemKey:t.getTableItemDataByFormListItemKey}))};var L=["dragIcon","uidFieldKey","onDragChange","disabledDrag"];var T=v((function(a,c){var u,j,g;var v=a.dragIcon,b=a.uidFieldKey,I=a.onDragChange,w=a.disabledDrag,h=i(a,L);var k=p.useFormInstance();var F=p.useWatch(a.name,k);var K=f(null);x(c,(function(){return K.current}));var _=r(t(o,{activationConstraint:{delay:0,tolerance:0}}));var O=function i(e){var r=e.active,t=e.over;if(r.id!==(t==null?void 0:t.id)){var o=F.findIndex((function(i){return i[b]===r.id}));var n=F.findIndex((function(i){return i[b]===(t==null?void 0:t.id)}));var s=l(F,o,n);k.setFields([{name:a.name,value:s}]);I==null?void 0:I(s,{activeId:r.id,activeIndex:o,overIndex:n})}};var P=w?h.columns:[{dataIndex:"__sort",width:50,key:"__sort"}].concat(h.columns||[]);return D(C,{value:{dragIcon:v,uidFieldKey:b,getTableItemDataByFormListItemKey:(u=K.current)==null?void 0:u.getTableItemDataByFormListItemKey},children:D(n,{sensors:_,modifiers:[s],onDragEnd:O,children:D(d,{items:(F==null?void 0:F.map((function(i){return i[b]})))||[],strategy:m,children:D(y,e({ref:K},h,{columns:P,tableProps:e({},h.tableProps,{components:e({},(j=h.tableProps)==null?void 0:j.components,{body:e({},(g=h.tableProps)==null||(g=g.components)==null?void 0:g.body,{row:w?undefined:B})})})}))})})})}));export{T as DragEditableTable};
|
|
28
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/drag-editable-table/context.ts","@flatbiz/antd/src/drag-editable-table/table-tr-handle.tsx","@flatbiz/antd/src/drag-editable-table/row.tsx","@flatbiz/antd/src/drag-editable-table/drag.tsx"],"sourcesContent":["import { type TPlainObject } from '@flatbiz/utils';\nimport { createCtx } from '@wove/react';\nimport { type ReactElement } from 'react';\n\nexport const [getCtx, CtxProvider] = createCtx<{\n dragIcon?: ReactElement;\n getTableItemDataByFormListItemKey?: (key: number) => TPlainObject;\n uidFieldKey: string;\n}>();\n","import { DragOutlined } from '@ant-design/icons';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { isUndefinedOrNull, noop, type TPlainObject } from '@flatbiz/utils';\nimport { type RowProps } from 'antd';\nimport { Children, cloneElement, useMemo, type ReactElement } from 'react';\nimport { IconWrapper } from '../icon-wrapper';\n\ntype TableTrHandleProps = RowProps & {\n dragIcon?: ReactElement;\n getTableItemDataByFormListItemKey: (key: number) => TPlainObject;\n uidFieldKey: string;\n};\nexport const TableTrHandle = (props: TableTrHandleProps) => {\n const { dragIcon, ...innerProps } = props;\n const rowId = innerProps['data-row-key'] as number;\n\n const uidValue = useMemo(() => {\n return !isUndefinedOrNull(rowId)\n ? props.getTableItemDataByFormListItemKey(rowId)?.[props.uidFieldKey]\n : undefined;\n }, [props, rowId]);\n\n const { setActivatorNodeRef, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: uidValue,\n });\n\n if (isUndefinedOrNull(uidValue)) {\n return <tr {...innerProps} />;\n }\n const style: React.CSSProperties = {\n ...innerProps.style,\n transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),\n transition,\n cursor: 'move',\n ...(isDragging\n ? {\n position: 'relative',\n zIndex: 9999,\n boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',\n backgroundColor: '#fff',\n }\n : {}),\n };\n const iconElement = dragIcon || <DragOutlined />;\n return (\n <tr {...innerProps} ref={setNodeRef} style={style} key={uidValue}>\n {Children.map(props.children, (child) => {\n if ((child as React.ReactElement).key === '__sort') {\n return cloneElement(child as React.ReactElement, {\n children: (\n <span ref={setActivatorNodeRef} style={{ touchAction: 'none', cursor: 'move' }} {...listeners}>\n <IconWrapper\n style={{\n touchAction: 'none',\n cursor: 'move',\n padding: '1px 0px',\n margin: 0,\n justifyContent: 'center',\n color: '#787878',\n }}\n icon={iconElement}\n onClick={noop}\n />\n </span>\n ),\n });\n }\n return child;\n })}\n </tr>\n );\n};\n","import { getCtx } from './context';\nimport { TableTrHandle } from './table-tr-handle';\n\nexport const Row = (props) => {\n const ctx = getCtx();\n return (\n <TableTrHandle\n {...props}\n dragIcon={ctx.dragIcon}\n uidFieldKey={ctx.uidFieldKey}\n getTableItemDataByFormListItemKey={ctx.getTableItemDataByFormListItemKey}\n />\n );\n};\n","import { DndContext, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { type TAny, type TPlainObject } from '@flatbiz/utils';\nimport { Form } from 'antd';\nimport { forwardRef, useImperativeHandle, useRef, type ReactElement } from 'react';\nimport { EditableTable, EditableTableProps, EditableTableRefApi } from '../editable-table';\nimport { CtxProvider } from './context';\nimport { Row } from './row';\n\nexport type DragEditableTableProps = EditableTableProps & {\n /**\n * 拖拽图标自定义，默认使用 DragOutlined 图标\n */\n dragIcon?: ReactElement;\n\n /** 禁用拖拽 */\n disabledDrag?: boolean;\n /**\n * 表格数据唯一值字段Key\n * ```\n * ```\n */\n uidFieldKey: string;\n /**\n * 拖拽结束事件\n * ```\n * dataSource: 拖拽完成后的数据源\n * dragData\n * 1. activeId 拖拽ID\n * 2. activeIndex 拖拽起始表格数组索引值\n * 3. overIndex 拖拽结束表格数组索引值\n * ```\n */\n onDragChange?: (\n dataSource: TPlainObject[],\n dragData: {\n activeId: string | number;\n activeIndex: number;\n overIndex: number;\n },\n ) => void;\n};\n\n/**\n * 可拖拽编辑表格\n * ```\n * 1. 表格数据必须要有唯一值字段，通过参数 uidFieldKey 告诉组件\n * 2. Table 参数 components.body.row 被组件内部使用\n * ```\n */\nexport const DragEditableTable = forwardRef<EditableTableRefApi, DragEditableTableProps>((props, ref) => {\n const { dragIcon, uidFieldKey, onDragChange, disabledDrag, ...otherProps } = props;\n const form = Form.useFormInstance();\n const dataList = Form.useWatch(props.name, form);\n\n const editableTableRef = useRef<EditableTableRefApi>(null);\n\n useImperativeHandle(ref, () => {\n return editableTableRef.current as EditableTableRefApi;\n });\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n // 当拖拽触发区域有其他点击事件时，需要延迟触发拖拽动作\n delay: 0,\n tolerance: 0,\n },\n }),\n );\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n const activeIndex = dataList.findIndex((i) => i[uidFieldKey] === active.id);\n const overIndex = dataList.findIndex((i) => i[uidFieldKey] === over?.id);\n const dataListNew = arrayMove(dataList, activeIndex, overIndex);\n form.setFields([\n {\n name: props.name,\n value: dataListNew,\n },\n ]);\n onDragChange?.(dataListNew as TPlainObject[], {\n activeId: active.id,\n activeIndex,\n overIndex,\n });\n }\n };\n\n const columns = disabledDrag\n ? otherProps.columns\n : [{ dataIndex: '__sort', width: 50, key: '__sort' }].concat((otherProps.columns || []) as TAny[]);\n\n return (\n <CtxProvider\n value={{\n dragIcon,\n uidFieldKey,\n getTableItemDataByFormListItemKey: editableTableRef.current?.getTableItemDataByFormListItemKey,\n }}\n >\n <DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>\n <SortableContext\n items={dataList?.map((i) => i[uidFieldKey]) || []}\n strategy={verticalListSortingStrategy}\n >\n <EditableTable\n ref={editableTableRef}\n {...otherProps}\n columns={columns}\n tableProps={{\n ...otherProps.tableProps,\n components: {\n ...otherProps.tableProps?.components,\n body: {\n ...otherProps.tableProps?.components?.body,\n row: disabledDrag ? undefined : Row,\n },\n },\n }}\n />\n </SortableContext>\n </DndContext>\n </CtxProvider>\n );\n});\n"],"names":["_createCtx","_createCtx2","getCtx","CtxProvider","TableTrHandle","props","dragIcon","innerProps","_objectWithoutPropertiesLoose","_excluded","rowId","uidValue","useMemo","_props$getTableItemDa","isUndefinedOrNull","getTableItemDataByFormListItemKey","uidFieldKey","undefined","_useSortable","useSortable","id","setActivatorNodeRef","listeners","setNodeRef","transform","transition","isDragging","_jsx","_extends","style","CSS","Transform","toString","scaleY","cursor","position","zIndex","boxShadow","backgroundColor","iconElement","_DragOutlined","_createElement","ref","key","Children","map","children","child","cloneElement","touchAction","IconWrapper","padding","margin","justifyContent","color","icon","onClick","noop","Row","ctx","DragEditableTable","forwardRef","_editableTableRef$cur","_otherProps$tableProp","_otherProps$tableProp2","onDragChange","disabledDrag","otherProps","form","Form","useFormInstance","dataList","useWatch","name","editableTableRef","useRef","useImperativeHandle","current","sensors","useSensors","useSensor","PointerSensor","activationConstraint","delay","tolerance","onDragEnd","_ref","active","over","activeIndex","findIndex","i","overIndex","dataListNew","arrayMove","setFields","value","activeId","columns","dataIndex","width","concat","DndContext","modifiers","restrictToVerticalAxis","SortableContext","items","strategy","verticalListSortingStrategy","EditableTable","tableProps","components","body","row"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/drag-editable-table/context.ts","@flatbiz/antd/src/drag-editable-table/table-tr-handle.tsx","@flatbiz/antd/src/drag-editable-table/row.tsx","@flatbiz/antd/src/drag-editable-table/drag.tsx"],"sourcesContent":["import { type TPlainObject } from '@flatbiz/utils';\nimport { createCtx } from '@wove/react';\nimport { type ReactElement } from 'react';\n\nexport const [getCtx, CtxProvider] = createCtx<{\n dragIcon?: ReactElement;\n getTableItemDataByFormListItemKey?: (key: number) => TPlainObject;\n uidFieldKey: string;\n}>();\n","import { DragOutlined } from '@ant-design/icons';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { isUndefinedOrNull, noop, type TPlainObject } from '@flatbiz/utils';\nimport { type RowProps } from 'antd';\nimport { Children, cloneElement, useMemo, type ReactElement } from 'react';\nimport { IconWrapper } from '../icon-wrapper';\n\ntype TableTrHandleProps = RowProps & {\n dragIcon?: ReactElement;\n getTableItemDataByFormListItemKey: (key: number) => TPlainObject;\n uidFieldKey: string;\n};\nexport const TableTrHandle = (props: TableTrHandleProps) => {\n const { dragIcon, ...innerProps } = props;\n const rowId = innerProps['data-row-key'] as number;\n\n const uidValue = useMemo(() => {\n return !isUndefinedOrNull(rowId)\n ? props.getTableItemDataByFormListItemKey(rowId)?.[props.uidFieldKey]\n : undefined;\n }, [props, rowId]);\n\n const { setActivatorNodeRef, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: uidValue,\n });\n\n if (isUndefinedOrNull(uidValue)) {\n return <tr {...innerProps} />;\n }\n const style: React.CSSProperties = {\n ...innerProps.style,\n transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),\n transition,\n cursor: 'move',\n ...(isDragging\n ? {\n position: 'relative',\n zIndex: 9999,\n boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',\n backgroundColor: 'var(--block-bg-color)',\n }\n : {}),\n };\n const iconElement = dragIcon || <DragOutlined />;\n return (\n <tr {...innerProps} ref={setNodeRef} style={style} key={uidValue}>\n {Children.map(props.children, (child) => {\n if ((child as React.ReactElement).key === '__sort') {\n return cloneElement(child as React.ReactElement, {\n children: (\n <span ref={setActivatorNodeRef} style={{ touchAction: 'none', cursor: 'move' }} {...listeners}>\n <IconWrapper\n style={{\n touchAction: 'none',\n cursor: 'move',\n padding: '1px 0px',\n margin: 0,\n justifyContent: 'center',\n color: '#787878',\n }}\n icon={iconElement}\n onClick={noop}\n />\n </span>\n ),\n });\n }\n return child;\n })}\n </tr>\n );\n};\n","import { getCtx } from './context';\nimport { TableTrHandle } from './table-tr-handle';\n\nexport const Row = (props) => {\n const ctx = getCtx();\n return (\n <TableTrHandle\n {...props}\n dragIcon={ctx.dragIcon}\n uidFieldKey={ctx.uidFieldKey}\n getTableItemDataByFormListItemKey={ctx.getTableItemDataByFormListItemKey}\n />\n );\n};\n","import { DndContext, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { type TAny, type TPlainObject } from '@flatbiz/utils';\nimport { Form } from 'antd';\nimport { forwardRef, useImperativeHandle, useRef, type ReactElement } from 'react';\nimport { EditableTable, EditableTableProps, EditableTableRefApi } from '../editable-table';\nimport { CtxProvider } from './context';\nimport { Row } from './row';\n\nexport type DragEditableTableProps = EditableTableProps & {\n /**\n * 拖拽图标自定义，默认使用 DragOutlined 图标\n */\n dragIcon?: ReactElement;\n\n /** 禁用拖拽 */\n disabledDrag?: boolean;\n /**\n * 表格数据唯一值字段Key\n * ```\n * ```\n */\n uidFieldKey: string;\n /**\n * 拖拽结束事件\n * ```\n * dataSource: 拖拽完成后的数据源\n * dragData\n * 1. activeId 拖拽ID\n * 2. activeIndex 拖拽起始表格数组索引值\n * 3. overIndex 拖拽结束表格数组索引值\n * ```\n */\n onDragChange?: (\n dataSource: TPlainObject[],\n dragData: {\n activeId: string | number;\n activeIndex: number;\n overIndex: number;\n },\n ) => void;\n};\n\n/**\n * 可拖拽编辑表格\n * ```\n * 1. 表格数据必须要有唯一值字段，通过参数 uidFieldKey 告诉组件\n * 2. Table 参数 components.body.row 被组件内部使用\n * ```\n */\nexport const DragEditableTable = forwardRef<EditableTableRefApi, DragEditableTableProps>((props, ref) => {\n const { dragIcon, uidFieldKey, onDragChange, disabledDrag, ...otherProps } = props;\n const form = Form.useFormInstance();\n const dataList = Form.useWatch(props.name, form);\n\n const editableTableRef = useRef<EditableTableRefApi>(null);\n\n useImperativeHandle(ref, () => {\n return editableTableRef.current as EditableTableRefApi;\n });\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n // 当拖拽触发区域有其他点击事件时，需要延迟触发拖拽动作\n delay: 0,\n tolerance: 0,\n },\n }),\n );\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n const activeIndex = dataList.findIndex((i) => i[uidFieldKey] === active.id);\n const overIndex = dataList.findIndex((i) => i[uidFieldKey] === over?.id);\n const dataListNew = arrayMove(dataList, activeIndex, overIndex);\n form.setFields([\n {\n name: props.name,\n value: dataListNew,\n },\n ]);\n onDragChange?.(dataListNew as TPlainObject[], {\n activeId: active.id,\n activeIndex,\n overIndex,\n });\n }\n };\n\n const columns = disabledDrag\n ? otherProps.columns\n : [{ dataIndex: '__sort', width: 50, key: '__sort' }].concat((otherProps.columns || []) as TAny[]);\n\n return (\n <CtxProvider\n value={{\n dragIcon,\n uidFieldKey,\n getTableItemDataByFormListItemKey: editableTableRef.current?.getTableItemDataByFormListItemKey,\n }}\n >\n <DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>\n <SortableContext\n items={dataList?.map((i) => i[uidFieldKey]) || []}\n strategy={verticalListSortingStrategy}\n >\n <EditableTable\n ref={editableTableRef}\n {...otherProps}\n columns={columns}\n tableProps={{\n ...otherProps.tableProps,\n components: {\n ...otherProps.tableProps?.components,\n body: {\n ...otherProps.tableProps?.components?.body,\n row: disabledDrag ? undefined : Row,\n },\n },\n }}\n />\n </SortableContext>\n </DndContext>\n </CtxProvider>\n );\n});\n"],"names":["_createCtx","_createCtx2","getCtx","CtxProvider","TableTrHandle","props","dragIcon","innerProps","_objectWithoutPropertiesLoose","_excluded","rowId","uidValue","useMemo","_props$getTableItemDa","isUndefinedOrNull","getTableItemDataByFormListItemKey","uidFieldKey","undefined","_useSortable","useSortable","id","setActivatorNodeRef","listeners","setNodeRef","transform","transition","isDragging","_jsx","_extends","style","CSS","Transform","toString","scaleY","cursor","position","zIndex","boxShadow","backgroundColor","iconElement","_DragOutlined","_createElement","ref","key","Children","map","children","child","cloneElement","touchAction","IconWrapper","padding","margin","justifyContent","color","icon","onClick","noop","Row","ctx","DragEditableTable","forwardRef","_editableTableRef$cur","_otherProps$tableProp","_otherProps$tableProp2","onDragChange","disabledDrag","otherProps","form","Form","useFormInstance","dataList","useWatch","name","editableTableRef","useRef","useImperativeHandle","current","sensors","useSensors","useSensor","PointerSensor","activationConstraint","delay","tolerance","onDragEnd","_ref","active","over","activeIndex","findIndex","i","overIndex","dataListNew","arrayMove","setFields","value","activeId","columns","dataIndex","width","concat","DndContext","modifiers","restrictToVerticalAxis","SortableContext","items","strategy","verticalListSortingStrategy","EditableTable","tableProps","components","body","row"],"mappings":"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"}
|
|
@@ -1 +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 10px}.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)}
|
|
@@ -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{_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as r}from"@dimjs/utils/cjs/class-names";import{hooks as i}from"@wove/react/cjs/hooks";import{DndContext as t,closestCenter as a,DragOverlay as n}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{
|
|
9
|
+
import{_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as r}from"@dimjs/utils/cjs/class-names";import{hooks as i}from"@wove/react/cjs/hooks";import{DndContext as t,closestCenter as a,DragOverlay as n}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 j}from"../button-wrapper/index.js";import D from"@ant-design/icons/es/icons/DragOutlined";import{CSS as N}from"@dnd-kit/utilities";import{jsx as I,jsxs as C}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";function b(t){var a=c.useFormInstance();var n=t.isOverlay?false:t.getItemDragDisabled==null?void 0:t.getItemDragDisabled(t.uid,t.index);var d=o({id:t.uid,disabled:n}),l=d.listeners,m=d.setNodeRef,s=d.transform,u=d.transition;var p=i.useCallbackRef((function(){var r=t.dragIcon?t.dragIcon:I(D,{});return t.dragDisabled?I(f,{}):I("span",e({className:"drag-form-list-item-trigger"},l,{children:I("span",{children:r})}))}));var g=e({transform:N.Transform.toString(s),transition:u},t.style);var v=r("drag-form-list-item",{"drag-form-list-item-grap":t.isGray,"drag-form-list-item-disabled":n},t.className);return C("div",{style:e({},g),ref:m,className:v,children:[I(c.Item,{style:{margin:0},children:p()}),I("div",{className:"drag-form-list-item-content",children:t.children({formListFieldData:t.formListFieldData,operation:t.formListOperate,formStageCompleteName:t.formStageCompleteName,index:t.index,getInsideFormItemName:function e(r){return[t.formListFieldData.name,r]},getInsideFormItemData:function e(){return a.getFieldValue(t.formStageCompleteName)||{}},prevCompleteName:t.prevCompleteName,uidKey:t.uidFieldName})})]})}var F=function e(r){if(r.wrapper)return r.wrapper({children:r.children});return r.children};var x=function o(D){var N=[].concat(D.prevCompleteName,s(D.name));var x=g(),k=x[0],w=x[1];var L=c.useFormInstance();var R=v([]);var S=D.uidFieldName||"uid";var O=c.useWatch(N,L);var A=i.useCallbackRef((function(e){return e==null?void 0:e[S]}));function E(e){var r=e.active;w(r.id)}var _=i.useCallbackRef((function(){return L.getFieldValue(N)||[]}));function B(e){var r=e.active,i=e.over;var t=_();if(r.id!==i.id){var a=t.findIndex((function(e){return A(e)===r.id}));var n=t.findIndex((function(e){return A(e)===i.id}));var o=m(t,a,n);L.setFields([{name:D.name,value:o}]);D.onDropChange==null?void 0:D.onDropChange(o)}w(undefined)}var P=h((function(){if(!k)return undefined;var e=_();var r=e.findIndex((function(e){return A(e)===k}));return R.current.find((function(e){return e.name===r}))}),[k,_,A]);return C(y,{className:r("drag-form-list",D.className),style:D.style,children:[!D.hiddenEmptyRender&&!(O!=null&&O.length)?I(p,{image:p.PRESENTED_IMAGE_SIMPLE,style:{margin:"15px 0"}}):null,I(t,{collisionDetection:a,onDragStart:E,onDragEnd:B,children:I(c.List,{name:D.name,rules:D.rules,children:function r(i,t){R.current=i;return I(F,{wrapper:D.formListChildrenWrapper,children:C(f,{children:[I(d,{items:_().map((function(e){return A(e)})),strategy:l,children:C(f,{children:[i.map((function(e,r){var i=A(_()[r]);if(!i)return null;return I(b,{formListOperate:t,formListFieldData:e,uid:i,dragIcon:D.dragIcon,getItemDragDisabled:D.getItemDragDisabled,dragDisabled:D.dragDisabled,isGray:!!i&&i===k,index:r,formStageCompleteName:[].concat(N,[e.name]),prevCompleteName:N,uidFieldName:S,style:D.itemStyle,children:D.children},i+"-"+e.key)})),D.onCustomAddRowButton?D.onCustomAddRowButton(t):I(j,{hidden:D.hiddenAddRowButton,type:"dashed",block:true,onClick:function r(){var i;return t.add(e((i={},i[S]=u(),i),D.getAddRowDefaultValues==null?void 0:D.getAddRowDefaultValues()))},children:"添加"})]})}),I(n,{dropAnimation:{duration:0},children:k&&P?I(b,{isOverlay:true,uid:k,className:"drag-form-list-overlay",formListFieldData:P,dragIcon:D.dragIcon,formListOperate:null,index:0,formStageCompleteName:[].concat(N,[P.name]),prevCompleteName:N,uidFieldName:S,children:D.children},k):null})]})})}})})]})};export{x as DragFormList};
|
|
10
10
|
//# 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 { 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 <div 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({ [uidFieldName]: getUuid(), ...props.getAddRowDefaultValues?.() })\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 </div>\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","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 { 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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"}
|
package/esm/drag-table/index.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
import './../icon-wrapper/index.css';
|
|
3
3
|
import './index.css';
|
|
4
4
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
5
|
-
import{_ as r,a as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useSensors as o,useSensor as e,PointerSensor as t,DndContext as
|
|
5
|
+
import{_ as r,a as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useSensors as o,useSensor as e,PointerSensor as t,DndContext as a}from"@dnd-kit/core";import{restrictToVerticalAxis as i}from"@dnd-kit/modifiers";import{useSortable as d,SortableContext as s,verticalListSortingStrategy as c,arrayMove as l}from"@dnd-kit/sortable";import{Table as u}from"antd";import{Children as f,cloneElement as m,isValidElement as v,useState as p,useEffect as g,useMemo as x}from"react";import{createCtx as y}from"@wove/react/cjs/create-ctx";import{CSS as I}from"@dnd-kit/utilities";import{jsx as b}from"react/jsx-runtime";import h from"@ant-design/icons/es/icons/DragOutlined";import{noop as k}from"@flatbiz/utils";import{IconWrapper as w}from"../icon-wrapper/index.js";import"@dimjs/utils/cjs/class-names";var D=y(),j=D[0],S=D[1];var C=function n(o){var e=d({id:o["data-row-key"]}),t=e.listeners,a=e.setNodeRef,i=e.transform,s=e.transition,c=e.isDragging;var l=r({},o.style,{transform:I.Transform.toString(i&&r({},i,{scaleY:1})),transition:s,cursor:"move"},c?{position:"relative",zIndex:9999,boxShadow:" 0px 0px 12px 4px rgba(34, 33, 81, 0.1)"}:{});return b("tr",r({},o,{ref:a,style:l},t))};var z=["dragIcon"];var A=function o(e){var t=e.dragIcon,a=n(e,z);var i=a["data-row-key"];var s=d({id:i}),c=s.setActivatorNodeRef,l=s.listeners,u=s.setNodeRef,p=s.transform,g=s.transition,x=s.isDragging;if(!i){return b("tr",r({},a))}var y=r({},a.style,{transform:I.Transform.toString(p&&r({},p,{scaleY:1})),transition:g,cursor:t===false?"move":undefined},x?{position:"relative",zIndex:9999,boxShadow:" 0px 0px 12px 4px rgba(34, 33, 81, 0.1)",backgroundColor:"var(--block-bg-color)"}:{});var D=v(t)?t:b(h,{});return b("tr",r({},a,{ref:u,style:y,children:f.map(e.children,(function(n){if(n.key==="sort"){return m(n,{children:b("span",r({ref:c,style:{touchAction:"none",cursor:"move"}},l,{children:b(w,{style:{touchAction:"none",cursor:"move",padding:"1px 0px",margin:0,justifyContent:"center",color:"#787878"},icon:D,onClick:k})}))})}return n}))}))};var K=function n(o){var e=j();return e.dragIcon===false?b(C,r({},o,{dragIcon:e.dragIcon})):b(A,r({},o,{dragIcon:e.dragIcon}))};var N=["dragIcon","uidFieldKey","columns","dataSource","onDragChange","disabledDrag"];var R=function d(f){var m;var v=f.dragIcon,y=f.uidFieldKey,I=f.columns,h=f.dataSource,k=f.onDragChange,w=f.disabledDrag,D=n(f,N);var j=p([]),C=j[0],z=j[1];g((function(){z(h||[])}),[h]);var A=function r(n){var o=n.active,e=n.over;if(o.id!==(e==null?void 0:e.id)){var t=C.findIndex((function(r){return r[y]===o.id}));var a=C.findIndex((function(r){return r[y]===(e==null?void 0:e.id)}));var i=l(C,t,a);z([].concat(i));k==null?void 0:k(i,{activeId:o.id,activeIndex:t,overIndex:a})}};var R=x((function(){if(v===false)return I;return[{key:"sort",dataIndex:"sort",align:"center",width:50}].concat(I||[])}),[I,v]);var F=o(e(t,{activationConstraint:{delay:v===false?150:0,tolerance:0}}));return b(S,{value:{dragIcon:v},children:b(a,{sensors:F,modifiers:[i],onDragEnd:A,children:b(s,{items:C.map((function(r){return r[y]})),strategy:c,children:b(u,r({pagination:false,rowKey:y,bordered:true,components:r({},D.components,{body:r({},(m=D.components)==null?void 0:m.body,{row:w?undefined:K})})},D,{dataSource:C,columns:R}))})})})};export{R as DragTable};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|