shineout 1.7.0-rc.7 → 1.7.1-beta.3

package/css/Alert/index.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import { StandardProps } from '../@types/common'
+
+export interface AlertProps extends StandardProps {
+
+  /**
+   * Content, text or react component
+   * 
+   * 内容，文字或react组件
+   * 
+   * default: -
+   */
+  children?: React.ReactNode;
+
+  /**
+   * When the type is true, the status icon is displayed according to the type property. If you need to display a custom icon, pass in ReactElement.
+   * 
+   * 为true时，根据type属性显示状态图标。如果需要显示自定义图标，传入ReactElement。
+   * 
+   * default: -
+   */
+  icon?: React.ReactElement | boolean;
+
+  /**
+   * The size for icon
+   * 
+   * icon 的尺寸
+   * 
+   * default: 14
+   */
+  iconSize?: number;
+
+  /**
+   * When onClose is empty, no close is displayed. If you need to close and do not need to handle callbacks, set it true.
+   * 
+   * 当 onClose 为空时，不显示关闭。如果需要关闭又不需要处理回调，设置为true即可
+   * 
+   * default: -
+   */
+  onClose?: (() => void) | boolean;
+
+  /**
+   * types
+   * 
+   * 类型
+   * 
+   * default: *warning*
+   * 
+   */
+  type?: 'success' | 'info' | 'warning' | 'danger' | 'error';
+
+  /**
+   * show close button
+   * 
+   * 是否隐藏关闭按钮
+   * 
+   * default: false
+   */
+  hideClose?: boolean,
+}
+
+declare class Alert extends React.Component<AlertProps> {}
+export default Alert

package/css/AnimationList/AbsoluteList.js

@@ -71,8 +71,9 @@ function _default(List) {
       if (!props.absolute) return (0, _assertThisInitialized2.default)(_this);
       _this.lastStyle = {};
       if (!root) initRoot();
+      _this.container = typeof _this.props.absolute === 'function' ? _this.props.absolute() : root;
       _this.element = document.createElement('div');
-      root.appendChild(_this.element);
+      if (_this.container) _this.container.appendChild(_this.element);
 
       if (props.getResetPosition) {
         props.getResetPosition(_this.resetPosition.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this))));
@@ -83,6 +84,17 @@ function _default(List) {
 
     var _proto = AbsoluteList.prototype;
 
+    _proto.componentDidMount = function componentDidMount() {
+      if (this.props.absolute && !this.container) {
+        this.container = typeof this.props.absolute === 'function' ? this.props.absolute() : root;
+        this.container.appendChild(this.element);
+
+        if (this.props.focus) {
+          this.forceUpdate();
+        }
+      }
+    };
+
     _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
       var _this2 = this;
 
@@ -96,11 +108,16 @@ function _default(List) {
     _proto.componentWillUnmount = function componentWillUnmount() {
       var absolute = this.props.absolute;
       if (!absolute) return;
-      root.removeChild(this.element);
+
+      if (this.container) {
+        this.container.removeChild(this.element);
+      }
     };
 
     _proto.getPosition = function getPosition(rect) {
-      var fixed = this.props.fixed;
+      var _this$props = this.props,
+          fixed = _this$props.fixed,
+          absolute = _this$props.absolute;
       var position = this.props.position;
       var rtl = (0, _config.isRTL)();
       var style = {
@@ -120,17 +137,36 @@ function _default(List) {
         position = (0, _strings.getRTLPosition)(position);
       }
 
+      var containerScroll = _document.docScroll;
+      var containerRect = {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      };
+      var container = this.container;
+
+      if (typeof absolute === 'function' && container) {
+        containerRect = container.getBoundingClientRect();
+        containerScroll = {
+          left: container.scrollLeft,
+          top: container.scrollTop
+        };
+      }
+
+      this.containerRect = containerRect;
+
       if (listPosition.includes(position)) {
-        style.left = rect.left + _document.docScroll.left;
+        style.left = rect.left - containerRect.left + containerScroll.left;
 
         if (rtl) {
           style.left += rect.width;
         }
 
         if (position === 'drop-down') {
-          style.top = rect.top + rect.height + _document.docScroll.top;
+          style.top = rect.top - containerRect.top + rect.height + containerScroll.top;
         } else {
-          style.bottom = -(rect.top + _document.docScroll.top);
+          style.bottom = -(rect.top - containerRect.top + containerScroll.top);
         }
       } else if (pickerPosition.includes(position)) {
         var _position$split = position.split('-'),
@@ -138,16 +174,16 @@ function _default(List) {
             v = _position$split[1];
 
         if (h === 'left') {
-          style.left = rect.left + _document.docScroll.left;
+          style.left = rect.left - containerRect.left + containerScroll.left;
         } else {
-          style.left = rect.right + _document.docScroll.left;
+          style.left = rect.right - containerRect.right + containerScroll.left;
           style.transform = 'translateX(-100%)';
         }
 
         if (v === 'bottom') {
-          style.top = rect.bottom + _document.docScroll.top + PICKER_V_MARGIN;
+          style.top = rect.bottom - containerRect.bottom + containerScroll.top + PICKER_V_MARGIN;
         } else {
-          style.top = rect.top + _document.docScroll.top - PICKER_V_MARGIN;
+          style.top = rect.top - containerRect.top + containerScroll.top - PICKER_V_MARGIN;
           style.transform = style.transform ? 'translate(-100%, -100%)' : 'translateY(-100%)';
         }
       }
@@ -156,10 +192,10 @@ function _default(List) {
     };
 
     _proto.getStyle = function getStyle() {
-      var _this$props = this.props,
-          parentElement = _this$props.parentElement,
-          scrollElement = _this$props.scrollElement,
-          focus = _this$props.focus;
+      var _this$props2 = this.props,
+          parentElement = _this$props2.parentElement,
+          scrollElement = _this$props2.scrollElement,
+          focus = _this$props2.focus;
       var lazyResult = {
         focus: focus,
         style: this.lastStyle
@@ -190,9 +226,9 @@ function _default(List) {
     };
 
     _proto.resetPosition = function resetPosition(clean) {
-      var _this$props2 = this.props,
-          focus = _this$props2.focus,
-          parentElement = _this$props2.parentElement;
+      var _this$props3 = this.props,
+          focus = _this$props3.focus,
+          parentElement = _this$props3.parentElement;
       if (!this.el || !focus || this.ajustdoc && !clean) return;
       var pos = this.el.getBoundingClientRect();
       var left = pos.left;
@@ -203,7 +239,11 @@ function _default(List) {
         left = parentElement.getBoundingClientRect().left;
       }
 
-      var overdoc = left + pos.width > _document.docSize.width;
+      var containerRect = this.containerRect || {
+        left: 0,
+        width: 0
+      };
+      var overdoc = left - containerRect.left + pos.width > (containerRect.width || _document.docSize.width);
       if (this.state.overdoc === overdoc) return;
       this.ajustdoc = true;
       this.setState({
@@ -216,21 +256,21 @@ function _default(List) {
     };
 
     _proto.renderList = function renderList() {
-      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 _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 parsed = parseInt(zIndex, 10);
       if (!Number.isNaN(parsed)) style.zIndex = parsed;
       var mergeStyle = Object.assign({}, style, this.state.overdoc ? {
@@ -257,20 +297,21 @@ function _default(List) {
         return this.renderList();
       }
 
-      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"]);
+      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 mergeClass = (0, _classnames.default)((0, _styles.listClass)('absolute-wrapper'), rootClass, autoClass);
 
       var _ref = props.focus ? this.getStyle() : {
@@ -302,7 +343,7 @@ function _default(List) {
     // same width with parentElement
     parentElement: _propTypes.default.object,
     position: _propTypes.default.string,
-    absolute: _propTypes.default.bool,
+    absolute: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func]),
     scrollElement: _propTypes.default.object,
     scrollLeft: _propTypes.default.number,
     scrollTop: _propTypes.default.number,

package/css/Breadcrumb/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { StandardProps, ListItemStandardProps } from '../@types/common'
+
+type ReactNode = React.ReactNode;
+
+interface BreadcrumbData  {
+
+
+  /**
+   * The click event
+   *
+   * 点击事件
+   *
+   * default: (event)=>void
+   */
+  onClick?: (event: Event)=>void;
+
+
+  /**
+   * Displayed content
+   *
+   * 显示内容
+   *
+   * default: null
+   */
+  title?: string| ReactNode;
+
+
+  /**
+   * Link address
+   *
+   * 链接地址，onClick 属性二选一
+   *
+   * default: null
+   */
+  url?: string;
+
+
+}
+
+
+export interface BreadcrumbProps<Item> extends StandardProps, Pick<ListItemStandardProps<Item>, 'keygen'>  {
+  
+  /**
+   * The array of breadcrumb objects, see data
+   *
+   * 面包屑对象数组,见 data
+   *
+   * default: []
+   */
+  data?: Array<Item>;
+
+
+  /**
+   * A breadcrumb separator which can be strings or custom elements
+   *
+   * 面包屑分隔符,可以是字符串或自定义的元素
+   *
+   * default: "/"
+   */
+  separator?: string|ReactNode;
+}
+
+
+declare class Breadcrumb<Item = BreadcrumbData> extends React.PureComponent<BreadcrumbProps<Item>, {}> {}
+
+
+export default Breadcrumb

package/css/Button/index.d.ts

@@ -0,0 +1,160 @@
+import * as React from 'react'
+import { StandardProps, RegularAttributes } from '../@types/common'
+
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'link';
+
+export interface ButtonProps extends StandardProps {
+
+  /**
+   * The content inside the button, can be a text icon, etc.
+   * 
+   * 按钮里面的内容, 可以是文字图标等
+   * 
+   * default: required
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Specifies the button should be disabled
+   * 
+   * 禁用
+   * 
+   * default: false
+   */
+  disabled?: boolean;
+
+  /**
+   * If the href attribute is set, <a> will be used instead of <button>.
+   * 
+   * 如果设置了 href 属性，将会用 <a> 代替 <button>
+   * 
+   * default: -
+   */
+  href?: string;
+  
+  /**
+   * If present, target will be set onto <a> element.(Effective only when href is been set)
+   *
+   * 当设置了 href 属性时，target 会被设置到 <a> 元素上
+   *
+   * default: -
+   */
+  target?: '_self' | '_blank' | '_parent' | '_top' | string;
+
+  /**
+   * When outline is true, the background is transparent.
+   * 
+   * outline 为 true 时，显示透明背景的按钮
+   * 
+   * default: false
+   */
+  outline?: boolean;
+
+  /**
+   * size of button
+   * 
+   * 按钮尺寸
+   * 
+   * default: 'default'
+   */
+  size?: RegularAttributes.Size;
+
+
+  /**
+   * type of button
+   * 
+   * 按钮类型
+   * 
+   * default: 'default'
+   */
+  type?: ButtonType;
+
+  /**
+   * text button
+   * 
+   * 文字按钮，不展示边框和背景
+   * 
+   * default: false
+   */
+  text?: boolean;
+
+  /**
+   * button click callback
+   * 
+   * 按钮点击回调
+   * 
+   * default: none
+   */
+  onClick?: (e: MouseEvent) => void;
+
+  /**
+   * For Button with only 2 Chinese characters, whether to insert a space between the two Chinese characters.
+   * 
+   * 仅有2个汉字的按钮，是否在2个汉字中间插入空格
+   * 
+   * default: false
+   */
+  space?: boolean;
+
+  /**
+   * loading
+   * 
+   * loading状态
+   * 
+   * default: null
+   */
+  loading?: boolean
+}
+
+export interface ButtonGroupProps {
+
+  /**
+   * array of Button
+   * 
+   * 由 Button 组成的 array
+   * 
+   * default: required
+   */
+  children?: React.ReactNode;
+
+  /**
+   * same as Button
+   * 
+   * 同 Button；如果 Button 和 Group 同时设置 size，以 Group 为准
+   * 
+   * default: -
+   */
+  size?: RegularAttributes.Size;
+
+  /**
+   * same as Button
+   * 
+   * 同 Button；如果 Button 未设置，使用此值
+   * 
+   * default: -
+   */
+  outline?: boolean;
+
+  /**
+   * same as Button
+   * 
+   * 同 Button；如果 Button 和 Group 同时设置 type，以 Group 为准
+   * 
+   * default: -
+   */
+  type?: ButtonType;
+
+}
+
+
+declare class ButtonGroup extends React.Component<ButtonGroupProps> {
+  render(): JSX.Element
+}
+
+declare class Button extends React.Component<ButtonProps> {
+  static Group: typeof ButtonGroup;
+
+  render(): JSX.Element
+}
+
+export default Button