tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
431 lines (429 loc) • 19.3 kB
JavaScript
;
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _rcSelect = require("rc-select");
var _useId = _interopRequireDefault(require("rc-select/lib/hooks/useId"));
var _conductUtil = require("rc-tree/lib/utils/conductUtil");
var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var React = _interopRequireWildcard(require("react"));
var _context = _interopRequireDefault(require("./context"));
var _useDisplayValues = _interopRequireDefault(require("./hooks/useDisplayValues"));
var _useEntities = _interopRequireDefault(require("./hooks/useEntities"));
var _useMissingValues = _interopRequireDefault(require("./hooks/useMissingValues"));
var _useRefFunc = _interopRequireDefault(require("./hooks/useRefFunc"));
var _useSearchConfig3 = _interopRequireDefault(require("./hooks/useSearchConfig"));
var _useSearchOptions = _interopRequireDefault(require("./hooks/useSearchOptions"));
var _OptionList = _interopRequireDefault(require("./OptionList"));
var _commonUtil = require("./utils/commonUtil");
var _treeUtil = require("./utils/treeUtil");
var _warningPropsUtil = _interopRequireWildcard(require("./utils/warningPropsUtil"));
var _prevLocale = require("../../prev-locale");
require("./index.less");
function _getRequireWildcardCache(e) {
if ("function" != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
"default": e
};
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = {
__proto__: null
},
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
}
return n["default"] = e, t && t.set(e, n), n;
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
var defaultPlaceholder = (0, _prevLocale.getText)('select', (0, _prevLocale.getLanguage)());
function isMultipleValue(value) {
return Array.isArray(value) && Array.isArray(value[0]);
}
function toRawValues(value) {
if (!value) {
return [];
}
if (isMultipleValue(value)) {
return value;
}
return (value.length === 0 ? [] : [value]).map(function (val) {
return Array.isArray(val) ? val : [val];
});
}
var Cascader = React.forwardRef(function (props, ref) {
var id = props.id,
_props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'rc-cascader' : _props$prefixCls,
fieldNames = props.fieldNames,
defaultValue = props.defaultValue,
value = props.value,
changeOnSelect = props.changeOnSelect,
onChange = props.onChange,
displayRender = props.displayRender,
checkable = props.checkable,
searchValue = props.searchValue,
onSearch = props.onSearch,
showSearch = props.showSearch,
expandTrigger = props.expandTrigger,
options = props.options,
dropdownPrefixCls = props.dropdownPrefixCls,
loadData = props.loadData,
popupVisible = props.popupVisible,
open = props.open,
popupClassName = props.popupClassName,
dropdownClassName = props.dropdownClassName,
dropdownMenuColumnStyle = props.dropdownMenuColumnStyle,
popupPlacement = props.popupPlacement,
placement = props.placement,
onDropdownVisibleChange = props.onDropdownVisibleChange,
onPopupVisibleChange = props.onPopupVisibleChange,
renderItem = props.renderItem,
_props$expandIcon = props.expandIcon,
expandIcon = _props$expandIcon === void 0 ? '>' : _props$expandIcon,
loadingIcon = props.loadingIcon,
children = props.children,
_props$dropdownMatchS = props.dropdownMatchSelectWidth,
dropdownMatchSelectWidth = _props$dropdownMatchS === void 0 ? false : _props$dropdownMatchS,
_props$showCheckedStr = props.showCheckedStrategy,
showCheckedStrategy = _props$showCheckedStr === void 0 ? _commonUtil.SHOW_PARENT : _props$showCheckedStr,
optionsNum = props.optionsNum,
restProps = __rest(props, ["id", "prefixCls", "fieldNames", "defaultValue", "value", "changeOnSelect", "onChange", "displayRender", "checkable", "searchValue", "onSearch", "showSearch", "expandTrigger", "options", "dropdownPrefixCls", "loadData", "popupVisible", "open", "popupClassName", "dropdownClassName", "dropdownMenuColumnStyle", "popupPlacement", "placement", "onDropdownVisibleChange", "onPopupVisibleChange", "renderItem", "expandIcon", "loadingIcon", "children", "dropdownMatchSelectWidth", "showCheckedStrategy", "optionsNum"]);
var mergedId = (0, _useId["default"])(id);
var multiple = !!checkable;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
dropdownVisible = _React$useState2[0],
setDropdownVisible = _React$useState2[1];
// =========================== Values ===========================
var _useMergedState = (0, _useMergedState5["default"])(defaultValue, {
value: value,
postState: toRawValues
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
rawValues = _useMergedState2[0],
setRawValues = _useMergedState2[1];
// ========================= FieldNames =========================
var mergedFieldNames = React.useMemo(function () {
return (0, _commonUtil.fillFieldNames)(fieldNames);
}, /* eslint-disable react-hooks/exhaustive-deps */
[JSON.stringify(fieldNames)]
/* eslint-enable react-hooks/exhaustive-deps */);
// =========================== Option ===========================
var mergedOptions = React.useMemo(function () {
return options || [];
}, [options]);
// Only used in multiple mode, this fn will not call in single mode
var getPathKeyEntities = (0, _useEntities["default"])(mergedOptions, mergedFieldNames);
/** Convert path key back to value format */
var getValueByKeyPath = React.useCallback(function (pathKeys) {
var keyPathEntities = getPathKeyEntities();
return pathKeys.map(function (pathKey) {
var nodes = keyPathEntities[pathKey].nodes;
return nodes.map(function (node) {
return node[mergedFieldNames.value];
});
});
}, [getPathKeyEntities, mergedFieldNames]);
// =========================== Search ===========================
var _useMergedState3 = (0, _useMergedState5["default"])('', {
value: searchValue,
postState: function postState(search) {
return search || '';
}
}),
_useMergedState4 = _slicedToArray(_useMergedState3, 2),
mergedSearchValue = _useMergedState4[0],
setSearchValue = _useMergedState4[1];
var onInternalSearch = function onInternalSearch(searchText, info) {
setSearchValue(searchText);
if (info.source !== 'blur' && onSearch) {
onSearch(searchText);
}
};
var _useSearchConfig = (0, _useSearchConfig3["default"])(showSearch),
_useSearchConfig2 = _slicedToArray(_useSearchConfig, 2),
mergedShowSearch = _useSearchConfig2[0],
searchConfig = _useSearchConfig2[1];
var searchOptions = (0, _useSearchOptions["default"])(mergedSearchValue, mergedOptions, mergedFieldNames, dropdownPrefixCls || prefixCls, searchConfig, changeOnSelect);
// =========================== Values ===========================
var getMissingValues = (0, _useMissingValues["default"])(mergedOptions, mergedFieldNames);
// Fill `rawValues` with checked conduction values
var _React$useMemo = React.useMemo(function () {
var _getMissingValues = getMissingValues(rawValues),
_getMissingValues2 = _slicedToArray(_getMissingValues, 2),
existValues = _getMissingValues2[0],
missingValues = _getMissingValues2[1];
if (!multiple || !rawValues.length) {
return [existValues, [], missingValues];
}
var keyPathValues = (0, _commonUtil.toPathKeys)(existValues);
var keyPathEntities = getPathKeyEntities();
var _conductCheck = (0, _conductUtil.conductCheck)(keyPathValues, true, keyPathEntities),
checkedKeys = _conductCheck.checkedKeys,
halfCheckedKeys = _conductCheck.halfCheckedKeys;
// Convert key back to value cells
return [getValueByKeyPath(checkedKeys), getValueByKeyPath(halfCheckedKeys), missingValues];
}, [multiple, rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues]),
_React$useMemo2 = _slicedToArray(_React$useMemo, 3),
checkedValues = _React$useMemo2[0],
halfCheckedValues = _React$useMemo2[1],
missingCheckedValues = _React$useMemo2[2];
var deDuplicatedValues = React.useMemo(function () {
var checkedKeys = (0, _commonUtil.toPathKeys)(checkedValues);
var deduplicateKeys = (0, _treeUtil.formatStrategyValues)(checkedKeys, getPathKeyEntities, showCheckedStrategy);
return [].concat(_toConsumableArray(missingCheckedValues), _toConsumableArray(getValueByKeyPath(deduplicateKeys)));
}, [checkedValues, getPathKeyEntities, getValueByKeyPath, missingCheckedValues, showCheckedStrategy]);
var displayValues = (0, _useDisplayValues["default"])(deDuplicatedValues, mergedOptions, mergedFieldNames, multiple, displayRender);
// =========================== Change ===========================
var triggerChange = (0, _useRefFunc["default"])(function (nextValues) {
setRawValues(nextValues);
// Save perf if no need trigger event
if (onChange) {
var nextRawValues = toRawValues(nextValues);
var valueOptions = nextRawValues.map(function (valueCells) {
return (0, _treeUtil.toPathOptions)(valueCells, mergedOptions, mergedFieldNames).map(function (valueOpt) {
return valueOpt.option;
});
});
var triggerValues = multiple ? nextRawValues : nextRawValues[0];
var triggerOptions = multiple ? valueOptions : valueOptions[0];
onChange(triggerValues, triggerOptions);
}
});
// =========================== Select ===========================
var onInternalSelect = (0, _useRefFunc["default"])(function (valuePath) {
setSearchValue('');
if (!multiple) {
triggerChange(valuePath);
} else {
// Prepare conduct required info
var pathKey = (0, _commonUtil.toPathKey)(valuePath);
var checkedPathKeys = (0, _commonUtil.toPathKeys)(checkedValues);
var halfCheckedPathKeys = (0, _commonUtil.toPathKeys)(halfCheckedValues);
var existInChecked = checkedPathKeys.includes(pathKey);
var existInMissing = missingCheckedValues.some(function (valueCells) {
return (0, _commonUtil.toPathKey)(valueCells) === pathKey;
});
// Do update
var nextCheckedValues = checkedValues;
var nextMissingValues = missingCheckedValues;
if (existInMissing && !existInChecked) {
// Missing value only do filter
nextMissingValues = missingCheckedValues.filter(function (valueCells) {
return (0, _commonUtil.toPathKey)(valueCells) !== pathKey;
});
} else {
// Update checked key first
var nextRawCheckedKeys = existInChecked ? checkedPathKeys.filter(function (key) {
return key !== pathKey;
}) : [].concat(_toConsumableArray(checkedPathKeys), [pathKey]);
var pathKeyEntities = getPathKeyEntities();
// Conduction by selected or not
var checkedKeys;
if (existInChecked) {
;
var _conductCheck2 = (0, _conductUtil.conductCheck)(nextRawCheckedKeys, {
checked: false,
halfCheckedKeys: halfCheckedPathKeys
}, pathKeyEntities);
checkedKeys = _conductCheck2.checkedKeys;
} else {
;
var _conductCheck3 = (0, _conductUtil.conductCheck)(nextRawCheckedKeys, true, pathKeyEntities);
checkedKeys = _conductCheck3.checkedKeys;
}
// Roll up to parent level keys
var deDuplicatedKeys = (0, _treeUtil.formatStrategyValues)(checkedKeys, getPathKeyEntities, showCheckedStrategy);
nextCheckedValues = getValueByKeyPath(deDuplicatedKeys);
}
triggerChange([].concat(_toConsumableArray(nextMissingValues), _toConsumableArray(nextCheckedValues)));
}
});
// Display Value change logic
var onDisplayValuesChange = function onDisplayValuesChange(_, info) {
if (info.type === 'clear') {
triggerChange([]);
return;
}
// Cascader do not support `add` type. Only support `remove`
var valueCells = info.values[0].valueCells;
onInternalSelect(valueCells);
};
// ============================ Open ============================
var mergedOpen = open !== undefined ? open : popupVisible;
var mergedDropdownClassName = dropdownClassName || popupClassName;
var mergedPlacement = placement || popupPlacement;
var onInternalDropdownVisibleChange = function onInternalDropdownVisibleChange(nextVisible) {
onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(nextVisible);
onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextVisible);
setDropdownVisible(nextVisible);
};
// ========================== Warning ===========================
if (process.env.NODE_ENV !== 'production') {
(0, _warningPropsUtil["default"])(props);
(0, _warningPropsUtil.warningNullOptions)(mergedOptions, mergedFieldNames);
}
// ========================== Context ===========================
var cascaderContext = React.useMemo(function () {
return {
options: mergedOptions,
fieldNames: mergedFieldNames,
values: checkedValues,
halfValues: halfCheckedValues,
changeOnSelect: changeOnSelect,
onSelect: onInternalSelect,
checkable: checkable,
searchOptions: searchOptions,
dropdownPrefixCls: dropdownPrefixCls,
loadData: loadData,
expandTrigger: expandTrigger,
expandIcon: expandIcon,
loadingIcon: loadingIcon,
dropdownMenuColumnStyle: dropdownMenuColumnStyle,
renderItem: renderItem,
dropdownVisible: dropdownVisible,
optionsNum: optionsNum
};
}, [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, searchOptions, dropdownPrefixCls, loadData, expandTrigger, expandIcon, loadingIcon, dropdownMenuColumnStyle, renderItem, dropdownVisible, optionsNum]);
// ==============================================================
// == Render ==
// ==============================================================
var emptyOptions = !(mergedSearchValue ? searchOptions : mergedOptions).length;
var dropdownStyle =
// Search to match width
mergedSearchValue && searchConfig.matchInputWidth ||
// Empty keep the width
emptyOptions ? {} : {
minWidth: 'auto'
};
return React.createElement(_context["default"].Provider, {
value: cascaderContext
}, React.createElement(_rcSelect.BaseSelect, Object.assign({
placeholder: defaultPlaceholder
}, restProps, {
// MISC
ref: ref,
id: mergedId,
prefixCls: prefixCls,
dropdownMatchSelectWidth: dropdownMatchSelectWidth,
dropdownStyle: dropdownStyle,
// Value
displayValues: displayValues,
onDisplayValuesChange: onDisplayValuesChange,
mode: multiple ? 'multiple' : undefined,
// Search
searchValue: mergedSearchValue,
onSearch: onInternalSearch,
showSearch: mergedShowSearch,
// Options
OptionList: _OptionList["default"],
emptyOptions: emptyOptions,
// Open
open: mergedOpen,
dropdownClassName: mergedDropdownClassName,
placement: mergedPlacement,
onDropdownVisibleChange: onInternalDropdownVisibleChange,
// Children
getRawInputElement: function getRawInputElement() {
return children;
}
})));
});
if (process.env.NODE_ENV !== 'production') {
Cascader.displayName = 'Cascader';
}
Cascader.SHOW_PARENT = _commonUtil.SHOW_PARENT;
Cascader.SHOW_CHILD = _commonUtil.SHOW_CHILD;
var _default = exports["default"] = Cascader;