@yamada-ui/react/dist/cjs/components/drawer/use-drawer.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-drawer.cjs","names":["useModal","onDragEnd: DragEndEventHandler","getContentProps: PropGetter<HTMLMotionProps<\"section\">>","getDragBarProps: PropGetter"],"sources":["../../../../src/components/drawer/use-drawer.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, SimplePlacement } from \"../../core\"\nimport type { UseModalProps } from \"../modal\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport { useCallback, useMemo } from \"react\"\nimport { cast, handlerAll } from \"../../utils\"\nimport { useModal } from \"../modal\"\n\ntype DragEndEventHandler = Required<HTMLMotionProps>[\"onDragEnd\"]\n\nexport interface UseDrawerProps extends UseModalProps {\n  /**\n   * If `true`, then the drawer will close on drag.\n   *\n   * @default false\n   */\n  closeOnDrag?: boolean\n  /**\n   * Applies constraints on the permitted draggable area.\n   *\n   * @default 0\n   */\n  dragConstraints?: number\n  /**\n   * The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.\n   *\n   * @default 0.1\n   */\n  dragElastic?: number\n  /**\n   * Offset from being dragged to closing.\n   *\n   * @default 80\n   */\n  dragOffset?: number\n  /**\n   * Velocity of the drag that triggers close.\n   *\n   * @default 100\n   */\n  dragVelocity?: number\n  /**\n   * The placement of the drawer.\n   *\n   * @default 'inline-end'\n   */\n  placement?: SimplePlacement\n}\n\nexport const useDrawer = ({\n  closeOnDrag = false,\n  closeOnEsc,\n  closeOnOverlay,\n  dragConstraints = 0,\n  dragElastic = 0.1,\n  dragOffset = 80,\n  dragVelocity = 100,\n  placement = \"inline-end\",\n  onEsc,\n  ...rest\n}: UseDrawerProps = {}) => {\n  const {\n    getContentProps: getModalContentProps,\n    onClose,\n    ...modalProps\n  } = useModal({\n    closeOnEsc,\n    closeOnOverlay,\n    onEsc,\n    ...rest,\n  })\n\n  const drag = useMemo<HTMLMotionProps[\"drag\"]>(() => {\n    if (!closeOnDrag) return false\n\n    switch (placement) {\n      case \"block-start\":\n      case \"block-end\":\n        return \"y\"\n      case \"inline-start\":\n      case \"inline-end\":\n        return \"x\"\n    }\n  }, [placement, closeOnDrag])\n\n  const getDragRestriction = useCallback(\n    (value: number) => {\n      switch (placement) {\n        case \"block-start\":\n          return { bottom: value }\n        case \"block-end\":\n          return { top: value }\n        case \"inline-start\":\n          return { right: value }\n        case \"inline-end\":\n          return { left: value }\n      }\n    },\n    [placement],\n  )\n\n  const onDragEnd: DragEndEventHandler = useCallback(\n    (_, info) => {\n      switch (placement) {\n        case \"block-start\":\n          if (\n            info.velocity.y <= dragVelocity * -1 ||\n            info.offset.y <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"block-end\":\n          if (info.velocity.y >= dragVelocity || info.offset.y >= dragOffset)\n            onClose()\n          break\n\n        case \"inline-start\":\n          if (\n            info.velocity.x <= dragVelocity * -1 ||\n            info.offset.x <= dragOffset * -1\n          )\n            onClose()\n          break\n\n        case \"inline-end\":\n          if (info.velocity.x >= dragVelocity || info.offset.x >= dragOffset)\n            onClose()\n          break\n      }\n    },\n    [placement, dragVelocity, dragOffset, onClose],\n  )\n\n  const getContentProps: PropGetter<HTMLMotionProps<\"section\">> = useCallback(\n    (props = {}) => ({\n      drag,\n      dragConstraints: getDragRestriction(dragConstraints),\n      dragElastic: getDragRestriction(dragElastic),\n      dragMomentum: false,\n      dragSnapToOrigin: true,\n      ...cast<HTMLMotionProps<\"section\">>(\n        getModalContentProps(cast<HTMLProps<\"section\">>(props)),\n      ),\n      onDragEnd: handlerAll(props.onDragEnd, onDragEnd),\n    }),\n    [\n      drag,\n      getDragRestriction,\n      dragConstraints,\n      dragElastic,\n      onDragEnd,\n      getModalContentProps,\n    ],\n  )\n\n  const getDragBarProps: PropGetter = useCallback(\n    (props) => ({\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    ...modalProps,\n    closeOnDrag,\n    getContentProps,\n    getDragBarProps,\n    onClose,\n  }\n}\n\nexport type UseDrawerReturn = ReturnType<typeof useDrawer>\n"],"mappings":";;;;;;;;;;AAkDA,MAAa,aAAa,EACxB,cAAc,OACd,YACA,gBACA,kBAAkB,GAClB,cAAc,IACd,aAAa,IACb,eAAe,KACf,YAAY,cACZ,MACA,GAAG,SACe,EAAE,KAAK;CACzB,MAAM,EACJ,iBAAiB,sBACjB,QACA,GAAG,eACDA,2BAAS;EACX;EACA;EACA;EACA,GAAG;EACJ,CAAC;CAEF,MAAM,gCAA8C;AAClD,MAAI,CAAC,YAAa,QAAO;AAEzB,UAAQ,WAAR;GACE,KAAK;GACL,KAAK,YACH,QAAO;GACT,KAAK;GACL,KAAK,aACH,QAAO;;IAEV,CAAC,WAAW,YAAY,CAAC;CAE5B,MAAM,6CACH,UAAkB;AACjB,UAAQ,WAAR;GACE,KAAK,cACH,QAAO,EAAE,QAAQ,OAAO;GAC1B,KAAK,YACH,QAAO,EAAE,KAAK,OAAO;GACvB,KAAK,eACH,QAAO,EAAE,OAAO,OAAO;GACzB,KAAK,aACH,QAAO,EAAE,MAAM,OAAO;;IAG5B,CAAC,UAAU,CACZ;CAED,MAAMC,oCACH,GAAG,SAAS;AACX,UAAQ,WAAR;GACE,KAAK;AACH,QACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,GAE9B,UAAS;AACX;GAEF,KAAK;AACH,QAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,WACtD,UAAS;AACX;GAEF,KAAK;AACH,QACE,KAAK,SAAS,KAAK,eAAe,MAClC,KAAK,OAAO,KAAK,aAAa,GAE9B,UAAS;AACX;GAEF,KAAK;AACH,QAAI,KAAK,SAAS,KAAK,gBAAgB,KAAK,OAAO,KAAK,WACtD,UAAS;AACX;;IAGN;EAAC;EAAW;EAAc;EAAY;EAAQ,CAC/C;CAED,MAAMC,0CACH,QAAQ,EAAE,MAAM;EACf;EACA,iBAAiB,mBAAmB,gBAAgB;EACpD,aAAa,mBAAmB,YAAY;EAC5C,cAAc;EACd,kBAAkB;EAClB,+CACE,iEAAgD,MAAM,CAAC,CACxD;EACD,6DAAsB,MAAM,WAAW,UAAU;EAClD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAMC,0CACH,WAAW,EACV,GAAG,OACJ,GACD,EAAE,CACH;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACD"}