'edit'

docs/index.md

@@ -14,4 +14,3 @@ hero:
 
 | 组件 | 下载量 | 版本 |
 | ---- | ------ | ---- |
-

packages/infoZY/CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## 1.0.1 (2021-01-09)
 

packages/infoZY/src/Demos/BasisDemo.js

+import React from 'react';
+import InfoUtils from '../index';
+
+export default () => {
+  return (
+    <InfoUtils
+      type="nodata"
+      mode='inset'
+      text='暂时没有数据，等一会儿再试吧'
+      size='small'
+    />
+  );
+};

packages/infoZY/src/demo.js

+import React, { Component, Children, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ConfigProvider from '../../config-provider';
+import { obj, log } from '../../util';
+
+function mapIconSize(size) {
+    return {
+        large: 'small',
+        medium: 'xs',
+        small: 'xs',
+    }[size];
+}
+
+/** Button */
+export default class Button extends Component {
+    static propTypes = {
+        ...ConfigProvider.propTypes,
+        prefix: PropTypes.string,
+        rtl: PropTypes.bool,
+        /**
+         * 按钮的类型
+         */
+        type: PropTypes.oneOf(['primary', 'secondary', 'normal']),
+        /**
+         * 按钮的尺寸
+         */
+        size: PropTypes.oneOf(['small', 'medium', 'large']),
+        /**
+         * 按钮中可配置的 Icon，格式为 { loading: <Icon type="loading" /> }
+         */
+        icons: PropTypes.shape({
+            loading: PropTypes.node,
+        }),
+        /**
+         * 按钮中 Icon 的尺寸，用于替代 Icon 的默认大小
+         */
+        iconSize: PropTypes.oneOfType([
+            PropTypes.oneOf(['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit']),
+            PropTypes.number,
+        ]),
+        /**
+         * 当 component = 'button' 时，设置 button 标签的 type 值
+         */
+        htmlType: PropTypes.oneOf(['submit', 'reset', 'button']),
+        /**
+         * 设置标签类型
+         */
+        component: PropTypes.oneOf(['button', 'a', 'div', 'span']),
+        /**
+         * 设置按钮的载入状态
+         */
+        loading: PropTypes.bool,
+        /**
+         * 是否为幽灵按钮
+         */
+        ghost: PropTypes.oneOf([true, false, 'light', 'dark']),
+        /**
+         * 是否为文本按钮
+         */
+        text: PropTypes.bool,
+        /**
+         * 是否为警告按钮
+         */
+        warning: PropTypes.bool,
+        /**
+         * 是否禁用
+         */
+        disabled: PropTypes.bool,
+        /**
+         * 点击按钮的回调
+         * @param {Object} e Event Object
+         */
+        onClick: PropTypes.func,
+        className: PropTypes.string,
+        onMouseUp: PropTypes.func,
+        children: PropTypes.node,
+    };
+
+    static defaultProps = {
+        prefix: 'next-',
+        type: 'normal',
+        size: 'medium',
+        icons: {},
+        htmlType: 'button',
+        component: 'button',
+        loading: false,
+        ghost: false,
+        text: false,
+        warning: false,
+        disabled: false,
+        onClick: () => {},
+    };
+
+    onMouseUp = e => {
+        this.button.blur();
+
+        if (this.props.onMouseUp) {
+            this.props.onMouseUp(e);
+        }
+    };
+
+    buttonRefHandler = button => {
+        this.button = button;
+    };
+
+    render() {
+        const {
+            prefix,
+            className,
+            type,
+            size,
+            htmlType,
+            loading,
+            text,
+            warning,
+            ghost,
+            component,
+            iconSize,
+            icons,
+            disabled,
+            onClick,
+            children,
+            rtl,
+            ...others
+        } = this.props;
+        const ghostType = ['light', 'dark'].indexOf(ghost) >= 0 ? ghost : 'dark';
+
+        const btnClsObj = {
+            [`${prefix}btn`]: true,
+            [`${prefix}${size}`]: size,
+            [`${prefix}btn-${type}`]: type && !ghost,
+            [`${prefix}btn-text`]: text,
+            [`${prefix}btn-warning`]: warning,
+            [`${prefix}btn-loading`]: loading,
+            [`${prefix}btn-ghost`]: ghost,
+            [`${prefix}btn-${ghostType}`]: ghost,
+            [className]: className,
+        };
+
+        let loadingIcon = null;
+
+        // 如果传入了 loading 的 icons，使用该节点来渲染
+        if (icons && icons.loading && isValidElement(icons.loading)) {
+            if (loading) {
+                delete btnClsObj[`${prefix}btn-loading`];
+                btnClsObj[`${prefix}btn-custom-loading`] = true;
+            }
+
+            const loadingSize = iconSize || mapIconSize(size);
+            loadingIcon = React.cloneElement(icons.loading, {
+                className: classNames({
+                    [`${prefix}btn-custom-loading-icon`]: true,
+                    show: loading,
+                }),
+                size: loadingSize,
+            });
+        }
+
+        const count = Children.count(children);
+        const clonedChildren = Children.map(children, (child, index) => {
+            if (child && ['function', 'object'].indexOf(typeof child.type) > -1 && child.type._typeMark === 'icon') {
+                const iconCls = classNames({
+                    [`${prefix}btn-icon`]: !iconSize, // 如果用户没有传 iconSize，则使用该样式标记 icon 为 button 预设尺寸
+                    [`${prefix}icon-first`]: count > 1 && index === 0,
+                    [`${prefix}icon-last`]: count > 1 && index === count - 1,
+                    [`${prefix}icon-alone`]: count === 1,
+                    [child.props.className]: !!child.props.className,
+                });
+
+                if ('size' in child.props) {
+                    log.warning(
+                        `The size of Icon will not take effect, when Icon is the [direct child element] of Button(<Button><Icon size="${
+                            child.props.size
+                        }" /></Button>), use <Button iconSize="${child.props.size}"> or <Button><div><Icon size="${
+                            child.props.size
+                        }" /></div></Button> instead of.`
+                    );
+                }
+                return React.cloneElement(child, {
+                    className: iconCls,
+                    size: iconSize || mapIconSize(size),
+                });
+            }
+
+            if (!isValidElement(child)) {
+                return <span className={`${prefix}btn-helper`}>{child}</span>;
+            }
+
+            return child;
+        });
+
+        const TagName = component;
+        const tagAttrs = {
+            ...obj.pickOthers(Object.keys(Button.propTypes), others),
+            type: htmlType,
+            disabled: disabled,
+            onClick: onClick,
+            className: classNames(btnClsObj),
+        };
+
+        if (TagName !== 'button') {
+            delete tagAttrs.type;
+
+            if (tagAttrs.disabled) {
+                delete tagAttrs.onClick; // a 标签的 onClick 浏览器默认不会禁用
+                tagAttrs.href && delete tagAttrs.href; // a 标签在禁用状态下无跳转
+            }
+        }
+
+        return (
+            <TagName {...tagAttrs} dir={rtl ? 'rtl' : undefined} onMouseUp={this.onMouseUp} ref={this.buttonRefHandler}>
+                {loadingIcon}
+                {clonedChildren}
+            </TagName>
+        );
+    }
+}
\ No newline at end of file

packages/infoZY/src/index.js

-export default {
-    name: "全局消息控件"
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+function getTagType(type, mode) {
+  if(mode && ['modal', 'inset'].indexOf(style) >= 0) {
+    return mode;
+  }
+  var tagType = '';
+  switch(type) {
+    case 'success':
+    case 'warning':
+    case 'fault':
+    case 'confirm-info':
+    case 'confirm-question':
+      tagType = 'modal';
+      break;
+    case 'nodata':
+    default:
+      tagType = 'inset';
+      break;
+  }
+  return tagType;
+}
+
+function getStyleStr(size, w, h) {
+  var strs = [];
+  if(!w || w < 0) {
+    w = size === 'large' ? 800 : size === 'small' ? 260 : 420;
+  }
+  if(h && h >= 0) {
+    h = size === 'large' ? 650 : size === 'small' ? 200 : 380;
+  }
+  strs.push('width='+ w +'px;');
+  strs.push('height='+ w +'px;');
+  return strs.join('');
+}
+
+export default class InfoUtils extends Component {
+  static propTypes = {
+      ...ConfigProvider.propTypes,
+      prefix: PropTypes.string,
+      rtl: PropTypes.bool,
+      /**
+       * 参数说明：
+       * 
+       */
+      type: PropTypes.oneOf(['nodata', 'success', 'warning', 'fault', 'confirm-info', 'confirm-question']),
+      mode: PropTypes.oneOf(['inset', 'modal']),
+      text: PropTypes.string,
+      
+      classNames: PropTypes.array,
+      size: PropTypes.oneOf(['small', 'medium', 'large']),
+      width: PropTypes.number,
+      height: PropTypes.number,
+      style: PropTypes.string,
+
+      onConfirm: PropTypes.func,
+      onCancel: PropTypes.func,
+  };
+
+  static defaultProps = {
+      type: 'normal',
+      text: '',
+      size: 'medium',
+      style: 'light',
+      onConfirm: () => {},
+  };
+
+  onConfirm = e => {
+      // this.button.blur();
+
+      if (this.props.onConfirm) {
+          this.props.onConfirm(e);
+      }
+  };
+
+  onCancel = e => {
+      // this.button.blur();
+
+      if (this.props.onCancel) {
+          this.props.onCancel(e);
+      }
+  }; 
+
+  getComponent = tag => {
+    if(tag == 'modal') {
+      return (
+        <div className="clear">
+            <div>{ this.props.text }</div>
+        </div>
+      );
+
+    } else {
+      return (
+        <div className="clear">
+            <div>{ this.props.text }</div>
+        </div>
+      );
+
+    }
+      
+  }
+
+  getFooter() {
+    return '';
+  }
+
+  render() {
+      const {
+          type,
+          mode,
+          className,
+          size,
+          width,
+          height,
+          style
+      } = this.props;
+      const style = ['light', 'dark'].indexOf(style) >= 0 ? style : 'light';
+
+      const TagType = getTagType(type, mode);
+      const styleStr = getStyleStr(size, width, height);
+      const component = this.getComponent(TagType);
+      const footer = this.getFooter();
+
+      return (
+          <div className={className.push(style).join('')} style={styleStr} onClick={this.onConfirm}>
+              {component}
+              {footer}
+          </div>
+      );
+  }
 }