shineout 1.7.0-rc.6 → 1.7.0

package/css/Button/styles/button.css

@@ -69,12 +69,42 @@ fieldset[disabled] a.so-button {
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-default {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+}
+@keyframes btn-focus-default {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0 var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.4em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+            box-shadow: 0 0 0 0.8em var(--gray-300-fade-60, rgba(222, 226, 230, 0.6));
+  }
+}
 .so-button-default:focus,
 .so-button-default:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: #fff;
   color: var(--button-default-text-color, #333);
 }
 .so-button-default:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-default 0.4s ease-out;
           animation: btn-focus-default 0.4s ease-out;
   background-color: #fff;
@@ -148,12 +178,42 @@ fieldset[disabled] .so-button-default.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
+@keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
 .so-button-primary:focus,
 .so-button-primary:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: var(--primary-color-dark-btn-hover, #007fff);
   color: #fff;
 }
 .so-button-primary:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-primary 0.4s ease-out;
           animation: btn-focus-primary 0.4s ease-out;
   background-color: var(--primary-color-dark-btn-hover, #007fff);
@@ -242,10 +302,12 @@ fieldset[disabled] .so-button-primary.so-button-outline:not(.so-button-disabled)
 }
 .so-button-secondary:focus,
 .so-button-secondary:hover {
+  border-color: var(--secondary-color, #999999);
   background-color: var(--secondary-color-dark-btn-hover, #808080);
   color: #fff;
 }
 .so-button-secondary:active {
+  border-color: var(--secondary-color, #999999);
   -webkit-animation: btn-focus-secondary 0.4s ease-out;
           animation: btn-focus-secondary 0.4s ease-out;
   background-color: var(--secondary-color-dark-btn-hover, #808080);
@@ -304,12 +366,42 @@ fieldset[disabled] .so-button-secondary.so-button-outline:not(.so-button-disable
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-success {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+}
+@keyframes btn-focus-success {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+            box-shadow: 0 0 0 0 var(--success-color-dark-5_fade-60, rgba(0, 179, 89, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.4em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+            box-shadow: 0 0 0 0.8em var(--success-color-dark-5_fade-0, rgba(0, 179, 89, 0));
+  }
+}
 .so-button-success:focus,
 .so-button-success:hover {
+  border-color: var(--success-color, #00cc66);
   background-color: var(--success-color-dark-btn-hover, #00994d);
   color: #fff;
 }
 .so-button-success:active {
+  border-color: var(--success-color, #00cc66);
   -webkit-animation: btn-focus-success 0.4s ease-out;
           animation: btn-focus-success 0.4s ease-out;
   background-color: var(--success-color-dark-btn-hover, #00994d);
@@ -368,12 +460,42 @@ fieldset[disabled] .so-button-success.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-info {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+}
+@keyframes btn-focus-info {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+            box-shadow: 0 0 0 0 var(--info-color-dark-5_fade-60, rgba(20, 142, 161, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.4em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+            box-shadow: 0 0 0 0.8em var(--info-color-dark-5_fade-0, rgba(20, 142, 161, 0));
+  }
+}
 .so-button-info:focus,
 .so-button-info:hover {
+  border-color: var(--info-color, #17a2b8);
   background-color: var(--info-color-dark-btn-hover, #117a8b);
   color: #fff;
 }
 .so-button-info:active {
+  border-color: var(--info-color, #17a2b8);
   -webkit-animation: btn-focus-info 0.4s ease-out;
           animation: btn-focus-info 0.4s ease-out;
   background-color: var(--info-color-dark-btn-hover, #117a8b);
@@ -432,12 +554,42 @@ fieldset[disabled] .so-button-info.so-button-outline:not(.so-button-disabled):ac
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-warning {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+}
+@keyframes btn-focus-warning {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+            box-shadow: 0 0 0 0 var(--warning-color-dark-5_fade-60, rgba(230, 138, 0, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.4em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+            box-shadow: 0 0 0 0.8em var(--warning-color-dark-5_fade-0, rgba(230, 138, 0, 0));
+  }
+}
 .so-button-warning:focus,
 .so-button-warning:hover {
+  border-color: var(--warning-color, #ff9900);
   background-color: var(--warning-color-dark-btn-hover, #cc7a00);
   color: #fff;
 }
 .so-button-warning:active {
+  border-color: var(--warning-color, #ff9900);
   -webkit-animation: btn-focus-warning 0.4s ease-out;
           animation: btn-focus-warning 0.4s ease-out;
   background-color: var(--warning-color-dark-btn-hover, #cc7a00);
@@ -497,15 +649,45 @@ fieldset[disabled] .so-button-warning.so-button-outline:not(.so-button-disabled)
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
+@-webkit-keyframes btn-focus-danger {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+}
+@keyframes btn-focus-danger {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+            box-shadow: 0 0 0 0 var(--danger-color-dark-5_fade-60, rgba(247, 61, 61, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.4em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+            box-shadow: 0 0 0 0.8em var(--danger-color-dark-5_fade-0, rgba(247, 61, 61, 0));
+  }
+}
 .so-button-error:focus,
 .so-button-danger:focus,
 .so-button-error:hover,
 .so-button-danger:hover {
+  border-color: var(--danger-color, #f85555);
   background-color: var(--danger-color-dark-btn-hover, #f62424);
   color: #fff;
 }
 .so-button-error:active,
 .so-button-danger:active {
+  border-color: var(--danger-color, #f85555);
   -webkit-animation: btn-focus-danger 0.4s ease-out;
           animation: btn-focus-danger 0.4s ease-out;
   background-color: var(--danger-color-dark-btn-hover, #f62424);
@@ -774,6 +956,13 @@ fieldset[disabled] .so-button-link:focus {
 .so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus:before {
   border-left-color: inherit;
 }
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):hover + .so-button:not(.so-button-disabled):before,
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):active + .so-button:not(.so-button-disabled):before,
+.so-button-group .so-button.so-button-outline:not(.so-button-disabled):focus + .so-button:not(.so-button-disabled):before {
+  height: 0;
+  -webkit-transition: none;
+  transition: none;
+}
 .so-button-from-input-group .so-button:before {
   border-left: none;
 }

package/css/Carousel/index.js

@@ -67,6 +67,15 @@ function (_PureComponent) {
     }
   };
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    if (this.$timeout) {
+      clearTimeout(this.$timeout);
+      this.$timeout = null;
+    }
+  };
+
   _proto.setNext = function setNext(next) {
     var _this2 = this;
 

package/css/Cascader/FilterList.js

@@ -190,6 +190,7 @@ function (_Component2) {
         others = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["focus", "getRef", "fixed", "data", "childrenKey", "renderItem", "datum", "expandTrigger", "onChange", "onPathChange", "filterText", "onFilter", "height"]);
     if (!focus) return null;
     return _react.default.createElement("div", (0, _extends2.default)({}, others, {
+      ref: getRef,
       className: (0, _classnames.default)((0, _styles.selectClass)('options'), (0, _styles2.cascaderClass)('filter', expandTrigger === 'hover-only' && 'leaf-only'))
     }), this.renderList());
   };

package/css/Cascader/styles/cascader.css

@@ -1,6 +1,9 @@
 .so-cascader {
   position: relative;
   width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .so-cascader:focus {
   outline: none;
@@ -15,6 +18,9 @@
       flex-flow: wrap;
   padding: 6px 24px 0 12px;
   overflow-y: auto;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
 }
 .so-cascader-result .so-input-placeholder {
   color: var(--input-placeholder-color, #999);
@@ -142,6 +148,10 @@ div.so-cascader-options {
   display: inline-flex;
 }
 .so-cascader-result.so-cascader-compressed {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

package/css/Checkbox/styles/checkinput.css

@@ -215,12 +215,42 @@ fieldset[disabled] .so-checkinput-button .so-checkinput.so-checkinput-radio:acti
 .so-checkinput-button .so-checkinput.so-checkinput-checked:not(.so-checkinput-disabled) {
   z-index: 1;
 }
+@-webkit-keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
+@keyframes btn-focus-primary {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+            box-shadow: 0 0 0 0 var(--primary-color-dark-5_fade-60, rgba(25, 140, 255, 0.6));
+  }
+  50% {
+    -webkit-box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.4em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+  100% {
+    -webkit-box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+            box-shadow: 0 0 0 0.8em var(--primary-color-dark-5_fade-0, rgba(25, 140, 255, 0));
+  }
+}
 .so-checkinput-button .so-checkinput.so-checkinput-checked:focus,
 .so-checkinput-button .so-checkinput.so-checkinput-checked:hover {
+  border-color: var(--primary-color, #3399ff);
   background-color: var(--primary-color-dark-btn-hover, #007fff);
   color: #fff;
 }
 .so-checkinput-button .so-checkinput.so-checkinput-checked:active {
+  border-color: var(--primary-color, #3399ff);
   -webkit-animation: btn-focus-primary 0.4s ease-out;
           animation: btn-focus-primary 0.4s ease-out;
   background-color: var(--primary-color-dark-btn-hover, #007fff);

package/css/DataList/List.js

@@ -59,7 +59,7 @@ function (_Component) {
   var _proto = Index.prototype;
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    (0, _lazyload.removeStack)(this.id);
+    (0, _lazyload.removeStack)(this.id, true);
     this.node = null;
     this.observer = null;
     this.id = null;
@@ -94,12 +94,13 @@ function (_Component) {
   _proto.bindObserver = function bindObserver(node) {
     this.observer = node;
     if (!node) return;
-    (0, _lazyload.removeStack)(this.id);
+    (0, _lazyload.removeStack)(this.id, true);
     this.id = (0, _lazyload.addStack)({
       container: this.node,
       element: node,
       render: this.scrollLoading,
-      offset: 20
+      offset: 20,
+      noRemove: true
     });
   };
 
@@ -117,14 +118,11 @@ function (_Component) {
   _proto.renderItem = function renderItem(value, index) {
     var _this$props = this.props,
         keygen = _this$props.keygen,
-        data = _this$props.data,
         onChange = _this$props.onChange;
-    var length = data.length;
     var haveRowSelected = (0, _is.isFunc)(onChange);
     return _react.default.createElement("div", {
       className: this.getItemClassName(value, index, haveRowSelected),
-      key: (0, _uid.getKey)(value, keygen, index),
-      ref: index === length - 1 ? this.bindObserver : null
+      key: (0, _uid.getKey)(value, keygen, index)
     }, this.renderCheckBox(haveRowSelected, value, index), this.getContent(value, index));
   };
 
@@ -168,7 +166,8 @@ function (_Component) {
         size = _this$props3.size,
         bordered = _this$props3.bordered,
         fixed = _this$props3.fixed,
-        height = _this$props3.height;
+        height = _this$props3.height,
+        scrollLoading = _this$props3.scrollLoading;
     var isEmpty = !(0, _is.isArray)(data) || data.length <= 0;
     var ms = Object.assign({}, style, height && {
       height: height
@@ -183,7 +182,9 @@ function (_Component) {
       size: 40
     }) : loading), _react.default.createElement("div", {
       className: (0, _styles.listClass)('list', isEmpty && 'empty')
-    }, this.renderList(isEmpty)), this.renderFooter());
+    }, this.renderList(isEmpty)), !isEmpty && (0, _is.isFunc)(scrollLoading) && _react.default.createElement("div", {
+      ref: this.bindObserver
+    }), this.renderFooter());
   };
 
   return Index;

package/css/DatePicker/utils.js

@@ -189,9 +189,15 @@ function toDateWithFormat(dirtyDate, fmt, def) {
     date = parse(dirtyDate, fmt, new Date(), {
       weekStartsOn: (0, _locale.getLocale)('startOfWeek')
     });
+    var str = format(date, fmt, {
+      weekStartsOn: (0, _locale.getLocale)('startOfWeek')
+    });
+
+    if (str !== dirtyDate) {
+      date = toDate(dirtyDate);
+    }
   } else date = toDate(dirtyDate);
 
-  if (isInvalid(date)) date = toDate(dirtyDate);
   if (isInvalid(date)) date = def;
   return date;
 }

package/css/EditableArea/EditableArea.js

@@ -45,7 +45,6 @@ function (_React$PureComponent) {
 
     _this = _React$PureComponent.call(this, props) || this;
     _this.state = {
-      value: props.value,
       showTextarea: false
     };
     _this.bindContainer = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'container');
@@ -65,26 +64,16 @@ function (_React$PureComponent) {
   var _proto = Editable.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var value = this.props.value;
     var showTextarea = this.state.showTextarea;
 
     if (prevState.showTextarea !== showTextarea && showTextarea) {
       this.autoFocus();
     }
-
-    if (value !== prevProps.value) {
-      this.setState({
-        value: value
-      });
-    }
   };
 
   _proto.onChange = function onChange(value) {
     var onChange = this.props.onChange;
     if (typeof onChange === 'function') onChange(value);
-    this.setState({
-      value: value
-    });
   };
 
   _proto.onBlur = function onBlur(e) {
@@ -119,13 +108,12 @@ function (_React$PureComponent) {
   };
 
   _proto.renderTextarea = function renderTextarea() {
-    var _this$state = this.state,
-        showTextarea = _this$state.showTextarea,
-        value = _this$state.value;
+    var showTextarea = this.state.showTextarea;
     var _this$props = this.props,
         delay = _this$props.delay,
         placeholder = _this$props.placeholder,
-        maxHeight = _this$props.maxHeight;
+        maxHeight = _this$props.maxHeight,
+        value = _this$props.value;
     if (!showTextarea) return null;
     return _react.default.createElement("div", {
       ref: this.bindContainer
@@ -144,10 +132,10 @@ function (_React$PureComponent) {
   };
 
   _proto.renderInput = function renderInput() {
-    var value = this.state.value;
     var _this$props2 = this.props,
         placeholder = _this$props2.placeholder,
-        disabled = _this$props2.disabled;
+        disabled = _this$props2.disabled,
+        value = _this$props2.value;
     return _react.default.createElement(_Input.default, {
       forwardedRef: this.bindInput,
       placeholder: placeholder,
@@ -159,16 +147,15 @@ function (_React$PureComponent) {
   };
 
   _proto.render = function render() {
-    var _this$state2 = this.state,
-        showTextarea = _this$state2.showTextarea,
-        value = _this$state2.value;
+    var showTextarea = this.state.showTextarea;
     var _this$props3 = this.props,
         width = _this$props3.width,
         style = _this$props3.style,
         className = _this$props3.className,
         bordered = _this$props3.bordered,
         clearable = _this$props3.clearable,
-        getPopupContainer = _this$props3.getPopupContainer;
+        getPopupContainer = _this$props3.getPopupContainer,
+        value = _this$props3.value;
     var cls = (0, _classnames.default)(className, (0, _styles.editableAreaClass)('_', !bordered && 'none-bordered'));
     var ms = Object.assign({
       width: width

package/css/Form/inputable.js

@@ -121,6 +121,8 @@ var _default = (0, _func.curry)(function (Origin) {
           formDatum.bind(name, this.handleUpdate, defaultValue, this.validate);
           this.state.value = formDatum.get(name);
         }
+
+        this.lastValue = this.state.value;
       }
 
       if (bindInputToItem && name && !popover) bindInputToItem(this.errorName);
@@ -181,7 +183,7 @@ var _default = (0, _func.curry)(function (Origin) {
       }
 
       var hasValue = 'value' in this.props || 'checked' in this.props;
-      return !hasValue && !formDatum ? this.state.value : value;
+      return !hasValue ? this.state.value : value;
     };
 
     _proto.getError = function getError() {

package/css/Menu/Item.js

@@ -35,12 +35,8 @@ var _config = require("../config");
 
 var _element = require("../utils/dom/element");
 
-var getBaseIndent = function getBaseIndent(flag) {
-  if (flag === void 0) {
-    flag = false;
-  }
-
-  return flag ? 16 : 20;
+var getBaseIndent = function getBaseIndent() {
+  return 16;
 };
 
 var calcIndent = function calcIndent(flag, indent) {
@@ -231,7 +227,8 @@ function (_PureComponent) {
         renderItem = _this$props5.renderItem,
         data = _this$props5.data,
         index = _this$props5.index,
-        frontCaret = _this$props5.frontCaret;
+        frontCaret = _this$props5.frontCaret,
+        caretColor = _this$props5.caretColor;
     var item = renderItem(data, index);
     var link = this.renderLink(data);
 
@@ -254,12 +251,18 @@ function (_PureComponent) {
 
     if (frontCaret) {
       return _react.default.createElement("a", props, _react.default.createElement("div", {
+        style: {
+          color: caretColor
+        },
         className: (0, _styles.menuClass)('caret', hasChilds && 'has-childs')
       }), item);
     }
 
     return _react.default.createElement("a", props, item, _react.default.createElement("span", {
-      className: (0, _styles.menuClass)('expand')
+      className: (0, _styles.menuClass)('expand'),
+      style: {
+        color: caretColor
+      }
     }));
   };
 
@@ -280,7 +283,8 @@ function (_PureComponent) {
         toggleDuration = _this$props6.toggleDuration,
         frontCaret = _this$props6.frontCaret,
         looseChildren = _this$props6.looseChildren,
-        parentSelectable = _this$props6.parentSelectable;
+        parentSelectable = _this$props6.parentSelectable,
+        frontCaretType = _this$props6.frontCaretType;
     var _this$state = this.state,
         open = _this$state.open,
         isActive = _this$state.isActive,
@@ -296,7 +300,7 @@ function (_PureComponent) {
     }
 
     var hasChilds = looseChildren ? Array.isArray(dChildren) : children.length > 0;
-    var className = (0, _styles.menuClass)('item', isDisabled === true && 'disabled', hasChilds ? 'has-children' : 'no-children', isActive && 'active', open && 'open', isUp && 'open-up', isHighLight && 'highlight', inPath && 'in-path', frontCaret && 'caret-solid', parentSelectable && 'selectable');
+    var className = (0, _styles.menuClass)('item', isDisabled === true && 'disabled', hasChilds ? 'has-children' : 'no-children', isActive && 'active', open && 'open', isUp && 'open-up', isHighLight && 'highlight', inPath && 'in-path', frontCaret && "caret-" + frontCaretType, parentSelectable && 'selectable');
     var style = this.getCalcStyle();
     var events = {};
 
@@ -353,7 +357,9 @@ Item.propTypes = {
   toggleDuration: _propTypes.default.number,
   frontCaret: _propTypes.default.bool,
   looseChildren: _propTypes.default.bool,
-  parentSelectable: _propTypes.default.bool
+  parentSelectable: _propTypes.default.bool,
+  frontCaretType: _propTypes.default.oneOf(['hollow', 'solid']),
+  caretColor: _propTypes.default.string
 };
 
 var _default = (0, _context.consumer)(Item);

package/css/Menu/List.js

@@ -51,7 +51,9 @@ function (_PureComponent) {
         toggleDuration = _this$props.toggleDuration,
         frontCaret = _this$props.frontCaret,
         looseChildren = _this$props.looseChildren,
-        parentSelectable = _this$props.parentSelectable;
+        parentSelectable = _this$props.parentSelectable,
+        frontCaretType = _this$props.frontCaretType,
+        caretColor = _this$props.caretColor;
     var isVertical = mode.indexOf('vertical') === 0;
     var className = (0, _classnames.default)((0, _styles.menuClass)('list', isVertical ? 'vertical' : mode), this.props.className);
     return _react.default.createElement("ul", {
@@ -76,6 +78,8 @@ function (_PureComponent) {
         linkKey: linkKey,
         toggleDuration: toggleDuration,
         frontCaret: frontCaret,
+        frontCaretType: frontCaretType,
+        caretColor: caretColor,
         looseChildren: looseChildren,
         parentSelectable: parentSelectable
       });
@@ -104,7 +108,9 @@ List.propTypes = {
   toggleDuration: _propTypes.default.number,
   frontCaret: _propTypes.default.bool,
   looseChildren: _propTypes.default.bool,
-  parentSelectable: _propTypes.default.bool
+  parentSelectable: _propTypes.default.bool,
+  frontCaretType: _propTypes.default.oneOf(['hollow', 'solid']),
+  caretColor: _propTypes.default.string
 };
 var _default = List;
 exports.default = _default;