@talend/react-components/lib-esm/WithDrawer/WithDrawer.component.js

Set of react components.

import PropTypes from 'prop-types';
import { cloneElement } from 'react';
import { TransitionGroup } from 'react-transition-group';
import Drawer from '../Drawer';
import theme from './withDrawer.module.scss';

/**
 * The Layout component is a container
 * that should follow the body of your App.
 * If the Layout is not after the body you have to
 * add some CSS
 * @example
body > div {
	max-height: 100vh;
	overflow: hidden;
	display: flex;
	width: 100vw;
}
 * @param {object} props react props
 * @example
 <Layout mode="TwoColumns" one={one} two={two}></Layout>
 */
import { get } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function WithDrawer({
  drawers,
  children,
  ...rest
}) {
  return /*#__PURE__*/_jsxs("div", {
    className: theme['tc-with-drawer'],
    children: [children, /*#__PURE__*/_jsx(TransitionGroup, {
      className: theme['tc-with-drawer-container'],
      ...rest,
      children: drawers && drawers.map((drawer, key) => /*#__PURE__*/_jsx(Drawer.Animation, {
        withTransition: get(drawer, 'props.withTransition', true) && get(drawer, 'props.route.state.withTransition'),
        children: ({
          style,
          ...props
        }) => /*#__PURE__*/_jsx("div", {
          className: "tc-with-drawer-wrapper",
          style: style,
          children: /*#__PURE__*/cloneElement(drawer, props)
        })
      }, get(drawer, 'props.route.path', key)))
    })]
  });
}
WithDrawer.displayName = 'WithDrawer';
WithDrawer.propTypes = {
  drawers: PropTypes.arrayOf(PropTypes.element),
  children: PropTypes.node,
  ...TransitionGroup.propTypes
};
export default WithDrawer;
//# sourceMappingURL=WithDrawer.component.js.map