@flatbiz/antd
Version:
137 lines (133 loc) • 6.92 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, d as _toArray, c as _toConsumableArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { hooks } from '@wove/react/hooks';
import { isArray } from '@dimjs/lang/is-array';
import { useMemo, useEffect, useRef } from 'react';
import { Form } from 'antd';
import { toArray } from '@flatbiz/utils';
import { fbaHooks } from './fba-hooks/index.js';
import { f as fbaUtils } from './fba-utils-Dfbczn1S.js';
import { F as FormItemHidden } from './form-item-hidden-BtQvJEx7.js';
import { F as FormItemWrapper } from './form-item-wrapper-BneADBjX.js';
import { T as TimeRangePickerWrapper } from './time-range-picker-wrapper-BpQQjbcu.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
var _excluded = ["startName", "endName", "formListName", "formListCompleteName", "timeRangePickerWrapperProps"];
/**
* 包含了Form.Item组件的时间区间选择组件，时间区间组件可以定义成两个字段操作，不用再通过数组处理
* ```
* 1. 会在form中产生一个 `__#invalid_time_xxxx_xxxx` 的无效字段，可以直接忽略
* 2. 设置日期格式 timeRangePickerWrapperProps={{ format: 'HH:mm:ss' }}
* 使用场景：
* 1. 基础使用场景
* <TimeRangePickerWrapperFormItem startName={'date1'} endName={'date2'} />
* 2. Form.List 内部使用
* <FormListWrapper name="dataList" prevCompleteName={[]}>
* {(data) => {
* return <TimeRangePickerWrapperFormItem formListCompleteName={data.prevCompleteName} startName={data.getInsideFormItemName('date1')} endName={data.getInsideFormItemName('date2')} />
* }}
* </FormListWrapper>
* 3. Form.List 套 Form.List 内部使用
* <FormListWrapper name="dataList" prevCompleteName={[]}>
* {(data) => {
* return <FormListWrapper name={data.getInsideFormItemName('childrenList')} prevCompleteName={data.prevCompleteName}>
* {(data2) => {
* return <TimeRangePickerWrapperFormItem formListCompleteName={data2.prevCompleteName} startName={data2.getInsideFormItemName('date1')} endName={data2.getInsideFormItemName('date2')} />
* }}
* </FormListWrapper>
* }}
* </FormListWrapper>
* ```
*/
var TimeRangePickerWrapperFormItem = function TimeRangePickerWrapperFormItem(props) {
var _props$rules;
var startName = props.startName,
endName = props.endName,
formListName = props.formListName,
formListCompleteName = props.formListCompleteName,
timeRangePickerWrapperProps = props.timeRangePickerWrapperProps,
otherProps = _objectWithoutProperties(props, _excluded);
var form = Form.useFormInstance();
var prevName = formListCompleteName || formListName;
var bodyName = useMemo(function () {
if (prevName && isArray(startName) && isArray(endName)) {
var _ref = startName,
_ref2 = _toArray(_ref),
startName0 = _ref2[0],
startNameOther = _ref2.slice(1);
var _ref3 = endName,
_ref4 = _toArray(_ref3),
endNameOther = _ref4.slice(1);
return [startName0].concat("__#invalid_time_".concat(startNameOther.join('-'), "_").concat(endNameOther.join('-')));
}
return "__#invalid_time_".concat(startName, "_").concat(endName);
}, [prevName, startName, endName]);
var bodyCompleteName = useMemo(function () {
return prevName ? [].concat(_toConsumableArray(toArray(prevName)), _toConsumableArray(bodyName)) : bodyName;
}, [bodyName, prevName]);
var startCompleteName = useMemo(function () {
return prevName ? [].concat(_toConsumableArray(toArray(prevName)), _toConsumableArray(toArray(startName))) : startName;
}, [startName, prevName]);
var endCompleteName = useMemo(function () {
return prevName ? [].concat(_toConsumableArray(toArray(prevName)), _toConsumableArray(toArray(endName))) : endName;
}, [endName, prevName]);
var startVal = Form.useWatch(startCompleteName, form);
var endVal = Form.useWatch(endCompleteName, form);
var bodyValue = Form.useWatch(bodyCompleteName, form);
var onChange = hooks.useCallbackRef(function (data) {
var _timeRangePickerWrapp;
var value1 = data === null || data === void 0 ? void 0 : data[0];
var value2 = data === null || data === void 0 ? void 0 : data[1];
fbaUtils.setFormFieldsAndTriggerValuesChange(form, [{
name: startCompleteName,
value: value1
}, {
name: endCompleteName,
value: value2
}]);
timeRangePickerWrapperProps === null || timeRangePickerWrapperProps === void 0 || (_timeRangePickerWrapp = timeRangePickerWrapperProps.onChange) === null || _timeRangePickerWrapp === void 0 || _timeRangePickerWrapp.call(timeRangePickerWrapperProps, data);
});
useEffect(function () {
if (startVal && endVal) {
form.setFields([{
name: bodyCompleteName,
value: [startVal, endVal]
}]);
} else {
form.setFields([{
name: bodyCompleteName,
value: undefined
}]);
}
}, [startVal, endVal, bodyValue, form, bodyCompleteName]);
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(FormItemHidden, {
name: startName
}), /*#__PURE__*/jsx(FormItemHidden, {
name: endName
}), /*#__PURE__*/jsx(FormItemWrapper, _objectSpread2(_objectSpread2({}, otherProps), {}, {
name: bodyName,
children: prevName && (_props$rules = props.rules) !== null && _props$rules !== void 0 && _props$rules.length ? /*#__PURE__*/jsx(Content, _objectSpread2(_objectSpread2({}, timeRangePickerWrapperProps), {}, {
onChange: onChange
})) : /*#__PURE__*/jsx(TimeRangePickerWrapper, _objectSpread2(_objectSpread2({}, timeRangePickerWrapperProps), {}, {
onChange: onChange
}))
}))]
});
};
var Content = function Content(props) {
var _props$value3, _props$value4;
var ref = useRef(0);
var preValue = fbaHooks.usePrevious(props.value);
fbaHooks.useEffectCustom(function () {
var _props$value, _props$value2;
// 处在Form.List场景下，当第一次外部赋值时，会出现赋值成功，但显示异常效果
if (ref.current === 0 && !preValue && (_props$value = props.value) !== null && _props$value !== void 0 && _props$value[0] && (_props$value2 = props.value) !== null && _props$value2 !== void 0 && _props$value2[1]) {
var _props$onChange;
ref.current = 1;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, props.value);
}
}, [(_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3[0], (_props$value4 = props.value) === null || _props$value4 === void 0 ? void 0 : _props$value4[1]]);
return /*#__PURE__*/jsx(TimeRangePickerWrapper, _objectSpread2({}, props));
};
export { TimeRangePickerWrapperFormItem as T };
//# sourceMappingURL=time-range-picker-wrapper-form-item-BSE3DCEy.js.map