shineout 1.7.0 → 1.7.1-beta.3

package/css/Message/index.d.ts

@@ -0,0 +1,72 @@
+
+import * as React from 'react'
+
+export interface MessageOptions {
+  /**
+   * extend className
+   * 
+   * 类名
+   * 
+   * default: -
+   */
+  className?: string,
+  /**
+   * The callback function when the message is closed.
+   * 
+   * 关闭后回调事件
+   * 
+   * default: -
+   */
+  onClose?: () => void,
+  /**
+   * The position where the message display
+   * 
+   * 消息显示的位置
+   * 
+   * default: top
+   */
+  position?: 'top' | 'middle' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',
+  /**
+   * title
+   * 
+   * 标题文字
+   * 
+   * default: -
+   */
+  title?: string,
+
+  /**
+   * show close button
+   * 
+   * 是否隐藏关闭按钮
+   * 
+   * default: false
+   */
+  hideClose?: boolean,
+}
+
+declare namespace Message {
+  function show(content: React.ReactNode, duration?: number, options?: MessageOptions): void;
+  function info(content: React.ReactNode, duration?: number, options?: MessageOptions): void;
+  function success(content: React.ReactNode, duration?: number, options?: MessageOptions): void;
+  function warn(content: React.ReactNode, duration?: number, options?: MessageOptions): void;
+  function error(content: React.ReactNode, duration?: number, options?: MessageOptions): void;
+  
+  /**
+   * close all message
+   * 
+   * 关闭所有消息
+   */
+  function close(): void;
+
+  /**
+   * set global options
+   * 
+   * 设置全局配置
+   * 
+   * @param conf 配置信息
+   */
+  function setOptions(options: { duration?: number } & MessageOptions): void;
+}
+
+export default Message

package/css/Modal/events.js

@@ -9,6 +9,8 @@ exports.createDiv = createDiv;
 exports.open = open;
 exports.closeAll = exports.method = void 0;
 
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
@@ -19,6 +21,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _component = require("../component");
+
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _uid = require("../utils/uid");
@@ -153,30 +157,78 @@ function open(props, isPortal) {
   return null;
 }
 
-var closeCallback = function closeCallback(fn, option) {
+var closeCallback = function closeCallback(fn, option, setLoading) {
   return function () {
     var callback;
     if (fn) callback = fn();
 
     if (callback && typeof callback.then === 'function') {
+      if (setLoading) {
+        setLoading(true);
+      }
+
       callback.then(function () {
         close(option);
+      }).catch(function () {
+        if (setLoading) {
+          setLoading(false);
+        }
       });
     } else {
       close(option);
     }
   };
-};
+}; // eslint-disable-next-line react/prop-types
+
+
+var LoadingOk =
+/*#__PURE__*/
+function (_PureComponent) {
+  (0, _inheritsLoose2.default)(LoadingOk, _PureComponent);
+
+  function LoadingOk(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      loading: false
+    };
+
+    _this.setLoading = function (loading) {
+      _this.setState({
+        loading: loading
+      });
+    };
+
+    return _this;
+  }
+
+  var _proto = LoadingOk.prototype;
+
+  _proto.render = function render() {
+    // eslint-disable-next-line react/prop-types
+    var option = this.props.option;
+    var loading = this.state.loading;
+    var onClick = closeCallback(option.onOk, option, this.setLoading);
+    return _react.default.createElement(_Button.default, {
+      loading: loading,
+      key: "ok",
+      id: option.id + "-ok",
+      onClick: onClick,
+      type: "primary"
+    }, (0, _locale.getLocale)('ok', option.text));
+  };
+
+  return LoadingOk;
+}(_component.PureComponent); // const btnOk = option => {
+//   const onClick = closeCallback(option.onOk, option)
+//   return (
+//     <Button.Once key="ok" id={`${option.id}-ok`} onClick={onClick} type="primary">
+//       {getLocale('ok', option.text)}
+//     </Button.Once>
+//   )
+// }
 
-var btnOk = function btnOk(option) {
-  var onClick = closeCallback(option.onOk, option);
-  return _react.default.createElement(_Button.default.Once, {
-    key: "ok",
-    id: option.id + "-ok",
-    onClick: onClick,
-    type: "primary"
-  }, (0, _locale.getLocale)('ok', option.text));
-};
 
 var btnCancel = function btnCancel(option) {
   var onClick = closeCallback(option.onCancel, option);
@@ -200,9 +252,15 @@ var method = function method(type) {
     });
 
     if (type === 'confirm') {
-      props.footer = [btnCancel(props), btnOk(props)];
+      props.footer = [btnCancel(props), _react.default.createElement(LoadingOk, {
+        option: props,
+        key: "ok"
+      })];
     } else {
-      props.footer = 'footer' in props ? props.footer : [btnOk(props)];
+      props.footer = 'footer' in props ? props.footer : [_react.default.createElement(LoadingOk, {
+        option: props,
+        key: "ok"
+      })];
     }
 
     open(props);

package/css/Modal/index.d.ts

@@ -0,0 +1,330 @@
+import * as React from 'react'
+import { CardSubmitProps } from '../Card'
+import { StandardProps } from '../@types/common'
+
+type ReactNode = React.ReactNode;
+
+export interface ModalProps extends StandardProps {
+
+  /**
+   * Whether to force the mask transparency (in multi-layer Modal, the transparency of other Modal masks except the first layer will be adjusted to 0.01)
+   *
+   * 是否强制设置遮罩透明度（多层Modal中，除第一层外的其他Modal遮罩透明度会被调整为0.01）
+   *
+   * default: false
+   */
+  forceMask?: boolean;
+
+  /**
+   * Distance from top
+   *
+   * 模态框距离顶部距离
+   *
+   * defualt: 10vh
+   */
+  top?: number | string;
+
+  /**
+   * Use the fullScreen property to display the modal in full screen
+   *
+   * 使用 fullScreen 属性来使对话框全屏展示
+   *
+   * default: false
+   */
+  fullScreen?: boolean;
+
+  /**
+   * Extend modal body style
+   *
+   * 扩展 modal body 的样式
+   *
+   * default: -
+   */
+  bodyStyle?: React.CSSProperties;
+
+  /**
+   * The content at the bottom
+   *
+   * 底部内容
+   *
+   * default: -
+   */
+  footer?: ReactNode | any[];
+
+  /**
+   * Whether to close the mask when the mask is clicked
+   *
+   * 点击遮罩层是否关闭对话框
+   *
+   * default: true
+   */
+  maskCloseAble?: boolean | null ;
+
+  /**
+   * The opacity of the mask
+   *
+   * 遮罩层透明度
+   *
+   * default: 0.25
+   */
+  maskOpacity?: number;
+
+  /**
+   * Padding style of the content
+   *
+   * 内容内边距
+   *
+   * default: 16
+   */
+  padding?: number | string;
+
+  /**
+   * Pop-up position, one of ['top', 'right', 'bottom', 'left']
+   *
+   * 弹出位置，可选值为 ['top', 'right', 'bottom', 'left']
+   *
+   * default: -
+   */
+  position?: string;
+
+  /**
+   * the title of the pop-up layer
+   *
+   * 弹出层的标题
+   *
+   * default: -
+   */
+  title?: ReactNode;
+
+  /**
+   * When the usePortal is true, use ReactDOM.createPortal to create the pop-up layer, otherwise use ReactDOM.render. Use ReactDOM.render while func call.
+   *
+   * 为 true 时，使用 ReactDOM.createPortal 创建弹出层，为 false 时，使用 ReactDOM.render。函数式调用时使用 ReactDOM.render。
+   *
+   * default: true
+   */
+  usePortal?: boolean;
+
+  /**
+   * visible
+   *
+   * 是否显示
+   *
+   * default: false
+   */
+  visible?: boolean;
+
+  /**
+   * the width of the Modal ( only works under normal modal )
+   *
+   * 对话框宽度 （仅在常规对话框下生效）
+   *
+   * default: 500
+   */
+  width?: number | string;
+
+  /**
+   * Modal z-index
+   *
+   * 对话框 z-index 值，注意：如 Modal 嵌套 Select 组件，并且 Select 组件含有 absolute 字段，需要修改 Select 的 z-index的值
+   *
+   * default: 1050
+   */
+  zIndex?: number;
+
+  /**
+   * the root element of modal, the mask parent element
+   *
+   * modal 的根元素类名, 为遮罩层的父元素
+   *
+   * default: -
+   */
+  rootClassName?: string;
+
+  /**
+   * target element
+   *
+   * 渲染的目标节点
+   *
+   * default: document.body
+   */
+  container?: (() => HTMLElement) | HTMLElement;
+
+  /**
+   * modal support move
+   *
+   * 是否可移动
+   *
+   * default: false
+   */
+  moveable?: boolean;
+
+  /**
+   * mask background
+   *
+   * 遮罩背景色，设置后透明度将失效
+   *
+   * default: null
+   */
+  maskBackground?: string;
+
+  /**
+   * modal close callback
+   *
+   * 模态框关闭回调
+   *
+   * default: none
+   */
+  onClose?: () => void;
+
+  /**
+   * Whether to destroy elements when it is closed
+   *
+   * 关闭时是否销毁元素
+   *
+   * default: false
+   */
+  destroy?: boolean;
+
+  /**
+   * hide the close button
+   *
+   * 是否隐藏关闭按钮
+   *
+   * default: none
+   */
+  hideClose?: boolean;
+
+  /**
+   * Modal Title show status icon
+   *
+   * Modal title 显示状态icon
+   *
+   * default: null
+   */
+  type?: 'info' | 'success' | 'warning' | 'error' | 'normal';
+
+  /**
+   * toggle zoom animation
+   *
+   * 是否开启 zoom 动画效果
+   *
+   * default: false
+   */
+  zoom?: boolean;
+
+  /**
+   * press 'esc' to close
+   *
+   * 是否支持 esc 键关闭
+   *
+   * default: true
+   */
+  esc?: boolean;
+
+  /**
+   * events list of container element
+   *
+   * 外层元素所接受的事件列表，可用于在 createPortal 场景中阻止冒泡
+   *
+   * default: {}
+   */
+  events?: object;
+
+  /**
+   * can resize
+   *
+   * 是否可调整大小
+   *
+   * default: false
+   */
+  resizable?: boolean;
+}
+export interface ModalFunctionOptions extends ModalProps {
+  /**
+   * Content body
+   *
+   * 提示内容主体
+   *
+   * default: null
+   */
+  content?: ReactNode | string,
+
+  /**
+   * title
+   *
+   * 标题
+   *
+   * default: null
+   */
+  title?: string,
+
+  /**
+   * The event is triggered when the cancel button is clicked.
+   *
+   * 点击取消按钮时触发事件，仅在 confirm 方法中有效
+   *
+   * default: null
+   */
+  onCancel?: () => void,
+
+  /**
+   * The event is triggered when the modal is closed.
+   *
+   * 关闭Modal时触发
+   *
+   * default: null
+   */
+  onClose?: () => void,
+
+  /**
+   * The event is triggered when the ok button is clicked.
+   *
+   * 点击确定按钮时触发事件，返回 Promise 时，会在 Promise resolve 后关闭Modal
+   *
+   * default: null
+   */
+  onOk?: () => void | Promise<any>,
+
+  /**
+   * The text of button
+   *
+   * 按钮文字
+   *
+   * default: { ok: 'Ok', cancel: 'Cancel' }
+   */
+  text?: { ok?: string, cancel?: string },
+
+  /**
+   * auto focus button, one of ['ok', 'cancel']
+   *
+   * 默认聚焦的按钮, 可选值 ['ok', 'cancel']
+   *
+   * default: null
+   */
+  autoFocusButton?: string
+}
+
+type Close = () => void;
+
+declare class ModalSubmit extends React.Component<CardSubmitProps> {
+  render(): JSX.Element
+}
+
+declare class Modal extends React.Component<ModalProps, {}> {
+  static info(options: ModalFunctionOptions): Close;
+
+  static success(options: ModalFunctionOptions): Close;
+
+  static error(options: ModalFunctionOptions): Close;
+
+  static confirm(options: ModalFunctionOptions): void;
+
+  static show(options: ModalFunctionOptions): Close;
+
+  static Submit: typeof ModalSubmit;
+
+  static closeAll: () => void;
+}
+
+export default Modal

package/css/Pagination/index.d.ts

@@ -0,0 +1,129 @@
+import * as React from 'react'
+import {StandardProps} from '../@types/common'
+
+export interface SizeListProps {
+  [propName: string]: any
+}
+
+export interface TextParams {
+  prev?: string,
+  next?: string,
+  page?: string,
+  jumper?: string,
+}
+
+export interface PaginationProps extends StandardProps {
+
+  /**
+   * align of pagination
+   *
+   * 排布方式
+   *
+   * default: 'left'
+   */
+  align?: 'left' | 'center' | 'right';
+
+  /**
+   * Current page.
+   *
+   * 当前页，如果传入值，组件为受控组件，必须通过onChange来处理回调
+   *
+   * default: -
+   */
+  current?: number;
+
+  /**
+   * Initial page number
+   *
+   * 初始页码
+   *
+   * default: 1
+   */
+  defaultCurrent?: number;
+
+  /**
+   * Disabled
+   *
+   * 禁用
+   *
+   * default: false
+   */
+  disabled?: boolean;
+
+  /**
+   * The layout of child elements, options: 'links': page number。'simple': simple page number(Do not use both simple and links)。'list': page size selector。'jumper': jump to page number。'simple': minimalist mode。function({ current, total, pageSize }): custom information
+   *
+   * 子组件布局，可选值为:'links': 页码。'simple': 简约页码(和links不要同时使用)。'list': 每页数量选择。'jumper': 跳转页码。'simple': 极简模式。function({ current, total, pageSize }): 匿名函数，用来信息展示
+   *
+   * default: ['links']
+   */
+  layout?: (string | ((...args: any[]) => string) )[];
+
+  /**
+   * The callback function when current page or pageSize is changing。current: new page number。pageSize: number of each page
+   *
+   * 页码或每页显示数量改变时回调。current: 新的页码。pageSize: 每页数量
+   *
+   * default: -
+   */
+  onChange?: (current: number, pageSize: number) => void;
+
+  /**
+   * Number of each page
+   *
+   * 每页数量
+   *
+   * default: 10
+   */
+  pageSize?: number;
+
+  /**
+   * The list of number of each page
+   *
+   * [10, 20, 30, 50, 100] | 每页数量可选列表
+   *
+   * default: [10, 20, 30, 50, 100]
+   */
+  pageSizeList?: number[];
+
+  /**
+   * size of pagination
+   *
+   * 尺寸
+   *
+   * default: 'default'
+   */
+  size?: 'large' | 'default' | 'small';
+
+  /**
+   * Replaced text。prev: the previous page。next: the next page。page:the text of pageSizeList。jumper: jump to input box text, '{input}' pilaceholder for input box
+   *
+   * 替换文案。prev: 上一页。next: 下一页。page: pageSizeList文字。jumper: 跳转输入框文字, '{input}' 为输入框占位
+   *
+   * default: none
+   */
+  text?: TextParams;
+
+  /**
+   * Total number. If total is less than 0, hide the Pagination.
+   *
+   * 总条目数。如果 total 小于 0，隐藏分页。
+   *
+   * default: 0
+   */
+  total?: number;
+
+  /**
+   * Additional attributes which need to given page size selector
+   *
+   * 需要给分页数量的选择框的额外的属性
+   *
+   * default: -
+   */
+  sizeListProps?: SizeListProps;
+
+}
+
+declare class Pagination extends React.Component<PaginationProps, any> {}
+
+export default Pagination