@flatbiz/antd
Version:
259 lines (253 loc) • 9.5 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { classNames } from '@dimjs/utils/class-names/class-names';
import { _ as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { useMemo, useRef, Fragment, Children, cloneElement } from 'react';
import { Form } from 'antd';
import { isUndefinedOrNull, dom } from '@flatbiz/utils';
import { BoxGrid } from './box-grid/index.js';
import { fbaHooks } from './fba-hooks/index.js';
import { F as FormWrapper } from './form-wrapper-DSnBmyFu.js';
import { preDefinedClassName } from './pre-defined-class-name/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
var _excluded = ["column", "forceColumn", "children", "width", "gridGutter", "labelWidth", "labelItemVertical", "labelAlign", "formItemGap", "isPure", "nonuseFormWrapper"];
/**
* 简单Form布局，可自定义网格布局
* ```
* 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
* 2. EasyForm的children列表会进行网格化布局
* 3. 自定义栅格占位格数的4中方式
* 3.1 设置FormItemWrapper、FormItemText组件span属性；
* 3.2 使用 EasyFormItemSpan 包裹children item，设置span属性
* 3.3 使用 <BoxGrid.Col span={24} ></BoxGrid.Col> 包裹，设置响应式属性
* 3.4 设置 EasyForm isPure = true设置纯净模式，对EasyForm的子节点不做任何包装处理
* 4. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
* <EasyForm form={form}>
* ....
* <EasyForm>...</EasyForm>
* ....
* <EasyForm>...</EasyForm>
* ....
* </EasyForm>
* 5. 布局网格以当前组件的宽度来计算的，不是屏幕宽度
* 6. EasyForm 子节点包含 hidden = true 会被忽略
* 7. 通过 column 可定义一行显示几列FormItem
* 8. 通过 labelItemVertical 可定义 formitem 竖直布局
* 9. 通过 formItemGap 可定义 formItem竖直方向间隙
* 10. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
* 11. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
* 12. 自定义栅格占位格数，见下方`例如`
* 例如
* <EasyForm column={3}>
* <FormItemWrapper name="field1" label="条件1">
* <Input placeholder="请输入" allowClear={true} />
* </FormItemWrapper>
* <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->
* <BoxGrid.Col span={24}>
* <FormItemWrapper name="field5" label="条件5">
* <Input placeholder="请输入" allowClear={true} />
* </FormItemWrapper>
* </BoxGrid.Col>
* <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->
* <FormItemWrapper name="field6" label="条件6" span={24}>
* <Input placeholder="请输入" allowClear={true} />
* </FormItemWrapper>
* <FormItemWrapper noStyle span={24}>
* <Button>按钮</Buttone>
* </FormItemWrapper>
* </EasyForm>
* ```
*/
var EasyForm = function EasyForm(props) {
var screenType = fbaHooks.useResponsivePoint() || '';
var column = props.column,
forceColumn = props.forceColumn,
children = props.children,
width = props.width,
gridGutter = props.gridGutter,
labelWidth = props.labelWidth,
labelItemVertical = props.labelItemVertical,
labelAlign = props.labelAlign,
_props$formItemGap = props.formItemGap,
formItemGap = _props$formItemGap === void 0 ? '15' : _props$formItemGap,
isPure = props.isPure,
nonuseFormWrapper = props.nonuseFormWrapper,
otherProps = _objectWithoutProperties(props, _excluded);
var gridSize = useMemo(function () {
if (forceColumn) {
var num = 24 / forceColumn;
return {
xs: num,
sm: num,
md: num,
lg: num,
xl: num,
xxl: num
};
}
if (!column) {
return {
xs: 24,
sm: 12,
md: 12,
lg: 8,
xl: 8,
xxl: 6
};
}
var columnMap = {
1: {
xs: 24,
sm: 24,
md: 24,
lg: 24,
xl: 24,
xxl: 24
},
2: {
xs: 24,
sm: 12,
md: 12,
lg: 12,
xl: 12,
xxl: 12
},
3: {
xs: 24,
sm: 12,
md: 12,
lg: 8,
xl: 8,
xxl: 8
},
4: {
xs: 24,
sm: 12,
md: 12,
lg: 6,
xl: 6,
xxl: 6
}
};
return columnMap[column];
}, [column, forceColumn]);
var getFormRowChildren = function getFormRowChildren() {
var childrenList = Children.toArray(children).filter(function (item) {
return !!item;
});
return childrenList.map(function (item, index) {
var _item$props;
var domTypeName = item.type['domTypeName'];
var span = undefined;
if (domTypeName === 'FormItemText' || domTypeName === 'FormItemSpan' || domTypeName === 'FormItemWrapper' || domTypeName === 'BoxGridCol' || domTypeName === 'EasyForm') {
span = item.props['span'];
if (span) {
if (screenType === 'xs') {
span = 24;
} else if (screenType === 'sm') {
span = span > 12 ? span : 12;
}
}
}
if (domTypeName === 'BoxGridCol' || domTypeName === 'FormItemSpan') {
if (domTypeName === 'FormItemSpan' && item.props.hidden) {
return null;
}
return /*#__PURE__*/cloneElement(item, _objectSpread2(_objectSpread2(_objectSpread2({}, item.props), gridSize), {}, {
span: span,
key: index
}));
}
var display = (_item$props = item.props) === null || _item$props === void 0 || (_item$props = _item$props.style) === null || _item$props === void 0 ? void 0 : _item$props.display;
var removeWrapper = false;
if (domTypeName === 'FormItemText' || domTypeName === 'FormItemHidden' || domTypeName === 'FormItemWrapper' || domTypeName === 'FormItemWrapperDependencies' || item.type === Form.Item || display === 'none') {
removeWrapper = true;
}
if (domTypeName === 'FormItemWrapper' || item.props.noStyle) {
removeWrapper = false;
}
return /*#__PURE__*/jsx(BoxGrid.Col, _objectSpread2(_objectSpread2({}, gridSize), {}, {
span: span,
removeWrapper: removeWrapper,
children: item
}), index);
}).filter(Boolean);
};
var innerStyle = useMemo(function () {
/** 小屏幕不控制宽度 */
if (['xs', 'sm'].includes(screenType) || !width) {
return {};
}
return {
width: width
};
}, [screenType, width]);
var gutter = isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter;
var anchorRef = useRef(null);
// 是否嵌套内部EasyForm节点
var getIsNestedEasyForm = function getIsNestedEasyForm() {
try {
if (nonuseFormWrapper) {
return true;
}
if (anchorRef.current) {
var target = dom.findParentsElement(anchorRef.current, function (node) {
var _node$classList, _node$classList$conta;
return (_node$classList = node.classList) === null || _node$classList === void 0 || (_node$classList$conta = _node$classList.contains) === null || _node$classList$conta === void 0 ? void 0 : _node$classList$conta.call(_node$classList, 'easy-form');
});
return target ? true : false;
}
return undefined;
} catch (error) {
console.log('error', error);
return false;
}
};
var isNestedEasyForm = getIsNestedEasyForm();
var labelAlignNew = useMemo(function () {
if (['xs'].includes(screenType)) {
return 'left';
}
return labelAlign;
}, [labelAlign, screenType]);
var fromLayoutClassName = useMemo(function () {
return preDefinedClassName.getFormLayoutClassName({
labelWidth: labelWidth,
labelItemVertical: labelItemVertical,
labelAlign: labelAlignNew,
formItemGap: formItemGap,
className: otherProps.className
});
}, [labelWidth, labelItemVertical, labelAlignNew, formItemGap, otherProps.className]);
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx("div", {
className: "easy-form-anchor",
ref: anchorRef
}), isNestedEasyForm === true ? /*#__PURE__*/jsx("div", {
style: _objectSpread2(_objectSpread2({}, innerStyle), otherProps.style),
className: classNames('easy-form', {
'easy-form-pure': isPure
}, 'easy-form-nested', fromLayoutClassName),
children: isPure ? children : /*#__PURE__*/jsx(BoxGrid.Row, {
gutter: gutter,
children: getFormRowChildren()
})
}) : undefined, isNestedEasyForm === false ? /*#__PURE__*/jsx(FormWrapper, _objectSpread2(_objectSpread2({}, otherProps), {}, {
labelWidth: labelWidth,
labelAlign: labelAlignNew,
labelItemVertical: labelItemVertical,
formItemGap: formItemGap,
style: _objectSpread2(_objectSpread2({}, innerStyle), otherProps.style),
className: classNames('easy-form', {
'easy-form-pure': isPure
}, fromLayoutClassName),
autoComplete: "off",
children: isPure ? children : /*#__PURE__*/jsx(BoxGrid.Row, {
gutter: gutter,
children: getFormRowChildren()
})
})) : undefined]
});
};
EasyForm['domTypeName'] = 'EasyForm';
export { EasyForm as E };
//# sourceMappingURL=form-wa_Ck4Vl.js.map