nice-ui/lib/2-inline-block/CopyInput/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CopyInput = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const NotchedOutline_1 = require("../NotchedOutline");
const Split_1 = require("../../3-list-item/Split");
const CopyButton_1 = require("../CopyButton");
const font = nano_theme_1.theme.font.ui2;
const inpClass = (0, nano_theme_1.rule)({
    ...font.bold,
    fz: '15px',
    lh: '1.4em',
    d: 'block',
    w: '100%',
    bxz: 'border-box',
    bd: 0,
    bdrad: '4px',
    mr: 0,
    pd: '4px 5px',
    out: 0,
    '&:disabled': {
        bg: 'transparent',
    },
});
const CopyInput = (props) => {
    const { disabled, value = '', label, size, readOnly, type = 'text' } = props;
    const [focus] = React.useState(false);
    const style = {};
    if (size) {
        const factor = size < 0 ? 1 : 2;
        style.fontSize = `${15 + size * factor}px`;
        style.paddingTop = `${4 + size * factor}px`;
        style.paddingBottom = `${4 + size * factor}px`;
        if (size < 0) {
            style.fontWeight = font.mid.fw;
        }
    }
    return (React.createElement(NotchedOutline_1.NotchedOutline, { label: label, active: focus, disabled: disabled || readOnly },
        React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
            React.createElement("input", { className: inpClass, style: style, readOnly: true, value: value, type: type, disabled: disabled, onMouseDown: (event) => {
                    const input = event.nativeEvent.target;
                    if (!input)
                        return;
                    event.preventDefault();
                    input.select();
                } }),
            React.createElement("div", null,
                React.createElement(CopyButton_1.CopyButton, { onCopy: () => value })))));
};
exports.CopyInput = CopyInput;