@flatbiz/antd
Version:
270 lines (264 loc) • 11 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { classNames } from '@dimjs/utils/class-names/class-names';
import _DownOutlined from '@ant-design/icons/es/icons/DownOutlined.js';
import _UpOutlined from '@ant-design/icons/es/icons/UpOutlined.js';
import { b as _objectSpread2, a as _slicedToArray, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { hooks } from '@wove/react/hooks';
import { forwardRef, useMemo, Children, useImperativeHandle } from 'react';
import { isFragment } from 'react-is';
import { Form } from 'antd';
import { B as ButtonWrapper } from './button-wrapper-l9FUsrWl.js';
import { fbaHooks } from './fba-hooks/index.js';
import { FormGrid } from './form-grid/index.js';
import { F as FormWrapper } from './form-wrapper-DSnBmyFu.js';
import { preDefinedClassName } from './pre-defined-class-name/index.js';
import { Model } from '@dimjs/model-react';
import { jsx, jsxs } from 'react/jsx-runtime';
var defaultState = {
queryCondition: {},
isInit: true,
openFold: false
};
var SearchFormModel = {
actions: {
updateFilterCondition: function updateFilterCondition(params) {
return function (state) {
state.queryCondition = _objectSpread2(_objectSpread2({}, state.queryCondition), params);
};
},
resetFilterCondition: function resetFilterCondition(params) {
return function (state) {
state.queryCondition = _objectSpread2(_objectSpread2({}, defaultState.queryCondition), params);
};
},
updateInitStatus: function updateInitStatus() {
return function (state) {
state.isInit = false;
};
},
onChangeOpenFold: function onChangeOpenFold(boo) {
return function (state) {
state.openFold = boo;
};
}
},
state: defaultState
};
var searchFormModels = {};
/**
* ```
* 使用方式
* const [state, actions] = selectorWrapperModel('key值').useStore();
* ```
*/
var searchFormModel = function searchFormModel(key) {
if (!searchFormModels[key]) {
searchFormModels[key] = Model(SearchFormModel);
}
return searchFormModels[key];
};
/**
* 搜索表单
*
*```
* 1. 用法1
* -- 默认网格布局 规则：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
* <SearchForm>
* <Form.Item name="field1" label="条件1">xxx</Form.Item>
* </SearchForm>
*
* -- 自定义网格布局 使用 FormCol组件包装 Form.Item
* <SearchForm>
* <FormCol span={12}><Form.Item name="field1" label="条件1">xxx</Form.Item></FormCol>
* </SearchForm>
*
* -- children 可为 function
* <SearchForm>
* {(form) => {
* return <Form.Item name="field1" label="条件1">xxx</Form.Item>
* }}
* </SearchForm>
*
* 2. 用户2（自定义布局）
* SearchForm设置 isPure = true，FormItem无布局规则
* 3. SearchForm中内置了 Form 标签，当children为函数时，可获取form实例
* 4. 默认布局下，可通过设置 searchOperate 设置操作按钮
* 5. SearchForm 子节点包含 hidden = true 会被忽略
* 6. 如果想隐藏【查询、重置】按钮中的某一个，可设置 queryButtonProps.hidden、resetButtonProps.hidden
* 7. 通过设置 defaultResetButtonTriggerRequest，可在右侧按钮区域新增自定义按钮
* 8. 可设置 cacheSwitch 来控制是否缓存查询数据（一般一级页面可缓存，二级、三级等不能缓存），
* 缓存数据存储在内存中，react路由跳转可正常读取缓存，浏览器刷新后缓存丢失
*```
*/
var SearchForm = /*#__PURE__*/forwardRef(function (props, ref) {
var searchFormId = hooks.useId(undefined, 'search-form-key');
var modelKey = useMemo(function () {
return props.cacheSwitch === false ? searchFormId : location.pathname;
}, [searchFormId, props.cacheSwitch]);
var _searchFormModel$useS = searchFormModel(modelKey).useStore(),
_searchFormModel$useS2 = _slicedToArray(_searchFormModel$useS, 2),
state = _searchFormModel$useS2[0],
actions = _searchFormModel$useS2[1];
var _Form$useForm = Form.useForm(props.form),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var queryButtonProps = props.queryButtonProps,
resetButtonProps = props.resetButtonProps,
searchOperate = props.searchOperate,
formClassName = props.formClassName,
rightOperateAreaAppendType = props.rightOperateAreaAppendType,
onQuery = props.onQuery,
onReset = props.onReset,
initRequest = props.initRequest,
onFormFinish = props.onFormFinish,
defaultResetButtonTriggerRequest = props.defaultResetButtonTriggerRequest;
var children = typeof props.children === 'function' ? props.children(form) : props.children;
var rightOperateAreaAppendTypeFt = rightOperateAreaAppendType || 'cover';
var childrens = useMemo(function () {
if (isFragment(children)) {
return Children.toArray(children.props.children);
} else {
return Children.toArray(children);
}
}, [children]);
var onInnerQuery = function onInnerQuery(values) {
Object.keys(values).forEach(function (key) {
if (key.startsWith('__#invalid_date_')) {
delete values[key];
}
});
void actions.updateFilterCondition(values);
void (onQuery === null || onQuery === void 0 ? void 0 : onQuery(values || {}));
};
var onInnerReset = hooks.useCallbackRef(function () {
return new Promise(function ($return, $error) {
return Promise.resolve(actions.resetFilterCondition()).then(function ($await_1) {
try {
setTimeout(function () {
form.resetFields();
}, 200);
onReset === null || onReset === void 0 || onReset();
if (defaultResetButtonTriggerRequest === false) {
return $return();
}
void onInnerQuery({});
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
});
});
var onInnerFormFinish = function onInnerFormFinish(values) {
if (onFormFinish) {
onFormFinish(values);
return;
}
void onInnerQuery(values);
};
var formRowChildren = useMemo(function () {
var _props$foldKeys;
var defaultRightList = [!(queryButtonProps !== null && queryButtonProps !== void 0 && queryButtonProps.hidden) ? /*#__PURE__*/jsx(ButtonWrapper, _objectSpread2(_objectSpread2({
type: "primary",
htmlType: 'submit',
loadingPosition: "center"
}, queryButtonProps), {}, {
children: (queryButtonProps === null || queryButtonProps === void 0 ? void 0 : queryButtonProps.text) || '查询'
}), "1") : null, !(resetButtonProps !== null && resetButtonProps !== void 0 && resetButtonProps.hidden) ? /*#__PURE__*/jsx(ButtonWrapper, _objectSpread2(_objectSpread2({
onClick: onInnerReset
}, resetButtonProps), {}, {
children: (resetButtonProps === null || resetButtonProps === void 0 ? void 0 : resetButtonProps.text) || '重置'
}), "2") : null].filter(Boolean);
var customFormOperateCol = searchOperate === null || searchOperate === void 0 ? void 0 : searchOperate(form);
var customRightList = customFormOperateCol === null || customFormOperateCol === void 0 ? void 0 : customFormOperateCol.rightList;
var leftList = (customFormOperateCol === null || customFormOperateCol === void 0 ? void 0 : customFormOperateCol.leftList) || [];
var rightList = defaultRightList;
if (customRightList) {
if (rightOperateAreaAppendTypeFt === 'afterAppend') {
rightList = [].concat(_toConsumableArray(defaultRightList), _toConsumableArray(customRightList));
} else if (rightOperateAreaAppendTypeFt === 'beforeAppend') {
rightList = [].concat(_toConsumableArray(customRightList), _toConsumableArray(defaultRightList));
} else {
rightList = customRightList;
}
}
if ((_props$foldKeys = props.foldKeys) !== null && _props$foldKeys !== void 0 && _props$foldKeys.length) {
var changeFolditem = /*#__PURE__*/jsx(ButtonWrapper, {
type: "link",
style: {
padding: '0'
},
onClick: function onClick() {
void actions.onChangeOpenFold(!state.openFold);
},
children: state.openFold ? /*#__PURE__*/jsxs("span", {
children: ["\u6536\u8D77", /*#__PURE__*/jsx(_UpOutlined, {
style: {
marginLeft: 3,
fontSize: 12
}
})]
}) : /*#__PURE__*/jsxs("span", {
children: ["\u5C55\u5F00", /*#__PURE__*/jsx(_DownOutlined, {
style: {
marginLeft: 3,
fontSize: 12
}
})]
})
}, "fold-trigger");
if (rightList.length > 0 || leftList.length === 0) {
rightList.push(changeFolditem);
} else if ((leftList === null || leftList === void 0 ? void 0 : leftList.length) > 0) {
leftList.push(changeFolditem);
}
}
return childrens.map(function (item, index) {
var _props$foldKeys2;
if (!state.openFold && (_props$foldKeys2 = props.foldKeys) !== null && _props$foldKeys2 !== void 0 && _props$foldKeys2.find(function (keyItem) {
return ".$".concat(keyItem) === item.key;
})) {
return null;
}
if (item.props['hidden']) return null;
if (item.type['domTypeName'] === 'FormCol') return item;
return /*#__PURE__*/jsx(FormGrid.Col, {
children: item
}, index);
}).filter(Boolean).concat(/*#__PURE__*/jsx(FormGrid.OperateCol, _objectSpread2(_objectSpread2({}, customFormOperateCol), {}, {
leftList: leftList,
rightList: rightList
}), 999));
}, [queryButtonProps, resetButtonProps, onInnerReset, searchOperate, form, props.foldKeys, childrens, rightOperateAreaAppendTypeFt, state.openFold, actions]);
fbaHooks.useEffectCustom(function () {
if (initRequest === false && !state.isInit || initRequest !== false) {
void (onQuery === null || onQuery === void 0 ? void 0 : onQuery(_objectSpread2(_objectSpread2({}, props.formInitialValues), state.queryCondition)));
}
void actions.updateInitStatus();
}, []);
useImperativeHandle(ref, function () {
return {
onQuery: onInnerQuery,
form: form
};
});
return /*#__PURE__*/jsx(FormWrapper, {
form: form,
autoComplete: "off",
onFinish: onInnerFormFinish,
initialValues: _objectSpread2(_objectSpread2({}, props.formInitialValues), state.queryCondition),
className: classNames('search-form', preDefinedClassName.form.formItemGap8, formClassName),
style: props.formStyle,
labelWidth: props.formLabelWidth,
labelAlign: props.formLabelAlign,
formItemGap: props.formFormItemGap,
labelItemVertical: props.formLabelItemVertical,
children: props.isPure ? children : /*#__PURE__*/jsx(FormGrid.Row, {
gutter: [15, 0],
gridSize: props.formGridSize,
children: formRowChildren
})
});
});
export { SearchForm as S };
//# sourceMappingURL=search-cwSkh4xF.js.map