curls/dist/cjs/Drawer/Drawer.js

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

'use strict'

exports.__esModule = true
exports.DrawerConsumer = exports.Drawer = exports.DrawerBox = exports.DrawerToggle = exports.useDrawerBox = exports.useDrawerContext = exports.DrawerContext = void 0

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

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

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

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

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

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

var _utils = require('../utils')

var _Slide = require('../Slide')

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

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
  }
}

/**
<Drawer fromBottom>
  {({toggle, isOpen}) => {
    return (
      <>
        <DrawerBox portal bg='black'>
          {({isOpen, close}) => {
            return (
              <Text>
                Is visible? {String(isOpen)}

                <Button onClick={close}>
                  Close
                </Button>
              </Text>
            )
          }}
        </DrawerBox>

        <Button onClick={toggle}>
          Open
        </Button>
      </>
    )
  }}
</Drawer>
*/
const defaultStyles = {
  name: '1mbev5s',
  styles: 'display:block;position:fixed;overflow-y:auto;z-index:1000;',
}
let ID = 0
const withoutSlide = {
  duration: 0,
  easing: 0, // TODO: themeable DrawerToggle, ModalToggle, etc
  //       props = useStyles('drawerToggle', {}, props)
  //       entirely for defaultProps and kinds
}

const DrawerContext = _react.default.createContext({}),
  {Consumer: DrawerConsumer} = DrawerContext,
  useDrawerContext = () => (0, _react.useContext)(DrawerContext),
  useDrawerBox = props => {
    const context = useDrawerContext()
    let nextProps = (0, _core2.useStyles)(
      'drawer',
      styles,
      (0, _utils.pushCss)(
        (0, _utils.assignDefaults)(
          {
            fromLeft: true,
          },
          props
        ),
        defaultStyles
      )
    )
    nextProps = (0, _utils.objectWithoutProps)(nextProps, withoutSlide)
    return (0, _utils.pushCss)(
      nextProps,
      (0, _Slide.useSlide)(
        (0, _utils.assignDefaults)(
          {
            visible: context.isOpen,
            fromLeft: true,
            duration: 'fast',
          },
          props
        )
      ).css
    )
  },
  DrawerToggle = (0, _createAriaPopupToggle.default)(
    'drawerToggle',
    useDrawerContext
  ),
  DrawerBox = (0, _createAriaPopup.default)(useDrawerContext, useDrawerBox),
  Drawer = ({open, initialOpen, children}) => {
    let [isOpen, toggle] = (0, _switch.default)(initialOpen)
    isOpen = open === void 0 || open === null ? isOpen : open
    const id = (0, _react.useRef)(`curls.drawer.${ID++}`)
    const context = (0, _react.useMemo)(
      () => ({
        id: id.current,
        open: toggle.on,
        close: toggle.off,
        toggle: toggle,
        isOpen,
      }),
      [isOpen, toggle.on, toggle.off, toggle]
    )
    return (0, _core.jsx)(DrawerContext.Provider, {
      value: context,
      children: typeof children === 'function' ? children(context) : children,
    })
  }

exports.DrawerConsumer = DrawerConsumer
exports.Drawer = Drawer
exports.DrawerBox = DrawerBox
exports.DrawerToggle = DrawerToggle
exports.useDrawerBox = useDrawerBox
exports.useDrawerContext = useDrawerContext
exports.DrawerContext = DrawerContext

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

  Drawer.displayName = 'Drawer'
  DrawerBox.displayName = 'DrawerBox'
  Drawer.propTypes = slidePropTexts
}