@gechiui/components/build-module/navigator/navigator-screen/component.js

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports
// eslint-disable-next-line no-restricted-imports
import { motion } from 'framer-motion';
import { css } from '@emotion/react';
/**
 * GeChiUI dependencies
 */

import { useContext, useEffect, useState, useMemo } from '@gechiui/element';
import { useReducedMotion, useFocusOnMount } from '@gechiui/compose';
import { isRTL } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import { contextConnect, useContextSystem } from '../../ui/context';
import { useCx } from '../../utils/hooks/use-cx';
import { View } from '../../view';
import { NavigatorContext } from '../context';
const animationEnterDelay = 0;
const animationEnterDuration = 0.14;
const animationExitDuration = 0.14;
const animationExitDelay = 0; // Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)

var _ref = process.env.NODE_ENV === "production" ? {
  name: "14x3t6z",
  styles: "overflow-x:auto;max-height:100%"
} : {
  name: "1ulogbc-classes",
  styles: "overflow-x:auto;max-height:100%;label:classes;",
  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1zY3JlZW4vY29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3REkiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3IvbmF2aWdhdG9yLXNjcmVlbi9jb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXJlc3RyaWN0ZWQtaW1wb3J0c1xuaW1wb3J0IHR5cGUgeyBSZWYgfSBmcm9tICdyZWFjdCc7XG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tcmVzdHJpY3RlZC1pbXBvcnRzXG5pbXBvcnQgeyBtb3Rpb24sIE1vdGlvblByb3BzIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VDb250ZXh0LCB1c2VFZmZlY3QsIHVzZVN0YXRlLCB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCB7IHVzZVJlZHVjZWRNb3Rpb24sIHVzZUZvY3VzT25Nb3VudCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5pbXBvcnQgeyBpc1JUTCB9IGZyb20gJ0B3b3JkcHJlc3MvaTE4bic7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdGNvbnRleHRDb25uZWN0LFxuXHR1c2VDb250ZXh0U3lzdGVtLFxuXHRXb3JkUHJlc3NDb21wb25lbnRQcm9wcyxcbn0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uLy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgeyBOYXZpZ2F0b3JDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgdHlwZSB7IE5hdmlnYXRvclNjcmVlblByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBhbmltYXRpb25FbnRlckRlbGF5ID0gMDtcbmNvbnN0IGFuaW1hdGlvbkVudGVyRHVyYXRpb24gPSAwLjE0O1xuY29uc3QgYW5pbWF0aW9uRXhpdER1cmF0aW9uID0gMC4xNDtcbmNvbnN0IGFuaW1hdGlvbkV4aXREZWxheSA9IDA7XG5cbi8vIFByb3BzIHNwZWNpZmljIHRvIGBmcmFtZXItbW90aW9uYCBjYW4ndCBiZSBjdXJyZW50bHkgcGFzc2VkIHRvIGBOYXZpZ2F0b3JTY3JlZW5gLFxuLy8gYXMgc29tZSBvZiB0aGVtIHdvdWxkIG92ZXJsYXAgd2l0aCBIVE1MIHByb3BzIChlLmcuIGBvbkFuaW1hdGlvblN0YXJ0YCwgLi4uKVxudHlwZSBQcm9wcyA9IE9taXQ8XG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JTY3JlZW5Qcm9wcywgJ2RpdicsIGZhbHNlID4sXG5cdGtleW9mIE1vdGlvblByb3BzXG4+O1xuXG5mdW5jdGlvbiBOYXZpZ2F0b3JTY3JlZW4oIHByb3BzOiBQcm9wcywgZm9yd2FyZGVkUmVmOiBSZWY8IGFueSA+ICkge1xuXHRjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIHBhdGgsIC4uLm90aGVyUHJvcHMgfSA9IHVzZUNvbnRleHRTeXN0ZW0oXG5cdFx0cHJvcHMsXG5cdFx0J05hdmlnYXRvclNjcmVlbidcblx0KTtcblxuXHRjb25zdCBwcmVmZXJzUmVkdWNlZE1vdGlvbiA9IHVzZVJlZHVjZWRNb3Rpb24oKTtcblx0Y29uc3QgWyBjdXJyZW50UGF0aCBdID0gdXNlQ29udGV4dCggTmF2aWdhdG9yQ29udGV4dCApO1xuXHRjb25zdCBpc01hdGNoID0gY3VycmVudFBhdGgucGF0aCA9PT0gcGF0aDtcblx0Y29uc3QgcmVmID0gdXNlRm9jdXNPbk1vdW50KCk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyhcblx0XHQoKSA9PlxuXHRcdFx0Y3goXG5cdFx0XHRcdGNzcygge1xuXHRcdFx0XHRcdC8vIEVuc3VyZXMgaG9yaXpvbnRhbCBvdmVyZmxvdyBpcyB2aXN1YWxseSBhY2Nlc3NpYmxlXG5cdFx0XHRcdFx0b3ZlcmZsb3dYOiAnYXV0bycsXG5cdFx0XHRcdFx0Ly8gSW4gY2FzZSB0aGUgcm9vdCBoYXMgYSBoZWlnaHQsIGl0IHNob3VsZCBub3QgYmUgZXhjZWVkZWRcblx0XHRcdFx0XHRtYXhIZWlnaHQ6ICcxMDAlJyxcblx0XHRcdFx0fSApLFxuXHRcdFx0XHRjbGFzc05hbWVcblx0XHRcdCksXG5cdFx0WyBjbGFzc05hbWUgXVxuXHQpO1xuXG5cdC8vIFRoaXMgZmxhZyBpcyB1c2VkIHRvIG9ubHkgYXBwbHkgdGhlIGZvY3VzIG9uIG1vdW50IHdoZW4gdGhlIGFjdHVhbCBwYXRoIGNoYW5nZXMuXG5cdC8vIEl0IGF2b2lkcyB0aGUgZm9jdXMgdG8gaGFwcGVuIG9uIHRoZSBmaXJzdCByZW5kZXIuXG5cdGNvbnN0IFsgaGFzUGF0aENoYW5nZWQsIHNldEhhc1BhdGhDaGFuZ2VkIF0gPSB1c2VTdGF0ZSggZmFsc2UgKTtcblx0dXNlRWZmZWN0KCAoKSA9PiB7XG5cdFx0c2V0SGFzUGF0aENoYW5nZWQoIHRydWUgKTtcblx0fSwgWyBwYXRoIF0gKTtcblxuXHRpZiAoICEgaXNNYXRjaCApIHtcblx0XHRyZXR1cm4gbnVsbDtcblx0fVxuXG5cdGlmICggcHJlZmVyc1JlZHVjZWRNb3Rpb24gKSB7XG5cdFx0cmV0dXJuIChcblx0XHRcdDxWaWV3IHJlZj17IGZvcndhcmRlZFJlZiB9IGNsYXNzTmFtZT17IGNsYXNzZXMgfSB7IC4uLm90aGVyUHJvcHMgfT5cblx0XHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0XHQ8L1ZpZXc+XG5cdFx0KTtcblx0fVxuXG5cdGNvbnN0IGFuaW1hdGUgPSB7XG5cdFx0b3BhY2l0eTogMSxcblx0XHR0cmFuc2l0aW9uOiB7XG5cdFx0XHRkZWxheTogYW5pbWF0aW9uRW50ZXJEZWxheSxcblx0XHRcdGR1cmF0aW9uOiBhbmltYXRpb25FbnRlckR1cmF0aW9uLFxuXHRcdFx0ZWFzZTogJ2Vhc2VJbk91dCcsXG5cdFx0fSxcblx0XHR4OiAwLFxuXHR9O1xuXHRjb25zdCBpbml0aWFsID0ge1xuXHRcdG9wYWNpdHk6IDAsXG5cdFx0eDpcblx0XHRcdCggaXNSVEwoKSAmJiBjdXJyZW50UGF0aC5pc0JhY2sgKSB8fFxuXHRcdFx0KCAhIGlzUlRMKCkgJiYgISBjdXJyZW50UGF0aC5pc0JhY2sgKVxuXHRcdFx0XHQ/IDUwXG5cdFx0XHRcdDogLTUwLFxuXHR9O1xuXHRjb25zdCBleGl0ID0ge1xuXHRcdGRlbGF5OiBhbmltYXRpb25FeGl0RGVsYXksXG5cdFx0b3BhY2l0eTogMCxcblx0XHR4OlxuXHRcdFx0KCAhIGlzUlRMKCkgJiYgY3VycmVudFBhdGguaXNCYWNrICkgfHxcblx0XHRcdCggaXNSVEwoKSAmJiAhIGN1cnJlbnRQYXRoLmlzQmFjayApXG5cdFx0XHRcdD8gNTBcblx0XHRcdFx0OiAtNTAsXG5cdFx0dHJhbnNpdGlvbjoge1xuXHRcdFx0ZHVyYXRpb246IGFuaW1hdGlvbkV4aXREdXJhdGlvbixcblx0XHRcdGVhc2U6ICdlYXNlSW5PdXQnLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3QgYW5pbWF0ZWRQcm9wcyA9IHtcblx0XHRhbmltYXRlLFxuXHRcdGV4aXQsXG5cdFx0aW5pdGlhbCxcblx0fTtcblxuXHRyZXR1cm4gKFxuXHRcdDxtb3Rpb24uZGl2XG5cdFx0XHRyZWY9eyBoYXNQYXRoQ2hhbmdlZCA/IHJlZiA6IHVuZGVmaW5lZCB9XG5cdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdHsgLi4ub3RoZXJQcm9wcyB9XG5cdFx0XHR7IC4uLmFuaW1hdGVkUHJvcHMgfVxuXHRcdD5cblx0XHRcdHsgY2hpbGRyZW4gfVxuXHRcdDwvbW90aW9uLmRpdj5cblx0KTtcbn1cblxuLyoqXG4gKiBUaGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50IHJlcHJlc2VudHMgYSBzaW5nbGUgdmlldy9zY3JlZW4vcGFuZWwvbWVudSBhbmQgaXMgc3VwcG9zZWQgdG8gYmUgdXNlZCBpbiBjb21iaW5hdGlvbiB3aXRoIHRoZSBgTmF2aWdhdG9yUHJvdmlkZXJgIGNvbXBvbmVudC5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsVXNlTmF2aWdhdG9yIGFzIHVzZU5hdmlnYXRvcixcbiAqIH0gZnJvbSAnQHdvcmRwcmVzcy9jb21wb25lbnRzJztcbiAqXG4gKiBmdW5jdGlvbiBOYXZpZ2F0b3JCdXR0b24oIHtcbiAqICAgcGF0aCxcbiAqICAgaXNCYWNrID0gZmFsc2UsXG4gKiAgIC4uLnByb3BzXG4gKiB9ICkge1xuICogICBjb25zdCBuYXZpZ2F0b3IgPSB1c2VOYXZpZ2F0b3IoKTtcbiAqICAgcmV0dXJuIChcbiAqICAgXHQ8QnV0dG9uXG4gKiAgIFx0ICBvbkNsaWNrPXsgKCkgPT4gbmF2aWdhdG9yLnB1c2goIHBhdGgsIHsgaXNCYWNrIH0gKSB9XG4gKiAgIFx0ICB7IC4uLnByb3BzIH1cbiAqICAgXHQvPlxuICogICApO1xuICogfVxuICpcbiAqIGNvbnN0IE15TmF2aWdhdGlvbiA9ICgpID0+IChcbiAqICAgPE5hdmlnYXRvclByb3ZpZGVyIGluaXRpYWxQYXRoPVwiL1wiPlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9cIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGhvbWUgc2NyZWVuLjwvcD5cbiAqICAgXHQgICA8TmF2aWdhdG9yQnV0dG9uIGlzUHJpbWFyeSBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICAgICBOYXZpZ2F0ZSB0byBjaGlsZCBzY3JlZW4uXG4gKiAgICAgICA8L05hdmlnYXRvckJ1dHRvbj5cbiAqICAgICA8L05hdmlnYXRvclNjcmVlbj5cbiAqXG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICA8cD5UaGlzIGlzIHRoZSBjaGlsZCBzY3JlZW4uPC9wPlxuICogICAgICAgPE5hdmlnYXRvckJ1dHRvbiBpc1ByaW1hcnkgcGF0aD1cIi9cIiBpc0JhY2s+XG4gKiAgICAgICAgIEdvIGJhY2tcbiAqICAgICAgIDwvTmF2aWdhdG9yQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICogICA8L05hdmlnYXRvclByb3ZpZGVyPlxuICogKTtcbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWROYXZpZ2F0b3JTY3JlZW4gPSBjb250ZXh0Q29ubmVjdChcblx0TmF2aWdhdG9yU2NyZWVuLFxuXHQnTmF2aWdhdG9yU2NyZWVuJ1xuKTtcblxuZXhwb3J0IGRlZmF1bHQgQ29ubmVjdGVkTmF2aWdhdG9yU2NyZWVuO1xuIl19 */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

function NavigatorScreen(props, forwardedRef) {
  const {
    children,
    className,
    path,
    ...otherProps
  } = useContextSystem(props, 'NavigatorScreen');
  const prefersReducedMotion = useReducedMotion();
  const [currentPath] = useContext(NavigatorContext);
  const isMatch = currentPath.path === path;
  const ref = useFocusOnMount();
  const cx = useCx();
  const classes = useMemo(() => cx(_ref, className), [className]); // This flag is used to only apply the focus on mount when the actual path changes.
  // It avoids the focus to happen on the first render.

  const [hasPathChanged, setHasPathChanged] = useState(false);
  useEffect(() => {
    setHasPathChanged(true);
  }, [path]);

  if (!isMatch) {
    return null;
  }

  if (prefersReducedMotion) {
    return createElement(View, _extends({
      ref: forwardedRef,
      className: classes
    }, otherProps), children);
  }

  const animate = {
    opacity: 1,
    transition: {
      delay: animationEnterDelay,
      duration: animationEnterDuration,
      ease: 'easeInOut'
    },
    x: 0
  };
  const initial = {
    opacity: 0,
    x: isRTL() && currentPath.isBack || !isRTL() && !currentPath.isBack ? 50 : -50
  };
  const exit = {
    delay: animationExitDelay,
    opacity: 0,
    x: !isRTL() && currentPath.isBack || isRTL() && !currentPath.isBack ? 50 : -50,
    transition: {
      duration: animationExitDuration,
      ease: 'easeInOut'
    }
  };
  const animatedProps = {
    animate,
    exit,
    initial
  };
  return createElement(motion.div, _extends({
    ref: hasPathChanged ? ref : undefined,
    className: classes
  }, otherProps, animatedProps), children);
}
/**
 * The `NavigatorScreen` component represents a single view/screen/panel/menu and is supposed to be used in combination with the `NavigatorProvider` component.
 *
 * @example
 * ```jsx
 * import {
 *   __experimentalNavigatorProvider as NavigatorProvider,
 *   __experimentalNavigatorScreen as NavigatorScreen,
 *   __experimentalUseNavigator as useNavigator,
 * } from '@gechiui/components';
 *
 * function NavigatorButton( {
 *   path,
 *   isBack = false,
 *   ...props
 * } ) {
 *   const navigator = useNavigator();
 *   return (
 *   	<Button
 *   	  onClick={ () => navigator.push( path, { isBack } ) }
 *   	  { ...props }
 *   	/>
 *   );
 * }
 *
 * const MyNavigation = () => (
 *   <NavigatorProvider initialPath="/">
 *     <NavigatorScreen path="/">
 *       <p>This is the home screen.</p>
 *   	   <NavigatorButton isPrimary path="/child">
 *          Navigate to child screen.
 *       </NavigatorButton>
 *     </NavigatorScreen>
 *
 *     <NavigatorScreen path="/child">
 *       <p>This is the child screen.</p>
 *       <NavigatorButton isPrimary path="/" isBack>
 *         Go back
 *       </NavigatorButton>
 *     </NavigatorScreen>
 *   </NavigatorProvider>
 * );
 * ```
 */


const ConnectedNavigatorScreen = contextConnect(NavigatorScreen, 'NavigatorScreen');
export default ConnectedNavigatorScreen;
//# sourceMappingURL=component.js.map