test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
869 lines (868 loc) • 36.9 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["children", "visible", "title", "titles", "options", "options2", "defaultValue", "defaultValue2", "className", "style", "borderRadius", "isTabs", "tabsTitle", "cellHeight", "threeDimensional", "duration", "confirmText", "cancelText", "withSeparator", "tabsWithSeparator", "limitNumber", "icon", "activeIcon", "indeterminateIcon", "maxHeight", "showSelectAll", "disabled", "loading", "option", "onConfirm", "onClose", "afterClose", "onChange"];
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
import React__default, { useState, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
import classNames from "classnames";
import Popup from "./Popup.js";
import Tabs from "./Tabs.js";
import { u as useTouch } from "./use-touch.js";
import { useConfig } from "./ConfigProvider.js";
import { u as usePropsValue } from "./use-props-value.js";
import { C as ComponentDefaults } from "./typings.js";
import Checkbox from "./Checkbox.js";
import { L as Loading } from "./loading2.js";
import "./index2.js";
var InternalPickerPanel = function InternalPickerPanel2(props, ref) {
var _props$keyIndex = props.keyIndex, keyIndex = _props$keyIndex === void 0 ? 0 : _props$keyIndex, defaultValue = props.defaultValue, _props$options = props.options, options = _props$options === void 0 ? [] : _props$options, _props$threeDimension = props.threeDimensional, threeDimensional = _props$threeDimension === void 0 ? true : _props$threeDimension, _props$duration = props.duration, duration = _props$duration === void 0 ? 1e3 : _props$duration, _props$withSeparator = props.withSeparator, withSeparator = _props$withSeparator === void 0 ? false : _props$withSeparator, _props$cellHeight = props.cellHeight, cellHeight = _props$cellHeight === void 0 ? 50 : _props$cellHeight, _props$tabValue = props.tabValue, tabValue = _props$tabValue === void 0 ? 0 : _props$tabValue, chooseItem = props.chooseItem, option = props.option;
var touch = useTouch();
var DEFAULT_DURATION = 200;
var INERTIA_TIME = 300;
var INERTIA_DISTANCE = 15;
var _useState = useState(1), _useState2 = _slicedToArray(_useState, 2), currIndex = _useState2[0], setCurrIndex = _useState2[1];
var lineSpacing = cellHeight;
var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), touchTime = _useState4[0], setTouchTime = _useState4[1];
var _useState5 = useState("0deg"), _useState6 = _slicedToArray(_useState5, 2), touchDeg = _useState6[0], setTouchDeg = _useState6[1];
var rotation = 20;
var moving = useRef(false);
var timer;
var rollerRef = useRef(null);
var PickerPanelRef = useRef(null);
var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), startTime = _useState8[0], setStartTime = _useState8[1];
var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), startY = _useState10[0], setStartY = _useState10[1];
var transformY = useRef(0);
var _useState11 = useState(0), _useState12 = _slicedToArray(_useState11, 2), scrollDistance = _useState12[0], setScrollDistance = _useState12[1];
var isHidden = function isHidden2(index) {
if (index >= currIndex + 8 || index <= currIndex - 8) {
return true;
}
return false;
};
var setTransform = function setTransform2() {
var translateY = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
var type = arguments.length > 1 ? arguments[1] : void 0;
var time = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : DEFAULT_DURATION;
var deg = arguments.length > 3 ? arguments[3] : void 0;
var nTime = time;
if (type !== "end") {
nTime = 0;
}
setTouchTime(nTime);
setTouchDeg(deg);
setScrollDistance(translateY);
};
var setMove = function setMove2(move, type, time) {
var updateMove = move + transformY.current;
if (type === "end") {
if (updateMove > 0) {
updateMove = 0;
}
if (updateMove < -(options.length - 1) * lineSpacing) {
updateMove = -(options.length - 1) * lineSpacing;
}
var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
setTransform(endMove, type, time, deg);
setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
} else {
var _deg = 0;
var currentDeg = (-updateMove / lineSpacing + 1) * rotation;
var maxDeg = (options.length + 1) * rotation;
var minDeg = 0;
_deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
if (minDeg < _deg && _deg < maxDeg) {
setTransform(updateMove, "", void 0, "".concat(_deg, "deg"));
setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
}
}
};
var setChooseValue = function setChooseValue2(move) {
chooseItem && chooseItem(options === null || options === void 0 ? void 0 : options[Math.round(-move / lineSpacing)], keyIndex, tabValue);
};
var touchStart = function touchStart2(event) {
touch.start(event);
setStartY(touch.deltaY);
setStartTime(Date.now());
transformY.current = scrollDistance;
};
var touchMove = function touchMove2(event) {
touch.move(event);
if (touch.isVertical) {
moving.current = true;
preventDefault(event, true);
}
var move = touch.deltaY - startY;
setMove(move);
};
var touchEnd = function touchEnd2(event) {
if (!moving.current)
return;
var move = touch.deltaY - startY;
var moveTime = Date.now() - startTime;
if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
var distance = momentum(move, moveTime);
setMove(distance, "end", +duration);
} else {
setMove(move, "end");
}
setTimeout(function() {
touch.reset();
}, 0);
};
var momentum = function momentum2(distance, duration2) {
var nDistance = distance;
var speed = Math.abs(nDistance / duration2);
nDistance = speed / 3e-3 * (nDistance < 0 ? -1 : 1);
return nDistance;
};
var modifyStatus = function modifyStatus2(type, val) {
var value = val || defaultValue;
var index = -1;
if (value) {
options.some(function(item, idx) {
if (item.value === value) {
index = idx;
return true;
}
return false;
});
} else {
options.forEach(function(item, i) {
if (item.value === defaultValue) {
index = i;
}
});
}
setCurrIndex(index === -1 ? 1 : index + 1);
var move = index === -1 ? 0 : index * lineSpacing;
type && setChooseValue(-move);
setMove(-move);
};
var stopMomentum = function stopMomentum2() {
moving.current = false;
setTouchTime(0);
setChooseValue(scrollDistance);
};
var preventDefault = function preventDefault2(event, isStopPropagation) {
if (typeof event.cancelable !== "boolean" || event.cancelable) {
event.preventDefault();
}
if (isStopPropagation) {
event.stopPropagation();
}
};
var touchRollerStyle = function touchRollerStyle2() {
return {
transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
transform: "rotate3d(1, 0, 0, ".concat(touchDeg, ")"),
height: cellHeight + "px"
};
};
var touchTileStyle = function touchTileStyle2() {
return {
transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
transform: "translate3d(0, ".concat(scrollDistance, "px, 0)"),
height: cellHeight + "px"
};
};
useEffect(function() {
setScrollDistance(0);
transformY.current = 0;
modifyStatus(false);
return function() {
clearTimeout(timer);
};
}, [options]);
useImperativeHandle(ref, function() {
return {
stopMomentum,
moving: moving.current
};
});
return React__default.createElement("div", {
className: "nut-picker-list",
ref: PickerPanelRef,
onTouchStart: touchStart,
onTouchMove: touchMove,
onTouchEnd: touchEnd
}, React__default.createElement("div", {
className: "nut-picker-roller",
ref: rollerRef,
style: threeDimensional ? touchRollerStyle() : touchTileStyle(),
onTransitionEnd: stopMomentum
}, threeDimensional && options.map(function(item, index) {
return React__default.createElement("div", {
className: "nut-picker-roller-item ".concat(isHidden(index + 1) && "nut-picker-roller-item-hidden", " ").concat(currIndex === index + 1 ? "nut-picker-roller-item-active" : ""),
style: {
height: cellHeight + "px",
lineHeight: cellHeight + "px",
transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
},
key: item.value ? item.value : index
}, typeof option === "function" ? option(item, currIndex === index + 1) : React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
}), !threeDimensional && options.map(function(item, index) {
return React__default.createElement("div", {
className: "nut-picker-roller-item-title ".concat(currIndex === index + 1 ? "nut-picker-roller-item-active" : ""),
key: item.value ? item.value : index,
style: {
height: cellHeight + "px",
lineHeight: cellHeight + "px"
}
}, typeof option === "function" ? option(item, currIndex === index + 1) : React__default.createElement(React__default.Fragment, null, item.text ? item.text : item));
})), React__default.createElement("div", {
className: "nut-picker-mask"
}), React__default.createElement("div", {
style: {
height: cellHeight + "px"
},
className: "nut-picker-indicator ".concat(withSeparator ? "nut-picker-indicator-with-separato" : "")
}));
};
var PickerPanel = React__default.forwardRef(InternalPickerPanel);
function useRefs() {
var refs = React__default.useRef([]);
var setRefs = React__default.useCallback(function(index) {
return function(el) {
if (el)
refs.current[index] = el;
};
}, []);
var reset = React__default.useCallback(function() {
refs.current = [];
}, []);
return [refs.current, setRefs, reset];
}
var defaultProps$1 = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
columns: 1,
limitNumber: 1,
icon: null,
activeIcon: null,
indeterminateIcon: null,
activeTitleClass: "",
inactiveTitleClass: "",
maxHeight: "85vh",
showSelectAll: true,
onChange: function onChange(value) {
return void 0;
}
});
var PickerItem = forwardRef(function(props, ref) {
var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props), className = _defaultProps$1$props.className, options = _defaultProps$1$props.options, value = _defaultProps$1$props.value, columns = _defaultProps$1$props.columns, icon = _defaultProps$1$props.icon, activeIcon = _defaultProps$1$props.activeIcon, indeterminateIcon = _defaultProps$1$props.indeterminateIcon, onChange2 = _defaultProps$1$props.onChange, activeTitleClass = _defaultProps$1$props.activeTitleClass, inactiveTitleClass = _defaultProps$1$props.inactiveTitleClass, activeColor = _defaultProps$1$props.activeColor, limitNumber = _defaultProps$1$props.limitNumber, maxHeight = _defaultProps$1$props.maxHeight, showSelectAll = _defaultProps$1$props.showSelectAll;
var _useState13 = useState([]), _useState14 = _slicedToArray(_useState13, 2), _value = _useState14[0], setValue = _useState14[1];
var init = function init2() {
var valueC = value || [];
if (limitNumber === 1 && value !== void 0) {
valueC = [value];
}
if (JSON.stringify(_value) !== JSON.stringify(valueC)) {
setValue(valueC);
}
};
useEffect(function() {
init();
}, [value]);
var getIconCName = function getIconCName2(optionVal, value2) {
var _classNames;
var valueC = value2 || [];
if (limitNumber === 1 && value2 !== void 0) {
valueC = [value2];
}
return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, valueC.includes(optionVal)), _defineProperty(_classNames, inactiveTitleClass, !valueC.includes(optionVal)), _classNames));
};
var handleClick = function handleClick2(item) {
if (item.disabled)
return;
if (limitNumber === 1) {
setValue([item.value]);
onChange2 && onChange2(item);
} else {
var valueC = JSON.parse(JSON.stringify(_value));
var existIndex = valueC.findIndex(function(v) {
return item.value == v;
});
if (existIndex !== -1) {
valueC.splice(existIndex, 1);
} else {
valueC.push(item.value);
}
setValue(valueC);
onChange2 && onChange2(valueC);
}
};
var micRef = useRef(null);
var _useState15 = useState(false), _useState16 = _slicedToArray(_useState15, 2), indeterminate = _useState16[0], setIndeterminate = _useState16[1];
var _useState17 = useState(false), _useState18 = _slicedToArray(_useState17, 2), selectAll = _useState18[0], setSelectAll = _useState18[1];
useEffect(function() {
if (limitNumber > 1) {
setSelectAll(_value.length > 0);
setIndeterminate(_value.length > 0 && _value.length !== options.filter(function(item) {
return !item.disabled || _value.includes(item.value);
}).length);
}
}, [_value]);
var onSelectAll = function onSelectAll2() {
var valueC = JSON.parse(JSON.stringify(_value));
if (selectAll && !indeterminate) {
valueC = _value.filter(function(item) {
return options.find(function(item2) {
return item2.value == item;
}).disabled;
});
} else {
options.forEach(function(item) {
if (!valueC.includes(item.value) && !item.disabled) {
valueC.push(item.value);
}
});
}
setValue(valueC);
onChange2 && onChange2(valueC);
};
return React__default.createElement("div", {
className: "nut-picker-item-container",
ref: micRef
}, React__default.createElement("div", {
className: classNames(className)
}, React__default.createElement("div", {
className: "nut-picker-item__content",
style: {
maxHeight: "calc(".concat(maxHeight, " - 50px)")
}
}, limitNumber > 1 && showSelectAll ? React__default.createElement("div", {
onClick: onSelectAll,
className: "nut-picker-item__content--multi"
}, React__default.createElement("div", {
className: "nut-picker-item__content--multi-all-text"
}, "全选"), React__default.createElement(Checkbox, {
indeterminateIcon,
activeIcon,
icon,
style: {
"--nutui-brand-color": activeColor
},
indeterminate,
checked: selectAll
})) : React__default.createElement(React__default.Fragment, null), options === null || options === void 0 ? void 0 : options.map(function(item) {
return React__default.createElement("div", {
className: "nut-picker-item__option ".concat(classNames({
active: _value.includes(item.value),
disabled: item.disabled
})),
key: item.text,
style: {
flexBasis: "".concat(100 / columns, "%")
},
onClick: function onClick() {
handleClick(item);
}
}, React__default.createElement("div", {
className: getIconCName(item.value, value),
style: {
color: "".concat(_value.includes(item.value) ? activeColor : "")
}
}, React__default.createElement("div", null, item.text), item.description ? React__default.createElement("div", {
className: "nut-picker-item__option--description"
}, item.description) : React__default.createElement(React__default.Fragment, null)), limitNumber === 1 ? _value.includes(item.value) ? React__default.createElement(Checkbox, {
activeIcon,
icon,
style: {
"--nutui-brand-color": activeColor
},
checked: true
}) : null : React__default.createElement(Checkbox, {
activeIcon,
icon,
style: {
"--nutui-brand-color": activeColor
},
disabled: item.disabled,
checked: _value.includes(item.value)
}));
}))));
});
PickerItem.defaultProps = defaultProps$1;
PickerItem.displayName = "PickerItem";
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
title: "",
titles: [],
options: [],
options2: [],
borderRadius: 8,
value: [],
isTabs: false,
tabsTitle: [],
defaultValue: [],
defaultValue2: [],
threeDimensional: false,
duration: 1e3,
cellHeight: 50,
withSeparator: false,
tabsWithSeparator: [false, false],
limitNumber: 1,
icon: null,
activeIcon: null,
indeterminateIcon: null,
maxHeight: "85vh",
showSelectAll: true,
disabled: false,
loading: false
});
var InternalPicker = function InternalPicker2(props, ref) {
var _useConfig = useConfig(), locale = _useConfig.locale;
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, visible = _defaultProps$props.visible, title = _defaultProps$props.title, titles = _defaultProps$props.titles, _defaultProps$props$o = _defaultProps$props.options, options = _defaultProps$props$o === void 0 ? [] : _defaultProps$props$o, _defaultProps$props$o2 = _defaultProps$props.options2, options2 = _defaultProps$props$o2 === void 0 ? [] : _defaultProps$props$o2, _defaultProps$props$d = _defaultProps$props.defaultValue, defaultValue = _defaultProps$props$d === void 0 ? [] : _defaultProps$props$d, _defaultProps$props$d2 = _defaultProps$props.defaultValue2, defaultValue2 = _defaultProps$props$d2 === void 0 ? [] : _defaultProps$props$d2, className = _defaultProps$props.className, style = _defaultProps$props.style, borderRadius = _defaultProps$props.borderRadius, isTabs = _defaultProps$props.isTabs, tabsTitle = _defaultProps$props.tabsTitle, cellHeight = _defaultProps$props.cellHeight, threeDimensional = _defaultProps$props.threeDimensional, duration = _defaultProps$props.duration, confirmText = _defaultProps$props.confirmText, cancelText = _defaultProps$props.cancelText, withSeparator = _defaultProps$props.withSeparator, tabsWithSeparator = _defaultProps$props.tabsWithSeparator, limitNumber = _defaultProps$props.limitNumber, icon = _defaultProps$props.icon, activeIcon = _defaultProps$props.activeIcon, indeterminateIcon = _defaultProps$props.indeterminateIcon, maxHeight = _defaultProps$props.maxHeight, showSelectAll = _defaultProps$props.showSelectAll, disabled = _defaultProps$props.disabled, loading = _defaultProps$props.loading, option = _defaultProps$props.option, onConfirm = _defaultProps$props.onConfirm, onClose = _defaultProps$props.onClose, afterClose = _defaultProps$props.afterClose, onChange2 = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
var classPrefix = "nut-picker";
var classes = classNames(classPrefix, className);
var _usePropsValue = usePropsValue({
value: props.value,
defaultValue: _toConsumableArray(defaultValue),
finalValue: _toConsumableArray(defaultValue),
onChange: function onChange3(val) {
var _props$onConfirm;
(_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 ? void 0 : _props$onConfirm.call(props, setSelectedOptions(), val);
}
}), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectedValue = _usePropsValue2[0], setSelectedValue = _usePropsValue2[1];
var _usePropsValue3 = usePropsValue({
value: props.value,
defaultValue: _toConsumableArray(defaultValue2),
finalValue: _toConsumableArray(defaultValue2),
onChange: function onChange3(val) {
var _props$onConfirm2;
(_props$onConfirm2 = props.onConfirm) === null || _props$onConfirm2 === void 0 ? void 0 : _props$onConfirm2.call(props, setSelectedOptions2(), val);
}
}), _usePropsValue4 = _slicedToArray(_usePropsValue3, 2), selectedValue2 = _usePropsValue4[0], setSelectedValue2 = _usePropsValue4[1];
var _usePropsValue5 = usePropsValue({
value: props.visible,
defaultValue: false,
finalValue: false
}), _usePropsValue6 = _slicedToArray(_usePropsValue5, 2), innerVisible = _usePropsValue6[0], setInnerVisible = _usePropsValue6[1];
var _useState19 = useState(selectedValue), _useState20 = _slicedToArray(_useState19, 2), innerValue = _useState20[0], setInnerValue = _useState20[1];
var _useState21 = useState(selectedValue2), _useState22 = _slicedToArray(_useState21, 2), innerValue2 = _useState22[0], setInnerValue2 = _useState22[1];
var _useState23 = useState(0), _useState24 = _slicedToArray(_useState23, 2), columnIndex = _useState24[0], setColumnIndex = _useState24[1];
var pickerRef = useRef(null);
var _useRefs = useRefs(), _useRefs2 = _slicedToArray(_useRefs, 2), refs = _useRefs2[0], setRefs = _useRefs2[1];
var _useState25 = useState([]), _useState26 = _slicedToArray(_useState25, 2), columnsList = _useState26[0], setColumnsList = _useState26[1];
var _useState27 = useState([]), _useState28 = _slicedToArray(_useState27, 2), columnsList2 = _useState28[0], setColumnsList2 = _useState28[1];
var isConfirmEvent = useRef(false);
var actions = {
open: function open() {
setInnerVisible(true);
},
close: function close() {
setInnerVisible(false);
}
};
useImperativeHandle(ref, function() {
return actions;
});
var formatCascade = function formatCascade2(columns, values) {
var formatted = [];
var columnOptions = {
text: "",
value: "",
children: columns
};
var columnIndex2 = 0;
var _loop = function _loop2() {
var options3 = columnOptions.children;
var value = values[columnIndex2];
var index = options3.findIndex(function(columnItem) {
return columnItem.value === value;
});
if (index === -1)
index = 0;
columnOptions = columnOptions.children[index];
columnIndex2++;
formatted.push(options3);
};
while (columnOptions && columnOptions.children) {
_loop();
}
return formatted;
};
var columnsType = function columnsType3() {
var firstColumn = options[0];
if (firstColumn) {
if (Array.isArray(firstColumn)) {
return "multiple";
}
if ("children" in firstColumn) {
return "cascade";
}
}
return "single";
};
var columnsType2 = function columnsType22(options3) {
var firstColumn = options3[0];
if (firstColumn) {
if (Array.isArray(firstColumn)) {
return "multiple";
}
if ("children" in firstColumn) {
return "cascade";
}
}
return "single";
};
var normalListData = function normalListData3(innerValue3) {
var type = columnsType();
switch (type) {
case "multiple":
return options;
case "cascade":
return formatCascade(options, innerValue3);
default:
return [options];
}
};
var normalListData2 = function normalListData22(innerValue3, options3) {
var type = columnsType2(options3);
switch (type) {
case "multiple":
return options3;
case "cascade":
return formatCascade(options3, innerValue3);
default:
return [options3];
}
};
var init = function init2() {
if (!isTabs) {
var normalData = normalListData(innerValue);
setColumnsList(normalData);
var data = [];
normalData.length > 0 && normalData.map(function(item) {
if (limitNumber === 1) {
item[0] && data.push(item[0].value);
}
return item;
});
if (!innerValue.length && innerValue.length === 0) {
setInnerValue([].concat(data));
}
} else {
var normalData2 = options2.map(function(options3) {
return normalListData2(innerValue, options3);
});
setColumnsList2(normalData2);
var data2 = [];
normalData2.length > 0 && normalData2.map(function(item, index) {
data2.push([]);
item.length && item.map(function(item2) {
item2[0] && data2[index].push(item2[0].value);
});
});
if (!innerValue2.length && innerValue2.length === 0) {
setInnerValue2([].concat(data2));
}
}
};
useEffect(function() {
if (innerVisible) {
setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
setInnerValue2(innerValue2 !== selectedValue2 ? selectedValue2 : innerValue2);
}
}, [innerVisible]);
useEffect(function() {
if (innerVisible) {
init();
}
}, [options, innerVisible]);
useEffect(function() {
if (innerVisible) {
init();
}
}, [options2, innerVisible]);
useEffect(function() {
if (isTabs)
return;
onChange2 && onChange2(setSelectedOptions(), innerValue, columnIndex, +tabValue);
}, [innerValue, columnsList]);
useEffect(function() {
if (isTabs) {
onChange2 && onChange2(setSelectedOptions2(), innerValue2, columnIndex, +tabValue);
}
}, [innerValue2, columnsList2]);
var setSelectedOptions = function setSelectedOptions3() {
var options3 = [];
var currOptions = [];
columnsList.forEach(function(columnOptions, index) {
if (limitNumber === 1) {
currOptions = columnOptions.filter(function(item) {
return item.value === innerValue[index];
});
} else {
currOptions = innerValue.map(function(item) {
return columnOptions.find(function(item2) {
return item2.value === item;
});
});
}
if (currOptions[0]) {
options3.push(currOptions[0]);
} else {
columnOptions[0] && options3.push(columnOptions[0]);
}
});
return limitNumber === 1 ? options3 : currOptions;
};
var setSelectedOptions2 = function setSelectedOptions22() {
var options3 = [];
columnsList2.forEach(function(columnOptions, index) {
options3.push([]);
var currOptions = [];
columnOptions.forEach(function(opt, oIndex) {
currOptions = opt.filter(function(item) {
return item.value === innerValue2[index][oIndex];
});
if (currOptions[0]) {
options3[index].push(currOptions[0]);
} else {
columnOptions[0] && options3[index].push(columnOptions[0]);
}
});
});
return options3;
};
var _chooseItem = function chooseItem(columnOptions, columnIndex2) {
var values = [];
var start = columnIndex2;
if (columnOptions && Object.keys(columnOptions).length) {
if (values[columnIndex2] !== columnOptions.value) {
if (columnsType() === "cascade") {
var _columnOptions2, _columnOptions2$child;
values[columnIndex2] = columnOptions.value || "";
while ((_columnOptions = columnOptions) !== null && _columnOptions !== void 0 && (_columnOptions$childr = _columnOptions.children) !== null && _columnOptions$childr !== void 0 && _columnOptions$childr[0]) {
var _columnOptions, _columnOptions$childr;
values[columnIndex2 + 1] = columnOptions.children[0].value;
columnIndex2++;
columnOptions = columnOptions.children[0];
}
if ((_columnOptions2 = columnOptions) !== null && _columnOptions2 !== void 0 && (_columnOptions2$child = _columnOptions2.children) !== null && _columnOptions2$child !== void 0 && _columnOptions2$child.length) {
values[columnIndex2 + 1] = "";
}
var combineResult = [].concat(_toConsumableArray(innerValue.slice(0, start)), _toConsumableArray(values.splice(start)));
setInnerValue(combineResult);
setColumnsList(normalListData(combineResult));
} else {
setInnerValue(function(data) {
var cdata = _toConsumableArray(data);
cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
return cdata;
});
}
setColumnIndex(columnIndex2);
}
}
};
var chooseItem2 = function chooseItem22(columnOptions, columnIndex2, tabValue2) {
var values = [];
var start = columnIndex2;
var innerValue3 = JSON.parse(JSON.stringify(innerValue2[+tabValue2]));
if (columnOptions && Object.keys(columnOptions).length) {
if (values[columnIndex2] !== columnOptions.value) {
if (columnsType2(options2[+tabValue2]) === "cascade") {
var _columnOptions4, _columnOptions4$child;
values[columnIndex2] = columnOptions.value || "";
while ((_columnOptions3 = columnOptions) !== null && _columnOptions3 !== void 0 && (_columnOptions3$child = _columnOptions3.children) !== null && _columnOptions3$child !== void 0 && _columnOptions3$child[0]) {
var _columnOptions3, _columnOptions3$child;
values[columnIndex2 + 1] = columnOptions.children[0].value;
columnIndex2++;
columnOptions = columnOptions.children[0];
}
if ((_columnOptions4 = columnOptions) !== null && _columnOptions4 !== void 0 && (_columnOptions4$child = _columnOptions4.children) !== null && _columnOptions4$child !== void 0 && _columnOptions4$child.length) {
values[columnIndex2 + 1] = "";
}
var combineResult = [].concat(_toConsumableArray(innerValue3.slice(0, start)), _toConsumableArray(values.splice(start)));
var innerValue2C = JSON.parse(JSON.stringify(innerValue2));
innerValue2[+tabValue2] = combineResult;
setInnerValue2(innerValue2C);
var columnsList2C = JSON.parse(JSON.stringify(columnsList2));
columnsList2C[+tabValue2] = normalListData2(combineResult, options2[+tabValue2]);
setColumnsList2(columnsList2C);
} else {
setInnerValue2(function(data) {
var cdata = JSON.parse(JSON.stringify(_toConsumableArray(data)));
if (cdata[+tabValue2] && cdata[+tabValue2][columnIndex2]) {
cdata[+tabValue2][columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
}
return cdata;
});
}
setColumnIndex(columnIndex2);
}
}
};
var confirm = function confirm2() {
if (isTabs && +tabValue + 1 < columnsList2.length) {
setTabValue(+tabValue + 1);
return;
}
var moving = false;
refs.forEach(function(ref2) {
if (ref2.moving)
moving = true;
ref2.stopMomentum();
});
if (moving) {
isConfirmEvent.current = true;
} else {
if (!isTabs) {
setSelectedValue(innerValue);
} else {
setSelectedValue2(innerValue2);
}
closePicker();
}
setTimeout(function() {
isConfirmEvent.current = false;
}, 0);
};
var closePicker = function closePicker2() {
setInnerVisible(false);
if (!isTabs) {
onClose && onClose(setSelectedOptions(), innerValue);
afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
} else {
onClose && onClose(setSelectedOptions2(), innerValue2);
afterClose && afterClose(setSelectedOptions2(), innerValue2, pickerRef);
}
};
var renderTitleBar = function renderTitleBar2() {
return React__default.createElement("div", {
className: "".concat(classPrefix, "__control")
}, React__default.createElement("span", {
className: "".concat(classPrefix, "__cancel-btn"),
onClick: function onClick(e) {
e.stopPropagation();
closePicker();
}
}, cancelText || locale.cancel), React__default.createElement("div", {
className: "".concat(classPrefix, "__title")
}, titles[+tabValue] || title || ""), React__default.createElement("span", {
className: "".concat(classPrefix, "__confirm-btn"),
onClick: function onClick(e) {
e.stopPropagation();
confirm();
}
}, isTabs && +tabValue + 1 < columnsList2.length ? locale.next : confirmText || locale.confirm));
};
var onItemChange = function onItemChange2(value) {
setInnerValue(value);
};
var _useState29 = useState(0), _useState30 = _slicedToArray(_useState29, 2), tabValue = _useState30[0], setTabValue = _useState30[1];
return React__default.createElement(React__default.Fragment, null, typeof children === "function" && children(selectedValue), React__default.createElement(Popup, {
style: {
"--nutui-popup-border-radius": typeof borderRadius === "number" ? borderRadius + "px" : borderRadius
},
visible: innerVisible,
position: "bottom",
round: true,
afterClose: function afterClose2() {
closePicker();
}
}, React__default.createElement("div", _objectSpread({
className: classes,
style
}, rest), renderTitleBar(), typeof children !== "function" && children, limitNumber === 1 ? (columnsList2 === null || columnsList2 === void 0 ? void 0 : columnsList2.length) > 1 ? React__default.createElement(Tabs, {
style: {
"--nutui-tabs-titles-padding": 0,
"--nutui-tabpane-padding": 0
},
align: "left",
value: tabValue,
onChange: function onChange3(value) {
setTabValue(value);
}
}, columnsList2.map(function(columnsList3, cindex) {
return React__default.createElement(Tabs.TabPane, {
key: cindex,
title: tabsTitle[cindex]
}, React__default.createElement("div", {
className: "".concat(classPrefix, "__panel"),
ref: pickerRef
}, loading && React__default.createElement("div", {
className: "".concat(classPrefix, "__loading--modal")
}, React__default.createElement(Loading, {
className: "".concat(classPrefix, "__loading")
})), columnsList3 === null || columnsList3 === void 0 ? void 0 : columnsList3.map(function(item, index) {
var _innerValue2$cindex;
return React__default.createElement(PickerPanel, {
ref: setRefs(index + (columnsList2[cindex - 1] ? columnsList2[cindex - 1].length : 0)),
withSeparator: tabsWithSeparator[cindex],
defaultValue: (_innerValue2$cindex = innerValue2[cindex]) === null || _innerValue2$cindex === void 0 ? void 0 : _innerValue2$cindex[index],
options: item,
option,
cellHeight,
tabValue: cindex,
threeDimensional,
chooseItem: function chooseItem(value, index2) {
var tabValue2 = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
return chooseItem2(value, index2, tabValue2);
},
duration,
key: index,
keyIndex: index
});
})));
})) : React__default.createElement("div", {
className: "".concat(classPrefix, "__panel"),
ref: pickerRef
}, loading && React__default.createElement("div", {
className: "".concat(classPrefix, "__loading--modal")
}, React__default.createElement(Loading, {
className: "".concat(classPrefix, "__loading")
})), columnsList === null || columnsList === void 0 ? void 0 : columnsList.map(function(item, index) {
return React__default.createElement(PickerPanel, {
ref: setRefs(index),
withSeparator,
defaultValue: innerValue === null || innerValue === void 0 ? void 0 : innerValue[index],
cellHeight,
options: item,
option,
threeDimensional,
chooseItem: function chooseItem(value, index2) {
return _chooseItem(value, index2);
},
duration,
key: index,
keyIndex: index
});
})) : React__default.createElement(PickerItem, {
value: innerValue,
onChange: onItemChange,
options,
limitNumber,
icon,
activeIcon,
indeterminateIcon,
maxHeight,
disabled,
showSelectAll
}))));
};
var Picker = React__default.forwardRef(InternalPicker);
export {
Picker as default
};