@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
190 lines (189 loc) • 8.62 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import { View } from "@tarojs/components";
import isEqual from "react-fast-compare";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
import PickerRoller from "./pickerroller";
import { isEmpty } from "../../utils/is-empty";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
options: [],
defaultValue: [],
value: undefined,
renderLabel: function(item) {
return item.label;
}
});
var InternalPickerView = function(props, ref) {
var _$_object_spread = _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 = classNames(classPrefix, className);
var _usePropsValue = _sliced_to_array(usePropsValue({
value: value,
defaultValue: _to_consumable_array(defaultValue),
finalValue: _to_consumable_array(defaultValue)
}), 1), selectedValue = _usePropsValue[0];
var _useState = _sliced_to_array(useState(selectedValue), 2), innerValue = _useState[0], setInnerValue = _useState[1];
var _useState1 = _sliced_to_array(useState([]), 2), innerOptions = _useState1[0], setInnerOptions = _useState1[1];
var changeIndex = useRef(0);
/**
* 数据类型：级联、多列
*/ var columnsType = 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(options, value) {
var _loop = function() {
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 = 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
]);
useEffect(function() {
var options = props.options;
if (Array.isArray(options) && options.length && options !== innerOptions) {
setInnerOptions(formatOptions);
}
}, [
props.options,
innerValue
]);
useEffect(function() {
if (selectedValue !== innerValue) {
setInnerValue(selectedValue);
}
}, [
selectedValue
]);
var handleSelect = useCallback(function(option, index) {
var newValue = option === null || option === void 0 ? void 0 : option.value;
if (isEmpty(newValue) || innerValue[index] === newValue) return;
changeIndex.current = index;
if (columnsType === 'multiple') {
setInnerValue(function(prev) {
var next = _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 = _to_consumable_array(innerValue.slice(0, startIndex)).concat(_to_consumable_array(values.splice(startIndex)));
setInnerValue(_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 (!isEqual(formatCascadeOptions(optionFirst, combineResult), innerOptions)) {
setInnerOptions(formatCascadeOptions(optionFirst, combineResult));
}
}
}, [
innerValue,
props.options,
columnsType,
innerOptions
]);
var selectedOptions = 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
]);
useEffect(function() {
onChange === null || onChange === void 0 ? void 0 : onChange({
value: innerValue,
index: changeIndex.current,
selectedOptions: selectedOptions
});
}, [
innerValue,
selectedOptions,
onChange
]);
return /*#__PURE__*/ React.createElement(View, {
className: cls,
style: style
}, innerOptions.map(function(item, index) {
var _props_setRefs;
return /*#__PURE__*/ React.createElement(PickerRoller, {
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.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
className: "nut-pickerview-mask"
}), /*#__PURE__*/ React.createElement(View, {
className: "nut-pickerview-indicator"
})) : null);
};
var PickerView = /*#__PURE__*/ React.forwardRef(InternalPickerView);
export default PickerView;