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

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _subscription = _interopRequireDefault(require("@onesy/subscription"));
var _styleReact = require("@onesy/style-react");
var _Context = _interopRequireDefault(require("./Context"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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 Keyframes = props_ => {
  var _theme$ui, _theme$ui2;
  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.onesyKeyframes) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.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.default.useState(false);
  const [status, setStatus] = _react.default.useState(() => {
    let statusNew = '';
    if (append) statusNew = 'appended';
    return statusNew;
  });
  const subs = _react.default.useRef({
    status: new _subscription.default()
  });
  const refs = {
    root: _react.default.useRef(undefined),
    status: _react.default.useRef(status)
  };
  _react.default.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.default.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 ((0, _utils.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 (0, _utils.wait)(timeout__ || 0);
    }
  };
  const timeout = async status_ => {
    let duration = timeout_;
    if ((0, _utils.is)('string', timeout_) && theme.transitions.duration[timeout_] !== undefined) duration = theme.transitions.duration[timeout_];
    if ((0, _utils.is)('object', timeout_)) duration = timeout_[status_] !== undefined ? timeout_[status_] : timeout_.default;
    if (!(0, _utils.is)('number', duration)) duration = theme.transitions.duration.rg;
    await (0, _utils.wait)(duration);
  };
  const add = async () => {
    updateStatus('add');

    // Reflow
    (0, _utils2.reflow)(refs.root.current);

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

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

    // Add className
    if (className && (0, _utils.is)('element', refs.root.current)) {
      let className_ = (0, _styleReact.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 ((0, _utils.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__*/(0, _jsxRuntime.jsx)(_Context.default.Provider, {
    value: value,
    children: (0, _utils.is)('function', children) ? children(status, refs.root) : /*#__PURE__*/_react.default.cloneElement(children, {
      ref: item_0 => {
        if (ref) {
          if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
        }
        refs.root.current = item_0;
      }
    })
  });
};
Keyframes.displayName = 'onesy-Keyframes';
var _default = exports.default = Keyframes;