@autobest-ui/components 1.1.2 → 1.2.1

package/lib/carousel/index.d.ts

@@ -1,11 +1,19 @@
 import React from 'react';
 import { AddListenerEventHandler } from '@autobest-ui/utils';
+export declare enum CarouselDirection {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
 export interface CarouselProps {
     children: React.ReactElement[] | React.ReactElement;
     /**
      * 一行显示的数量
      */
     slidesPerView?: number;
+    /**
+     * 滚动方向
+     */
+    direction?: CarouselDirection;
     /**
      * 监听resize
      */
@@ -14,10 +22,6 @@ export interface CarouselProps {
      * 是否可以手动控制 只支持移动端
      */
     controllable?: boolean;
-    /**
-     * 组件高度，可以不写，不写情况下，自动获取高度
-     */
-    height?: string;
     /**
      * 敏感值，设置多少后可以进行切换, 只有在 controllable = true时生效
      */
@@ -53,17 +57,18 @@ interface CarouselStates {
 declare class Carousel extends React.Component<CarouselProps, CarouselStates> {
     readonly prefixCls = "ab-carousel";
     listRef: React.RefObject<HTMLDivElement>;
-    sliderWidth: number;
-    contentWidth: number;
-    isDirectionLeft: boolean;
+    sliderSize: number;
+    contentSize: number;
+    isDirectionLeftOrTop: boolean;
     intersectionObserver: IntersectionObserver;
-    startX: number;
-    prevX: number;
-    moveX: number;
-    endX: number;
+    startSize: number;
+    prevSize: number;
+    moveSize: number;
+    endSize: number;
     autoplayTimer: any;
     fadeEffectTimer: any;
     static defaultProps: {
+        direction: CarouselDirection;
         slidesPerView: number;
         defaultValue: number;
         className: string;
@@ -82,6 +87,8 @@ declare class Carousel extends React.Component<CarouselProps, CarouselStates> {
     next: (transition?: string) => void;
     prev: (transition?: string) => void;
     goTo: (nextIndex: number, transition?: string) => void;
+    isHorizontalDirection: () => boolean;
+    setElementSizeByDirection: (element: HTMLElement, value: string) => void;
     /**
      * 获取滚动元素数量
      */
@@ -103,10 +110,11 @@ declare class Carousel extends React.Component<CarouselProps, CarouselStates> {
     /**
      * 设置容器元素样式，分别是：透明度渐变与位置偏移
      * @param element
-     * @param translateX
+     * @param translateSize
      * @param transition
      */
-    setListStyles: (element: HTMLElement, translateX: number, transition?: string) => void;
+    setListStyles: (element: HTMLElement, translateSize: number, transition?: string) => void;
+    getTouchSize: (event: any) => any;
     /**
      * 开启自动偏移或者渐变，当元素少于2时，将不会开启
      */

package/lib/carousel/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.CarouselDirection = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -41,6 +41,14 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var CarouselDirection;
+exports.CarouselDirection = CarouselDirection;
+
+(function (CarouselDirection) {
+  CarouselDirection["vertical"] = "vertical";
+  CarouselDirection["horizontal"] = "horizontal";
+})(CarouselDirection || (exports.CarouselDirection = CarouselDirection = {}));
+
 var Carousel =
 /** @class */
 function (_super) {
@@ -50,14 +58,15 @@ function (_super) {
     var _this = _super.call(this, props) || this;
 
     _this.prefixCls = 'ab-carousel';
-    _this.listRef = _react.default.createRef();
-    _this.sliderWidth = 0;
-    _this.contentWidth = 0;
-    _this.isDirectionLeft = true;
-    _this.startX = 0;
-    _this.prevX = 0;
-    _this.moveX = 0;
-    _this.endX = 0;
+    _this.listRef = _react.default.createRef(); // 当是horizontal时是width， 否则是height
+
+    _this.sliderSize = 0;
+    _this.contentSize = 0;
+    _this.isDirectionLeftOrTop = true;
+    _this.startSize = 0;
+    _this.prevSize = 0;
+    _this.moveSize = 0;
+    _this.endSize = 0;
     _this.autoplayTimer = null;
     _this.fadeEffectTimer = null;
 
@@ -72,6 +81,20 @@ function (_super) {
     _this.goTo = function (nextIndex, transition) {
       _this.interceptorChangePage(nextIndex - 1, transition);
     };
+
+    _this.isHorizontalDirection = function () {
+      return _this.props.direction === CarouselDirection.horizontal;
+    };
+
+    _this.setElementSizeByDirection = function (element, value) {
+      var isHr = _this.isHorizontalDirection();
+
+      if (isHr) {
+        element.style.width = value;
+      } else {
+        element.style.height = value;
+      }
+    };
     /**
      * 获取滚动元素数量
      */
@@ -104,11 +127,14 @@ function (_super) {
         return;
       }
 
+      var isHr = _this.isHorizontalDirection();
+
       var childCount = _this.getChildCount();
 
-      _this.contentWidth = (0, _utils.getElementSize)(element.parentNode).width; // 没有子元素或者获取不到宽度
+      var parentNodeOffset = (0, _utils.getElementSize)(element.parentNode);
+      _this.contentSize = isHr ? parentNodeOffset.width : parentNodeOffset.height; // 没有子元素或者获取不到宽度
 
-      if (!childCount || !_this.contentWidth) {
+      if (!childCount || !_this.contentSize) {
         return;
       } // 执行一次，控制样式，显示slider
 
@@ -120,23 +146,18 @@ function (_super) {
       }
 
       var currentPage = _this.state.currentPage;
-      var _a = _this.props,
-          slidesPerView = _a.slidesPerView,
-          height = _a.height;
-      _this.sliderWidth = _this.contentWidth / slidesPerView;
-      element.style.width = _this.sliderWidth * childCount + "px";
+      var slidesPerView = _this.props.slidesPerView;
+      _this.sliderSize = _this.contentSize / slidesPerView;
 
-      if (height) {
-        element.style.height = height;
-      }
+      _this.setElementSizeByDirection(element, _this.sliderSize * childCount + "px");
 
       var childList = Array.from(element.children);
       childList.forEach(function (child) {
-        child.style.width = _this.sliderWidth + "px";
+        _this.setElementSizeByDirection(child, _this.sliderSize + "px");
       });
-      _this.prevX = -currentPage * _this.sliderWidth;
+      _this.prevSize = -currentPage * _this.sliderSize;
 
-      _this.setListStyles(element, _this.prevX);
+      _this.setListStyles(element, _this.prevSize);
 
       _this.onAutoplay();
     };
@@ -173,11 +194,11 @@ function (_super) {
           nextPage = 0;
         }
 
-        _this.prevX = -nextPage * _this.sliderWidth;
+        _this.prevSize = -nextPage * _this.sliderSize;
 
         _this.onBeforeChange(nextPage);
 
-        _this.setListStyles(element, _this.prevX, transition);
+        _this.setListStyles(element, _this.prevSize, transition);
 
         _this.setState({
           currentPage: nextPage
@@ -190,12 +211,12 @@ function (_super) {
     /**
      * 设置容器元素样式，分别是：透明度渐变与位置偏移
      * @param element
-     * @param translateX
+     * @param translateSize
      * @param transition
      */
 
 
-    _this.setListStyles = function (element, translateX, transition) {
+    _this.setListStyles = function (element, translateSize, transition) {
       element.style.transition = ''; // 当开启渐变时，直接执行渐变，将没有位置偏移动画
 
       if (_this.props.fadeEffect) {
@@ -211,7 +232,17 @@ function (_super) {
         element.style.transition = transition || _transition.default.TransformEaseInOut;
       }
 
-      element.style.transform = "translateX(" + translateX + "px)";
+      element.style.transform = _this.isHorizontalDirection() ? "translateX(" + translateSize + "px)" : "translateY(" + translateSize + "px)";
+    };
+
+    _this.getTouchSize = function (event) {
+      var isHr = _this.isHorizontalDirection();
+
+      if (event.touches) {
+        return isHr ? event.touches[0].pageX : event.touches[0].pageY;
+      }
+
+      return isHr ? event.clientX : event.clientY;
     };
 
     _this.onBeforeChange = function (currentPage) {
@@ -248,8 +279,8 @@ function (_super) {
 
       event.preventDefault();
       clearTimeout(_this.autoplayTimer);
-      _this.endX = 0;
-      _this.startX = event.touches ? event.touches[0].pageX : event.clientX;
+      _this.endSize = 0;
+      _this.startSize = _this.getTouchSize(event);
 
       var element = _this.getListDomNode();
 
@@ -271,9 +302,9 @@ function (_super) {
       }
 
       event.preventDefault();
-      _this.endX = event.touches ? event.touches[0].pageX : event.clientX;
-      _this.moveX = _this.prevX + _this.endX - _this.startX;
-      _this.isDirectionLeft = _this.prevX - _this.startX <= _this.prevX - _this.endX;
+      _this.endSize = _this.getTouchSize(event);
+      _this.moveSize = _this.prevSize + _this.endSize - _this.startSize;
+      _this.isDirectionLeftOrTop = _this.prevSize - _this.startSize <= _this.prevSize - _this.endSize;
 
       var element = _this.getListDomNode();
 
@@ -281,7 +312,7 @@ function (_super) {
         return;
       }
 
-      element.style.transform = "translateX(" + _this.moveX + "px)";
+      element.style.transform = _this.isHorizontalDirection() ? "translateX(" + _this.moveSize + "px)" : "translateY(" + _this.moveSize + "px)";
     };
     /**
      * 停止滑动，判断用户移动位置，确定用户最终滑动位置
@@ -308,9 +339,9 @@ function (_super) {
       var currentPage = _this.state.currentPage;
       var transition = _transition.default.TransformEaseOut; // 移动的偏移量
 
-      var translateX = Math.abs(_this.startX - _this.endX); // 判断用户未产生滑动，认为是点击
+      var translateSize = Math.abs(_this.startSize - _this.endSize); // 判断用户未产生滑动，认为是点击
 
-      if (_this.endX === 0 || translateX < sensitivity) {
+      if (_this.endSize === 0 || translateSize < sensitivity) {
         if (onClick) {
           onClick(_this.state.currentPage + 1);
         }
@@ -322,7 +353,7 @@ function (_super) {
 
       event.preventDefault(); // 移出左边临界点
 
-      if (_this.moveX >= 0) {
+      if (_this.moveSize >= 0) {
         _this.interceptorChangePage(0, transition);
 
         return;
@@ -331,21 +362,21 @@ function (_super) {
       var childCount = _this.getChildCount(); // 移出右边临界点
 
 
-      var listWidth = _this.sliderWidth * childCount;
-      var moveX = Math.abs(_this.moveX);
+      var listSize = _this.sliderSize * childCount;
+      var moveX = Math.abs(_this.moveSize);
 
-      if (moveX >= listWidth - _this.contentWidth) {
+      if (moveX >= listSize - _this.contentSize) {
         _this.interceptorChangePage(childCount - slidesPerView, transition);
 
         return;
       } // 未达到一页，判断是否超出sensitivity， 超出将加1
 
 
-      var skipOne = translateX % _this.sliderWidth >= _this.props.sensitivity ? 1 : 0; // 滑动的完整页数
+      var skipOne = translateSize % _this.sliderSize >= _this.props.sensitivity ? 1 : 0; // 滑动的完整页数
 
-      var skipCount = Math.floor(translateX / _this.sliderWidth); // 判断是否向左滑动
+      var skipCount = Math.floor(translateSize / _this.sliderSize); // 判断是否向左滑动
 
-      if (_this.isDirectionLeft) {
+      if (_this.isDirectionLeftOrTop) {
         currentPage = currentPage + skipCount + skipOne;
       } else {
         currentPage -= skipCount + skipOne;
@@ -388,9 +419,11 @@ function (_super) {
   Carousel.prototype.componentDidUpdate = function (prevProps) {
     var _this = this;
 
-    var children = this.props.children;
+    var _a = this.props,
+        children = _a.children,
+        direction = _a.direction;
 
-    if (_react.default.Children.count(children) !== _react.default.Children.count(prevProps.children)) {
+    if (_react.default.Children.count(children) !== _react.default.Children.count(prevProps.children) || direction !== prevProps.direction) {
       this.init();
     } // 加入 resize 监听
 
@@ -441,8 +474,9 @@ function (_super) {
         className = _b.className,
         children = _b.children,
         pagination = _b.pagination;
+    var isHr = this.isHorizontalDirection();
     return _react.default.createElement("div", {
-      className: (0, _classnames.default)(cls, className, (_a = {}, _a[cls + "-init"] = this.state.initialized, _a))
+      className: (0, _classnames.default)(cls, className, (_a = {}, _a[cls + "-init"] = this.state.initialized, _a[cls + "-hr"] = isHr, _a[cls + "-vt"] = !isHr, _a))
     }, _react.default.createElement("div", {
       className: cls + "-content"
     }, _react.default.createElement("div", {
@@ -463,6 +497,7 @@ function (_super) {
 
 
   Carousel.defaultProps = {
+    direction: CarouselDirection.horizontal,
     slidesPerView: 1,
     defaultValue: 1,
     className: '',

package/lib/carousel/style/index.css

@@ -1 +1 @@
-.ab-carousel{position:relative}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;float:left;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}
+.ab-carousel{position:relative;height:100%}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}.ab-carousel.ab-carousel-hr .ab-carousel-slider{float:left}

package/lib/carousel/style/index.scss

@@ -1,37 +1,43 @@
-$namespace: ab-carousel;
-
-.#{$namespace} {
-  position: relative;
-
-  &-content {
-    position: relative;
-    display: block;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-  }
-
-  &-list {
-    user-select: none;
-    position: relative;
-    top: 0;
-    left: 0;
-    display: block;
-    overflow: hidden;
-  }
-
-  &-slider {
-    outline: none;
-    overflow: hidden;
-    float: left;
-    display: none;
-  }
-
-  &.#{$namespace}-init {
-    .#{$namespace}-slider {
-      display: block;
-    }
-  }
-}
+$namespace: ab-carousel;
+
+.#{$namespace} {
+  position: relative;
+  height: 100%;
+
+  &-content {
+    position: relative;
+    display: block;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  &-list {
+    user-select: none;
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    overflow: hidden;
+  }
+
+  &-slider {
+    outline: none;
+    overflow: hidden;
+    display: none;
+  }
+
+  &.#{$namespace}-init {
+    .#{$namespace}-slider {
+      display: block;
+    }
+  }
+
+  &.#{$namespace}-hr {
+    .#{$namespace}-slider {
+      float: left;
+    }
+  }
+}

package/lib/checkbox/style/index.scss

@@ -1,118 +1,118 @@
-$namespace: ab-checkbox;
-
-.#{$namespace} {
-  display: inline-block;
-  position: relative;
-  font-size: 0;
-  cursor: pointer;
-
-  &-input {
-    position: absolute;
-    opacity: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    z-index: 2;
-  }
-
-  &-inner {
-    display: inline-block;
-    position: relative;
-    width: .16rem;
-    height: .16rem;
-    transition: all .3s;
-    border: .02rem solid #B0B0B0;
-    border-radius: .02rem;
-    background-color: #fff;
-  }
-
-  &-icon {
-    visibility: hidden;
-    position: absolute;
-    width: .06rem;
-    height: .1rem;
-    left: 20%;
-    top: 40%;
-    transform: rotate(45deg) scale(0) translate(-50%, -50%);
-    transition: all .2s;
-    border: .02rem solid #E84040;
-    border-top: none;
-    border-left: none;
-  }
-
-  &.#{$namespace}-checked {
-    .#{$namespace} {
-      &-icon {
-        visibility: visible;
-        transform: rotate(45deg) scale(1) translate(-50%, -50%);
-      }
-    }
-  }
-
-  &.#{$namespace}-disabled {
-    cursor: not-allowed;
-    color: rgba(0, 0, 0, .25);
-
-    .#{$namespace} {
-      &-inner {
-        border-color: #f0f0f0 !important;
-        background-color: #f5f5f5 !important;
-      }
-
-      &-icon {
-        border-color: #cecece;
-      }
-
-      &-content {
-        text-decoration: none !important;
-      }
-    }
-  }
-
-  &-wrap {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-
-    .#{$namespace} {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      left: 0;
-    }
-
-    &:hover {
-      .#{$namespace}-content {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &-content {
-    padding-left: .24rem;
-    display: inline-block;
-  }
-
-  &-wrap.#{$namespace}-reverse {
-    .#{$namespace} {
-      left: auto;
-      right: 0;
-
-      &-content {
-        padding-left: 0;
-        padding-right: .24rem;
-      }
-    }
-  }
-
-  &-wrap.#{$namespace}-disabled {
-    cursor: not-allowed;
-    color: rgba(0, 0, 0, .25);
-
-    .#{$namespace}-content {
-      text-decoration: none !important;
-    }
-  }
+$namespace: ab-checkbox;
+
+.#{$namespace} {
+  display: inline-block;
+  position: relative;
+  font-size: 0;
+  cursor: pointer;
+
+  &-input {
+    position: absolute;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  &-inner {
+    display: inline-block;
+    position: relative;
+    width: .16rem;
+    height: .16rem;
+    transition: all .3s;
+    border: .02rem solid #B0B0B0;
+    border-radius: .02rem;
+    background-color: #fff;
+  }
+
+  &-icon {
+    visibility: hidden;
+    position: absolute;
+    width: .06rem;
+    height: .1rem;
+    left: 20%;
+    top: 40%;
+    transform: rotate(45deg) scale(0) translate(-50%, -50%);
+    transition: all .2s;
+    border: .02rem solid #E84040;
+    border-top: none;
+    border-left: none;
+  }
+
+  &.#{$namespace}-checked {
+    .#{$namespace} {
+      &-icon {
+        visibility: visible;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+      }
+    }
+  }
+
+  &.#{$namespace}-disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, .25);
+
+    .#{$namespace} {
+      &-inner {
+        border-color: #f0f0f0 !important;
+        background-color: #f5f5f5 !important;
+      }
+
+      &-icon {
+        border-color: #cecece;
+      }
+
+      &-content {
+        text-decoration: none !important;
+      }
+    }
+  }
+
+  &-wrap {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+
+    .#{$namespace} {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      left: 0;
+    }
+
+    &:hover {
+      .#{$namespace}-content {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &-content {
+    padding-left: .24rem;
+    display: inline-block;
+  }
+
+  &-wrap.#{$namespace}-reverse {
+    .#{$namespace} {
+      left: auto;
+      right: 0;
+
+      &-content {
+        padding-left: 0;
+        padding-right: .24rem;
+      }
+    }
+  }
+
+  &-wrap.#{$namespace}-disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, .25);
+
+    .#{$namespace}-content {
+      text-decoration: none !important;
+    }
+  }
 }