@fluent-windows/core/es/Drawer/Drawer.js

React components that inspired by Microsoft's Fluent Design System.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-windows/styles';
import { createSwipe, styles } from './Drawer.styled';
import { DrawerPropTypes } from './Drawer.type';
import Portal from '../Portal';
import Transition from '../Transition';
export const name = 'Drawer';
const useStyles = createUseStyles(styles, {
  name
});
const Drawer = React.forwardRef((props, ref) => {
  const {
    as: Component = 'div',
    className: classNameProp,
    children,
    visible,
    onChange,
    anchor = 'left',
    ...rest
  } = props;
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  const handleClose = React.useCallback(() => {
    onChange && onChange(false);
  }, [onChange]);
  return React.createElement(React.Fragment, null, React.createElement(Portal, null, React.createElement(Transition, {
    visible: visible,
    wrapper: false,
    mountOnEnter: true,
    unmountOnExit: true
  }, React.createElement("div", {
    className: classes.mask,
    onClick: handleClose
  }))), React.createElement(Portal, null, React.createElement(Transition, {
    type: "custom",
    custom: createSwipe(anchor),
    visible: visible,
    wrapper: false,
    mountOnEnter: true,
    unmountOnExit: true
  }, React.createElement(Component, _extends({
    className: className,
    ref: ref
  }, rest), children))));
});
Drawer.displayName = `F${name}`;
Drawer.propTypes = DrawerPropTypes;
Drawer.defaultProps = {
  anchor: 'left'
};
export default Drawer;