@amaui/ui-react
Version:
UI for React
181 lines (180 loc) • 10.7 kB
JavaScript
;
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 utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const Line_1 = __importDefault(require("../Line"));
const TextField_1 = __importDefault(require("../TextField"));
const FormRow_1 = __importDefault(require("../FormRow"));
const Slider_1 = __importDefault(require("../Slider"));
const Type_1 = __importDefault(require("../Type"));
const utils_2 = require("../utils");
const SliderInput = react_1.default.forwardRef((props, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const FormRow = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.FormRow) || FormRow_1.default; }, [theme]);
const Slider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slider) || Slider_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const { name, value, onChange, min, max, children, className } = props, other = __rest(props, ["name", "value", "onChange", "min", "max", "children", "className"]);
return ((0, jsx_runtime_1.jsx)(FormRow, Object.assign({ gap: 1, description: `${name} ${(value || 100).toFixed(0)}`, fullWidth: true, className: (0, style_react_1.classNames)([
className
]) }, { children: (0, jsx_runtime_1.jsx)(Slider, Object.assign({ value: value, onChange: onChange, valueDefault: 100, min: min, max: max, size: 'small', tooltip: true, marks: [
{
label: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: min }))),
value: min
},
{
label: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: max }))),
value: max
},
], labels: true }, other, { style: Object.assign({ maxWidth: 'unset', width: 'calc(100% - 8px)', margin: '4px 4px 16px' }, other.style) })) })));
});
const useStyle = (0, style_react_1.style)(theme => ({
root: {
margin: '0',
padding: '0',
border: '0',
outline: 'none',
fontSize: '100%',
background: 'transparent',
boxSizing: 'border-box',
touchAction: 'manipulation',
},
inputColor: {
// Reset
margin: '0',
padding: '0',
border: '0',
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: '1.15',
borderRadius: theme.methods.shape.radius.value(40, 'px'),
overflow: 'hidden',
width: '17px',
height: '17px',
cursor: 'pointer',
boxShadow: theme.methods.shadow(theme.palette.text.default.primary, theme.palette.light ? [7, 4, 11] : [27, 24, 31])[1],
'&::-webkit-color-swatch-wrapper': {
padding: '0'
},
'&::-webkit-color-swatch': {
border: 'none'
}
}
}), { name: 'amaui-ColorTextField' });
const ColorTextField = 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.amauiColorTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
const { name, version = 'outlined', size = 'regular', valueDefault, value: value_, valueColor: valueColor_, valueOpacity: valueOpacity_, onChange: onChange_, onChangeColor: onChangeColor_, onChangeOpacity: onChangeOpacity_, opacity, className } = props, other = __rest(props, ["name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "opacity", "className"]);
const { classes } = useStyle();
const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_) || '');
const [valueColor, setValueColor] = react_1.default.useState(valueColor_ !== undefined ? valueColor_ : '');
const [valueOpacity, setValueOpacity] = react_1.default.useState(valueOpacity_ !== undefined ? valueOpacity_ : 100);
const refs = {
value: react_1.default.useRef(undefined),
valueColor: react_1.default.useRef(valueColor),
valueOpacity: react_1.default.useRef(valueOpacity)
};
refs.value.current = value;
refs.valueColor.current = valueColor;
refs.valueOpacity.current = valueOpacity;
react_1.default.useEffect(() => {
if (opacity) {
if (!value_ || ((0, utils_1.is)('string', value_) && (value_ === null || value_ === void 0 ? void 0 : value_.startsWith('theme'))))
return;
const valuePrevious = (0, utils_1.colorToRgb)(refs.valueColor.current, refs.valueOpacity.current);
if (value_ && value_ !== valuePrevious) {
const [r, g, b, a = 1] = (0, utils_1.colorToRgb)(value_, undefined, true) || [];
setValueOpacity((0, utils_1.clamp)(+(a * 100).toFixed(2), 0, 100));
setValueColor((0, utils_1.rgbToHex)(`rgb(${r}, ${g}, ${b})`));
}
else {
setValueColor('');
setValueOpacity(100);
}
}
else {
if (value_ !== refs.value.current)
setValue(value_);
}
}, [value_]);
react_1.default.useEffect(() => {
if (valueColor_ !== undefined && valueColor !== valueColor_)
setValueColor(valueColor_);
}, [valueColor_]);
react_1.default.useEffect(() => {
if (valueOpacity_ !== undefined && valueOpacity !== valueOpacity_)
setValueOpacity(valueOpacity_);
}, [valueOpacity_]);
const onChange = react_1.default.useCallback((valueNew) => {
if (opacity) {
const opacity_ = (0, utils_1.clamp)(+refs.valueOpacity.current / 100, 0.0001, 1);
if ((0, utils_1.is)('function', onChange_))
onChange_((0, utils_1.colorToRgb)(refs.valueColor.current, +opacity_.toFixed(2)) || '');
}
else {
// Update inner or controlled
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange_))
onChange_(valueNew);
}
}, [onChange_]);
const onChangeColor = react_1.default.useCallback((valueNew) => {
if (!props.hasOwnProperty('valueColor'))
setValueColor(valueNew);
if ((0, utils_1.is)('function', onChangeColor_))
onChangeColor_(valueNew);
setTimeout(() => {
onChange();
}, 14);
}, [onChangeColor_]);
const onChangeOpacity = react_1.default.useCallback((valueNew_) => {
const valueNew = +(valueNew_ === null || valueNew_ === void 0 ? void 0 : valueNew_.toFixed(2));
if (!props.hasOwnProperty('valueOpacity'))
setValueOpacity(valueNew);
if ((0, utils_1.is)('function', onChangeOpacity_))
onChangeOpacity_(valueNew);
setTimeout(() => {
onChange();
}, 14);
}, [onChangeOpacity_]);
const root = ((0, jsx_runtime_1.jsx)(TextField, Object.assign({ name: name, value: opacity ? valueColor : value, onChange: opacity ? onChangeColor : onChange, version: version, size: size, endVerticalAlign: 'center', end: ((0, jsx_runtime_1.jsx)("input", { type: 'color', value: opacity ? valueColor : value, onChange: (event) => opacity ? onChangeColor(event.target.value) : onChange(event.target.value), className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ColorTextField', theme) && [
'amaui-ColorTextField-input-color'
],
classes.inputColor
]) })), className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ColorTextField', theme) && [
'amaui-ColorTextField-root',
`amaui-ColorTextField-version-${version}`,
`amaui-ColorTextField-size-${size}`
],
classes.root
]), fullWidth: opacity }, (!opacity && other))));
if (opacity) {
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 1, fullWidth: true, className: (0, style_react_1.classNames)([
className,
classes.root
]) }, other, { children: [root, (0, jsx_runtime_1.jsx)(SliderInput, { name: 'Opacity', value: valueOpacity, onChange: onChangeOpacity, min: 0, max: 100 })] })));
}
return root;
});
ColorTextField.displayName = 'amaui-ColorTextField';
exports.default = ColorTextField;