linkmore-design
Version:
🌈 🚀lm组件库。🚀
134 lines (128 loc) • 4.89 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "picker"],
_excluded2 = ["value", "onChange"],
_excluded3 = ["type", "operator", "options", "fieldNames"];
import moment from 'moment';
import React, { useMemo } from 'react';
import Cascader from "../../../cascader";
import DatePicker from "../../../date-picker";
import Input from "../../../input";
import InputNumber from "../../../input-number";
import Select from "../../../select";
import { getIsHas } from "../../utils";
/** 渲染日期选择框: 修改日期返回值 */
var RenderDatePicker = function RenderDatePicker(props) {
var value = props.value,
onChange = props.onChange,
_props$picker = props.picker,
picker = _props$picker === void 0 ? 'date' : _props$picker,
restProps = _objectWithoutProperties(props, _excluded);
var defaultValue = useMemo(function () {
var nValue;
// 周/月/季/年 需要处理回显
if (picker !== 'date') return nValue;
if (value) {
nValue = moment(value);
}
return nValue;
}, [value]);
// 选中时间段的触发
var handleOnChange = function handleOnChange(dates, dateStrings) {
onChange(getIsHas(dateStrings) ? dateStrings : null);
};
return /*#__PURE__*/React.createElement(DatePicker, _extends({}, restProps, {
defaultValue: defaultValue,
onChange: handleOnChange
}));
};
/** 渲染日期区间选择框: 修改了日期返回值 */
var RenderRangePicker = function RenderRangePicker(props) {
var value = props.value,
onChange = props.onChange,
restProps = _objectWithoutProperties(props, _excluded2);
var defaultValue = useMemo(function () {
var nValue;
if (getIsHas(value)) {
nValue = [moment(value[0]), moment(value[1])];
}
return nValue;
}, [value]);
// 选中时间段的触发
var handleOnChange = function handleOnChange(dates, dateStrings) {
onChange(getIsHas(dateStrings.filter(function (v) {
return !!v;
})) ? dateStrings : null);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
picker: "date"
}, restProps, {
value: defaultValue,
onChange: handleOnChange
})));
};
// type: input, number, code, select, checkbox, date, range, dateTime
var DynamicComponent = function DynamicComponent(_ref) {
var type = _ref.type,
operator = _ref.operator,
_ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
itemFieldNames = _ref.fieldNames,
restProps = _objectWithoutProperties(_ref, _excluded3);
// 自定义节点字段
var fieldNames = useMemo(function () {
return _objectSpread({
label: 'label',
value: 'value'
}, itemFieldNames);
}, [itemFieldNames]);
if (['input', 'code'].includes(type)) {
return /*#__PURE__*/React.createElement(Input, restProps);
}
if (['number'].includes(type)) {
return /*#__PURE__*/React.createElement(InputNumber, restProps);
}
if (['select'].includes(type)) {
return /*#__PURE__*/React.createElement(Select, _extends({
allowClear: true,
showSearch: true,
fieldNames: fieldNames,
optionFilterProp: (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label',
options: options
}, restProps));
}
if (['checkbox'].includes(type)) {
return /*#__PURE__*/React.createElement(Select, _extends({
allowClear: true,
showSearch: true,
fieldNames: fieldNames,
mode: "multiple",
optionFilterProp: (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label',
options: options
}, restProps));
}
if (['cascader'].includes(type)) {
return /*#__PURE__*/React.createElement(Cascader, _extends({
allowClear: true,
showSearch: true,
fieldNames: fieldNames,
options: options
}, restProps, {
onDropdownVisibleChange: function onDropdownVisibleChange(open) {
var _restProps$onVisibleC;
(_restProps$onVisibleC = restProps.onVisibleChange) === null || _restProps$onVisibleC === void 0 ? void 0 : _restProps$onVisibleC.call(restProps, open);
}
}));
}
/** 高级筛选根据操作类型确定日期组件 */
if (operator === 'between') return /*#__PURE__*/React.createElement(RenderRangePicker, restProps);
if (['date', 'range'].includes(type)) {
return /*#__PURE__*/React.createElement(RenderDatePicker, restProps);
}
if (['range'].includes(type)) {
return /*#__PURE__*/React.createElement(RenderRangePicker, restProps);
}
return /*#__PURE__*/React.createElement(Input, restProps);
};
export default DynamicComponent;