@amaui/ui-react/esm/Fade/Fade.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", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "className", "style", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is } from '@amaui/utils';
import { classNames, useAmauiTheme } from '@amaui/style-react';
import { Transition } from '..';
const Fade = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiFade?.props?.default), props_), [props_]);
  const {
      in: inProp,
      prefix,
      run,
      append,
      add,
      enter,
      exit,
      enterOnAdd,
      exitOnAdd,
      noAbruption,
      removeOnExited,
      delay,
      duration: duration_,
      timing_function,
      addTransition,
      onTransition,
      onAppended,
      onAdd,
      onAdding,
      onAdded,
      onEnter,
      onEntering,
      onEntered,
      onExit,
      onExiting,
      onExited,
      onRemoved,
      className,
      style,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const refs = {
    root: React.useRef(undefined)
  };
  const styles = status => {
    const {
      opacity = 1
    } = refs.root.current && window.getComputedStyle(refs.root?.current) || {};
    const allStyles = {
      appended: {
        visibility: 'hidden'
      },
      add: {
        transition: 'none',
        opacity: 0
      },
      adding: {
        opacity: 1
      },
      added: {
        opacity: 1
      },
      enter: {
        transition: 'none',
        opacity: 0
      },
      entering: {
        opacity: 1
      },
      // With no opacity
      // as if there's inline opacity value
      // it ie. overrides button disabled class
      // opacity value
      entered: {},
      exit: {
        opacity
      },
      exiting: {
        opacity: 0
      },
      exited: {
        opacity: 0
      }
    };
    return allStyles[status];
  };
  const duration = function (status) {
    let property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'opacity';
    const properties = {
      opacity: theme.transitions.duration.sm
    };
    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({}, props, {
    name: "fade"
  }), (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({
        visibility: status === 'exited' && !inProp ? 'hidden' : undefined,
        transition: `opacity ${duration(status)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`
      }, styles(status)), children?.props?.style), style)
    }));
  });
});
Fade.displayName = 'amaui-Fade';
export default Fade;