@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/es/packages/indicator/indicator.js

@@ -1,34 +1,69 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import React from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 var defaultProps = {
-    total: 3,
+    total: 2,
     current: 0,
-    direction: 'horizontal'
+    direction: 'horizontal',
+    color: 'primary',
+    type: 'anchor'
 };
 var classPrefix = "nut-indicator";
 export var Indicator = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), total = _$_object_spread.total, current = _$_object_spread.current, children = _$_object_spread.children, className = _$_object_spread.className, direction = _$_object_spread.direction, style = _$_object_spread.style;
-    var classes = classNames(_define_property({}, "".concat(classPrefix, "-vertical"), direction === 'vertical'));
-    var classPrefixV = direction === 'vertical' ? "".concat(classPrefix, "-vertical") : classPrefix;
-    var renderElement = function() {
+    var maybeFixedWidth = function maybeFixedWidth() {
+        if (total === 2 || type === 'slide') {
+            return "".concat(classPrefix, "-fixed-width");
+        }
+        return '';
+    };
+    var _ref = _object_spread({}, defaultProps, props), color = _ref.color, type = _ref.type, total = _ref.total, current = _ref.current, children = _ref.children, className = _ref.className, direction = _ref.direction, rest = _object_without_properties(_ref, [
+        "color",
+        "type",
+        "total",
+        "current",
+        "children",
+        "className",
+        "direction"
+    ]);
+    var _obj;
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), _define_property(_obj, "".concat(classPrefix, "-white"), color === 'white'), _define_property(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _obj));
+    var renderDotElement = function() {
         var childs = [];
         for(var item = 0; item < total; item++){
             childs.push(item === current ? children || /*#__PURE__*/ React.createElement(View, {
                 key: item,
-                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-active ").concat(classPrefixV, "-dot ").concat(classPrefixV, "-active")
+                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-active")
             }) : /*#__PURE__*/ React.createElement(View, {
                 key: item,
-                className: "".concat(classPrefix, "-dot ").concat(classPrefixV, "-dot")
+                className: "".concat(classPrefix, "-dot")
             }));
         }
         return childs;
     };
-    return /*#__PURE__*/ React.createElement(View, {
-        className: classNames(classPrefix, classes, className),
-        style: style
-    }, renderElement());
+    var renderLineElement = function() {
+        var trackWidth = 21;
+        var sliderWidth = 6;
+        var stride = (trackWidth - sliderWidth) / (total - 1);
+        return /*#__PURE__*/ React.createElement(View, {
+            style: {
+                transform: "".concat(direction === 'vertical' ? 'translateY' : 'translateX', "(").concat(current * stride, "px)")
+            },
+            className: "".concat(classPrefix, "-line ").concat(classPrefix, "-line-active")
+        });
+    };
+    var renderByType = function(type) {
+        switch(type){
+            case 'slide':
+                return renderLineElement();
+            default:
+                return renderDotElement();
+        }
+    };
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
+        className: classNames(classPrefix, classes, maybeFixedWidth(), className)
+    }, rest), renderByType(type));
 };
 Indicator.displayName = 'NutIndicator';

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

@@ -1,19 +1,24 @@
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 
-  &-dot {
+  &-fixed-width {
+    width: 21px;
+  }
+
+  &-dot,
+  &-line {
     display: inline-block;
     vertical-align: middle;
     width: $indicator-dot-size;
     height: $indicator-dot-size;
     border-radius: 50%;
-    background-color: $indicator-dot-color;
+    background-color: $color-border-disabled;
     margin: 0 $indicator-dot-margin;
+    opacity: 0.4;
 
     &:first-child {
       margin-left: 0px;
@@ -22,20 +27,119 @@
     &:last-child {
       margin-right: 0px;
     }
+
+    &-active {
+      width: $indicator-dot-active-size;
+      border-radius: $indicator-border-radius;
+      background: $indicator-color;
+      opacity: 1;
+    }
+  }
+
+  // 固定宽度
+  &-fixed-width {
+    // 两个页码的时候
+    .nut-indicator-dot {
+      width: 12px;
+      border-radius: $indicator-border-radius;
+
+      &-active {
+        width: 6px;
+      }
+    }
   }
 
-  &-active {
+  &-vertical {
+    // 竖向固定高度
+    &.nut-indicator-fixed-width {
+      justify-content: flex-start;
+      height: 21px;
+      width: auto;
+
+      // 竖向两个页码
+      .nut-indicator-dot {
+        width: 3px;
+        height: 12px;
+        border-radius: $indicator-border-radius;
+
+        &-active {
+          height: 6px;
+        }
+      }
+    }
+  }
+
+  &-line {
     width: $indicator-dot-active-size;
+    margin: 0;
+
     border-radius: $indicator-border-radius;
-    background: $indicator-color;
+    background-color: transparent;
+
+    &-active {
+      transition: transform 0.3s ease-in-out;
+      background: $indicator-color;
+    }
   }
+}
 
-  &-vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+.nut-indicator-track {
+  position: relative;
 
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: $indicator-border-radius;
+    background-color: $color-border-disabled;
+    opacity: 0.4;
+  }
+}
+
+.nut-indicator-white {
+  .nut-indicator {
+    &-dot,
+    &-line {
+      position: relative;
+      box-sizing: content-box;
+      background: rgba(255, 255, 255, 0.4);
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      opacity: 1;
+    }
+
+    &-line {
+      opacity: 0;
+
+      &-active {
+        opacity: 1;
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+    &-dot {
+      &-active {
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+}
+
+.nut-indicator-track.nut-indicator-white {
+  &:after {
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.nut-indicator-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .nut-indicator {
     &-dot {
       margin: $indicator-dot-margin 0;
 
@@ -46,11 +150,20 @@
       &:last-child {
         margin-bottom: 0px;
       }
+
+      &-active {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
+  }
 
-    &-active {
-      width: $indicator-dot-size;
-      height: $indicator-dot-active-size;
+  &.nut-indicator-track {
+    .nut-indicator {
+      &-line {
+        width: $indicator-dot-size;
+        height: $indicator-dot-active-size;
+      }
     }
   }
 }

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

@@ -1,58 +1,139 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 }
-.nut-indicator-dot {
+.nut-indicator-fixed-width {
+  width: 21px;
+}
+.nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-size, 4px);
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-indicator-dot-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  margin: 0 var(--nutui-indicator-dot-margin, 2px);
+  background-color: var(--nutui-gray-4);
+  margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
+  opacity: 0.4;
 }
-.nut-indicator-dot:first-child {
+.nut-indicator-dot:first-child, .nut-indicator-line:first-child {
   margin-left: 0px;
 }
-.nut-indicator-dot:last-child {
+.nut-indicator-dot:last-child, .nut-indicator-line:last-child {
   margin-right: 0px;
 }
-.nut-indicator-active {
-  width: var(--nutui-indicator-dot-active-size, 8px);
-  border-radius: var(--nutui-indicator-border-radius, 2px);
-  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+.nut-indicator-dot-active, .nut-indicator-line-active {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  opacity: 1;
+}
+.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-fixed-width .nut-indicator-dot-active {
+  width: 6px;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width {
+  justify-content: flex-start;
+  height: 21px;
+  width: auto;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 3px;
+  height: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
+  height: 6px;
+}
+.nut-indicator-line {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  margin: 0;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: transparent;
+}
+.nut-indicator-line-active {
+  transition: transform 0.3s ease-in-out;
+  background: var(--nutui-indicator-color, var(--nutui-brand-6));
 }
+
+.nut-indicator-track {
+  position: relative;
+}
+.nut-indicator-track:after {
+  display: block;
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: var(--nutui-gray-4);
+  opacity: 0.4;
+}
+
+.nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
+  position: relative;
+  box-sizing: content-box;
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  opacity: 1;
+}
+.nut-indicator-white .nut-indicator-line {
+  opacity: 0;
+}
+.nut-indicator-white .nut-indicator-line-active {
+  opacity: 1;
+  background: rgb(255, 255, 255);
+}
+.nut-indicator-white .nut-indicator-dot-active {
+  background: rgb(255, 255, 255);
+}
+
+.nut-indicator-track.nut-indicator-white:after {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.4);
+}
+
 .nut-indicator-vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.nut-indicator-vertical-dot {
-  margin: var(--nutui-indicator-dot-margin, 2px) 0;
+.nut-indicator-vertical .nut-indicator-dot {
+  margin: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px)) 0;
 }
-.nut-indicator-vertical-dot:first-child {
+.nut-indicator-vertical .nut-indicator-dot:first-child {
   margin-top: 0px;
 }
-.nut-indicator-vertical-dot:last-child {
+.nut-indicator-vertical .nut-indicator-dot:last-child {
   margin-bottom: 0px;
 }
-.nut-indicator-vertical-active {
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-active-size, 8px);
+.nut-indicator-vertical .nut-indicator-dot-active {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
+}
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
 }
 
 [dir=rtl] .nut-indicator-dot:first-child,
 .nut-rtl .nut-indicator-dot:first-child {
-  margin-left: var(--nutui-indicator-dot-margin, 2px);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   margin-right: 0px;
 }
 [dir=rtl] .nut-indicator-dot:last-child,
 .nut-rtl .nut-indicator-dot:last-child {
-  margin-right: var(--nutui-indicator-dot-margin, 2px);
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   margin-left: 0px;
 }

package/dist/es/packages/infiniteloading/infiniteloading.d.ts

@@ -1,61 +1,18 @@
 import React, { FunctionComponent, ReactNode } from 'react';
+import { ScrollViewProps } from '@tarojs/components';
 import { BasicComponent } from "../../utils/typings";
 import { InfiniteLoadingType } from './types';
-export interface InfiniteLoadingProps extends BasicComponent {
-    /**
-    * 主题类型
-    * @default default
-    */
-    type: InfiniteLoadingType
-    /**
-    * 是否还有更多数据
-    * @default true
-    */
-    hasMore: boolean
-    /**
-    * 距离底部多远加载
-    * @default 200
-    */
-    threshold: number
-    /**
-    * 获取监听的目标元素
-    * @default -
-    */
-    target: string
-    /**
-    * 是否开启下拉刷新
-    * @default false
-    */
-    pullRefresh: boolean
-    /**
-    * 下拉刷新提示文案
-    * @default 松手刷新
-    */
-    pullingText: ReactNode
-    /**
-    * 上拉加载提示文案
-    * @default 刷新中
-    */
-    loadingText: ReactNode
-    /**
-    * “没有更多数据”展示文案
-    * @default 哎呀，这里是底部了啦
-    */
-    loadMoreText: ReactNode
-    /**
-    * 下拉刷新事件回调
-    * @default -
-    */
-    onRefresh: () => Promise<void>
-    /**
-    * 继续加载的回调函数
-    * @default -
-    */
-    onLoadMore: () => Promise<void>
-    /**
-    * 实时监听滚动高度
-    * @default -
-    */
-    onScroll: (param: number) => void
+export interface InfiniteLoadingProps extends BasicComponent, Omit<ScrollViewProps, 'style' | 'type' | 'onScroll'> {
+    type: InfiniteLoadingType;
+    hasMore: boolean;
+    threshold: number;
+    target: string;
+    pullRefresh: boolean;
+    pullingText: ReactNode;
+    loadingText: ReactNode;
+    loadMoreText: ReactNode;
+    onRefresh: () => Promise<void>;
+    onLoadMore: () => Promise<void>;
+    onScroll: (param: number) => void;
 }
 export declare const InfiniteLoading: FunctionComponent<Partial<InfiniteLoadingProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'>>;

package/dist/es/packages/infiniteloading/infiniteloading.js

@@ -1,14 +1,16 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
-import { ScrollView } from "@tarojs/components";
+import { ScrollView, View } from "@tarojs/components";
 import { createSelectorQuery } from "@tarojs/taro";
 import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
+import pxTransform from "../../utils/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'default',
     hasMore: true,
@@ -18,8 +20,31 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = "nut-infiniteloading";
 export var InfiniteLoading = function(props) {
+    var getBottomTipsText = function getBottomTipsText() {
+        if (isInfiniting) {
+            return loadingText || locale.infiniteloading.loadText;
+        }
+        if (!hasMore) {
+            return loadMoreText || locale.infiniteloading.loadMoreText;
+        }
+        return null;
+    };
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, type = _$_object_spread.type, hasMore = _$_object_spread.hasMore, threshold = _$_object_spread.threshold, target = _$_object_spread.target, pullRefresh = _$_object_spread.pullRefresh, pullingText = _$_object_spread.pullingText, loadingText = _$_object_spread.loadingText, loadMoreText = _$_object_spread.loadMoreText, className = _$_object_spread.className, onRefresh = _$_object_spread.onRefresh, onLoadMore = _$_object_spread.onLoadMore, onScroll = _$_object_spread.onScroll;
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, type = _ref.type, hasMore = _ref.hasMore, threshold = _ref.threshold, target = _ref.target, pullRefresh = _ref.pullRefresh, pullingText = _ref.pullingText, loadingText = _ref.loadingText, loadMoreText = _ref.loadMoreText, className = _ref.className, onRefresh = _ref.onRefresh, onLoadMore = _ref.onLoadMore, onScroll = _ref.onScroll, rest = _object_without_properties(_ref, [
+        "children",
+        "type",
+        "hasMore",
+        "threshold",
+        "target",
+        "pullRefresh",
+        "pullingText",
+        "loadingText",
+        "loadMoreText",
+        "className",
+        "onRefresh",
+        "onLoadMore",
+        "onScroll"
+    ]);
     var _useState = _sliced_to_array(useState(false), 2), isInfiniting = _useState[0], setIsInfiniting = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), topDisScoll = _useState1[0], setTopDisScoll = _useState1[1];
     var refreshTop = useRef(null);
@@ -32,12 +57,16 @@ export var InfiniteLoading = function(props) {
     var classes = classNames(classPrefix, className, "".concat(classPrefix, "-").concat(type));
     useEffect(function() {
         refreshMaxH.current = threshold;
-        setTimeout(function() {
+        var timer = setTimeout(function() {
             getScrollHeight();
         }, 200);
+        return function() {
+            return clearTimeout(timer);
+        };
     }, [
         hasMore,
-        isInfiniting
+        isInfiniting,
+        threshold
     ]);
     /** 获取需要滚动的距离 */ var getScrollHeight = function() {
         var parentElement = getParentElement('scroller');
@@ -48,7 +77,7 @@ export var InfiniteLoading = function(props) {
     };
     var getStyle = function() {
         return {
-            height: topDisScoll < 0 ? "0px" : "".concat(topDisScoll, "px"),
+            height: topDisScoll < 0 ? pxTransform(0) : pxTransform(topDisScoll),
             transition: "height 0.2s cubic-bezier(0.25,0.1,0.25,1)"
         };
     };
@@ -72,7 +101,7 @@ export var InfiniteLoading = function(props) {
         }
         onScroll && onScroll(e.target.scrollTop);
     };
-    var lower = function() {
+    var lower = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -122,7 +151,7 @@ export var InfiniteLoading = function(props) {
             isTouching.current = false;
         }
     };
-    var touchEnd = function() {
+    var touchEnd = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -158,7 +187,7 @@ export var InfiniteLoading = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    return /*#__PURE__*/ React.createElement(ScrollView, {
+    return /*#__PURE__*/ React.createElement(ScrollView, _object_spread_props(_object_spread({}, rest), {
         className: classes,
         scrollY: true,
         id: "scroller",
@@ -171,20 +200,18 @@ export var InfiniteLoading = function(props) {
         onTouchStart: touchStart,
         onTouchMove: touchMove,
         onTouchEnd: touchEnd
-    }, /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-top",
         ref: refreshTop,
         style: getStyle()
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-top-tips"
-    }, pullingText || locale.infiniteloading.pullRefreshText)), /*#__PURE__*/ React.createElement("div", {
+    }, pullingText || locale.infiniteloading.pullRefreshText)), /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-container"
-    }, children), /*#__PURE__*/ React.createElement("div", {
+    }, children), /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-bottom"
-    }, isInfiniting ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-infinite-bottom-tips"
-    }, loadingText || locale.infiniteloading.loadText) : !hasMore && /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-bottom-tips"
-    }, loadMoreText || locale.infiniteloading.loadMoreText)));
+    }, getBottomTipsText())));
 };
 InfiniteLoading.displayName = 'NutInfiniteLoading';

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

@@ -8,7 +8,7 @@
     justify-content: center;
     width: 100%;
     overflow: hidden;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $infiniteloading-color;
 
     &-tips {
@@ -33,7 +33,6 @@
     justify-content: center;
     width: 100%;
     padding-top: 6px;
-    font-size: $font-size-small;
     color: $infiniteloading-color;
     text-align: center;
 
@@ -41,6 +40,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      font-size: $font-size-xxs;
 
       &-icons {
         margin-right: 8px;