@autobest-ui/components 2.2.1 → 2.4.0

package/lib/carousel/index.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@autobest-ui/utils");
-
 var _transition = _interopRequireDefault(require("./transition"));
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -26,31 +20,21 @@ var __extends = void 0 && (void 0).__extends || function () {
         if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       }
     };
-
     return _extendStatics(d, b);
   };
-
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-
     _extendStatics(d, b);
-
     function __() {
       this.constructor = d;
     }
-
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-
-var Carousel =
-/** @class */
-function (_super) {
+var Carousel = /** @class */function (_super) {
   __extends(Carousel, _super);
-
   function Carousel(props) {
     var _this = _super.call(this, props) || this;
-
     _this.prefixCls = 'ab-carousel';
     _this.listRef = /*#__PURE__*/_react.default.createRef();
     _this.sliderWidth = 0;
@@ -62,84 +46,65 @@ function (_super) {
     _this.endX = 0;
     _this.autoplayTimer = null;
     _this.fadeEffectTimer = null;
-
     _this.next = function (transition) {
       _this.interceptorChangePage(_this.state.currentPage + 1, transition);
     };
-
     _this.prev = function (transition) {
       _this.interceptorChangePage(_this.state.currentPage - 1, transition);
     };
-
     _this.goTo = function (nextIndex, transition) {
       _this.interceptorChangePage(nextIndex - 1, transition);
     };
     /**
      * 获取滚动元素数量
      */
-
-
     _this.getChildCount = function () {
       return _react.default.Children.count(_this.props.children);
     };
     /**
      * 获取滚动容器元素
      */
-
-
     _this.getListDomNode = function () {
       if (_this.listRef && _this.listRef.current) {
         return _this.listRef.current;
       }
-
       return null;
     };
     /**
      * 初始化，设置各个元素大小，开启自动滚动
      */
-
-
     _this.init = function () {
       var element = _this.getListDomNode();
-
       if (!element) {
         return;
       }
-
       var childCount = _this.getChildCount();
-
-      _this.contentWidth = (0, _utils.getElementSize)(element.parentNode).width; // 没有子元素或者获取不到宽度
-
+      _this.contentWidth = (0, _utils.getElementSize)(element.parentNode).width;
+      // 没有子元素或者获取不到宽度
       if (!childCount || !_this.contentWidth) {
         return;
-      } // 执行一次，控制样式，显示slider
-
-
+      }
+      // 执行一次，控制样式，显示slider
       if (!_this.state.initialized) {
         _this.setState({
           initialized: true
         });
       }
-
       var currentPage = _this.state.currentPage;
       var _a = _this.props,
-          slidesPerView = _a.slidesPerView,
-          height = _a.height;
+        slidesPerView = _a.slidesPerView,
+        height = _a.height;
       _this.sliderWidth = _this.contentWidth / slidesPerView;
       element.style.width = "".concat(_this.sliderWidth * childCount, "px");
-
       if (height) {
         element.style.height = height;
       }
-
       var childList = Array.from(element.children);
       childList.forEach(function (child) {
         child.style.width = "".concat(_this.sliderWidth, "px");
       });
       _this.prevX = -currentPage * _this.sliderWidth;
-
       _this.setListStyles(element, _this.prevX);
-
       _this.onAutoplay();
     };
     /**
@@ -147,40 +112,28 @@ function (_super) {
      * @param nextPage
      * @param transition
      */
-
-
     _this.interceptorChangePage = function (nextPage, transition) {
       // 停止autoplay
       clearTimeout(_this.autoplayTimer);
-
       var element = _this.getListDomNode();
-
       if (element) {
         var slidesPerView = _this.props.slidesPerView;
-
-        var childCount = _this.getChildCount(); // 内容未超出容器范围， 将恢复原样
-
-
+        var childCount = _this.getChildCount();
+        // 内容未超出容器范围， 将恢复原样
         if (slidesPerView >= childCount) {
           _this.setListStyles(element, 0, transition);
-
           return;
-        } // 已滑动到最左边
-
-
+        }
+        // 已滑动到最左边
         if (nextPage < 0) {
           nextPage = childCount - slidesPerView;
         } else if (nextPage > childCount - slidesPerView) {
           // 已滑动到最右边
           nextPage = 0;
         }
-
         _this.prevX = -nextPage * _this.sliderWidth;
-
         _this.onBeforeChange(nextPage);
-
         _this.setListStyles(element, _this.prevX, transition);
-
         _this.setState({
           currentPage: nextPage
         }, function () {
@@ -195,11 +148,9 @@ function (_super) {
      * @param translateX
      * @param transition
      */
-
-
     _this.setListStyles = function (element, translateX, transition) {
-      element.style.transition = ''; // 当开启渐变时，直接执行渐变，将没有位置偏移动画
-
+      element.style.transition = '';
+      // 当开启渐变时，直接执行渐变，将没有位置偏移动画
       if (_this.props.fadeEffect) {
         clearTimeout(_this.fadeEffectTimer);
         element.style.visibility = 'none';
@@ -212,27 +163,22 @@ function (_super) {
       } else {
         element.style.transition = transition || _transition.default.TransformEaseInOut;
       }
-
       element.style.transform = "translateX(".concat(translateX, "px)");
     };
-
     _this.onBeforeChange = function (currentPage) {
       if (typeof _this.props.onBeforeChange === 'function') {
         _this.props.onBeforeChange(currentPage + 1);
       }
     };
-
     _this.onAfterChange = function () {
       if (typeof _this.props.onAfterChange === 'function') {
         _this.props.onAfterChange(_this.state.currentPage + 1);
       }
     };
-
     _this.onClick = function () {
       if ((0, _utils.isTouchScreen)()) {
         return;
       }
-
       if (_this.props.onClick) {
         _this.props.onClick(_this.state.currentPage + 1);
       }
@@ -241,178 +187,139 @@ function (_super) {
      * 触摸屏触发滑动，缓存触发位置
      * @param event
      */
-
-
     _this.onTouchStart = function (event) {
       if (!_this.props.controllable || _this.props.fadeEffect) {
         return;
       }
-
       event.preventDefault();
       clearTimeout(_this.autoplayTimer);
       _this.endX = 0;
       _this.startX = event.touches ? event.touches[0].pageX : event.clientX;
-
       var element = _this.getListDomNode();
-
       if (!element) {
         return;
       }
-
       element.style.transition = 'none';
     };
     /**
      * 触摸屏触发滑动，计算移动位置，并设置元素偏移
      * @param event
      */
-
-
     _this.onTouchMove = function (event) {
       if (!_this.props.controllable || _this.props.fadeEffect) {
         return;
       }
-
       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;
-
       var element = _this.getListDomNode();
-
       if (!element) {
         return;
       }
-
       element.style.transform = "translateX(".concat(_this.moveX, "px)");
     };
     /**
      * 停止滑动，判断用户移动位置，确定用户最终滑动位置
      * @param event
      */
-
-
     _this.onTouchEnd = function (event) {
       var _a = _this.props,
-          onClick = _a.onClick,
-          controllable = _a.controllable,
-          fadeEffect = _a.fadeEffect,
-          sensitivity = _a.sensitivity,
-          slidesPerView = _a.slidesPerView;
-
+        onClick = _a.onClick,
+        controllable = _a.controllable,
+        fadeEffect = _a.fadeEffect,
+        sensitivity = _a.sensitivity,
+        slidesPerView = _a.slidesPerView;
       if (!controllable || fadeEffect) {
         if (onClick) {
           onClick(_this.state.currentPage + 1);
         }
-
         return;
       }
-
       var currentPage = _this.state.currentPage;
-      var transition = _transition.default.TransformEaseOut; // 移动的偏移量
-
-      var translateX = Math.abs(_this.startX - _this.endX); // 判断用户未产生滑动，认为是点击
-
+      var transition = _transition.default.TransformEaseOut;
+      // 移动的偏移量
+      var translateX = Math.abs(_this.startX - _this.endX);
+      // 判断用户未产生滑动，认为是点击
       if (_this.endX === 0 || translateX < sensitivity) {
         if (onClick) {
           onClick(_this.state.currentPage + 1);
         }
-
         _this.interceptorChangePage(currentPage, transition);
-
         return;
       }
-
-      event.preventDefault(); // 移出左边临界点
-
+      event.preventDefault();
+      // 移出左边临界点
       if (_this.moveX >= 0) {
         _this.interceptorChangePage(0, transition);
-
         return;
       }
-
-      var childCount = _this.getChildCount(); // 移出右边临界点
-
-
+      var childCount = _this.getChildCount();
+      // 移出右边临界点
       var listWidth = _this.sliderWidth * childCount;
       var moveX = Math.abs(_this.moveX);
-
       if (moveX >= listWidth - _this.contentWidth) {
         _this.interceptorChangePage(childCount - slidesPerView, transition);
-
         return;
-      } // 未达到一页，判断是否超出sensitivity， 超出将加1
-
-
-      var skipOne = translateX % _this.sliderWidth >= _this.props.sensitivity ? 1 : 0; // 滑动的完整页数
-
-      var skipCount = Math.floor(translateX / _this.sliderWidth); // 判断是否向左滑动
-
+      }
+      // 未达到一页，判断是否超出sensitivity， 超出将加1
+      var skipOne = translateX % _this.sliderWidth >= _this.props.sensitivity ? 1 : 0;
+      // 滑动的完整页数
+      var skipCount = Math.floor(translateX / _this.sliderWidth);
+      // 判断是否向左滑动
       if (_this.isDirectionLeft) {
         currentPage = currentPage + skipCount + skipOne;
       } else {
         currentPage -= skipCount + skipOne;
       }
-
       _this.interceptorChangePage(currentPage, transition);
     };
-
     _this.state = {
       currentPage: props.defaultValue - 1,
       initialized: false
     };
     return _this;
   }
-
   Carousel.prototype.componentDidMount = function () {
-    var _this = this; // 先执行一遍，解决异步观察延迟问题
-
-
+    var _this = this;
+    // 先执行一遍，解决异步观察延迟问题
     this.init();
     var element = this.getListDomNode();
-
     if (element) {
       // 开启异步观察目标元素
       this.intersectionObserver = new IntersectionObserver(function (entries) {
-        var item = entries[0]; // 未显示
-
+        var item = entries[0];
+        // 未显示
         if (item.intersectionRatio <= 0 || !item.isIntersecting) {
           clearTimeout(_this.autoplayTimer);
           return;
         }
-
         _this.init();
-      }); // 开启 observing
-
+      });
+      // 开启 observing
       this.intersectionObserver.observe(element);
     }
   };
-
   Carousel.prototype.componentDidUpdate = function (prevProps) {
     var _this = this;
-
     var children = this.props.children;
-
     if (_react.default.Children.count(children) !== _react.default.Children.count(prevProps.children)) {
       this.init();
-    } // 加入 resize 监听
-
-
+    }
+    // 加入 resize 监听
     if (this.props.monitorWindowResize && !this.resizeHandler) {
       this.resizeHandler = (0, _utils.addEventListener)(window, 'resize', (0, _utils.throttleWithRAF)(function () {
         return _this.init();
       }));
     }
   };
-
   Carousel.prototype.componentWillUnmount = function () {
     clearTimeout(this.autoplayTimer);
     clearTimeout(this.fadeEffectTimer);
-
     if (this.resizeHandler) {
       this.resizeHandler.remove();
       this.resizeHandler = null;
     }
-
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
     }
@@ -420,29 +327,23 @@ function (_super) {
   /**
    * 开启自动偏移或者渐变，当元素少于2时，将不会开启
    */
-
-
   Carousel.prototype.onAutoplay = function () {
     var _this = this;
-
     if (!this.props.autoplay || this.getChildCount() <= 1) {
       return;
     }
-
     clearTimeout(this.autoplayTimer);
     this.autoplayTimer = setTimeout(function () {
       _this.interceptorChangePage(_this.state.currentPage + 1);
     }, this.props.delay);
   };
-
   Carousel.prototype.render = function () {
     var _a;
-
     var cls = this.prefixCls;
     var _b = this.props,
-        className = _b.className,
-        children = _b.children,
-        pagination = _b.pagination;
+      className = _b.className,
+      children = _b.children,
+      pagination = _b.pagination;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(cls, className, (_a = {}, _a["".concat(cls, "-init")] = this.state.initialized, _a))
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -461,9 +362,8 @@ function (_super) {
         className: "".concat(cls, "-slider")
       }, child);
     }))), typeof pagination === 'function' ? pagination(this) : pagination);
-  }; // 默认值
-
-
+  };
+  // 默认值
   Carousel.defaultProps = {
     slidesPerView: 1,
     defaultValue: 1,
@@ -477,6 +377,5 @@ function (_super) {
   };
   return Carousel;
 }(_react.default.Component);
-
 var _default = Carousel;
 exports.default = _default;

package/lib/checkbox/index.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -22,61 +18,44 @@ var __extends = void 0 && (void 0).__extends || function () {
         if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
       }
     };
-
     return _extendStatics(d, b);
   };
-
   return function (d, b) {
     if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-
     _extendStatics(d, b);
-
     function __() {
       this.constructor = d;
     }
-
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
 }();
-
 var cls = 'ab-checkbox';
-
-var Checkbox =
-/** @class */
-function (_super) {
+var Checkbox = /** @class */function (_super) {
   __extends(Checkbox, _super);
-
   function Checkbox(props) {
     var _this = _super.call(this, props) || this;
-
     _this.onVisibleChange = function () {
       var _a = _this.props,
-          disabled = _a.disabled,
-          onChange = _a.onChange,
-          name = _a.name;
-
+        disabled = _a.disabled,
+        onChange = _a.onChange,
+        name = _a.name;
       if (disabled) {
         return;
       }
-
       var visible = !_this.state.visible;
-
       if (!('checked' in _this.props)) {
         _this.setState({
           visible: visible
         });
       }
-
       onChange(visible, name);
     };
-
     _this.renderBox = function () {
       var _a;
-
       var _b = _this.props,
-          className = _b.className,
-          disabled = _b.disabled,
-          size = _b.size;
+        className = _b.className,
+        disabled = _b.disabled,
+        size = _b.size;
       var visible = _this.state.visible;
       var innerStyle = {
         width: "".concat(size, "px"),
@@ -100,13 +79,11 @@ function (_super) {
         style: iconStyle
       })));
     };
-
     _this.state = {
       visible: props.checked || props.defaultChecked
     };
     return _this;
   }
-
   Checkbox.getDerivedStateFromProps = function (nextProps, prevState) {
     // 如果父级传了 checked 则更新 state
     if ('checked' in nextProps && nextProps.checked !== prevState.visible) {
@@ -114,30 +91,25 @@ function (_super) {
         visible: nextProps.checked
       };
     }
-
     return null;
   };
-
   Checkbox.prototype.render = function () {
     var _a;
-
     var _b = this.props,
-        className = _b.className,
-        disabled = _b.disabled,
-        children = _b.children,
-        reverse = _b.reverse; // 只渲染复选框
-
+      className = _b.className,
+      disabled = _b.disabled,
+      children = _b.children,
+      reverse = _b.reverse;
+    // 只渲染复选框
     if (!children) {
       return this.renderBox();
     }
-
     return /*#__PURE__*/_react.default.createElement("label", {
       className: (0, _classnames.default)("".concat(cls, "-wrap"), className, (_a = {}, _a["".concat(cls, "-reverse")] = reverse, _a["".concat(cls, "-disabled")] = disabled, _a))
     }, this.renderBox(), children ? /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(cls, "-content")
     }, children) : null);
   };
-
   Checkbox.defaultProps = {
     size: 16,
     disabled: false,
@@ -146,6 +118,5 @@ function (_super) {
   };
   return Checkbox;
 }(_react.default.Component);
-
 var _default = Checkbox;
 exports.default = _default;

package/lib/checkbox/style/index.css

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