@amaui/ui-react/Placeholder/Placeholder.js

UI for React

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const style_react_1 = require("@amaui/style-react");
const Surface_1 = __importDefault(require("../Surface"));
const utils_1 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
    '@keyframes move': {
        '100%': {
            transform: 'translateX(100%)'
        }
    },
    '@keyframes pulse': {
        '0%': {
            opacity: '1'
        },
        '50%': {
            opacity: '0.4'
        },
        '100%': {
            opacity: '1'
        }
    },
    '@keyframes pulseDark': {
        '0%': {
            opacity: '1'
        },
        '50%': {
            opacity: '0.7'
        },
        '100%': {
            opacity: '1'
        }
    },
    root: {
        position: 'relative',
        userSelect: 'none',
        overflow: 'hidden'
    },
    wrapper: {
        opacity: theme.palette.light ? '0.07' : '0.14',
        background: 'currentColor',
        width: '100%',
        height: '100%'
    },
    animation_wave: {
        '&::before': {
            content: "''",
            position: 'absolute',
            inset: '0',
            background: `linear-gradient(90deg, transparent, ${theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 4)}, transparent)`,
            transform: 'translateX(-100%)',
            animation: '$move 2.4s infinite'
        }
    },
    animation_pulse: {
        animation: `$pulse${theme.palette.light ? '' : 'Dark'} 2.4s 0.4s infinite`
    },
    version_circle: {
        borderRadius: theme.methods.shape.radius.value(40, 'px')
    },
    version_rounded: {
        borderRadius: theme.methods.shape.radius.value(1, 'px')
    },
    version_rectangle: {
        borderRadius: '0px'
    },
    text: {
        height: '1em'
    },
    children: {
        visibility: 'hidden'
    }
}), { name: 'amaui-Placeholder' });
const Placeholder = react_1.default.forwardRef((props_, ref) => {
    const theme = (0, style_react_1.useAmauiTheme)();
    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiPlaceholder) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
    const { color = 'default', version = 'rounded', width, height, animation = 'pulse', text, Component = 'div', className, style, children } = props, other = __rest(props, ["color", "version", "width", "height", "animation", "text", "Component", "className", "style", "children"]);
    const { classes } = useStyle();
    const styles = {
        root: {}
    };
    if (width !== undefined)
        styles.root.width = width;
    if (height !== undefined)
        styles.root.height = height;
    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, style_react_1.classNames)([
            (0, utils_1.staticClassName)('Placeholder', theme) && [
                `amaui-Placeholder-root`
            ],
            className,
            classes.root,
            classes[`version_${version}`],
            animation && animation && classes[`animation_${animation}`],
            text && classes.text
        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ version: 'text', tonal: false, color: color, className: (0, style_react_1.classNames)([
                (0, utils_1.staticClassName)('Placeholder', theme) && [
                    `amaui-Placeholder-wrapper`
                ],
                classes.wrapper
            ]) }, { children: children && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
                    (0, utils_1.staticClassName)('Placeholder', theme) && [
                        `amaui-Placeholder-children`
                    ],
                    classes.children
                ]) }, { children: children }))) })) })));
});
Placeholder.displayName = 'amaui-Placeholder';
exports.default = Placeholder;