zarm-web/es/button/Button.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { Component } from 'react';
import ActivityIndicator from 'zarm/lib/activity-indicator';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../icon';

class Button extends Component {
  render() {
    const _this$props = this.props,
          {
      prefixCls,
      htmlType = 'button',
      type,
      size,
      block,
      shape,
      active,
      focus,
      disabled,
      ghost,
      loading,
      className,
      onClick,
      children,
      style,
      theme,
      href,
      target,
      icon
    } = _this$props,
          others = _objectWithoutProperties(_this$props, ["prefixCls", "htmlType", "type", "size", "block", "shape", "active", "focus", "disabled", "ghost", "loading", "className", "onClick", "children", "style", "theme", "href", "target", "icon"]);

    const classes = classnames(prefixCls, className, {
      [`${prefixCls}--${theme}`]: theme,
      [`${prefixCls}--${size}`]: size,
      [`${prefixCls}--block`]: block,
      [`${prefixCls}--${shape}`]: shape,
      [`${prefixCls}--active`]: active,
      [`${prefixCls}--focus`]: focus,
      [`${prefixCls}--disabled`]: disabled,
      [`${prefixCls}--loading`]: loading,
      [`${prefixCls}--ghost`]: ghost,
      [`${prefixCls}--icon-only`]: !children && children !== 0 && icon,
      [`${prefixCls}--link`]: href && target
    });
    const child = children ? React.createElement("span", null, children) : null;
    const textContent = loading ? React.createElement(React.Fragment, null, React.createElement(ActivityIndicator, {
      prefixCls: "zw-activity-indicator"
    }), React.createElement("span", null, children)) : child;
    const iconNode = icon ? React.createElement(Icon, {
      type: icon
    }) : null;
    return href ? React.createElement("a", _extends({
      className: classes,
      href: disabled ? undefined : href,
      style: style,
      target: target
    }, others, {
      onClick: e => !disabled && !loading && onClick(e)
    }), textContent) : React.createElement("button", _extends({
      type: htmlType,
      className: classes,
      style: style,
      disabled: disabled,
      onClick: e => !disabled && !loading && onClick(e)
    }, others), iconNode, textContent);
  }

}

Button.Group = void 0;
Button.defaultProps = {
  prefixCls: 'zw-button',
  htmlType: 'button',
  theme: 'default',
  shape: 'radius',
  icon: '',
  ghost: false,
  size: null,
  loading: false,
  onClick: () => {}
};
Button.propTypes = {
  prefixCls: PropTypes.string,
  theme: PropTypes.string,
  shape: PropTypes.oneOf(['circle', 'round', 'rect', 'radius']),
  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']),
  htmlType: PropTypes.oneOf(['submit', 'button', 'reset']),
  icon: PropTypes.string,
  onClick: PropTypes.func,
  loading: PropTypes.bool,
  ghost: PropTypes.bool
};
export default Button;