@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
202 lines (201 loc) • 9.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _reactfastcompare = /*#__PURE__*/ _interop_require_default._(require("react-fast-compare"));
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var _pickerroller = /*#__PURE__*/ _interop_require_default._(require("./pickerroller"));
var _isempty = require("../../utils/is-empty");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
options: [],
defaultValue: [],
value: undefined,
renderLabel: function renderLabel(item) {
return item.label;
}
});
var InternalPickerView = function InternalPickerView(props, ref) {
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), options = _$_object_spread.options, _object_spread_defaultValue = _$_object_spread.defaultValue, defaultValue = _object_spread_defaultValue === void 0 ? [] : _object_spread_defaultValue, value = _$_object_spread.value, duration = _$_object_spread.duration, threeDimensional = _$_object_spread.threeDimensional, renderLabel = _$_object_spread.renderLabel, className = _$_object_spread.className, style = _$_object_spread.style, onChange = _$_object_spread.onChange;
var classPrefix = 'nut-pickerview';
var cls = (0, _classnames.default)(classPrefix, className);
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: value,
defaultValue: (0, _to_consumable_array._)(defaultValue),
finalValue: (0, _to_consumable_array._)(defaultValue)
}), 1), selectedValue = _usePropsValue[0];
var _useState = (0, _sliced_to_array._)((0, _react.useState)(selectedValue), 2), innerValue = _useState[0], setInnerValue = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), innerOptions = _useState1[0], setInnerOptions = _useState1[1];
var changeIndex = (0, _react.useRef)(0);
/**
* 数据类型：级联、多列
*/ var columnsType = (0, _react.useMemo)(function() {
var firstColumn = props.options[0] || [];
if (Array.isArray(firstColumn) && firstColumn.length > 0 && 'children' in firstColumn[0]) {
return 'cascade';
}
return 'multiple';
}, [
props.options
]);
var formatCascadeOptions = function formatCascadeOptions(options, value) {
var _loop = function _loop() {
var currentOptions = columnOptions.children;
formatted.push(currentOptions);
var currentValue = value === null || value === void 0 ? void 0 : value[columnIndex];
if (currentValue === 0) {
// 如果 currentValue 为 0，返回第一个 children
columnOptions = currentOptions[0];
} else if (currentValue) {
// 如果 currentValue 存在，查找匹配的项
var index = currentOptions.findIndex(function(columnItem) {
return columnItem.value === currentValue;
});
columnOptions = currentOptions[index === -1 ? 0 : index] // 如果未找到，默认取第一个
;
} else {
return "break" // 如果 currentValue 不存在，终止循环
;
}
columnIndex++;
};
if (!options.length) return [] // 如果 options 为空，直接返回空数组
;
var formatted = [];
var columnOptions = {
label: '',
value: '',
children: options
};
var columnIndex = 0;
while(columnOptions && columnOptions.children){
var _ret = _loop();
if (_ret === "break") break;
}
return formatted;
};
var formatOptions = (0, _react.useMemo)(function() {
if (columnsType === 'cascade') {
var _props_options;
return formatCascadeOptions(props === null || props === void 0 ? void 0 : (_props_options = props.options) === null || _props_options === void 0 ? void 0 : _props_options[0], innerValue);
}
return props.options;
}, [
innerValue,
options,
columnsType
]);
(0, _react.useEffect)(function() {
var options = props.options;
if (Array.isArray(options) && options.length && options !== innerOptions) {
setInnerOptions(formatOptions);
}
}, [
props.options,
innerValue
]);
(0, _react.useEffect)(function() {
if (selectedValue !== innerValue) {
setInnerValue(selectedValue);
}
}, [
selectedValue
]);
var handleSelect = (0, _react.useCallback)(function(option, index) {
var newValue = option === null || option === void 0 ? void 0 : option.value;
if ((0, _isempty.isEmpty)(newValue) || innerValue[index] === newValue) return;
changeIndex.current = index;
if (columnsType === 'multiple') {
setInnerValue(function(prev) {
var next = (0, _to_consumable_array._)(prev);
next[index] = newValue;
return next;
});
} else {
var _option_children, _option_children1, _props_options;
var startIndex = index;
var values = [];
values[index] = option.value;
while(option === null || option === void 0 ? void 0 : (_option_children = option.children) === null || _option_children === void 0 ? void 0 : _option_children[0]){
values[index + 1] = option.children[0].value;
index++;
option = option.children[0];
}
// 当前改变列的下一列 children 值为空
if (option === null || option === void 0 ? void 0 : (_option_children1 = option.children) === null || _option_children1 === void 0 ? void 0 : _option_children1.length) {
values[index + 1] = '';
}
var combineResult = (0, _to_consumable_array._)(innerValue.slice(0, startIndex)).concat((0, _to_consumable_array._)(values.splice(startIndex)));
setInnerValue((0, _to_consumable_array._)(combineResult));
var optionFirst = props === null || props === void 0 ? void 0 : (_props_options = props.options) === null || _props_options === void 0 ? void 0 : _props_options[0];
if (!(0, _reactfastcompare.default)(formatCascadeOptions(optionFirst, combineResult), innerOptions)) {
setInnerOptions(formatCascadeOptions(optionFirst, combineResult));
}
}
}, [
innerValue,
props.options,
columnsType,
innerOptions
]);
var selectedOptions = (0, _react.useMemo)(function() {
return innerOptions.map(function(columnOptions, index) {
var selectedOption = columnOptions.find(function(item) {
return item.value === innerValue[index];
});
return selectedOption;
// return selectedOption || columnOptions[0]
}).filter(Boolean);
}, [
innerOptions,
innerValue
]);
(0, _react.useEffect)(function() {
onChange === null || onChange === void 0 ? void 0 : onChange({
value: innerValue,
index: changeIndex.current,
selectedOptions: selectedOptions
});
}, [
innerValue,
selectedOptions,
onChange
]);
return /*#__PURE__*/ _react.default.createElement("div", {
className: cls,
style: style
}, innerOptions.map(function(item, index) {
var _props_setRefs;
return /*#__PURE__*/ _react.default.createElement(_pickerroller.default, {
ref: props === null || props === void 0 ? void 0 : (_props_setRefs = props.setRefs) === null || _props_setRefs === void 0 ? void 0 : _props_setRefs.call(props, index),
key: index,
keyIndex: index,
value: innerValue[index],
options: item,
renderLabel: renderLabel,
onSelect: handleSelect,
duration: duration,
threeDimensional: threeDimensional
});
}), (innerOptions === null || innerOptions === void 0 ? void 0 : innerOptions.length) ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-pickerview-mask"
}), /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-pickerview-indicator"
})) : null);
};
var PickerView = /*#__PURE__*/ _react.default.forwardRef(InternalPickerView);
var _default = PickerView;