@nutui/nutui-react 3.0.10 → 3.0.11

package/dist/es/packages/address/elevatorRender.js

@@ -0,0 +1,250 @@
+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 Popup from "../popup";
+import Elevator from "../elevator";
+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";
+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("div", {
+            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("div", {
+                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("div", {
+                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("div", {
+            className: "".concat(classPrefix, "-title")
+        }, hotCity), /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-hotlist ").concat(hotList.length > MAX_LENGTH ? 'hotlist-more' : '')
+        }, hotList.map(function(item, index) {
+            return /*#__PURE__*/ React.createElement("div", {
+                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("div", {
+            className: "".concat(classPrefix, "-title")
+        }, addressTip), /*#__PURE__*/ React.createElement(Elevator, {
+            className: "".concat(classPrefix, "-elevator"),
+            list: elevatorOptions,
+            onItemClick: function(key, item) {
+                return handleElevatorItemClick(item, levelIndex);
+            },
+            style: {
+                height: '100%'
+            },
+            height: "93%"
+        }));
+    };
+    var renderContent = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderTabs(), /*#__PURE__*/ React.createElement("div", {
+            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';

package/dist/es/packages/address/existRender.js

@@ -4,7 +4,7 @@ import React from "react";
 import { Check, Location } from "@nutui/icons-react";
 import { useConfig } from "../configprovider";
 var defaultProps = {
-    type: 'custom',
+    type: 'exist',
     existList: [],
     defaultIcon: null,
     selectIcon: null,
@@ -34,7 +34,7 @@ export var ExistRender = function(props) {
     var onClick = function(e) {
         e.stopPropagation();
         onSwitch && onSwitch({
-            type: type === 'exist' ? 'custom' : 'exist'
+            type: type === 'exist' ? 'cascader' : 'exist'
         });
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("ul", {

package/dist/es/packages/address/style/address.scss

@@ -1,9 +1,4 @@
 .nut-address {
-  &-elevator {
-    display: flex;
-    margin-top: 20px;
-  }
-
   &-exist {
     display: block;
     padding: 15px 20px 0;

package/dist/es/packages/address/style/style.css

@@ -2,10 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-address-elevator {
-  display: flex;
-  margin-top: 20px;
-}
 .nut-address-exist {
   display: block;
   padding: 15px 20px 0;

package/dist/es/packages/address/style-jmapp/address.scss

@@ -1,9 +1,4 @@
 .nut-address {
-  &-elevator {
-    display: flex;
-    margin-top: 20px;
-  }
-
   &-exist {
     display: block;
     padding: 15px 20px 0;

package/dist/es/packages/address/style-jmapp/style.css

@@ -2,10 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-address-elevator {
-  display: flex;
-  margin-top: 20px;
-}
 .nut-address-exist {
   display: block;
   padding: 15px 20px 0;

package/dist/es/packages/address/style-jrkf/address.scss

@@ -1,9 +1,4 @@
 .nut-address {
-  &-elevator {
-    display: flex;
-    margin-top: 20px;
-  }
-
   &-exist {
     display: block;
     padding: 15px 20px 0;

package/dist/es/packages/address/style-jrkf/style.css

@@ -2,10 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-address-elevator {
-  display: flex;
-  margin-top: 20px;
-}
 .nut-address-exist {
   display: block;
   padding: 15px 20px 0;

package/dist/es/packages/address/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const transformData: (data: any) => {
+    title: string;
+    list: any;
+}[];
+export declare const findDataByName: any;

package/dist/es/packages/address/utils.js

@@ -0,0 +1,75 @@
+var generateId = function(name) {
+    return name.split('').reduce(function(sum, char) {
+        return sum + char.charCodeAt(0);
+    }, 0) // 使用字符的 Unicode 值作为 ID
+    ;
+};
+export var transformData = function(data) {
+    var groupByWordCode = function(data, parentId, parentName) {
+        return data === null || data === void 0 ? void 0 : data.reduce(function(acc, item) {
+            var wordCode = item.wordCode;
+            if (!acc[wordCode]) {
+                acc[wordCode] = [];
+            }
+            var currentId = generateId(item.value);
+            acc[wordCode].push({
+                name: item.value,
+                wordCode: item.wordCode,
+                id: currentId,
+                pId: parentId,
+                pName: parentName,
+                children: item.children && groupByWordCode(item.children, currentId, item.text) || null
+            });
+            return acc;
+        }, {});
+    };
+    var extractTitles = function(obj) {
+        return Object.keys(obj).map(function(key) {
+            return {
+                title: key,
+                list: obj[key].map(function(item) {
+                    if (item.children) {
+                        item.children = extractTitles(item.children);
+                    }
+                    return item;
+                })
+            };
+        });
+    };
+    var middleData = groupByWordCode(data, '', '');
+    var resultData = extractTitles(middleData);
+    return resultData;
+};
+export var findDataByName = function(data, name) {
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var item = _step.value;
+            var _item_name;
+            if (((_item_name = item.name) === null || _item_name === void 0 ? void 0 : _item_name.indexOf(name)) === 0) return item;
+            if (item.children) {
+                var found = findDataByName(item.children, name);
+                if (found) return found;
+            }
+            if (item.list) {
+                var found1 = findDataByName(item.list, name);
+                if (found1) return found1;
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return null // 如果没有找到，返回 null
+    ;
+};

package/dist/es/packages/elevator/elevator.js

@@ -204,9 +204,10 @@ export var Elevator = function(props) {
             touchAction: 'pan-y'
         }
     }), list.map(function(item, index) {
+        var _list_currentIndex;
         var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-bars-inner-item"), true), _define_property(_obj, "".concat(classPrefix, "-bars-inner-item-active"), item[floorKey] === list[currentIndex][floorKey]), _obj)),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-bars-inner-item"), true), _define_property(_obj, "".concat(classPrefix, "-bars-inner-item-active"), item[floorKey] === ((_list_currentIndex = list[currentIndex]) === null || _list_currentIndex === void 0 ? void 0 : _list_currentIndex[floorKey])), _obj)),
             "data-index": index,
             key: index,
             onClick: function() {

package/dist/es/packages/elevator/style/css.js

@@ -1 +1,3 @@
+import '../../elevator/style/css';
+import '../../cascader/style/css';
 import './style.css';

package/dist/es/packages/elevator/style/elevator.scss

@@ -1,134 +1,113 @@
-.nut-elevator {
-  width: 100%;
-  display: block;
-  position: relative;
-  overflow: hidden;
-
-  &-list {
-    display: block;
-    position: relative;
-    top: 0;
-    overflow: hidden;
-    font-size: $elevator-list-font-size;
-    color: $elevator-list-color;
-
-    &-inner {
-      height: 100%;
-      width: 100%;
-      display: block;
-      background-color: $elevator-list-bg-color;
-      overflow: auto;
-    }
-
+.nut-address {
+  &-title {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 16px 16px 12px 16px;
+  }
+  &-hotlist {
+    padding: 0 16px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
     &-item {
-      display: block;
-
-      &-code {
-        display: flex;
-        position: relative;
-        height: $elevator-list-item-code-height;
-        line-height: $elevator-list-item-code-line-height;
-        font-size: $elevator-list-item-code-font-size;
-        color: $elevator-list-item-code-color;
-        padding: $elevator-list-item-padding;
-        font-weight: $elevator-list-item-code-font-weight;
-        box-sizing: border-box;
-        border-bottom: $elevator-list-item-code-border-bottom;
-        background-color: $elevator-list-item-code-background-color;
-      }
-
-      &-name {
-        display: flex;
-        align-items: center;
-        padding: $elevator-list-item-padding;
-        height: $elevator-list-item-name-height;
-        line-height: $elevator-list-item-name-line-height;
-
-        &-highcolor {
-          color: $color-primary;
-        }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 63px;
+      height: 28px;
+      font-size: 12px;
+      border-radius: 4px;
+      margin-bottom: 7px;
+      /* #ifdef harmony*/
+      margin-right: 6px;
+      /* #endif */
+      /* #ifndef harmony*/
+      margin-right: 7px;
+      /* #endif */
+      background-color: $color-background-sunken;
+      color: $color-title;
+      &:nth-child(5n) {
+        margin-right: 0;
       }
     }
 
-    &-fixed {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      padding: $elevator-list-item-padding;
-      height: $elevator-list-item-code-height;
-      background-color: $elevator-list-fixed-bg-color;
-      box-sizing: border-box;
-      box-shadow: $elevator-list-fixed-box-shadow;
-      &-title {
-        font-size: $elevator-list-item-code-font-size;
-        color: $elevator-list-fixed-color;
-        font-weight: $elevator-list-item-code-font-weight;
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
       }
     }
   }
 
-  &-code-current {
-    position: absolute;
-    right: $elevator-list-item-code-current-right;
-    top: $elevator-list-item-code-current-top;
-    transform: $elevator-bars-transform;
-    width: $elevator-list-item-code-current-width;
-    height: $elevator-list-item-code-current-height;
-    line-height: $elevator-list-item-code-current-line-height;
-    border-radius: $elevator-list-item-code-current-border-radius;
-    background: $elevator-list-item-code-current-bg-color;
-    box-shadow: $elevator-list-item-code-current-box-shadow;
-    text-align: $elevator-list-item-code-current-text-align;
-  }
+  &-selected {
+    width: 100%;
+    height: 60px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $color-border;
+    &-item {
+      font-size: 12px;
+      display: inline-block;
+      height: 28px;
+      line-height: 28px;
+      padding: 0 12px;
+      border-radius: 4px;
+      background-color: $color-background-sunken;
 
-  &-bars {
-    position: absolute;
-    right: $elevator-bars-right;
-    top: $elevator-bars-top;
-    color: $color-text-help;
-    font-size: $elevator-bars-font-size;
-    transform: $elevator-bars-transform;
-    padding: $elevator-bars-padding;
-    background-color: $elevator-bars-background-color;
-    border-radius: $elevator-bars-border-radius;
-    text-align: center;
-    z-index: $elevator-bars-z-index;
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
 
-    &-inner {
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
       &-item {
-        display: block;
-        padding: $elevator-bars-inner-item-padding;
-        cursor: pointer;
+        position: relative;
+        padding-left: 20px;
+      }
+      &-item-code {
+        display: inline;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 30px;
+        line-height: 30px;
+        border-bottom: 0;
+        color: $color-text-help;
+        font-weight: 500;
+      }
+    }
+    .nut-elevator-bars {
+      top: 40%;
+      padding: 0;
+      background: none;
 
+      &-inner-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 16px;
+        height: 16px;
+        font-size: 10px;
+        border-radius: 16px;
+        margin-bottom: 2px;
+        color: $color-text-help;
         &-active {
-          font-weight: $font-weight-bold;
-          color: $elevator-bars-active-color;
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
         }
       }
     }
   }
 }
-
-[dir='rtl'] .nut-elevator,
-.nut-rtl .nut-elevator {
-  &-list {
-    &-fixed {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  &-code-current {
-    right: auto;
-    left: $elevator-list-item-code-current-right;
-  }
-
-  &-bars {
-    right: auto;
-    left: $elevator-bars-right;
-  }
-}

package/dist/es/packages/elevator/style/index.js

@@ -1 +1,3 @@
+import '../../elevator/style';
+import '../../cascader/style';
 import './elevator.scss';