@onesy/ui-react
Version:
UI for React
355 lines • 10.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["name", "value", "onChange", "min", "max", "children", "className"],
_excluded2 = ["ref", "name", "version", "size", "valueDefault", "value", "valueColor", "valueOpacity", "onChange", "onChangeColor", "onChangeOpacity", "WrapperProps", "opacity", "className", "style"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { c as _c } from "react/compiler-runtime";
import React from 'react';
import { clamp, colorToRgb, is, rgbToHex } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import LineElement from '../Line';
import TextFieldElement from '../TextField';
import FormRowElement from '../FormRow';
import SliderElement from '../Slider';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SliderInput = props => {
const $ = _c(43);
const theme = useOnesyTheme();
const FormRow = theme?.elements?.FormRow || FormRowElement;
const Slider = theme?.elements?.Slider || SliderElement;
const Type = theme?.elements?.Type || TypeElement;
let className;
let max;
let min;
let name;
let onChange;
let other;
let value;
if ($[0] !== props) {
const {
name: t0,
value: t1,
onChange: t2,
min: t3,
max: t4,
children,
className: t5
} = props,
t6 = _objectWithoutProperties(props, _excluded);
name = t0;
value = t1;
onChange = t2;
min = t3;
max = t4;
className = t5;
other = t6;
$[0] = props;
$[1] = className;
$[2] = max;
$[3] = min;
$[4] = name;
$[5] = onChange;
$[6] = other;
$[7] = value;
} else {
className = $[1];
max = $[2];
min = $[3];
name = $[4];
onChange = $[5];
other = $[6];
value = $[7];
}
const t0 = value || 100;
let t1;
if ($[8] !== t0) {
t1 = t0.toFixed(0);
$[8] = t0;
$[9] = t1;
} else {
t1 = $[9];
}
const t2 = `${name} ${t1}`;
let t3;
if ($[10] !== className) {
t3 = classNames([className]);
$[10] = className;
$[11] = t3;
} else {
t3 = $[11];
}
let t4;
if ($[12] !== Type || $[13] !== min) {
t4 = /*#__PURE__*/_jsx(Type, {
version: "b3",
children: min
});
$[12] = Type;
$[13] = min;
$[14] = t4;
} else {
t4 = $[14];
}
let t5;
if ($[15] !== min || $[16] !== t4) {
t5 = {
label: t4,
value: min
};
$[15] = min;
$[16] = t4;
$[17] = t5;
} else {
t5 = $[17];
}
let t6;
if ($[18] !== Type || $[19] !== max) {
t6 = /*#__PURE__*/_jsx(Type, {
version: "b3",
children: max
});
$[18] = Type;
$[19] = max;
$[20] = t6;
} else {
t6 = $[20];
}
let t7;
if ($[21] !== max || $[22] !== t6) {
t7 = {
label: t6,
value: max
};
$[21] = max;
$[22] = t6;
$[23] = t7;
} else {
t7 = $[23];
}
let t8;
if ($[24] !== t5 || $[25] !== t7) {
t8 = [t5, t7];
$[24] = t5;
$[25] = t7;
$[26] = t8;
} else {
t8 = $[26];
}
let t9;
if ($[27] !== other.style) {
t9 = _objectSpread({
maxWidth: "unset",
width: "calc(100% - 8px)",
margin: "4px 4px 16px"
}, other.style);
$[27] = other.style;
$[28] = t9;
} else {
t9 = $[28];
}
let t10;
if ($[29] !== Slider || $[30] !== max || $[31] !== min || $[32] !== onChange || $[33] !== other || $[34] !== t8 || $[35] !== t9 || $[36] !== value) {
t10 = /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
value: value,
onChange: onChange,
valueDefault: 100,
min: min,
max: max,
size: "small",
tooltip: true,
marks: t8,
labels: true
}, other), {}, {
style: t9
}));
$[29] = Slider;
$[30] = max;
$[31] = min;
$[32] = onChange;
$[33] = other;
$[34] = t8;
$[35] = t9;
$[36] = value;
$[37] = t10;
} else {
t10 = $[37];
}
let t11;
if ($[38] !== FormRow || $[39] !== t10 || $[40] !== t2 || $[41] !== t3) {
t11 = /*#__PURE__*/_jsx(FormRow, {
gap: 1,
description: t2,
fullWidth: true,
className: t3,
children: t10
});
$[38] = FormRow;
$[39] = t10;
$[40] = t2;
$[41] = t3;
$[42] = t11;
} else {
t11 = $[42];
}
return t11;
};
const useStyle = styleMethod(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: '18px',
height: '18px',
marginBottom: '3px',
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: 'onesy-ColorTextField'
});
const ColorTextField = props_ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyColorTextField?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const TextField = theme?.elements?.TextField || TextFieldElement;
const {
ref,
name,
version = 'outlined',
size = 'regular',
valueDefault,
value: value_,
valueColor: valueColor_,
valueOpacity: valueOpacity_,
onChange: onChange_,
onChangeColor: onChangeColor_,
onChangeOpacity: onChangeOpacity_,
WrapperProps,
opacity,
className,
style
} = props,
other = _objectWithoutProperties(props, _excluded2);
const {
classes
} = useStyle();
const [value, setValue] = React.useState((valueDefault !== undefined ? valueDefault : value_) || '');
const [valueColor, setValueColor] = React.useState(valueColor_ !== undefined ? valueColor_ : '');
const [valueOpacity, setValueOpacity] = React.useState(valueOpacity_ !== undefined ? valueOpacity_ : 100);
const refs = {
value: React.useRef(undefined),
valueColor: React.useRef(valueColor),
valueOpacity: React.useRef(valueOpacity)
};
refs.value.current = value;
refs.valueColor.current = valueColor;
refs.valueOpacity.current = valueOpacity;
React.useEffect(() => {
if (opacity) {
if (!value_ || is('string', value_) && value_?.startsWith('theme')) return;
const valuePrevious = colorToRgb(refs.valueColor.current, refs.valueOpacity.current);
if (value_ && value_ !== valuePrevious) {
const [r, g, b, a = 1] = colorToRgb(value_, undefined, true) || [];
setValueOpacity(clamp(+(a * 100).toFixed(2), 0, 100));
setValueColor(rgbToHex(`rgb(${r}, ${g}, ${b})`));
} else {
setValueColor('');
setValueOpacity(100);
}
} else {
if (value_ !== refs.value.current) setValue(value_);
}
}, [value_]);
React.useEffect(() => {
if (valueColor_ !== undefined && valueColor !== valueColor_) setValueColor(valueColor_);
}, [valueColor_]);
React.useEffect(() => {
if (valueOpacity_ !== undefined && valueOpacity !== valueOpacity_) setValueOpacity(valueOpacity_);
}, [valueOpacity_]);
const onChange = valueNew => {
if (opacity) {
const opacity_ = clamp(+refs.valueOpacity.current / 100, 0.0001, 1);
if (is('function', onChange_)) onChange_(colorToRgb(refs.valueColor.current, +opacity_.toFixed(2)) || '');
} else {
// Update inner or controlled
if (!props.hasOwnProperty('value')) setValue(valueNew);
if (is('function', onChange_)) onChange_(valueNew);
}
};
const onChangeColor = valueNew_0 => {
if (!props.hasOwnProperty('valueColor')) setValueColor(valueNew_0);
if (is('function', onChangeColor_)) onChangeColor_(valueNew_0);
setTimeout(() => {
onChange();
}, 14);
};
const onChangeOpacity = valueNew_ => {
const valueNew_1 = +valueNew_?.toFixed(2);
if (!props.hasOwnProperty('valueOpacity')) setValueOpacity(valueNew_1);
if (is('function', onChangeOpacity_)) onChangeOpacity_(valueNew_1);
setTimeout(() => {
onChange();
}, 14);
};
const root = /*#__PURE__*/_jsx(TextField, _objectSpread({
name: name,
value: opacity ? valueColor : value,
onChange: opacity ? onChangeColor : onChange,
version: version,
size: size,
endVerticalAlign: "center",
end: /*#__PURE__*/_jsx("input", {
ref: ref,
type: "color",
value: opacity ? valueColor : value,
onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-input-color'], classes.inputColor])
}),
className: classNames([staticClassName('ColorTextField', theme) && ['onesy-ColorTextField-root', `onesy-ColorTextField-version-${version}`, `onesy-ColorTextField-size-${size}`], className, classes.root]),
fullWidth: opacity,
style: style
}, !opacity && other));
if (opacity) {
return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 1,
fullWidth: true
}, WrapperProps), {}, {
children: [root, /*#__PURE__*/_jsx(SliderInput, {
name: l('Opacity'),
value: valueOpacity,
onChange: onChangeOpacity,
min: 0,
max: 100
})]
}));
}
return root;
};
ColorTextField.displayName = 'onesy-ColorTextField';
export default ColorTextField;