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

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "duration", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "root", "min", "direction", "timing_function", "addTransition", "delay", "className", "style", "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 } from '@onesy/utils';
import { classNames, useOnesyTheme } from '@onesy/style-react';
import { Transition } from '..';
const Slide = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useOnesyTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySlide?.props?.default), props_), [props_]);
  const {
      in: inProp,
      prefix,
      run,
      append,
      add,
      enter,
      exit,
      enterOnAdd,
      exitOnAdd,
      noAbruption,
      removeOnExited,
      duration: duration_,
      onTransition,
      onAppended,
      onAdd,
      onAdding,
      onAdded,
      onEnter,
      onEntering,
      onEntered,
      onExit,
      onExiting,
      onExited,
      onRemoved,
      root,
      min,
      direction = 'bottom',
      timing_function,
      addTransition,
      delay,
      className,
      style,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const refs = {
    root: React.useRef(undefined),
    rect: React.useRef(undefined)
  };
  const translate = function () {
    let useMin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    const rect = !removeOnExited ? refs.rect.current : refs.root?.current?.getBoundingClientRect();
    const {
      width = 0,
      height = 0
    } = rect || {};
    const h = root ? root.offsetHeight : window.innerHeight;
    const w = root ? root.offsetWidth : window.innerWidth;
    const top = root ? refs.root.current?.offsetTop : rect?.top;
    const left = root ? refs.root.current?.offsetLeft : rect?.left;
    const right = root ? refs.root.current?.offsetLeft + refs.root.current?.offsetWidth : rect?.right;
    const bottom = root ? refs.root.current?.offsetTop + refs.root.current?.offsetHeight : rect?.bottom;
    let toAdd = 0;
    if (min !== undefined && useMin) toAdd = min;
    if (direction === 'top') return `translate(0, ${bottom !== undefined ? (!inProp && bottom < height ? -height : -bottom) + toAdd + 'px' : '-100vh'})`;
    if (direction === 'left') return `translate(${right !== undefined ? (!inProp && right < width ? -width : -right) + toAdd + 'px' : '-100vw'}, 0)`;
    if (direction === 'right') return `translate(${left !== undefined ? (!inProp && Math.abs(w - left) < width ? width : Math.abs(w - left)) - toAdd + 'px' : '100vw'}, 0)`;
    if (direction === 'bottom') return `translate(0, ${top !== undefined ? (!inProp && Math.abs(h - top) < height ? height : Math.abs(h - top)) - toAdd + 'px' : '100vh'})`;
  };
  const styles = status => {
    if (!status) return {
      visibility: 'hidden'
    };
    const {
      transform = 'none'
    } = refs.root.current && window.getComputedStyle(refs.root?.current) || {};
    const translateValueMin = translate(true);
    const translateValue = translate();
    const other_ = {};
    if (min === undefined) {
      other_.visibility = 'hidden';
    }
    const allStyles = {
      appended: {
        visibility: 'hidden'
      },
      add: _objectSpread({
        transition: 'none',
        transform: translateValue
      }, other_),
      adding: {
        transform: 'translate(0, 0)',
        visibility: 'visible'
      },
      added: {
        transform: 'none',
        visibility: 'visible'
      },
      enter: _objectSpread({
        transition: 'none',
        transform: min !== undefined ? transform : translateValue
      }, other_),
      entering: {
        transform: 'translate(0, 0)',
        visibility: 'visible'
      },
      entered: {
        transform: 'none',
        visibility: 'visible'
      },
      exit: {
        transform,
        visibility: 'visible'
      },
      exiting: {
        transform: translateValueMin,
        visibility: 'visible'
      },
      exited: _objectSpread({
        transform: min !== undefined ? translateValueMin : transform
      }, other_)
    };
    return allStyles[status];
  };
  const duration = function (status) {
    let property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transform';
    const properties = {
      transform: theme.transitions.duration.xs
    };
    return `${(is('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
  };
  const timingFunction = status => (is('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
  return /*#__PURE__*/React.createElement(Transition, _extends({
    append: true,
    removeOnExited: true,
    onAppended: element => {
      refs.rect.current = element?.getBoundingClientRect();
    },
    onEnter: element => {
      if (min === undefined) {
        element.style.visibility = 'hidden';
        element.style.transition = 'none';
        element.style.transform = 'none';
        refs.rect.current = element?.getBoundingClientRect();

        // Clean up
        element.style.removeProperty('transition');
      }
    },
    onExit: element => {
      refs.rect.current = element?.getBoundingClientRect();
    }
  }, props), (status, ref_) => {
    return /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
      ref: item => {
        refs.root.current = item;
        if (ref) {
          if (is('function', ref)) ref(item);else ref.current = item;
        }
        if (ref_) {
          if (is('function', ref_)) ref_(item);else ref_.current = item;
        }
        if (children.ref) {
          if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
        }
      },
      className: classNames([className, children?.props?.className]),
      style: _objectSpread(_objectSpread(_objectSpread({
        transition: `transform ${duration(status)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`
      }, styles(status)), children?.props?.style), style)
    }));
  });
});
Slide.displayName = 'onesy-Slide';
export default Slide;