tdesign-react
Version:
TDesign Component for React
484 lines (478 loc) • 20.9 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _toConsumableArray } from './dep-a3a3e527.js';
import { _ as _defineProperty } from './dep-d67deb2c.js';
import { isNumber, isString, get, isPlainObject } from 'lodash-es';
import { _ as _slicedToArray } from './dep-10d5731f.js';
import React, { useState, useMemo, useEffect } from 'react';
import classNames from 'classnames';
import useConfig from '../hooks/useConfig.js';
import useDomRefCallback from '../hooks/useDomRefCallback.js';
import useRipple from '../hooks/useRipple.js';
import OptionGroup from '../select/base/OptionGroup.js';
import { _ as _typeof } from './dep-8abcbcbc.js';
var componentType = "select";
var Option = function Option(props) {
var propDisabled = props.disabled,
propLabel = props.label,
propTitle = props.title,
selectedValue = props.selectedValue,
checkAll = props.checkAll,
multiple = props.multiple,
size = props.size,
max = props.max,
keys = props.keys,
value = props.value,
onSelect = props.onSelect,
children = props.children,
content = props.content,
restData = props.restData,
style = props.style,
className = props.className,
isVirtual = props.isVirtual,
isKeyboardHovered = props.isKeyboardHovered;
var label = propLabel || value;
var disabled = propDisabled || multiple && Array.isArray(selectedValue) && max && selectedValue.length >= max;
var initCheckedStatus = !(Array.isArray(selectedValue) && selectedValue.length === props.optionLength);
var selected;
var indeterminate;
var _useState = useState(initCheckedStatus),
_useState2 = _slicedToArray(_useState, 2),
allSelectableChecked = _useState2[0],
setAllSelectableChecked = _useState2[1];
var titleContent = useMemo(function () {
var controlledTitle = Reflect.has(props, "title");
if (controlledTitle) return propTitle;
if (typeof label === "string") return label;
return null;
}, [propTitle, label]);
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var _useDomRefCallback = useDomRefCallback(),
_useDomRefCallback2 = _slicedToArray(_useDomRefCallback, 2),
optionRef = _useDomRefCallback2[0],
setRefCurrent = _useDomRefCallback2[1];
useRipple(optionRef);
useEffect(function () {
if (isVirtual && optionRef) {
var _props$onRowMounted;
(_props$onRowMounted = props.onRowMounted) === null || _props$onRowMounted === void 0 || _props$onRowMounted.call(props, {
ref: optionRef,
data: props
});
}
}, [isVirtual, optionRef]);
var _getKeyMapping = getKeyMapping(keys),
valueKey = _getKeyMapping.valueKey;
if (!multiple) {
selected = isNumber(selectedValue) || isString(selectedValue) ? value === selectedValue : value === get(selectedValue, valueKey);
}
if (multiple && Array.isArray(selectedValue)) {
selected = selectedValue.some(function (item) {
if (isNumber(item) || isString(item)) {
return item === value;
}
return get(item, valueKey) === value;
});
if (props.checkAll) {
selected = selectedValue.length === props.optionLength;
indeterminate = selectedValue.length > 0 && !selected;
}
}
var handleSelect = function handleSelect(event) {
if (!disabled && !checkAll) {
onSelect(value, {
label: String(label),
selected: selected,
event: event,
restData: restData
});
}
if (checkAll) {
var _props$onCheckAllChan;
(_props$onCheckAllChan = props.onCheckAllChange) === null || _props$onCheckAllChan === void 0 || _props$onCheckAllChan.call(props, allSelectableChecked, event);
setAllSelectableChecked(!allSelectableChecked);
}
};
var renderItem = function renderItem() {
var displayContent = children || content || label;
if (multiple) {
return /* @__PURE__ */React.createElement("label", {
className: classNames("".concat(classPrefix, "-checkbox"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-is-indeterminate"), indeterminate), "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-checked"), selected)),
title: titleContent
}, /* @__PURE__ */React.createElement("input", {
type: "checkbox",
className: classNames("".concat(classPrefix, "-checkbox__former")),
value: "",
disabled: disabled && !selected,
onClick: function onClick(e) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}
}), /* @__PURE__ */React.createElement("span", {
className: classNames("".concat(classPrefix, "-checkbox__input"))
}), /* @__PURE__ */React.createElement("span", {
className: classNames("".concat(classPrefix, "-checkbox__label"))
}, displayContent));
}
return /* @__PURE__ */React.createElement("span", {
title: titleContent
}, displayContent);
};
return /* @__PURE__ */React.createElement("li", {
className: classNames(className, "".concat(classPrefix, "-").concat(componentType, "-option"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-is-disabled"), disabled), "".concat(classPrefix, "-is-selected"), selected), "".concat(classPrefix, "-size-s"), size === "small"), "".concat(classPrefix, "-size-l"), size === "large"), "".concat(classPrefix, "-").concat(componentType, "-option__hover"), isKeyboardHovered)),
key: value,
onClick: handleSelect,
ref: setRefCurrent,
style: style
}, renderItem());
};
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function isSelectOptionGroup(option) {
return !!option && "group" in option && "children" in option;
}
var flattenOptions = function flattenOptions() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var flattened = [];
options.forEach(function (option) {
if (isSelectOptionGroup(option)) {
if (option.children) {
flattened.push.apply(flattened, _toConsumableArray(option.children));
}
} else {
flattened.push(option);
}
});
return flattened;
};
function useOptions(keys, options, children, valueType, value, reserveKeyword) {
var _useState = useState({}),
_useState2 = _slicedToArray(_useState, 2),
valueToOption = _useState2[0],
setValueToOption = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
currentOptions = _useState4[0],
setCurrentOptions = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
flattenedOptions = _useState6[0],
setFlattenedOptions = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
tmpPropOptions = _useState8[0],
setTmpPropOptions = _useState8[1];
var _useState9 = useState([]),
_useState0 = _slicedToArray(_useState9, 2),
selectedOptions = _useState0[0],
setSelectedOptions = _useState0[1];
var _useMemo = useMemo(function () {
return getKeyMapping(keys);
}, [keys]),
valueKey = _useMemo.valueKey,
labelKey = _useMemo.labelKey;
useEffect(function () {
setFlattenedOptions(flattenOptions(currentOptions));
}, [currentOptions]);
useEffect(function () {
var transformedOptions = options;
var arrayChildren = React.Children.toArray(children);
var optionChildren = arrayChildren.filter(function (v) {
return v.type === Option || v.type === OptionGroup;
});
var isChildrenFilterable = arrayChildren.length > 0 && optionChildren.length === arrayChildren.length;
if (reserveKeyword && currentOptions.length && isChildrenFilterable) return;
if (isChildrenFilterable) {
var _handlerOptionElement = function handlerOptionElement(v) {
if (/*#__PURE__*/React.isValidElement(v)) {
if (v.type === OptionGroup) {
var _v$props$children;
return _objectSpread$1(_objectSpread$1({}, v.props), {}, {
group: v.props.label,
children: (_v$props$children = v.props.children) === null || _v$props$children === void 0 ? void 0 : _v$props$children.map(function (v2) {
return _handlerOptionElement(v2);
})
});
}
return _objectSpread$1(_objectSpread$1({}, v.props), {}, {
label: v.props.label || v.props.children
});
}
return {
label: v
};
};
transformedOptions = arrayChildren === null || arrayChildren === void 0 ? void 0 : arrayChildren.map(function (v) {
return _handlerOptionElement(v);
});
}
if (keys) {
var _transformedOptions;
transformedOptions = (_transformedOptions = transformedOptions) === null || _transformedOptions === void 0 ? void 0 : _transformedOptions.map(function (option) {
return _objectSpread$1(_objectSpread$1({}, option), {}, {
value: get(option, valueKey),
label: get(option, labelKey)
});
});
}
setCurrentOptions(transformedOptions);
setTmpPropOptions(transformedOptions);
setValueToOption(getValueToOption(children, options, keys) || {});
}, [options, keys, children, reserveKeyword]);
useEffect(function () {
setSelectedOptions(function (oldSelectedOptions) {
var createOptionFromValue = function createOptionFromValue(item) {
if (valueType === "value") {
return valueToOption[item] || oldSelectedOptions.find(function (option) {
return get(option, valueKey) === item;
}) || _defineProperty(_defineProperty({}, valueKey, item), labelKey, item);
}
if (_typeof(item) === "object" && item !== null) {
return item;
}
return [];
};
if (Array.isArray(value)) {
return value.map(createOptionFromValue);
}
if (value !== void 0 && value !== null) {
var option = createOptionFromValue(value);
return option ? [option] : [];
}
return [];
});
}, [value, keys, valueType, valueToOption, valueKey, labelKey, setSelectedOptions]);
return {
currentOptions: currentOptions,
setCurrentOptions: setCurrentOptions,
tmpPropOptions: tmpPropOptions,
setTmpPropOptions: setTmpPropOptions,
valueToOption: valueToOption,
setValueToOption: setValueToOption,
selectedOptions: selectedOptions,
setSelectedOptions: setSelectedOptions,
flattenedOptions: flattenedOptions
};
}
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getKeyMapping = function getKeyMapping(keys) {
var valueKey = (keys === null || keys === void 0 ? void 0 : keys.value) || "value";
var labelKey = (keys === null || keys === void 0 ? void 0 : keys.label) || "label";
var disabledKey = (keys === null || keys === void 0 ? void 0 : keys.disabled) || "disabled";
return {
valueKey: valueKey,
labelKey: labelKey,
disabledKey: disabledKey
};
};
var setValueToOptionFormOptionDom = function setValueToOptionFormOptionDom(dom, valueToOption, keys) {
var _getKeyMapping = getKeyMapping(keys),
valueKey = _getKeyMapping.valueKey,
labelKey = _getKeyMapping.labelKey;
var _dom$props = dom.props,
value = _dom$props.value,
label = _dom$props.label,
children = _dom$props.children;
valueToOption[value] = _objectSpread(_objectSpread({}, dom.props), {}, _defineProperty(_defineProperty({}, valueKey, value), labelKey, label || children || value));
};
var getValueToOption = function getValueToOption(children, options, keys) {
var _getKeyMapping2 = getKeyMapping(keys),
valueKey = _getKeyMapping2.valueKey,
labelKey = _getKeyMapping2.labelKey;
var valueToOption = {};
if (Array.isArray(options)) {
options.forEach(function (option) {
if (isSelectOptionGroup(option)) {
var _option$children;
(_option$children = option.children) === null || _option$children === void 0 || _option$children.forEach(function (child) {
valueToOption[get(child, valueKey)] = _objectSpread(_objectSpread({}, child), {}, {
value: get(child, valueKey),
label: get(child, labelKey)
});
});
} else {
valueToOption[get(option, valueKey)] = _objectSpread(_objectSpread({}, option), {}, {
value: get(option, valueKey),
label: get(option, labelKey)
});
}
});
return valueToOption;
}
if (isPlainObject(children)) {
if (children.type === Option) {
setValueToOptionFormOptionDom(children, valueToOption, keys);
return valueToOption;
}
if (children.type === OptionGroup) {
var groupChildren = children.props.children;
if (Array.isArray(groupChildren)) {
groupChildren.forEach(function (item) {
setValueToOptionFormOptionDom(item, valueToOption, keys);
});
return valueToOption;
}
}
}
if (Array.isArray(children)) {
var _handlerElement = function handlerElement(item) {
if (item.type === Option) {
setValueToOptionFormOptionDom(item, valueToOption, keys);
}
if (item.type === OptionGroup) {
var _groupChildren = item.props.children;
if (Array.isArray(_groupChildren)) {
_groupChildren.forEach(function (groupItem) {
setValueToOptionFormOptionDom(groupItem, valueToOption, keys);
});
}
}
if (Array.isArray(item)) {
item.forEach(function (child) {
_handlerElement(child);
});
}
};
children.forEach(function (item) {
return _handlerElement(item);
});
}
return valueToOption;
};
var getLabel = function getLabel(children, value, options, keys) {
var _getKeyMapping3 = getKeyMapping(keys),
valueKey = _getKeyMapping3.valueKey;
var selectedLabel = "";
if (Array.isArray(options)) {
options.some(function (option) {
if ([get(value, valueKey), value].includes(option.value)) {
selectedLabel = option.label;
return true;
}
return false;
});
return selectedLabel;
}
if (isPlainObject(children)) {
selectedLabel = children.props.label;
if (children.type === OptionGroup) {
var groupChildren = children.props.children;
if (Array.isArray(groupChildren)) {
groupChildren.some(function (item) {
var selectedValue = isPlainObject(value) ? get(value, "value") : value;
if (isPlainObject(item.props) && item.props.value === selectedValue) {
selectedLabel = item.props.label || item.props.children;
return true;
}
return false;
});
}
}
}
if (Array.isArray(children)) {
children.some(function (item) {
if (item.type === OptionGroup) {
var _groupChildren2 = item.props.children;
if (Array.isArray(_groupChildren2)) {
var isSelected = _groupChildren2.some(function (item2) {
var selectedValue2 = isPlainObject(value) ? get(value, "value") : value;
if (isPlainObject(item2.props) && item2.props.value === selectedValue2) {
selectedLabel = item2.props.label || item2.props.children;
return true;
}
return false;
});
return isSelected;
}
}
var selectedValue = isPlainObject(value) ? get(value, "value") : value;
if (isPlainObject(item.props) && item.props.value === selectedValue) {
selectedLabel = item.props.label || item.props.children;
return true;
}
return false;
});
}
return selectedLabel;
};
var getMultipleTags = function getMultipleTags(values, keys) {
var _getKeyMapping4 = getKeyMapping(keys),
labelKey = _getKeyMapping4.labelKey,
valueKey = _getKeyMapping4.valueKey;
var tags = values.map(function (item) {
return {
label: get(item, labelKey) || item.toString(),
value: get(item, valueKey) || item
};
});
return tags;
};
var getSelectValueArr = function getSelectValueArr(values, activeValue, selected, valueType, keys, objVal) {
var _getKeyMapping5 = getKeyMapping(keys),
valueKey = _getKeyMapping5.valueKey;
values = Array.isArray(values) ? values : [];
if (Array.isArray(values)) {
var currentValues = _toConsumableArray(values);
var isObjectType = valueType === "object";
if (selected) {
currentValues = currentValues.filter(function (item) {
if (isObjectType) {
if (isPlainObject(activeValue)) {
return get(item, valueKey) !== get(activeValue, valueKey);
}
return get(item, valueKey) !== activeValue;
}
return item !== activeValue;
});
} else {
var item = isObjectType ? objVal : activeValue;
currentValues.push(item);
}
return currentValues;
}
};
var getSelectedOptions = function getSelectedOptions(value, multiple, valueType, keys, valueToOption, selectedValue) {
var _getKeyMapping6 = getKeyMapping(keys),
valueKey = _getKeyMapping6.valueKey;
var isObjectType = valueType === "object";
var tmpPropOptions = Object.values(valueToOption);
var currentSelectedOptions = [];
var currentOption;
var allSelectedValue;
if (multiple) {
var _tmpPropOptions$filte, _currentSelectedOptio, _currentSelectedOptio2;
currentSelectedOptions = isObjectType ? value : tmpPropOptions === null || tmpPropOptions === void 0 || (_tmpPropOptions$filte = tmpPropOptions.filter) === null || _tmpPropOptions$filte === void 0 ? void 0 : _tmpPropOptions$filte.call(tmpPropOptions, function (v) {
var _value$includes;
return (_value$includes = value.includes) === null || _value$includes === void 0 ? void 0 : _value$includes.call(value, v[valueKey]);
});
allSelectedValue = isObjectType ? currentSelectedOptions : (_currentSelectedOptio = currentSelectedOptions) === null || _currentSelectedOptio === void 0 ? void 0 : _currentSelectedOptio.map(function (v) {
return v[valueKey];
});
currentOption = isObjectType ? value.find(function (v) {
return v[valueKey] === selectedValue;
}) : (_currentSelectedOptio2 = currentSelectedOptions) === null || _currentSelectedOptio2 === void 0 ? void 0 : _currentSelectedOptio2.find(function (option) {
return option[valueKey] === selectedValue;
});
} else {
var _tmpPropOptions$filte2, _currentSelectedOptio3;
currentSelectedOptions = isObjectType ? [value] : (tmpPropOptions === null || tmpPropOptions === void 0 || (_tmpPropOptions$filte2 = tmpPropOptions.filter) === null || _tmpPropOptions$filte2 === void 0 ? void 0 : _tmpPropOptions$filte2.call(tmpPropOptions, function (v) {
return value === v[valueKey];
})) || [];
allSelectedValue = currentSelectedOptions;
currentOption = isObjectType ? value : (_currentSelectedOptio3 = currentSelectedOptions) === null || _currentSelectedOptio3 === void 0 ? void 0 : _currentSelectedOptio3.find(function (option) {
return option[valueKey] === selectedValue;
});
}
return {
currentSelectedOptions: currentSelectedOptions,
currentOption: currentOption,
allSelectedValue: allSelectedValue
};
};
export { Option as O, getSelectedOptions as a, getSelectValueArr as b, getValueToOption as c, getLabel as d, getMultipleTags as e, flattenOptions as f, getKeyMapping as g, isSelectOptionGroup as i, setValueToOptionFormOptionDom as s, useOptions as u };
//# sourceMappingURL=dep-80300655.js.map