@onesy/ui-react
Version:
UI for React
374 lines (369 loc) • 15.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["tonal", "color", "valueDefault", "value", "onChange", "padding", "paddingStart", "paddingEnd", "iconButton", "orientation", "noKeyboard", "noDivider", "focus", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "StartProps", "EndProps", "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) { _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 React from 'react';
import { is, clamp, valueFromPercentageWithinRange, isEnvironment } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialSwapHoriz from '@onesy/icons-material-rounded-react/IconMaterialSwapHorizW100';
import IconMaterialSwapVert from '@onesy/icons-material-rounded-react/IconMaterialSwapVertW100';
import LineElement from '../Line';
import DividerElement from '../Divider';
import IconButtonElement from '../IconButton';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
root: {
position: 'relative',
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'
},
wrapper: {
width: '100%',
height: '100%'
},
item: {
flex: '1 1 auto'
},
iconButton: {
position: 'absolute',
userSelect: 'none',
zIndex: '4'
},
iconButton_orientation_horizontal: {
cursor: 'ew-resize',
transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`
},
iconButton_orientation_vertical: {
cursor: 'ns-resize',
transform: `translateY(50%)`
},
divider: {
position: 'absolute',
userSelect: 'none',
flex: '0 0 auto',
zIndex: '3',
'&.onesy-Divider-root': {
opacity: '1',
margin: '0px'
}
},
divider_orientation_horizontal: {
insetBlock: '0',
cursor: 'ew-resize',
transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`,
'&.onesy-Divider-root': {
width: '8px'
}
},
divider_orientation_vertical: {
insetInline: '0',
cursor: 'ns-resize',
transform: `translateY(50%)`,
'&.onesy-Divider-root': {
height: '8px'
}
}
}), {
name: 'onesy-WindowSplit'
});
const WindowSplit = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWindowSplit?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
const {
tonal = false,
color = 'inverted',
valueDefault,
value: value_ = 50,
onChange: onChange_,
padding,
paddingStart,
paddingEnd,
iconButton,
orientation = 'horizontal',
noKeyboard,
noDivider,
focus: focus_ = false,
onFocus: onFocus_,
onBlur: onBlur_,
onMouseEnter: onMouseEnter_,
onMouseLeave: onMouseLeave_,
iconButtonComponent,
iconOrientationHorizontal = /*#__PURE__*/React.createElement(IconMaterialSwapHoriz, null),
iconOrientationVertical = /*#__PURE__*/React.createElement(IconMaterialSwapVert, null),
IconButtonProps = {
version: 'filled',
elevation: false
},
SeparatorProps: SeparatorProps_,
DividerProps = {},
StartProps,
EndProps,
className,
children: children_
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [init, setInit] = React.useState(false);
const [focus, setFocus] = React.useState();
const [mouseDown, setMouseDown] = React.useState();
const [value, setValue] = React.useState(valueDefault !== undefined ? valueDefault : value_);
const refs = {
root: React.useRef(undefined),
value: React.useRef(undefined),
mouseDown: React.useRef(undefined),
hover: React.useRef(undefined),
props: React.useRef(undefined),
orientation: React.useRef(undefined),
direction: React.useRef(undefined),
ids: {
root: React.useId()
}
};
refs.value.current = value;
refs.mouseDown.current = mouseDown;
refs.props.current = props;
refs.orientation.current = orientation;
refs.direction.current = theme.direction;
const styles = {
start: {
[orientation === 'horizontal' ? 'width' : 'height']: `${100 - value}%`
},
end: {
[orientation === 'horizontal' ? 'width' : 'height']: `${value}%`
},
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 - 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.useEffect(() => {
const onMouseUp = () => {
setMouseDown(false);
setFocus(false);
};
const onMouseMove = event => {
if (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 = refs.orientation.current === 'horizontal' ? (x - rect.x) / width : (y - rect.y) / height;
valueNew = valuePrecision(valueNew);
onChange(valueNew);
}
};
const onTouchMove = event => {
if (refs.mouseDown.current) {
const x = event.touches[0].clientX;
const y = event.touches[0].clientY;
const rect = refs.root.current.getBoundingClientRect();
const {
width,
height
} = rect;
// Value to the precision point value
let valueNew = refs.orientation.current === 'horizontal' ? (x - rect.x) / width : (y - rect.y) / height;
valueNew = valuePrecision(valueNew);
onChange(valueNew);
}
};
const rootDocument = isEnvironment('browser') ? 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 () => {
rootDocument.removeEventListener('mouseup', onMouseUp);
rootDocument.removeEventListener('touchend', onMouseUp);
rootDocument.removeEventListener('mousemove', onMouseMove);
rootDocument.removeEventListener('touchmove', onTouchMove);
};
}, []);
React.useEffect(() => {
if (init) {
if (value_ !== value) setValue(value_);
}
}, [value_]);
const onTouchStart = event => {
setMouseDown(true);
};
const onFocus = React.useCallback(event => {
setFocus(true);
if (is('function', onFocus_)) onFocus_(event);
}, []);
const onBlur = React.useCallback(event => {
setFocus(false);
if (is('function', onBlur_)) onBlur_(event);
}, []);
const onFocusIconButton = React.useCallback(event => {
setFocus(true);
}, []);
const onBlurIconButton = React.useCallback(event => {
setFocus(false);
}, []);
const onMouseDown = React.useCallback(() => {
setMouseDown(true);
}, []);
const move = function () {
let forward_ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
let forward = forward_;
if (refs.orientation.current === 'horizontal') {
if (refs.direction.current === 'rtl') forward = !forward;
}
let valueNew = refs.value.current || 0;
valueNew = clamp(valueNew + (forward ? 1 : -1), 0, 100);
// Update
onChange(valueNew);
};
const onKeyDown = React.useCallback(event => {
if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
if (['Home', 'End'].includes(event.key) || ['ArrowLeft', 'ArrowRight'].includes(event.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event.key) && refs.orientation.current === 'vertical') {
// Prevent default
event.preventDefault();
let valueNew;
switch (event.key) {
case 'Home':
valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
return onChange(valueNew);
case 'End':
valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
return onChange(valueNew);
case 'ArrowUp':
case 'ArrowLeft':
return move();
case 'ArrowDown':
case 'ArrowRight':
return move(false);
default:
break;
}
}
}
}, []);
const onChange = valueItem => {
const minValue = paddingEnd !== undefined ? paddingEnd : padding !== undefined ? padding : 0;
const maxValue = paddingStart !== undefined ? paddingStart : padding !== undefined ? padding : 0;
const valueNew = clamp(valueItem, minValue, 100 - maxValue);
// Update inner or controlled
if (!props.hasOwnProperty('value')) setValue(valueNew);
if (is('function', onChange_)) onChange_(valueNew);
};
const SeparatorProps = _objectSpread(_objectSpread({}, SeparatorProps_), {}, {
role: 'separator',
'aria-label': 'Window 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.Children.toArray(children_).slice(0, 2);
return /*#__PURE__*/React.createElement(Line, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
tabIndex: !iconButton ? 0 : undefined,
gap: 0,
direction: direction,
align: "center",
justify: "center"
}, focus_ && {
onFocus,
onBlur
}, {
onKeyDown: !noKeyboard ? onKeyDown : undefined,
id: refs.ids.root,
"aria-orientation": orientation,
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-root', focus && `onesy-WindowSplit-focus`, mouseDown && `onesy-WindowSplit-mouse-down`], className, classes.root, mouseDown && classes[`mouseDown_orientation_${orientation}`], focus_ && focus && !mouseDown && classes.focus])
}, other), /*#__PURE__*/React.createElement(Line, {
gap: 0,
direction: direction,
align: "unset",
justify: "unset",
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-wrapper'], classes.wrapper])
}, children[0] && /*#__PURE__*/React.createElement(Line, _extends({
direction: "row",
align: "unset",
justify: "unset"
}, StartProps, {
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-start'], StartProps?.className, classes.item, classes.start]),
style: _objectSpread(_objectSpread({}, styles.start), StartProps?.style)
}), children[0]), children[1] && /*#__PURE__*/React.createElement(Line, _extends({
direction: "row",
align: "unset",
justify: "unset"
}, EndProps, {
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-end'], EndProps?.className, classes.item, classes.end]),
style: _objectSpread(_objectSpread({}, styles.end), EndProps?.style)
}), children[1])), !noDivider && /*#__PURE__*/React.createElement(Divider, _extends({
onTouchStart: onTouchStart,
onMouseDown: event => {
onMouseDown();
if (is('function', DividerProps?.onMouseDown)) IconButtonProps.onMouseDown(event);
},
orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
}, DividerProps, {
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
style: _objectSpread(_objectSpread({}, styles.divider), DividerProps?.style)
})), iconButton && !noDivider && (iconButtonComponent && /*#__PURE__*/React.cloneElement(iconButtonComponent, _objectSpread({
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`]])
}, SeparatorProps)) || /*#__PURE__*/React.createElement(IconButton, _extends({
onFocus: onFocusIconButton,
onBlur: onBlurIconButton,
onTouchStart: onTouchStart,
onMouseDown: event => {
onMouseDown();
if (is('function', IconButtonProps?.onMouseDown)) IconButtonProps.onMouseDown(event);
}
}, SeparatorProps, IconButtonProps, {
className: classNames([staticClassName('WindowSplit', theme) && ['onesy-WindowSplit-icon-button'], IconButtonProps?.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`]]),
style: _objectSpread(_objectSpread({}, styles.divider), IconButtonProps?.style)
}), orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined)));
});
WindowSplit.displayName = 'onesy-WindowSplit';
export default WindowSplit;