├── .eslintrc.cjs ├── .github └── dependabot.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.cjs ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── README_zh-CN.md ├── example ├── .gitignore ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.tsx │ ├── components │ │ ├── Dialog1.tsx │ │ └── Dialog2.tsx │ ├── lib │ │ └── dialog.ts │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── package.json ├── pnpm-lock.yaml ├── src ├── DialogProvider.tsx ├── createDialogHooks.ts ├── createDialogs.ts ├── index.ts ├── types.ts ├── useDialog.ts └── useDialogController.ts └── tsconfig.json /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | ecmaFeatures: { 5 | jsx: true, 6 | }, 7 | ecmaVersion: 'latest', 8 | sourceType: 'module', 9 | project: [ 10 | 'tsconfig.json', 11 | './example/tsconfig.json', 12 | './example/tsconfig.node.json', 13 | ], 14 | }, 15 | plugins: ['@typescript-eslint'], 16 | extends: [ 17 | 'plugin:prettier/recommended', 18 | 'plugin:react-hooks/recommended', 19 | 'plugin:react/jsx-runtime', 20 | ], 21 | env: { 22 | browser: true, 23 | es2021: true, 24 | }, 25 | ignorePatterns: ['*.cjs', 'dist/*'], 26 | rules: { 27 | '@typescript-eslint/explicit-function-return-type': 'off', 28 | '@typescript-eslint/explicit-module-boundary-types': 'off', 29 | '@typescript-eslint/no-non-null-assertion': 'off', 30 | '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }], 31 | '@typescript-eslint/consistent-type-imports': 'warn', 32 | 'no-console': 'warn', 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "daily" 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | trailingComma: 'all', 4 | plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')], 5 | importOrder: ['', '^[./]'], 6 | importOrderSeparation: true, 7 | }; 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | jsun969. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to `React Hook Dialog` 2 | 3 | As the creators and maintainers of this project, we want to ensure that `react-hook-dialog` lives and continues to grow and evolve. We would like to encourage everyone to help and support this library by contributing. 4 | 5 | ## Code contributions 6 | 7 | Here is a quick guide to doing code contributions to the library. 8 | 9 | 1. Fork and clone the repo to your local machine. 10 | 11 | ```bash 12 | git clone https://github.com/YOUR_GITHUB_USERNAME/react-hook-dialog.git 13 | ``` 14 | 15 | 2. Create a new branch from `main` with a meaningful name for a new feature or an issue you want to work on. 16 | 17 | ```bash 18 | git checkout -b your-meaningful-branch-name 19 | ``` 20 | 21 | 3. Install packages by running. 22 | 23 | ```bash 24 | pnpm install 25 | ``` 26 | 27 | 4. Test your code in example. 28 | 29 | ```bash 30 | cd example 31 | pnpm install 32 | pnpm run dev 33 | ``` 34 | 35 | 5. Try to write some unit tests to cover as much of your code as possible. 36 | 37 | 6. Ensure your code lints without errors. 38 | 39 | ``` 40 | pnpm run lint 41 | ``` 42 | 43 | 7. Ensure build passes. 44 | 45 | ```bash 46 | pnpm run build 47 | ``` 48 | 49 | 8. Push your branch. 50 | 51 | ```bash 52 | git push -u origin your-meaningful-branch-name 53 | ``` 54 | 55 | 9. Submit a pull request to the upstream react-hook-dialogs repository. 56 | 57 | 10. Choose a descriptive title and describe your changes briefly. 58 | 59 | ## Coding style 60 | 61 | Please follow the coding style of the project. React Hook Dialog uses eslint and prettier. If possible, enable their respective plugins in your editor to get real-time feedback. The linting can be run manually with the following command: `pnpm run format` and `pnpm run lint` 62 | 63 | ## License 64 | 65 | By contributing your code to the react-hook-dialog GitHub repository, you agree to license your contribution under the MIT license. 66 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Justin Sun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # 💬 React Hook Dialog 4 | 5 | React hooks for master your dialog(modal) component 6 | 7 | [![version](https://img.shields.io/npm/v/react-hook-dialog?style=for-the-badge)](https://www.npmjs.com/package/react-hook-dialog) 8 | [![license](https://img.shields.io/npm/l/react-hook-dialog?style=for-the-badge)](https://github.com/jsun969/react-hook-dialog/blob/main/LICENSE) 9 | [![size](https://img.shields.io/bundlephobia/minzip/react-hook-dialog?style=for-the-badge)](https://bundlephobia.com/result?p=react-hook-dialog) 10 | 11 | English | [简体中文](./README_zh-CN.md) 12 | 13 |
14 | 15 | ## ✨ Features 16 | 17 | - 🧙‍♂️ TYPE SAFE 18 | - 🐎 Awesome DX 19 | - 🍃 Super light 20 | 21 | ## 🕶 Example 22 | 23 | - [Material UI](https://codesandbox.io/s/rhd-mui-example-etwz20) 24 | - [Ant Design](https://codesandbox.io/s/rhd-antd-example-qhj7zy) 25 | 26 | ## 📦 Installation 27 | 28 | ```bash 29 | npm install react-hook-dialog 30 | ``` 31 | 32 | ## 🎯 Quickstart 33 | 34 | `lib/dialog.ts` 35 | 36 | ```tsx 37 | import { createDialogs, createDialogHooks } from 'react-hook-dialog'; 38 | 39 | export const dialogs = createDialogs({ 40 | customDialog: { title: '', content: '' }, 41 | }); 42 | 43 | export const dialog = createDialogHooks(dialogs); 44 | ``` 45 | 46 | `components/CustomDialog.tsx` 47 | 48 | ```tsx 49 | import { Dialog } from 'your-ui-lib'; 50 | 51 | import { dialog } from '../lib/dialog'; 52 | 53 | const CustomDialog = () => { 54 | const { isOpen, handleClose, props } = 55 | dialog.useDialogController('customDialog'); 56 | 57 | return ( 58 | 59 |

{props.title}

60 |

{props.content}

61 | 62 | ); 63 | }; 64 | 65 | export default CustomDialog; 66 | ``` 67 | 68 | `main.tsx` 69 | 70 | ```tsx 71 | import React from 'react'; 72 | import ReactDOM from 'react-dom/client'; 73 | import { DialogProvider } from 'react-hook-dialog'; 74 | 75 | import App from './App'; 76 | import CustomDialog from './components/CustomDialog'; 77 | import { dialogs } from './lib/dialog'; 78 | 79 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 80 | 81 | 82 | 83 | 84 | 85 | , 86 | ); 87 | ``` 88 | 89 | `anywhere` 90 | 91 | ```tsx 92 | import { dialog } from 'dir to lib/dialog'; 93 | 94 | const YourComponent = () => { 95 | const { open, close, isOpen } = dialog.useDialog('customDialog', { 96 | title: 'Some Title', 97 | content: 'some content', 98 | }); 99 | 100 | return ( 101 | <> 102 |
Dialog Status: {isOpen ? 'open' : 'closed'}
103 | 104 | 105 | 109 | 110 | ); 111 | }; 112 | 113 | export default YourComponent; 114 | ``` 115 | 116 | ## 🕹 API 117 | 118 | ### 🔗 `createDialogs` 119 | 120 | Initialize your dialogs name and props 121 | 122 | ```ts 123 | const dialogs = createDialogs({ 124 | firstDialogName: { 125 | title: '', 126 | content: '', 127 | }, 128 | secondDialogName: { 129 | lol: '', 130 | olo: '', 131 | }, 132 | }); 133 | ``` 134 | 135 | ### 🔗 `DialogProvider` 136 | 137 | ```tsx 138 | 139 | 140 | 141 | 142 | 143 | ``` 144 | 145 | ### 🔗 `createDialogHooks` 146 | 147 | Create type-safe dialog hooks 148 | 149 | ```ts 150 | const dialog = createDialogHooks(dialogs); 151 | ``` 152 | 153 | ### 🔗 `useDialogController` 154 | 155 | A hook to control your dialog component 156 | 157 | ```tsx 158 | const { isOpen, handleClose, props } = dialog.useDialogController('dialogName'); 159 | 160 | return 161 | ``` 162 | 163 | ### 🔗 `useDialog` 164 | 165 | A hook to use any dialogs anywhere! 166 | 167 | > **Note** 168 | > You may have found that the dialog props can be defined in 3 places 169 | > Priority: `open` > `useDialog` > `createDialogs` 170 | 171 | ```tsx 172 | const { open, close, isOpen } = dialog.useDialog( 173 | 'dialogName', 174 | { title: 'New Title' }, // Dialog props 175 | ); 176 | ``` 177 | 178 | ```tsx 179 | <> 180 |
Dialog Status: {isOpen ? 'open' : 'closed'}
181 | 182 | 183 | 184 | ``` 185 | -------------------------------------------------------------------------------- /README_zh-CN.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # 💬 React Hook Dialog 4 | 5 | 用 React hooks 拿捏你的对话框组件 6 | 7 | [![version](https://img.shields.io/npm/v/react-hook-dialog?style=for-the-badge)](https://www.npmjs.com/package/react-hook-dialog) 8 | [![license](https://img.shields.io/npm/l/react-hook-dialog?style=for-the-badge)](https://github.com/jsun969/react-hook-dialog/blob/main/LICENSE) 9 | [![size](https://img.shields.io/bundlephobia/minzip/react-hook-dialog?style=for-the-badge)](https://bundlephobia.com/result?p=react-hook-dialog) 10 | 11 | [English](./README.md) | 简体中文 12 | 13 |
14 | 15 | ## ✨ 特性 16 | 17 | - 🧙‍♂️ 类型安全 18 | - 🐎 开发友好 19 | - 🍃 轻量至极 20 | 21 | ## 🕶 例子 22 | 23 | - [Material UI](https://codesandbox.io/s/rhd-mui-example-etwz20) 24 | - [Ant Design](https://codesandbox.io/s/rhd-antd-example-qhj7zy) 25 | 26 | ## 📦 安装 27 | 28 | ```bash 29 | npm install react-hook-dialog 30 | ``` 31 | 32 | ## 🎯 快速上手 33 | 34 | `lib/dialog.ts` 35 | 36 | ```tsx 37 | import { createDialogs, createDialogHooks } from 'react-hook-dialog'; 38 | 39 | export const dialogs = createDialogs({ 40 | customDialog: { title: '', content: '' }, 41 | }); 42 | 43 | export const dialog = createDialogHooks(dialogs); 44 | ``` 45 | 46 | `components/CustomDialog.tsx` 47 | 48 | ```tsx 49 | import { Dialog } from 'your-ui-lib'; 50 | 51 | import { dialog } from '../lib/dialog'; 52 | 53 | const CustomDialog = () => { 54 | const { isOpen, handleClose, props } = 55 | dialog.useDialogController('customDialog'); 56 | 57 | return ( 58 | 59 |

{props.title}

60 |

{props.content}

61 | 62 | ); 63 | }; 64 | 65 | export default CustomDialog; 66 | ``` 67 | 68 | `main.tsx` 69 | 70 | ```tsx 71 | import React from 'react'; 72 | import ReactDOM from 'react-dom/client'; 73 | import { DialogProvider } from 'react-hook-dialog'; 74 | 75 | import App from './App'; 76 | import CustomDialog from './components/CustomDialog'; 77 | import { dialogs } from './lib/dialog'; 78 | 79 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 80 | 81 | 82 | 83 | 84 | 85 | , 86 | ); 87 | ``` 88 | 89 | `任何地方` 90 | 91 | ```tsx 92 | import { dialog } from '路径至 lib/dialog'; 93 | 94 | const YourComponent = () => { 95 | const { open, close, isOpen } = dialog.useDialog('customDialog', { 96 | title: '标题', 97 | content: '内容', 98 | }); 99 | 100 | return ( 101 | <> 102 |
对话框状态: {isOpen ? '开启' : '关闭'}
103 | 104 | 105 | 109 | 110 | ); 111 | }; 112 | 113 | export default YourComponent; 114 | ``` 115 | 116 | ## 🕹 API 117 | 118 | ### 🔗 `createDialogs` 119 | 120 | 初始化对话框名和 Props 121 | 122 | ```ts 123 | const dialogs = createDialogs({ 124 | firstDialogName: { 125 | title: '', 126 | content: '', 127 | }, 128 | secondDialogName: { 129 | lol: '', 130 | olo: '', 131 | }, 132 | }); 133 | ``` 134 | 135 | ### 🔗 `DialogProvider` 136 | 137 | ```tsx 138 | 139 | 140 | 141 | 142 | 143 | ``` 144 | 145 | ### 🔗 `createDialogHooks` 146 | 147 | 创建类型安全的对话框 Hooks 148 | 149 | ```ts 150 | const dialog = createDialogHooks(dialogs); 151 | ``` 152 | 153 | ### 🔗 `useDialogController` 154 | 155 | 一个控制对话框组建的 Hook 156 | 157 | ```tsx 158 | const { isOpen, handleClose, props } = dialog.useDialogController('dialogName'); 159 | 160 | return 161 | ``` 162 | 163 | ### 🔗 `useDialog` 164 | 165 | 一个让你在任何地方使用任何对话框的 Hook！ 166 | 167 | > **Note** 168 | > 你可能发现对话框 Props 能够在三个地方被定义 169 | > 优先级: `open` > `useDialog` > `createDialogs` 170 | 171 | ```tsx 172 | const { open, close, isOpen } = dialog.useDialog( 173 | 'dialogName', 174 | { title: '新标题' }, // 对话框 Props 175 | ); 176 | ``` 177 | 178 | ```tsx 179 | <> 180 |
对话框状态: {isOpen ? '开启' : '关闭'}
181 | 182 | 183 | 184 | ``` 185 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.27", 17 | "@types/react-dom": "^18.0.10", 18 | "@vitejs/plugin-react": "^3.1.0", 19 | "typescript": "^4.9.3", 20 | "vite": "^4.1.0" 21 | } 22 | } -------------------------------------------------------------------------------- /example/pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: 5.4 2 | 3 | specifiers: 4 | '@types/react': ^18.0.27 5 | '@types/react-dom': ^18.0.10 6 | '@vitejs/plugin-react': ^3.1.0 7 | react: ^18.2.0 8 | react-dom: ^18.2.0 9 | typescript: ^4.9.3 10 | vite: ^4.1.0 11 | 12 | dependencies: 13 | react: 18.2.0 14 | react-dom: 18.2.0_react@18.2.0 15 | 16 | devDependencies: 17 | '@types/react': 18.0.27 18 | '@types/react-dom': 18.0.10 19 | '@vitejs/plugin-react': 3.1.0_vite@4.1.1 20 | typescript: 4.9.5 21 | vite: 4.1.1 22 | 23 | packages: 24 | 25 | /@ampproject/remapping/2.2.0: 26 | resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==} 27 | engines: {node: '>=6.0.0'} 28 | dependencies: 29 | '@jridgewell/gen-mapping': 0.1.1 30 | '@jridgewell/trace-mapping': 0.3.17 31 | dev: true 32 | 33 | /@babel/code-frame/7.18.6: 34 | resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} 35 | engines: {node: '>=6.9.0'} 36 | dependencies: 37 | '@babel/highlight': 7.18.6 38 | dev: true 39 | 40 | /@babel/compat-data/7.20.14: 41 | resolution: {integrity: sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==} 42 | engines: {node: '>=6.9.0'} 43 | dev: true 44 | 45 | /@babel/core/7.20.12: 46 | resolution: {integrity: sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==} 47 | engines: {node: '>=6.9.0'} 48 | dependencies: 49 | '@ampproject/remapping': 2.2.0 50 | '@babel/code-frame': 7.18.6 51 | '@babel/generator': 7.20.14 52 | '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12 53 | '@babel/helper-module-transforms': 7.20.11 54 | '@babel/helpers': 7.20.13 55 | '@babel/parser': 7.20.15 56 | '@babel/template': 7.20.7 57 | '@babel/traverse': 7.20.13 58 | '@babel/types': 7.20.7 59 | convert-source-map: 1.9.0 60 | debug: 4.3.4 61 | gensync: 1.0.0-beta.2 62 | json5: 2.2.3 63 | semver: 6.3.0 64 | transitivePeerDependencies: 65 | - supports-color 66 | dev: true 67 | 68 | /@babel/generator/7.20.14: 69 | resolution: {integrity: sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==} 70 | engines: {node: '>=6.9.0'} 71 | dependencies: 72 | '@babel/types': 7.20.7 73 | '@jridgewell/gen-mapping': 0.3.2 74 | jsesc: 2.5.2 75 | dev: true 76 | 77 | /@babel/helper-compilation-targets/7.20.7_@babel+core@7.20.12: 78 | resolution: {integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==} 79 | engines: {node: '>=6.9.0'} 80 | peerDependencies: 81 | '@babel/core': ^7.0.0 82 | dependencies: 83 | '@babel/compat-data': 7.20.14 84 | '@babel/core': 7.20.12 85 | '@babel/helper-validator-option': 7.18.6 86 | browserslist: 4.21.5 87 | lru-cache: 5.1.1 88 | semver: 6.3.0 89 | dev: true 90 | 91 | /@babel/helper-environment-visitor/7.18.9: 92 | resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==} 93 | engines: {node: '>=6.9.0'} 94 | dev: true 95 | 96 | /@babel/helper-function-name/7.19.0: 97 | resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==} 98 | engines: {node: '>=6.9.0'} 99 | dependencies: 100 | '@babel/template': 7.20.7 101 | '@babel/types': 7.20.7 102 | dev: true 103 | 104 | /@babel/helper-hoist-variables/7.18.6: 105 | resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==} 106 | engines: {node: '>=6.9.0'} 107 | dependencies: 108 | '@babel/types': 7.20.7 109 | dev: true 110 | 111 | /@babel/helper-module-imports/7.18.6: 112 | resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} 113 | engines: {node: '>=6.9.0'} 114 | dependencies: 115 | '@babel/types': 7.20.7 116 | dev: true 117 | 118 | /@babel/helper-module-transforms/7.20.11: 119 | resolution: {integrity: sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==} 120 | engines: {node: '>=6.9.0'} 121 | dependencies: 122 | '@babel/helper-environment-visitor': 7.18.9 123 | '@babel/helper-module-imports': 7.18.6 124 | '@babel/helper-simple-access': 7.20.2 125 | '@babel/helper-split-export-declaration': 7.18.6 126 | '@babel/helper-validator-identifier': 7.19.1 127 | '@babel/template': 7.20.7 128 | '@babel/traverse': 7.20.13 129 | '@babel/types': 7.20.7 130 | transitivePeerDependencies: 131 | - supports-color 132 | dev: true 133 | 134 | /@babel/helper-plugin-utils/7.20.2: 135 | resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==} 136 | engines: {node: '>=6.9.0'} 137 | dev: true 138 | 139 | /@babel/helper-simple-access/7.20.2: 140 | resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==} 141 | engines: {node: '>=6.9.0'} 142 | dependencies: 143 | '@babel/types': 7.20.7 144 | dev: true 145 | 146 | /@babel/helper-split-export-declaration/7.18.6: 147 | resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==} 148 | engines: {node: '>=6.9.0'} 149 | dependencies: 150 | '@babel/types': 7.20.7 151 | dev: true 152 | 153 | /@babel/helper-string-parser/7.19.4: 154 | resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==} 155 | engines: {node: '>=6.9.0'} 156 | dev: true 157 | 158 | /@babel/helper-validator-identifier/7.19.1: 159 | resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==} 160 | engines: {node: '>=6.9.0'} 161 | dev: true 162 | 163 | /@babel/helper-validator-option/7.18.6: 164 | resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==} 165 | engines: {node: '>=6.9.0'} 166 | dev: true 167 | 168 | /@babel/helpers/7.20.13: 169 | resolution: {integrity: sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==} 170 | engines: {node: '>=6.9.0'} 171 | dependencies: 172 | '@babel/template': 7.20.7 173 | '@babel/traverse': 7.20.13 174 | '@babel/types': 7.20.7 175 | transitivePeerDependencies: 176 | - supports-color 177 | dev: true 178 | 179 | /@babel/highlight/7.18.6: 180 | resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} 181 | engines: {node: '>=6.9.0'} 182 | dependencies: 183 | '@babel/helper-validator-identifier': 7.19.1 184 | chalk: 2.4.2 185 | js-tokens: 4.0.0 186 | dev: true 187 | 188 | /@babel/parser/7.20.15: 189 | resolution: {integrity: sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==} 190 | engines: {node: '>=6.0.0'} 191 | hasBin: true 192 | dependencies: 193 | '@babel/types': 7.20.7 194 | dev: true 195 | 196 | /@babel/plugin-transform-react-jsx-self/7.18.6_@babel+core@7.20.12: 197 | resolution: {integrity: sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==} 198 | engines: {node: '>=6.9.0'} 199 | peerDependencies: 200 | '@babel/core': ^7.0.0-0 201 | dependencies: 202 | '@babel/core': 7.20.12 203 | '@babel/helper-plugin-utils': 7.20.2 204 | dev: true 205 | 206 | /@babel/plugin-transform-react-jsx-source/7.19.6_@babel+core@7.20.12: 207 | resolution: {integrity: sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==} 208 | engines: {node: '>=6.9.0'} 209 | peerDependencies: 210 | '@babel/core': ^7.0.0-0 211 | dependencies: 212 | '@babel/core': 7.20.12 213 | '@babel/helper-plugin-utils': 7.20.2 214 | dev: true 215 | 216 | /@babel/template/7.20.7: 217 | resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==} 218 | engines: {node: '>=6.9.0'} 219 | dependencies: 220 | '@babel/code-frame': 7.18.6 221 | '@babel/parser': 7.20.15 222 | '@babel/types': 7.20.7 223 | dev: true 224 | 225 | /@babel/traverse/7.20.13: 226 | resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==} 227 | engines: {node: '>=6.9.0'} 228 | dependencies: 229 | '@babel/code-frame': 7.18.6 230 | '@babel/generator': 7.20.14 231 | '@babel/helper-environment-visitor': 7.18.9 232 | '@babel/helper-function-name': 7.19.0 233 | '@babel/helper-hoist-variables': 7.18.6 234 | '@babel/helper-split-export-declaration': 7.18.6 235 | '@babel/parser': 7.20.15 236 | '@babel/types': 7.20.7 237 | debug: 4.3.4 238 | globals: 11.12.0 239 | transitivePeerDependencies: 240 | - supports-color 241 | dev: true 242 | 243 | /@babel/types/7.20.7: 244 | resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==} 245 | engines: {node: '>=6.9.0'} 246 | dependencies: 247 | '@babel/helper-string-parser': 7.19.4 248 | '@babel/helper-validator-identifier': 7.19.1 249 | to-fast-properties: 2.0.0 250 | dev: true 251 | 252 | /@esbuild/android-arm/0.16.17: 253 | resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==} 254 | engines: {node: '>=12'} 255 | cpu: [arm] 256 | os: [android] 257 | requiresBuild: true 258 | dev: true 259 | optional: true 260 | 261 | /@esbuild/android-arm64/0.16.17: 262 | resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==} 263 | engines: {node: '>=12'} 264 | cpu: [arm64] 265 | os: [android] 266 | requiresBuild: true 267 | dev: true 268 | optional: true 269 | 270 | /@esbuild/android-x64/0.16.17: 271 | resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==} 272 | engines: {node: '>=12'} 273 | cpu: [x64] 274 | os: [android] 275 | requiresBuild: true 276 | dev: true 277 | optional: true 278 | 279 | /@esbuild/darwin-arm64/0.16.17: 280 | resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==} 281 | engines: {node: '>=12'} 282 | cpu: [arm64] 283 | os: [darwin] 284 | requiresBuild: true 285 | dev: true 286 | optional: true 287 | 288 | /@esbuild/darwin-x64/0.16.17: 289 | resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==} 290 | engines: {node: '>=12'} 291 | cpu: [x64] 292 | os: [darwin] 293 | requiresBuild: true 294 | dev: true 295 | optional: true 296 | 297 | /@esbuild/freebsd-arm64/0.16.17: 298 | resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==} 299 | engines: {node: '>=12'} 300 | cpu: [arm64] 301 | os: [freebsd] 302 | requiresBuild: true 303 | dev: true 304 | optional: true 305 | 306 | /@esbuild/freebsd-x64/0.16.17: 307 | resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==} 308 | engines: {node: '>=12'} 309 | cpu: [x64] 310 | os: [freebsd] 311 | requiresBuild: true 312 | dev: true 313 | optional: true 314 | 315 | /@esbuild/linux-arm/0.16.17: 316 | resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==} 317 | engines: {node: '>=12'} 318 | cpu: [arm] 319 | os: [linux] 320 | requiresBuild: true 321 | dev: true 322 | optional: true 323 | 324 | /@esbuild/linux-arm64/0.16.17: 325 | resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==} 326 | engines: {node: '>=12'} 327 | cpu: [arm64] 328 | os: [linux] 329 | requiresBuild: true 330 | dev: true 331 | optional: true 332 | 333 | /@esbuild/linux-ia32/0.16.17: 334 | resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==} 335 | engines: {node: '>=12'} 336 | cpu: [ia32] 337 | os: [linux] 338 | requiresBuild: true 339 | dev: true 340 | optional: true 341 | 342 | /@esbuild/linux-loong64/0.16.17: 343 | resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==} 344 | engines: {node: '>=12'} 345 | cpu: [loong64] 346 | os: [linux] 347 | requiresBuild: true 348 | dev: true 349 | optional: true 350 | 351 | /@esbuild/linux-mips64el/0.16.17: 352 | resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==} 353 | engines: {node: '>=12'} 354 | cpu: [mips64el] 355 | os: [linux] 356 | requiresBuild: true 357 | dev: true 358 | optional: true 359 | 360 | /@esbuild/linux-ppc64/0.16.17: 361 | resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==} 362 | engines: {node: '>=12'} 363 | cpu: [ppc64] 364 | os: [linux] 365 | requiresBuild: true 366 | dev: true 367 | optional: true 368 | 369 | /@esbuild/linux-riscv64/0.16.17: 370 | resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==} 371 | engines: {node: '>=12'} 372 | cpu: [riscv64] 373 | os: [linux] 374 | requiresBuild: true 375 | dev: true 376 | optional: true 377 | 378 | /@esbuild/linux-s390x/0.16.17: 379 | resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==} 380 | engines: {node: '>=12'} 381 | cpu: [s390x] 382 | os: [linux] 383 | requiresBuild: true 384 | dev: true 385 | optional: true 386 | 387 | /@esbuild/linux-x64/0.16.17: 388 | resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==} 389 | engines: {node: '>=12'} 390 | cpu: [x64] 391 | os: [linux] 392 | requiresBuild: true 393 | dev: true 394 | optional: true 395 | 396 | /@esbuild/netbsd-x64/0.16.17: 397 | resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==} 398 | engines: {node: '>=12'} 399 | cpu: [x64] 400 | os: [netbsd] 401 | requiresBuild: true 402 | dev: true 403 | optional: true 404 | 405 | /@esbuild/openbsd-x64/0.16.17: 406 | resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==} 407 | engines: {node: '>=12'} 408 | cpu: [x64] 409 | os: [openbsd] 410 | requiresBuild: true 411 | dev: true 412 | optional: true 413 | 414 | /@esbuild/sunos-x64/0.16.17: 415 | resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==} 416 | engines: {node: '>=12'} 417 | cpu: [x64] 418 | os: [sunos] 419 | requiresBuild: true 420 | dev: true 421 | optional: true 422 | 423 | /@esbuild/win32-arm64/0.16.17: 424 | resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==} 425 | engines: {node: '>=12'} 426 | cpu: [arm64] 427 | os: [win32] 428 | requiresBuild: true 429 | dev: true 430 | optional: true 431 | 432 | /@esbuild/win32-ia32/0.16.17: 433 | resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==} 434 | engines: {node: '>=12'} 435 | cpu: [ia32] 436 | os: [win32] 437 | requiresBuild: true 438 | dev: true 439 | optional: true 440 | 441 | /@esbuild/win32-x64/0.16.17: 442 | resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==} 443 | engines: {node: '>=12'} 444 | cpu: [x64] 445 | os: [win32] 446 | requiresBuild: true 447 | dev: true 448 | optional: true 449 | 450 | /@jridgewell/gen-mapping/0.1.1: 451 | resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==} 452 | engines: {node: '>=6.0.0'} 453 | dependencies: 454 | '@jridgewell/set-array': 1.1.2 455 | '@jridgewell/sourcemap-codec': 1.4.14 456 | dev: true 457 | 458 | /@jridgewell/gen-mapping/0.3.2: 459 | resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} 460 | engines: {node: '>=6.0.0'} 461 | dependencies: 462 | '@jridgewell/set-array': 1.1.2 463 | '@jridgewell/sourcemap-codec': 1.4.14 464 | '@jridgewell/trace-mapping': 0.3.17 465 | dev: true 466 | 467 | /@jridgewell/resolve-uri/3.1.0: 468 | resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} 469 | engines: {node: '>=6.0.0'} 470 | dev: true 471 | 472 | /@jridgewell/set-array/1.1.2: 473 | resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} 474 | engines: {node: '>=6.0.0'} 475 | dev: true 476 | 477 | /@jridgewell/sourcemap-codec/1.4.14: 478 | resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} 479 | dev: true 480 | 481 | /@jridgewell/trace-mapping/0.3.17: 482 | resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==} 483 | dependencies: 484 | '@jridgewell/resolve-uri': 3.1.0 485 | '@jridgewell/sourcemap-codec': 1.4.14 486 | dev: true 487 | 488 | /@types/prop-types/15.7.5: 489 | resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} 490 | dev: true 491 | 492 | /@types/react-dom/18.0.10: 493 | resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==} 494 | dependencies: 495 | '@types/react': 18.0.27 496 | dev: true 497 | 498 | /@types/react/18.0.27: 499 | resolution: {integrity: sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==} 500 | dependencies: 501 | '@types/prop-types': 15.7.5 502 | '@types/scheduler': 0.16.2 503 | csstype: 3.1.1 504 | dev: true 505 | 506 | /@types/scheduler/0.16.2: 507 | resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} 508 | dev: true 509 | 510 | /@vitejs/plugin-react/3.1.0_vite@4.1.1: 511 | resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==} 512 | engines: {node: ^14.18.0 || >=16.0.0} 513 | peerDependencies: 514 | vite: ^4.1.0-beta.0 515 | dependencies: 516 | '@babel/core': 7.20.12 517 | '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.20.12 518 | '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.12 519 | magic-string: 0.27.0 520 | react-refresh: 0.14.0 521 | vite: 4.1.1 522 | transitivePeerDependencies: 523 | - supports-color 524 | dev: true 525 | 526 | /ansi-styles/3.2.1: 527 | resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} 528 | engines: {node: '>=4'} 529 | dependencies: 530 | color-convert: 1.9.3 531 | dev: true 532 | 533 | /browserslist/4.21.5: 534 | resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==} 535 | engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} 536 | hasBin: true 537 | dependencies: 538 | caniuse-lite: 1.0.30001451 539 | electron-to-chromium: 1.4.289 540 | node-releases: 2.0.10 541 | update-browserslist-db: 1.0.10_browserslist@4.21.5 542 | dev: true 543 | 544 | /caniuse-lite/1.0.30001451: 545 | resolution: {integrity: sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w==} 546 | dev: true 547 | 548 | /chalk/2.4.2: 549 | resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} 550 | engines: {node: '>=4'} 551 | dependencies: 552 | ansi-styles: 3.2.1 553 | escape-string-regexp: 1.0.5 554 | supports-color: 5.5.0 555 | dev: true 556 | 557 | /color-convert/1.9.3: 558 | resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} 559 | dependencies: 560 | color-name: 1.1.3 561 | dev: true 562 | 563 | /color-name/1.1.3: 564 | resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==} 565 | dev: true 566 | 567 | /convert-source-map/1.9.0: 568 | resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} 569 | dev: true 570 | 571 | /csstype/3.1.1: 572 | resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==} 573 | dev: true 574 | 575 | /debug/4.3.4: 576 | resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} 577 | engines: {node: '>=6.0'} 578 | peerDependencies: 579 | supports-color: '*' 580 | peerDependenciesMeta: 581 | supports-color: 582 | optional: true 583 | dependencies: 584 | ms: 2.1.2 585 | dev: true 586 | 587 | /electron-to-chromium/1.4.289: 588 | resolution: {integrity: sha512-relLdMfPBxqGCxy7Gyfm1HcbRPcFUJdlgnCPVgQ23sr1TvUrRJz0/QPoGP0+x41wOVSTN/Wi3w6YDgHiHJGOzg==} 589 | dev: true 590 | 591 | /esbuild/0.16.17: 592 | resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==} 593 | engines: {node: '>=12'} 594 | hasBin: true 595 | requiresBuild: true 596 | optionalDependencies: 597 | '@esbuild/android-arm': 0.16.17 598 | '@esbuild/android-arm64': 0.16.17 599 | '@esbuild/android-x64': 0.16.17 600 | '@esbuild/darwin-arm64': 0.16.17 601 | '@esbuild/darwin-x64': 0.16.17 602 | '@esbuild/freebsd-arm64': 0.16.17 603 | '@esbuild/freebsd-x64': 0.16.17 604 | '@esbuild/linux-arm': 0.16.17 605 | '@esbuild/linux-arm64': 0.16.17 606 | '@esbuild/linux-ia32': 0.16.17 607 | '@esbuild/linux-loong64': 0.16.17 608 | '@esbuild/linux-mips64el': 0.16.17 609 | '@esbuild/linux-ppc64': 0.16.17 610 | '@esbuild/linux-riscv64': 0.16.17 611 | '@esbuild/linux-s390x': 0.16.17 612 | '@esbuild/linux-x64': 0.16.17 613 | '@esbuild/netbsd-x64': 0.16.17 614 | '@esbuild/openbsd-x64': 0.16.17 615 | '@esbuild/sunos-x64': 0.16.17 616 | '@esbuild/win32-arm64': 0.16.17 617 | '@esbuild/win32-ia32': 0.16.17 618 | '@esbuild/win32-x64': 0.16.17 619 | dev: true 620 | 621 | /escalade/3.1.1: 622 | resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} 623 | engines: {node: '>=6'} 624 | dev: true 625 | 626 | /escape-string-regexp/1.0.5: 627 | resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} 628 | engines: {node: '>=0.8.0'} 629 | dev: true 630 | 631 | /fsevents/2.3.2: 632 | resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} 633 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 634 | os: [darwin] 635 | requiresBuild: true 636 | dev: true 637 | optional: true 638 | 639 | /function-bind/1.1.1: 640 | resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} 641 | dev: true 642 | 643 | /gensync/1.0.0-beta.2: 644 | resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} 645 | engines: {node: '>=6.9.0'} 646 | dev: true 647 | 648 | /globals/11.12.0: 649 | resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} 650 | engines: {node: '>=4'} 651 | dev: true 652 | 653 | /has-flag/3.0.0: 654 | resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==} 655 | engines: {node: '>=4'} 656 | dev: true 657 | 658 | /has/1.0.3: 659 | resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} 660 | engines: {node: '>= 0.4.0'} 661 | dependencies: 662 | function-bind: 1.1.1 663 | dev: true 664 | 665 | /is-core-module/2.11.0: 666 | resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} 667 | dependencies: 668 | has: 1.0.3 669 | dev: true 670 | 671 | /js-tokens/4.0.0: 672 | resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} 673 | 674 | /jsesc/2.5.2: 675 | resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} 676 | engines: {node: '>=4'} 677 | hasBin: true 678 | dev: true 679 | 680 | /json5/2.2.3: 681 | resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} 682 | engines: {node: '>=6'} 683 | hasBin: true 684 | dev: true 685 | 686 | /loose-envify/1.4.0: 687 | resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} 688 | hasBin: true 689 | dependencies: 690 | js-tokens: 4.0.0 691 | dev: false 692 | 693 | /lru-cache/5.1.1: 694 | resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} 695 | dependencies: 696 | yallist: 3.1.1 697 | dev: true 698 | 699 | /magic-string/0.27.0: 700 | resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} 701 | engines: {node: '>=12'} 702 | dependencies: 703 | '@jridgewell/sourcemap-codec': 1.4.14 704 | dev: true 705 | 706 | /ms/2.1.2: 707 | resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} 708 | dev: true 709 | 710 | /nanoid/3.3.4: 711 | resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==} 712 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} 713 | hasBin: true 714 | dev: true 715 | 716 | /node-releases/2.0.10: 717 | resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==} 718 | dev: true 719 | 720 | /path-parse/1.0.7: 721 | resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} 722 | dev: true 723 | 724 | /picocolors/1.0.0: 725 | resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} 726 | dev: true 727 | 728 | /postcss/8.4.21: 729 | resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} 730 | engines: {node: ^10 || ^12 || >=14} 731 | dependencies: 732 | nanoid: 3.3.4 733 | picocolors: 1.0.0 734 | source-map-js: 1.0.2 735 | dev: true 736 | 737 | /react-dom/18.2.0_react@18.2.0: 738 | resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} 739 | peerDependencies: 740 | react: ^18.2.0 741 | dependencies: 742 | loose-envify: 1.4.0 743 | react: 18.2.0 744 | scheduler: 0.23.0 745 | dev: false 746 | 747 | /react-refresh/0.14.0: 748 | resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} 749 | engines: {node: '>=0.10.0'} 750 | dev: true 751 | 752 | /react/18.2.0: 753 | resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} 754 | engines: {node: '>=0.10.0'} 755 | dependencies: 756 | loose-envify: 1.4.0 757 | dev: false 758 | 759 | /resolve/1.22.1: 760 | resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==} 761 | hasBin: true 762 | dependencies: 763 | is-core-module: 2.11.0 764 | path-parse: 1.0.7 765 | supports-preserve-symlinks-flag: 1.0.0 766 | dev: true 767 | 768 | /rollup/3.14.0: 769 | resolution: {integrity: sha512-o23sdgCLcLSe3zIplT9nQ1+r97okuaiR+vmAPZPTDYB7/f3tgWIYNyiQveMsZwshBT0is4eGax/HH83Q7CG+/Q==} 770 | engines: {node: '>=14.18.0', npm: '>=8.0.0'} 771 | hasBin: true 772 | optionalDependencies: 773 | fsevents: 2.3.2 774 | dev: true 775 | 776 | /scheduler/0.23.0: 777 | resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} 778 | dependencies: 779 | loose-envify: 1.4.0 780 | dev: false 781 | 782 | /semver/6.3.0: 783 | resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==} 784 | hasBin: true 785 | dev: true 786 | 787 | /source-map-js/1.0.2: 788 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} 789 | engines: {node: '>=0.10.0'} 790 | dev: true 791 | 792 | /supports-color/5.5.0: 793 | resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} 794 | engines: {node: '>=4'} 795 | dependencies: 796 | has-flag: 3.0.0 797 | dev: true 798 | 799 | /supports-preserve-symlinks-flag/1.0.0: 800 | resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} 801 | engines: {node: '>= 0.4'} 802 | dev: true 803 | 804 | /to-fast-properties/2.0.0: 805 | resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} 806 | engines: {node: '>=4'} 807 | dev: true 808 | 809 | /typescript/4.9.5: 810 | resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==} 811 | engines: {node: '>=4.2.0'} 812 | hasBin: true 813 | dev: true 814 | 815 | /update-browserslist-db/1.0.10_browserslist@4.21.5: 816 | resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==} 817 | hasBin: true 818 | peerDependencies: 819 | browserslist: '>= 4.21.0' 820 | dependencies: 821 | browserslist: 4.21.5 822 | escalade: 3.1.1 823 | picocolors: 1.0.0 824 | dev: true 825 | 826 | /vite/4.1.1: 827 | resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==} 828 | engines: {node: ^14.18.0 || >=16.0.0} 829 | hasBin: true 830 | peerDependencies: 831 | '@types/node': '>= 14' 832 | less: '*' 833 | sass: '*' 834 | stylus: '*' 835 | sugarss: '*' 836 | terser: ^5.4.0 837 | peerDependenciesMeta: 838 | '@types/node': 839 | optional: true 840 | less: 841 | optional: true 842 | sass: 843 | optional: true 844 | stylus: 845 | optional: true 846 | sugarss: 847 | optional: true 848 | terser: 849 | optional: true 850 | dependencies: 851 | esbuild: 0.16.17 852 | postcss: 8.4.21 853 | resolve: 1.22.1 854 | rollup: 3.14.0 855 | optionalDependencies: 856 | fsevents: 2.3.2 857 | dev: true 858 | 859 | /yallist/3.1.1: 860 | resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} 861 | dev: true 862 | -------------------------------------------------------------------------------- /example/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Dialog1 from './components/Dialog1'; 2 | import Dialog2 from './components/Dialog2'; 3 | import { d } from './lib/dialog'; 4 | 5 | function App() { 6 | const { open: open1, close: close1 } = d.useDialog('dialog1'); 7 | const { open: open2, close: close2 } = d.useDialog('dialog2', { 8 | title2: 'LOL', 9 | content2: 'lololol', 10 | }); 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /example/src/components/Dialog1.tsx: -------------------------------------------------------------------------------- 1 | import { d } from '../lib/dialog'; 2 | 3 | const Dialog1 = () => { 4 | const { props, isOpen, handleClose } = d.useDialogController('dialog1'); 5 | 6 | if (!isOpen) { 7 | return <>; 8 | } 9 | 10 | return ( 11 |
12 |
Dialog1
13 |
title:{props.title1}
14 |
content:{props.content1}
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default Dialog1; 21 | -------------------------------------------------------------------------------- /example/src/components/Dialog2.tsx: -------------------------------------------------------------------------------- 1 | import { d } from '../lib/dialog'; 2 | 3 | const Dialog2 = () => { 4 | const { props, isOpen, handleClose } = d.useDialogController('dialog2'); 5 | 6 | if (!isOpen) { 7 | return <>; 8 | } 9 | 10 | return ( 11 |
12 |
Dialog2
13 |
title:{props.title2}
14 |
content:{props.content2}
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default Dialog2; 21 | -------------------------------------------------------------------------------- /example/src/lib/dialog.ts: -------------------------------------------------------------------------------- 1 | import { createDialogHooks, createDialogs } from '../../../src'; 2 | 3 | export const dialogs = createDialogs({ 4 | dialog1: { title1: '111', content1: '11111' }, 5 | dialog2: { title2: '222', content2: '22222' }, 6 | }); 7 | 8 | export const d = createDialogHooks(dialogs); 9 | -------------------------------------------------------------------------------- /example/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import { DialogProvider } from '../../src'; 5 | import App from './App'; 6 | import { dialogs } from './lib/dialog'; 7 | 8 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 9 | 10 | 11 | 12 | 13 | , 14 | ); 15 | -------------------------------------------------------------------------------- /example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /example/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hook-dialog", 3 | "version": "1.2.1", 4 | "description": "React hooks for master your dialog(modal) component", 5 | "sideEffects": false, 6 | "source": "src/index.ts", 7 | "files": [ 8 | "dist" 9 | ], 10 | "main": "dist/react-hook-dialog.js", 11 | "module": "dist/react-hook-dialog.module.js", 12 | "unpkg": "dist/react-hook-dialog.umd.js", 13 | "types": "dist/index.d.ts", 14 | "scripts": { 15 | "prepare": "simple-git-hooks", 16 | "prepublishOnly": "pnpm run build", 17 | "build": "rimraf dist && microbundle -f es,umd,cjs --globals react/jsx-runtime=jsx", 18 | "format": "prettier --write \"**/*.{js,ts,tsx,md}\"", 19 | "lint": "eslint \"**/*.{js,ts,tsx}\" --fix" 20 | }, 21 | "keywords": [ 22 | "react", 23 | "hook", 24 | "dialog", 25 | "modal" 26 | ], 27 | "repository": "git@github.com:jsun969/react-hook-dialog.git", 28 | "author": "Justin Sun", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "@trivago/prettier-plugin-sort-imports": "^3.4.0", 32 | "@types/react": "^18.0.27", 33 | "@types/react-dom": "^18.0.10", 34 | "@typescript-eslint/eslint-plugin": "^5.51.0", 35 | "@typescript-eslint/parser": "^5.51.0", 36 | "eslint": "^8.33.0", 37 | "eslint-config-prettier": "^8.6.0", 38 | "eslint-plugin-prettier": "^4.2.1", 39 | "eslint-plugin-react": "^7.32.2", 40 | "eslint-plugin-react-hooks": "^4.6.0", 41 | "lint-staged": "^13.1.1", 42 | "microbundle": "^0.15.1", 43 | "prettier": "^2.8.3", 44 | "react": "^18.2.0", 45 | "react-dom": "^18.2.0", 46 | "rimraf": "^3.0.2", 47 | "simple-git-hooks": "^2.8.1", 48 | "typescript": "^4.9.5" 49 | }, 50 | "peerDependencies": { 51 | "react": "^16.8.0 || ^17 || ^18" 52 | }, 53 | "lint-staged": { 54 | "*.{js,ts,tsx,md}": [ 55 | "prettier --write" 56 | ] 57 | }, 58 | "simple-git-hooks": { 59 | "pre-commit": "npx lint-staged" 60 | } 61 | } -------------------------------------------------------------------------------- /src/DialogProvider.tsx: -------------------------------------------------------------------------------- 1 | import type React from 'react'; 2 | import { createContext, useContext, useState } from 'react'; 3 | 4 | import type { Dialogs } from './types'; 5 | 6 | type DialogContentValue = { 7 | globalState: TDialogs; 8 | setGlobalState: React.Dispatch>; 9 | initialDialogs: TDialogs; 10 | }; 11 | 12 | const DialogContext = createContext>(null as any); 13 | 14 | export const useDialogGlobalState = () => 15 | useContext( 16 | DialogContext as unknown as React.Context>, 17 | ); 18 | 19 | type DialogProviderProps = { 20 | dialogs: Dialogs; 21 | children?: React.ReactNode; 22 | }; 23 | 24 | export const DialogProvider = ({ dialogs, children }: DialogProviderProps) => { 25 | const [globalState, setGlobalState] = useState(dialogs); 26 | 27 | return ( 28 | 35 | {children} 36 | 37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /src/createDialogHooks.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | Dialogs, 3 | GetDialogControllerHookReturn, 4 | GetDialogHookReturn, 5 | GetDialogProps, 6 | } from './types'; 7 | import { useDialog as _useDialog } from './useDialog'; 8 | import { useDialogController as _useDialogController } from './useDialogController'; 9 | 10 | export const createDialogHooks = ( 11 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 12 | dialogs: TDialogs, 13 | ) => { 14 | const useDialog = < 15 | D extends TDialogs, 16 | TName extends keyof D, 17 | TProps extends GetDialogProps, 18 | >( 19 | name: TName, 20 | props?: TProps, 21 | ): GetDialogHookReturn => _useDialog(name, props); 22 | 23 | const useDialogController = ( 24 | name: TName, 25 | ): GetDialogControllerHookReturn => 26 | _useDialogController(name); 27 | 28 | return { useDialog, useDialogController }; 29 | }; 30 | -------------------------------------------------------------------------------- /src/createDialogs.ts: -------------------------------------------------------------------------------- 1 | import type { DialogProps } from './types'; 2 | 3 | export const createDialogs = < 4 | TDefaultDialogs extends Record, 5 | >( 6 | defaultProps: TDefaultDialogs, 7 | ): { 8 | [Name in keyof TDefaultDialogs]: TDefaultDialogs[Name] & { isOpen: boolean }; 9 | } => { 10 | return Object.entries(defaultProps).reduce((prev, [name, props]) => { 11 | prev[name] = { ...(props as any), isOpen: false }; 12 | return prev; 13 | }, {} as any); 14 | }; 15 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { createDialogHooks } from './createDialogHooks'; 2 | export { createDialogs } from './createDialogs'; 3 | export { DialogProvider } from './DialogProvider'; 4 | export * from './types'; 5 | export { useDialog } from './useDialog'; 6 | export { useDialogController } from './useDialogController'; 7 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type DialogProps = Record; 2 | export type DialogPropsWithOpen = { isOpen: boolean } & DialogProps; 3 | export type Dialogs = Record>; 4 | 5 | export type GetDialogProps = Partial< 6 | Omit 7 | >; 8 | 9 | export type GetDialogControllerHookReturn = 10 | { 11 | isOpen: boolean; 12 | handleClose: () => void; 13 | props: Omit; 14 | }; 15 | export type GetDialogHookReturn< 16 | TProps extends GetDialogProps, 17 | > = { 18 | open: (openProps?: Partial) => void; 19 | close: () => void; 20 | isOpen: boolean; 21 | }; 22 | -------------------------------------------------------------------------------- /src/useDialog.ts: -------------------------------------------------------------------------------- 1 | import { useDialogGlobalState } from './DialogProvider'; 2 | import type { Dialogs, GetDialogHookReturn, GetDialogProps } from './types'; 3 | 4 | export const useDialog = < 5 | TDialogs extends Dialogs, 6 | TName extends keyof TDialogs, 7 | TProps extends GetDialogProps, 8 | >( 9 | name: TName, 10 | props?: TProps, 11 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 12 | dialogs?: TDialogs, 13 | ): GetDialogHookReturn => { 14 | const { globalState, setGlobalState, initialDialogs } = 15 | useDialogGlobalState(); 16 | 17 | const open = (openProps?: Partial) => { 18 | setGlobalState((state) => ({ 19 | ...state, 20 | [name]: { ...initialDialogs[name], isOpen: true, ...props, ...openProps }, 21 | })); 22 | }; 23 | 24 | const close = () => { 25 | setGlobalState((state) => ({ ...state, [name]: initialDialogs[name] })); 26 | }; 27 | 28 | return { open, close, isOpen: globalState[name].isOpen }; 29 | }; 30 | -------------------------------------------------------------------------------- /src/useDialogController.ts: -------------------------------------------------------------------------------- 1 | import { useDialogGlobalState } from './DialogProvider'; 2 | import type { Dialogs, GetDialogControllerHookReturn } from './types'; 3 | 4 | export const useDialogController = < 5 | TDialogs extends Dialogs, 6 | TName extends keyof TDialogs, 7 | >( 8 | name: TName, 9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 10 | dialogs?: TDialogs, 11 | ): GetDialogControllerHookReturn => { 12 | const { globalState, setGlobalState, initialDialogs } = 13 | useDialogGlobalState(); 14 | 15 | const { isOpen, ...props } = globalState[name]; 16 | const handleClose = () => { 17 | setGlobalState((state) => ({ ...state, [name]: initialDialogs[name] })); 18 | }; 19 | 20 | return { isOpen, handleClose, props }; 21 | }; 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "sourceMap": true, 4 | "target": "ES6", 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "jsx": "react-jsx", 8 | "jsxFactory": "", 9 | "jsxFragmentFactory": "", 10 | "skipLibCheck": true, 11 | "noEmit": true, 12 | "allowSyntheticDefaultImports": true, 13 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "resolveJsonModule": true 17 | }, 18 | "include": ["src"], 19 | "exclude": ["src/__tests__"] 20 | } 21 | --------------------------------------------------------------------------------