@fluent-windows/core/es/Dialog/Dialog.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 { styles } from './Dialog.styled';
import Box from '../Box';
import Portal from '../Portal';
import Transition from '../Transition';
import Title from './components/Title';
import Content from './components/Content';
import Actions from './components/Actions';
import { DialogPropTypes } from './Dialog.type';
export const name = 'Dialog';
const useStyles = createUseStyles(styles, {
  name
});
export const DialogContext = React.createContext({
  onChange: () => {}
});
const Dialog = React.forwardRef((props, ref) => {
  const {
    as = 'div',
    className: classNameProp,
    children,
    visible,
    onChange,
    ...rest
  } = props;
  const handleClose = React.useCallback(() => {
    onChange && onChange(false);
  }, [onChange]);
  const container = React.useMemo(() => React.Children.toArray(children).reduce((acc, cur) => {
    if (cur.type.displayName === `F${name}Title`) {
      return { ...acc,
        title: cur
      };
    } else if (cur.type.displayName === `F${name}Actions`) {
      return { ...acc,
        actions: cur
      };
    }

    return { ...acc,
      content: [...acc.content, cur]
    };
  }, {
    title: undefined,
    content: [],
    actions: undefined
  }), [children]);
  const contextValue = {
    onChange: onChange
  };
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  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, {
    visible: visible,
    wrapper: false,
    mountOnEnter: true,
    unmountOnExit: true
  }, React.createElement(Box, _extends({
    className: className,
    ref: ref,
    as: as,
    boxShadow: "5"
  }, rest), React.createElement(DialogContext.Provider, {
    value: contextValue
  }, !!container.title && container.title, React.createElement("div", {
    className: classes.content
  }, container.content), !!container.actions && container.actions)))));
});
Object.defineProperty(Dialog, 'Title', {
  get() {
    return Title;
  }

});
Object.defineProperty(Dialog, 'Content', {
  get() {
    return Content;
  }

});
Object.defineProperty(Dialog, 'Actions', {
  get() {
    return Actions;
  }

});
Dialog.displayName = `F${name}`;
Dialog.propTypes = DialogPropTypes;
export default Dialog;