shineout 1.6.6 → 1.7.0-rc.4

package/css/Alert/styles/alert.css

@@ -3,7 +3,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  padding: 8px 16px;
+  padding: var(--alert-padding-y, 15px) var(--alert-padding-x, 16px);
   margin-bottom: 20px;
   border: var(--alert-border-width, 1px) solid transparent;
   border-radius: var(--alert-border-radius, 4px);
@@ -23,14 +23,14 @@
   color: inherit;
 }
 .so-alert-with-close {
-  padding-right: 36px;
+  padding-right: calc(var(--alert-padding-x, 16px) + 20px);
 }
 .so-alert-link {
   font-weight: bold;
 }
 .so-alert-close {
   position: absolute;
-  top: 8px;
+  top: var(--alert-padding-y, 15px);
   right: 12px;
   display: block;
 }
@@ -52,7 +52,7 @@
 }
 .so-alert-icon {
   display: block;
-  margin-top: 2px;
+  margin-top: var(--alert-icon-margin-top, 2px);
 }
 .so-alert-content {
   -webkit-box-flex: 1;

package/css/Cascader/Result.js

@@ -31,7 +31,9 @@ var _Input = _interopRequireDefault(require("./Input"));
 
 var _icons = _interopRequireDefault(require("../icons"));
 
-var _More = _interopRequireDefault(require("../Select/More"));
+var _More = _interopRequireWildcard(require("../Select/More"));
+
+var _element = require("../utils/dom/element");
 
 var _is = require("../utils/is");
 
@@ -73,10 +75,15 @@ function (_PureComponent) {
     var _this;
 
     _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      more: -1
+    };
     _this.handleNodeClick = _this.handleNodeClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.renderItem = _this.renderItem.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.removeTargetNode = _this.removeTargetNode.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleUpdate = _this.handleUpdate.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.bindResult = _this.bindResult.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.resetMore = _this.resetMore.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -85,17 +92,72 @@ function (_PureComponent) {
   _proto.componentDidMount = function componentDidMount() {
     var datum = this.props.datum;
     datum.subscribe(_types.CHANGE_TOPIC, this.handleUpdate);
+    var compressed = this.props.compressed;
+
+    if (compressed) {
+      this.cancelResizeObserver = (0, _element.addResizeObserver)(this.resultEl, this.resetMore);
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(preProps) {
+    var _this$props = this.props,
+        compressed = _this$props.compressed,
+        _this$props$value = _this$props.value,
+        value = _this$props$value === void 0 ? [] : _this$props$value,
+        onFilter = _this$props.onFilter;
+
+    if (compressed) {
+      if ((preProps.value || []).join('') !== value.join('')) {
+        this.resetMore();
+      } else if (value.length && this.shouldResetMore) {
+        this.shouldResetMore = false;
+        this.state.more = (0, _More.getResetMore)(onFilter, this.resultEl, [].concat(this.resultEl.querySelectorAll("." + (0, _styles3.cascaderClass)('item'))));
+        this.forceUpdate();
+      }
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(preProps) {
+    var _this$props2 = this.props,
+        compressed = _this$props2.compressed,
+        _this$props2$value = _this$props2.value,
+        value = _this$props2$value === void 0 ? [] : _this$props2$value,
+        onFilter = _this$props2.onFilter;
+
+    if (compressed) {
+      if ((preProps.value || []).join('') !== value.join('')) {
+        this.shouldResetMore = true;
+        this.state.more = -1;
+        this.forceUpdate();
+      } else if (value.length && this.shouldResetMore) {
+        this.shouldResetMore = false;
+        this.state.more = (0, _More.getResetMore)(onFilter, this.resultEl, [].concat(this.resultEl.querySelectorAll("." + (0, _styles3.cascaderClass)('item'))));
+        this.forceUpdate();
+      }
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     var datum = this.props.datum;
     datum.unsubscribe(_types.CHANGE_TOPIC, this.handleUpdate);
+    if (this.cancelResizeObserver) this.cancelResizeObserver();
   };
 
   _proto.handleUpdate = function handleUpdate() {
     this.forceUpdate();
   };
 
+  _proto.bindResult = function bindResult(el) {
+    this.resultEl = el;
+  };
+
+  _proto.resetMore = function resetMore() {
+    if (!this.props.compressed) return;
+    this.shouldResetMore = true;
+    this.state.more = -1;
+    this.forceUpdate();
+  };
+
   _proto.handleNodeClick = function handleNodeClick(data, show) {
     if (show === void 0) {
       show = false;
@@ -150,11 +212,11 @@ function (_PureComponent) {
   };
 
   _proto.renderClear = function renderClear() {
-    var _this$props = this.props,
-        clearable = _this$props.clearable,
-        value = _this$props.value,
-        disabled = _this$props.disabled,
-        onClear = _this$props.onClear;
+    var _this$props3 = this.props,
+        clearable = _this$props3.clearable,
+        value = _this$props3.value,
+        disabled = _this$props3.disabled,
+        onClear = _this$props3.onClear;
     var className = (0, _classnames.default)((0, _styles2.selectClass)('indicator', 'close'), (0, _styles3.cascaderClass)('close'));
 
     if (clearable && value.length > 0 && !disabled) {
@@ -194,30 +256,31 @@ function (_PureComponent) {
   };
 
   _proto.renderMore = function renderMore(list) {
-    var _this$props2 = this.props,
-        selectId = _this$props2.selectId,
-        size = _this$props2.size,
-        compressed = _this$props2.compressed;
-    var firstItem = list[0];
-    return [firstItem, _react.default.createElement(_More.default, {
+    var _this$props4 = this.props,
+        selectId = _this$props4.selectId,
+        size = _this$props4.size,
+        compressed = _this$props4.compressed;
+    var more = this.state.more;
+    return [_react.default.createElement(_More.default, {
       key: "more",
       data: list,
       className: (0, _styles3.cascaderClass)('item', 'item-compressed'),
       popoverClassName: (0, _styles3.cascaderClass)('popover'),
       contentClassName: (0, _styles3.cascaderClass)('result', size),
       dataId: selectId,
+      showNum: more,
       compressed: compressed
     })];
   };
 
   _proto.renderInput = function renderInput() {
-    var _this$props3 = this.props,
-        onFilter = _this$props3.onFilter,
-        focus = _this$props3.focus,
-        trim = _this$props3.trim,
-        focusSelected = _this$props3.focusSelected,
-        bindInput = _this$props3.bindInput,
-        filterText = _this$props3.filterText;
+    var _this$props5 = this.props,
+        onFilter = _this$props5.onFilter,
+        focus = _this$props5.focus,
+        trim = _this$props5.trim,
+        focusSelected = _this$props5.focusSelected,
+        bindInput = _this$props5.bindInput,
+        filterText = _this$props5.filterText;
     return _react.default.createElement(_Input.default, {
       filterText: filterText,
       ref: bindInput,
@@ -230,9 +293,9 @@ function (_PureComponent) {
   };
 
   _proto.renderPlaceholder = function renderPlaceholder() {
-    var _this$props4 = this.props,
-        focus = _this$props4.focus,
-        onFilter = _this$props4.onFilter;
+    var _this$props6 = this.props,
+        focus = _this$props6.focus,
+        onFilter = _this$props6.onFilter;
 
     if (focus && onFilter) {
       return this.renderInput();
@@ -245,10 +308,10 @@ function (_PureComponent) {
   };
 
   _proto.renderIndicator = function renderIndicator() {
-    var _this$props5 = this.props,
-        multiple = _this$props5.multiple,
-        showArrow = _this$props5.showArrow,
-        compressed = _this$props5.compressed;
+    var _this$props7 = this.props,
+        multiple = _this$props7.multiple,
+        showArrow = _this$props7.showArrow,
+        compressed = _this$props7.compressed;
     if (!showArrow || multiple && !compressed) return null;
     var showCaret = !multiple; // eslint-disable-next-line
 
@@ -260,14 +323,14 @@ function (_PureComponent) {
   };
 
   _proto.renderResult = function renderResult() {
-    var _this$props6 = this.props,
-        datum = _this$props6.datum,
-        value = _this$props6.value,
-        renderItem = _this$props6.renderItem,
-        renderResult = _this$props6.renderResult,
-        compressed = _this$props6.compressed,
-        focus = _this$props6.focus,
-        onFilter = _this$props6.onFilter;
+    var _this$props8 = this.props,
+        datum = _this$props8.datum,
+        value = _this$props8.value,
+        renderItem = _this$props8.renderItem,
+        renderResult = _this$props8.renderResult,
+        compressed = _this$props8.compressed,
+        focus = _this$props8.focus,
+        onFilter = _this$props8.onFilter;
     var nodes = value.map(function (v) {
       return datum.getDataById(v);
     });
@@ -283,7 +346,7 @@ function (_PureComponent) {
 
     var items = this.handleNode(nodes, render);
 
-    if (compressed && items.length > 1) {
+    if (compressed) {
       items = this.renderMore(items);
     }
 
@@ -297,13 +360,14 @@ function (_PureComponent) {
   };
 
   _proto.render = function render() {
-    var _this$props7 = this.props,
-        style = _this$props7.style,
-        value = _this$props7.value,
-        compressed = _this$props7.compressed,
-        multiple = _this$props7.multiple;
+    var _this$props9 = this.props,
+        style = _this$props9.style,
+        value = _this$props9.value,
+        compressed = _this$props9.compressed,
+        multiple = _this$props9.multiple;
     var result = value.length === 0 ? this.renderPlaceholder() : this.renderResult();
     return _react.default.createElement("div", {
+      ref: this.bindResult,
       className: (0, _styles3.cascaderClass)('result', multiple && compressed && 'compressed'),
       style: style
     }, result, this.renderIndicator(), this.renderClear());

package/css/Cascader/styles/cascader.css

@@ -40,7 +40,6 @@
 }
 .so-cascader-result span-compressed > span,
 .so-cascader-result .so-cascader-item-compressed > span {
-  vertical-align: middle;
   letter-spacing: 2px;
   padding: 0;
   margin: 0;
@@ -152,16 +151,20 @@ div.so-cascader-options {
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   padding: 6px 34px 0 12px;
 }
-.so-cascader-result.so-cascader-compressed .so-cascader-item:first-child {
+.so-cascader-result.so-cascader-compressed .so-cascader-item {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  width: 0;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.so-cascader-result.so-cascader-compressed .so-cascader-input {
+  white-space: nowrap;
 }
 .so-cascader-result.so-cascader-compressed .so-cascader-close {
   right: 9px;

package/css/DatePicker/Day.js

@@ -102,15 +102,11 @@ function (_PureComponent) {
         min = _this$props3.min,
         max = _this$props3.max,
         index = _this$props3.index,
-        value = _this$props3.value; // if has value use value time
-
+        value = _this$props3.value;
     var current = index === sync && value || this.formatWithDefaultTime(sync);
     var onChange = typeof sync === 'number' ? this.props.onChangeSync.bind(this.props, sync) : this.props.onChange;
 
     if (type === 'week') {
-      // if (date.getDay() === 0) {
-      //   date = utils.subDays(date, 1)
-      // }
       onChange.apply(void 0, _utils.default.weekHandleChangeParams(date, true, true));
     } else {
       var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), current.getHours(), current.getMinutes(), current.getSeconds()); // only can select day with the same day of min/max
@@ -223,7 +219,7 @@ function (_PureComponent) {
     return _react.default.createElement("div", (0, _extends2.default)({
       key: date.getTime(),
       className: hoverClass,
-      onClick: isDisabled ? undefined : this.handleDayClick.bind(this, date, minD, maxD),
+      onClick: isDisabled ? undefined : this.handleDayClick.bind(this, date),
       onDoubleClick: isDisabled ? undefined : this.handleDayDoubleClick.bind(this, date)
     }, hoverProps), _react.default.createElement("span", {
       className: _styles.datepickerClass.apply(void 0, classList)

package/css/Datum/List.js

@@ -45,6 +45,11 @@ function () {
 
   var _proto = _default.prototype;
 
+  // should clean $cachedFlatten when data changed
+  _proto.cleanDataCache = function cleanDataCache() {
+    this.$cachedFlatten = new Map();
+  };
+
   _proto.setDisabled = function setDisabled(disabled) {
     if (this.$cachedDisabled === disabled) return;
     this.$cachedDisabled = disabled;

package/css/Form/FieldSet.js

@@ -192,9 +192,9 @@ function (_Component) {
     if (values.length === 0 && empty) {
       result.push(empty(this.handleInsert.bind(this, 0)));
     } else {
-      var errorList = Array.isArray(errors) ? errors : [];
+      var errorList = (Array.isArray(errors) ? errors : [errors]).filter(Boolean);
+      console.log(errorList);
       values.forEach(function (v, i) {
-        var error = errorList[i];
         result.push(_react.default.createElement(Provider, {
           key: i,
           value: {
@@ -205,7 +205,7 @@ function (_Component) {
           list: values,
           value: v,
           index: i,
-          error: error,
+          error: errorList,
           datum: formDatum,
           onChange: _this5.handleChange.bind(_this5, i),
           onInsert: _this5.handleInsert.bind(_this5, i),

package/css/Form/Form.js

@@ -60,6 +60,9 @@ function (_Component) {
       validate: function validate() {
         return _this.props.datum.validate();
       },
+      validateFields: function validateFields(fields) {
+        return _this.props.datum.validateFields(fields).catch(function () {});
+      },
       clearValidate: function clearValidate() {
         _this.props.datum.validateClear();
       },

package/css/Form/formContext.js

@@ -102,7 +102,8 @@ var formProvider = function formProvider(Origin) {
           labelWidth = _this$props.labelWidth,
           disabled = _this$props.disabled,
           pending = _this$props.pending,
-          mode = _this$props.mode;
+          mode = _this$props.mode,
+          size = _this$props.size;
       var value = {
         formDatum: datum,
         formMode: mode,
@@ -110,6 +111,7 @@ var formProvider = function formProvider(Origin) {
         labelAlign: labelAlign,
         labelVerticalAlign: labelVerticalAlign,
         labelWidth: labelWidth,
+        size: size,
         combineRules: this.combineRules,
         groupValidate: this.groupValidate
       };
@@ -130,7 +132,8 @@ var formProvider = function formProvider(Origin) {
     mode: _propTypes.default.string,
     pending: _propTypes.default.bool,
     rule: _propTypes.default.object,
-    rules: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object])
+    rules: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
+    size: _propTypes.default.string
   };
   return FormProvider;
 };

package/css/Form/inputable.js

@@ -49,7 +49,7 @@ var _Loop = require("./Loop");
 
 var _FieldSet = require("./FieldSet");
 
-var types = ['formDatum', 'disabled', 'combineRules'];
+var types = ['formDatum', 'disabled', 'combineRules', 'size'];
 var consumer = (0, _func.compose)((0, _formContext.formConsumer)(types), _Item.itemConsumer, _Loop.loopConsumer, _FieldSet.fieldSetConsumer);
 
 var tryValue = function tryValue(val, def) {
@@ -187,7 +187,12 @@ var _default = (0, _func.curry)(function (Origin) {
     _proto.getError = function getError() {
       var _this$props4 = this.props,
           formDatum = _this$props4.formDatum,
-          name = _this$props4.name;
+          name = _this$props4.name,
+          error = _this$props4.error;
+
+      if ('error' in this.props) {
+        return error;
+      }
 
       if (formDatum && name) {
         return formDatum.getError(this.errorName);
@@ -416,7 +421,8 @@ var _default = (0, _func.curry)(function (Origin) {
     type: _propTypes.default.string,
     unbindInputFromItem: _propTypes.default.func,
     value: _propTypes.default.any,
-    scuSkip: _propTypes.default.array
+    scuSkip: _propTypes.default.array,
+    error: _propTypes.default.object
   }), (0, _defineProperty2.default)(_class, "defaultProps", {
     rules: [],
     scuSkip: ['onChange', 'rules']

package/css/Menu/styles/menu.css

@@ -63,9 +63,12 @@
   position: absolute;
   top: 50%;
   right: 16px;
-  -webkit-transform: translateY(-65%) rotate(0deg);
-      -ms-transform: translateY(-65%) rotate(0deg);
-          transform: translateY(-65%) rotate(0deg);
+  -webkit-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-transform: translateY(-50%) rotate(0deg);
+      -ms-transform: translateY(-50%) rotate(0deg);
+          transform: translateY(-50%) rotate(0deg);
 }
 .so-menu-highlight > .so-menu-title {
   color: var(--primary-color, #3399ff);
@@ -74,9 +77,9 @@
   display: none;
 }
 .so-menu-list .so-menu-has-children.so-menu-open > .so-menu-title .so-menu-expand:after {
-  -webkit-transform: translateY(-65%) rotate(180deg);
-      -ms-transform: translateY(-65%) rotate(180deg);
-          transform: translateY(-65%) rotate(180deg);
+  -webkit-transform: translateY(-50%) rotate(180deg);
+      -ms-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
 }
 .so-menu-list .so-menu-has-children.so-menu-open > .so-menu-list {
   display: block;
@@ -220,9 +223,9 @@ ul.so-menu-root {
 }
 .so-menu-vertical .so-menu-has-children > .so-menu-title .so-menu-expand:after,
 .so-menu-vertical .so-menu-has-children.so-menu-open > .so-menu-title .so-menu-expand:after {
-  -webkit-transform: translateY(-65%) rotate(270deg);
-      -ms-transform: translateY(-65%) rotate(270deg);
-          transform: translateY(-65%) rotate(270deg);
+  -webkit-transform: translateY(-50%) rotate(270deg);
+      -ms-transform: translateY(-50%) rotate(270deg);
+          transform: translateY(-50%) rotate(270deg);
 }
 .so-menu-vertical .so-menu-root .so-menu-open-up .so-menu-list {
   top: auto;
@@ -375,6 +378,10 @@ ul.so-menu-root {
 .so-menu-dark.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a {
   color: var(--menu-dark-color, #bfbfbf);
 }
+.so-menu-dark.so-menu-inline .so-menu-in-path.so-menu-has-children > a:hover,
+.so-menu-dark.so-menu-horizontal .so-menu-in-path.so-menu-has-children > a:hover {
+  color: var(--menu-item-dark-hover-color, #fff);
+}
 .so-menu .so-menu-has-children.so-menu-caret-solid.so-menu-open > .so-menu-title .so-menu-caret {
   -webkit-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
@@ -436,9 +443,9 @@ ul.so-menu-root {
   right: 0;
 }
 .so-menu.so-menu-rtl .so-menu-has-children.so-menu-open > .so-menu-title:after {
-  -webkit-transform: translateY(-65%) rotate(180deg);
-      -ms-transform: translateY(-65%) rotate(180deg);
-          transform: translateY(-65%) rotate(180deg);
+  -webkit-transform: translateY(-50%) rotate(180deg);
+      -ms-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
 }
 .so-menu.so-menu-rtl .so-menu-has-children.so-menu-caret-solid > .so-menu-title .so-menu-caret {
   margin-right: 0;

package/css/Progress/Circle.js

@@ -25,7 +25,7 @@ function Circle(props) {
       background = props.background,
       strokeLinecap = props.strokeLinecap;
   var className = (0, _classnames.default)((0, _styles.progressClass)('circle', type), props.className);
-  var r = 100 - Math.ceil(strokeWidth * 2 / size * 100);
+  var r = 100 - Math.ceil(strokeWidth / size * 100);
   var p = Math.PI * 2 * r;
   var dasharray = [p * (value / 100), p * (1 - value / 100)];
   var style = Object.assign({

package/css/Rate/Rate.js

@@ -165,7 +165,7 @@ function (_PureComponent) {
         key: v // the allowHalf only for the front same as background
         ,
         style: Object.assign({
-          visibility: !allowHalf && !disabled && value > v ? 'hidden' : 'visible'
+          visibility: !disabled && Math.floor(value) > v ? 'hidden' : 'visible'
         }, style)
       }, _this3.getIcon(background, v, true));
     }));

package/css/Select/More.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.getResetMore = getResetMore;
 exports.default = void 0;
 
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
@@ -17,8 +18,60 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _element = require("../utils/dom/element");
+
 var _Popover = _interopRequireDefault(require("../Popover"));
 
+function getResetMore(onFilter, container, items) {
+  if (!container || !items || !items.length) return -1;
+  var style = getComputedStyle(container);
+  var clientWidth = container.clientWidth;
+  var paddingLeft = (0, _element.parsePxToNumber)(style.paddingLeft);
+  var paddingRight = (0, _element.parsePxToNumber)(style.paddingRight);
+  var minFilterWidth = onFilter ? 16 : 0;
+  var contentWidth = clientWidth - paddingLeft - paddingRight - minFilterWidth - 1;
+  var hideEl = items.pop();
+  var hideElStyle = getComputedStyle(hideEl);
+  var hideMargin = (0, _element.parsePxToNumber)(hideElStyle.marginLeft) + (0, _element.parsePxToNumber)(hideElStyle.marginRight);
+  var num = 0;
+  var sumWidth = 0;
+  var itemWidthArr = items.map(function (item) {
+    var itemStyle = getComputedStyle(item);
+    var itemLen = item.offsetWidth + (0, _element.parsePxToNumber)(itemStyle.marginLeft) + (0, _element.parsePxToNumber)(itemStyle.marginRight);
+    sumWidth += itemLen;
+    return itemLen;
+  });
+
+  if (sumWidth <= contentWidth) {
+    num = -1;
+  } else {
+    var len = 0;
+
+    for (var i = 0; i < itemWidthArr.length; i++) {
+      var itemLen = itemWidthArr[i]; // number length
+
+      var reset = "+" + (items.length - 1 - i);
+      hideEl.childNodes[0].innerText = reset; // (+num) width
+
+      var moreWidth = hideEl.offsetWidth + hideMargin;
+      len += itemLen;
+
+      if (len > contentWidth - moreWidth) {
+        break;
+      }
+
+      num += 1;
+
+      if (i === items.length - 1) {
+        // not show more
+        num = -1;
+      }
+    }
+  }
+
+  return num;
+}
+
 var More =
 /*#__PURE__*/
 function (_Component) {
@@ -52,13 +105,28 @@ function (_Component) {
         dataId = _this$props.dataId,
         trigger = _this$props.trigger,
         compressed = _this$props.compressed,
-        cls = _this$props.cls;
+        cls = _this$props.cls,
+        showNum = _this$props.showNum;
     var status = this.state.status;
-    if (data.length <= 1) return data;
-    var firstItem = data[0],
-        items = data.slice(1);
-    var itemsLength = items.length;
-    return _react.default.createElement("a", {
+    if (showNum < 0 || showNum > data.length) return _react.default.createElement(_react.default.Fragment, null, data, _react.default.createElement("a", {
+      key: "hidden",
+      className: className,
+      style: {
+        position: 'absolute',
+        zIndex: '-100',
+        userSelect: 'none',
+        msUserSelect: 'none',
+        contain: 'layout'
+      }
+    }, _react.default.createElement("span", null, "+")));
+    var before = new Array(showNum).fill().map(function (item, index) {
+      return data[index];
+    });
+    var after = new Array(data.length - showNum).fill().map(function (item, index) {
+      return data[showNum + index];
+    });
+    var itemsLength = after.length;
+    return _react.default.createElement(_react.default.Fragment, null, before, _react.default.createElement("a", {
       tabIndex: -1,
       key: "more",
       className: (0, _classnames.default)(className, cls && status && cls('item-more'))
@@ -71,7 +139,7 @@ function (_Component) {
     }, _react.default.createElement("div", {
       className: contentClassName,
       "data-id": dataId
-    }, compressed === 'no-repeat' ? null : firstItem, items)));
+    }, compressed === 'no-repeat' ? null : before, after))));
   };
 
   return More;
@@ -88,7 +156,8 @@ More.propTypes = {
   dataId: _propTypes.default.string,
   trigger: _propTypes.default.string,
   compressed: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  cls: _propTypes.default.func
+  cls: _propTypes.default.func,
+  showNum: _propTypes.default.number
 };
 var _default = More;
 exports.default = _default;