@onesy/ui-react/esm/ViewSplit/ViewSplit.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _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';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(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_ => {
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyViewSplit?.props?.default), props_);
  const Line = theme?.elements?.Line || LineElement;
  const IconButton = theme?.elements?.IconButton || IconButtonElement;
  const Divider = theme?.elements?.Divider || DividerElement;
  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__*/_jsx(IconMaterialSwapHoriz, {}),
      iconOrientationVertical = /*#__PURE__*/_jsx(IconMaterialSwapVert, {}),
      IconButtonProps = {
        version: 'filled',
        elevation: false
      },
      SeparatorProps: SeparatorProps_,
      DividerProps = {},
      Component = 'div',
      className,
      children: children_
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const [init, setInit] = React.useState(false);
  const [rect, setRect] = React.useState();
  const [hover, setHover] = React.useState();
  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),
    version: React.useRef(undefined),
    direction: React.useRef(undefined),
    ids: {
      root: React.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?.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 - 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.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 = 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 () => {
      // Clean up
      observer.disconnect();
      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_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 (is('function', onFocus_)) onFocus_(event_2);
  };
  const onBlur = event_3 => {
    setFocus(false);
    if (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 (is('function', onMouseEnter_)) onMouseEnter_(event_6);
  };
  const onMouseLeave = event_7 => {
    setHover(false);
    setFocus(false);
    if (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 = 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 (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.Children.toArray(children_).slice(0, 2);
  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
    ref: item => {
      if (ref) {
        if (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: classNames([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__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx("div", {
        className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-hidden'], classes.hidden]),
        children: children[0]
      }), /*#__PURE__*/_jsx("div", {
        className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-start'], classes.item, classes.start]),
        style: _objectSpread({}, styles.start),
        children: /*#__PURE__*/React.cloneElement(children[0], {
          style: _objectSpread(_objectSpread({}, styles.startItem), children[0].props.style)
        })
      })]
    }), divider && /*#__PURE__*/_jsx(Divider, _objectSpread(_objectSpread({
      onMouseDown: event_9 => {
        onMouseDown();
        if (is('function', DividerProps?.onMouseDown)) IconButtonProps.onMouseDown(event_9);
      },
      orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
    }, DividerProps), {}, {
      className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`], version === 'manual' && classes[`divider_manual_orientation_${orientation}`]]),
      style: _objectSpread(_objectSpread({}, styles.divider), DividerProps?.style)
    })), version === 'manual' && (iconButtonComponent && /*#__PURE__*/React.cloneElement(iconButtonComponent, _objectSpread({
      className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]])
    }, SeparatorProps)) || /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread(_objectSpread({
      onFocus: onFocusIconButton,
      onBlur: onBlurIconButton,
      onMouseDown: event_10 => {
        onMouseDown();
        if (is('function', IconButtonProps?.onMouseDown)) IconButtonProps.onMouseDown(event_10);
      }
    }, SeparatorProps), IconButtonProps), {}, {
      className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], IconButtonProps?.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]]),
      style: _objectSpread(_objectSpread({}, styles.start), IconButtonProps?.style),
      children: orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined
    }))), children[1] && /*#__PURE__*/_jsx("div", {
      className: classNames([staticClassName('ViewSplit', theme) && ['onesy-ViewSplit-end'], classes.item, classes.end]),
      children: /*#__PURE__*/React.cloneElement(children[1], {
        style: _objectSpread(_objectSpread({}, styles.endItem), children[1].props.style)
      })
    })]
  }));
};
ViewSplit.displayName = 'onesy-ViewSplit';
export default ViewSplit;