@nutui/nutui-react 3.0.10-beta.1 → 3.0.11-patch.0

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;
@@ -49,6 +44,120 @@
   }
 }
 
+.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: 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;
+      }
+    }
+
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
+      }
+    }
+  }
+
+  &-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;
+
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
+
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
+      &-item {
+        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 {
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-address,
 .nut-rtl .nut-address {
   &-exist {

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;
@@ -45,6 +41,109 @@
   color: #ffffff;
 }
 
+.nut-address-title {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 16px 16px 12px 16px;
+}
+.nut-address-hotlist {
+  padding: 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+.nut-address-hotlist-item {
+  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: var(--nutui-color-background-sunken, #f7f8fc);
+  color: var(--nutui-color-title, #1a1a1a);
+}
+.nut-address-hotlist-item:nth-child(5n) {
+  margin-right: 0;
+}
+.nut-address-hotlist.hotlist-more .nut-address-hotlist-item {
+  width: auto;
+  padding: 0 16px;
+  margin-right: 7px;
+}
+.nut-address-selected {
+  width: 100%;
+  height: 60px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06));
+}
+.nut-address-selected-item {
+  font-size: 12px;
+  display: inline-block;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 12px;
+  border-radius: 4px;
+  background-color: var(--nutui-color-background-sunken, #f7f8fc);
+}
+.nut-address-selected-item.active {
+  border: 1px solid var(--nutui-color-primary, #ff0f23);
+  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  color: var(--nutui-color-primary, #ff0f23);
+}
+.nut-address-selected-border {
+  margin: 0 2px;
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-address-elevator {
+  margin-top: 0;
+}
+.nut-address-elevator .nut-elevator-list-item {
+  position: relative;
+  padding-left: 20px;
+}
+.nut-address-elevator .nut-elevator-list-item-code {
+  display: inline;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 30px;
+  line-height: 30px;
+  border-bottom: 0;
+  color: var(--nutui-color-text-help, #888b94);
+  font-weight: 500;
+}
+.nut-address-elevator .nut-elevator-bars {
+  top: 40%;
+  padding: 0;
+  background: none;
+}
+.nut-address-elevator .nut-elevator-bars-inner-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  border-radius: 16px;
+  margin-bottom: 2px;
+  color: var(--nutui-color-text-help, #888b94);
+}
+.nut-address-elevator .nut-elevator-bars-inner-item-active {
+  background-color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-color-background-overlay, #ffffff);
+  font-weight: 400;
+}
+
 [dir=rtl] .nut-address-exist-item-info,
 .nut-rtl .nut-address-exist-item-info {
   margin-left: 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;
@@ -49,6 +44,120 @@
   }
 }
 
+.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: 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;
+      }
+    }
+
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
+      }
+    }
+  }
+
+  &-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;
+
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
+
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
+      &-item {
+        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 {
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-address,
 .nut-rtl .nut-address {
   &-exist {