shineout/es/Button/Button.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent, isValidElement } from 'react';
import classnames from 'classnames';
import Spin from '../Spin';
import Group from './Group';
import Once from './Once';
import { wrapSpan } from '../utils/dom/element';
import { buttonClass } from './styles';
import { isRTL } from '../config';
import { getDirectionClass } from '../utils/classname';
var DefaultProps = {
  size: 'default',
  htmlType: 'button',
  outline: false,
  type: 'default'
};

var Button =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Button, _PureComponent);

  function Button() {
    return _PureComponent.apply(this, arguments) || this;
  }

  var _proto = Button.prototype;

  _proto.getChildren = function getChildren() {
    var _this$props = this.props,
        children = _this$props.children,
        loading = _this$props.loading,
        space = _this$props.space;
    if (!children) return children;
    var parsed = React.Children.map(wrapSpan(children, space), function (item) {
      if (loading && isValidElement(item) && item.type.isShineoutIcon) return null;
      return item;
    });
    return (parsed || []).filter(function (v) {
      return v !== null;
    });
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        outlineProp = _this$props2.outline,
        typeProp = _this$props2.type,
        size = _this$props2.size,
        href = _this$props2.href,
        htmlType = _this$props2.htmlType,
        loading = _this$props2.loading,
        disabled = _this$props2.disabled,
        onRef = _this$props2.onRef,
        shape = _this$props2.shape,
        text = _this$props2.text,
        space = _this$props2.space,
        target = _this$props2.target,
        others = _objectWithoutPropertiesLoose(_this$props2, ["outline", "type", "size", "href", "htmlType", "loading", "disabled", "onRef", "shape", "text", "space", "target"]);

    var isSecondary = typeProp === 'secondary' && !outlineProp && !text;
    var type = isSecondary ? 'primary' : typeProp;
    var outline = outlineProp || isSecondary;
    var color = outline || type === 'default' ? undefined : '#fff';
    if (text) color = 'currentColor';
    var className = classnames(buttonClass('_', shape !== 'default' && shape, type, outline && 'outline', {
      large: size === 'large',
      small: size === 'small',
      text: text && 'text',
      rtl: isRTL(),
      disabled: disabled
    }), this.props.className);

    if (href && !disabled) {
      return React.createElement("a", _extends({
        href: href
      }, others, {
        target: target,
        className: className,
        ref: onRef
      }), this.props.children);
    }

    var children = this.getChildren();
    return (// eslint-disable-next-line react/button-has-type
      React.createElement("button", _extends({}, others, {
        ref: onRef,
        disabled: disabled || loading,
        type: htmlType,
        className: className
      }), loading && React.createElement("span", {
        className: buttonClass(getDirectionClass('spin'))
      }, React.createElement(Spin, {
        size: 12,
        name: "ring",
        color: color
      })), children)
    );
  };

  return Button;
}(PureComponent);

_defineProperty(Button, "displayName", 'ShineoutButton');

_defineProperty(Button, "Group", Group);

_defineProperty(Button, "Once", Once);

_defineProperty(Button, "defaultProps", DefaultProps);

export default Button;