linkmore-design
Version:
🌈 🚀lm组件库。🚀
120 lines (118 loc) • 5.86 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["type"];
import { useControllableValue, useMemoizedFn } from 'ahooks';
import pick from 'lodash/pick';
import React, { useMemo } from 'react';
import Dropdown from "../../dropdown";
import LocaleReceiver from "../../locale-provider/LocaleReceiver";
import { CascaderRender, CheckboxRender, DateRangeRender, DateRender, InputNumberRangeRender, InputNumberRender, InputRender, SelectRender } from "../widgets";
import LabelRender from "./LabelRender";
var DropdownRender = function DropdownRender(_ref) {
var type = _ref.type,
props = _objectWithoutProperties(_ref, _excluded);
var widgets = {
select: /*#__PURE__*/React.createElement(SelectRender, props),
input: /*#__PURE__*/React.createElement(InputRender, props),
number: /*#__PURE__*/React.createElement(InputNumberRender, props),
numberRange: /*#__PURE__*/React.createElement(InputNumberRangeRender, props),
checkbox: /*#__PURE__*/React.createElement(CheckboxRender, props),
cascader: /*#__PURE__*/React.createElement(CascaderRender, props),
date: /*#__PURE__*/React.createElement(DateRender, props),
range: /*#__PURE__*/React.createElement(DateRangeRender, props)
};
// 防止报错
if (!(type in widgets)) return /*#__PURE__*/React.createElement("div", null);
return widgets[type];
};
var Control = function Control(props) {
var onChange = props.onChange,
children = props.children,
_dropdownRender = props.dropdownRender;
var _useControllableValue = useControllableValue(props, {
defaultValue: false,
valuePropName: 'open',
trigger: 'onOpenChange'
}),
_useControllableValue2 = _slicedToArray(_useControllableValue, 2),
controlOpen = _useControllableValue2[0],
onControlOpenChange = _useControllableValue2[1];
var handleChange = useMemoizedFn(function () {
onControlOpenChange(false);
for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
arg[_key] = arguments[_key];
}
onChange === null || onChange === void 0 ? void 0 : onChange.apply(void 0, arg);
});
/** 重组props向下传递 */
var resetProps = _objectSpread(_objectSpread({}, props), {}, {
onChange: handleChange,
onCancel: useMemoizedFn(function () {
return onControlOpenChange(false);
}),
open: controlOpen
});
return /*#__PURE__*/React.createElement(Dropdown, {
trigger: ['click'],
placement: "bottomLeft",
open: controlOpen,
onOpenChange: onControlOpenChange,
dropdownRender: function dropdownRender() {
return _dropdownRender === null || _dropdownRender === void 0 ? void 0 : _dropdownRender(resetProps);
},
destroyPopupOnHide: true // 未开启则需手动控制下拉展示组件的初始化
}, children === null || children === void 0 ? void 0 : children(resetProps));
};
/**
* 赋予不同类型不同的默认值(可用于单独使用)
* 可以在此处根据不同的type重组props向下传递, 防止多余参数的传递
* @description 此处用于赋予默认值, 不要在子集赋予, 防止Dropdown打开时的更新
*/
var DefaultControl = function DefaultControl(props) {
var type = props.type,
placeholder = props.placeholder,
fieldNames = props.fieldNames,
options = props.options,
colon = props.colon,
dropdownRender = props.dropdownRender,
children = props.children,
locale = props.locale;
var defaultConfig = useMemo(function () {
var typePlaceholder = type === 'date' ? locale.datePickerPlaceholder : ['dateRange', 'range'].includes(type) ? [locale.startDate, locale.endDate] : locale.all;
var defaultPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : typePlaceholder;
var defaultFieldNames = _objectSpread({
label: 'label',
value: 'value',
children: 'children'
}, fieldNames);
var defaultOptions = options !== null && options !== void 0 ? options : [];
var defaultColon = colon !== null && colon !== void 0 ? colon : true;
return {
placeholder: defaultPlaceholder,
fieldNames: defaultFieldNames,
options: defaultOptions,
colon: defaultColon
};
}, [type, placeholder, fieldNames, options, colon, locale]);
var defaultDropdownRender = useMemoizedFn(dropdownRender !== null && dropdownRender !== void 0 ? dropdownRender : DropdownRender);
var defaultChildren = useMemoizedFn(function (otherProps) {
return typeof children === 'function' ? children(otherProps) : children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(LabelRender, otherProps);
});
var resetProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultConfig), pick(props, ['type', 'value', 'onChange', 'locale', 'open', 'onOpenChange', 'size'])), pick(props, ['title', 'multiple', 'showSearch', 'onSearch', 'optionLabelProp', 'optionFilterProp'])), pick(props, ['showCheckedStrategy'])), pick(props, ['picker', 'showTime', 'format'])), pick(props, ['onFocus', 'itemRender', 'footerRender'])), {}, {
children: defaultChildren,
dropdownRender: defaultDropdownRender
});
return /*#__PURE__*/React.createElement(Control, resetProps);
};
var LocaleControl = function LocaleControl(props) {
return /*#__PURE__*/React.createElement(LocaleReceiver, {
componentName: "FilterWidget"
}, function (contextLocale) {
return /*#__PURE__*/React.createElement(DefaultControl, _extends({}, props, {
locale: contextLocale
}));
});
};
export default LocaleControl;