@amaui/ui-react
Version:
UI for React
852 lines (851 loc) • 45.2 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 IconButton_1 = __importDefault(require("../IconButton"));
const Tooltip_1 = __importDefault(require("../Tooltip"));
const Zoom_1 = __importDefault(require("../Zoom"));
const Type_1 = __importDefault(require("../Type"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => {
const rail = {
position: 'absolute',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'inherit'
};
const horizontal = {
top: '50%',
transform: 'translateY(-50%)'
};
const vertical = {
left: '50%',
transform: 'translateX(-50%)'
};
return {
root: {
position: 'relative',
display: 'inline-flex',
borderRadius: `${theme.shape.radius.unit * 0.75}px`,
cursor: 'pointer',
touchAction: 'none'
},
root_orientation_horizontal: {
width: '100vw',
maxWidth: 400,
height: 4,
margin: '16px 0 28px'
},
root_orientation_vertical: {
height: '100vh',
maxHeight: 240,
width: 4,
margin: '0 16px 0 28px'
},
rail: Object.assign({}, rail),
rail_orientation_horizontal: {
insetInline: '0'
},
rail_orientation_vertical: {
insetBlock: '0'
},
rail_orientation_horizontal_size_small: { height: '3px' },
rail_orientation_horizontal_size_regular: { height: '4px' },
rail_orientation_horizontal_size_large: { height: '5px' },
rail_orientation_vertical_size_small: { width: '3px' },
rail_orientation_vertical_size_regular: { width: '4px' },
rail_orientation_vertical_size_large: { width: '5px' },
track: Object.assign({}, rail),
track_orientation_horizontal: {
insetInlineStart: '0'
},
track_orientation_vertical: {
insetBlockEnd: '0'
},
track_orientation_horizontal_size_small: { height: '5px' },
track_orientation_horizontal_size_regular: { height: '6px' },
track_orientation_horizontal_size_large: { height: '7px' },
track_orientation_vertical_size_small: { width: '5px' },
track_orientation_vertical_size_regular: { width: '6px' },
track_orientation_vertical_size_large: { width: '7px' },
// Color
// rail
rail_color_default: { background: theme.methods.palette.color.value('default', 40, true) },
rail_color_neutral: { background: theme.methods.palette.color.value('neutral', 40, true) },
rail_color_primary: { background: theme.methods.palette.color.value('primary', 40, true) },
rail_color_secondary: { background: theme.methods.palette.color.value('secondary', 40, true) },
rail_color_tertiary: { background: theme.methods.palette.color.value('tertiary', 40, true) },
rail_color_quaternary: { background: theme.methods.palette.color.value('quaternary', 40, true) },
rail_color_info: { background: theme.methods.palette.color.value('info', 40, true) },
rail_color_success: { background: theme.methods.palette.color.value('success', 40, true) },
rail_color_warning: { background: theme.methods.palette.color.value('warning', 40, true) },
rail_color_error: { background: theme.methods.palette.color.value('info', 40, true) },
// track
track_color_default: { background: theme.methods.palette.color.value('default', 30, true) },
track_color_neutral: { background: theme.methods.palette.color.value('neutral', 30, true) },
track_color_primary: { background: theme.methods.palette.color.value('primary', 30, true) },
track_color_secondary: { background: theme.methods.palette.color.value('secondary', 30, true) },
track_color_tertiary: { background: theme.methods.palette.color.value('tertiary', 30, true) },
track_color_quaternary: { background: theme.methods.palette.color.value('quaternary', 30, true) },
track_color_info: { background: theme.methods.palette.color.value('info', 30, true) },
track_color_success: { background: theme.methods.palette.color.value('success', 30, true) },
track_color_warning: { background: theme.methods.palette.color.value('warning', 30, true) },
track_color_error: { background: theme.methods.palette.color.value('error', 30, true) },
// Tonal
track_tonal_color_neutral: { background: theme.methods.palette.color.value('neutral', 20, true) },
track_tonal_color_primary: { background: theme.methods.palette.color.value('primary', 20, true) },
track_tonal_color_secondary: { background: theme.methods.palette.color.value('secondary', 20, true) },
track_tonal_color_tertiary: { background: theme.methods.palette.color.value('tertiary', 20, true) },
track_tonal_color_quaternary: { background: theme.methods.palette.color.value('quaternary', 20, true) },
track_tonal_color_info: { background: theme.methods.palette.color.value('info', 20, true) },
track_tonal_color_success: { background: theme.methods.palette.color.value('success', 20, true) },
track_tonal_color_warning: { background: theme.methods.palette.color.value('warning', 20, true) },
track_tonal_color_error: { background: theme.methods.palette.color.value('info', 20, true) },
// iconButton
iconButton_color_default: {
'&.amaui-IconButton-root': {
color: theme.palette.text.default.primary
}
},
iconButton_color_neutral: {
'&.amaui-IconButton-root': {
color: theme.palette.color.neutral.main
}
},
iconButton_color_primary: {
'&.amaui-IconButton-root': {
color: theme.palette.color.primary.main
}
},
iconButton_color_secondary: {
'&.amaui-IconButton-root': {
color: theme.palette.color.secondary.main
}
},
iconButton_color_tertiary: {
'&.amaui-IconButton-root': {
color: theme.palette.color.tertiary.main
}
},
iconButton_color_quaternary: {
'&.amaui-IconButton-root': {
color: theme.palette.color.quaternary.main
}
},
iconButton_color_info: {
'&.amaui-IconButton-root': {
color: theme.palette.color.info.main
}
},
iconButton_color_success: {
'&.amaui-IconButton-root': {
color: theme.palette.color.success.main
}
},
iconButton_color_warning: {
'&.amaui-IconButton-root': {
color: theme.palette.color.warning.main
}
},
iconButton_color_error: {
'&.amaui-IconButton-root': {
color: theme.palette.color.error.main
}
},
// Tonal
iconButton_tonal_color_neutral: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('default', 70)
}
},
iconButton_tonal_color_primary: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('primary', 70)
}
},
iconButton_tonal_color_secondary: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('secondary', 70)
}
},
iconButton_tonal_color_tertiary: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('tertiary', 70)
}
},
iconButton_tonal_color_quaternary: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('quaternary', 70)
}
},
iconButton_tonal_color_info: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('info', 70)
}
},
iconButton_tonal_color_success: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('success', 70)
}
},
iconButton_tonal_color_warning: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('warning', 70)
}
},
iconButton_tonal_color_error: {
'&.amaui-IconButton-root': {
color: theme.methods.palette.color.value('error', 70)
}
},
square: {
borderRadius: '0px'
},
iconButton: {
position: 'absolute'
},
icon: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.5em)`,
transform: 'scale(0.7)',
transition: theme.methods.transitions.make('transform', { duration: 'xs' })
},
iconActive: {
transform: 'scale(1)'
},
icon_size_small: {
width: '16px',
height: '16px',
},
icon_size_regular: {
width: '20px',
height: '20px',
},
icon_size_large: {
width: '24px',
height: '24px',
},
marks: Object.assign({ inset: '0' }, rail),
mark: {
position: 'absolute',
width: '2px',
height: '2px',
borderRadius: theme.methods.shape.radius.value(40, 'px')
},
orientation_horizontal: Object.assign({}, horizontal),
orientation_vertical: Object.assign({}, vertical),
labels: {
position: 'absolute',
whiteSpace: 'nowrap',
userSelect: 'none'
},
labels_orientation_horizontal: {
width: '100%',
left: '0',
top: '15px'
},
labels_orientation_vertical: {
height: '100%',
top: '0',
insetInlineStart: '21px'
},
label: {
position: 'absolute',
transition: theme.methods.transitions.make('color', { duration: 'xs' }),
color: theme.palette.text.default.secondary
},
label_orientation_horizontal: {
transform: 'translateX(-50%)'
},
label_orientation_horizontal_rtl: {
transform: 'translateX(50%)'
},
label_orientation_vertical: {
transform: 'translateY(50%)'
},
label_active: {
color: theme.palette.text.default.primary
},
focus_outline: {
outline: `1px solid ${theme.palette.text.default.secondary}`,
outlineOffset: '8px'
},
readOnly: {
cursor: 'default'
},
tooltip: {
'& .amaui-Tooltip-name': {
padding: '0',
lineHeight: '0',
minWidth: '30px',
paddingTop: '100%',
overflow: 'hidden',
borderRadius: `${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} 0px`,
transform: 'rotate(-45deg)',
'& .amaui-Tooltip-name-text': {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%) rotate(45deg)'
}
},
'&.amaui-Tooltip-position-left': {
'& .amaui-Tooltip-name': {
borderRadius: `${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} 0px ${theme.methods.shape.radius.value(40, 'px')}`
}
},
'&.amaui-Tooltip-position-right': {
'& .amaui-Tooltip-name': {
borderRadius: `0px ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')} ${theme.methods.shape.radius.value(40, 'px')}`
}
}
},
tooltip_switch_orientation_horizontal_ltr: {
'& .amaui-Tooltip-name': {
transform: 'rotate(135deg)',
'& .amaui-Tooltip-name-text': {
transform: 'translate(-50%, -50%) rotate(-135deg)'
}
}
},
tooltip_switch_orientation_horizontal_rtl: {
'& .amaui-Tooltip-name': {
transform: 'rotate(135deg)',
'& .amaui-Tooltip-name-text': {
transform: 'translate(-50%, -50%) rotate(-135deg)'
}
}
},
disabled: {
cursor: 'default',
pointerEvents: 'none',
opacity: theme.palette.visual_contrast.default.opacity.disabled
}
};
}, { name: 'amaui-Slider' });
const Slider = react_1.default.forwardRef((props_, ref) => {
var _a;
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.amauiSlider) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
const Zoom = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Zoom) || Zoom_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 { tonal = true, color: color_ = 'primary', size = 'regular', value: value_, valueDefault, onChange, orientation = 'horizontal', marks, precision = 0.001, min = 0, max = 100, tooltip, labels, onlyMarks, labelTooltipResolve, iconButtonPositionResolve, noTrack, noButtons, square, inverted, readOnly, disabled, icon, onMouseDown: onMouseDown_, onTouchStart: onTouchStart_, IconButtonProps, LabelProps, TooltipProps, Component = 'span', style, className, children } = props, other = __rest(props, ["tonal", "color", "size", "value", "valueDefault", "onChange", "orientation", "marks", "precision", "min", "max", "tooltip", "labels", "onlyMarks", "labelTooltipResolve", "iconButtonPositionResolve", "noTrack", "noButtons", "square", "inverted", "readOnly", "disabled", "icon", "onMouseDown", "onTouchStart", "IconButtonProps", "LabelProps", "TooltipProps", "Component", "style", "className", "children"]);
const { classes } = useStyle();
const [init, setInit] = react_1.default.useState(false);
const [value, setValue] = react_1.default.useState(() => {
const valueNew = (valueDefault !== undefined ? valueDefault : value_) || ((0, utils_1.is)('number', min) ? min : 0);
return (0, utils_1.is)('array', valueNew) ? valueNew.sort((a, b) => a - b).map(item => (0, utils_1.clamp)(item, min, max)) : (0, utils_1.clamp)(valueNew, min, max);
});
const [mouseDown, setMouseDown] = react_1.default.useState(false);
const [mouseDownButton, setMouseDownButton] = react_1.default.useState(false);
const [focus, setFocus] = react_1.default.useState(false);
const [focusButton, setFocusButton] = react_1.default.useState(false);
const refs = {
root: react_1.default.useRef(undefined),
value: react_1.default.useRef(undefined),
props: react_1.default.useRef(undefined),
mouseDown: react_1.default.useRef(undefined),
mouseDownButton: react_1.default.useRef(undefined),
focusButton: react_1.default.useRef(undefined),
direction: react_1.default.useRef(undefined),
iconButtons: react_1.default.useRef([]),
min: react_1.default.useRef(min),
max: react_1.default.useRef(max)
};
refs.value.current = value;
refs.props.current = props;
refs.mouseDown.current = mouseDown;
refs.mouseDownButton.current = mouseDownButton;
refs.focusButton.current = focusButton;
refs.direction.current = theme.direction;
refs.min.current = min;
refs.max.current = max;
let color = color_;
if (disabled)
color = 'default';
const valueDecimals = (String(precision).includes('e-') ? +String(precision).split('e-')[1] : (_a = String(precision).split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0;
const valuePrecision = (valueMouse, mouseDownButtonUpdate = false) => {
let value__ = (0, utils_1.valueFromPercentageWithinRange)(valueMouse * 100, refs.min.current, refs.max.current);
if (refs.direction.current === 'rtl' && orientation === 'horizontal')
value__ = (refs.max.current + refs.min.current) - value__;
if (value__ <= refs.min.current)
return refs.min.current;
if (value__ >= refs.max.current)
return refs.max.current;
// previous value
let previous = (0, utils_1.clamp)(+(value__ - (value__ % precision)).toFixed(valueDecimals), refs.min.current, refs.max.current);
if (value__ < 0)
previous -= precision;
if (onlyMarks && (0, utils_1.is)('array', marks)) {
const previousMark = marks.map(item => item.value).sort((a, b) => b - a).find(item => item <= value__);
previous = previousMark !== undefined ? previousMark : refs.min.current;
}
// next value
let next = (0, utils_1.clamp)(+(previous + precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
if (onlyMarks && (0, utils_1.is)('array', marks)) {
const nextMark = marks.map(item => item.value).sort((a, b) => a - b).find(item => item >= value__);
next = nextMark !== undefined ? nextMark : refs.max.current;
}
const valueNew = value__ < previous + ((next - previous) / 2) ? previous : next;
if (mouseDownButtonUpdate && (0, utils_1.is)('array', refs.value.current)) {
const items = refs.value.current.map(item => Math.abs(valueNew - item));
const minItem = Math.min(...items);
const index = items.findIndex(item => item === minItem);
setMouseDownButton(index);
refs.mouseDownButton.current = index;
}
return valueNew;
};
react_1.default.useEffect(() => {
var _a;
const onMouseUp = () => {
if (!disabled && !readOnly) {
setMouseDown(false);
setMouseDownButton(false);
}
};
const onMouseMove = (event) => {
if (!refs.props.current.disabled && !refs.props.current.readOnly && refs.mouseDown.current) {
let x;
let y;
if (event.clientX !== undefined) {
x = event.clientX;
y = event.clientY;
}
else {
x = event.touches[0].clientX;
y = event.touches[0].clientY;
}
const rect = refs.root.current.getBoundingClientRect();
const { width, height } = rect;
// Value to the precision point value
const value__ = valuePrecision(orientation === 'horizontal' ? (x - rect.x) / width : (1 - (y - rect.y) / height));
const valueNew = (0, utils_1.is)('array', refs.value.current) ? [...refs.value.current] : value__;
if ((0, utils_1.is)('array', refs.value.current)) {
let index = (0, utils_1.is)('number', refs.mouseDownButton.current) ? refs.mouseDownButton.current : 0;
if (index > 0 && value__ < refs.value.current[index - 1]) {
index -= 1;
setMouseDownButton(index);
}
if (index < refs.value.current.length - 1 && value__ > refs.value.current[index + 1]) {
index += 1;
setMouseDownButton(index);
}
valueNew[index] = value__;
}
if (!(0, utils_1.equalDeep)(valueNew, refs.value.current)) {
// Inner controlled value
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(valueNew);
}
}
};
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
rootDocument.addEventListener('mouseup', onMouseUp);
rootDocument.addEventListener('mousemove', onMouseMove);
rootDocument.addEventListener('touchend', onMouseUp, { passive: true });
rootDocument.addEventListener('touchmove', onMouseMove, { passive: true });
setInit(true);
return () => {
rootDocument.removeEventListener('mouseup', onMouseUp);
rootDocument.removeEventListener('touchend', onMouseUp);
rootDocument.removeEventListener('mousemove', onMouseMove);
rootDocument.removeEventListener('touchmove', onMouseMove);
};
}, []);
react_1.default.useEffect(() => {
if (init && value_ !== value)
setValue(value_);
}, [value_]);
const move = react_1.default.useCallback((x, y) => {
if (!disabled && !readOnly) {
const rect = refs.root.current.getBoundingClientRect();
const { width, height } = rect;
// Value to the precision point value
const value__ = valuePrecision(orientation === 'horizontal' ? (x - rect.x) / width : (1 - (y - rect.y) / height), true);
const valueNew = (0, utils_1.is)('array', refs.value.current) ? [...refs.value.current] : value__;
if ((0, utils_1.is)('array', refs.value.current)) {
let index = (0, utils_1.is)('number', refs.mouseDownButton.current) ? refs.mouseDownButton.current : 0;
if (index > 0 && value__ <= refs.value.current[index - 1]) {
index -= 1;
setMouseDownButton(index);
}
if (index < refs.value.current.length - 1 && value__ >= refs.value.current[index + 1]) {
index += 1;
setMouseDownButton(index);
}
valueNew[index] = value__;
}
if (!(0, utils_1.equalDeep)(valueNew, refs.value.current)) {
// Inner controlled value
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(valueNew);
}
}
}, [disabled, readOnly, onChange, value, mouseDownButton]);
const moveItem = (forward_ = true) => {
const forward = (orientation === 'vertical' || (theme.direction === 'ltr' && orientation === 'horizontal')) ? forward_ : !forward_;
let valueNew = (0, utils_1.is)('array', refs.value.current) ? [...refs.value.current] : refs.value.current;
let index = refs.focusButton.current || 0;
let value__ = (0, utils_1.is)('array', valueNew) ? valueNew[index] : valueNew;
// previous value
let previous = (0, utils_1.clamp)(+(value__ - precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
if (onlyMarks && (0, utils_1.is)('array', marks)) {
const previousMark = marks.map(item => item.value).sort((a, b) => b - a).find(item => item < value__);
previous = previousMark !== undefined ? previousMark : refs.min.current;
}
// next value
let next = (0, utils_1.clamp)(+(value__ + precision).toFixed(valueDecimals), refs.min.current, refs.max.current);
if (onlyMarks && (0, utils_1.is)('array', marks)) {
const nextMark = marks.map(item => item.value).sort((a, b) => a - b).find(item => item > value__);
next = nextMark !== undefined ? nextMark : refs.max.current;
}
value__ = forward ? next : previous;
if ((0, utils_1.is)('array', refs.value.current)) {
if (index > 0 && value__ < refs.value.current[index - 1]) {
index -= 1;
refs.focusButton.current = index;
setFocusButton(index);
refs.iconButtons.current[index].focus();
}
if (index < refs.value.current.length - 1 && value__ > refs.value.current[index + 1]) {
index += 1;
refs.focusButton.current = index;
setFocusButton(index);
refs.iconButtons.current[index].focus();
}
valueNew[index] = value__;
}
else
valueNew = value__;
if (!(0, utils_1.equalDeep)(valueNew, refs.value.current)) {
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(valueNew);
}
};
const onKeyDown = react_1.default.useCallback((event) => {
if (!disabled && !readOnly) {
if (['Enter', 'Escape', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
// Prevent default
event.preventDefault();
let valueNew = refs.value.current;
switch (event.key) {
case 'End':
if ((0, utils_1.is)('array', refs.value.current)) {
valueNew = [...refs.value.current];
valueNew[0] = refs.min.current;
}
else
valueNew = refs.min.current;
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
return onChange(valueNew);
return;
case 'Home':
if ((0, utils_1.is)('array', refs.value.current)) {
valueNew = [...refs.value.current];
valueNew[valueNew.length - 1] = refs.max.current;
}
else
valueNew = refs.max.current;
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
return onChange(valueNew);
return;
case 'ArrowUp':
case 'ArrowRight':
return moveItem();
case 'ArrowDown':
case 'ArrowLeft':
return moveItem(false);
default:
break;
}
}
}
}, [disabled, readOnly, value, precision, focusButton]);
const onFocus = react_1.default.useCallback(() => {
if (!disabled && !readOnly && !mouseDown)
setFocus(true);
}, [disabled, readOnly, mouseDown]);
const onBlur = react_1.default.useCallback(() => {
if (!disabled && !readOnly)
setFocus(false);
}, [disabled, readOnly]);
const onFocusButton = react_1.default.useCallback((index) => {
if (!disabled && !readOnly)
setFocusButton(index);
}, [disabled, readOnly]);
const onMouseDownButton = react_1.default.useCallback((event, index) => {
if (!disabled && !readOnly)
setMouseDownButton(index);
}, [disabled, readOnly]);
const onMouseDown = react_1.default.useCallback((event) => {
var _a, _b, _c, _d;
if (!disabled && !readOnly) {
setMouseDown(true);
const x = event.clientX ? event.clientX : (_b = (_a = event.touches) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.clientX;
const y = event.clientY ? event.clientY : (_d = (_c = event.touches) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.clientY;
move(x, y);
}
if ((0, utils_1.is)('function', onMouseDown_))
onMouseDown_(event);
}, [disabled, readOnly, onMouseDown_]);
const onTouchStart = react_1.default.useCallback((event) => {
var _a, _b, _c, _d;
if (!disabled && !readOnly) {
setMouseDown(true);
const x = event.clientX ? event.clientX : (_b = (_a = event.touches) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.clientX;
const y = event.clientY ? event.clientY : (_d = (_c = event.touches) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.clientY;
move(x, y);
}
if ((0, utils_1.is)('function', onMouseDown_))
onMouseDown_(event);
}, [disabled, readOnly, onTouchStart_]);
const styles = {
root: {},
icon: {},
iconButton: {},
rail: {},
track: {},
markRail: {},
markTrack: {},
label: {},
};
const palette = !theme.palette.color[color] && theme.methods.color(color);
if (!theme.palette.color[color] && color !== 'default') {
styles.markRail.background = styles.rail.background = theme.methods.palette.color.value(undefined, theme.palette.light ? 40 : 90, true, palette);
styles.label.background = styles.markTrack.background = styles.icon.background = styles.track.background = styles.iconButton.color = !tonal ? palette.main : theme.methods.palette.color.value(undefined, 40, true, palette);
styles.label.color = theme.methods.palette.color.text(styles.label.background, true, 'light');
}
styles.label.background = !tonal ? ((palette === null || palette === void 0 ? void 0 : palette[40]) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main)) : theme.methods.palette.color.value(color, 40, true, palette);
styles.label.color = theme.methods.palette.color.text(styles.label.background, true, 'light');
const values = ((0, utils_1.is)('array', value) ? value : [value]);
const valueValue = (value__ = values[0]) => {
let valueNew = value__;
if (value__ === refs.min.current)
valueNew = 0;
else if (value__ === refs.max.current)
valueNew = 100;
else
valueNew = (0, utils_1.percentageFromValueWithinRange)(value__, refs.min.current, refs.max.current);
return (0, utils_1.clamp)(valueNew, 0, 100);
};
const valueMark = (value__) => {
if (value__ === refs.min.current)
return 0;
if (value__ === refs.max.current)
return `calc(100% - 2px)`;
return `calc(${valueValue(value__)}% - 1px)`;
};
const propInset = orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd';
const iconButtonStyles = (value__) => {
const style_ = {};
if ((0, utils_1.is)('function', iconButtonPositionResolve))
style_[propInset] = iconButtonPositionResolve(value__, valueValue(value__), size);
else {
if (size === 'small') {
style_[propInset] = `calc(${valueValue(value__)}% - 15px)`;
}
if (size === 'regular') {
style_[propInset] = `calc(${valueValue(value__)}% - 20px)`;
}
if (size === 'large') {
style_[propInset] = `calc(${valueValue(value__)}% - 25px)`;
}
}
return style_;
};
const propTrac = orientation === 'horizontal' ? 'width' : 'height';
if (values.length === 1)
styles.track[propTrac] = `${valueValue()}%`;
else {
const start = Math.min(...values);
const end = Math.max(...values);
if (orientation === 'horizontal') {
styles.track.insetInlineStart = `${valueValue(start)}%`;
styles.track.insetInlineEnd = `${100 - valueValue(end)}%`;
}
if (orientation === 'vertical') {
styles.track.insetBlockStart = `${100 - valueValue(end)}%`;
styles.track.insetBlockEnd = `${valueValue(start)}%`;
}
}
const marksValue = Math.ceil((refs.max.current - refs.min.current) / precision);
let marks_ = [];
if (marks) {
if ((0, utils_1.is)('array', marks))
marks_ = marks;
else if (marksValue <= 1e3) {
let markSum = refs.min.current;
let index = 1;
marks_.push({ value: refs.min.current, label: refs.min.current });
while (markSum <= refs.max.current) {
markSum = refs.min.current + (precision * index++);
if (markSum < refs.max.current)
marks_.push({ value: markSum, label: markSum });
}
marks_.push({ value: refs.max.current, label: refs.max.current });
}
}
const markTrack = (value__) => {
if (values.length === 1)
return !inverted ? value__ <= values[0] : value__ > values[0];
else
return !inverted ? value__ >= values[0] && value__ <= values[values.length - 1] : value__ < values[0] || value__ > values[values.length - 1];
};
const labelMethod = (0, utils_1.is)('function', labelTooltipResolve) ? labelTooltipResolve : (value__) => +(value__).toFixed();
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, tabIndex: noButtons ? 0 : -1, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onKeyDown: onKeyDown, role: 'slider', "aria-orientation": orientation, "aria-valuenow": valueValue(), "aria-valuetext": `${valueValue()}%`, "aria-valuemin": min, "aria-valuemax": max, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-root',
`amaui-Slider-size-${size}`,
mouseDown && `amaui-Slider-mouse-down`,
focus && `amaui-Slider-focus`,
readOnly && `amaui-Slider-read-only`,
disabled && `amaui-Slider-disabled`
],
className,
classes.root,
classes[`color_${color}`],
tonal && classes[`tonal_color_${color}`],
classes[`root_orientation_${orientation}`],
noButtons && focus && classes.focus_outline,
square && classes.square,
readOnly && classes.readOnly,
disabled && classes.disabled
]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-rail'
],
classes.rail,
classes[`orientation_${orientation}`],
classes[`rail_orientation_${orientation}`],
classes[`rail_orientation_${orientation}_size_${size}`],
!inverted ? [
classes[`rail_color_${color}`]
] : [
classes[`track_color_${color}`],
tonal && classes[`track_tonal_color_${color}`]
]
]), style: styles.rail }), !noTrack && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-track'
],
classes.track,
classes[`orientation_${orientation}`],
classes[`track_orientation_${orientation}`],
classes[`track_orientation_${orientation}_size_${size}`],
!inverted ? [
classes[`track_color_${color}`],
tonal && classes[`track_tonal_color_${color}`]
] : [
classes[`rail_color_${color}`]
]
]), style: styles.track })), !!marks_.length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-marks'
],
classes.marks,
classes[`orientation_${orientation}`],
classes[`track_size_${size}`]
]) }, { children: marks_.map((item, index) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-mark'
],
classes.mark,
markTrack(item.value) ? classes[`rail_color_${color}`] : [
classes[`track_color_${color}`],
tonal && classes[`track_tonal_color_${color}`]
]
]), style: Object.assign(Object.assign({}, (markTrack(item.value) ? styles.markRail : styles.markTrack)), { [propInset]: valueMark(item.value) }) }, index))) }))), labels && !!marks_.length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-labels'
],
classes.labels,
classes[`labels_orientation_${orientation}`]
]) }, { children: marks_.map((item, index) => ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3' }, LabelProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-label'
],
LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className,
classes.label,
classes[`label_orientation_${orientation}`],
theme.direction === 'rtl' && classes[`label_orientation_${orientation}_rtl`],
item.value <= value && classes.label_active
]), style: Object.assign({ [propInset]: valueMark(item.value) }, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: item.label }), index))) }))), !noButtons && values.map((value__, index) => {
var _a, _b;
const classNameIcon = (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-icon'
],
classes.icon,
classes[`track_color_${color}`],
tonal && classes[`track_tonal_color_${color}`],
classes[`icon_size_${size}`],
(mouseDownButton === index) && classes.iconActive
]);
return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ className: (0, style_react_1.classNames)([
classes.tooltip,
classes[`tooltip_orientation_${orientation}`]
]), classNameSwitch: classes[`tooltip_switch_orientation_${orientation}_${theme.direction}`] }, ((tooltip === 'always') || (tooltip !== undefined && mouseDownButton === index) ? { open: true } : tooltip === undefined ? { open: false } : {}), { label: labelMethod(value__), position: orientation === 'horizontal' ? 'top' : theme.direction === 'ltr' ? 'left' : 'right', alignment: 'center', TransitionComponent: Zoom, transformOrigin: orientation === 'horizontal' ? 'center bottom' : 'center right', transformOriginSwitch: orientation === 'horizontal' ? 'center top' : 'center left', transformOriginRtl: orientation === 'horizontal' ? 'center bottom' : 'center left', transformOriginRtlSwitch: orientation === 'horizontal' ? 'center top' : 'center right', noMargin: true, LabelProps: {
style: styles.label
} }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ ref: item => refs.iconButtons.current.push(item), size: size, tonal: tonal, color: color, onBlur: onBlur, onFocus: () => {
onFocus();
onFocusButton(index);
}, onMouseDown: (event) => onMouseDownButton(event, index), "aria-valuenow": valueValue(value__), "aria-valuetext": `${valueValue(value__)}%`, "aria-valuemin": min, "aria-valuemax": max }, IconButtonProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Slider', theme) && [
'amaui-Slider-icon-button'
],
IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
classes.iconButton,
classes[`orientation_${orientation}`],
!tonal && classes[`iconButton_color_${color}`],
tonal && classes[`iconButton_tonal_color_${color}`],
]), style: Object.assign(Object.assign({}, iconButtonStyles(value__)), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style) }, { children: icon ? react_1.default.cloneElement(icon, {
className: (0, style_react_1.classNames)([
(_a = icon === null || icon === void 0 ? void 0 : icon.props) === null || _a === void 0 ? void 0 : _a.className,
classNameIcon
]),
style: Object.assign(Object.assign({}, styles.icon), (_b = icon === null || icon === void 0 ? void 0 : icon.props) === null || _b === void 0 ? void 0 : _b.style)
}) : ((0, jsx_runtime_1.jsx)("span", { className: classNameIcon, style: styles.icon })) })) }), index));
})] })));
});
Slider.displayName = 'amaui-Slider';
exports.default = Slider;