ukelli-ui/core/button/button-normal.js

ukelli-ui 是基于 React 的 UI 库，提供简约和功能齐全的组件，可高度定制的组件接口，灵活的配置，提供给开发者另一种开发思路，也致力于尝试不同的组件使用和开发方向。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _icon = require("../icon");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/* eslint-disable react/button-has-type */
var defaultProps = {
  loading: false,
  loadingHint: true,
  loadingDisable: true,
  disabled: false,
  type: 'button',
  color: 'theme',
  className: '',
  icon: ''
};

var Button = function Button(props) {
  var gm = window.$UKE.getUkeKeyMap;
  var loading = props.loading,
      disabled = props.disabled,
      _props$text = props.text,
      text = _props$text === void 0 ? gm('提交') : _props$text,
      icon = props.icon,
      s = props.s,
      type = props.type,
      children = props.children,
      color = props.color,
      className = props.className,
      loadingHint = props.loadingHint,
      loadingDisable = props.loadingDisable,
      _onClick = props.onClick;
  var clickable = !disabled && (!loading || !loadingDisable);
  var iconDOM = icon ? _react["default"].createElement(_icon.Icon, {
    n: icon,
    s: s,
    classNames: ['btn-icon']
  }) : null;
  var loadingTip = loadingHint && loading ? _react["default"].createElement(_icon.Icon, {
    n: "loading",
    s: s,
    classNames: ['btn-loading ml5']
  }) : null;
  return _react["default"].createElement("button", {
    disabled: !clickable,
    type: type,
    className: "btn flat ".concat(color, " ").concat(className),
    onClick: function onClick(e) {
      if (clickable) _onClick(e);
    }
  }, _react["default"].createElement("span", {
    className: "layout a-i-c"
  }, iconDOM, children || text, loadingTip));
};

Button.defaultProps = defaultProps;
Button.propTypes = {
  /** 是否加载中 */
  loading: _propTypes["default"].bool,

  /** 是否需要加载中的提示 */
  loadingHint: _propTypes["default"].bool,

  /** 加载中是否禁用 */
  loadingDisable: _propTypes["default"].bool,

  /** 设置 btn 的 class */
  className: _propTypes["default"].string,

  /** 设置 btn 的 icon, 可以使用 iconMapper 来引用 */
  icon: _propTypes["default"].string,

  /** btn 的字 */
  text: _propTypes["default"].string,

  /** children */
  children: _propTypes["default"].any,

  /** btn 的类型 */
  type: _propTypes["default"].string,

  /** btn 的颜色 [theme, red, gold...] */
  color: _propTypes["default"].string,

  /** 是否禁用 */
  disabled: _propTypes["default"].bool,

  /** 点击处理 */
  onClick: _propTypes["default"].func.isRequired
};
var _default = Button;
exports["default"] = _default;