react-email-builder
Version:
A simple React drag and drop email builder.
61 lines (60 loc) • 2.7 kB
JavaScript
import React from 'react';
import clsx from 'clsx';
import { getCss } from '../../utils';
export function SizeInput({ value, unit, max, min, defaultValue, step, onChange, disabled, showControls }) {
const applyChange = (num) => {
let val = num;
if (val != null) {
if (min != null && val < min) {
val = min;
}
if (max != null && val > max) {
val = max;
}
}
onChange(val);
};
const real = value ?? defaultValue ?? 0;
const increment = () => {
applyChange(real + (step || 1));
};
const decrement = () => {
applyChange(real - (step || 1));
};
const disabledMin = (min != null && real <= min) || disabled;
const disabledMax = (max != null && real >= max) || disabled;
const css = getCss('SizeInput', (ns) => ({
root: ns(),
inputBox: ns('input-box'),
input: ns('input'),
unit: ns('unit'),
actions: ns('actions'),
action: ns('action'),
sep: ns('sep'),
disabled: ns('disabled')
}));
return (React.createElement("div", { className: css.root },
React.createElement("div", { className: clsx(css.inputBox, disabled ? css.disabled : '') },
React.createElement("div", { className: css.input },
React.createElement("input", { disabled: disabled, value: `${value ?? ''}`, onChange: (e) => {
const input = e.target.value;
applyChange(input ? readAsNum(input) : undefined);
}, placeholder: `${defaultValue ?? 0}`, onKeyDown: (e) => {
if (e.key === 'ArrowUp' || e.keyCode === 38) {
e.preventDefault();
increment();
}
else if (e.key === 'ArrowDown' || e.keyCode === 40) {
e.preventDefault();
decrement();
}
} })),
unit ? React.createElement("div", { className: css.unit }, unit) : null),
showControls ? (React.createElement("div", { className: css.actions },
React.createElement("div", { className: clsx(css.action, disabledMin ? css.disabled : ''), onClick: disabledMin ? undefined : decrement }, "-"),
React.createElement("div", { className: css.sep }),
React.createElement("div", { className: clsx(css.action, disabledMax ? css.disabled : ''), onClick: disabledMax ? undefined : increment }, "+"))) : null));
}
function readAsNum(s) {
return parseInt(s.replace(/[^+-.0-9]/g, '')) || 0;
}