json-joy
Version:
Collection of libraries for building collaborative editing apps.
104 lines (103 loc) • 3.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const SpinnerBars_1 = require("nice-ui/lib/2-inline-block/SpinnerBars");
const NotchedOutline_1 = require("nice-ui/lib/2-inline-block/NotchedOutline");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const styles_1 = require("nice-ui/lib/styles");
const context_1 = require("nice-ui/lib/styles/context");
const outlineClass = (0, nano_theme_1.rule)({
pd: '0px !important',
});
const inpClass = (0, nano_theme_1.rule)({
...styles_1.fonts.get('ui', 'bold', 1),
fz: '15px',
lh: '1.4em',
d: 'block',
w: '100%',
bxz: 'border-box',
bd: 0,
mr: 0,
out: 0,
pd: '8px 10px',
bdrad: '4px',
bg: 'transparent',
'&:disabled': {
bg: 'transparent',
},
'&::placeholder': {
opacity: 0.7,
},
});
const { useState, useCallback, useRef, useEffect } = React;
const Input = (props) => {
const { disabled, value, placeholder, onPaste, onEsc, onKeyDown, onChange, label, size, readOnly, type = 'text', waiting, right, } = props;
const [focus, setFocus] = useState(false);
const ref = useRef(null);
const styles = (0, context_1.useStyles)();
useEffect(() => {
if (!ref.current)
return;
if (!props.focus)
return;
if (props.focus)
ref.current.focus();
if (props.select)
ref.current.select();
}, [ref.current]);
const onFocus = useCallback(() => {
setFocus(true);
props.onFocus?.();
}, [props.onFocus]);
const onBlur = useCallback(() => {
setFocus(false);
props.onBlur?.();
}, [props.onBlur]);
let rightElement = null;
if (right) {
rightElement = right;
}
else if (waiting) {
rightElement = React.createElement(SpinnerBars_1.SpinnerBars, null);
}
const style = {};
if (size) {
const factor = size < 0 ? 1 : 2;
style.fontSize = `${16 + size * factor}px`;
style.paddingTop = `${8 + size * factor}px`;
style.paddingBottom = `${8 + size * factor}px`;
if (size < 0) {
style.fontWeight = styles_1.fonts.get('ui', 'mid', 1).fw;
}
}
const inputAttr = {
ref: (input) => {
ref.current = input;
props.inp?.(input);
},
className: inpClass,
style,
disabled,
value,
placeholder,
type,
readOnly,
onFocus,
onBlur,
onKeyDown: (e) => {
if (onEsc && e.key === 'Escape')
onEsc(e);
onKeyDown?.(e);
},
onPaste,
onChange,
};
return (React.createElement(NotchedOutline_1.NotchedOutline, { className: outlineClass, label: label, active: focus, disabled: disabled || readOnly, style: { background: focus ? styles.col.map('bg') : 'transparent' } },
React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement("input", { ...inputAttr }),
rightElement)));
};
exports.Input = Input;