@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
263 lines (262 loc) • 12.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ElevatorRender", {
enumerable: true,
get: function() {
return ElevatorRender;
}
});
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 _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _popup = /*#__PURE__*/ _interop_require_default._(require("../popup"));
var _elevator = /*#__PURE__*/ _interop_require_default._(require("../elevator"));
var _utils = require("../cascader/utils");
var _utils1 = require("./utils");
var _typings = require("../../utils/typings");
var _mergeprops = require("../../utils/merge-props");
var _usepropsvalue = require("../../hooks/use-props-value");
var _isempty = require("../../utils/is-empty");
var _configprovider = require("../configprovider");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.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 onClose() {},
onChange: function onChange() {},
onPathChange: function onPathChange() {}
});
var ElevatorRender = function ElevatorRender(props) {
var _mergeProps = (0, _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 = (0, _configprovider.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 = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: outerValue,
defaultValue: outerDefaultValue,
finalValue: [],
onChange: function onChange1(value) {
onChange(value, []);
onPathChange(value, []);
}
}), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
var _useState = (0, _sliced_to_array._)((0, _react.useState)(outerOptions), 2), innerOptions = _useState[0], setInnerOptions = _useState[1];
var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(value), 2), innerValue = _useState1[0], setInnerValue = _useState1[1];
var _useState2 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), elevatorOptions = _useState2[0], setElevatorOptions = _useState2[1];
var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(selectProvince), 2), addressTip = _useState3[0], setAddressTip = _useState3[1];
var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), levelIndex = _useState4[0], setLevelIndex = _useState4[1];
var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), tabActiveIndex = _useState5[0], setTabActiveIndex = _useState5[1];
// 初始化数据，只格式化一次；动态数据todo
var options = (0, _react.useMemo)(function() {
if (!(0, _isempty.isEmpty)(format)) {
return (0, _utils1.transformData)((0, _utils.normalizeListOptions)(innerOptions, format));
}
if (!(0, _isempty.isEmpty)(optionKey)) {
return (0, _utils1.transformData)((0, _utils.normalizeOptions)(innerOptions, optionKey) || []);
}
return (0, _utils1.transformData)(innerOptions);
}, [
innerOptions,
optionKey,
format
]);
(0, _react.useEffect)(function() {
setElevatorOptions(options);
}, [
options
]);
var levels = (0, _react.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 = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: outerVisible,
defaultValue: undefined,
onChange: function onChange(value) {
if (value === false) onClose();
}
}), 2), visible = _usePropsValue1[0], setVisible = _usePropsValue1[1];
(0, _react.useEffect)(function() {
if (!visible) setInnerValue(value);
}, [
visible,
value
]);
(0, _react.useEffect)(function() {
setInnerOptions(outerOptions);
}, [
outerOptions
]);
(0, _react.useEffect)(function() {
setTabActiveIndex(levels.length - 1);
setAddressTip(innerValue.length ? select : selectProvince);
}, [
innerValue
]);
var handleElevatorItemClick = function handleElevatorItemClick(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 handleHotItemClick(hotItem) {
// 通过修改 innerValue 构造 level 数据
var distData = (0, _utils1.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 renderTabs() {
if (!levels.length || !levels[0].name) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-selected")
}, levels.map(function(item, index) {
var _levels_;
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, {
key: "adtabs-".concat(index)
}, item.name && /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-selected-item ").concat(item.current ? 'active' : ''),
onClick: function onClick() {
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.default.createElement("div", {
className: "".concat(classPrefix, "-selected-border")
}, "-"));
}));
};
var renderHotCity = function renderHotCity() {
if (levels.length && tabActiveIndex !== 0) return null;
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-title")
}, hotCity), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-hotlist ").concat(hotList.length > MAX_LENGTH ? 'hotlist-more' : '')
}, hotList.map(function(item, index) {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-hotlist-item"),
key: "hot-".concat(index),
onClick: function onClick() {
return handleHotItemClick(item);
}
}, item.name);
})));
};
var renderArea = function renderArea() {
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-title")
}, addressTip), /*#__PURE__*/ _react.default.createElement(_elevator.default, {
className: "".concat(classPrefix, "-elevator"),
list: elevatorOptions,
onItemClick: function onItemClick(key, item) {
return handleElevatorItemClick(item, levelIndex);
},
style: {
height: '100%'
},
height: "93%"
}));
};
var renderContent = function renderContent() {
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderTabs(), /*#__PURE__*/ _react.default.createElement("div", {
style: {
height: innerValue.length ? '80%' : '93%',
overflowY: levels.length && tabActiveIndex !== 0 ? 'hidden' : 'auto'
}
}, renderHotCity(), renderArea()));
};
return popup ? /*#__PURE__*/ _react.default.createElement(_popup.default, (0, _object_spread_props._)((0, _object_spread._)({}, popupProps), {
visible: visible,
position: "bottom",
style: {
height: '89%'
},
round: true,
closeIcon: closeIcon,
closeable: closeable,
closeIconPosition: closeIconPosition,
title: title,
left: left,
onOverlayClick: function onOverlayClick() {
return setVisible(false);
},
onCloseIconClick: function onCloseIconClick() {
return setVisible(false);
}
}), renderContent()) : renderContent();
};
ElevatorRender.displayName = 'NutElevatorRender';