@onesy/ui-react
Version:
UI for React
431 lines (425 loc) • 19.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialSwapHorizW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSwapHorizW100"));
var _IconMaterialSwapVertW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSwapVertW100"));
var _Line = _interopRequireDefault(require("../Line"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "valueDefault", "value", "onChange", "version", "orientation", "divider", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "Component", "className", "children"];
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 useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
color: theme.palette.text.default.primary,
touchAction: 'none',
overflow: 'hidden'
},
mouseDown_orientation_horizontal: {
'& *': {
cursor: 'ew-resize !important'
}
},
mouseDown_orientation_vertical: {
'& *': {
cursor: 'ns-resize !important'
}
},
focus: {
outline: '4px solid currentColor',
outlineOffset: '8px'
},
hidden: {
lineHeight: '0',
visibility: 'hidden'
},
item: {
lineHeight: '0',
overflow: 'hidden'
},
start: {
position: 'absolute',
inset: '0',
zIndex: '1',
'& > *': {
maxWidth: 'unset !important'
}
},
end: {
position: 'absolute',
inset: '0',
zIndex: '0'
},
iconButton: {
position: 'absolute',
userSelect: 'none',
zIndex: '4'
},
iconButton_manual_orientation_horizontal: {
cursor: 'ew-resize'
},
iconButton_manual_orientation_vertical: {
cursor: 'ns-resize'
},
iconButton_orientation_horizontal: {
transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`
},
iconButton_orientation_vertical: {
transform: `translateY(50%)`
},
divider: {
position: 'absolute',
userSelect: 'none',
zIndex: '3',
borderRadius: theme.methods.shape.radius.value('lg', 'px'),
'&.onesy-Divider-root': {
margin: '0px'
}
},
divider_manual_orientation_horizontal: {
cursor: 'ew-resize'
},
divider_manual_orientation_vertical: {
cursor: 'ns-resize'
},
divider_orientation_horizontal: {
insetBlock: '0',
transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`,
'&.onesy-Divider-root': {
width: '8px'
}
},
divider_orientation_vertical: {
insetInline: '0',
transform: `translateY(50%)`,
'&.onesy-Divider-root': {
height: '8px'
}
}
}), {
name: 'onesy-ViewSplit'
});
const ViewSplit = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
const theme = (0, _styleReact.useOnesyTheme)();
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.onesyViewSplit) === 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$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
const Divider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
const {
ref,
tonal = true,
color = 'primary',
valueDefault,
value: value_ = 50,
onChange: onChange_,
version = 'auto',
orientation = 'horizontal',
divider = props.version === 'manual',
onFocus: onFocus_,
onBlur: onBlur_,
onMouseEnter: onMouseEnter_,
onMouseLeave: onMouseLeave_,
iconButtonComponent,
iconOrientationHorizontal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialSwapHorizW.default, {}),
iconOrientationVertical = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialSwapVertW.default, {}),
IconButtonProps = {
version: 'filled',
elevation: false
},
SeparatorProps: SeparatorProps_,
DividerProps = {},
Component = 'div',
className,
children: children_
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [init, setInit] = _react.default.useState(false);
const [rect, setRect] = _react.default.useState();
const [hover, setHover] = _react.default.useState();
const [focus, setFocus] = _react.default.useState();
const [mouseDown, setMouseDown] = _react.default.useState();
const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
const refs = {
root: _react.default.useRef(undefined),
value: _react.default.useRef(undefined),
mouseDown: _react.default.useRef(undefined),
hover: _react.default.useRef(undefined),
props: _react.default.useRef(undefined),
orientation: _react.default.useRef(undefined),
version: _react.default.useRef(undefined),
direction: _react.default.useRef(undefined),
ids: {
root: _react.default.useId()
}
};
refs.value.current = value;
refs.mouseDown.current = mouseDown;
refs.hover.current = hover;
refs.props.current = props;
refs.orientation.current = orientation;
refs.version.current = version;
refs.direction.current = theme.direction;
const styles = {
start: {
[orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
},
startItem: {
width: rect === null || rect === void 0 ? void 0 : rect.width
},
divider: {
[orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
}
};
IconButtonProps.tonal = IconButtonProps.tonal !== undefined ? IconButtonProps.tonal : tonal;
IconButtonProps.color = IconButtonProps.color !== undefined ? IconButtonProps.color : color;
DividerProps.tonal = DividerProps.tonal !== undefined ? DividerProps.tonal : tonal;
DividerProps.color = DividerProps.color !== undefined ? DividerProps.color : color;
const min = 0;
const max = 100;
const valuePrecision = valueMouse => {
let valueNew = max + min - (0, _utils.valueFromPercentageWithinRange)(valueMouse * 100, min, max);
if (refs.direction.current === 'rtl' && refs.orientation.current === 'horizontal') valueNew = max + min - valueNew;
if (valueNew <= min) return min;
if (valueNew >= max) return max;
return valueNew;
};
_react.default.useEffect(() => {
var _refs$root$current;
const onMouseUp = () => {
setMouseDown(false);
setFocus(false);
};
const onMouseMove = event => {
if (refs.version.current === 'auto' && refs.hover.current || refs.version.current === 'manual' && refs.mouseDown.current) {
const x = event.clientX;
const y = event.clientY;
const rect_ = refs.root.current.getBoundingClientRect();
const {
width,
height
} = rect_;
// Value to the precision point value
let valueNew_0 = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
valueNew_0 = valuePrecision(valueNew_0);
onChange(valueNew_0);
}
};
const onTouchMove = event_0 => {
if (refs.mouseDown.current) {
const x_0 = event_0.touches[0].clientX;
const y_0 = event_0.touches[0].clientY;
const rect__0 = refs.root.current.getBoundingClientRect();
const {
width: width_0,
height: height_0
} = rect__0;
// Value to the precision point value
let valueNew_1 = refs.orientation.current === 'horizontal' ? (x_0 - rect__0.x) / width_0 : (y_0 - rect__0.y) / height_0;
valueNew_1 = valuePrecision(valueNew_1);
onChange(valueNew_1);
}
};
const method = () => {
if (refs.root.current) {
const rect__1 = refs.root.current.getBoundingClientRect();
setRect(rect__1);
}
};
const observer = new ResizeObserver(method);
observer.observe(refs.root.current);
method();
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
rootDocument.addEventListener('mouseup', onMouseUp);
rootDocument.addEventListener('mousemove', onMouseMove);
rootDocument.addEventListener('touchend', onMouseUp, {
passive: true
});
rootDocument.addEventListener('touchmove', onTouchMove);
setInit(true);
return () => {
// Clean up
observer.disconnect();
rootDocument.removeEventListener('mouseup', onMouseUp);
rootDocument.removeEventListener('touchend', onMouseUp);
rootDocument.removeEventListener('mousemove', onMouseMove);
rootDocument.removeEventListener('touchmove', onTouchMove);
};
}, []);
_react.default.useEffect(() => {
if (init) {
if (value_ !== value) setValue(value_);
}
}, [value_]);
const onTouchStart = event_1 => {
const x_1 = event_1.touches[0].clientX;
const y_1 = event_1.touches[0].clientY;
const rect__2 = refs.root.current.getBoundingClientRect();
const {
width: width_1,
height: height_1
} = rect__2;
// Value to the precision point value
let valueNew_2 = refs.orientation.current === 'horizontal' ? (x_1 - rect__2.x) / width_1 : (y_1 - rect__2.y) / height_1;
valueNew_2 = valuePrecision(valueNew_2);
onChange(valueNew_2);
setMouseDown(true);
};
const onFocus = event_2 => {
setFocus(true);
if ((0, _utils.is)('function', onFocus_)) onFocus_(event_2);
};
const onBlur = event_3 => {
setFocus(false);
if ((0, _utils.is)('function', onBlur_)) onBlur_(event_3);
};
const onFocusIconButton = event_4 => {
setFocus(true);
};
const onBlurIconButton = event_5 => {
setFocus(false);
};
const onMouseEnter = event_6 => {
setHover(true);
if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_6);
};
const onMouseLeave = event_7 => {
setHover(false);
setFocus(false);
if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_7);
};
const onMouseDown = () => {
setMouseDown(true);
};
const move = (forward_ = true) => {
let forward = forward_;
if (refs.orientation.current === 'horizontal') {
if (refs.direction.current === 'rtl') forward = !forward;
}
let valueNew_3 = refs.value.current || 0;
valueNew_3 = (0, _utils.clamp)(valueNew_3 + (forward ? 1 : -1), 0, 100);
// Update
onChange(valueNew_3);
};
const onKeyDown = event_8 => {
if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event_8.key)) {
if (['Home', 'End'].includes(event_8.key) || ['ArrowLeft', 'ArrowRight'].includes(event_8.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event_8.key) && refs.orientation.current === 'vertical') {
// Prevent default
event_8.preventDefault();
let valueNew_4;
switch (event_8.key) {
case 'Home':
valueNew_4 = refs.orientation.current !== 'vertical' ? 0 : 100;
return onChange(valueNew_4);
case 'End':
valueNew_4 = refs.orientation.current !== 'vertical' ? 100 : 0;
return onChange(valueNew_4);
case 'ArrowUp':
case 'ArrowLeft':
return move();
case 'ArrowDown':
case 'ArrowRight':
return move(false);
default:
break;
}
}
}
};
const onChange = valueItem => {
// Update inner or controlled
if (!props.hasOwnProperty('value')) setValue(valueItem);
if ((0, _utils.is)('function', onChange_)) onChange_(valueItem);
};
const SeparatorProps = _objectSpread(_objectSpread({}, SeparatorProps_), {}, {
role: 'separator',
'aria-label': 'View separator',
'aria-valuenow': value,
'aria-valuemin': 0,
'aria-valuemax': 100,
'aria-valuetext': `${value}%`,
'aria-controls': refs.ids.root
});
const direction = orientation === 'horizontal' ? 'row' : 'column';
// Only 2 children to use
const children = _react.default.Children.toArray(children_).slice(0, 2);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
ref: item => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
tabIndex: version === 'auto' ? 0 : undefined,
gap: 0,
direction: direction,
align: "center",
justify: "center",
onFocus: onFocus,
onBlur: onBlur,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onTouchStart: onTouchStart,
onKeyDown: onKeyDown,
id: refs.ids.root,
"aria-orientation": orientation,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-root', `onesy-ViewSplit-version-${version}`, hover && `onesy-ViewSplit-hover`, focus && `onesy-ViewSplit-focus`, mouseDown && `onesy-ViewSplit-mouse-down`], className, classes.root, version === 'manual' && mouseDown && classes[`mouseDown_orientation_${orientation}`], focus && !(hover || mouseDown) && classes.focus])
}, other), {}, {
children: [children[0] && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-hidden'], classes.hidden]),
children: children[0]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-start'], classes.item, classes.start]),
style: _objectSpread({}, styles.start),
children: /*#__PURE__*/_react.default.cloneElement(children[0], {
style: _objectSpread(_objectSpread({}, styles.startItem), children[0].props.style)
})
})]
}), divider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, _objectSpread(_objectSpread({
onMouseDown: event_9 => {
onMouseDown();
if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event_9);
},
orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
}, DividerProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], version === 'manual' && classes[`divider_manual_orientation_${orientation}`]]),
style: _objectSpread(_objectSpread({}, styles.divider), DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.style)
})), version === 'manual' && (iconButtonComponent && /*#__PURE__*/_react.default.cloneElement(iconButtonComponent, _objectSpread({
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]])
}, SeparatorProps)) || /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onFocus: onFocusIconButton,
onBlur: onBlurIconButton,
onMouseDown: event_10 => {
onMouseDown();
if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event_10);
}
}, SeparatorProps), IconButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]]),
style: _objectSpread(_objectSpread({}, styles.start), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style),
children: orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined
}))), children[1] && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-end'], classes.item, classes.end]),
children: /*#__PURE__*/_react.default.cloneElement(children[1], {
style: _objectSpread(_objectSpread({}, styles.endItem), children[1].props.style)
})
})]
}));
};
ViewSplit.displayName = 'onesy-ViewSplit';
var _default = exports.default = ViewSplit;