@ozen-ui/kit
Version:
React component library
50 lines (49 loc) • 3.57 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = exports.cnButton = void 0;
var tslib_1 = require("tslib");
require("./Button.css");
var react_1 = tslib_1.__importStar(require("react"));
var react_transition_group_1 = require("react-transition-group");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var renderContent_1 = require("../../utils/renderContent");
var ButtonBase_1 = require("../ButtonBase");
var Loader_1 = require("../Loader");
var constants_1 = require("./constants");
exports.cnButton = (0, classname_1.cn)('ButtonNext');
exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'ButtonNext',
});
var loaderRef = (0, react_1.useRef)(null);
var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
var renderIcon = function (content) {
return (0, renderContent_1.renderContent)({
content: content,
props: {
size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
},
});
};
var childContent = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { className: (0, exports.cnButton)('Content') },
renderIcon(iconLeft),
react_1.default.createElement("span", tslib_1.__assign({}, labelProps, { className: (0, exports.cnButton)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
renderIcon(iconRight)),
react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: loaderRef, in: loading, timeout: 120, classNames: (0, exports.cnButton)('Loader', { animation: true }), unmountOnExit: true },
react_1.default.createElement(Loader_1.Loader, { size: iconSize, className: (0, exports.cnButton)('Loader'), ref: loaderRef }))));
return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: (0, exports.cnButton)({
variant: variant,
size: size,
disabled: disabled,
loading: loading,
color: color,
fullWidth: fullWidth,
}, [className]) }, other, { ref: ref }), childContent));
});
exports.Button.displayName = 'Button';