Merge pull request #89 from haradakunihiko/feature/fix-readme

Fixed readme using typescript
haradakunihiko · Aug 6, 2024 · ff3af7a · ff3af7a
2 parents 7f62297 + 25ed583
commit ff3af7a
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 119 deletions.
diff --git a/README.md b/README.md
@@ -32,29 +32,27 @@ react-confirm library offers several benefits:
 
 ### Create your dialog component and Apply `confirmable` HOC to your component.
 
-```js
-import React from 'react';
-import PropTypes from 'prop-types';
-import { confirmable } from 'react-confirm';
-import Dialog from 'any-dialog-library'; // your choice.
+```ts
+import * as React from 'react';
+
+import Modal from 'react-bootstrap/Modal'
+import Button from 'react-bootstrap/Button'
+
+import { confirmable, ConfirmDialog } from 'react-confirm';
 
-const YourDialog = ({show, proceed, confirmation, options}) => (
+export interface Props {
+  confirmation?: string;
+};
+
+const Confirmation: ConfirmDialog<Props, boolean> = ({show, proceed, confirmation}) => (
   <Dialog onHide={() => proceed(false)} show={show}>
     {confirmation}
     <button onClick={() => proceed(false)}>CANCEL</button>
     <button onClick={() => proceed(true)}>OK</button>
   </Dialog>
-)
-
-YourDialog.propTypes = {
-  show: PropTypes.bool,            // from confirmable. indicates if the dialog is shown or not.
-  proceed: PropTypes.func,         // from confirmable. call to close the dialog with promise resolved.
-  confirmation: PropTypes.string,  // arguments of your confirm function
-  options: PropTypes.object        // arguments of your confirm function
-}
+);
 
-// confirmable HOC pass props `show`, `dismiss`, `cancel` and `proceed` to your component.
-export default confirmable(YourDialog);
+export default confirmable(Confirmation);
 ```
 
 ### Create a function using `createConfirmation`
@@ -64,11 +62,6 @@ import YourDialog from './YourDialog';
 
 // create confirm function
 export const confirm = createConfirmation(YourDialog);
-
-// This is optional. But wrapping function makes it easy to use.
-export function confirmWrapper(confirmation, options = {}) {
-  return confirm({ confirmation, options });
-}
 ```
 
 ### Call it!
@@ -87,14 +80,6 @@ const handleOnClick = async () => {
   }
 }
 
-const handleOnClick2 = async () => {
-  if (await confirmWrapper('Are your sure?')) {
-    console.log('yes');
-  } else {
-    console.log('no');
-  }
-}
-
 ```
 
 You can check more complex example in [codesandbox](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)

diff --git a/example/material-ui/.gitignore b/example/material-ui/.gitignore
@@ -1,3 +1,2 @@
 static
 node_modules
-
diff --git a/example/material-ui/src/containers/App.js b/example/material-ui/src/containers/App.js
@@ -3,7 +3,7 @@ import confirm from '../util/confirm';
 import Theme from '../theme'
 
 const handleOnClick = () => {
-  confirm('Are you sure?').then(() => {
+  confirm({confirmation: 'Are you sure?'}).then(() => {
     console.log('proceed!') ;
   }, () => {
     console.log('cancel!');

diff --git a/example/material-ui/src/util/confirm.js b/example/material-ui/src/util/confirm.js
@@ -1,8 +1,4 @@
 import Confirmation from '../components/Confirmation';
 import { createConfirmation } from 'react-confirm';
 
-const confirm = createConfirmation(Confirmation);
-
-export default function(confirmation, options = {}) {
-  return confirm({ confirmation, ...options });
-}
+export const confirm = createConfirmation(Confirmation);
diff --git a/example/react-bootstrap/src/containers/App.js b/example/react-bootstrap/src/containers/App.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { confirm, confirmComplex } from '../util/confirm';
 
 const handleOnClick = async () => {
-  if (await confirm('Are your sure?')) {
+  if (await confirm({confirmation: 'Are your sure?'})) {
     console.log('yes');
   } else {
     console.log('no');

diff --git a/example/react-bootstrap/src/util/confirm.js b/example/react-bootstrap/src/util/confirm.js
@@ -2,10 +2,6 @@ import Confirmation from '../components/Confirmation';
 import ComplexConfirmation from '../components/ComplexConfirmation';
 import { createConfirmation } from 'react-confirm';
 
-const defaultConfirmation = createConfirmation(Confirmation);
-
-export function confirm(confirmation, options = {}) {
-  return defaultConfirmation({ confirmation, ...options });
-}
+export const confirm = createConfirmation(Confirmation);
 
 export const confirmComplex = createConfirmation(ComplexConfirmation);
diff --git a/example/ts-react-bootstrap-context/server.js b/example/ts-react-bootstrap-context/server.js
@@ -1,7 +1,7 @@
 var express = require('express');
 
 var app = new express();
-var port = 3001
+var port = 3000
 
 app.get("/", function(req, res) {
   res.sendFile(__dirname + '/index.html')

diff --git a/example/ts-react-bootstrap-context/src/components/ComplexConfirmation.tsx b/example/ts-react-bootstrap-context/src/components/ComplexConfirmation.tsx
@@ -3,7 +3,7 @@ import  * as React from 'react';
 import Button from 'react-bootstrap/Button'
 import FormControl from 'react-bootstrap/FormControl'
 import Modal from 'react-bootstrap/Modal'
-import { confirmable, ConfirmDialog, ConfirmDialogProps } from 'react-confirm';
+import { confirmable, ConfirmDialog } from 'react-confirm';
 import { ThemeContext } from '../context/context';
 
 
@@ -16,7 +16,7 @@ export interface Res {
   input: string,
 }
 
-const ComplexConfirmation: React.FC<ConfirmDialogProps<Props, Res>> = ({
+const ComplexConfirmation: ConfirmDialog<Props, Res> = ({
   show,
   proceed,
   dismiss,

diff --git a/example/ts-react-bootstrap-context/src/components/Confirmation.tsx b/example/ts-react-bootstrap-context/src/components/Confirmation.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Modal from 'react-bootstrap/Modal'
 import Button from 'react-bootstrap/Button'
 
-import { confirmable, ConfirmDialog, ConfirmDialogProps } from 'react-confirm';
+import { confirmable, ConfirmDialog } from 'react-confirm';
 import { ThemeContext } from '../context/context';
 
 export interface Props {
@@ -13,7 +13,7 @@ export interface Props {
   confirmation?: string;
 };
 
-const Confirmation: React.FC<ConfirmDialogProps<Props, boolean>> = (props) => (
+const Confirmation: ConfirmDialog<Props, boolean> = (props) => (
   <ThemeContext.Consumer>
     {
       (theme) => (

diff --git a/example/ts-react-bootstrap-context/src/containers/App.tsx b/example/ts-react-bootstrap-context/src/containers/App.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { confirm, confirmComplex } from '../util/confirm';
 
 const handleOnClick = async () => {
-  if (await confirm('Are your sure?')) {
+  if (await confirm({confirmation: 'Are your sure?'})) {
     console.log('yes');
   } else {
     console.log('no');

diff --git a/example/ts-react-bootstrap-context/src/util/confirm.ts b/example/ts-react-bootstrap-context/src/util/confirm.ts
@@ -7,12 +7,6 @@ const mounter = createReactTreeMounter();
 export const createConfirmation = createConfirmationCreater(mounter);
 export const MountPoint = createMountPoint(mounter);
 
-const defaultConfirmation = createConfirmation(Confirmation);
-
-// create syntax sugar for confrmation function.
-// You can use `confirm('Are you sure?')` instead of `confirm({ confrmation: 'Are you sure? '})`
-export function confirm(confirmation: string, options: ConfimationProps = {}) {
-  return defaultConfirmation({ confirmation, ...options });
-}
+export const confirm = createConfirmation(Confirmation);
 
 export const confirmComplex = createConfirmation(ComplexConfirmation);
diff --git a/example/ts-react-bootstrap-context/static/bundle.js b/example/ts-react-bootstrap-context/static/bundle.js
diff --git a/example/ts-react-bootstrap-context/static/bundle.js.LICENSE.txt b/example/ts-react-bootstrap-context/static/bundle.js.LICENSE.txt
diff --git a/example/ts-react-bootstrap/src/components/ComplexConfirmation.tsx b/example/ts-react-bootstrap/src/components/ComplexConfirmation.tsx
@@ -3,7 +3,7 @@ import  * as React from 'react';
 import Button from 'react-bootstrap/Button'
 import FormControl from 'react-bootstrap/FormControl'
 import Modal from 'react-bootstrap/Modal'
-import { confirmable, ConfirmDialog, ConfirmDialogProps } from 'react-confirm';
+import { confirmable, ConfirmDialog } from 'react-confirm';
 
 
 export interface Props {
@@ -15,7 +15,7 @@ export interface Res {
   input: string,
 }
 
-const ComplexConfirmation: React.FC<ConfirmDialogProps<Props, Res>> = ({
+const ComplexConfirmation: ConfirmDialog<Props, Res> = ({
   show,
   proceed,
   dismiss,

diff --git a/example/ts-react-bootstrap/src/components/Confirmation.tsx b/example/ts-react-bootstrap/src/components/Confirmation.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Modal from 'react-bootstrap/Modal'
 import Button from 'react-bootstrap/Button'
 
-import { confirmable, ConfirmDialog, ConfirmDialogProps } from 'react-confirm';
+import { confirmable, ConfirmDialog } from 'react-confirm';
 
 export interface Props {
   okLabel?: string;
@@ -12,18 +12,18 @@ export interface Props {
   confirmation?: string;
 };
 
-const Confirmation: React.FC<ConfirmDialogProps<Props, boolean>> = (props) => (
+const Confirmation: ConfirmDialog<Props, boolean> = ({show, proceed, title, confirmation, okLabel, cancelLabel}) => (
   <div className="static-modal">
-    <Modal animation={false} show={props.show} onHide={() => props.proceed(false)} backdrop={true}>
+    <Modal animation={false} show={show} onHide={() => proceed(false)} backdrop={true}>
       <Modal.Header>
-        <Modal.Title>{props.title}</Modal.Title>
+        <Modal.Title>{title}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        {props.confirmation}
+        {confirmation}
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={() => props.proceed(false)}>{props.cancelLabel || 'cancel'}</Button>
-        <Button className='button-l' onClick={() => props.proceed(true)}>{props.okLabel || 'ok'}</Button>
+        <Button onClick={() => proceed(false)}>{cancelLabel || 'cancel'}</Button>
+        <Button className='button-l' onClick={() => proceed(true)}>{okLabel || 'ok'}</Button>
       </Modal.Footer>
     </Modal>
   </div>

diff --git a/example/ts-react-bootstrap/src/containers/App.tsx b/example/ts-react-bootstrap/src/containers/App.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { confirm, confirmComplex } from '../util/confirm';
 
 const handleOnClick = async () => {
-  if (await confirm('Are your sure?')) {
+  if (await confirm({ confirmation: 'Are your sure?' })) {
     console.log('yes');
   } else {
     console.log('no');

diff --git a/example/ts-react-bootstrap/src/util/confirm.ts b/example/ts-react-bootstrap/src/util/confirm.ts
@@ -2,12 +2,6 @@ import Confirmation, { Props as ConfimationProps } from '../components/Confirmat
 import ComplexConfirmation from '../components/ComplexConfirmation';
 import { createConfirmation } from 'react-confirm';
 
-const defaultConfirmation = createConfirmation(Confirmation);
-
-// create syntax sugar for confrmation function.
-// You can use `confirm('Are you sure?')` instead of `confirm({ confrmation: 'Are you sure? '})`
-export function confirm(confirmation: string, options: ConfimationProps = {}) {
-  return defaultConfirmation({ confirmation, ...options });
-}
+export const confirm = createConfirmation(Confirmation);
 
 export const confirmComplex = createConfirmation(ComplexConfirmation);