UNPKG

@fluent-windows/core

Version:

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

53 lines (52 loc) 1.97 kB
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 './Toast.styled'; import { ToastPropTypes } from './Toast.type'; import Portal from '../Portal'; import Transition from '../Transition'; import Box from '../Box'; export const name = 'Toast'; const useStyles = createUseStyles(styles, { name }); const Toast = React.forwardRef((props, ref) => { const { as = 'div', className: classNameProp, children, visible = false, actions, placement = 'top', ...rest } = props; const classes = useStyles(props); const className = classNames(classes.root, { [classes.placementTopStart]: placement === 'top-start', [classes.placementTop]: placement === 'top', [classes.placementTopEnd]: placement === 'top-end', [classes.placementBottomStart]: placement === 'bottom-start', [classes.placementBottom]: placement === 'bottom', [classes.placementBottomEnd]: placement === 'bottom-end', [classes.placementCenter]: placement === 'center' }, classNameProp); return 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, placement: placement }, rest), React.createElement("div", { className: classes.container }, children), React.createElement("div", { className: classes.actions }, actions)))); }); Toast.displayName = `F${name}`; Toast.propTypes = ToastPropTypes; export default Toast;