shineout 1.8.0-rc.4 → 1.8.0

package/css/AnimationList/AbsoluteList.js

@@ -41,6 +41,8 @@ var _context2 = _interopRequireDefault(require("../Modal/context"));
 
 var _config = require("../config");
 
+var _zoom = require("../utils/zoom");
+
 var PICKER_V_MARGIN = 4;
 var root;
 
@@ -89,6 +91,7 @@ function _default(List) {
         props.getResetPosition(_this.resetPosition.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))));
       }
 
+      _this.zoomChangeHandler = _this.zoomChangeHandler.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
       return _this;
     }
 
@@ -103,6 +106,10 @@ function _default(List) {
           this.forceUpdate();
         }
       }
+
+      if (this.props.absolute) {
+        (0, _zoom.addZoomListener)(this.zoomChangeHandler);
+      }
     };
 
     _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
@@ -118,6 +125,7 @@ function _default(List) {
     _proto.componentWillUnmount = function componentWillUnmount() {
       var absolute = this.props.absolute;
       if (!absolute) return;
+      (0, _zoom.removeZoomListener)(this.zoomChangeHandler);
 
       if (this.container) {
         this.container.removeChild(this.element);
@@ -125,9 +133,7 @@ function _default(List) {
     };
 
     _proto.getPosition = function getPosition(rect) {
-      var _this$props = this.props,
-          fixed = _this$props.fixed,
-          absolute = _this$props.absolute;
+      var fixed = this.props.fixed;
       var position = this.props.position;
       var rtl = (0, _config.isRTL)();
       var style = {
@@ -148,34 +154,13 @@ function _default(List) {
         position = (0, _strings.getRTLPosition)(position);
       }
 
-      var containerScroll;
-      var containerRect;
       var container = this.container;
-
-      if (typeof absolute === 'function' && container) {
-        containerRect = container.getBoundingClientRect();
-        containerScroll = {
-          left: container.scrollLeft,
-          top: container.scrollTop
-        };
-
-        if (rtl) {
-          containerScroll.width = container.scrollWidth;
-        }
-      } else {
-        containerRect = {
-          left: 0,
-          top: 0,
-          right: 0,
-          bottom: 0
-        };
-        containerScroll = _document.docScroll;
-
-        if (rtl) {
-          containerRect.width = document.documentElement.clientWidth || document.body.clientWidth;
-        }
-      }
-
+      var rootContainer = container === root || !container ? document.body : container;
+      var containerRect = rootContainer.getBoundingClientRect();
+      var containerScroll = {
+        left: rootContainer.scrollLeft,
+        top: rootContainer.scrollTop
+      };
       this.containerRect = containerRect;
 
       if (listPosition.includes(position)) {
@@ -194,12 +179,12 @@ function _default(List) {
         if (h === 'left') {
           style.left = rect.left - containerRect.left + containerScroll.left;
         } else {
-          style.left = rect.right - containerRect.right + containerScroll.left;
+          style.left = rect.right - containerRect.left + containerScroll.left;
           style.transform = 'translateX(-100%)';
         }
 
         if (v === 'bottom') {
-          style.top = rect.bottom - containerRect.bottom + containerScroll.top + PICKER_V_MARGIN;
+          style.top = rect.bottom - containerRect.top + containerScroll.top + PICKER_V_MARGIN;
         } else {
           style.top = rect.top - containerRect.top + containerScroll.top - PICKER_V_MARGIN;
           style.transform = style.transform ? 'translate(-100%, -100%)' : 'translateY(-100%)';
@@ -215,10 +200,10 @@ function _default(List) {
     };
 
     _proto.getStyle = function getStyle() {
-      var _this$props2 = this.props,
-          parentElement = _this$props2.parentElement,
-          scrollElement = _this$props2.scrollElement,
-          focus = _this$props2.focus;
+      var _this$props = this.props,
+          parentElement = _this$props.parentElement,
+          scrollElement = _this$props.scrollElement,
+          focus = _this$props.focus;
       var lazyResult = {
         focus: focus,
         style: this.lastStyle
@@ -248,10 +233,16 @@ function _default(List) {
       };
     };
 
+    _proto.zoomChangeHandler = function zoomChangeHandler() {
+      if (this.props.focus) {
+        this.forceUpdate();
+      }
+    };
+
     _proto.resetPosition = function resetPosition(clean) {
-      var _this$props3 = this.props,
-          focus = _this$props3.focus,
-          parentElement = _this$props3.parentElement;
+      var _this$props2 = this.props,
+          focus = _this$props2.focus,
+          parentElement = _this$props2.parentElement;
       if (!this.el || !focus || this.ajustdoc && !clean) return;
       var pos = this.el.getBoundingClientRect();
       var left = pos.left;
@@ -286,21 +277,21 @@ function _default(List) {
     };
 
     _proto.renderList = function renderList() {
-      var _this$props4 = this.props,
-          parentElement = _this$props4.parentElement,
-          absolute = _this$props4.absolute,
-          focus = _this$props4.focus,
-          rootClass = _this$props4.rootClass,
-          position = _this$props4.position,
-          scrollLeft = _this$props4.scrollLeft,
-          scrollTop = _this$props4.scrollTop,
-          scrollElement = _this$props4.scrollElement,
-          _this$props4$style = _this$props4.style,
-          style = _this$props4$style === void 0 ? {} : _this$props4$style,
-          zIndex = _this$props4.zIndex,
-          getResetPosition = _this$props4.getResetPosition,
-          ignore = _this$props4.autoAdapt,
-          props = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["parentElement", "absolute", "focus", "rootClass", "position", "scrollLeft", "scrollTop", "scrollElement", "style", "zIndex", "getResetPosition", "autoAdapt"]);
+      var _this$props3 = this.props,
+          parentElement = _this$props3.parentElement,
+          absolute = _this$props3.absolute,
+          focus = _this$props3.focus,
+          rootClass = _this$props3.rootClass,
+          position = _this$props3.position,
+          scrollLeft = _this$props3.scrollLeft,
+          scrollTop = _this$props3.scrollTop,
+          scrollElement = _this$props3.scrollElement,
+          _this$props3$style = _this$props3.style,
+          style = _this$props3$style === void 0 ? {} : _this$props3$style,
+          zIndex = _this$props3.zIndex,
+          getResetPosition = _this$props3.getResetPosition,
+          ignore = _this$props3.autoAdapt,
+          props = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["parentElement", "absolute", "focus", "rootClass", "position", "scrollLeft", "scrollTop", "scrollElement", "style", "zIndex", "getResetPosition", "autoAdapt"]);
       var parsed = parseInt(zIndex, 10);
       if (!Number.isNaN(parsed)) style.zIndex = parsed;
       var mergeStyle = Object.assign({}, style, this.state.overdoc ? getOverDocStyle() : undefined);
@@ -325,20 +316,20 @@ function _default(List) {
       }
 
       if (!this.container) return null;
-      var _this$props5 = this.props,
-          parentElement = _this$props5.parentElement,
-          rootClass = _this$props5.rootClass,
-          absolute = _this$props5.absolute,
-          position = _this$props5.position,
-          scrollLeft = _this$props5.scrollLeft,
-          scrollTop = _this$props5.scrollTop,
-          scrollElement = _this$props5.scrollElement,
-          autoClass = _this$props5.autoClass,
-          zIndex = _this$props5.zIndex,
-          getResetPosition = _this$props5.getResetPosition,
-          value = _this$props5.value,
-          ignore = _this$props5.autoAdapt,
-          props = (0, _objectWithoutPropertiesLoose2.default)(_this$props5, ["parentElement", "rootClass", "absolute", "position", "scrollLeft", "scrollTop", "scrollElement", "autoClass", "zIndex", "getResetPosition", "value", "autoAdapt"]);
+      var _this$props4 = this.props,
+          parentElement = _this$props4.parentElement,
+          rootClass = _this$props4.rootClass,
+          absolute = _this$props4.absolute,
+          position = _this$props4.position,
+          scrollLeft = _this$props4.scrollLeft,
+          scrollTop = _this$props4.scrollTop,
+          scrollElement = _this$props4.scrollElement,
+          autoClass = _this$props4.autoClass,
+          zIndex = _this$props4.zIndex,
+          getResetPosition = _this$props4.getResetPosition,
+          value = _this$props4.value,
+          ignore = _this$props4.autoAdapt,
+          props = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["parentElement", "rootClass", "absolute", "position", "scrollLeft", "scrollTop", "scrollElement", "autoClass", "zIndex", "getResetPosition", "value", "autoAdapt"]);
       var mergeClass = (0, _classnames.default)((0, _styles.listClass)('absolute-wrapper'), rootClass, autoClass);
 
       var _ref = props.focus ? this.getStyle() : {

package/css/Button/Button.js

@@ -75,6 +75,7 @@ function (_PureComponent) {
     var type = isSecondary ? 'primary' : typeProp;
     var outline = outlineProp || isSecondary;
     var color = outline || type === 'default' ? undefined : '#fff';
+    if (text) color = 'currentColor';
     var className = (0, _classnames.default)((0, _styles.buttonClass)('_', shape, type, outline && 'outline', {
       large: size === 'large',
       small: size === 'small',

package/css/Button/styles/button.css

@@ -762,6 +762,12 @@ fieldset[disabled] .so-button-danger.so-button-outline:not(.so-button-disabled):
           box-shadow: none;
   padding-left: 4px;
   padding-right: 4px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .so-button-text:not(:disabled):hover {
   opacity: 0.8;

package/css/Checkbox/index.d.ts

@@ -47,7 +47,7 @@ export interface CheckboxProps<T> extends StandardProps, FormItemStandardProps<T
 
 // attention: checkbox group value is array
 
-export interface CheckboxGroupProps<Data, T> extends ListItemStandardProps<Data, T> {
+export interface CheckboxGroupProps<Data, T> extends ListItemStandardProps<Data, T>, Omit<FormItemStandardProps<T[]>, 'placeholder'> {
 
   /**
    * The data item

package/css/Form/Field.js

@@ -52,13 +52,15 @@ function (_Component) {
     var _this$props = this.props,
         children = _this$props.children,
         value = _this$props.value,
-        error = _this$props.error;
+        error = _this$props.error,
+        disabled = _this$props.disabled;
 
     if (typeof children === 'function') {
       return children({
         value: value,
         error: error,
-        onChange: this.handleChange
+        onChange: this.handleChange,
+        disabled: disabled
       });
     }
 
@@ -66,7 +68,8 @@ function (_Component) {
       return (0, _react.cloneElement)(children, {
         value: value,
         error: error,
-        onChange: this.handleChange
+        onChange: this.handleChange,
+        disabled: disabled
       });
     }
 
@@ -82,7 +85,8 @@ Field.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element]).isRequired,
   error: _propTypes.default.object,
   onChange: _propTypes.default.func.isRequired,
-  value: _propTypes.default.any
+  value: _propTypes.default.any,
+  disabled: _propTypes.default.bool
 };
 Field.defaultProps = {
   cache: false

package/css/Form/index.d.ts

@@ -24,10 +24,21 @@ export interface FieldSetChildrenFunc<Value = any> {
 }
 
 
+export interface FormRef<Value> {
+  getValue: () => Value;
+  validate: () => Promise<any>;
+  validateFields: () => Promise<any>;
+  validateFieldsWithError: () => Promise<any>;
+  clearValidate: () => void;
+  submit: (withValidate?: boolean) => void;
+  reset: ()=> void
+}
+
 export interface FieldChildrenFunc<Value = any> {
   value: Value;
   error: Error;
   onChange: (value: Value) => void;
+  disabled: boolean;
 }
 
 export interface FormProps<Value> extends StandardProps {
@@ -200,7 +211,7 @@ export interface FormProps<Value> extends StandardProps {
    *
    * default: -
    */
-  formRef?: (form: any) => void;
+  formRef?: (form: FormRef<Value>) => void;
 
 }
 
@@ -368,7 +379,7 @@ export interface FormFieldSetProps<Value> {
    *
    * default:
    */
-  defaultValue?: string | number;
+  defaultValue?: Value;
 
   /**
    * content with empty

package/css/Form/styles/form.css

@@ -50,7 +50,8 @@
   font-family: SimSun;
 }
 .so-form-item:not(.so-form-label-align-top) .so-form-label {
-  text-align: var(--form-item-label-align, 'left');
+  text-align: left;
+  text-align: var(--form-item-label-align, start);
 }
 .so-form-item .so-form-control {
   -webkit-box-flex: 1;
@@ -77,9 +78,11 @@
 }
 .so-form-item.so-form-label-align-right .so-form-label {
   text-align: right;
+  text-align: end;
 }
 .so-form-item.so-form-label-align-left .so-form-label {
   text-align: left;
+  text-align: start;
 }
 .so-form-label-align-top {
   display: block;
@@ -148,11 +151,18 @@
 }
 .so-form.so-form-rtl {
   direction: rtl;
-  text-align: right;
 }
-.so-form.so-form-rtl .so-form-item .so-form-label,
-.so-form.so-form-rtl .so-form-align-right .so-form-label {
-  text-align: left;
+.so-form.so-form-rtl .so-form-item.so-form-required .so-form-label:before {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.so-form.so-form-rtl .so-form-item .so-form-control:first-child {
+  padding-left: 6px;
+  padding-right: 0;
+}
+.so-form.so-form-rtl.so-form-inline > .so-input {
+  margin-right: 0;
+  margin-left: var(--form-item-margin-right, 20px);
 }
 .so-form.so-form-rtl.so-form-inline .so-form-item {
   margin-right: 0;
@@ -162,10 +172,6 @@
   margin-right: 0;
   margin-left: 12px;
 }
-.so-form.so-form-rtl.so-form-inline > .so-input {
-  margin-right: 0;
-  margin-left: var(--form-item-margin-right, 20px);
-}
 .so-form.so-form-rtl .so-button + .so-button {
   margin-left: 0;
   margin-right: var(--button-margin-left, 12px);
@@ -670,7 +676,15 @@ textarea.so-input-textarea-resize {
 }
 .so-input.so-input-rtl {
   direction: rtl;
-  text-align: right;
+}
+.so-input.so-input-rtl-clear-wrapper {
+  right: auto;
+  left: 8px;
+}
+.so-input.so-input-rtl-clear-wrapper:after,
+.so-input.so-input-rtl-clear-wrapper:before {
+  left: auto;
+  right: 3px;
 }
 .so-input.so-input-rtl.so-input-group > span:first-child,
 .so-input.so-input-rtl.so-input-group > i:first-child {
@@ -727,5 +741,4 @@ textarea.so-input-textarea-resize {
 }
 .so-inputBorder-rtl {
   direction: rtl;
-  text-align: right;
 }

package/css/Popover/Panel.js

@@ -125,7 +125,10 @@ function (_Component) {
     if (!this.container) return;
 
     if (this.container === (0, _popContainer.default)()) {
-      this.container.removeChild(this.element);
+      // this.container.removeChild(this.element)
+      if (this.element && this.element.parentElement) {
+        this.element.parentElement.removeChild(this.element);
+      }
     } else {
       this.container.parentElement.removeChild(this.container);
     }

package/css/Spin/index.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { ReactNode } from 'react'
+import { StandardProps } from '../@types/common'
+
 
 type SpinName = 'default' |
 'chasing-dots' |
@@ -19,7 +21,7 @@ declare class Spin extends React.Component<SpinProps, {}> {
   render(): JSX.Element;
 }
 
-export interface SpinProps {
+export interface SpinProps extends StandardProps{
 
   /**
    * color

package/css/Table/index.d.ts

@@ -532,6 +532,16 @@ export interface TableProps<Value, TRD> extends StandardProps, ListItemStandardP
    * default: false
    */
   hideHeader?: boolean
+
+  /**
+   * make all columns scalable
+   *
+   * 使所有列可伸缩
+   *
+   * default: false
+   */
+  columnResizable?: boolean
+
 }
 
 declare class Table<Value = any, TRD = TableRowData> extends React.Component<TableProps<Value, TRD>, {}> {

package/css/TreeSelect/Result.js

@@ -144,12 +144,15 @@ function (_PureComponent) {
 
     if (onClear && result.length > 0 && disabled !== true) {
       /* eslint-disable */
-      return _react.default.createElement("a", {
+      return _react.default.createElement("div", {
+        key: "clear",
+        onClick: onClear,
+        className: (0, _styles.treeSelectClass)('close-warpper')
+      }, _react.default.createElement("a", {
         tabIndex: -1,
         "data-role": "close",
-        className: (0, _styles.treeSelectClass)('indicator', 'close'),
-        onClick: onClear
-      });
+        className: (0, _styles.treeSelectClass)('indicator', 'close')
+      }));
       /* eslint-enable */
     }
 

package/css/TreeSelect/styles/treeSelect.css

@@ -165,6 +165,20 @@
   -ms-flex-negative: 1;
       flex-shrink: 1;
 }
+.so-treeSelect-close-warpper {
+  position: absolute;
+  top: 50%;
+  right: 7px;
+  display: block;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: translate(0, -50%);
+      -ms-transform: translate(0, -50%);
+          transform: translate(0, -50%);
+}
+.so-treeSelect-close-warpper .so-treeSelect-indicator {
+  right: 2px;
+}
 .so-treeSelect-indicator {
   position: absolute;
   top: 50%;
@@ -178,8 +192,12 @@
           transform: translate(0, -50%);
 }
 .so-treeSelect-indicator.so-treeSelect-close {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
   display: none;
-  background: var(--gray-400-darken-20, #94a1ae);
+  background: var(--select-clear-bg-color, #94a1ae);
   border-radius: 6px;
 }
 .so-treeSelect-indicator.so-treeSelect-close:hover {
@@ -206,6 +224,12 @@
       -ms-transform: rotate(315deg);
           transform: rotate(315deg);
 }
+.so-treeSelect-indicator.so-treeSelect-caret {
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
 .so-treeSelect-indicator.so-treeSelect-caret svg {
   fill: var(--gray-500, #adb5bd);
   vertical-align: top;
@@ -393,14 +417,14 @@ span.so-treeSelect-option {
   padding-left: 6px;
   padding-right: 34px;
 }
-.so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) a.so-treeSelect-close.so-treeSelect-indicator {
+.so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) a.so-treeSelect-close-wrapper {
   right: 17px;
 }
 .so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) {
   padding-left: 6px;
   padding-right: 24px;
 }
-.so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) a.so-treeSelect-close.so-treeSelect-indicator {
+.so-treeSelect-multiple .so-treeSelect-compressed:not(.so-treeSelect-empty) a.so-treeSelect-close-wrapper {
   right: 7px;
 }
 .so-treeSelect-large.so-treeSelect-multiple .so-treeSelect-result:not(.so-treeSelect-empty) {
@@ -452,8 +476,8 @@ span.so-treeSelect-option {
   left: 7px;
   right: auto;
 }
-.so-treeSelect.so-treeSelect-rtl .so-treeSelect-multiple .so-treeSelect-result a.so-treeSelect-close.so-treeSelect-indicator,
-.so-treeSelect.so-input-rtl .so-treeSelect-multiple .so-treeSelect-result a.so-treeSelect-close.so-treeSelect-indicator {
+.so-treeSelect.so-treeSelect-rtl .so-treeSelect-multiple .so-treeSelect-result a.so-treeSelect-close-wrapper,
+.so-treeSelect.so-input-rtl .so-treeSelect-multiple .so-treeSelect-result a.so-treeSelect-close-wrapper {
   right: auto;
   left: 17px;
 }

package/css/index.d.ts

@@ -2,7 +2,7 @@
 import './styles/normalize.less'
 import * as utils from './utils'
 
-export default { utils, version: '1.8.0-rc.4' }
+export default { utils, version: '1.8.0' }
 export { utils }
 export { setLocale } from './locale'
 export { color, style } from './utils/expose'

package/css/index.js

@@ -222,6 +222,6 @@ exports.Upload = _Upload.default;
 // Created by scripts/src-index.js.
 var _default = {
   utils: utils,
-  version: '1.8.0-rc.4'
+  version: '1.8.0'
 };
 exports.default = _default;

package/css/styles/expose.css

@@ -229,7 +229,7 @@
   font-size: var(--form-tip-font-size, 13px);
 }
 .so-expose-form-label {
-  text-align: var(--form-item-label-align, 'left');
+  text-align: var(--form-item-label-align, start);
 }
 .so-expose-form-error {
   line-height: var(--form-item-error-line-height, var(--common-line-height, 1.42857143));

package/css/utils/zoom.js

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports.removeZoomListener = exports.addZoomListener = void 0;
+var listeners = new Set();
+
+var addZoomListener = function addZoomListener(cb) {
+  listeners.add(cb);
+};
+
+exports.addZoomListener = addZoomListener;
+
+var removeZoomListener = function removeZoomListener(cb) {
+  listeners.delete(cb);
+};
+
+exports.removeZoomListener = removeZoomListener;
+
+var dispatch = function dispatch(data) {
+  listeners.forEach(function (cb) {
+    cb(data);
+  });
+};
+
+var updatePixelRatio = function updatePixelRatio(e) {
+  var pr = window.devicePixelRatio;
+
+  if (e) {
+    dispatch(pr);
+  }
+
+  window.matchMedia("(resolution: " + pr + "dppx)").addEventListener('change', updatePixelRatio, {
+    once: true
+  });
+};
+
+updatePixelRatio();