curls/dist/cjs/Modal.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

'use strict'

exports.__esModule = true
exports.ModalConsumer = exports.Modal = exports.ModalBox = exports.ModalToggle = exports.useModalBox = exports.useModalFade = exports.useModalContext = exports.ModalContext = void 0

var _core = require('@emotion/core')

var _react = _interopRequireWildcard(require('react'))

var _core2 = require('@style-hooks/core')

var _object = _interopRequireDefault(require('empty/object'))

var _switch = _interopRequireDefault(require('@react-hook/switch'))

var _createAriaPopupToggle = _interopRequireDefault(
  require('./createAriaPopupToggle')
)

var _createAriaPopup = _interopRequireDefault(require('./createAriaPopup'))

var _utils = require('./utils')

var styles = _interopRequireWildcard(require('./Drawer/styles'))

var _Fade = require('./Fade')

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj}
}

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj
  } else {
    var newObj = {}
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc =
            Object.defineProperty && Object.getOwnPropertyDescriptor
              ? Object.getOwnPropertyDescriptor(obj, key)
              : {}
          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc)
          } else {
            newObj[key] = obj[key]
          }
        }
      }
    }
    newObj.default = obj
    return newObj
  }
}

/**
import {Modal, ModalBox, ModalToggle, useFade} from 'curls'

<Modal transition={useFade}>
 <ModalBox p={3} bg='white'>
   <ModalToggle onClick={close}>
     Hide modal
   </ModalToggle>
 </ModalBox>

 <ModalToggle onClick={open}>
   Open Modal
 </ModalToggle>
</Modal>
**/
const defaultStyles = {
  name: '18bvl9r',
  styles:
    'position:fixed;margin:auto;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1000;',
}
let ID = 0

const ModalContext = _react.default.createContext(_object.default),
  {Consumer: ModalConsumer} = ModalContext,
  useModalContext = () => (0, _react.useContext)(ModalContext),
  useModalFade = ({isOpen}) =>
    (0, _Fade.useFade)({
      visible: isOpen,
      duration: 'fast',
    }),
  useModalBox = props => {
    const context = useModalContext()
    props = (0, _core2.useStyles)(
      'modal',
      styles,
      (0, _utils.pushCss)(props, defaultStyles)
    )
    const transition = props.transition
    delete props.transition
    return (0, _utils.pushCss)(
      props,
      (transition || useModalFade)({
        isOpen: context.isOpen,
      }).css
    )
  },
  ModalToggle = (0, _createAriaPopupToggle.default)(
    'modalToggle',
    useModalContext
  ),
  ModalBox = (0, _createAriaPopup.default)(useModalContext, useModalBox),
  Modal = ({open, initialOpen, children}) => {
    let [isOpen, toggle] = (0, _switch.default)(initialOpen)
    isOpen = open === void 0 || open === null ? isOpen : open
    const id = (0, _react.useRef)(`curls.modal.${ID++}`)
    const context = (0, _react.useMemo)(
      () => ({
        id: id.current,
        open: toggle.on,
        close: toggle.off,
        toggle,
        isOpen,
      }),
      [isOpen, toggle.on, toggle.off, toggle]
    )
    return (0, _core.jsx)(ModalContext.Provider, {
      value: context,
      children: typeof children === 'function' ? children(context) : children,
    })
  }

exports.ModalConsumer = ModalConsumer
exports.Modal = Modal
exports.ModalBox = ModalBox
exports.ModalToggle = ModalToggle
exports.useModalBox = useModalBox
exports.useModalFade = useModalFade
exports.useModalContext = useModalContext
exports.ModalContext = ModalContext

if (process.env.NODE_ENV !== 'production') {
  const slidePropTypes = require('./Slide/propTypes').default

  Modal.displayName = 'Modal'
  ModalBox.displayName = 'ModalBox'
  Modal.propTypes = slidePropTypes
}