@ozen-ui/kit
Version:
React component library
52 lines (51 loc) • 3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconButton = exports.cnIconButton = void 0;
var tslib_1 = require("tslib");
require("./IconButton.css");
var react_1 = tslib_1.__importStar(require("react"));
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");
var utils_1 = require("./utils");
exports.cnIconButton = (0, classname_1.cn)('IconButtonNext');
exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'IconButtonNext',
});
var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
var renderIcon = function (content) {
return (0, renderContent_1.renderContent)({
content: content,
props: {
size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
color: iconColor,
},
});
};
var resolvedChildren = (0, react_1.useMemo)(function () {
if (loading) {
return (react_1.default.createElement(Loader_1.Loader, { className: (0, exports.cnIconButton)('Loader'), color: "var(--color-content-disabled)", size: utils_1.loaderSizeMapper[size] }));
}
if (icon) {
return renderIcon(icon);
}
return null;
}, [loading, size, iconColor, icon, renderIcon]);
return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: (0, exports.cnIconButton)({
variant: variant,
size: size,
color: color,
disabled: disabled,
loading: loading,
compressed: compressed,
rounded: rounded,
}, [className]) }, other, { ref: ref }), resolvedChildren));
});
exports.IconButton.displayName = 'IconButton';