@amaui/ui-react/esm/Reveal/Reveal.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["inDefault", "offset", "offsetReveal", "offsetUnreveal", "unreveal", "classes", "styles", "onChange", "noTransition", "Component", "UseVisibleProps", "className", "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, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import FadeElement from '../Fade';
import useVisible from '../useVisible/useVisible';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
  root: {}
}), {
  name: 'amaui-Reveal'
});
const Reveal = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiReveal?.props?.default), props_), [props_]);
  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
  const {
      inDefault,
      offset,
      offsetReveal,
      offsetUnreveal,
      unreveal,
      classes: classesProps,
      styles,
      onChange,
      noTransition,
      Component: Component_ = Fade,
      UseVisibleProps,
      className,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const [root, setRoot] = React.useState();
  const [loaded, setLoaded] = React.useState(inDefault !== undefined ? inDefault : false);
  const [inProp, setInProp] = React.useState(inDefault !== undefined ? inDefault : false);
  const visiblity = useVisible(_objectSpread(_objectSpread({
    element: root
  }, UseVisibleProps), {}, {
    options: _objectSpread({
      rootMargin: `${(is('number', offsetReveal) ? offsetReveal : offset) || 0}px ${(is('number', offsetReveal) ? offsetReveal : offset) || 0}px ${(is('number', offsetUnreveal) ? offsetUnreveal : offset) || 0}px ${(is('number', offsetUnreveal) ? offsetUnreveal : offset) || 0}px`
    }, UseVisibleProps?.options)
  }));
  const refs = {
    root: React.useRef(undefined),
    props: React.useRef(props),
    in: React.useRef(inProp),
    unreveal: React.useRef(unreveal),
    loaded: React.useRef(loaded)
  };
  refs.props.current = props;
  refs.in.current = inProp;
  refs.unreveal.current = unreveal;
  refs.loaded.current = loaded;
  const onUpdate = React.useCallback(value => {
    setInProp(value);
    if (value && !refs.loaded.current) setLoaded(true);
    if (is('function', onChange)) onChange(value);
  }, [onChange]);
  React.useEffect(() => {
    const value = visiblity.visible;
    if (refs.loaded.current && !value && !refs.unreveal.current) return;
    onUpdate(value);
  }, [visiblity.visible]);
  const Component = !noTransition ? Component_ : React.Fragment;
  if (!noTransition) other.in = inProp;
  const ComponentProps = !noTransition && _objectSpread({}, other);
  return /*#__PURE__*/React.createElement(Component, ComponentProps, /*#__PURE__*/React.cloneElement(children, {
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else ref.current = item;
      }
      setRoot(item);
      refs.root.current = item;
    },
    className: classNames([staticClassName('Reveal', theme) && ['amaui-Reveal-root', unreveal && `amaui-Reveal-unreveal`, inProp ? `amaui-Reveal-revealed` : `amaui-Reveal-unrevealed`], className, children.props.className, classes.root, inProp && classesProps?.in]),
    style: _objectSpread(_objectSpread({}, inProp ? styles?.in : styles?.out), children.props?.style)
  }));
});
Reveal.displayName = 'amaui-Reveal';
export default Reveal;