├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── BUG_REPORT.md │ └── QUESTION.md ├── PULL_REQUEST_TEMPLATE.md ├── docs-images │ ├── react-native-dialog-android-alert.png │ ├── react-native-dialog-android-input.png │ ├── react-native-dialog-ios-alert.png │ └── react-native-dialog-ios-input.png └── workflows │ ├── release.yml │ └── test.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── example ├── .buckconfig ├── .gitattributes ├── .gitignore ├── App.js ├── README.md ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.java │ │ │ │ ├── MainApplication.java │ │ │ │ └── generated │ │ │ │ └── BasePackageList.java │ │ │ └── res │ │ │ ├── drawable │ │ │ ├── splashscreen.xml │ │ │ └── splashscreen_image.png │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── Podfile.lock │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── example.xcscheme │ ├── example.xcworkspace │ │ └── contents.xcworkspacedata │ └── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ ├── Contents.json │ │ ├── SplashScreen.imageset │ │ │ ├── Contents.json │ │ │ └── splashscreen.png │ │ └── SplashScreenBackground.imageset │ │ │ ├── Contents.json │ │ │ └── background.png │ │ ├── Info.plist │ │ ├── SplashScreen.storyboard │ │ ├── Supporting │ │ └── Expo.plist │ │ └── main.m ├── metro.config.js ├── package-lock.json ├── package.json └── sync-local-package.sh ├── package-lock.json ├── package.json ├── src ├── Button.tsx ├── CodeInput.tsx ├── Container.tsx ├── Description.tsx ├── Input.tsx ├── Modal.tsx ├── Switch.tsx ├── Title.tsx ├── index.ts └── useTheme.ts └── tsconfig.json /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 2017, 6 | "sourceType": "module", 7 | "ecmaFeatures": { 8 | "jsx": true 9 | } 10 | }, 11 | "plugins": [ 12 | "@typescript-eslint", 13 | "react-native" 14 | ], 15 | "extends": [ 16 | "plugin:react/recommended", 17 | "prettier/@typescript-eslint", 18 | "plugin:@typescript-eslint/eslint-recommended", 19 | "plugin:@typescript-eslint/recommended", 20 | "plugin:prettier/recommended" 21 | ], 22 | "settings": { 23 | "react": { 24 | "version": "detect" 25 | } 26 | }, 27 | "rules": { 28 | "@typescript-eslint/explicit-module-boundary-types": 0, 29 | "@typescript-eslint/no-explicit-any": 0, 30 | "react/prop-types": 0 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/BUG_REPORT.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Report a bug 3 | about: Report a reproducible or regression bug. 4 | labels: "bug" 5 | --- 6 | 7 | ## Environment 8 | 9 | 10 | 11 | ## Platforms 12 | 13 | 14 | 15 | ## Versions 16 | 17 | 18 | 19 | - Android: 20 | - iOS: 21 | - react-native-dialog: 22 | - react-native: 23 | - react: 24 | 25 | ## Description 26 | 27 | 28 | 29 | ## Reproducible Demo 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/QUESTION.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 💬 Question 3 | about: Need a new feature? Have a quick question about the library? 4 | labels: "question" 5 | --- 6 | 7 | ## Ask your Question 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | 4 | 5 | 6 | # Test Plan 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/docs-images/react-native-dialog-android-alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-android-alert.png -------------------------------------------------------------------------------- /.github/docs-images/react-native-dialog-android-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-android-input.png -------------------------------------------------------------------------------- /.github/docs-images/react-native-dialog-ios-alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-ios-alert.png -------------------------------------------------------------------------------- /.github/docs-images/react-native-dialog-ios-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmazzarolo/react-native-dialog/1921f3c5aaa6a6be94ee653b4272156c39e8592b/.github/docs-images/react-native-dialog-ios-input.png -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | jobs: 8 | release: 9 | name: Release 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: Checkout 13 | uses: actions/checkout@v2 14 | 15 | - name: Setup node 16 | uses: actions/setup-node@v1 17 | with: 18 | node-version: '12.x' 19 | 20 | - name: Restore ~/.npm cache 21 | uses: actions/cache@v2 22 | with: 23 | path: ~/.npm 24 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 25 | restore-keys: | 26 | ${{ runner.os }}-node- 27 | 28 | - name: Install dependencies 29 | run: npm ci 30 | 31 | - name: Build 32 | run: npm run build 33 | 34 | - name: Release 35 | env: 36 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 37 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 38 | run: npx semantic-release -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Build & Test 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | test: 13 | runs-on: ubuntu-latest 14 | name: Build & Lint 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v2 18 | 19 | - name: Setup node 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: '12.x' 23 | 24 | - name: Restore ~/.npm cache 25 | uses: actions/cache@v2 26 | with: 27 | path: ~/.npm 28 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 29 | restore-keys: | 30 | ${{ runner.os }}-node- 31 | 32 | - name: Install dependencies 33 | run: npm ci 34 | 35 | - name: Run build 36 | run: npm run build 37 | 38 | - name: Run lint 39 | run: npm run lint 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Node.js 6 | node_modules/ 7 | npm-debug.log 8 | jsconfig.json 9 | dump.rdb 10 | .vscode 11 | .idea 12 | 13 | /lib 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [9.3.0](https://github.com/mmazzarolo/react-native-dialog/compare/v9.2.2...v9.3.0) (2022-10-31) 2 | 3 | 4 | ### Features 5 | 6 | * Add unstableLabelStyle & fix switch statement comparison method ([#150](https://github.com/mmazzarolo/react-native-dialog/issues/150)) ([839915b](https://github.com/mmazzarolo/react-native-dialog/commit/839915bc546707526f3853d454fbe87b24d2cac3)) 7 | 8 | ## [9.2.2](https://github.com/mmazzarolo/react-native-dialog/compare/v9.2.1...v9.2.2) (2022-06-09) 9 | 10 | 11 | ### Bug Fixes 12 | 13 | * remove usage of PropTypes ([#139](https://github.com/mmazzarolo/react-native-dialog/issues/139)) ([538ff00](https://github.com/mmazzarolo/react-native-dialog/commit/538ff007942145d1d9aa85a34d65afa25015db16)) 14 | 15 | ## [9.2.1](https://github.com/mmazzarolo/react-native-dialog/compare/v9.2.0...v9.2.1) (2022-02-11) 16 | 17 | 18 | ### Bug Fixes 19 | 20 | * ios description platform color ([#133](https://github.com/mmazzarolo/react-native-dialog/issues/133)) ([2952f47](https://github.com/mmazzarolo/react-native-dialog/commit/2952f470130ce119e5d5dcd4844d3bcae3513e3d)) 21 | 22 | # [9.2.0](https://github.com/mmazzarolo/react-native-dialog/compare/v9.1.2...v9.2.0) (2021-10-23) 23 | 24 | 25 | ### Features 26 | 27 | * Add `CodeInput` component ([#128](https://github.com/mmazzarolo/react-native-dialog/issues/128)) ([961f9a0](https://github.com/mmazzarolo/react-native-dialog/commit/961f9a0e9c1803fcc1bfcd8ded1e697054899bb9)) 28 | 29 | ## [9.1.2](https://github.com/mmazzarolo/react-native-dialog/compare/v9.1.1...v9.1.2) (2021-10-01) 30 | 31 | 32 | ### Bug Fixes 33 | 34 | * Change style propType of Input from View to Text ([#124](https://github.com/mmazzarolo/react-native-dialog/issues/124)) ([d71d204](https://github.com/mmazzarolo/react-native-dialog/commit/d71d20489c5d4e7038ebbb8dc183fc352d87b409)) 35 | 36 | ## [9.1.1](https://github.com/mmazzarolo/react-native-dialog/compare/v9.1.0...v9.1.1) (2021-09-30) 37 | 38 | 39 | ### Bug Fixes 40 | 41 | * Make Button label prop type required ([#123](https://github.com/mmazzarolo/react-native-dialog/issues/123)) ([e096d6b](https://github.com/mmazzarolo/react-native-dialog/commit/e096d6bf6814a114bb635585caa0babe72c3bd1c)) 42 | 43 | # [9.1.0](https://github.com/mmazzarolo/react-native-dialog/compare/v9.0.0...v9.1.0) (2021-09-08) 44 | 45 | 46 | ### Features 47 | 48 | * Expose `useNativeDriver` as `Container` prop ([#122](https://github.com/mmazzarolo/react-native-dialog/issues/122)) ([dd6d979](https://github.com/mmazzarolo/react-native-dialog/commit/dd6d979279b22ad869d95ba530a1e9cd1fc1601b)) 49 | 50 | # [9.0.0](https://github.com/mmazzarolo/react-native-dialog/compare/v8.2.0...v9.0.0) (2021-09-08) 51 | 52 | 53 | ### Bug Fixes 54 | 55 | * Typescript updates ([#121](https://github.com/mmazzarolo/react-native-dialog/issues/121)) ([1ba6f16](https://github.com/mmazzarolo/react-native-dialog/commit/1ba6f16fb2127f8da7e41c79444709b56cb0d4f6)) 56 | 57 | 58 | ### BREAKING CHANGES 59 | 60 | * Updated TypeScript type definitions. Types _should_ just be more relaxed now — but since we updated the entire codebase we'll release this a major bump to be safe. 61 | 62 | # [8.2.0](https://github.com/mmazzarolo/react-native-dialog/compare/v8.1.1...v8.2.0) (2021-07-19) 63 | 64 | 65 | ### Features 66 | 67 | * Handle hardware back button on Android ([#114](https://github.com/mmazzarolo/react-native-dialog/issues/114)) ([e9b6cf5](https://github.com/mmazzarolo/react-native-dialog/commit/e9b6cf583cb5070cbb4c542ec9569e29fae3877a)) 68 | 69 | ## [8.1.1](https://github.com/mmazzarolo/react-native-dialog/compare/v8.1.0...v8.1.1) (2021-07-15) 70 | 71 | 72 | ### Bug Fixes 73 | 74 | * **title:** children prop allows node instead of string ([#112](https://github.com/mmazzarolo/react-native-dialog/issues/112)) ([8290768](https://github.com/mmazzarolo/react-native-dialog/commit/8290768e73cf22e85404c6ebec9a328a3f0bf022)) 75 | 76 | # [8.1.0](https://github.com/mmazzarolo/react-native-dialog/compare/v8.0.1...v8.1.0) (2021-07-12) 77 | 78 | 79 | ### Features 80 | 81 | * Added support for vertical buttons ([bebc3d0](https://github.com/mmazzarolo/react-native-dialog/commit/bebc3d040bdc0749e5bfbdc3c05ceebfaec7c8d5)) 82 | 83 | ## [8.0.1](https://github.com/mmazzarolo/react-native-dialog/compare/v8.0.0...v8.0.1) (2021-04-18) 84 | 85 | 86 | ### Bug Fixes 87 | 88 | * Mark "textInputRef" and "blurComponentIOS" as optional ([#103](https://github.com/mmazzarolo/react-native-dialog/issues/103)) ([c92fe5d](https://github.com/mmazzarolo/react-native-dialog/commit/c92fe5d1492bbe55d06c7af4dec2be653360640f)) 89 | 90 | # [8.0.0](https://github.com/mmazzarolo/react-native-dialog/compare/v7.0.0...v8.0.0) (2021-04-17) 91 | 92 | 93 | ### Features 94 | 95 | * Use TypeScript in the codebase and expose TypeScript type-definitions ([#101](https://github.com/mmazzarolo/react-native-dialog/issues/101)) ([77d41f6](https://github.com/mmazzarolo/react-native-dialog/commit/77d41f6f5fae17650245684c10ab3de3df93e76b)) 96 | 97 | 98 | ### BREAKING CHANGES 99 | 100 | * Previous type definitions used in your app may not be compatible with this release anymore. 101 | 102 | # [7.0.0](https://github.com/mmazzarolo/react-native-dialog/compare/v6.2.0...v7.0.0) (2021-04-16) 103 | 104 | 105 | ### Features 106 | 107 | * Add support for dark mode ([#100](https://github.com/mmazzarolo/react-native-dialog/issues/100)) ([57b065e](https://github.com/mmazzarolo/react-native-dialog/commit/57b065e1524e64f28b7a07ebd8062d7b1982cc76)) 108 | 109 | 110 | ### BREAKING CHANGES 111 | 112 | * We are now using the native colors instead of the hardcoded ones — which means that if your react-native app is using a specific accent/primary color it will be now shown correctly in the dialog. 113 | 114 | # [6.2.0](https://github.com/mmazzarolo/react-native-dialog/compare/v6.1.2...v6.2.0) (2021-02-19) 115 | 116 | 117 | ### Features 118 | 119 | * add keyboardVerticalOffset support for iOS ([#93](https://github.com/mmazzarolo/react-native-dialog/issues/93)) ([f44d21b](https://github.com/mmazzarolo/react-native-dialog/commit/f44d21bbe72183c129fba72b79440af26c348b1e)) 120 | 121 | ## [6.1.2](https://github.com/mmazzarolo/react-native-dialog/compare/v6.1.1...v6.1.2) (2020-10-24) 122 | 123 | 124 | ### Bug Fixes 125 | 126 | * Always cover the whole screen (even with translucent status bar) ([#85](https://github.com/mmazzarolo/react-native-dialog/issues/85)) ([09b2f35](https://github.com/mmazzarolo/react-native-dialog/commit/09b2f3584890be76fd56d3e2719ea928e8130ebf)) 127 | 128 | ## [6.1.1](https://github.com/mmazzarolo/react-native-dialog/compare/v6.1.0...v6.1.1) (2020-10-18) 129 | 130 | 131 | ### Bug Fixes 132 | 133 | * Added onBackdropPress on proptypes & docs update ([8b273d4](https://github.com/mmazzarolo/react-native-dialog/commit/8b273d45e76502d9366db2f6888bfc911ab6b1a1)) 134 | 135 | # [6.1.0](https://github.com/mmazzarolo/react-native-dialog/compare/v6.0.1...v6.1.0) (2020-10-17) 136 | 137 | 138 | ### Features 139 | 140 | * Improved animation fidelity ([63ffbce](https://github.com/mmazzarolo/react-native-dialog/commit/63ffbce5f0e0fa63604529589815b94fc1625c85)) 141 | * Improved animation fidelity ([4480c0e](https://github.com/mmazzarolo/react-native-dialog/commit/4480c0e4c1622d8a29287112c07ba6e0c7ae2d8a)) 142 | 143 | ## [6.0.1](https://github.com/mmazzarolo/react-native-dialog/compare/v6.0.0...v6.0.1) (2020-10-17) 144 | 145 | 146 | ### Bug Fixes 147 | 148 | * Fix onBackdropPress trigger ([9a8865e](https://github.com/mmazzarolo/react-native-dialog/commit/9a8865ecbfb1fcc567dbea07235f3c3831b76c4c)) 149 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 React Native Community 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 | # react-native-dialog 2 | 3 | [![npm version](https://badge.fury.io/js/react-native-dialog.svg)](https://badge.fury.io/js/react-native-dialog) 4 | 5 | A flexible pure JavaScript React-Native dialog that follows closely the native UI guidelines. 6 | 7 | ## Features 8 | 9 | - Support for iOS and Android (JavaScript API) 10 | - A flexible declarative API 11 | - Follows closely the UI of native dialogs/alerts 12 | - Can be used both as an alert and as an input prompt 13 | - Can be injected with any component 14 | - Supports light/dark mode 15 | 16 | ## Demo 17 | 18 |

19 | 20 | 21 |

22 | 23 |

24 | 25 | 26 |

27 | 28 | ## Setup 29 | 30 | Install the library using npm or yarn: 31 | 32 | ```bash 33 | # Using npm: 34 | $ npm install react-native-dialog 35 | # Using yarn: 36 | $ yarn add react-native-dialog 37 | ``` 38 | 39 | ## Usage 40 | 41 | React-native-dialog exposes a set of components that can be used to build the UI of the dialog: 42 | 43 | - **Dialog.Container**: This component is the root component of the dialog and all the other components should be nested inside it. 44 | - **Dialog.Title**: A `Text` component styled as a native dialog title. 45 | - **Dialog.Description**: A `Text` component styled as a native dialog description. 46 | - **Dialog.Button**: A component styled as a native dialog button. 47 | - **Dialog.Input**: A `TextInput` component styled as a native dialog input. 48 | - **Dialog.CodeInput**: A `TextInput` component styled as one time code input. 49 | - **Dialog.Switch**: A native `Switch` component with an optional label. 50 | 51 | 1. Import react-native-dialog: 52 | 53 | ```javascript 54 | import Dialog from "react-native-dialog"; 55 | ``` 56 | 57 | 2. Create a dialog and nest its content inside of it: 58 | 59 | ```javascript 60 | return ( 61 | 62 | 63 | Account delete 64 | 65 | Do you want to delete this account? You cannot undo this action. 66 | 67 | 68 | 69 | 70 | 71 | ); 72 | ``` 73 | 74 | 3. Then simply show it by setting the `visible` prop to true: 75 | 76 | ```javascript 77 | return ( 78 | 79 | 80 | Account delete 81 | 82 | Do you want to delete this account? You cannot undo this action. 83 | 84 | 85 | 86 | 87 | 88 | ); 89 | ``` 90 | 91 | The `visible` prop is the only prop you'll really need to make the dialog work: you should control this prop value by saving it in your state and setting it to `true` or `false` when needed. 92 | 93 | ## A complete example 94 | 95 | The following example consists in a component (`DialogTester`) with a button and a dialog. 96 | The dialog is controlled by the `dialogVisible` state variable and it is initially hidden since its value is `false`. 97 | Pressing the button sets `dialogVisible` to true, making the dialog visible. 98 | Inside the dialog there are two buttons that, when pressed, set `dialogVisible` to false, hiding the dialog. 99 | 100 | ```javascript 101 | import React, { useState } from "react"; 102 | import { Button, StyleSheet, View } from "react-native"; 103 | import Dialog from "react-native-dialog"; 104 | 105 | export default function App() { 106 | const [visible, setVisible] = useState(false); 107 | 108 | const showDialog = () => { 109 | setVisible(true); 110 | }; 111 | 112 | const handleCancel = () => { 113 | setVisible(false); 114 | }; 115 | 116 | const handleDelete = () => { 117 | // The user has pressed the "Delete" button, so here you can do your own logic. 118 | // ...Your logic 119 | setVisible(false); 120 | }; 121 | 122 | return ( 123 | 124 |