@clayui/button
Version:
ClayButton component
75 lines (74 loc) • 5.08 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _warning = _interopRequireDefault(require("warning"));
var _Group = _interopRequireDefault(require("./Group"));
var _excluded = ["alert", "block", "borderless", "children", "className", "dark", "displayType", "monospaced", "outline", "rounded", "size", "small", "translucent", "type"];
/**
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
* SPDX-License-Identifier: BSD-3-Clause
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
function forwardRef(component) {
return /*#__PURE__*/_react.default.forwardRef(component);
}
var Button = forwardRef(function (_ref, ref) {
var _childArray$0$type, _classNames;
var alert = _ref.alert,
block = _ref.block,
borderless = _ref.borderless,
children = _ref.children,
className = _ref.className,
dark = _ref.dark,
_ref$displayType = _ref.displayType,
displayType = _ref$displayType === void 0 ? 'primary' : _ref$displayType,
monospaced = _ref.monospaced,
outline = _ref.outline,
rounded = _ref.rounded,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'regular' : _ref$size,
small = _ref.small,
translucent = _ref.translucent,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'button' : _ref$type,
otherProps = _objectWithoutProperties(_ref, _excluded);
var childArray = _react.default.Children.toArray(children);
undefined !== "production" ? (0, _warning.default)(!(childArray.length === 1 &&
// @ts-ignore
((_childArray$0$type = childArray[0].type) === null || _childArray$0$type === void 0 ? void 0 : _childArray$0$type.displayName) === 'ClayIcon' && typeof otherProps['aria-label'] !== 'string' && typeof otherProps['aria-labelledby'] !== 'string'), 'Button Accessibility: Component has only the Icon declared. Define an `aria-label` or `aria-labelledby` attribute that labels the interactive button that screen readers can read. The `title` attribute is optional but consult your design team.') : void 0;
if (displayType === 'beta') {
displayType = 'info';
translucent = true;
} else if (displayType === 'beta-dark') {
dark = true;
displayType = 'info';
translucent = true;
}
return /*#__PURE__*/_react.default.createElement("button", _extends({
className: (0, _classnames.default)(className, 'btn', (_classNames = {
'alert-btn': alert,
'btn-block': block,
'btn-monospaced': monospaced,
'btn-outline-borderless': borderless,
'btn-sm': small && (!size || size === 'regular'),
'btn-translucent': translucent,
'clay-dark': dark
}, _defineProperty(_classNames, "btn-".concat(displayType), displayType && !outline && !borderless), _defineProperty(_classNames, "btn-outline-".concat(displayType), displayType && (outline || borderless)), _defineProperty(_classNames, 'rounded-pill', rounded), _defineProperty(_classNames, "btn-".concat(size), size && size !== 'regular'), _classNames)),
ref: ref,
type: type
}, otherProps), children);
});
Button.Group = _Group.default;
Button.displayName = 'ClayButton';
var _default = exports.default = Button;
;