@onesy/ui-react
Version:
UI for React
364 lines (363 loc) • 13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Line = _interopRequireDefault(require("../Line"));
var _TextField = _interopRequireDefault(require("../TextField"));
var _FormRow = _interopRequireDefault(require("../FormRow"));
var _Slider = _interopRequireDefault(require("../Slider"));
var _Type = _interopRequireDefault(require("../Type"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
const SliderInput = props => {
var _theme$elements, _theme$elements2, _theme$elements3;
const $ = (0, _compilerRuntime.c)(43);
const theme = (0, _styleReact.useOnesyTheme)();
const FormRow = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.FormRow) || _FormRow.default;
const Slider = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Slider) || _Slider.default;
const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
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 = (0, _objectWithoutProperties2.default)(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 = (0, _styleReact.classNames)([className]);
$[10] = className;
$[11] = t3;
} else {
t3 = $[11];
}
let t4;
if ($[12] !== Type || $[13] !== min) {
t4 = /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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 = (0, _styleReact.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: '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_ => {
var _theme$ui, _theme$ui2, _theme$elements4, _theme$elements5;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyColorTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Line) || _Line.default;
const TextField = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.TextField) || _TextField.default;
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 = (0, _objectWithoutProperties2.default)(props, _excluded2);
const {
classes
} = useStyle();
const [value, setValue] = _react.default.useState((valueDefault !== undefined ? valueDefault : value_) || '');
const [valueColor, setValueColor] = _react.default.useState(valueColor_ !== undefined ? valueColor_ : '');
const [valueOpacity, setValueOpacity] = _react.default.useState(valueOpacity_ !== undefined ? valueOpacity_ : 100);
const refs = {
value: _react.default.useRef(undefined),
valueColor: _react.default.useRef(valueColor),
valueOpacity: _react.default.useRef(valueOpacity)
};
refs.value.current = value;
refs.valueColor.current = valueColor;
refs.valueOpacity.current = valueOpacity;
_react.default.useEffect(() => {
if (opacity) {
if (!value_ || (0, _utils.is)('string', value_) && value_ !== null && value_ !== void 0 && value_.startsWith('theme')) return;
const valuePrevious = (0, _utils.colorToRgb)(refs.valueColor.current, refs.valueOpacity.current);
if (value_ && value_ !== valuePrevious) {
const [r, g, b, a = 1] = (0, _utils.colorToRgb)(value_, undefined, true) || [];
setValueOpacity((0, _utils.clamp)(+(a * 100).toFixed(2), 0, 100));
setValueColor((0, _utils.rgbToHex)(`rgb(${r}, ${g}, ${b})`));
} else {
setValueColor('');
setValueOpacity(100);
}
} else {
if (value_ !== refs.value.current) setValue(value_);
}
}, [value_]);
_react.default.useEffect(() => {
if (valueColor_ !== undefined && valueColor !== valueColor_) setValueColor(valueColor_);
}, [valueColor_]);
_react.default.useEffect(() => {
if (valueOpacity_ !== undefined && valueOpacity !== valueOpacity_) setValueOpacity(valueOpacity_);
}, [valueOpacity_]);
const onChange = valueNew => {
if (opacity) {
const opacity_ = (0, _utils.clamp)(+refs.valueOpacity.current / 100, 0.0001, 1);
if ((0, _utils.is)('function', onChange_)) onChange_((0, _utils.colorToRgb)(refs.valueColor.current, +opacity_.toFixed(2)) || '');
} else {
// Update inner or controlled
if (!props.hasOwnProperty('value')) setValue(valueNew);
if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
}
};
const onChangeColor = valueNew_0 => {
if (!props.hasOwnProperty('valueColor')) setValueColor(valueNew_0);
if ((0, _utils.is)('function', onChangeColor_)) onChangeColor_(valueNew_0);
setTimeout(() => {
onChange();
}, 14);
};
const onChangeOpacity = valueNew_ => {
const valueNew_1 = +(valueNew_ === null || valueNew_ === void 0 ? void 0 : valueNew_.toFixed(2));
if (!props.hasOwnProperty('valueOpacity')) setValueOpacity(valueNew_1);
if ((0, _utils.is)('function', onChangeOpacity_)) onChangeOpacity_(valueNew_1);
setTimeout(() => {
onChange();
}, 14);
};
const root = /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, _objectSpread({
name: name,
value: opacity ? valueColor : value,
onChange: opacity ? onChangeColor : onChange,
version: version,
size: size,
endVerticalAlign: "center",
end: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
ref: ref,
type: "color",
value: opacity ? valueColor : value,
onChange: event => opacity ? onChangeColor(event.target.value) : onChange(event.target.value),
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ColorTextField', theme) && ['onesy-ColorTextField-input-color'], classes.inputColor])
}),
className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 1,
fullWidth: true
}, WrapperProps), {}, {
children: [root, /*#__PURE__*/(0, _jsxRuntime.jsx)(SliderInput, {
name: l('Opacity'),
value: valueOpacity,
onChange: onChangeOpacity,
min: 0,
max: 100
})]
}));
}
return root;
};
ColorTextField.displayName = 'onesy-ColorTextField';
var _default = exports.default = ColorTextField;