@onesy/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 = ["ref", "inDefault", "offset", "offsetReveal", "offsetUnreveal", "unreveal", "classes", "styles", "onChange", "noTransition", "Component", "UseVisibleProps", "className", "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, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import FadeElement from '../Fade';
import useVisible from '../useVisible/useVisible';
import { staticClassName } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
const useStyle = styleMethod(theme => ({
  root: {}
}), {
  name: 'onesy-Reveal'
});
const Reveal = props_ => {
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyReveal?.props?.default), props_);
  const Fade = theme?.elements?.Fade || FadeElement;
  const {
      ref,
      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 = value => {
    setInProp(value);
    if (value && !refs.loaded.current) setLoaded(true);
    if (is('function', onChange)) onChange(value);
  };
  React.useEffect(() => {
    const value_0 = visiblity.visible;
    if (refs.loaded.current && !value_0 && !refs.unreveal.current) return;
    onUpdate(value_0);
  }, [visiblity.visible]);
  const Component = !noTransition ? Component_ : React.Fragment;
  if (!noTransition) other.in = inProp;
  const ComponentProps = !noTransition && _objectSpread({}, other);
  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, ComponentProps), {}, {
    children: /*#__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) && ['onesy-Reveal-root', unreveal && `onesy-Reveal-unreveal`, inProp ? `onesy-Reveal-revealed` : `onesy-Reveal-unrevealed`], className, children.props.className, classes.root, inProp && classesProps?.in]),
      style: _objectSpread(_objectSpread({}, inProp ? styles?.in : styles?.out), children.props?.style)
    })
  }));
};
Reveal.displayName = 'onesy-Reveal';
export default Reveal;