@nutui/nutui-react-taro 3.0.13-beta.0 → 3.0.14

package/dist/cjs/packages/dialog/style-jrkf/style.css

@@ -8,7 +8,7 @@
   align-items: center;
   width: var(--nutui-dialog-width, 295px);
   min-width: var(--nutui-dialog-min-width, 240px);
-  /* #ifndef harmony*/
+  /* #ifndef harmony dynamic*/
   max-height: 67%;
   /* #endif */
   min-height: var(--nutui-dialog-min-height, 60px);

package/dist/cjs/packages/elevator/elevator.d.ts

@@ -1,23 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export declare const elevatorContext: React.Context<ElevatorData>;
-export interface ElevatorProps extends BasicComponent {
-    height: number | string;
-    floorKey: string;
-    list: any[];
-    sticky: boolean;
-    spaceHeight: number;
-    titleHeight: number;
-    showKeys: boolean;
-    onItemClick: (key: string, item: ElevatorData) => void;
-    onIndexClick: (key: string) => void;
-}
-interface ElevatorData {
-    name: string;
-    id: number | string;
-    [key: string]: string | number;
-}
-export declare const Elevator: FunctionComponent<Partial<ElevatorProps> & React.HTMLAttributes<HTMLDivElement>> & {
+import { ElevatorItem, TaroElevatorProps } from "../../types";
+export declare const elevatorContext: React.Context<ElevatorItem>;
+export declare const Elevator: FunctionComponent<Partial<TaroElevatorProps> & React.HTMLAttributes<HTMLDivElement>> & {
     Context: typeof elevatorContext;
 };
-export {};

package/dist/cjs/packages/elevator/elevator.js

@@ -18,12 +18,13 @@ _export(exports, {
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _taro = /*#__PURE__*/ _interop_require_wildcard._(require("@tarojs/taro"));
 var _components = require("@tarojs/components");
@@ -31,25 +32,30 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _typings = require("../../utils/typings");
 var _platform = require("../../utils/taro/platform");
 var _useuuid = require("../../hooks/use-uuid");
+var _raf = /*#__PURE__*/ _interop_require_default._(require("../../utils/raf"));
+var _hooks = require("../../hooks");
 var elevatorContext = /*#__PURE__*/ (0, _react.createContext)({});
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    mode: 'horizontal',
     height: '200px',
     floorKey: 'title',
     list: [],
     sticky: false,
-    spaceHeight: 23,
-    titleHeight: 35,
+    spaceHeight: 18,
     showKeys: true,
-    className: 'weapp-elevator'
+    defaultValue: undefined,
+    value: undefined
 });
 var Elevator = function Elevator(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight, titleHeight = _ref.titleHeight, showKeys = _ref.showKeys, className = _ref.className, style = _ref.style, onItemClick = _ref.onItemClick, onIndexClick = _ref.onIndexClick, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, mode = _ref.mode, height = _ref.height, floorKey = _ref.floorKey, list = _ref.list, sticky = _ref.sticky, spaceHeight = _ref.spaceHeight, showKeys = _ref.showKeys, className = _ref.className, style = _ref.style, onItemClick = _ref.onItemClick, onIndexClick = _ref.onIndexClick, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
+        "value",
+        "defaultValue",
+        "mode",
         "height",
         "floorKey",
         "list",
         "sticky",
         "spaceHeight",
-        "titleHeight",
         "showKeys",
         "className",
         "style",
@@ -59,25 +65,25 @@ var Elevator = function Elevator(props) {
     ]);
     var uuid = (0, _useuuid.useUuid)();
     var classPrefix = 'nut-elevator';
-    var listview = (0, _react.useRef)(null);
     var initData = {
         anchorIndex: 0,
         listHeight: [],
-        listGroup: [],
         scrollY: 0
     };
     var touchState = (0, _react.useRef)({
         y1: 0,
         y2: 0
     });
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), currentData = _useState[0], setCurrentData = _useState[1];
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(''), 2), currentKey = _useState1[0], setCurrentKey = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), codeIndex = _useState2[0], setCodeIndex = _useState2[1];
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), scrollStart = _useState3[0], setScrollStart = _useState3[1];
+    var _usePropsValue = (0, _sliced_to_array._)((0, _hooks.usePropsValue)({
+        value: value,
+        defaultValue: defaultValue || {}
+    }), 2), currentData = _usePropsValue[0], setCurrentData = _usePropsValue[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), codeIndex = _useState[0], setCodeIndex = _useState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), scrollStart = _useState1[0], setScrollStart = _useState1[1];
     var state = (0, _react.useRef)(initData);
     var scrolling = (0, _react.useRef)(false);
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollTop = _useState4[0], setScrollTop = _useState4[1];
-    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollY = _useState5[0], setScrollY = _useState5[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollTop = _useState2[0], setScrollTop = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollY = _useState3[0], setScrollY = _useState3[1];
     var resetScrollState = function resetScrollState() {
         setScrollStart(false);
     };
@@ -88,39 +94,71 @@ var Elevator = function Elevator(props) {
         return el.dataset.index;
     };
     var calculateHeight = function calculateHeight() {
-        var height = 0;
-        state.current.listHeight.push(height);
-        for(var i = 0; i < state.current.listGroup.length; i++){
-            var query = (0, _taro.createSelectorQuery)();
-            query.selectAll(".".concat(classPrefix, "-").concat(uuid, " .nut-elevator-item-").concat(i)).boundingClientRect();
-            // eslint-disable-next-line no-loop-func
-            query.exec(function(res) {
-                if (res[0][0]) height += res[0][0].height;
-                state.current.listHeight.push(height);
-            });
-        }
-    };
-    var scrollTo = function scrollTo(index) {
-        if (!index && index !== 0) {
-            return;
-        }
-        if (!state.current.listHeight.length) {
-            calculateHeight();
-        }
-        var cacheIndex = index;
-        if (index < 0) {
-            cacheIndex = 0;
-        }
-        if (index > state.current.listHeight.length - 2) {
-            cacheIndex = Math.max(0, state.current.listHeight.length - 2);
-        }
-        setCodeIndex(cacheIndex);
-        var scrollTop = state.current.listHeight[cacheIndex];
-        setScrollTop(scrollTop);
-        if (sticky && scrollY !== scrollTop) {
-            setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0);
-        }
+        state.current.listHeight = [
+            0
+        ];
+        var query = (0, _taro.createSelectorQuery)();
+        query.selectAll("#".concat(classPrefix, "-").concat(uuid, " .").concat(classPrefix, "-list-item")).boundingClientRect().exec(function() {
+            var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+            if (rect[0] && rect[0].length) {
+                // rect[0] = rect[0].reverse()
+                state.current.listHeight = rect[0].reduce(function(acc, item, index) {
+                    // 当前项的高度等于前面所有项的高度之和
+                    var height = acc[index] + item.height;
+                    acc.push(height);
+                    return acc;
+                }, [
+                    0
+                ]);
+            }
+        });
     };
+    var scrollTo = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function(index) {
+            var cacheIndex, scrollTop;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!index && index !== 0) {
+                            return [
+                                2
+                            ];
+                        }
+                        if (!!state.current.listHeight.length) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            calculateHeight()
+                        ];
+                    case 1:
+                        _state.sent();
+                        _state.label = 2;
+                    case 2:
+                        cacheIndex = index;
+                        if (index < 0) {
+                            cacheIndex = 0;
+                        }
+                        if (index > state.current.listHeight.length - 2) {
+                            cacheIndex = Math.max(0, state.current.listHeight.length - 2);
+                        }
+                        setCodeIndex(cacheIndex);
+                        scrollTop = state.current.listHeight[cacheIndex];
+                        setScrollTop(scrollTop);
+                        if (mode === 'vertical' && sticky) {
+                            setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0);
+                        }
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function scrollTo(index) {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var touchMove = function touchMove(e) {
         var firstTouch = e.touches[0];
         touchState.current.y2 = firstTouch.pageY;
@@ -145,39 +183,31 @@ var Elevator = function Elevator(props) {
     var handleClickItem = function handleClickItem(key, item) {
         onItemClick && onItemClick(key, item);
         setCurrentData(item);
-        setCurrentKey(key);
     };
     var handleClickIndex = function handleClickIndex(key) {
         onIndexClick && onIndexClick(key);
     };
-    var setListGroup = function setListGroup() {
-        if (listview.current) {
-            (0, _taro.createSelectorQuery)().selectAll(".".concat(classPrefix, "-").concat(uuid, " .nut-elevator-list-item")).node(function(el) {
-                state.current.listGroup = (0, _to_consumable_array._)(Object.keys(el));
-                calculateHeight();
-            }).exec();
-        }
-    };
     var listViewScroll = function listViewScroll(e) {
-        var listHeight = state.current.listHeight;
-        if (!listHeight.length) {
-            calculateHeight();
-        }
-        var target = e.target;
-        var scrollTop = target.scrollTop;
-        state.current.scrollY = Math.floor(scrollTop);
-        _taro.default.getEnv() === 'WEB' && setScrollTop(scrollTop);
-        if (sticky && scrollTop !== scrollY) {
-            setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0);
-        }
-        if (scrolling.current) return;
-        for(var i = 0; i < listHeight.length - 1; i++){
-            var height1 = listHeight[i];
-            var height2 = listHeight[i + 1];
-            if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
-                return setCodeIndex(i);
+        (0, _raf.default)(function() {
+            var listHeight = state.current.listHeight;
+            if (!listHeight.length) {
+                calculateHeight();
             }
-        }
+            var target = e.target;
+            var scrollTop = target.scrollTop;
+            state.current.scrollY = Math.floor(scrollTop);
+            _taro.default.getEnv() === 'WEB' && setScrollTop(scrollTop);
+            if (mode === 'vertical' && sticky) {
+                setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0);
+            }
+            if (scrolling.current) return;
+            var index = listHeight.findIndex(function(height, i) {
+                return state.current.scrollY >= height && state.current.scrollY < (listHeight[i + 1] || Infinity);
+            });
+            if (index !== -1 && index !== codeIndex) {
+                setCodeIndex(index);
+            }
+        });
     };
     var getWrapStyle = (0, _react.useMemo)(function() {
         var calcHeight = Number.isNaN(+height) ? height : "".concat(height, "px");
@@ -188,17 +218,14 @@ var Elevator = function Elevator(props) {
         height
     ]);
     (0, _react.useEffect)(function() {
-        if (listview.current) {
-            (0, _taro.nextTick)(function() {
-                setListGroup();
-            });
-        }
-    }, [
-        listview
-    ]);
+        (0, _taro.nextTick)(function() {
+            calculateHeight();
+        });
+    }, []);
     var _obj;
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: "".concat(classPrefix, " ").concat(className, " ").concat(classPrefix, "-").concat(uuid),
+        className: "".concat(classPrefix, " ").concat(className, " ").concat(classPrefix, "-").concat(mode, " "),
+        id: "".concat(classPrefix, "-").concat(uuid),
         style: style
     }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-list"),
@@ -206,11 +233,10 @@ var Elevator = function Elevator(props) {
     }, /*#__PURE__*/ _react.default.createElement(_components.ScrollView, {
         scrollTop: scrollTop,
         scrollY: true,
-        scrollWithAnimation: true,
+        enhanced: true,
+        scrollWithAnimation: false,
         scrollAnchoring: true,
         className: "".concat(classPrefix, "-list-inner"),
-        type: "list",
-        ref: listview,
         onScroll: listViewScroll,
         onTouchStart: function onTouchStart(e) {
             scrolling.current = false;
@@ -221,10 +247,12 @@ var Elevator = function Elevator(props) {
             key: idx
         }, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "".concat(classPrefix, "-list-item-code")
-        }, item[floorKey]), /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.list.map(function(subitem) {
+        }, item[floorKey]), /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-list-item-sublist")
+        }, item.list.map(function(subitem) {
             var _obj;
             return /*#__PURE__*/ _react.default.createElement(_components.View, {
-                className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name-highcolor"), currentData.id === subitem.id && currentKey === item[floorKey]), _obj)),
+                className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-list-item-name-highcolor"), currentData.id === subitem.id), _obj)),
                 key: subitem.id,
                 onClick: function onClick() {
                     return handleClickItem(item[floorKey], subitem);
@@ -235,7 +263,7 @@ var Elevator = function Elevator(props) {
         })));
     }))), showKeys ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, list.length && scrollStart ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-code-current"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-code-current-current"), true), _obj))
-    }, list[codeIndex][floorKey]) : null, /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, list[codeIndex] && String(list[codeIndex][floorKey])) : null, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-bars")
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-bars-inner")
@@ -258,12 +286,12 @@ var Elevator = function Elevator(props) {
             style: {
                 touchAction: 'pan-y'
             }
-        }, item[floorKey]);
-    })))) : null, sticky && scrollY > 0 ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        }, String(item[floorKey]));
+    })))) : null, mode === 'vertical' && sticky && scrollY > 0 ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-list-fixed")
     }, /*#__PURE__*/ _react.default.createElement(_components.Text, {
         className: "".concat(classPrefix, "-list-fixed-title")
-    }, list[codeIndex][floorKey])) : null);
+    }, list[codeIndex] && String(list[codeIndex][floorKey]))) : null);
 };
 Elevator.displayName = 'NutElevator';
 Elevator.Context = elevatorContext;

package/dist/cjs/packages/elevator/index.d.ts

@@ -1,3 +1,3 @@
 import { Elevator } from "./elevator";
-export type { ElevatorProps } from "./elevator";
+export type { TaroElevatorProps as ElevatorProps } from "../../types";
 export default Elevator;

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

@@ -1,68 +1,66 @@
 .nut-elevator {
-  width: 100%;
-  display: block;
   position: relative;
-  overflow: hidden;
+  display: flex;
+  width: 100%;
 
   &-list {
-    display: block;
     position: relative;
     top: 0;
+    display: flex;
+    width: 100%;
     overflow: hidden;
-    font-size: $elevator-list-font-size;
-    color: $elevator-list-color;
 
     &-inner {
-      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
       width: 100%;
-      display: block;
       background-color: $elevator-list-bg-color;
       overflow: auto;
     }
 
     &-item {
-      display: block;
-
+      display: flex;
+      &-sublist {
+        display: flex;
+        flex-direction: column;
+      }
       &-code {
         display: flex;
-        position: relative;
+        align-items: center;
         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;
+        font-size: $elevator-list-font-size;
+        color: $elevator-list-color;
 
         &-highcolor {
           color: $color-primary;
+          font-weight: 600;
         }
       }
     }
 
     &-fixed {
-      display: flex;
-      align-items: center;
-      width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
+      display: flex;
+      align-items: center;
+      width: 100%;
       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;
+      background-color: $elevator-list-fixed-bg-color;
       &-title {
         font-size: $elevator-list-item-code-font-size;
         color: $elevator-list-fixed-color;
@@ -76,41 +74,71 @@
     right: $elevator-list-item-code-current-right;
     top: $elevator-list-item-code-current-top;
     transform: $elevator-bars-transform;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     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;
+    color: $elevator-list-item-code-current-color;
   }
 
   &-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;
 
     &-inner {
+      display: flex;
+      flex-direction: column;
       &-item {
-        display: block;
-        padding: $elevator-bars-inner-item-padding;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 16px;
+        width: 16px;
+        border-radius: 50%;
+        margin: 1px 0;
+        color: $elevator-bars-color;
+        font-size: $elevator-bars-font-size;
         cursor: pointer;
-
         &-active {
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
+          /* #ifndef weapp jd*/
+          background: linear-gradient(to right, #ff475d, #ff0f23);
+          /* #endif */
+          /* #ifdef weapp jd*/
+          background: #ff0f23;
+          /* #endif */
         }
       }
     }
   }
+  &-horizontal {
+    .nut-elevator-list-item {
+      &-code {
+        width: $elevator-list-item-code-width;
+        justify-content: center;
+      }
+    }
+  }
+  &-vertical {
+    .nut-elevator-list-item {
+      flex-direction: column;
+      &-code {
+        border-bottom: $elevator-list-item-code-border-bottom;
+      }
+      &-name,
+      &-code {
+        padding: $elevator-list-item-padding;
+      }
+    }
+  }
 }
 
 [dir='rtl'] .nut-elevator,