@ozen-ui/kit
Version:
React component library
30 lines (29 loc) • 1.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.File = exports.fileColorVariant = exports.cnFile = void 0;
var tslib_1 = require("tslib");
require("./File.css");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var Loader_1 = require("../Loader");
var constants_1 = require("./constants");
exports.cnFile = (0, classname_1.cn)('File');
exports.fileColorVariant = ['main', 'primary'];
exports.File = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'File' });
var _a = props.as, Tag = _a === void 0 ? constants_1.FILE_DEFAULT_TAG : _a, _b = props.color, color = _b === void 0 ? constants_1.FILE_DEFAULT_COLOR : _b, error = props.error, loading = props.loading, className = props.className, children = props.children, other = tslib_1.__rest(props, ["as", "color", "error", "loading", "className", "children"]);
var resolvedChildren = (0, react_1.useMemo)(function () {
if (loading) {
return react_1.default.createElement(Loader_1.Loader, { color: "var(--color-content-disabled)", size: "s" });
}
if (error) {
return (react_1.default.createElement(icons_1.WarningTriangleOutlineIcon, { color: "var(--color-content-error)", size: "s" }));
}
return children;
}, [children, loading, error]);
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnFile)({ error: error, loading: loading, color: color }, [className]) }, other, { ref: ref }), resolvedChildren));
});
exports.File.displayName = 'File';