@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
253 lines (252 loc) • 11 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 React, { useEffect, useMemo, useState } from "react";
import { View } from "@tarojs/components";
import Popup from "../popup/index";
import Elevator from "../elevator/index";
import { normalizeListOptions, normalizeOptions } from "../cascader/utils";
import { transformData, findDataByName } from "./utils";
import { ComponentDefaults } from "../../utils/typings";
import { mergeProps } from "../../utils/merge-props";
import { usePropsValue } from "../../hooks/use-props-value";
import { isEmpty } from "../../utils/is-empty";
import { useConfig } from "../configprovider/index";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
visible: false,
type: 'elevator',
options: [],
optionKey: {
textKey: 'text',
valueKey: 'value',
childrenKey: 'children'
},
format: {},
height: '200px',
activeColor: '',
activeIcon: 'checklist',
popup: true,
closeable: false,
closeIconPosition: 'top-right',
closeIcon: 'close',
lazy: false,
hotList: [],
onClose: function() {},
onChange: function() {},
onPathChange: function() {}
});
export var ElevatorRender = function(props) {
var _mergeProps = mergeProps(defaultProps, props), hotList = _mergeProps.hotList, title = _mergeProps.title, left = _mergeProps.left, optionKey = _mergeProps.optionKey, format = _mergeProps.format, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, onPathChange = _mergeProps.onPathChange, popup = _mergeProps.popup, _mergeProps_popupProps = _mergeProps.popupProps, popupProps = _mergeProps_popupProps === void 0 ? {} : _mergeProps_popupProps, outerVisible = _mergeProps.visible, outerOptions = _mergeProps.options, outerValue = _mergeProps.value, outerDefaultValue = _mergeProps.defaultValue, closeable = _mergeProps.closeable, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon;
var _useConfig = useConfig(), _useConfig_locale = _useConfig.locale, select = _useConfig_locale.select, _useConfig_locale_address = _useConfig_locale.address, hotCity = _useConfig_locale_address.hotCity, selectProvince = _useConfig_locale_address.selectProvince;
var classPrefix = 'nut-address';
var MAX_LENGTH = 10;
var _usePropsValue = _sliced_to_array(usePropsValue({
value: outerValue,
defaultValue: outerDefaultValue,
finalValue: [],
onChange: function(value) {
onChange(value, []);
onPathChange(value, []);
}
}), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
var _useState = _sliced_to_array(useState(outerOptions), 2), innerOptions = _useState[0], setInnerOptions = _useState[1];
var _useState1 = _sliced_to_array(useState(value), 2), innerValue = _useState1[0], setInnerValue = _useState1[1];
var _useState2 = _sliced_to_array(useState([]), 2), elevatorOptions = _useState2[0], setElevatorOptions = _useState2[1];
var _useState3 = _sliced_to_array(useState(selectProvince), 2), addressTip = _useState3[0], setAddressTip = _useState3[1];
var _useState4 = _sliced_to_array(useState(0), 2), levelIndex = _useState4[0], setLevelIndex = _useState4[1];
var _useState5 = _sliced_to_array(useState(0), 2), tabActiveIndex = _useState5[0], setTabActiveIndex = _useState5[1];
// 初始化数据，只格式化一次；动态数据todo
var options = useMemo(function() {
if (!isEmpty(format)) {
return transformData(normalizeListOptions(innerOptions, format));
}
if (!isEmpty(optionKey)) {
return transformData(normalizeOptions(innerOptions, optionKey) || []);
}
return transformData(innerOptions);
}, [
innerOptions,
optionKey,
format
]);
useEffect(function() {
setElevatorOptions(options);
}, [
options
]);
var levels = useMemo(function() {
var next = [];
var end = false;
var currentOptions = options;
innerValue.forEach(function(val, index) {
var opt = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.flatMap(function(o) {
return o.list.find(function(item) {
return item.name === val;
});
}).filter(function(item) {
return item !== undefined;
})[0];
next.push({
name: val,
children: currentOptions,
levelIndex: index,
current: index === tabActiveIndex
});
if (opt === null || opt === void 0 ? void 0 : opt.children) {
currentOptions = opt.children;
} else {
end = true;
}
});
if (!end) {
next.push({
name: null,
children: currentOptions,
levels: -1,
current: false
});
}
return next;
}, [
innerValue,
options,
tabActiveIndex
]);
var _usePropsValue1 = _sliced_to_array(usePropsValue({
value: outerVisible,
defaultValue: undefined,
onChange: function(value) {
if (value === false) onClose();
}
}), 2), visible = _usePropsValue1[0], setVisible = _usePropsValue1[1];
useEffect(function() {
if (!visible) setInnerValue(value);
}, [
visible,
value
]);
useEffect(function() {
setInnerOptions(outerOptions);
}, [
outerOptions
]);
useEffect(function() {
setTabActiveIndex(levels.length - 1);
setAddressTip(innerValue.length ? select : selectProvince);
}, [
innerValue
]);
var handleElevatorItemClick = function(elevatorItem, levelIndex) {
var _elevatorItem_children;
var nextValue = innerValue.slice(0, levelIndex);
if (elevatorItem.name) {
nextValue[levelIndex] = elevatorItem.name;
}
setInnerValue(nextValue);
if ((_elevatorItem_children = elevatorItem.children) === null || _elevatorItem_children === void 0 ? void 0 : _elevatorItem_children.length) {
setElevatorOptions(elevatorItem.children);
setLevelIndex(levelIndex + 1);
} else {
setVisible(false);
setValue(nextValue);
}
};
var handleHotItemClick = function(hotItem) {
// 通过修改 innerValue 构造 level 数据
var distData = findDataByName(options, hotItem.name);
// 热门城市主要是一级城市和二级城市，可以扩展。TODO
if (distData) {
var nextValue = [
distData.pName,
distData.name
].filter(function(item) {
return item !== '';
});
setInnerValue(nextValue);
setElevatorOptions(distData.children);
setLevelIndex(nextValue.length);
}
};
var renderTabs = function() {
if (!levels.length || !levels[0].name) return null;
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-selected")
}, levels.map(function(item, index) {
var _levels_;
return /*#__PURE__*/ React.createElement(React.Fragment, {
key: "adtabs-".concat(index)
}, item.name && /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-selected-item ").concat(item.current ? 'active' : ''),
onClick: function() {
var _props_onTabsChange;
(_props_onTabsChange = props.onTabsChange) === null || _props_onTabsChange === void 0 ? void 0 : _props_onTabsChange.call(props, index);
setTabActiveIndex(index);
setLevelIndex(index);
setElevatorOptions(item.children);
}
}, item.name), ((_levels_ = levels[index + 1]) === null || _levels_ === void 0 ? void 0 : _levels_.name) && /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-selected-border")
}, "-"));
}));
};
var renderHotCity = function() {
if (levels.length && tabActiveIndex !== 0) return null;
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-title")
}, hotCity), /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-hotlist ").concat(hotList.length > MAX_LENGTH ? 'hotlist-more' : '')
}, hotList.map(function(item, index) {
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-hotlist-item"),
key: "hot-".concat(index),
onClick: function() {
return handleHotItemClick(item);
}
}, item.name);
})));
};
var renderArea = function() {
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-title")
}, addressTip), /*#__PURE__*/ React.createElement(Elevator, {
className: "".concat(classPrefix, "-elevator"),
list: elevatorOptions,
onItemClick: function(key, item) {
return handleElevatorItemClick(item, levelIndex);
},
// height="67%"
style: {
height: '100%'
},
height: "93%"
}));
};
var renderContent = function() {
return /*#__PURE__*/ React.createElement(React.Fragment, null, renderTabs(), /*#__PURE__*/ React.createElement(View, {
style: {
height: innerValue.length ? '80%' : '93%',
overflowY: levels.length && tabActiveIndex !== 0 ? 'hidden' : 'auto'
}
}, renderHotCity(), renderArea()));
};
return popup ? /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({}, popupProps), {
visible: visible,
position: "bottom",
style: {
height: '89%'
},
round: true,
closeIcon: closeIcon,
closeable: closeable,
closeIconPosition: closeIconPosition,
title: title,
left: left,
onOverlayClick: function() {
return setVisible(false);
},
onCloseIconClick: function() {
return setVisible(false);
}
}), renderContent()) : renderContent();
};
ElevatorRender.displayName = 'NutElevatorRender';