From ce70d411049664d3ec0e256b22dbe05366fc47aa Mon Sep 17 00:00:00 2001 From: Nate Wang Date: Mon, 2 Oct 2023 14:04:06 +0800 Subject: [PATCH] Update docs and demo --- docs/api/index.html | 120 +++++++++++---------- docs/api/interfaces/NiceModalAction.html | 4 +- docs/api/interfaces/NiceModalHandler.html | 22 ++-- docs/api/interfaces/NiceModalHocProps.html | 6 +- docs/api/interfaces/NiceModalState.html | 10 +- docs/asset-manifest.json | 6 +- docs/index.html | 2 +- docs/static/js/main.3fb50e3b.chunk.js | 2 - docs/static/js/main.3fb50e3b.chunk.js.map | 1 - docs/static/js/main.6de8500e.chunk.js | 2 + docs/static/js/main.6de8500e.chunk.js.map | 1 + example/src/MyAntdModal.tsx | 24 +++-- example/src/Test.tsx | 58 ++++++++++ example/src/TsTest.tsx | 18 +++- example/tsconfig.json | 3 +- package.json | 2 +- src/index.tsx | 10 +- 17 files changed, 188 insertions(+), 103 deletions(-) delete mode 100644 docs/static/js/main.3fb50e3b.chunk.js delete mode 100644 docs/static/js/main.3fb50e3b.chunk.js.map create mode 100644 docs/static/js/main.6de8500e.chunk.js create mode 100644 docs/static/js/main.6de8500e.chunk.js.map create mode 100644 example/src/Test.tsx diff --git a/docs/api/index.html b/docs/api/index.html index a821985..5848c30 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -112,7 +112,7 @@

Const ModalDef

ModalDef: React.FC<Record<string, unknown>> = ...
@@ -137,7 +137,7 @@

Const ModalHolder

ModalHolder: React.FC<Record<string, unknown>> = ...
@@ -165,7 +165,7 @@

Const NiceModalContext<
NiceModalContext: Context<NiceModalStore> = ...
@@ -175,17 +175,17 @@

Const Provider

Provider: React.FC<Record<string, unknown>> = ...

Const default

-
default: { ModalDef: FC<Record<string, unknown>>; ModalHolder: FC<Record<string, unknown>>; NiceModalContext: Context<NiceModalStore>; Provider: FC<Record<string, unknown>>; antdDrawer: (modal: NiceModalHandler<Record<string, unknown>>) => { visible: boolean; afterVisibleChange: any; onClose: any }; antdModal: (modal: NiceModalHandler<Record<string, unknown>>) => { visible: boolean; afterClose: any; onCancel: any; onOk: any }; bootstrapDialog: (modal: NiceModalHandler<Record<string, unknown>>) => { show: boolean; onExited: any; onHide: any }; create: <P>(Comp: ComponentType<P>) => FC<P & NiceModalHocProps>; getModal: (modalId: string) => React.FC<any> | undefined; hide: <T>(modal: string | React.FC<any>) => Promise<T>; muiDialog: (modal: NiceModalHandler<Record<string, unknown>>) => { open: boolean; onClose: any; onExited: any }; reducer: (state?: NiceModalStore, action: NiceModalAction) => NiceModalStore; register: <T>(id: string, comp: T, props?: Partial<NiceModalArgs<T>>) => void; remove: (modal: string | FC<any>) => void; show: { <T, C>(modal: React.FC<C>, args?: Partial<NiceModalArgs<React.FC<C>>>): Promise<T>; <T>(modal: string, args?: Record<string, unknown>): Promise<T>; <T, P>(modal: string, args: P): Promise<T> }; useModal: { (): NiceModalHandler; (modal: string, args?: Record<string, unknown>): NiceModalHandler; <C, P>(modal: React.FC<C>, args?: P): Omit<NiceModalHandler, "show"> & { show: any } } } = ...
+
default: { ModalDef: FC<Record<string, unknown>>; ModalHolder: FC<Record<string, unknown>>; NiceModalContext: Context<NiceModalStore>; Provider: FC<Record<string, unknown>>; antdDrawer: (modal: NiceModalHandler<Record<string, unknown>>) => { visible: boolean; afterVisibleChange: any; onClose: any }; antdModal: (modal: NiceModalHandler<Record<string, unknown>>) => { visible: boolean; afterClose: any; onCancel: any; onOk: any }; bootstrapDialog: (modal: NiceModalHandler<Record<string, unknown>>) => { show: boolean; onExited: any; onHide: any }; create: <P>(Comp: ComponentType<P>) => FC<P & NiceModalHocProps>; getModal: (modalId: string) => React.FC<any> | undefined; hide: <T>(modal: string | React.FC<any>) => Promise<T>; muiDialog: (modal: NiceModalHandler<Record<string, unknown>>) => { open: boolean; onClose: any; onExited: any }; reducer: (state?: NiceModalStore, action: NiceModalAction) => NiceModalStore; register: <T>(id: string, comp: T, props?: Partial<NiceModalArgs<T>>) => void; remove: (modal: string | FC<any>) => void; show: { <T, C, P>(modal: React.FC<C>, args?: P): Promise<T>; <T>(modal: string, args?: Record<string, unknown>): Promise<T>; <T, P>(modal: string, args: P): Promise<T> }; useModal: { (): NiceModalHandler; (modal: string, args?: Record<string, unknown>): NiceModalHandler; <C, P>(modal: React.FC<C>, args?: P): Omit<NiceModalHandler, "show"> & { show: any } } } = ...
@@ -232,7 +232,7 @@
afterVisibleChange: func

  • Parameters

    @@ -254,7 +254,7 @@
    onClose: function

  • Returns void

    @@ -296,7 +296,7 @@
    afterClose: function

  • Returns void

    @@ -312,7 +312,7 @@
    onCancel: function

  • Returns void

    @@ -328,7 +328,7 @@
    onOk: function

  • Returns void

    @@ -370,7 +370,7 @@
    onExited: function

  • Returns void

    @@ -386,7 +386,7 @@
    onHide: function

  • Returns void

    @@ -503,7 +503,7 @@
    onClose: function

  • Returns void

    @@ -519,7 +519,7 @@
    onExited: function

  • Returns void

    @@ -611,11 +611,11 @@

    Returns void

  • -
    show: { <T, C>(modal: React.FC<C>, args?: Partial<NiceModalArgs<React.FC<C>>>): Promise<T>; <T>(modal: string, args?: Record<string, unknown>): Promise<T>; <T, P>(modal: string, args: P): Promise<T> }
    +
    show: { <T, C, P>(modal: React.FC<C>, args?: P): Promise<T>; <T>(modal: string, args?: Record<string, unknown>): Promise<T>; <T, P>(modal: string, args: P): Promise<T> }
      • -
      • <T, C>(modal: React.FC<C>, args?: Partial<NiceModalArgs<React.FC<C>>>): Promise<T>
        • +
      • <T, C, P>(modal: React.FC<C>, args?: P): Promise<T>
      • <T>(modal: string, args?: Record<string, unknown>): Promise<T>
      • <T, P>(modal: string, args: P): Promise<T>
      @@ -629,6 +629,9 @@

      T: : unknown

      • +
    • +

      P: Partial<C & { children?: ReactNode }>

      +

    Parameters

      @@ -636,7 +639,7 @@

      Parameters

      modal: React.FC<C>
    • -
      Optional args: Partial<NiceModalArgs<React.FC<C>>>
      +
      Optional args: P

    Returns Promise<T>

    @@ -716,7 +719,7 @@

    Type parameters

    C: unknown

  • -

    P: Partial<Omit<C & { children?: ReactNode }, "id">>

    +

    P: Partial<C & { children?: ReactNode }>

    • Parameters

    @@ -750,7 +753,7 @@

    Const antdDrawer

  • Parameters

    @@ -773,7 +776,7 @@
    afterVisibleChange: func

  • Parameters

    @@ -795,7 +798,7 @@
    onClose: function

  • Returns void

    @@ -816,7 +819,7 @@

    Const antdDrawerV5

  • Parameters

    @@ -839,7 +842,7 @@
    afterOpenChange: functio

  • Parameters

    @@ -861,7 +864,7 @@
    onClose: function

  • Returns void

    @@ -882,7 +885,7 @@

    Const antdModal

  • Parameters

    @@ -905,7 +908,7 @@
    afterClose: function

  • Returns void

    @@ -921,7 +924,7 @@
    onCancel: function

  • Returns void

    @@ -937,7 +940,7 @@
    onOk: function

  • Returns void

    @@ -958,7 +961,7 @@

    Const antdModalV5

  • Parameters

    @@ -981,7 +984,7 @@
    afterClose: function

  • Returns void

    @@ -997,7 +1000,7 @@
    onCancel: function

  • Returns void

    @@ -1013,7 +1016,7 @@
    onOk: function

  • Returns void

    @@ -1034,7 +1037,7 @@

    Const bootstrapDialog

  • Parameters

    @@ -1057,7 +1060,7 @@
    onExited: function

  • Returns void

    @@ -1073,7 +1076,7 @@
    onHide: function

  • Returns void

    @@ -1094,7 +1097,7 @@

    Const create

  • Type parameters

    @@ -1123,7 +1126,7 @@

    hide

  • Type parameters

    @@ -1152,7 +1155,7 @@

    Const muiDialog

  • Parameters

    @@ -1175,7 +1178,7 @@
    onClose: function

  • Returns void

    @@ -1191,7 +1194,7 @@
    onExited: function

  • Returns void

    @@ -1212,7 +1215,7 @@

    Const muiDialogV5

  • Parameters

    @@ -1235,7 +1238,7 @@
    onExited: function

  • Returns void

    @@ -1256,7 +1259,7 @@
    onClose: function

  • Returns void

    @@ -1277,7 +1280,7 @@

    Const reducer

  • Parameters

    @@ -1303,7 +1306,7 @@

    Const register

  • Type parameters

    @@ -1338,7 +1341,7 @@

    Const remove

  • Parameters

    @@ -1355,7 +1358,7 @@

    Returns void

    show

      -
    • show<T, C>(modal: React.FC<C>, args?: Partial<NiceModalArgs<React.FC<C>>>): Promise<T>
      • +
    • show<T, C, P>(modal: React.FC<C>, args?: P): Promise<T>
    • show<T>(modal: string, args?: Record<string, unknown>): Promise<T>
    • show<T, P>(modal: string, args: P): Promise<T>
    @@ -1363,7 +1366,7 @@

    show

  • Type parameters

    @@ -1374,6 +1377,9 @@

    T: : unknown

    • +
  • +

    P: Partial<C & { children?: ReactNode }>

    +

    • Parameters

      @@ -1381,7 +1387,7 @@

      Parameters

      modal: React.FC<C>
    • -
      Optional args: Partial<NiceModalArgs<React.FC<C>>>
      +
      Optional args: P

    Returns Promise<T>

    @@ -1389,7 +1395,7 @@

    Returns Promise

    Type parameters

    @@ -1412,7 +1418,7 @@

    Returns Promise

    Type parameters

    @@ -1447,7 +1453,7 @@

    Const unregister

  • @@ -1480,7 +1486,7 @@

    useModal

  • Returns NiceModalHandler

    @@ -1488,7 +1494,7 @@

    Returns

    Parameters

    @@ -1505,7 +1511,7 @@

    Returns

    Type parameters

    @@ -1514,7 +1520,7 @@

    Type parameters

    C: unknown

  • -

    P: Partial<Omit<C & { children?: ReactNode }, "id">>

    +

    P: Partial<C & { children?: ReactNode }>

    • Parameters

    diff --git a/docs/api/interfaces/NiceModalAction.html b/docs/api/interfaces/NiceModalAction.html index 29ea9e2..3358114 100644 --- a/docs/api/interfaces/NiceModalAction.html +++ b/docs/api/interfaces/NiceModalAction.html @@ -95,7 +95,7 @@

    payload

    payload: { args?: Record<string, unknown>; flags?: Record<string, unknown>; modalId: string }
    @@ -119,7 +119,7 @@

    type

    type: string

    • diff --git a/docs/api/interfaces/NiceModalHandler.html b/docs/api/interfaces/NiceModalHandler.html index cd31a6f..51e34d3 100644 --- a/docs/api/interfaces/NiceModalHandler.html +++ b/docs/api/interfaces/NiceModalHandler.html @@ -130,7 +130,7 @@

    Optional args

    @@ -141,7 +141,7 @@

    Optional delayVisible

    Inherited from NiceModalState.delayVisible

    @@ -152,7 +152,7 @@

    id

    @@ -163,7 +163,7 @@

    keepMounted

    @@ -179,7 +179,7 @@

    visible

    @@ -201,7 +201,7 @@

    hide

  • @@ -223,7 +223,7 @@

    reject

  • @@ -251,7 +251,7 @@

    remove

  • @@ -273,7 +273,7 @@

    resolve

  • @@ -301,7 +301,7 @@

    resolveHide

  • @@ -329,7 +329,7 @@

    show

  • diff --git a/docs/api/interfaces/NiceModalHocProps.html b/docs/api/interfaces/NiceModalHocProps.html index dbad042..c647969 100644 --- a/docs/api/interfaces/NiceModalHocProps.html +++ b/docs/api/interfaces/NiceModalHocProps.html @@ -96,7 +96,7 @@

    Optional defaultVisibledefaultVisible: boolean

    @@ -106,7 +106,7 @@

    id

    id: string
    @@ -116,7 +116,7 @@

    Optional keepMounted

    keepMounted: boolean
    diff --git a/docs/api/interfaces/NiceModalState.html b/docs/api/interfaces/NiceModalState.html index 084446f..6c20160 100644 --- a/docs/api/interfaces/NiceModalState.html +++ b/docs/api/interfaces/NiceModalState.html @@ -103,7 +103,7 @@

    Optional args

    args: Record<string, unknown>
    @@ -113,7 +113,7 @@

    Optional delayVisible

    delayVisible: boolean
    • @@ -123,7 +123,7 @@

    id

    id: string
    @@ -133,7 +133,7 @@

    Optional keepMounted

    keepMounted: boolean
    @@ -143,7 +143,7 @@

    Optional visible

    visible: boolean
    diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json index c480634..00b0886 100644 --- a/docs/asset-manifest.json +++ b/docs/asset-manifest.json @@ -1,8 +1,8 @@ { "files": { "main.css": "./static/css/main.4fe4bbe5.chunk.css", - "main.js": "./static/js/main.3fb50e3b.chunk.js", - "main.js.map": "./static/js/main.3fb50e3b.chunk.js.map", + "main.js": "./static/js/main.6de8500e.chunk.js", + "main.js.map": "./static/js/main.6de8500e.chunk.js.map", "runtime-main.js": "./static/js/runtime-main.3e6ba3ee.js", "runtime-main.js.map": "./static/js/runtime-main.3e6ba3ee.js.map", "static/css/2.9573e3cf.chunk.css": "./static/css/2.9573e3cf.chunk.css", @@ -20,6 +20,6 @@ "static/css/2.9573e3cf.chunk.css", "static/js/2.039ea410.chunk.js", "static/css/main.4fe4bbe5.chunk.css", - "static/js/main.3fb50e3b.chunk.js" + "static/js/main.6de8500e.chunk.js" ] } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index cc0959d..635029a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Nice Modal
    \ No newline at end of file +Nice Modal
    \ No newline at end of file diff --git a/docs/static/js/main.3fb50e3b.chunk.js b/docs/static/js/main.3fb50e3b.chunk.js deleted file mode 100644 index 854204f..0000000 --- a/docs/static/js/main.3fb50e3b.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this.webpackJsonpexample=this.webpackJsonpexample||[]).push([[0],{226:function(e,n,o){},337:function(e,n,o){},341:function(e,n,o){"use strict";o.r(n);var t=o(0),r=o.n(t),a=o(21),i=o.n(a),l=(o(226),function(){return l=Object.assign||function(e){for(var n,o=1,t=arguments.length;o {\n const modal = useModal();\n return (\n \n Greetings: {name}!\n \n );\n});\n\nconst MyAntdDrawer = NiceModal.create(({ name }: { name: string }) => {\n const modal = useModal();\n return (\n {\n if (!visible) modal.remove();\n }}\n >\n Greetings: {name}!\n \n );\n});\n\nexport default function AntdSample() {\n return (\n \n \n \n \n );\n}\n","UserInfoModal.jsx":"import { useCallback } from 'react';\nimport { Form, Modal } from 'antd';\nimport FormBuilder from 'antd-form-builder';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nexport default NiceModal.create(({ user }) => {\n const modal = useModal();\n const [form] = Form.useForm();\n const meta = {\n initialValues: user,\n fields: [\n { key: 'name', label: 'Name', required: true },\n { key: 'job', label: 'Job Title', required: true },\n ],\n };\n\n const handleSubmit = useCallback(() => {\n form.validateFields().then(() => {\n const newUser = { ...form.getFieldsValue() };\n // In real case, you may call API to create user or update user\n if (!user) {\n newUser.id = String(Date.now());\n } else {\n newUser.id = user.id;\n }\n modal.resolve(newUser);\n modal.hide();\n });\n }, [modal, user, form]);\n return (\n \n
    \n \n \n \n );\n});\n","UserList.jsx":"import { useMemo, useCallback, useState } from 'react';\nimport { Button, Table } from 'antd';\nimport { EditOutlined } from '@ant-design/icons';\nimport { useModal } from '@ebay/nice-modal-react';\nimport UserInfoModal from './UserInfoModal';\nimport mockData from './mock';\n\nexport default function UserList() {\n const userModal = useModal(UserInfoModal);\n const [users, setUsers] = useState(mockData);\n\n const handleNewUser = useCallback(() => {\n userModal.show().then((newUser) => {\n setUsers([newUser, ...users]);\n });\n }, [userModal, users]);\n\n const handleEditUser = useCallback(\n (user) => {\n userModal.show({ user }).then((newUser) => {\n setUsers((users) => {\n // Modify users immutablly\n const i = users.findIndex((u) => u.id === newUser.id);\n const updated = { ...users[i], ...newUser };\n const arr = [...users];\n arr.splice(i, 1, updated);\n return arr;\n });\n });\n },\n [userModal],\n );\n\n const columns = useMemo(\n () => [\n {\n title: 'Name',\n dataIndex: 'name',\n width: '150px',\n },\n {\n title: 'Job Title',\n dataIndex: 'job',\n },\n {\n title: 'Edit',\n width: '100px',\n render(value, user) {\n return (\n }\n onClick={() => {\n handleEditUser(user);\n }}\n />\n );\n },\n },\n ],\n [handleEditUser],\n );\n\n return (\n
    \n \n \n
    \n );\n}\n","PromiseSample.jsx":"import { Modal, Button, Space } from 'antd';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nconst PromiseModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n const handleResolve = () => {\n modal.resolve({ resolved: true });\n };\n const handleReject = () => {\n modal.reject(new Error('Rejected'));\n modal.hide();\n };\n return (\n \n

    Choose the promise action: {name}

    \n \n \n \n \n     \n );\n});\n\nconst ChainingModal = NiceModal.create(({ times }) => {\n const modal = useModal();\n return (\n \n \n
    \n
    \n Showed {times}/3 times.\n     \n );\n});\n\nexport default function PromiseSample() {\n const chainingModal = useModal(ChainingModal);\n const showPromiseModal = () => {\n NiceModal.show(PromiseModal, { name: 'nate' })\n .then((res) => {\n console.log('Resolved: ', res);\n NiceModal.show(PromiseModal, { name: 'nate2' });\n })\n .catch((err) => {\n console.log('Rejected: ', err);\n });\n };\n const showChainingModal = async () => {\n for (let i = 0; i < 3; i++) {\n await chainingModal.show({ times: i + 1 });\n await chainingModal.hide();\n }\n };\n\n return (\n <>\n

    NOTE: please open dev console to see the output.

    \n \n \n\n \n \n \n );\n}\n","MyMuiDialog.tsx":"import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Slide from '@material-ui/core/Slide';\nimport { TransitionProps } from '@material-ui/core/transitions';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nconst Transition = React.forwardRef(function Transition(\n props: TransitionProps & { children?: React.ReactElement },\n ref: React.Ref,\n) {\n return ;\n});\n\nconst MyMuiDialog = NiceModal.create(() => {\n const modal = useModal();\n return (\n modal.hide()}\n TransitionProps={{\n onExited: () => modal.remove(),\n }}\n >\n {\"Use Google's location service?\"}\n \n \n Let Google help apps determine location. This means sending anonymous location data to Google, even when no\n apps are running.\n \n \n \n \n \n \n \n );\n});\n\nexport default function MuiDialogSample() {\n return (\n \n );\n}\n","MyBootstrapDialog.tsx":"import BootstrapModal from 'react-bootstrap/Modal';\nimport Button from 'react-bootstrap/Button';\nimport NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';\n\nconst MyBootstrapDialog = NiceModal.create(({ name = 'Bootstrap' }: { name: string }) => {\n const modal = useModal();\n return (\n \n \n Modal title\n \n\n \n

    Modal body text goes here. {name}

    \n     \n\n \n \n \n \n     \n );\n});\nexport default function BootstrapSample() {\n return (\n <>\n \n \n );\n}\n","ReduxIntegration.jsx":"import { createStore, applyMiddleware, compose, combineReducers } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport NiceModal from '@ebay/nice-modal-react';\nimport { Button } from 'antd';\nimport { MyAntdModal } from './MyAntdModal';\nimport logger from 'redux-logger';\n\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\nconst enhancer = composeEnhancers(applyMiddleware(logger));\n\nconst store = createStore(\n combineReducers({\n __nice_modals: NiceModal.reducer,\n // other reducers...\n }),\n enhancer,\n);\n\nconst ModalsProvider = ({ children }) => {\n const modals = useSelector((s) => s.__nice_modals);\n const dispatch = useDispatch();\n return (\n \n

    NOTE: open dev console or Redux dev tools to see actions log.

    \n {\n NiceModal.show(MyAntdModal, { name: 'Redux' });\n }}\n >\n Show Modal\n \n     \n );\n};\n\nexport default function ReduxIntegration({ children }) {\n return (\n \n {children}\n \n );\n}\n","Declarative.jsx":"import { Modal, Button } from 'antd';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n return (\n \n Greetings: {name}!\n \n );\n});\n\nexport default function AntdSample() {\n return (\n <>\n \n \n \n );\n}\n","PropsBinding.jsx":"import { useEffect, useState } from 'react';\nimport { Modal, Button } from 'antd';\nimport NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ time }) => {\n const modal = useModal();\n return (\n \n Time: {time}\n \n );\n});\n\nexport default function Example() {\n const [time, setTime] = useState(0);\n useEffect(() => {\n const p = setInterval(() => setTime((t) => t + 1), 1000);\n return () => clearInterval(p);\n }, []);\n\n // modalHandler will be assign show/hide method.\n const modalHandler = {};\n\n return (\n <>\n \n \n \n );\n}\n"};function H(e){var n=e.filename;return Object(t.useEffect)((function(){window.Prism.highlightAll()}),[n]),Object(A.jsxs)("div",{className:"code-viewer",children:[Object(A.jsx)("h5",{children:n}),Object(A.jsx)("pre",{children:Object(A.jsx)("code",{className:"language-jsx line-numbers",children:_[n]||'// Error: code of "'.concat(n,'" not found')})})]})}var F=o(34),L=o(178),G=o(37),V=o(374),J=o(375),K=o(376),X=o(379),q=o(208),z=T.create((function(e){var n=e.user,o=C(),r=K.a.useForm(),a=Object(R.a)(r,1)[0],i={initialValues:n,fields:[{key:"name",label:"Name",required:!0},{key:"job",label:"Job Title",required:!0}]},l=Object(t.useCallback)((function(){a.validateFields().then((function(){var e=Object(F.a)({},a.getFieldsValue());e.id=n?n.id:String(Date.now()),o.resolve(e),o.hide()}))}),[o,n,a]);return Object(A.jsx)(X.a,Object(F.a)(Object(F.a)({},E(o)),{},{title:n?"Edit User":"New User",okText:n?"Update":"Create",onOk:l,children:Object(A.jsx)(K.a,{form:a,children:Object(A.jsx)(q.a,{meta:i,form:a})})}))})),Q=[{id:"1",name:"Kennedy",job:"Chief Mobility Orchestrator",city:"North Alec"},{id:"2",name:"Lucius",job:"Internal Research Manager",city:"Littleland"},{id:"3",name:"Carlos",job:"Lead Configuration Analyst",city:"South Lillian"},{id:"4",name:"Urban",job:"Chief Operations Agent",city:"Shieldshaven"},{id:"5",name:"Katrine",job:"Legacy Solutions Orchestrator",city:"South Kyleigh"}];o(337);var W=o(177),Y=o.n(W),Z=o(206),$=o(381),ee=T.create((function(e){var n=e.name,o=C();return Object(A.jsxs)(X.a,Object(F.a)(Object(F.a)({title:"Promise Example"},E(o)),{},{children:[Object(A.jsxs)("p",{children:["Choose the promise action: ",n]}),Object(A.jsxs)($.b,{children:[Object(A.jsx)(G.a,{onClick:function(){o.resolve({resolved:!0})},children:"Resolve"}),Object(A.jsx)(G.a,{onClick:function(){o.reject(new Error("Rejected")),o.hide()},danger:!0,children:"Reject"})]})]}))})),ne=T.create((function(e){var n=e.times,o=C();return Object(A.jsxs)(X.a,Object(F.a)(Object(F.a)({title:"Chaining Same Modal Example"},E(o)),{},{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return o.resolve()},children:"Hide with resolve."}),Object(A.jsx)("br",{}),Object(A.jsx)("br",{}),"Showed ",n,"/3 times."]}))}));var oe=T.create((function(e){var n=e.name,o=C();return Object(A.jsxs)(X.a,{title:"Hello Antd",visible:o.visible,onOk:o.hide,onCancel:o.hide,afterClose:o.remove,children:["Greetings: ",n,"!"]})}));var te=o(378),re=o(377),ae=o(373),ie=o(371),le=o(372),ce=o(370),de=o(382),se=r.a.forwardRef((function(e,n){return Object(A.jsx)(de.a,Object(F.a)({direction:"up",ref:n},e))})),ue=T.create((function(){var e=C();return Object(A.jsxs)(re.a,{TransitionComponent:se,open:e.visible,onClose:function(){return e.hide()},TransitionProps:{onExited:function(){return e.remove()}},children:[Object(A.jsx)(ce.a,{id:"alert-dialog-slide-title",children:"Use Google's location service?"}),Object(A.jsx)(ie.a,{children:Object(A.jsx)(le.a,{id:"alert-dialog-slide-description",children:"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."})}),Object(A.jsxs)(ae.a,{children:[Object(A.jsx)(te.a,{onClick:function(){return e.hide()},color:"primary",children:"Disagree"}),Object(A.jsx)(te.a,{onClick:function(){return e.hide()},color:"primary",children:"Agree"})]})]})}));var me=o(380),pe=T.create((function(e){var n=e.name,o=C();return Object(A.jsxs)(X.a,{title:"Hello Antd",visible:o.visible,onOk:o.hide,onCancel:o.hide,afterClose:o.remove,children:["Greetings: ",n,"!"]})})),he=T.create((function(e){var n=e.name,o=C();return Object(A.jsxs)(me.a,{title:"Hello Antd",visible:o.visible,onClose:o.hide,afterVisibleChange:function(e){e||o.remove()},children:["Greetings: ",n,"!"]})}));var fe=o(98),be=o(157),je=T.create((function(e){var n=e.name,o=void 0===n?"Bootstrap":n,t=C();return Object(A.jsxs)(fe.a,Object(F.a)(Object(F.a)({},P(t)),{},{title:"Nice Modal",children:[Object(A.jsx)(fe.a.Header,{closeButton:!0,children:Object(A.jsx)(fe.a.Title,{children:"Modal title"})}),Object(A.jsx)(fe.a.Body,{children:Object(A.jsxs)("p",{children:["Modal body text goes here. ",o]})}),Object(A.jsxs)(fe.a.Footer,{children:[Object(A.jsx)(be.a,{variant:"secondary",onClick:t.hide,children:"Close"}),Object(A.jsx)(be.a,{variant:"primary",onClick:t.hide,children:"Save changes"})]})]}))}));var ve=o(112),Me=o(156),xe=o(207),Oe=o.n(xe),ge=("undefined"!==typeof window&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||ve.c)(Object(ve.a)(Oe.a)),ye=Object(ve.d)(Object(ve.b)({__nice_modals:T.reducer}),ge),we=function(e){e.children;var n=Object(Me.c)((function(e){return e.__nice_modals})),o=Object(Me.b)();return Object(A.jsxs)(T.Provider,{modals:n,dispatch:o,children:[Object(A.jsx)("p",{style:{color:"#999"},children:"NOTE: open dev console or Redux dev tools to see actions log."}),Object(A.jsx)(G.a,{type:"primary",onClick:function(){T.show(pe,{name:"Redux"})},children:"Show Modal"})]})};var Ce=T.create((function(e){var n=e.time,o=C();return Object(A.jsxs)(X.a,{title:"Props Binding",visible:o.visible,onOk:o.hide,onCancel:o.hide,afterClose:o.remove,children:["Time: ",n]})}));var ke={real:{name:"Real Case",component:function(){var e=C(z),n=Object(t.useState)(Q),o=Object(R.a)(n,2),r=o[0],a=o[1],i=Object(t.useCallback)((function(){e.show().then((function(e){a([e].concat(Object(L.a)(r)))}))}),[e,r]),l=Object(t.useCallback)((function(n){e.show({user:n}).then((function(e){a((function(n){var o=n.findIndex((function(n){return n.id===e.id})),t=Object(F.a)(Object(F.a)({},n[o]),e),r=Object(L.a)(n);return r.splice(o,1,t),r}))}))}),[e]),c=Object(t.useMemo)((function(){return[{title:"Name",dataIndex:"name",width:"150px"},{title:"Job Title",dataIndex:"job"},{title:"Edit",width:"100px",render:function(e,n){return Object(A.jsx)(G.a,{type:"link",icon:Object(A.jsx)(J.a,{}),onClick:function(){l(n)}})}}]}),[l]);return Object(A.jsxs)("div",{children:[Object(A.jsx)(G.a,{type:"primary",onClick:i,children:"+ New User"}),Object(A.jsx)(V.a,{size:"small",rowKey:"id",pagination:!1,columns:c,dataSource:r,style:{marginTop:"20px"}})]})},description:"Show a dialog to create a new user or edit user info.",code:["UserList.jsx","UserInfoModal.jsx"]},mui:{name:"Material UI",description:"Show material UI dialog",component:function(){return Object(A.jsx)(te.a,{variant:"contained",onClick:function(){return T.show(ue)},color:"primary",children:"Agree"})},code:["MyMuiDialog.tsx"]},antd:{name:"Ant Design",description:"Show/hide antd modal or drawer.",component:function(){return Object(A.jsxs)($.b,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return T.show(pe,{name:"Nate"})},children:"Show Modal"}),Object(A.jsx)(G.a,{type:"primary",onClick:function(){return T.show(he,{name:"Bood"})},children:"Show Drawer"})]})},code:["MyAntdModal.tsx"]},bootstrap:{name:"Bootstrap React",descript:"Show/hide bootstrap dialog.",component:function(){return Object(A.jsx)(A.Fragment,{children:Object(A.jsx)(be.a,{variant:"primary",onClick:function(){return T.show(je,{name:"Bootstrap"})},children:"Show Dialog"})})},code:["MyBootstrapDialog.tsx"]},promise:{name:"Promise",description:"Use promise to interact with the dialog.",component:function(){var e=C(ne),n=function(){var n=Object(Z.a)(Y.a.mark((function n(){var o;return Y.a.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:o=0;case 1:if(!(o<3)){n.next=9;break}return n.next=4,e.show({times:o+1});case 4:return n.next=6,e.hide();case 6:o++,n.next=1;break;case 9:case"end":return n.stop()}}),n)})));return function(){return n.apply(this,arguments)}}();return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsx)("p",{style:{color:"#888"},children:"NOTE: please open dev console to see the output."}),Object(A.jsxs)($.b,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){T.show(ee,{name:"nate"}).then((function(e){console.log("Resolved: ",e),T.show(ee,{name:"nate2"})})).catch((function(e){console.log("Rejected: ",e)}))},children:"Show Modal"}),Object(A.jsx)(G.a,{type:"primary",onClick:n,children:"Chaining Same Modal"})]})]})},code:["PromiseSample.jsx"]},declarative:{name:"Declarative",description:"Declarative way to register a modal with id.",component:function(){return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return T.show("my-antd-modal",{name:"Nate"})},children:"Show Modal"}),Object(A.jsx)(oe,{id:"my-antd-modal"})]})},code:["Declarative.jsx"]},propsBinding:{name:"Props Binding",description:"To bind props to modal, need to declare the modal using .",component:function(){var e=Object(t.useState)(0),n=Object(R.a)(e,2),o=n[0],r=n[1];Object(t.useEffect)((function(){var e=setInterval((function(){return r((function(e){return e+1}))}),1e3);return function(){return clearInterval(e)}}),[]);var a={};return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return a.show()},children:"Show Modal"}),Object(A.jsx)(S,{modal:Ce,handler:a,time:o})]})},code:["PropsBinding.jsx"]},redux:{name:"Redux Integration",description:"Use Redux to manage modals state so that you can use Redux dev tools to debug nice modals.",component:function(e){var n=e.children;return Object(A.jsx)(Me.a,{store:ye,children:Object(A.jsx)(we,{children:n})})},code:["ReduxIntegration.jsx"]}};var Be=function(){var e,n=I()||"real",o=ke[n]||{},t=Object(A.jsxs)("div",{className:"app",children:[Object(A.jsxs)("div",{className:"sider",children:[Object(A.jsxs)("h1",{children:[Object(A.jsx)("span",{className:"header-name",children:"@ebay/nice-modal-react"}),Object(A.jsx)("span",{className:"example-title",children:"Examples"})]}),Object(A.jsx)("div",{className:"scroll-container",children:Object(A.jsx)("ul",{children:Object.keys(ke).map((function(e){return Object(A.jsx)("li",{children:Object(A.jsx)("a",{href:"#".concat(e),className:n===e?"active":"",children:ke[e].name})},e)}))})}),Object(A.jsxs)("div",{className:"social",children:[Object(A.jsx)("a",{href:"https://github.com/ebay/nice-modal-react",children:Object(A.jsx)("img",{src:"https://img.shields.io/github/stars/eBay/nice-modal-react?style=social",alt:"Github Repo"})}),Object(A.jsx)("br",{}),Object(A.jsx)("a",{href:"https://ebay.github.io/nice-modal-react/api",children:Object(A.jsx)("img",{src:"https://img.shields.io/badge/API-Reference-green",alt:"api reference"})}),Object(A.jsx)("br",{}),Object(A.jsx)("a",{href:"https://codesandbox.io/s/github/ebay/nice-modal-react/tree/main/example",children:Object(A.jsx)("img",{width:"150px",src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"codesandbox"})})]})]}),Object(A.jsxs)("div",{children:[Object(A.jsx)("div",{className:"example-container",children:function(){var e=ke[n];if(!e||!e.component)return Object(A.jsxs)("span",{style:{color:"red"},children:['Error: example "',n,'" not found.']});var o=e.component;return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsxs)("h1",{children:[e.name,Object(A.jsx)("p",{className:"example-description",children:e.description})]}),Object(A.jsx)(o,{})]})}()}),Object(A.jsx)("div",{className:"code-container",children:null===(e=o.code)||void 0===e?void 0:e.map((function(e){return Object(A.jsx)(H,{filename:e},e)}))})]})]});return"redux"===n?t:Object(A.jsx)(T.Provider,{children:t})},Ne=function(e){e&&e instanceof Function&&o.e(3).then(o.bind(null,383)).then((function(n){var o=n.getCLS,t=n.getFID,r=n.getFCP,a=n.getLCP,i=n.getTTFB;o(e),t(e),r(e),a(e),i(e)}))};o(339),o(340);i.a.render(Object(A.jsx)(Be,{}),document.getElementById("root")),Ne()}},[[341,1,2]]]); -//# sourceMappingURL=main.3fb50e3b.chunk.js.map \ No newline at end of file diff --git a/docs/static/js/main.3fb50e3b.chunk.js.map b/docs/static/js/main.3fb50e3b.chunk.js.map deleted file mode 100644 index 350687c..0000000 --- a/docs/static/js/main.3fb50e3b.chunk.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../../../src/index.tsx","useHash.js","CodeViewer.jsx","webpack:///./src/MyAntdModal.tsx?80f2","webpack:///./src/UserInfoModal.jsx?3e7a","webpack:///./src/UserList.jsx?90fc","webpack:///./src/PromiseSample.jsx?a91c","webpack:///./src/MyMuiDialog.tsx?55e3","webpack:///./src/MyBootstrapDialog.tsx?9fa1","webpack:///./src/ReduxIntegration.jsx?f440","webpack:///./src/Declarative.jsx?88cb","webpack:///./src/PropsBinding.jsx?ac2d","UserInfoModal.jsx","mock.js","PromiseSample.jsx","Declarative.jsx","MyMuiDialog.tsx","MyAntdModal.tsx","MyBootstrapDialog.tsx","ReduxIntegration.jsx","PropsBinding.jsx","App.jsx","UserList.jsx","reportWebVitals.ts","index.tsx"],"names":["modal","getHash","document","location","hash","replace","useHash","useState","setHash","useEffect","handleHashChange","window","scrollTo","top","addEventListener","removeEventListener","codeMap","CodeViewer","filename","Prism","highlightAll","className","NiceModal","create","user","useModal","Form","useForm","form","meta","initialValues","fields","key","label","required","handleSubmit","useCallback","validateFields","then","newUser","getFieldsValue","id","String","Date","now","resolve","hide","antdModal","title","okText","onOk","data","name","job","city","PromiseModal","onClick","resolved","reject","Error","danger","ChainingModal","times","type","MyAntdModal","visible","onCancel","afterClose","remove","Transition","React","forwardRef","props","ref","Slide","direction","MyMuiDialog","Dialog","TransitionComponent","open","onClose","TransitionProps","onExited","DialogTitle","DialogContent","DialogContentText","DialogActions","Button","color","MyAntdDrawer","afterVisibleChange","MyBootstrapDialog","bootstrapDialog","Header","closeButton","Title","Body","Footer","variant","enhancer","__REDUX_DEVTOOLS_EXTENSION_COMPOSE__","compose","applyMiddleware","logger","store","createStore","combineReducers","__nice_modals","reducer","ModalsProvider","children","modals","useSelector","s","dispatch","useDispatch","Provider","style","show","time","examples","real","component","userModal","UserInfoModal","mockData","users","setUsers","handleNewUser","handleEditUser","i","findIndex","u","updated","arr","splice","columns","useMemo","dataIndex","width","render","value","icon","EditOutlined","size","rowKey","pagination","dataSource","marginTop","description","code","mui","antd","bootstrap","descript","promise","chainingModal","showChainingModal","a","res","console","log","catch","err","declarative","propsBinding","setTime","p","setInterval","t","clearInterval","modalHandler","handler","redux","App","current","example","ele","Object","keys","map","href","src","alt","item","Comp","renderExample","f","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","getElementById"],"mappings":"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","file":"static/js/main.3fb50e3b.chunk.js","sourcesContent":["/* *********************************************************\n * Copyright 2021 eBay Inc.\n\n * Use of this source code is governed by an MIT-style\n * license that can be found in the LICENSE file or at\n * https://opensource.org/licenses/MIT.\n*********************************************************** */\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @module NiceModal\n * */\nimport React, { useEffect, useCallback, useContext, useReducer, useMemo } from 'react';\nvar symModalId = Symbol('NiceModalId');\nvar initialState = {};\nexport var NiceModalContext = React.createContext(initialState);\nvar NiceModalIdContext = React.createContext(null);\nvar MODAL_REGISTRY = {};\nvar ALREADY_MOUNTED = {};\nvar uidSeed = 0;\nvar dispatch = function () {\n throw new Error('No dispatch method detected, did you embed your app with NiceModal.Provider?');\n};\nvar getUid = function () { return \"_nice_modal_\" + uidSeed++; };\n// Modal reducer used in useReducer hook.\nexport var reducer = function (state, action) {\n var _a, _b, _c;\n if (state === void 0) { state = initialState; }\n switch (action.type) {\n case 'nice-modal/show': {\n var _d = action.payload, modalId = _d.modalId, args = _d.args;\n return __assign(__assign({}, state), (_a = {}, _a[modalId] = __assign(__assign({}, state[modalId]), { id: modalId, args: args, \n // If modal is not mounted, mount it first then make it visible.\n // There is logic inside HOC wrapper to make it visible after its first mount.\n // This mechanism ensures the entering transition.\n visible: !!ALREADY_MOUNTED[modalId], delayVisible: !ALREADY_MOUNTED[modalId] }), _a));\n }\n case 'nice-modal/hide': {\n var modalId = action.payload.modalId;\n if (!state[modalId])\n return state;\n return __assign(__assign({}, state), (_b = {}, _b[modalId] = __assign(__assign({}, state[modalId]), { visible: false }), _b));\n }\n case 'nice-modal/remove': {\n var modalId = action.payload.modalId;\n var newState = __assign({}, state);\n delete newState[modalId];\n return newState;\n }\n case 'nice-modal/set-flags': {\n var _e = action.payload, modalId = _e.modalId, flags = _e.flags;\n return __assign(__assign({}, state), (_c = {}, _c[modalId] = __assign(__assign({}, state[modalId]), flags), _c));\n }\n default:\n return state;\n }\n};\n// Get modal component by modal id\nfunction getModal(modalId) {\n var _a;\n return (_a = MODAL_REGISTRY[modalId]) === null || _a === void 0 ? void 0 : _a.comp;\n}\n// action creator to show a modal\nfunction showModal(modalId, args) {\n return {\n type: 'nice-modal/show',\n payload: {\n modalId: modalId,\n args: args,\n },\n };\n}\n// action creator to set flags of a modal\nfunction setModalFlags(modalId, flags) {\n return {\n type: 'nice-modal/set-flags',\n payload: {\n modalId: modalId,\n flags: flags,\n },\n };\n}\n// action creator to hide a modal\nfunction hideModal(modalId) {\n return {\n type: 'nice-modal/hide',\n payload: {\n modalId: modalId,\n },\n };\n}\n// action creator to remove a modal\nfunction removeModal(modalId) {\n return {\n type: 'nice-modal/remove',\n payload: {\n modalId: modalId,\n },\n };\n}\nvar modalCallbacks = {};\nvar hideModalCallbacks = {};\nvar getModalId = function (modal) {\n if (typeof modal === 'string')\n return modal;\n if (!modal[symModalId]) {\n modal[symModalId] = getUid();\n }\n return modal[symModalId];\n};\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function show(modal, args) {\n var modalId = getModalId(modal);\n if (typeof modal !== 'string' && !MODAL_REGISTRY[modalId]) {\n register(modalId, modal);\n }\n dispatch(showModal(modalId, args));\n if (!modalCallbacks[modalId]) {\n // `!` tell ts that theResolve will be written before it is used\n var theResolve_1;\n // `!` tell ts that theResolve will be written before it is used\n var theReject_1;\n var promise = new Promise(function (resolve, reject) {\n theResolve_1 = resolve;\n theReject_1 = reject;\n });\n modalCallbacks[modalId] = {\n resolve: theResolve_1,\n reject: theReject_1,\n promise: promise,\n };\n }\n return modalCallbacks[modalId].promise;\n}\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function hide(modal) {\n var modalId = getModalId(modal);\n dispatch(hideModal(modalId));\n // Should also delete the callback for modal.resolve #35\n delete modalCallbacks[modalId];\n if (!hideModalCallbacks[modalId]) {\n // `!` tell ts that theResolve will be written before it is used\n var theResolve_2;\n // `!` tell ts that theResolve will be written before it is used\n var theReject_2;\n var promise = new Promise(function (resolve, reject) {\n theResolve_2 = resolve;\n theReject_2 = reject;\n });\n hideModalCallbacks[modalId] = {\n resolve: theResolve_2,\n reject: theReject_2,\n promise: promise,\n };\n }\n return hideModalCallbacks[modalId].promise;\n}\nexport var remove = function (modal) {\n var modalId = getModalId(modal);\n dispatch(removeModal(modalId));\n delete modalCallbacks[modalId];\n delete hideModalCallbacks[modalId];\n};\nvar setFlags = function (modalId, flags) {\n dispatch(setModalFlags(modalId, flags));\n};\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function useModal(modal, args) {\n var modals = useContext(NiceModalContext);\n var contextModalId = useContext(NiceModalIdContext);\n var modalId = null;\n var isUseComponent = modal && typeof modal !== 'string';\n if (!modal) {\n modalId = contextModalId;\n }\n else {\n modalId = getModalId(modal);\n }\n // Only if contextModalId doesn't exist\n if (!modalId)\n throw new Error('No modal id found in NiceModal.useModal.');\n var mid = modalId;\n // If use a component directly, register it.\n useEffect(function () {\n if (isUseComponent && !MODAL_REGISTRY[mid]) {\n register(mid, modal, args);\n }\n }, [isUseComponent, mid, modal, args]);\n var modalInfo = modals[mid];\n var showCallback = useCallback(function (args) { return show(mid, args); }, [mid]);\n var hideCallback = useCallback(function () { return hide(mid); }, [mid]);\n var removeCallback = useCallback(function () { return remove(mid); }, [mid]);\n var resolveCallback = useCallback(function (args) {\n var _a;\n (_a = modalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.resolve(args);\n delete modalCallbacks[mid];\n }, [mid]);\n var rejectCallback = useCallback(function (args) {\n var _a;\n (_a = modalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.reject(args);\n delete modalCallbacks[mid];\n }, [mid]);\n var resolveHide = useCallback(function (args) {\n var _a;\n (_a = hideModalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.resolve(args);\n delete hideModalCallbacks[mid];\n }, [mid]);\n return useMemo(function () { return ({\n id: mid,\n args: modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,\n visible: !!(modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible),\n keepMounted: !!(modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted),\n show: showCallback,\n hide: hideCallback,\n remove: removeCallback,\n resolve: resolveCallback,\n reject: rejectCallback,\n resolveHide: resolveHide,\n }); }, [\n mid,\n modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,\n modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible,\n modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted,\n showCallback,\n hideCallback,\n removeCallback,\n resolveCallback,\n rejectCallback,\n resolveHide,\n ]);\n}\nexport var create = function (Comp) {\n return function (_a) {\n var _b;\n var defaultVisible = _a.defaultVisible, keepMounted = _a.keepMounted, id = _a.id, props = __rest(_a, [\"defaultVisible\", \"keepMounted\", \"id\"]);\n var _c = useModal(id), args = _c.args, show = _c.show;\n // If there's modal state, then should mount it.\n var modals = useContext(NiceModalContext);\n var shouldMount = !!modals[id];\n useEffect(function () {\n // If defaultVisible, show it after mounted.\n if (defaultVisible) {\n show();\n }\n ALREADY_MOUNTED[id] = true;\n return function () {\n delete ALREADY_MOUNTED[id];\n };\n }, [id, show, defaultVisible]);\n useEffect(function () {\n if (keepMounted)\n setFlags(id, { keepMounted: true });\n }, [id, keepMounted]);\n var delayVisible = (_b = modals[id]) === null || _b === void 0 ? void 0 : _b.delayVisible;\n // If modal.show is called\n // 1. If modal was mounted, should make it visible directly\n // 2. If modal has not been mounted, should mount it first, then make it visible\n useEffect(function () {\n if (delayVisible) {\n // delayVisible: false => true, it means the modal.show() is called, should show it.\n show(args);\n }\n }, [delayVisible, args, show]);\n if (!shouldMount)\n return null;\n return (React.createElement(NiceModalIdContext.Provider, { value: id },\n React.createElement(Comp, __assign({}, props, args))));\n };\n};\n// All registered modals will be rendered in modal placeholder\nexport var register = function (id, comp, props) {\n if (!MODAL_REGISTRY[id]) {\n MODAL_REGISTRY[id] = { comp: comp, props: props };\n }\n else {\n MODAL_REGISTRY[id].props = props;\n }\n};\n/**\n * Unregister a modal.\n * @param id - The id of the modal.\n */\nexport var unregister = function (id) {\n delete MODAL_REGISTRY[id];\n};\n// The placeholder component is used to auto render modals when call modal.show()\n// When modal.show() is called, it means there've been modal info\nvar NiceModalPlaceholder = function () {\n var modals = useContext(NiceModalContext);\n var visibleModalIds = Object.keys(modals).filter(function (id) { return !!modals[id]; });\n visibleModalIds.forEach(function (id) {\n if (!MODAL_REGISTRY[id] && !ALREADY_MOUNTED[id]) {\n console.warn(\"No modal found for id: \" + id + \". Please check the id or if it is registered or declared via JSX.\");\n return;\n }\n });\n var toRender = visibleModalIds\n .filter(function (id) { return MODAL_REGISTRY[id]; })\n .map(function (id) { return (__assign({ id: id }, MODAL_REGISTRY[id])); });\n return (React.createElement(React.Fragment, null, toRender.map(function (t) { return (React.createElement(t.comp, __assign({ key: t.id, id: t.id }, t.props))); })));\n};\nvar InnerContextProvider = function (_a) {\n var children = _a.children;\n var arr = useReducer(reducer, initialState);\n var modals = arr[0];\n dispatch = arr[1];\n return (React.createElement(NiceModalContext.Provider, { value: modals },\n children,\n React.createElement(NiceModalPlaceholder, null)));\n};\nexport var Provider = function (_a) {\n var children = _a.children, givenDispatch = _a.dispatch, givenModals = _a.modals;\n if (!givenDispatch || !givenModals) {\n return React.createElement(InnerContextProvider, null, children);\n }\n dispatch = givenDispatch;\n return (React.createElement(NiceModalContext.Provider, { value: givenModals },\n children,\n React.createElement(NiceModalPlaceholder, null)));\n};\n/**\n * Declarative way to register a modal.\n * @param id - The id of the modal.\n * @param component - The modal Component.\n * @returns\n */\nexport var ModalDef = function (_a) {\n var id = _a.id, component = _a.component;\n useEffect(function () {\n register(id, component);\n return function () {\n unregister(id);\n };\n }, [id, component]);\n return null;\n};\n/**\n * A place holder allows to bind props to a modal.\n * It assigns show/hide methods to handler object to show/hide the modal.\n *\n * Comparing to use the directly, this approach allows use registered modal id to find the modal component.\n * Also it avoids to create unique id for MyNiceModal.\n *\n * @param modal - The modal id registered or a modal component.\n * @param handler - The handler object to control the modal.\n * @returns\n */\nexport var ModalHolder = function (_a) {\n var _b;\n var modal = _a.modal, _c = _a.handler, handler = _c === void 0 ? {} : _c, restProps = __rest(_a, [\"modal\", \"handler\"]);\n var mid = useMemo(function () { return getUid(); }, []);\n var ModalComp = typeof modal === 'string' ? (_b = MODAL_REGISTRY[modal]) === null || _b === void 0 ? void 0 : _b.comp : modal;\n if (!handler) {\n throw new Error('No handler found in NiceModal.ModalHolder.');\n }\n if (!ModalComp) {\n throw new Error(\"No modal found for id: \" + modal + \" in NiceModal.ModalHolder.\");\n }\n handler.show = useCallback(function (args) { return show(mid, args); }, [mid]);\n handler.hide = useCallback(function () { return hide(mid); }, [mid]);\n return React.createElement(ModalComp, __assign({ id: mid }, restProps));\n};\nexport var antdModal = function (modal) {\n return {\n visible: modal.visible,\n onOk: function () { return modal.hide(); },\n onCancel: function () { return modal.hide(); },\n afterClose: function () {\n // Need to resolve before remove\n modal.resolveHide();\n if (!modal.keepMounted)\n modal.remove();\n },\n };\n};\nexport var antdModalV5 = function (modal) {\n var _a = antdModal(modal), onOk = _a.onOk, onCancel = _a.onCancel, afterClose = _a.afterClose;\n return {\n open: modal.visible,\n onOk: onOk,\n onCancel: onCancel,\n afterClose: afterClose,\n };\n};\nexport var antdDrawer = function (modal) {\n return {\n visible: modal.visible,\n onClose: function () { return modal.hide(); },\n afterVisibleChange: function (v) {\n if (!v) {\n modal.resolveHide();\n }\n !v && !modal.keepMounted && modal.remove();\n },\n };\n};\nexport var antdDrawerV5 = function (modal) {\n var _a = antdDrawer(modal), onClose = _a.onClose, afterOpenChange = _a.afterVisibleChange;\n return {\n open: modal.visible,\n onClose: onClose,\n afterOpenChange: afterOpenChange,\n };\n};\nexport var muiDialog = function (modal) {\n return {\n open: modal.visible,\n onClose: function () { return modal.hide(); },\n onExited: function () {\n modal.resolveHide();\n !modal.keepMounted && modal.remove();\n },\n };\n};\nexport var muiDialogV5 = function (modal) {\n return {\n open: modal.visible,\n onClose: function () { return modal.hide(); },\n TransitionProps: {\n onExited: function () {\n modal.resolveHide();\n !modal.keepMounted && modal.remove();\n },\n },\n };\n};\nexport var bootstrapDialog = function (modal) {\n return {\n show: modal.visible,\n onHide: function () { return modal.hide(); },\n onExited: function () {\n modal.resolveHide();\n !modal.keepMounted && modal.remove();\n },\n };\n};\nvar NiceModal = {\n Provider: Provider,\n ModalDef: ModalDef,\n ModalHolder: ModalHolder,\n NiceModalContext: NiceModalContext,\n create: create,\n register: register,\n getModal: getModal,\n show: show,\n hide: hide,\n remove: remove,\n useModal: useModal,\n reducer: reducer,\n antdModal: antdModal,\n antdDrawer: antdDrawer,\n muiDialog: muiDialog,\n bootstrapDialog: bootstrapDialog,\n};\nexport default NiceModal;\n//# sourceMappingURL=index.js.map","import { useEffect, useState } from 'react';\n\nconst getHash = () => document.location.hash.replace('#', '');\n\nconst useHash = () => {\n const [hash, setHash] = useState(getHash());\n useEffect(() => {\n function handleHashChange() {\n const hash = getHash() || 'basic';\n setHash(hash);\n window.scrollTo({ top: 0 });\n }\n window.addEventListener('hashchange', handleHashChange);\n return () => {\n window.removeEventListener('hashchange', handleHashChange);\n };\n }, [setHash]);\n return hash;\n};\n\nexport default useHash;\n","/* eslint import/no-webpack-loader-syntax: off */\n\nimport React, { useEffect } from 'react';\nimport codeAntd from '!!raw-loader!./MyAntdModal.tsx';\nimport codeUserList from '!!raw-loader!./UserList.jsx';\nimport codeUserInfoModal from '!!raw-loader!./UserInfoModal.jsx';\nimport codePromiseSample from '!!raw-loader!./PromiseSample.jsx';\nimport codeMyMuiDialog from '!!raw-loader!./MyMuiDialog.tsx';\nimport codeMyBootstrapDialog from '!!raw-loader!./MyBootstrapDialog.tsx';\nimport codeReduxIntegration from '!!raw-loader!./ReduxIntegration.jsx';\nimport codeDeclarative from '!!raw-loader!./Declarative.jsx';\nimport codePropsBinding from '!!raw-loader!./PropsBinding.jsx';\n\nconst codeMap = {\n 'MyAntdModal.tsx': codeAntd,\n 'UserInfoModal.jsx': codeUserInfoModal,\n 'UserList.jsx': codeUserList,\n 'PromiseSample.jsx': codePromiseSample,\n 'MyMuiDialog.tsx': codeMyMuiDialog,\n 'MyBootstrapDialog.tsx': codeMyBootstrapDialog,\n 'ReduxIntegration.jsx': codeReduxIntegration,\n 'Declarative.jsx': codeDeclarative,\n 'PropsBinding.jsx': codePropsBinding,\n};\nexport default function CodeViewer({ filename }) {\n useEffect(() => {\n window.Prism.highlightAll();\n }, [filename]);\n return (\n
    \n
    {filename}
    \n 
    \n        \n          {codeMap[filename] || `// Error: code of \"${filename}\" not found`}\n        \n
    \n
    \n );\n}\n","export default \"import { Modal, Button, Drawer, Space } from 'antd';\\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\\n\\nexport const MyAntdModal = NiceModal.create(({ name }: { name: string }) => {\\n const modal = useModal();\\n return (\\n \\n Greetings: {name}!\\n \\n );\\n});\\n\\nconst MyAntdDrawer = NiceModal.create(({ name }: { name: string }) => {\\n const modal = useModal();\\n return (\\n {\\n if (!visible) modal.remove();\\n }}\\n >\\n Greetings: {name}!\\n \\n );\\n});\\n\\nexport default function AntdSample() {\\n return (\\n \\n \\n \\n \\n );\\n}\\n\";","export default \"import { useCallback } from 'react';\\nimport { Form, Modal } from 'antd';\\nimport FormBuilder from 'antd-form-builder';\\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\\n\\nexport default NiceModal.create(({ user }) => {\\n const modal = useModal();\\n const [form] = Form.useForm();\\n const meta = {\\n initialValues: user,\\n fields: [\\n { key: 'name', label: 'Name', required: true },\\n { key: 'job', label: 'Job Title', required: true },\\n ],\\n };\\n\\n const handleSubmit = useCallback(() => {\\n form.validateFields().then(() => {\\n const newUser = { ...form.getFieldsValue() };\\n // In real case, you may call API to create user or update user\\n if (!user) {\\n newUser.id = String(Date.now());\\n } else {\\n newUser.id = user.id;\\n }\\n modal.resolve(newUser);\\n modal.hide();\\n });\\n }, [modal, user, form]);\\n return (\\n \\n
    \\n \\n \\n \\n );\\n});\\n\";","export default \"import { useMemo, useCallback, useState } from 'react';\\nimport { Button, Table } from 'antd';\\nimport { EditOutlined } from '@ant-design/icons';\\nimport { useModal } from '@ebay/nice-modal-react';\\nimport UserInfoModal from './UserInfoModal';\\nimport mockData from './mock';\\n\\nexport default function UserList() {\\n const userModal = useModal(UserInfoModal);\\n const [users, setUsers] = useState(mockData);\\n\\n const handleNewUser = useCallback(() => {\\n userModal.show().then((newUser) => {\\n setUsers([newUser, ...users]);\\n });\\n }, [userModal, users]);\\n\\n const handleEditUser = useCallback(\\n (user) => {\\n userModal.show({ user }).then((newUser) => {\\n setUsers((users) => {\\n // Modify users immutablly\\n const i = users.findIndex((u) => u.id === newUser.id);\\n const updated = { ...users[i], ...newUser };\\n const arr = [...users];\\n arr.splice(i, 1, updated);\\n return arr;\\n });\\n });\\n },\\n [userModal],\\n );\\n\\n const columns = useMemo(\\n () => [\\n {\\n title: 'Name',\\n dataIndex: 'name',\\n width: '150px',\\n },\\n {\\n title: 'Job Title',\\n dataIndex: 'job',\\n },\\n {\\n title: 'Edit',\\n width: '100px',\\n render(value, user) {\\n return (\\n }\\n onClick={() => {\\n handleEditUser(user);\\n }}\\n />\\n );\\n },\\n },\\n ],\\n [handleEditUser],\\n );\\n\\n return (\\n
    \\n \\n \\n
    \\n );\\n}\\n\";","export default \"import { Modal, Button, Space } from 'antd';\\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\\n\\nconst PromiseModal = NiceModal.create(({ name }) => {\\n const modal = useModal();\\n const handleResolve = () => {\\n modal.resolve({ resolved: true });\\n };\\n const handleReject = () => {\\n modal.reject(new Error('Rejected'));\\n modal.hide();\\n };\\n return (\\n \\n

    Choose the promise action: {name}

    \\n \\n \\n \\n \\n     \\n );\\n});\\n\\nconst ChainingModal = NiceModal.create(({ times }) => {\\n const modal = useModal();\\n return (\\n \\n \\n
    \\n
    \\n Showed {times}/3 times.\\n     \\n );\\n});\\n\\nexport default function PromiseSample() {\\n const chainingModal = useModal(ChainingModal);\\n const showPromiseModal = () => {\\n NiceModal.show(PromiseModal, { name: 'nate' })\\n .then((res) => {\\n console.log('Resolved: ', res);\\n NiceModal.show(PromiseModal, { name: 'nate2' });\\n })\\n .catch((err) => {\\n console.log('Rejected: ', err);\\n });\\n };\\n const showChainingModal = async () => {\\n for (let i = 0; i < 3; i++) {\\n await chainingModal.show({ times: i + 1 });\\n await chainingModal.hide();\\n }\\n };\\n\\n return (\\n <>\\n

    NOTE: please open dev console to see the output.

    \\n \\n \\n\\n \\n \\n \\n );\\n}\\n\";","export default \"import React from 'react';\\nimport Button from '@material-ui/core/Button';\\nimport Dialog from '@material-ui/core/Dialog';\\nimport DialogActions from '@material-ui/core/DialogActions';\\nimport DialogContent from '@material-ui/core/DialogContent';\\nimport DialogContentText from '@material-ui/core/DialogContentText';\\nimport DialogTitle from '@material-ui/core/DialogTitle';\\nimport Slide from '@material-ui/core/Slide';\\nimport { TransitionProps } from '@material-ui/core/transitions';\\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\\n\\nconst Transition = React.forwardRef(function Transition(\\n props: TransitionProps & { children?: React.ReactElement },\\n ref: React.Ref,\\n) {\\n return ;\\n});\\n\\nconst MyMuiDialog = NiceModal.create(() => {\\n const modal = useModal();\\n return (\\n modal.hide()}\\n TransitionProps={{\\n onExited: () => modal.remove(),\\n }}\\n >\\n {\\\"Use Google's location service?\\\"}\\n \\n \\n Let Google help apps determine location. This means sending anonymous location data to Google, even when no\\n apps are running.\\n \\n \\n \\n \\n \\n \\n \\n );\\n});\\n\\nexport default function MuiDialogSample() {\\n return (\\n \\n );\\n}\\n\";","export default \"import BootstrapModal from 'react-bootstrap/Modal';\\nimport Button from 'react-bootstrap/Button';\\nimport NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';\\n\\nconst MyBootstrapDialog = NiceModal.create(({ name = 'Bootstrap' }: { name: string }) => {\\n const modal = useModal();\\n return (\\n \\n \\n Modal title\\n \\n\\n \\n

    Modal body text goes here. {name}

    \\n     \\n\\n \\n \\n \\n \\n     \\n );\\n});\\nexport default function BootstrapSample() {\\n return (\\n <>\\n \\n \\n );\\n}\\n\";","export default \"import { createStore, applyMiddleware, compose, combineReducers } from 'redux';\\nimport { Provider, useSelector, useDispatch } from 'react-redux';\\nimport NiceModal from '@ebay/nice-modal-react';\\nimport { Button } from 'antd';\\nimport { MyAntdModal } from './MyAntdModal';\\nimport logger from 'redux-logger';\\n\\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\\nconst enhancer = composeEnhancers(applyMiddleware(logger));\\n\\nconst store = createStore(\\n combineReducers({\\n __nice_modals: NiceModal.reducer,\\n // other reducers...\\n }),\\n enhancer,\\n);\\n\\nconst ModalsProvider = ({ children }) => {\\n const modals = useSelector((s) => s.__nice_modals);\\n const dispatch = useDispatch();\\n return (\\n \\n

    NOTE: open dev console or Redux dev tools to see actions log.

    \\n {\\n NiceModal.show(MyAntdModal, { name: 'Redux' });\\n }}\\n >\\n Show Modal\\n \\n     \\n );\\n};\\n\\nexport default function ReduxIntegration({ children }) {\\n return (\\n \\n {children}\\n \\n );\\n}\\n\";","export default \"import { Modal, Button } from 'antd';\\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\\n\\nexport const MyAntdModal = NiceModal.create(({ name }) => {\\n const modal = useModal();\\n return (\\n \\n Greetings: {name}!\\n \\n );\\n});\\n\\nexport default function AntdSample() {\\n return (\\n <>\\n \\n \\n \\n );\\n}\\n\";","export default \"import { useEffect, useState } from 'react';\\nimport { Modal, Button } from 'antd';\\nimport NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';\\n\\nexport const MyAntdModal = NiceModal.create(({ time }) => {\\n const modal = useModal();\\n return (\\n \\n Time: {time}\\n \\n );\\n});\\n\\nexport default function Example() {\\n const [time, setTime] = useState(0);\\n useEffect(() => {\\n const p = setInterval(() => setTime((t) => t + 1), 1000);\\n return () => clearInterval(p);\\n }, []);\\n\\n // modalHandler will be assign show/hide method.\\n const modalHandler = {};\\n\\n return (\\n <>\\n \\n \\n \\n );\\n}\\n\";","import { useCallback } from 'react';\nimport { Form, Modal } from 'antd';\nimport FormBuilder from 'antd-form-builder';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nexport default NiceModal.create(({ user }) => {\n const modal = useModal();\n const [form] = Form.useForm();\n const meta = {\n initialValues: user,\n fields: [\n { key: 'name', label: 'Name', required: true },\n { key: 'job', label: 'Job Title', required: true },\n ],\n };\n\n const handleSubmit = useCallback(() => {\n form.validateFields().then(() => {\n const newUser = { ...form.getFieldsValue() };\n // In real case, you may call API to create user or update user\n if (!user) {\n newUser.id = String(Date.now());\n } else {\n newUser.id = user.id;\n }\n modal.resolve(newUser);\n modal.hide();\n });\n }, [modal, user, form]);\n return (\n \n
    \n \n \n \n );\n});\n","const data = [\n {\n id: '1',\n name: 'Kennedy',\n job: 'Chief Mobility Orchestrator',\n city: 'North Alec',\n },\n {\n id: '2',\n name: 'Lucius',\n job: 'Internal Research Manager',\n city: 'Littleland',\n },\n {\n id: '3',\n name: 'Carlos',\n job: 'Lead Configuration Analyst',\n city: 'South Lillian',\n },\n {\n id: '4',\n name: 'Urban',\n job: 'Chief Operations Agent',\n city: 'Shieldshaven',\n },\n {\n id: '5',\n name: 'Katrine',\n job: 'Legacy Solutions Orchestrator',\n city: 'South Kyleigh',\n },\n];\nexport default data;\n","import { Modal, Button, Space } from 'antd';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nconst PromiseModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n const handleResolve = () => {\n modal.resolve({ resolved: true });\n };\n const handleReject = () => {\n modal.reject(new Error('Rejected'));\n modal.hide();\n };\n return (\n \n

    Choose the promise action: {name}

    \n \n \n \n \n     \n );\n});\n\nconst ChainingModal = NiceModal.create(({ times }) => {\n const modal = useModal();\n return (\n \n \n
    \n
    \n Showed {times}/3 times.\n     \n );\n});\n\nexport default function PromiseSample() {\n const chainingModal = useModal(ChainingModal);\n const showPromiseModal = () => {\n NiceModal.show(PromiseModal, { name: 'nate' })\n .then((res) => {\n console.log('Resolved: ', res);\n NiceModal.show(PromiseModal, { name: 'nate2' });\n })\n .catch((err) => {\n console.log('Rejected: ', err);\n });\n };\n const showChainingModal = async () => {\n for (let i = 0; i < 3; i++) {\n await chainingModal.show({ times: i + 1 });\n await chainingModal.hide();\n }\n };\n\n return (\n <>\n

    NOTE: please open dev console to see the output.

    \n \n \n\n \n \n \n );\n}\n","import { Modal, Button } from 'antd';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n return (\n \n Greetings: {name}!\n \n );\n});\n\nexport default function AntdSample() {\n return (\n <>\n \n \n \n );\n}\n","import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Slide from '@material-ui/core/Slide';\nimport { TransitionProps } from '@material-ui/core/transitions';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nconst Transition = React.forwardRef(function Transition(\n props: TransitionProps & { children?: React.ReactElement },\n ref: React.Ref,\n) {\n return ;\n});\n\nconst MyMuiDialog = NiceModal.create(() => {\n const modal = useModal();\n return (\n modal.hide()}\n TransitionProps={{\n onExited: () => modal.remove(),\n }}\n >\n {\"Use Google's location service?\"}\n \n \n Let Google help apps determine location. This means sending anonymous location data to Google, even when no\n apps are running.\n \n \n \n \n \n \n \n );\n});\n\nexport default function MuiDialogSample() {\n return (\n \n );\n}\n","import { Modal, Button, Drawer, Space } from 'antd';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ name }: { name: string }) => {\n const modal = useModal();\n return (\n \n Greetings: {name}!\n \n );\n});\n\nconst MyAntdDrawer = NiceModal.create(({ name }: { name: string }) => {\n const modal = useModal();\n return (\n {\n if (!visible) modal.remove();\n }}\n >\n Greetings: {name}!\n \n );\n});\n\nexport default function AntdSample() {\n return (\n \n \n \n \n );\n}\n","import BootstrapModal from 'react-bootstrap/Modal';\nimport Button from 'react-bootstrap/Button';\nimport NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';\n\nconst MyBootstrapDialog = NiceModal.create(({ name = 'Bootstrap' }: { name: string }) => {\n const modal = useModal();\n return (\n \n \n Modal title\n \n\n \n

    Modal body text goes here. {name}

    \n     \n\n \n \n \n \n     \n );\n});\nexport default function BootstrapSample() {\n return (\n <>\n \n \n );\n}\n","import { createStore, applyMiddleware, compose, combineReducers } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport NiceModal from '@ebay/nice-modal-react';\nimport { Button } from 'antd';\nimport { MyAntdModal } from './MyAntdModal';\nimport logger from 'redux-logger';\n\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\nconst enhancer = composeEnhancers(applyMiddleware(logger));\n\nconst store = createStore(\n combineReducers({\n __nice_modals: NiceModal.reducer,\n // other reducers...\n }),\n enhancer,\n);\n\nconst ModalsProvider = ({ children }) => {\n const modals = useSelector((s) => s.__nice_modals);\n const dispatch = useDispatch();\n return (\n \n

    NOTE: open dev console or Redux dev tools to see actions log.

    \n {\n NiceModal.show(MyAntdModal, { name: 'Redux' });\n }}\n >\n Show Modal\n \n     \n );\n};\n\nexport default function ReduxIntegration({ children }) {\n return (\n \n {children}\n \n );\n}\n","import { useEffect, useState } from 'react';\nimport { Modal, Button } from 'antd';\nimport NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ time }) => {\n const modal = useModal();\n return (\n \n Time: {time}\n \n );\n});\n\nexport default function Example() {\n const [time, setTime] = useState(0);\n useEffect(() => {\n const p = setInterval(() => setTime((t) => t + 1), 1000);\n return () => clearInterval(p);\n }, []);\n\n // modalHandler will be assign show/hide method.\n const modalHandler = {};\n\n return (\n <>\n \n \n \n );\n}\n","import NiceModal from '@ebay/nice-modal-react';\nimport useHash from './useHash';\nimport CodeViewer from './CodeViewer';\nimport UserList from './UserList';\nimport './App.css';\nimport PromiseSample from './PromiseSample';\nimport Declarative from './Declarative';\nimport MyMuiDialog from './MyMuiDialog';\nimport MyAntdModal from './MyAntdModal';\nimport MyBootstrapDialog from './MyBootstrapDialog';\nimport ReduxIntegration from './ReduxIntegration';\nimport PropsBinding from './PropsBinding';\n\nconst examples = {\n real: {\n name: 'Real Case',\n component: UserList,\n description: 'Show a dialog to create a new user or edit user info.',\n code: ['UserList.jsx', 'UserInfoModal.jsx'],\n },\n mui: {\n name: 'Material UI',\n description: 'Show material UI dialog',\n component: MyMuiDialog,\n code: ['MyMuiDialog.tsx'],\n },\n antd: {\n name: 'Ant Design',\n description: 'Show/hide antd modal or drawer.',\n component: MyAntdModal,\n code: ['MyAntdModal.tsx'],\n },\n bootstrap: {\n name: 'Bootstrap React',\n descript: 'Show/hide bootstrap dialog.',\n component: MyBootstrapDialog,\n code: ['MyBootstrapDialog.tsx'],\n },\n promise: {\n name: 'Promise',\n description: 'Use promise to interact with the dialog.',\n component: PromiseSample,\n code: ['PromiseSample.jsx'],\n },\n declarative: {\n name: 'Declarative',\n description: 'Declarative way to register a modal with id.',\n component: Declarative,\n code: ['Declarative.jsx'],\n },\n propsBinding: {\n name: 'Props Binding',\n description: 'To bind props to modal, need to declare the modal using .',\n component: PropsBinding,\n code: ['PropsBinding.jsx'],\n },\n redux: {\n name: 'Redux Integration',\n description:\n 'Use Redux to manage modals state so that you can use Redux dev tools to debug nice modals.',\n component: ReduxIntegration,\n code: ['ReduxIntegration.jsx'],\n },\n};\n\nfunction App() {\n const current = useHash() || 'real';\n\n const renderExample = () => {\n const item = examples[current];\n if (!item || !item.component) {\n return Error: example \"{current}\" not found.;\n }\n const Comp = item.component;\n return (\n <>\n

    \n {item.name}\n

    {item.description}

    \n

    \n \n \n );\n };\n const example = examples[current] || {};\n const ele = (\n
    \n
    \n

    \n @ebay/nice-modal-react\n Examples\n

    \n
    \n \n
    \n
    \n \n \n \n
    \n \n \"api\n \n
    \n \n \n \n
    \n
    \n
    \n
    {renderExample()}
    \n
    \n {example.code?.map((f) => (\n \n ))}\n
    \n
    \n
    \n );\n\n if (current === 'redux') return ele;\n else return {ele};\n}\n\nexport default App;\n","import { useMemo, useCallback, useState } from 'react';\nimport { Button, Table } from 'antd';\nimport { EditOutlined } from '@ant-design/icons';\nimport { useModal } from '@ebay/nice-modal-react';\nimport UserInfoModal from './UserInfoModal';\nimport mockData from './mock';\n\nexport default function UserList() {\n const userModal = useModal(UserInfoModal);\n const [users, setUsers] = useState(mockData);\n\n const handleNewUser = useCallback(() => {\n userModal.show().then((newUser) => {\n setUsers([newUser, ...users]);\n });\n }, [userModal, users]);\n\n const handleEditUser = useCallback(\n (user) => {\n userModal.show({ user }).then((newUser) => {\n setUsers((users) => {\n // Modify users immutablly\n const i = users.findIndex((u) => u.id === newUser.id);\n const updated = { ...users[i], ...newUser };\n const arr = [...users];\n arr.splice(i, 1, updated);\n return arr;\n });\n });\n },\n [userModal],\n );\n\n const columns = useMemo(\n () => [\n {\n title: 'Name',\n dataIndex: 'name',\n width: '150px',\n },\n {\n title: 'Job Title',\n dataIndex: 'job',\n },\n {\n title: 'Edit',\n width: '100px',\n render(value, user) {\n return (\n }\n onClick={() => {\n handleEditUser(user);\n }}\n />\n );\n },\n },\n ],\n [handleEditUser],\n );\n\n return (\n
    \n \n \n
    \n );\n}\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'antd/dist/antd.css';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""} \ No newline at end of file diff --git a/docs/static/js/main.6de8500e.chunk.js b/docs/static/js/main.6de8500e.chunk.js new file mode 100644 index 0000000..71f5dcf --- /dev/null +++ b/docs/static/js/main.6de8500e.chunk.js @@ -0,0 +1,2 @@ +(this.webpackJsonpexample=this.webpackJsonpexample||[]).push([[0],{226:function(e,n,t){},337:function(e,n,t){},341:function(e,n,t){"use strict";t.r(n);var o=t(0),r=t.n(o),a=t(21),i=t.n(a),l=(t(226),function(){return l=Object.assign||function(e){for(var n,t=1,o=arguments.length;t {\n const modal = useModal();\n return (\n \n Greetings: {id},{name}!\n \n );\n});\n\nconst MyAntdDrawer = NiceModal.create(({ name, id }: { name: string; id: string }) => {\n const modal = useModal();\n return (\n {\n if (!visible) modal.remove();\n }}\n >\n Greetings:{id} {name}!\n \n );\n});\n\nexport default function AntdSample() {\n const modal = useModal(MyAntdModal);\n return (\n \n \n NiceModal.show(MyAntdDrawer, { id: 'test2', name: 'Bood' })}\n >\n Show Drawer\n \n \n );\n}\n","UserInfoModal.jsx":"import { useCallback } from 'react';\nimport { Form, Modal } from 'antd';\nimport FormBuilder from 'antd-form-builder';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nexport default NiceModal.create(({ user }) => {\n const modal = useModal();\n const [form] = Form.useForm();\n const meta = {\n initialValues: user,\n fields: [\n { key: 'name', label: 'Name', required: true },\n { key: 'job', label: 'Job Title', required: true },\n ],\n };\n\n const handleSubmit = useCallback(() => {\n form.validateFields().then(() => {\n const newUser = { ...form.getFieldsValue() };\n // In real case, you may call API to create user or update user\n if (!user) {\n newUser.id = String(Date.now());\n } else {\n newUser.id = user.id;\n }\n modal.resolve(newUser);\n modal.hide();\n });\n }, [modal, user, form]);\n return (\n \n
    \n \n \n \n );\n});\n","UserList.jsx":"import { useMemo, useCallback, useState } from 'react';\nimport { Button, Table } from 'antd';\nimport { EditOutlined } from '@ant-design/icons';\nimport { useModal } from '@ebay/nice-modal-react';\nimport UserInfoModal from './UserInfoModal';\nimport mockData from './mock';\n\nexport default function UserList() {\n const userModal = useModal(UserInfoModal);\n const [users, setUsers] = useState(mockData);\n\n const handleNewUser = useCallback(() => {\n userModal.show().then((newUser) => {\n setUsers([newUser, ...users]);\n });\n }, [userModal, users]);\n\n const handleEditUser = useCallback(\n (user) => {\n userModal.show({ user }).then((newUser) => {\n setUsers((users) => {\n // Modify users immutablly\n const i = users.findIndex((u) => u.id === newUser.id);\n const updated = { ...users[i], ...newUser };\n const arr = [...users];\n arr.splice(i, 1, updated);\n return arr;\n });\n });\n },\n [userModal],\n );\n\n const columns = useMemo(\n () => [\n {\n title: 'Name',\n dataIndex: 'name',\n width: '150px',\n },\n {\n title: 'Job Title',\n dataIndex: 'job',\n },\n {\n title: 'Edit',\n width: '100px',\n render(value, user) {\n return (\n }\n onClick={() => {\n handleEditUser(user);\n }}\n />\n );\n },\n },\n ],\n [handleEditUser],\n );\n\n return (\n
    \n \n \n
    \n );\n}\n","PromiseSample.jsx":"import { Modal, Button, Space } from 'antd';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nconst PromiseModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n const handleResolve = () => {\n modal.resolve({ resolved: true });\n };\n const handleReject = () => {\n modal.reject(new Error('Rejected'));\n modal.hide();\n };\n return (\n \n

    Choose the promise action: {name}

    \n \n \n \n \n     \n );\n});\n\nconst ChainingModal = NiceModal.create(({ times }) => {\n const modal = useModal();\n return (\n \n \n
    \n
    \n Showed {times}/3 times.\n     \n );\n});\n\nexport default function PromiseSample() {\n const chainingModal = useModal(ChainingModal);\n const showPromiseModal = () => {\n NiceModal.show(PromiseModal, { name: 'nate' })\n .then((res) => {\n console.log('Resolved: ', res);\n NiceModal.show(PromiseModal, { name: 'nate2' });\n })\n .catch((err) => {\n console.log('Rejected: ', err);\n });\n };\n const showChainingModal = async () => {\n for (let i = 0; i < 3; i++) {\n await chainingModal.show({ times: i + 1 });\n await chainingModal.hide();\n }\n };\n\n return (\n <>\n

    NOTE: please open dev console to see the output.

    \n \n \n\n \n \n \n );\n}\n","MyMuiDialog.tsx":"import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Slide from '@material-ui/core/Slide';\nimport { TransitionProps } from '@material-ui/core/transitions';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nconst Transition = React.forwardRef(function Transition(\n props: TransitionProps & { children?: React.ReactElement },\n ref: React.Ref,\n) {\n return ;\n});\n\nconst MyMuiDialog = NiceModal.create(() => {\n const modal = useModal();\n return (\n modal.hide()}\n TransitionProps={{\n onExited: () => modal.remove(),\n }}\n >\n {\"Use Google's location service?\"}\n \n \n Let Google help apps determine location. This means sending anonymous location data to Google, even when no\n apps are running.\n \n \n \n \n \n \n \n );\n});\n\nexport default function MuiDialogSample() {\n return (\n \n );\n}\n","MyBootstrapDialog.tsx":"import BootstrapModal from 'react-bootstrap/Modal';\nimport Button from 'react-bootstrap/Button';\nimport NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';\n\nconst MyBootstrapDialog = NiceModal.create(({ name = 'Bootstrap' }: { name: string }) => {\n const modal = useModal();\n return (\n \n \n Modal title\n \n\n \n

    Modal body text goes here. {name}

    \n     \n\n \n \n \n \n     \n );\n});\nexport default function BootstrapSample() {\n return (\n <>\n \n \n );\n}\n","ReduxIntegration.jsx":"import { createStore, applyMiddleware, compose, combineReducers } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport NiceModal from '@ebay/nice-modal-react';\nimport { Button } from 'antd';\nimport { MyAntdModal } from './MyAntdModal';\nimport logger from 'redux-logger';\n\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\nconst enhancer = composeEnhancers(applyMiddleware(logger));\n\nconst store = createStore(\n combineReducers({\n __nice_modals: NiceModal.reducer,\n // other reducers...\n }),\n enhancer,\n);\n\nconst ModalsProvider = ({ children }) => {\n const modals = useSelector((s) => s.__nice_modals);\n const dispatch = useDispatch();\n return (\n \n

    NOTE: open dev console or Redux dev tools to see actions log.

    \n {\n NiceModal.show(MyAntdModal, { name: 'Redux' });\n }}\n >\n Show Modal\n \n     \n );\n};\n\nexport default function ReduxIntegration({ children }) {\n return (\n \n {children}\n \n );\n}\n","Declarative.jsx":"import { Modal, Button } from 'antd';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n return (\n \n Greetings: {name}!\n \n );\n});\n\nexport default function AntdSample() {\n return (\n <>\n \n \n \n );\n}\n","PropsBinding.jsx":"import { useEffect, useState } from 'react';\nimport { Modal, Button } from 'antd';\nimport NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ time }) => {\n const modal = useModal();\n return (\n \n Time: {time}\n \n );\n});\n\nexport default function Example() {\n const [time, setTime] = useState(0);\n useEffect(() => {\n const p = setInterval(() => setTime((t) => t + 1), 1000);\n return () => clearInterval(p);\n }, []);\n\n // modalHandler will be assign show/hide method.\n const modalHandler = {};\n\n return (\n <>\n \n \n \n );\n}\n"};function H(e){var n=e.filename;return Object(o.useEffect)((function(){window.Prism.highlightAll()}),[n]),Object(A.jsxs)("div",{className:"code-viewer",children:[Object(A.jsx)("h5",{children:n}),Object(A.jsx)("pre",{children:Object(A.jsx)("code",{className:"language-jsx line-numbers",children:_[n]||'// Error: code of "'.concat(n,'" not found')})})]})}var F=t(34),L=t(178),G=t(37),V=t(374),J=t(375),q=t(376),K=t(379),X=t(208),z=T.create((function(e){var n=e.user,t=C(),r=q.a.useForm(),a=Object(R.a)(r,1)[0],i={initialValues:n,fields:[{key:"name",label:"Name",required:!0},{key:"job",label:"Job Title",required:!0}]},l=Object(o.useCallback)((function(){a.validateFields().then((function(){var e=Object(F.a)({},a.getFieldsValue());e.id=n?n.id:String(Date.now()),t.resolve(e),t.hide()}))}),[t,n,a]);return Object(A.jsx)(K.a,Object(F.a)(Object(F.a)({},E(t)),{},{title:n?"Edit User":"New User",okText:n?"Update":"Create",onOk:l,children:Object(A.jsx)(q.a,{form:a,children:Object(A.jsx)(X.a,{meta:i,form:a})})}))})),Q=[{id:"1",name:"Kennedy",job:"Chief Mobility Orchestrator",city:"North Alec"},{id:"2",name:"Lucius",job:"Internal Research Manager",city:"Littleland"},{id:"3",name:"Carlos",job:"Lead Configuration Analyst",city:"South Lillian"},{id:"4",name:"Urban",job:"Chief Operations Agent",city:"Shieldshaven"},{id:"5",name:"Katrine",job:"Legacy Solutions Orchestrator",city:"South Kyleigh"}];t(337);var W=t(177),Y=t.n(W),Z=t(206),$=t(381),ee=T.create((function(e){var n=e.name,t=C();return Object(A.jsxs)(K.a,Object(F.a)(Object(F.a)({title:"Promise Example"},E(t)),{},{children:[Object(A.jsxs)("p",{children:["Choose the promise action: ",n]}),Object(A.jsxs)($.b,{children:[Object(A.jsx)(G.a,{onClick:function(){t.resolve({resolved:!0})},children:"Resolve"}),Object(A.jsx)(G.a,{onClick:function(){t.reject(new Error("Rejected")),t.hide()},danger:!0,children:"Reject"})]})]}))})),ne=T.create((function(e){var n=e.times,t=C();return Object(A.jsxs)(K.a,Object(F.a)(Object(F.a)({title:"Chaining Same Modal Example"},E(t)),{},{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return t.resolve()},children:"Hide with resolve."}),Object(A.jsx)("br",{}),Object(A.jsx)("br",{}),"Showed ",n,"/3 times."]}))}));var te=T.create((function(e){var n=e.name,t=C();return Object(A.jsxs)(K.a,{title:"Hello Antd",visible:t.visible,onOk:t.hide,onCancel:t.hide,afterClose:t.remove,children:["Greetings: ",n,"!"]})}));var oe=t(378),re=t(377),ae=t(373),ie=t(371),le=t(372),ce=t(370),de=t(382),se=r.a.forwardRef((function(e,n){return Object(A.jsx)(de.a,Object(F.a)({direction:"up",ref:n},e))})),ue=T.create((function(){var e=C();return Object(A.jsxs)(re.a,{TransitionComponent:se,open:e.visible,onClose:function(){return e.hide()},TransitionProps:{onExited:function(){return e.remove()}},children:[Object(A.jsx)(ce.a,{id:"alert-dialog-slide-title",children:"Use Google's location service?"}),Object(A.jsx)(ie.a,{children:Object(A.jsx)(le.a,{id:"alert-dialog-slide-description",children:"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."})}),Object(A.jsxs)(ae.a,{children:[Object(A.jsx)(oe.a,{onClick:function(){return e.hide()},color:"primary",children:"Disagree"}),Object(A.jsx)(oe.a,{onClick:function(){return e.hide()},color:"primary",children:"Agree"})]})]})}));var me=t(380),pe=T.create((function(e){var n=e.id,t=e.name,o=C();return Object(A.jsxs)(K.a,{title:"Hello Antd",visible:o.visible,onOk:o.hide,onCancel:o.hide,afterClose:o.remove,children:["Greetings: ",n,",",t,"!"]})})),he=T.create((function(e){var n=e.name,t=e.id,o=C();return Object(A.jsxs)(me.a,{title:"Hello Antd",visible:o.visible,onClose:o.hide,afterVisibleChange:function(e){e||o.remove()},children:["Greetings:",t," ",n,"!"]})}));var fe=t(98),be=t(157),je=T.create((function(e){var n=e.name,t=void 0===n?"Bootstrap":n,o=C();return Object(A.jsxs)(fe.a,Object(F.a)(Object(F.a)({},P(o)),{},{title:"Nice Modal",children:[Object(A.jsx)(fe.a.Header,{closeButton:!0,children:Object(A.jsx)(fe.a.Title,{children:"Modal title"})}),Object(A.jsx)(fe.a.Body,{children:Object(A.jsxs)("p",{children:["Modal body text goes here. ",t]})}),Object(A.jsxs)(fe.a.Footer,{children:[Object(A.jsx)(be.a,{variant:"secondary",onClick:o.hide,children:"Close"}),Object(A.jsx)(be.a,{variant:"primary",onClick:o.hide,children:"Save changes"})]})]}))}));var ve=t(112),Me=t(156),xe=t(207),Oe=t.n(xe),ge=("undefined"!==typeof window&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||ve.c)(Object(ve.a)(Oe.a)),ye=Object(ve.d)(Object(ve.b)({__nice_modals:T.reducer}),ge),we=function(e){e.children;var n=Object(Me.c)((function(e){return e.__nice_modals})),t=Object(Me.b)();return Object(A.jsxs)(T.Provider,{modals:n,dispatch:t,children:[Object(A.jsx)("p",{style:{color:"#999"},children:"NOTE: open dev console or Redux dev tools to see actions log."}),Object(A.jsx)(G.a,{type:"primary",onClick:function(){T.show(pe,{name:"Redux"})},children:"Show Modal"})]})};var Ce=T.create((function(e){var n=e.time,t=C();return Object(A.jsxs)(K.a,{title:"Props Binding",visible:t.visible,onOk:t.hide,onCancel:t.hide,afterClose:t.remove,children:["Time: ",n]})}));var ke={real:{name:"Real Case",component:function(){var e=C(z),n=Object(o.useState)(Q),t=Object(R.a)(n,2),r=t[0],a=t[1],i=Object(o.useCallback)((function(){e.show().then((function(e){a([e].concat(Object(L.a)(r)))}))}),[e,r]),l=Object(o.useCallback)((function(n){e.show({user:n}).then((function(e){a((function(n){var t=n.findIndex((function(n){return n.id===e.id})),o=Object(F.a)(Object(F.a)({},n[t]),e),r=Object(L.a)(n);return r.splice(t,1,o),r}))}))}),[e]),c=Object(o.useMemo)((function(){return[{title:"Name",dataIndex:"name",width:"150px"},{title:"Job Title",dataIndex:"job"},{title:"Edit",width:"100px",render:function(e,n){return Object(A.jsx)(G.a,{type:"link",icon:Object(A.jsx)(J.a,{}),onClick:function(){l(n)}})}}]}),[l]);return Object(A.jsxs)("div",{children:[Object(A.jsx)(G.a,{type:"primary",onClick:i,children:"+ New User"}),Object(A.jsx)(V.a,{size:"small",rowKey:"id",pagination:!1,columns:c,dataSource:r,style:{marginTop:"20px"}})]})},description:"Show a dialog to create a new user or edit user info.",code:["UserList.jsx","UserInfoModal.jsx"]},mui:{name:"Material UI",description:"Show material UI dialog",component:function(){return Object(A.jsx)(oe.a,{variant:"contained",onClick:function(){return T.show(ue)},color:"primary",children:"Agree"})},code:["MyMuiDialog.tsx"]},antd:{name:"Ant Design",description:"Show/hide antd modal or drawer.",component:function(){var e=C(pe);return Object(A.jsxs)($.b,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return e.show({id:"test",name:"Nate"})},children:"Show Modal"}),Object(A.jsx)(G.a,{type:"primary",onClick:function(){return T.show(he,{id:"test2",name:"Bood"})},children:"Show Drawer"})]})},code:["MyAntdModal.tsx"]},bootstrap:{name:"Bootstrap React",descript:"Show/hide bootstrap dialog.",component:function(){return Object(A.jsx)(A.Fragment,{children:Object(A.jsx)(be.a,{variant:"primary",onClick:function(){return T.show(je,{name:"Bootstrap"})},children:"Show Dialog"})})},code:["MyBootstrapDialog.tsx"]},promise:{name:"Promise",description:"Use promise to interact with the dialog.",component:function(){var e=C(ne),n=function(){var n=Object(Z.a)(Y.a.mark((function n(){var t;return Y.a.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:t=0;case 1:if(!(t<3)){n.next=9;break}return n.next=4,e.show({times:t+1});case 4:return n.next=6,e.hide();case 6:t++,n.next=1;break;case 9:case"end":return n.stop()}}),n)})));return function(){return n.apply(this,arguments)}}();return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsx)("p",{style:{color:"#888"},children:"NOTE: please open dev console to see the output."}),Object(A.jsxs)($.b,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){T.show(ee,{name:"nate"}).then((function(e){console.log("Resolved: ",e),T.show(ee,{name:"nate2"})})).catch((function(e){console.log("Rejected: ",e)}))},children:"Show Modal"}),Object(A.jsx)(G.a,{type:"primary",onClick:n,children:"Chaining Same Modal"})]})]})},code:["PromiseSample.jsx"]},declarative:{name:"Declarative",description:"Declarative way to register a modal with id.",component:function(){return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return T.show("my-antd-modal",{name:"Nate"})},children:"Show Modal"}),Object(A.jsx)(te,{id:"my-antd-modal"})]})},code:["Declarative.jsx"]},propsBinding:{name:"Props Binding",description:"To bind props to modal, you can also use besides declarative way. This approach doesn't need a uniq modal id.",component:function(){var e=Object(o.useState)(0),n=Object(R.a)(e,2),t=n[0],r=n[1];Object(o.useEffect)((function(){var e=setInterval((function(){return r((function(e){return e+1}))}),1e3);return function(){return clearInterval(e)}}),[]);var a={};return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsx)(G.a,{type:"primary",onClick:function(){return a.show()},children:"Show Modal"}),Object(A.jsx)(N,{modal:Ce,handler:a,time:t})]})},code:["PropsBinding.jsx"]},redux:{name:"Redux Integration",description:"Use Redux to manage modals state so that you can use Redux dev tools to debug nice modals.",component:function(e){var n=e.children;return Object(A.jsx)(Me.a,{store:ye,children:Object(A.jsx)(we,{children:n})})},code:["ReduxIntegration.jsx"]}};var Be=function(){var e,n=I()||"real",t=ke[n]||{},o=Object(A.jsxs)("div",{className:"app",children:[Object(A.jsxs)("div",{className:"sider",children:[Object(A.jsxs)("h1",{children:[Object(A.jsx)("span",{className:"header-name",children:"@ebay/nice-modal-react"}),Object(A.jsx)("span",{className:"example-title",children:"Examples"})]}),Object(A.jsx)("div",{className:"scroll-container",children:Object(A.jsx)("ul",{children:Object.keys(ke).map((function(e){return Object(A.jsx)("li",{children:Object(A.jsx)("a",{href:"#".concat(e),className:n===e?"active":"",children:ke[e].name})},e)}))})}),Object(A.jsxs)("div",{className:"social",children:[Object(A.jsx)("a",{href:"https://github.com/ebay/nice-modal-react",children:Object(A.jsx)("img",{src:"https://img.shields.io/github/stars/eBay/nice-modal-react?style=social",alt:"Github Repo"})}),Object(A.jsx)("br",{}),Object(A.jsx)("a",{href:"https://ebay.github.io/nice-modal-react/api",children:Object(A.jsx)("img",{src:"https://img.shields.io/badge/API-Reference-green",alt:"api reference"})}),Object(A.jsx)("br",{}),Object(A.jsx)("a",{href:"https://codesandbox.io/s/github/ebay/nice-modal-react/tree/main/example",children:Object(A.jsx)("img",{width:"150px",src:"https://codesandbox.io/static/img/play-codesandbox.svg",alt:"codesandbox"})})]})]}),Object(A.jsxs)("div",{children:[Object(A.jsx)("div",{className:"example-container",children:function(){var e=ke[n];if(!e||!e.component)return Object(A.jsxs)("span",{style:{color:"red"},children:['Error: example "',n,'" not found.']});var t=e.component;return Object(A.jsxs)(A.Fragment,{children:[Object(A.jsxs)("h1",{children:[e.name,Object(A.jsx)("p",{className:"example-description",children:e.description})]}),Object(A.jsx)(t,{})]})}()}),Object(A.jsx)("div",{className:"code-container",children:null===(e=t.code)||void 0===e?void 0:e.map((function(e){return Object(A.jsx)(H,{filename:e},e)}))})]})]});return"redux"===n?o:Object(A.jsx)(T.Provider,{children:o})},Se=function(e){e&&e instanceof Function&&t.e(3).then(t.bind(null,383)).then((function(n){var t=n.getCLS,o=n.getFID,r=n.getFCP,a=n.getLCP,i=n.getTTFB;t(e),o(e),r(e),a(e),i(e)}))};t(339),t(340);i.a.render(Object(A.jsx)(Be,{}),document.getElementById("root")),Se()}},[[341,1,2]]]); +//# sourceMappingURL=main.6de8500e.chunk.js.map \ No newline at end of file diff --git a/docs/static/js/main.6de8500e.chunk.js.map b/docs/static/js/main.6de8500e.chunk.js.map new file mode 100644 index 0000000..74ca41c --- /dev/null +++ b/docs/static/js/main.6de8500e.chunk.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/index.tsx","useHash.js","CodeViewer.jsx","webpack:///./src/MyAntdModal.tsx?80f2","webpack:///./src/UserInfoModal.jsx?3e7a","webpack:///./src/UserList.jsx?90fc","webpack:///./src/PromiseSample.jsx?a91c","webpack:///./src/MyMuiDialog.tsx?55e3","webpack:///./src/MyBootstrapDialog.tsx?9fa1","webpack:///./src/ReduxIntegration.jsx?f440","webpack:///./src/Declarative.jsx?88cb","webpack:///./src/PropsBinding.jsx?ac2d","UserInfoModal.jsx","mock.js","PromiseSample.jsx","Declarative.jsx","MyMuiDialog.tsx","MyAntdModal.tsx","MyBootstrapDialog.tsx","ReduxIntegration.jsx","PropsBinding.jsx","App.jsx","UserList.jsx","reportWebVitals.ts","index.tsx"],"names":["modal","getHash","document","location","hash","replace","useHash","useState","setHash","useEffect","handleHashChange","window","scrollTo","top","addEventListener","removeEventListener","codeMap","CodeViewer","filename","Prism","highlightAll","className","NiceModal","create","user","useModal","Form","useForm","form","meta","initialValues","fields","key","label","required","handleSubmit","useCallback","validateFields","then","newUser","getFieldsValue","id","String","Date","now","resolve","hide","antdModal","title","okText","onOk","data","name","job","city","PromiseModal","onClick","resolved","reject","Error","danger","ChainingModal","times","type","MyAntdModal","visible","onCancel","afterClose","remove","Transition","React","forwardRef","props","ref","Slide","direction","MyMuiDialog","Dialog","TransitionComponent","open","onClose","TransitionProps","onExited","DialogTitle","DialogContent","DialogContentText","DialogActions","Button","color","MyAntdDrawer","afterVisibleChange","MyBootstrapDialog","bootstrapDialog","Header","closeButton","Title","Body","Footer","variant","enhancer","__REDUX_DEVTOOLS_EXTENSION_COMPOSE__","compose","applyMiddleware","logger","store","createStore","combineReducers","__nice_modals","reducer","ModalsProvider","children","modals","useSelector","s","dispatch","useDispatch","Provider","style","show","time","examples","real","component","userModal","UserInfoModal","mockData","users","setUsers","handleNewUser","handleEditUser","i","findIndex","u","updated","arr","splice","columns","useMemo","dataIndex","width","render","value","icon","EditOutlined","size","rowKey","pagination","dataSource","marginTop","description","code","mui","antd","bootstrap","descript","promise","chainingModal","showChainingModal","a","res","console","log","catch","err","declarative","propsBinding","setTime","p","setInterval","t","clearInterval","modalHandler","handler","redux","App","current","example","ele","Object","keys","map","href","src","alt","item","Comp","renderExample","f","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","getElementById"],"mappings":"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","file":"static/js/main.6de8500e.chunk.js","sourcesContent":["/* *********************************************************\n * Copyright 2021 eBay Inc.\n\n * Use of this source code is governed by an MIT-style\n * license that can be found in the LICENSE file or at\n * https://opensource.org/licenses/MIT.\n*********************************************************** */\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @module NiceModal\n * */\nimport React, { useEffect, useCallback, useContext, useReducer, useMemo } from 'react';\nvar symModalId = Symbol('NiceModalId');\nvar initialState = {};\nexport var NiceModalContext = React.createContext(initialState);\nvar NiceModalIdContext = React.createContext(null);\nvar MODAL_REGISTRY = {};\nvar ALREADY_MOUNTED = {};\nvar uidSeed = 0;\nvar dispatch = function () {\n throw new Error('No dispatch method detected, did you embed your app with NiceModal.Provider?');\n};\nvar getUid = function () { return \"_nice_modal_\" + uidSeed++; };\n// Modal reducer used in useReducer hook.\nexport var reducer = function (state, action) {\n var _a, _b, _c;\n if (state === void 0) { state = initialState; }\n switch (action.type) {\n case 'nice-modal/show': {\n var _d = action.payload, modalId = _d.modalId, args = _d.args;\n return __assign(__assign({}, state), (_a = {}, _a[modalId] = __assign(__assign({}, state[modalId]), { id: modalId, args: args, \n // If modal is not mounted, mount it first then make it visible.\n // There is logic inside HOC wrapper to make it visible after its first mount.\n // This mechanism ensures the entering transition.\n visible: !!ALREADY_MOUNTED[modalId], delayVisible: !ALREADY_MOUNTED[modalId] }), _a));\n }\n case 'nice-modal/hide': {\n var modalId = action.payload.modalId;\n if (!state[modalId])\n return state;\n return __assign(__assign({}, state), (_b = {}, _b[modalId] = __assign(__assign({}, state[modalId]), { visible: false }), _b));\n }\n case 'nice-modal/remove': {\n var modalId = action.payload.modalId;\n var newState = __assign({}, state);\n delete newState[modalId];\n return newState;\n }\n case 'nice-modal/set-flags': {\n var _e = action.payload, modalId = _e.modalId, flags = _e.flags;\n return __assign(__assign({}, state), (_c = {}, _c[modalId] = __assign(__assign({}, state[modalId]), flags), _c));\n }\n default:\n return state;\n }\n};\n// Get modal component by modal id\nfunction getModal(modalId) {\n var _a;\n return (_a = MODAL_REGISTRY[modalId]) === null || _a === void 0 ? void 0 : _a.comp;\n}\n// action creator to show a modal\nfunction showModal(modalId, args) {\n return {\n type: 'nice-modal/show',\n payload: {\n modalId: modalId,\n args: args,\n },\n };\n}\n// action creator to set flags of a modal\nfunction setModalFlags(modalId, flags) {\n return {\n type: 'nice-modal/set-flags',\n payload: {\n modalId: modalId,\n flags: flags,\n },\n };\n}\n// action creator to hide a modal\nfunction hideModal(modalId) {\n return {\n type: 'nice-modal/hide',\n payload: {\n modalId: modalId,\n },\n };\n}\n// action creator to remove a modal\nfunction removeModal(modalId) {\n return {\n type: 'nice-modal/remove',\n payload: {\n modalId: modalId,\n },\n };\n}\nvar modalCallbacks = {};\nvar hideModalCallbacks = {};\nvar getModalId = function (modal) {\n if (typeof modal === 'string')\n return modal;\n if (!modal[symModalId]) {\n modal[symModalId] = getUid();\n }\n return modal[symModalId];\n};\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function show(modal, args) {\n var modalId = getModalId(modal);\n if (typeof modal !== 'string' && !MODAL_REGISTRY[modalId]) {\n register(modalId, modal);\n }\n dispatch(showModal(modalId, args));\n if (!modalCallbacks[modalId]) {\n // `!` tell ts that theResolve will be written before it is used\n var theResolve_1;\n // `!` tell ts that theResolve will be written before it is used\n var theReject_1;\n var promise = new Promise(function (resolve, reject) {\n theResolve_1 = resolve;\n theReject_1 = reject;\n });\n modalCallbacks[modalId] = {\n resolve: theResolve_1,\n reject: theReject_1,\n promise: promise,\n };\n }\n return modalCallbacks[modalId].promise;\n}\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function hide(modal) {\n var modalId = getModalId(modal);\n dispatch(hideModal(modalId));\n // Should also delete the callback for modal.resolve #35\n delete modalCallbacks[modalId];\n if (!hideModalCallbacks[modalId]) {\n // `!` tell ts that theResolve will be written before it is used\n var theResolve_2;\n // `!` tell ts that theResolve will be written before it is used\n var theReject_2;\n var promise = new Promise(function (resolve, reject) {\n theResolve_2 = resolve;\n theReject_2 = reject;\n });\n hideModalCallbacks[modalId] = {\n resolve: theResolve_2,\n reject: theReject_2,\n promise: promise,\n };\n }\n return hideModalCallbacks[modalId].promise;\n}\nexport var remove = function (modal) {\n var modalId = getModalId(modal);\n dispatch(removeModal(modalId));\n delete modalCallbacks[modalId];\n delete hideModalCallbacks[modalId];\n};\nvar setFlags = function (modalId, flags) {\n dispatch(setModalFlags(modalId, flags));\n};\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function useModal(modal, args) {\n var modals = useContext(NiceModalContext);\n var contextModalId = useContext(NiceModalIdContext);\n var modalId = null;\n var isUseComponent = modal && typeof modal !== 'string';\n if (!modal) {\n modalId = contextModalId;\n }\n else {\n modalId = getModalId(modal);\n }\n // Only if contextModalId doesn't exist\n if (!modalId)\n throw new Error('No modal id found in NiceModal.useModal.');\n var mid = modalId;\n // If use a component directly, register it.\n useEffect(function () {\n if (isUseComponent && !MODAL_REGISTRY[mid]) {\n register(mid, modal, args);\n }\n }, [isUseComponent, mid, modal, args]);\n var modalInfo = modals[mid];\n var showCallback = useCallback(function (args) { return show(mid, args); }, [mid]);\n var hideCallback = useCallback(function () { return hide(mid); }, [mid]);\n var removeCallback = useCallback(function () { return remove(mid); }, [mid]);\n var resolveCallback = useCallback(function (args) {\n var _a;\n (_a = modalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.resolve(args);\n delete modalCallbacks[mid];\n }, [mid]);\n var rejectCallback = useCallback(function (args) {\n var _a;\n (_a = modalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.reject(args);\n delete modalCallbacks[mid];\n }, [mid]);\n var resolveHide = useCallback(function (args) {\n var _a;\n (_a = hideModalCallbacks[mid]) === null || _a === void 0 ? void 0 : _a.resolve(args);\n delete hideModalCallbacks[mid];\n }, [mid]);\n return useMemo(function () { return ({\n id: mid,\n args: modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,\n visible: !!(modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible),\n keepMounted: !!(modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted),\n show: showCallback,\n hide: hideCallback,\n remove: removeCallback,\n resolve: resolveCallback,\n reject: rejectCallback,\n resolveHide: resolveHide,\n }); }, [\n mid,\n modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.args,\n modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.visible,\n modalInfo === null || modalInfo === void 0 ? void 0 : modalInfo.keepMounted,\n showCallback,\n hideCallback,\n removeCallback,\n resolveCallback,\n rejectCallback,\n resolveHide,\n ]);\n}\nexport var create = function (Comp) {\n return function (_a) {\n var _b;\n var defaultVisible = _a.defaultVisible, keepMounted = _a.keepMounted, id = _a.id, props = __rest(_a, [\"defaultVisible\", \"keepMounted\", \"id\"]);\n var _c = useModal(id), args = _c.args, show = _c.show;\n // If there's modal state, then should mount it.\n var modals = useContext(NiceModalContext);\n var shouldMount = !!modals[id];\n useEffect(function () {\n // If defaultVisible, show it after mounted.\n if (defaultVisible) {\n show();\n }\n ALREADY_MOUNTED[id] = true;\n return function () {\n delete ALREADY_MOUNTED[id];\n };\n }, [id, show, defaultVisible]);\n useEffect(function () {\n if (keepMounted)\n setFlags(id, { keepMounted: true });\n }, [id, keepMounted]);\n var delayVisible = (_b = modals[id]) === null || _b === void 0 ? void 0 : _b.delayVisible;\n // If modal.show is called\n // 1. If modal was mounted, should make it visible directly\n // 2. If modal has not been mounted, should mount it first, then make it visible\n useEffect(function () {\n if (delayVisible) {\n // delayVisible: false => true, it means the modal.show() is called, should show it.\n show(args);\n }\n }, [delayVisible, args, show]);\n if (!shouldMount)\n return null;\n return (React.createElement(NiceModalIdContext.Provider, { value: id },\n React.createElement(Comp, __assign({}, props, args))));\n };\n};\n// All registered modals will be rendered in modal placeholder\nexport var register = function (id, comp, props) {\n if (!MODAL_REGISTRY[id]) {\n MODAL_REGISTRY[id] = { comp: comp, props: props };\n }\n else {\n MODAL_REGISTRY[id].props = props;\n }\n};\n/**\n * Unregister a modal.\n * @param id - The id of the modal.\n */\nexport var unregister = function (id) {\n delete MODAL_REGISTRY[id];\n};\n// The placeholder component is used to auto render modals when call modal.show()\n// When modal.show() is called, it means there've been modal info\nvar NiceModalPlaceholder = function () {\n var modals = useContext(NiceModalContext);\n var visibleModalIds = Object.keys(modals).filter(function (id) { return !!modals[id]; });\n visibleModalIds.forEach(function (id) {\n if (!MODAL_REGISTRY[id] && !ALREADY_MOUNTED[id]) {\n console.warn(\"No modal found for id: \" + id + \". Please check the id or if it is registered or declared via JSX.\");\n return;\n }\n });\n var toRender = visibleModalIds\n .filter(function (id) { return MODAL_REGISTRY[id]; })\n .map(function (id) { return (__assign({ id: id }, MODAL_REGISTRY[id])); });\n return (React.createElement(React.Fragment, null, toRender.map(function (t) { return (React.createElement(t.comp, __assign({ key: t.id, id: t.id }, t.props))); })));\n};\nvar InnerContextProvider = function (_a) {\n var children = _a.children;\n var arr = useReducer(reducer, initialState);\n var modals = arr[0];\n dispatch = arr[1];\n return (React.createElement(NiceModalContext.Provider, { value: modals },\n children,\n React.createElement(NiceModalPlaceholder, null)));\n};\nexport var Provider = function (_a) {\n var children = _a.children, givenDispatch = _a.dispatch, givenModals = _a.modals;\n if (!givenDispatch || !givenModals) {\n return React.createElement(InnerContextProvider, null, children);\n }\n dispatch = givenDispatch;\n return (React.createElement(NiceModalContext.Provider, { value: givenModals },\n children,\n React.createElement(NiceModalPlaceholder, null)));\n};\n/**\n * Declarative way to register a modal.\n * @param id - The id of the modal.\n * @param component - The modal Component.\n * @returns\n */\nexport var ModalDef = function (_a) {\n var id = _a.id, component = _a.component;\n useEffect(function () {\n register(id, component);\n return function () {\n unregister(id);\n };\n }, [id, component]);\n return null;\n};\n/**\n * A place holder allows to bind props to a modal.\n * It assigns show/hide methods to handler object to show/hide the modal.\n *\n * Comparing to use the directly, this approach allows use registered modal id to find the modal component.\n * Also it avoids to create unique id for MyNiceModal.\n *\n * @param modal - The modal id registered or a modal component.\n * @param handler - The handler object to control the modal.\n * @returns\n */\nexport var ModalHolder = function (_a) {\n var _b;\n var modal = _a.modal, _c = _a.handler, handler = _c === void 0 ? {} : _c, restProps = __rest(_a, [\"modal\", \"handler\"]);\n var mid = useMemo(function () { return getUid(); }, []);\n var ModalComp = typeof modal === 'string' ? (_b = MODAL_REGISTRY[modal]) === null || _b === void 0 ? void 0 : _b.comp : modal;\n if (!handler) {\n throw new Error('No handler found in NiceModal.ModalHolder.');\n }\n if (!ModalComp) {\n throw new Error(\"No modal found for id: \" + modal + \" in NiceModal.ModalHolder.\");\n }\n handler.show = useCallback(function (args) { return show(mid, args); }, [mid]);\n handler.hide = useCallback(function () { return hide(mid); }, [mid]);\n return React.createElement(ModalComp, __assign({ id: mid }, restProps));\n};\nexport var antdModal = function (modal) {\n return {\n visible: modal.visible,\n onOk: function () { return modal.hide(); },\n onCancel: function () { return modal.hide(); },\n afterClose: function () {\n // Need to resolve before remove\n modal.resolveHide();\n if (!modal.keepMounted)\n modal.remove();\n },\n };\n};\nexport var antdModalV5 = function (modal) {\n var _a = antdModal(modal), onOk = _a.onOk, onCancel = _a.onCancel, afterClose = _a.afterClose;\n return {\n open: modal.visible,\n onOk: onOk,\n onCancel: onCancel,\n afterClose: afterClose,\n };\n};\nexport var antdDrawer = function (modal) {\n return {\n visible: modal.visible,\n onClose: function () { return modal.hide(); },\n afterVisibleChange: function (v) {\n if (!v) {\n modal.resolveHide();\n }\n !v && !modal.keepMounted && modal.remove();\n },\n };\n};\nexport var antdDrawerV5 = function (modal) {\n var _a = antdDrawer(modal), onClose = _a.onClose, afterOpenChange = _a.afterVisibleChange;\n return {\n open: modal.visible,\n onClose: onClose,\n afterOpenChange: afterOpenChange,\n };\n};\nexport var muiDialog = function (modal) {\n return {\n open: modal.visible,\n onClose: function () { return modal.hide(); },\n onExited: function () {\n modal.resolveHide();\n !modal.keepMounted && modal.remove();\n },\n };\n};\nexport var muiDialogV5 = function (modal) {\n return {\n open: modal.visible,\n onClose: function () { return modal.hide(); },\n TransitionProps: {\n onExited: function () {\n modal.resolveHide();\n !modal.keepMounted && modal.remove();\n },\n },\n };\n};\nexport var bootstrapDialog = function (modal) {\n return {\n show: modal.visible,\n onHide: function () { return modal.hide(); },\n onExited: function () {\n modal.resolveHide();\n !modal.keepMounted && modal.remove();\n },\n };\n};\nvar NiceModal = {\n Provider: Provider,\n ModalDef: ModalDef,\n ModalHolder: ModalHolder,\n NiceModalContext: NiceModalContext,\n create: create,\n register: register,\n getModal: getModal,\n show: show,\n hide: hide,\n remove: remove,\n useModal: useModal,\n reducer: reducer,\n antdModal: antdModal,\n antdDrawer: antdDrawer,\n muiDialog: muiDialog,\n bootstrapDialog: bootstrapDialog,\n};\nexport default NiceModal;\n//# sourceMappingURL=index.js.map","import { useEffect, useState } from 'react';\n\nconst getHash = () => document.location.hash.replace('#', '');\n\nconst useHash = () => {\n const [hash, setHash] = useState(getHash());\n useEffect(() => {\n function handleHashChange() {\n const hash = getHash() || 'basic';\n setHash(hash);\n window.scrollTo({ top: 0 });\n }\n window.addEventListener('hashchange', handleHashChange);\n return () => {\n window.removeEventListener('hashchange', handleHashChange);\n };\n }, [setHash]);\n return hash;\n};\n\nexport default useHash;\n","/* eslint import/no-webpack-loader-syntax: off */\n\nimport React, { useEffect } from 'react';\nimport codeAntd from '!!raw-loader!./MyAntdModal.tsx';\nimport codeUserList from '!!raw-loader!./UserList.jsx';\nimport codeUserInfoModal from '!!raw-loader!./UserInfoModal.jsx';\nimport codePromiseSample from '!!raw-loader!./PromiseSample.jsx';\nimport codeMyMuiDialog from '!!raw-loader!./MyMuiDialog.tsx';\nimport codeMyBootstrapDialog from '!!raw-loader!./MyBootstrapDialog.tsx';\nimport codeReduxIntegration from '!!raw-loader!./ReduxIntegration.jsx';\nimport codeDeclarative from '!!raw-loader!./Declarative.jsx';\nimport codePropsBinding from '!!raw-loader!./PropsBinding.jsx';\n\nconst codeMap = {\n 'MyAntdModal.tsx': codeAntd,\n 'UserInfoModal.jsx': codeUserInfoModal,\n 'UserList.jsx': codeUserList,\n 'PromiseSample.jsx': codePromiseSample,\n 'MyMuiDialog.tsx': codeMyMuiDialog,\n 'MyBootstrapDialog.tsx': codeMyBootstrapDialog,\n 'ReduxIntegration.jsx': codeReduxIntegration,\n 'Declarative.jsx': codeDeclarative,\n 'PropsBinding.jsx': codePropsBinding,\n};\nexport default function CodeViewer({ filename }) {\n useEffect(() => {\n window.Prism.highlightAll();\n }, [filename]);\n return (\n
    \n
    {filename}
    \n 
    \n        \n          {codeMap[filename] || `// Error: code of \"${filename}\" not found`}\n        \n
    \n
    \n );\n}\n","export default \"import { Modal, Button, Drawer, Space } from 'antd';\\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\\n\\nexport const MyAntdModal = NiceModal.create(({ id, name }: { id: string; name: string }) => {\\n const modal = useModal();\\n return (\\n \\n Greetings: {id},{name}!\\n \\n );\\n});\\n\\nconst MyAntdDrawer = NiceModal.create(({ name, id }: { name: string; id: string }) => {\\n const modal = useModal();\\n return (\\n {\\n if (!visible) modal.remove();\\n }}\\n >\\n Greetings:{id} {name}!\\n \\n );\\n});\\n\\nexport default function AntdSample() {\\n const modal = useModal(MyAntdModal);\\n return (\\n \\n \\n NiceModal.show(MyAntdDrawer, { id: 'test2', name: 'Bood' })}\\n >\\n Show Drawer\\n \\n \\n );\\n}\\n\";","export default \"import { useCallback } from 'react';\\nimport { Form, Modal } from 'antd';\\nimport FormBuilder from 'antd-form-builder';\\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\\n\\nexport default NiceModal.create(({ user }) => {\\n const modal = useModal();\\n const [form] = Form.useForm();\\n const meta = {\\n initialValues: user,\\n fields: [\\n { key: 'name', label: 'Name', required: true },\\n { key: 'job', label: 'Job Title', required: true },\\n ],\\n };\\n\\n const handleSubmit = useCallback(() => {\\n form.validateFields().then(() => {\\n const newUser = { ...form.getFieldsValue() };\\n // In real case, you may call API to create user or update user\\n if (!user) {\\n newUser.id = String(Date.now());\\n } else {\\n newUser.id = user.id;\\n }\\n modal.resolve(newUser);\\n modal.hide();\\n });\\n }, [modal, user, form]);\\n return (\\n \\n
    \\n \\n \\n \\n );\\n});\\n\";","export default \"import { useMemo, useCallback, useState } from 'react';\\nimport { Button, Table } from 'antd';\\nimport { EditOutlined } from '@ant-design/icons';\\nimport { useModal } from '@ebay/nice-modal-react';\\nimport UserInfoModal from './UserInfoModal';\\nimport mockData from './mock';\\n\\nexport default function UserList() {\\n const userModal = useModal(UserInfoModal);\\n const [users, setUsers] = useState(mockData);\\n\\n const handleNewUser = useCallback(() => {\\n userModal.show().then((newUser) => {\\n setUsers([newUser, ...users]);\\n });\\n }, [userModal, users]);\\n\\n const handleEditUser = useCallback(\\n (user) => {\\n userModal.show({ user }).then((newUser) => {\\n setUsers((users) => {\\n // Modify users immutablly\\n const i = users.findIndex((u) => u.id === newUser.id);\\n const updated = { ...users[i], ...newUser };\\n const arr = [...users];\\n arr.splice(i, 1, updated);\\n return arr;\\n });\\n });\\n },\\n [userModal],\\n );\\n\\n const columns = useMemo(\\n () => [\\n {\\n title: 'Name',\\n dataIndex: 'name',\\n width: '150px',\\n },\\n {\\n title: 'Job Title',\\n dataIndex: 'job',\\n },\\n {\\n title: 'Edit',\\n width: '100px',\\n render(value, user) {\\n return (\\n }\\n onClick={() => {\\n handleEditUser(user);\\n }}\\n />\\n );\\n },\\n },\\n ],\\n [handleEditUser],\\n );\\n\\n return (\\n
    \\n \\n \\n
    \\n );\\n}\\n\";","export default \"import { Modal, Button, Space } from 'antd';\\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\\n\\nconst PromiseModal = NiceModal.create(({ name }) => {\\n const modal = useModal();\\n const handleResolve = () => {\\n modal.resolve({ resolved: true });\\n };\\n const handleReject = () => {\\n modal.reject(new Error('Rejected'));\\n modal.hide();\\n };\\n return (\\n \\n

    Choose the promise action: {name}

    \\n \\n \\n \\n \\n     \\n );\\n});\\n\\nconst ChainingModal = NiceModal.create(({ times }) => {\\n const modal = useModal();\\n return (\\n \\n \\n
    \\n
    \\n Showed {times}/3 times.\\n     \\n );\\n});\\n\\nexport default function PromiseSample() {\\n const chainingModal = useModal(ChainingModal);\\n const showPromiseModal = () => {\\n NiceModal.show(PromiseModal, { name: 'nate' })\\n .then((res) => {\\n console.log('Resolved: ', res);\\n NiceModal.show(PromiseModal, { name: 'nate2' });\\n })\\n .catch((err) => {\\n console.log('Rejected: ', err);\\n });\\n };\\n const showChainingModal = async () => {\\n for (let i = 0; i < 3; i++) {\\n await chainingModal.show({ times: i + 1 });\\n await chainingModal.hide();\\n }\\n };\\n\\n return (\\n <>\\n

    NOTE: please open dev console to see the output.

    \\n \\n \\n\\n \\n \\n \\n );\\n}\\n\";","export default \"import React from 'react';\\nimport Button from '@material-ui/core/Button';\\nimport Dialog from '@material-ui/core/Dialog';\\nimport DialogActions from '@material-ui/core/DialogActions';\\nimport DialogContent from '@material-ui/core/DialogContent';\\nimport DialogContentText from '@material-ui/core/DialogContentText';\\nimport DialogTitle from '@material-ui/core/DialogTitle';\\nimport Slide from '@material-ui/core/Slide';\\nimport { TransitionProps } from '@material-ui/core/transitions';\\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\\n\\nconst Transition = React.forwardRef(function Transition(\\n props: TransitionProps & { children?: React.ReactElement },\\n ref: React.Ref,\\n) {\\n return ;\\n});\\n\\nconst MyMuiDialog = NiceModal.create(() => {\\n const modal = useModal();\\n return (\\n modal.hide()}\\n TransitionProps={{\\n onExited: () => modal.remove(),\\n }}\\n >\\n {\\\"Use Google's location service?\\\"}\\n \\n \\n Let Google help apps determine location. This means sending anonymous location data to Google, even when no\\n apps are running.\\n \\n \\n \\n \\n \\n \\n \\n );\\n});\\n\\nexport default function MuiDialogSample() {\\n return (\\n \\n );\\n}\\n\";","export default \"import BootstrapModal from 'react-bootstrap/Modal';\\nimport Button from 'react-bootstrap/Button';\\nimport NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';\\n\\nconst MyBootstrapDialog = NiceModal.create(({ name = 'Bootstrap' }: { name: string }) => {\\n const modal = useModal();\\n return (\\n \\n \\n Modal title\\n \\n\\n \\n

    Modal body text goes here. {name}

    \\n     \\n\\n \\n \\n \\n \\n     \\n );\\n});\\nexport default function BootstrapSample() {\\n return (\\n <>\\n \\n \\n );\\n}\\n\";","export default \"import { createStore, applyMiddleware, compose, combineReducers } from 'redux';\\nimport { Provider, useSelector, useDispatch } from 'react-redux';\\nimport NiceModal from '@ebay/nice-modal-react';\\nimport { Button } from 'antd';\\nimport { MyAntdModal } from './MyAntdModal';\\nimport logger from 'redux-logger';\\n\\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\\nconst enhancer = composeEnhancers(applyMiddleware(logger));\\n\\nconst store = createStore(\\n combineReducers({\\n __nice_modals: NiceModal.reducer,\\n // other reducers...\\n }),\\n enhancer,\\n);\\n\\nconst ModalsProvider = ({ children }) => {\\n const modals = useSelector((s) => s.__nice_modals);\\n const dispatch = useDispatch();\\n return (\\n \\n

    NOTE: open dev console or Redux dev tools to see actions log.

    \\n {\\n NiceModal.show(MyAntdModal, { name: 'Redux' });\\n }}\\n >\\n Show Modal\\n \\n     \\n );\\n};\\n\\nexport default function ReduxIntegration({ children }) {\\n return (\\n \\n {children}\\n \\n );\\n}\\n\";","export default \"import { Modal, Button } from 'antd';\\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\\n\\nexport const MyAntdModal = NiceModal.create(({ name }) => {\\n const modal = useModal();\\n return (\\n \\n Greetings: {name}!\\n \\n );\\n});\\n\\nexport default function AntdSample() {\\n return (\\n <>\\n \\n \\n \\n );\\n}\\n\";","export default \"import { useEffect, useState } from 'react';\\nimport { Modal, Button } from 'antd';\\nimport NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';\\n\\nexport const MyAntdModal = NiceModal.create(({ time }) => {\\n const modal = useModal();\\n return (\\n \\n Time: {time}\\n \\n );\\n});\\n\\nexport default function Example() {\\n const [time, setTime] = useState(0);\\n useEffect(() => {\\n const p = setInterval(() => setTime((t) => t + 1), 1000);\\n return () => clearInterval(p);\\n }, []);\\n\\n // modalHandler will be assign show/hide method.\\n const modalHandler = {};\\n\\n return (\\n <>\\n \\n \\n \\n );\\n}\\n\";","import { useCallback } from 'react';\nimport { Form, Modal } from 'antd';\nimport FormBuilder from 'antd-form-builder';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nexport default NiceModal.create(({ user }) => {\n const modal = useModal();\n const [form] = Form.useForm();\n const meta = {\n initialValues: user,\n fields: [\n { key: 'name', label: 'Name', required: true },\n { key: 'job', label: 'Job Title', required: true },\n ],\n };\n\n const handleSubmit = useCallback(() => {\n form.validateFields().then(() => {\n const newUser = { ...form.getFieldsValue() };\n // In real case, you may call API to create user or update user\n if (!user) {\n newUser.id = String(Date.now());\n } else {\n newUser.id = user.id;\n }\n modal.resolve(newUser);\n modal.hide();\n });\n }, [modal, user, form]);\n return (\n \n
    \n \n \n \n );\n});\n","const data = [\n {\n id: '1',\n name: 'Kennedy',\n job: 'Chief Mobility Orchestrator',\n city: 'North Alec',\n },\n {\n id: '2',\n name: 'Lucius',\n job: 'Internal Research Manager',\n city: 'Littleland',\n },\n {\n id: '3',\n name: 'Carlos',\n job: 'Lead Configuration Analyst',\n city: 'South Lillian',\n },\n {\n id: '4',\n name: 'Urban',\n job: 'Chief Operations Agent',\n city: 'Shieldshaven',\n },\n {\n id: '5',\n name: 'Katrine',\n job: 'Legacy Solutions Orchestrator',\n city: 'South Kyleigh',\n },\n];\nexport default data;\n","import { Modal, Button, Space } from 'antd';\nimport NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';\n\nconst PromiseModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n const handleResolve = () => {\n modal.resolve({ resolved: true });\n };\n const handleReject = () => {\n modal.reject(new Error('Rejected'));\n modal.hide();\n };\n return (\n \n

    Choose the promise action: {name}

    \n \n \n \n \n     \n );\n});\n\nconst ChainingModal = NiceModal.create(({ times }) => {\n const modal = useModal();\n return (\n \n \n
    \n
    \n Showed {times}/3 times.\n     \n );\n});\n\nexport default function PromiseSample() {\n const chainingModal = useModal(ChainingModal);\n const showPromiseModal = () => {\n NiceModal.show(PromiseModal, { name: 'nate' })\n .then((res) => {\n console.log('Resolved: ', res);\n NiceModal.show(PromiseModal, { name: 'nate2' });\n })\n .catch((err) => {\n console.log('Rejected: ', err);\n });\n };\n const showChainingModal = async () => {\n for (let i = 0; i < 3; i++) {\n await chainingModal.show({ times: i + 1 });\n await chainingModal.hide();\n }\n };\n\n return (\n <>\n

    NOTE: please open dev console to see the output.

    \n \n \n\n \n \n \n );\n}\n","import { Modal, Button } from 'antd';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ name }) => {\n const modal = useModal();\n return (\n \n Greetings: {name}!\n \n );\n});\n\nexport default function AntdSample() {\n return (\n <>\n \n \n \n );\n}\n","import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Slide from '@material-ui/core/Slide';\nimport { TransitionProps } from '@material-ui/core/transitions';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nconst Transition = React.forwardRef(function Transition(\n props: TransitionProps & { children?: React.ReactElement },\n ref: React.Ref,\n) {\n return ;\n});\n\nconst MyMuiDialog = NiceModal.create(() => {\n const modal = useModal();\n return (\n modal.hide()}\n TransitionProps={{\n onExited: () => modal.remove(),\n }}\n >\n {\"Use Google's location service?\"}\n \n \n Let Google help apps determine location. This means sending anonymous location data to Google, even when no\n apps are running.\n \n \n \n \n \n \n \n );\n});\n\nexport default function MuiDialogSample() {\n return (\n \n );\n}\n","import { Modal, Button, Drawer, Space } from 'antd';\nimport NiceModal, { useModal } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ id, name }: { id: string; name: string }) => {\n const modal = useModal();\n return (\n \n Greetings: {id},{name}!\n \n );\n});\n\nconst MyAntdDrawer = NiceModal.create(({ name, id }: { name: string; id: string }) => {\n const modal = useModal();\n return (\n {\n if (!visible) modal.remove();\n }}\n >\n Greetings:{id} {name}!\n \n );\n});\n\nexport default function AntdSample() {\n const modal = useModal(MyAntdModal);\n return (\n \n \n NiceModal.show(MyAntdDrawer, { id: 'test2', name: 'Bood' })}\n >\n Show Drawer\n \n \n );\n}\n","import BootstrapModal from 'react-bootstrap/Modal';\nimport Button from 'react-bootstrap/Button';\nimport NiceModal, { useModal, bootstrapDialog } from '@ebay/nice-modal-react';\n\nconst MyBootstrapDialog = NiceModal.create(({ name = 'Bootstrap' }: { name: string }) => {\n const modal = useModal();\n return (\n \n \n Modal title\n \n\n \n

    Modal body text goes here. {name}

    \n     \n\n \n \n \n \n     \n );\n});\nexport default function BootstrapSample() {\n return (\n <>\n \n \n );\n}\n","import { createStore, applyMiddleware, compose, combineReducers } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport NiceModal from '@ebay/nice-modal-react';\nimport { Button } from 'antd';\nimport { MyAntdModal } from './MyAntdModal';\nimport logger from 'redux-logger';\n\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\nconst enhancer = composeEnhancers(applyMiddleware(logger));\n\nconst store = createStore(\n combineReducers({\n __nice_modals: NiceModal.reducer,\n // other reducers...\n }),\n enhancer,\n);\n\nconst ModalsProvider = ({ children }) => {\n const modals = useSelector((s) => s.__nice_modals);\n const dispatch = useDispatch();\n return (\n \n

    NOTE: open dev console or Redux dev tools to see actions log.

    \n {\n NiceModal.show(MyAntdModal, { name: 'Redux' });\n }}\n >\n Show Modal\n \n     \n );\n};\n\nexport default function ReduxIntegration({ children }) {\n return (\n \n {children}\n \n );\n}\n","import { useEffect, useState } from 'react';\nimport { Modal, Button } from 'antd';\nimport NiceModal, { useModal, ModalHolder } from '@ebay/nice-modal-react';\n\nexport const MyAntdModal = NiceModal.create(({ time }) => {\n const modal = useModal();\n return (\n \n Time: {time}\n \n );\n});\n\nexport default function Example() {\n const [time, setTime] = useState(0);\n useEffect(() => {\n const p = setInterval(() => setTime((t) => t + 1), 1000);\n return () => clearInterval(p);\n }, []);\n\n // modalHandler will be assign show/hide method.\n const modalHandler = {};\n\n return (\n <>\n \n \n \n );\n}\n","import NiceModal from '@ebay/nice-modal-react';\nimport useHash from './useHash';\nimport CodeViewer from './CodeViewer';\nimport UserList from './UserList';\nimport './App.css';\nimport PromiseSample from './PromiseSample';\nimport Declarative from './Declarative';\nimport MyMuiDialog from './MyMuiDialog';\nimport MyAntdModal from './MyAntdModal';\nimport MyBootstrapDialog from './MyBootstrapDialog';\nimport ReduxIntegration from './ReduxIntegration';\nimport PropsBinding from './PropsBinding';\n\nconst examples = {\n real: {\n name: 'Real Case',\n component: UserList,\n description: 'Show a dialog to create a new user or edit user info.',\n code: ['UserList.jsx', 'UserInfoModal.jsx'],\n },\n mui: {\n name: 'Material UI',\n description: 'Show material UI dialog',\n component: MyMuiDialog,\n code: ['MyMuiDialog.tsx'],\n },\n antd: {\n name: 'Ant Design',\n description: 'Show/hide antd modal or drawer.',\n component: MyAntdModal,\n code: ['MyAntdModal.tsx'],\n },\n bootstrap: {\n name: 'Bootstrap React',\n descript: 'Show/hide bootstrap dialog.',\n component: MyBootstrapDialog,\n code: ['MyBootstrapDialog.tsx'],\n },\n promise: {\n name: 'Promise',\n description: 'Use promise to interact with the dialog.',\n component: PromiseSample,\n code: ['PromiseSample.jsx'],\n },\n declarative: {\n name: 'Declarative',\n description: 'Declarative way to register a modal with id.',\n component: Declarative,\n code: ['Declarative.jsx'],\n },\n propsBinding: {\n name: 'Props Binding',\n description:\n \"To bind props to modal, you can also use besides declarative way. This approach doesn't need a uniq modal id.\",\n component: PropsBinding,\n code: ['PropsBinding.jsx'],\n },\n redux: {\n name: 'Redux Integration',\n description:\n 'Use Redux to manage modals state so that you can use Redux dev tools to debug nice modals.',\n component: ReduxIntegration,\n code: ['ReduxIntegration.jsx'],\n },\n};\n\nfunction App() {\n const current = useHash() || 'real';\n\n const renderExample = () => {\n const item = examples[current];\n if (!item || !item.component) {\n return Error: example \"{current}\" not found.;\n }\n const Comp = item.component;\n return (\n <>\n

    \n {item.name}\n

    {item.description}

    \n

    \n \n \n );\n };\n const example = examples[current] || {};\n const ele = (\n
    \n
    \n

    \n @ebay/nice-modal-react\n Examples\n

    \n
    \n \n
    \n
    \n \n \n \n
    \n \n \"api\n \n
    \n \n \n \n
    \n
    \n
    \n
    {renderExample()}
    \n
    \n {example.code?.map((f) => (\n \n ))}\n
    \n
    \n
    \n );\n\n if (current === 'redux') return ele;\n else return {ele};\n}\n\nexport default App;\n","import { useMemo, useCallback, useState } from 'react';\nimport { Button, Table } from 'antd';\nimport { EditOutlined } from '@ant-design/icons';\nimport { useModal } from '@ebay/nice-modal-react';\nimport UserInfoModal from './UserInfoModal';\nimport mockData from './mock';\n\nexport default function UserList() {\n const userModal = useModal(UserInfoModal);\n const [users, setUsers] = useState(mockData);\n\n const handleNewUser = useCallback(() => {\n userModal.show().then((newUser) => {\n setUsers([newUser, ...users]);\n });\n }, [userModal, users]);\n\n const handleEditUser = useCallback(\n (user) => {\n userModal.show({ user }).then((newUser) => {\n setUsers((users) => {\n // Modify users immutablly\n const i = users.findIndex((u) => u.id === newUser.id);\n const updated = { ...users[i], ...newUser };\n const arr = [...users];\n arr.splice(i, 1, updated);\n return arr;\n });\n });\n },\n [userModal],\n );\n\n const columns = useMemo(\n () => [\n {\n title: 'Name',\n dataIndex: 'name',\n width: '150px',\n },\n {\n title: 'Job Title',\n dataIndex: 'job',\n },\n {\n title: 'Edit',\n width: '100px',\n render(value, user) {\n return (\n }\n onClick={() => {\n handleEditUser(user);\n }}\n />\n );\n },\n },\n ],\n [handleEditUser],\n );\n\n return (\n
    \n \n \n
    \n );\n}\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'antd/dist/antd.css';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""} \ No newline at end of file diff --git a/example/src/MyAntdModal.tsx b/example/src/MyAntdModal.tsx index 2e15068..a8243e8 100644 --- a/example/src/MyAntdModal.tsx +++ b/example/src/MyAntdModal.tsx @@ -1,16 +1,22 @@ import { Modal, Button, Drawer, Space } from 'antd'; import NiceModal, { useModal } from '@ebay/nice-modal-react'; -export const MyAntdModal = NiceModal.create(({ name }: { name: string }) => { +export const MyAntdModal = NiceModal.create(({ id, name }: { id: string; name: string }) => { const modal = useModal(); return ( - - Greetings: {name}! + + Greetings: {id},{name}! ); }); -const MyAntdDrawer = NiceModal.create(({ name }: { name: string }) => { +const MyAntdDrawer = NiceModal.create(({ name, id }: { name: string; id: string }) => { const modal = useModal(); return ( { if (!visible) modal.remove(); }} > - Greetings: {name}! + Greetings:{id} {name}! ); }); export default function AntdSample() { + const modal = useModal(MyAntdModal); return ( - - diff --git a/example/src/Test.tsx b/example/src/Test.tsx new file mode 100644 index 0000000..197406d --- /dev/null +++ b/example/src/Test.tsx @@ -0,0 +1,58 @@ +import React, { PropsWithRef, useState } from 'react'; +import NiceModal, { useModal } from '@ebay/nice-modal-react'; + +type Props = { + message: string; + p: number; +}; + +export type EditMessageResponse = { + message: string; +}; + +export const EditMessage = NiceModal.create(({ message, p }: PropsWithRef) => { + const [newMessage, setNewMessage] = useState(message); + const modal = useModal(); + + const cancel = () => { + modal.remove(); + }; + + const submit = (e: React.FormEvent) => { + e.preventDefault(); + modal.resolve({ + message: newMessage, + p, + } as EditMessageResponse); + modal.remove(); + }; + + return ( +
    +
    + setNewMessage(e.target.value)} /> + + +
    +
    + ); +}); + +function App() { + const handleClick = async () => { + const result: EditMessageResponse = await NiceModal.show(EditMessage, { + message: 'foo', + }); + alert(`New message: ${result.message}`); + }; + return ( +
    +

    React + Vite

    +
    + +
    +
    + ); +} + +export default App; diff --git a/example/src/TsTest.tsx b/example/src/TsTest.tsx index 30f2715..0bd2dfc 100644 --- a/example/src/TsTest.tsx +++ b/example/src/TsTest.tsx @@ -2,7 +2,7 @@ import React from 'react'; import NiceModal, { useModal, antdModalV5 } from '@ebay/nice-modal-react'; -const MyModal1 = NiceModal.create(({ p1, p2 }: { p1: string; p2: number }) => { +const MyModal1 = NiceModal.create(({ p1, p2, id }: { p1: string; p2: number; id: string }) => { const modal = useModal(); return (
    @@ -31,18 +31,28 @@ export default function TsTest() { modal1.show({ p2: 1, p1: 1 }); // expected: p1 should be string modal1.show(); - NiceModal.show(MyModal1); // valid? - NiceModal.show(MyModal1, { p1: 'foo', p2: 123 }); // valid + NiceModal.show(MyModal1); + NiceModal.show(MyModal1, { p1: 'foo', p2: 123 }); NiceModal.show(MyModal1, { p1: 'foo', p2: '123' }); // expected ts error: p2 should be number NiceModal.show(MyModal1, { p1: 'foo' }); NiceModal.show(MyModal1, { p2: 123 }); + NiceModal.show(MyModal1, { p2: '123' }); // expected ts error: p2 should be number + + NiceModal.show('modal-1', { p1: 'foo', p2: 123 }); const modal1_1 = useModal('modal-1', { p3: 'foo', p2: 123 }); modal1_1.show(); const modal2 = useModal(MyModal2); modal2.show(); - modal2.show({ p1: 'foo', p2: 123 }); // expected ts error + modal2.show({ p1: 'foo', p2: 123 }); + + const modal3 = useModal(MyModal1, { p1: 'abc' }); + modal3.show({ p1: 1 }); // expected ts error: p1 should be a string + const modal4 = useModal(MyModal1, { p1: 123 }); // expected ts error: p1 should be a string + + // If already type error, can't detect below type error + modal4.show({ p1: 'abc', p2: 'a' }); return <>hello ts; } diff --git a/example/tsconfig.json b/example/tsconfig.json index afa95c1..99c43ed 100644 --- a/example/tsconfig.json +++ b/example/tsconfig.json @@ -24,6 +24,7 @@ "src" ], "exclude": [ - "src/TsTest.tsx" + "src/TsTest.tsx", + "src/Test.tsx" ] } diff --git a/package.json b/package.json index 8d7116b..e0a81f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ebay/nice-modal-react", - "version": "1.2.11", + "version": "1.2.12", "license": "MIT", "main": "./lib/cjs/index.js", "module": "./lib/esm/index.js", diff --git a/src/index.tsx b/src/index.tsx index 967e9a0..32e968a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -215,18 +215,18 @@ const getModalId = (modal: string | React.FC): string => { return modal[symModalId]; }; -/** omit id and partial all required props */ type NiceModalArgs = T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor - ? Omit, 'id'> + ? React.ComponentProps : Record; -export function show( + +export function show>>>( modal: React.FC, - args?: Partial>>, + args?: P, ): Promise; -// export function show(modal: C, args?: Omit, 'id'>): Promise; export function show(modal: string, args?: Record): Promise; export function show(modal: string, args: P): Promise; + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export function show( modal: React.FC | string,