@nutui/nutui-react-taro 3.0.0-beta.8 → 3.0.0

package/dist/cjs/packages/imagepreview/style/style.harmony.css

@@ -0,0 +1,101 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-imagepreview {
+  width: 100%;
+  height: 100%;
+}
+.nut-imagepreview-swiper {
+  height: 100%;
+  width: 100vw;
+  background-color: transparent;
+}
+.nut-imagepreview-index {
+  position: fixed;
+  z-index: 2002;
+  top: 50px;
+  text-align: center;
+  left: 0;
+  right: 0;
+  background: transparent;
+  color: #ffffff;
+}
+.nut-imagepreview-index .arrow {
+  position: absolute;
+  left: 15px;
+  transform: rotateZ(180deg);
+}
+.nut-imagepreview-close {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2002;
+  background: transparent;
+  color: #ffffff;
+}
+.nut-imagepreview-close .nut-icon {
+  color: #ffffff;
+}
+.nut-imagepreview-close.top-right {
+  top: 50px;
+  right: 20px;
+}
+.nut-imagepreview-close.top-left {
+  top: 50px;
+  left: 20px;
+}
+.nut-imagepreview-close.bottom {
+  bottom: 50px;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+.nut-imagepreview-pop {
+  height: 100%;
+  background: transparent !important;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item,
+.nut-imagepreview-swiper .nut-swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image,
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video,
+.nut-imagepreview-swiper .nut-swiper-item .nut-image,
+.nut-imagepreview-swiper .nut-swiper-item .nut-video {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box,
+.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box {
+  width: 100%;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video video,
+.nut-imagepreview-swiper .nut-swiper-item .nut-video video {
+  object-fit: contain;
+}
+
+[dir=rtl] .nut-imagepreview-index .arrow,
+.nut-rtl .nut-imagepreview-index .arrow {
+  left: auto;
+  right: 15px;
+  transform: rotateZ(-180deg);
+}
+[dir=rtl] .nut-imagepreview-close.top-right,
+.nut-rtl .nut-imagepreview-close.top-right {
+  right: auto;
+  left: 20px;
+}
+[dir=rtl] .nut-imagepreview-close.top-left,
+.nut-rtl .nut-imagepreview-close.top-left {
+  left: auto;
+  right: 20px;
+}

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

@@ -1,7 +1,12 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
+import { ViewProps } from '@tarojs/components';
+export type IndicatorType = 'anchor' | 'slide';
+export type IndicatorColor = 'primary' | 'white';
 export interface IndicatorProps {
     total: number;
     current: number;
     direction: string;
+    color: IndicatorColor;
+    type: IndicatorType;
 }
-export declare const Indicator: FunctionComponent<Partial<IndicatorProps> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Indicator: FunctionComponent<Partial<IndicatorProps> & ViewProps>;

package/dist/cjs/packages/indicator/indicator.js

@@ -11,35 +11,71 @@ Object.defineProperty(exports, "Indicator", {
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var defaultProps = {
-    total: 3,
+    total: 2,
     current: 0,
-    direction: 'horizontal'
+    direction: 'horizontal',
+    color: 'primary',
+    type: 'anchor'
 };
 var classPrefix = "nut-indicator";
 var Indicator = function Indicator(props) {
-    var _$_object_spread = (0, _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 = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-vertical"), direction === 'vertical'));
-    var classPrefixV = direction === 'vertical' ? "".concat(classPrefix, "-vertical") : classPrefix;
-    var renderElement = function renderElement() {
+    var maybeFixedWidth = function maybeFixedWidth() {
+        if (total === 2 || type === 'slide') {
+            return "".concat(classPrefix, "-fixed-width");
+        }
+        return '';
+    };
+    var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
+        "color",
+        "type",
+        "total",
+        "current",
+        "children",
+        "className",
+        "direction"
+    ]);
+    var _obj;
+    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-vertical"), direction === 'vertical'), (0, _define_property._)(_obj, "".concat(classPrefix, "-white"), color === 'white'), (0, _define_property._)(_obj, "".concat(classPrefix, "-track"), type === 'slide'), _obj));
+    var renderDotElement = function renderDotElement() {
         var childs = [];
         for(var item = 0; item < total; item++){
             childs.push(item === current ? children || /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: item,
-                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-active ").concat(classPrefixV, "-dot ").concat(classPrefixV, "-active")
+                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-").concat(item, " ").concat(classPrefix, "-dot-active")
             }) : /*#__PURE__*/ _react.default.createElement(_components.View, {
                 key: item,
-                className: "".concat(classPrefix, "-dot ").concat(classPrefixV, "-dot")
+                className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-dot-").concat(item)
             }));
         }
         return childs;
     };
-    return /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)(classPrefix, classes, className),
-        style: style
-    }, renderElement());
+    var renderLineElement = function renderLineElement() {
+        var trackWidth = 21;
+        var sliderWidth = 6;
+        var stride = (trackWidth - sliderWidth) / (total - 1);
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            style: {
+                transform: "".concat(direction === 'vertical' ? 'translateY' : 'translateX', "(").concat((0, _pxtransform.default)(current * stride), ")")
+            },
+            className: "".concat(classPrefix, "-line ").concat(classPrefix, "-line-active")
+        });
+    };
+    var renderByType = function renderByType(type) {
+        switch(type){
+            case 'slide':
+                return renderLineElement();
+            default:
+                return renderDotElement();
+        }
+    };
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
+        className: (0, _classnames.default)(classPrefix, classes, maybeFixedWidth(), className)
+    }, rest), renderByType(type));
 };
 Indicator.displayName = 'NutIndicator';

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

@@ -1,56 +1,172 @@
 .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;
-    margin: 0 $indicator-dot-margin;
+    background-color: $color-border-disabled;
+    margin-left: $indicator-dot-margin;
+    opacity: 0.4;
 
-    &:first-child {
+    &-0 {
       margin-left: 0px;
     }
 
-    &: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;
+      }
+    }
+  }
+
+  &-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;
+        }
+      }
+
+      &.nut-indicator-fixed-width {
+        &.nut-indicator-white {
+          .nut-indicator-dot {
+            &-active {
+              height: 6px;
+            }
+          }
+        }
+      }
     }
   }
 
-  &-active {
+  &-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);
+      opacity: 1;
+    }
+
+    &-line {
+      opacity: 0;
+
+      &-active {
+        opacity: 1;
+        background: rgba(255, 255, 255, 1);
+      }
+    }
 
     &-dot {
-      margin: $indicator-dot-margin 0;
+      &-active {
+        background: rgba(255, 255, 255, 1);
+      }
+    }
+  }
+}
 
-      &:first-child {
+.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: 0px;
+      margin-top: $indicator-dot-margin;
+
+      &-0 {
         margin-top: 0px;
       }
 
-      &: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;
+      }
     }
   }
 }
@@ -58,12 +174,7 @@
 [dir='rtl'] .nut-indicator,
 .nut-rtl .nut-indicator {
   &-dot {
-    &:first-child {
-      margin-left: $indicator-dot-margin;
-      margin-right: 0px;
-    }
-
-    &:last-child {
+    &-0 {
       margin-right: $indicator-dot-margin;
       margin-left: 0px;
     }

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

@@ -4,59 +4,128 @@
 /* #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-color-border, rgba(0, 0, 0, 0.06)));
-  margin: 0 var(--nutui-indicator-dot-margin, 2px);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  opacity: 0.4;
 }
-.nut-indicator-dot:first-child {
+.nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
-.nut-indicator-dot:last-child {
-  margin-right: 0px;
+.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-color-primary, #ff0f23));
+  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-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
+  height: 6px;
 }
-.nut-indicator-active {
-  width: var(--nutui-indicator-dot-active-size, 8px);
-  border-radius: var(--nutui-indicator-border-radius, 2px);
+.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-color-primary, #ff0f23));
 }
+
+.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-color-border-disabled, #c2c4cc);
+  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);
+  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: 0px;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
 }
-.nut-indicator-vertical-dot:first-child {
+.nut-indicator-vertical .nut-indicator-dot-0 {
   margin-top: 0px;
 }
-.nut-indicator-vertical-dot:last-child {
-  margin-bottom: 0px;
+.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-active {
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-active-size, 8px);
+.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-right: 0px;
-}
-[dir=rtl] .nut-indicator-dot:last-child,
-.nut-rtl .nut-indicator-dot:last-child {
-  margin-right: var(--nutui-indicator-dot-margin, 2px);
+[dir=rtl] .nut-indicator-dot-0,
+.nut-rtl .nut-indicator-dot-0 {
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
   margin-left: 0px;
 }