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

UI for React

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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, wait } from '@onesy/utils';
import OnesySubscription from '@onesy/subscription';
import { classNames, useOnesyTheme } from '@onesy/style-react';
import KeyframesContext from './Context';
import { reflow } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
const Keyframes = props_ => {
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyKeyframes?.props?.default), props_);
  const {
    ref,
    append,
    update,
    timeout: timeout_,
    appendStatusPost,
    add: add_,
    runOnEnter,
    removeOnEnd,
    keyframes,
    prefix,
    onKeyframes,
    onAppended,
    onAdd,
    onAdding,
    onAdded,
    onRemoved,
    className,
    children
  } = props;
  const [init, setInit] = React.useState(false);
  const [status, setStatus] = React.useState(() => {
    let statusNew = '';
    if (append) statusNew = 'appended';
    return statusNew;
  });
  const subs = React.useRef({
    status: new OnesySubscription()
  });
  const refs = {
    root: React.useRef(undefined),
    status: React.useRef(status)
  };
  React.useEffect(() => {
    initMethod();
  }, []);

  // Anytime update updates
  // keyframes are ran
  // meaning you can update
  // keyframes between reruns
  // and have any version of
  // animation based on those points
  // ie. Switch ui on and off animation
  React.useEffect(() => {
    if (init) run();
  }, [update]);
  const initMethod = async () => {
    // Appended
    if (status === 'appended') updateStatus(appendStatusPost);

    // Add
    if (add_ || status === 'add') await add();

    // Run the method
    // to run the keyframes
    if (runOnEnter) await run();

    // Init
    setInit(true);
  };
  const run = async () => {
    // Run all keyframes
    if (is('array', keyframes)) for (const keyframe of keyframes) await runKeyframe(keyframe);
    if (removeOnEnd) {
      // So exited status has
      // enough time to apply some value
      setStatus('removed');

      // Subscriptions
      subs.current.status.emit('removed');
    }
  };
  const runKeyframe = async value_ => {
    if (value_) {
      const {
        name,
        timeout: timeout__
      } = value_;
      updateStatus(name);
      await wait(timeout__ || 0);
    }
  };
  const timeout = async status_ => {
    let duration = timeout_;
    if (is('string', timeout_) && theme.transitions.duration[timeout_] !== undefined) duration = theme.transitions.duration[timeout_];
    if (is('object', timeout_)) duration = timeout_[status_] !== undefined ? timeout_[status_] : timeout_.default;
    if (!is('number', duration)) duration = theme.transitions.duration.rg;
    await wait(duration);
  };
  const add = async () => {
    updateStatus('add');

    // Reflow
    reflow(refs.root.current);

    // Add adding class for animation
    setTimeout(() => updateStatus('adding'));
    await timeout('add');
    updateStatus('added');
    await wait(0);
  };
  const updateStatus = (status__0 = status) => {
    // Update
    setStatus(status__0);

    // Subscriptions
    subs.current.status.emit(status__0);
    switch (status__0) {
      case 'appended':
        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
        if (is('function', onAppended)) onAppended(refs.root.current);
        break;
      case 'add':
        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
        if (is('function', onAdd)) onAdd(refs.root.current);
        break;
      case 'adding':
        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
        if (is('function', onAdding)) onAdding(refs.root.current);
        break;
      case 'added':
        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
        if (is('function', onAdded)) onAdded(refs.root.current);
        break;
      case 'removed':
        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
        if (is('function', onRemoved)) onRemoved(refs.root.current);
        break;
      default:
        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status__0);
        break;
    }

    // Add className
    if (className && is('element', refs.root.current)) {
      let className_ = classNames([refs.root.current.className.split(' ')]);

      // Remove all previous state classes
      className_ = className_.replace(new RegExp(`${prefix || ''}(add)(ed|ing)?`, 'g'), '');

      // Remove all previous keyframes classes
      if (is('array', keyframes)) {
        const regex = new RegExp(`${keyframes.reduce((result, item, index) => result += `${index !== 0 ? '|' : ''}${item}`, '')}`, 'g');
        className_ = className_.replace(regex, '');
      }

      // Add
      className_ += ` ${prefix || ''}${status__0}`;
      className_ = className_.replace(/ +/g, ' ').trim();
      refs.root.current.className = className_;
    }
  };
  if (status === 'removed') return null;
  const value = {
    status
  };
  return /*#__PURE__*/_jsx(KeyframesContext.Provider, {
    value: value,
    children: is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
      ref: item_0 => {
        if (ref) {
          if (is('function', ref)) ref(item_0);else ref.current = item_0;
        }
        refs.root.current = item_0;
      }
    })
  });
};
Keyframes.displayName = 'onesy-Keyframes';
export default Keyframes;