@autobest-ui/components 2.2.1 → 2.4.0

package/lib/select/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 _trigger = _interopRequireDefault(require("../trigger"));
-
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -26,52 +20,39 @@ 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 __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
-
       for (var p in s) {
         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
       }
     }
-
     return t;
   };
-
   return __assign.apply(this, arguments);
 };
-
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
     if (ar || !(i in from)) {
@@ -81,66 +62,49 @@ var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 };
-
-var Select =
-/** @class */
-function (_super) {
+var Select = /** @class */function (_super) {
   __extends(Select, _super);
-
   function Select(props) {
     var _this = _super.call(this, props) || this;
-
     _this.prefixCls = 'ab-select';
     _this.keydownHandler = null;
     _this.popupContentRef = /*#__PURE__*/_react.default.createRef();
     /**
      * 当支持过滤时，绑定过滤事件
      */
-
     _this.addKeydownListener = function () {
       _this.keydownHandler = (0, _utils.addEventListener)(document, 'keydown', _this.keydownCallback);
     };
-
     _this.removeKeydownListener = function () {
       if (_this.keydownHandler) {
         _this.keydownHandler.remove();
-
         _this.keydownHandler = null;
       }
     };
-
     _this.keydownCallback = function (event) {
       var code = event.keyCode || event.which;
-
       if (code >= 65 && code <= 90 || code >= 48 && code <= 57 || code >= 96 && code <= 105) {
         var findItem_1 = _this.findMatchItem(event.key.toLowerCase());
-
         if (!findItem_1) {
           return;
         }
-
         var _a = _this.props,
-            onFilterChange_1 = _a.onFilterChange,
-            name_1 = _a.name;
+          onFilterChange_1 = _a.onFilterChange,
+          name_1 = _a.name;
         var filterItem = _this.state.filterItem;
-
         if (!filterItem || findItem_1.value !== filterItem.value) {
           _this.setState({
             filterItem: findItem_1
           }, function () {
             if (onFilterChange_1) {
               onFilterChange_1(findItem_1, name_1);
-            } // 通过搜索选择的，将滚动到该元素位置
-
-
+            }
+            // 通过搜索选择的，将滚动到该元素位置
             var element = _this.popupContentRef.current;
-
             if (element && element.parentNode) {
               var elementParentNode = element.parentNode;
-
               if (elementParentNode) {
                 var activeElement = elementParentNode.querySelector(".".concat(_this.prefixCls, "-active"));
-
                 if (activeElement) {
                   // scrollIntoView有问题，设置block为start会带动全局的滚动条
                   elementParentNode.scrollTop = activeElement.offsetTop;
@@ -152,14 +116,12 @@ function (_super) {
         }
       }
     };
-
     _this.findMatchItem = function (inputVal) {
       var list = _this.state.list;
-
       for (var i = 0; i < list.length; i++) {
         for (var j = 0; j < list[i].length; j++) {
-          var item = list[i][j]; // 只对string/number类型进行筛选，
-
+          var item = list[i][j];
+          // 只对string/number类型进行筛选，
           if (!item.unselect && (typeof item.name === 'string' || typeof item.name === 'number')) {
             if (item.name.toString().toLowerCase().indexOf(inputVal) === 0) {
               return item;
@@ -167,105 +129,83 @@ function (_super) {
           }
         }
       }
-
       return null;
     };
     /**
      * 设置显示与隐藏
      */
-
-
     _this.triggerSelect = function (status) {
       if (status === void 0) {
         status = false;
       }
-
       if (_this.state.visible === status) {
         return;
       }
-
       _this.removeKeydownListener();
-
       if (_this.props.isFilterOption && status) {
         _this.addKeydownListener();
-      } // 关闭下拉框，并且已经过滤到数据
-
-
+      }
+      // 关闭下拉框，并且已经过滤到数据
       var filterItem = _this.state.filterItem;
-
       if (filterItem && !status) {
         // 清空filter数据，并触发onChange
         _this.setState({
           filterItem: null
         });
-
         if (filterItem.value !== _this.props.value) {
           _this.props.onChange(filterItem, _this.props.name);
         }
       }
-
       _this.setState({
         visible: status
       });
     };
-
     _this.onTriggerSelect = function () {
       if (_this.props.disabled) {
         return;
       }
-
       _this.triggerSelect(!_this.state.visible);
     };
-
     _this.state = {
       visible: false,
       list: [[]]
     };
     return _this;
   }
-
   Select.getDerivedStateFromProps = function (nextProps) {
     var columnCount = nextProps.columnCount,
-        options = nextProps.options;
-
+      options = nextProps.options;
     if (columnCount <= 1) {
       return {
         list: [__spreadArray([], options, true)]
       };
-    } // 对columnCount值，进行分列，返回一个新的多维数组
-
-
+    }
+    // 对columnCount值，进行分列，返回一个新的多维数组
     var list = [];
-    var maxRow = Math.ceil(options.length / columnCount); // 分列
-
+    var maxRow = Math.ceil(options.length / columnCount);
+    // 分列
     for (var i = 1; i <= columnCount; i++) {
       var startIndex = maxRow * (i - 1);
       var endIndex = maxRow * i;
       var columnList = options.slice(startIndex, endIndex);
       list.push(__spreadArray([], columnList, true));
     }
-
     return {
       list: list
     };
   };
-
   Select.prototype.componentWillUnmount = function () {
     this.removeKeydownListener();
   };
-
   Select.prototype.onSelecting = function (ev, item) {
     var _this = this;
-
     if (ev) {
       ev.stopPropagation();
     }
-
     var _a = this.props,
-        onChange = _a.onChange,
-        value = _a.value,
-        name = _a.name;
-
+      onChange = _a.onChange,
+      value = _a.value,
+      name = _a.name;
     if (item.value !== value) {
       onChange(item, name);
       this.setState({
@@ -276,33 +216,24 @@ function (_super) {
       });
       return;
     }
-
     this.triggerSelect(false);
   };
-
   Select.prototype.renderTitle = function () {
     var title = this.props.title;
-
     if (!title) {
       return null;
     }
-
     var child = _react.default.Children.only(title);
-
     return /*#__PURE__*/_react.default.cloneElement(child, {
       className: (0, _classnames.default)("".concat(this.prefixCls, "-title"), child.props.className)
     });
   };
-
   Select.prototype.renderBottom = function () {
     var bottom = this.props.bottom;
-
     if (!bottom) {
       return null;
     }
-
     var child = _react.default.Children.only(bottom);
-
     return /*#__PURE__*/_react.default.cloneElement(child, {
       className: (0, _classnames.default)("".concat(this.prefixCls, "-bottom"), child.props.className)
     });
@@ -310,11 +241,8 @@ function (_super) {
   /**
    * 下拉框内容
    */
-
-
   Select.prototype.getSelectPopup = function () {
     var _this = this;
-
     var cls = this.prefixCls;
     var filterItem = this.state.filterItem;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderTitle(), /*#__PURE__*/_react.default.createElement("div", {
@@ -326,14 +254,12 @@ function (_super) {
         key: index
       }, col.map(function (item) {
         var _a;
-
         if (item.unselect) {
           return /*#__PURE__*/_react.default.createElement("li", {
             key: "".concat(item.value, "1"),
             className: (0, _classnames.default)(item.className, "".concat(cls, "-unselect"))
           }, item.name);
         }
-
         return /*#__PURE__*/_react.default.createElement("li", {
           key: item.value,
           className: (0, _classnames.default)(item.className, (_a = {}, _a["".concat(cls, "-active")] = filterItem ? filterItem.value === item.value : item.value === _this.props.value, _a)),
@@ -348,41 +274,32 @@ function (_super) {
    * 根据value获取当前的name,并显示出来
    * @returns {*}
    */
-
-
   Select.prototype.getCurrentName = function () {
     var _a = this.props,
-        options = _a.options,
-        value = _a.value;
+      options = _a.options,
+      value = _a.value;
     var filterItem = this.state.filterItem;
-
     if (!(0, _utils.isBlank)(value) || filterItem) {
       var currentItem = options.find(function (item) {
         return filterItem ? filterItem.value === item.value : item.value === value;
       });
-
       if (currentItem) {
         return currentItem.actualName || currentItem.name;
       }
     }
-
     return null;
   };
-
   Select.prototype.render = function () {
     var _a, _b;
-
     var visible = this.state.visible;
-
     var _c = this.props,
-        className = _c.className,
-        placeholder = _c.placeholder,
-        disabled = _c.disabled,
-        hiddenIcon = _c.hiddenIcon,
-        icon = _c.icon,
-        dropClassName = _c.dropClassName,
-        extraProps = __rest(_c, ["className", "placeholder", "disabled", "hiddenIcon", "icon", "dropClassName"]);
-
+      className = _c.className,
+      placeholder = _c.placeholder,
+      disabled = _c.disabled,
+      hiddenIcon = _c.hiddenIcon,
+      icon = _c.icon,
+      dropClassName = _c.dropClassName,
+      extraProps = __rest(_c, ["className", "placeholder", "disabled", "hiddenIcon", "icon", "dropClassName"]);
     var cls = this.prefixCls;
     var currentName = this.getCurrentName();
     return /*#__PURE__*/_react.default.createElement(_trigger.default, __assign({}, extraProps, {
@@ -403,9 +320,8 @@ function (_super) {
     }, currentName || placeholder), hiddenIcon ? null : /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(cls, "-icon")
     }, typeof icon === 'function' ? icon() : icon)));
-  }; // 默认值
-
-
+  };
+  // 默认值
   Select.defaultProps = {
     title: null,
     icon: /*#__PURE__*/_react.default.createElement("svg", {
@@ -431,6 +347,5 @@ function (_super) {
   };
   return Select;
 }(_react.default.Component);
-
 var _default = Select;
 exports.default = _default;

package/lib/select/style/index.css

@@ -1 +1 @@
-.ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
+.ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}.ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:.2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}