add update & example

Quernest · Aug 28, 2020 · fb5ddd5 · fb5ddd5
1 parent 771ffa9
commit fb5ddd5
Show file tree

Hide file tree

Showing 12 changed files with 5,820 additions and 298 deletions.
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -0,0 +1,110 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import Dialog from '@material-ui/core/Dialog';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+import ModalProvider, { useModal } from '../src';
+
+function CircularProgressWithLabel(props) {
+  return (
+    <Box position="relative" display="inline-flex">
+      <CircularProgress variant="static" {...props} />
+      <Box
+        top={0}
+        left={0}
+        bottom={0}
+        right={0}
+        position="absolute"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="textSecondary"
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+function DialogWithProgress({
+  title = '',
+  description = '',
+  onCancel,
+  onConfirm,
+  progress,
+  ...props
+}) {
+  return (
+    <Dialog fullWidth maxWidth="sm" open={false} {...props}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        {description && <DialogContentText>{description}</DialogContentText>}
+        <div>
+          <CircularProgressWithLabel value={progress} />
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={onConfirm} color="primary">
+          Ok
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function Demo() {
+  const { showModal } = useModal();
+
+  const handleClick = () => {
+    let timer;
+    let progress = 0;
+
+    const modal = showModal(DialogWithProgress, {
+      title: 'Progress',
+      progress: 0,
+      onConfirm: () => modal.hide(),
+      onCancel: () => modal.hide(),
+      onExited: () => clearTimeout(timer),
+    });
+
+    timer = setInterval(() => {
+      progress += 1;
+
+      if (progress >= 100) {
+        progress = 0;
+      }
+
+      modal.update({ progress });
+    }, 500);
+  };
+
+  return (
+    <Button variant="contained" onClick={handleClick} color="primary">
+      Show Modal
+    </Button>
+  );
+}
+
+const App = () => {
+  return (
+    <ModalProvider>
+      <Demo />
+    </ModalProvider>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom/profiling",
+    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.48",
+    "@types/react-dom": "^16.9.8",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
+  }
+}
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+      "allowSyntheticDefaultImports": false,
+      "target": "es5",
+      "module": "commonjs",
+      "jsx": "react",
+      "moduleResolution": "node",
+      "noImplicitAny": false,
+      "noUnusedLocals": false,
+      "noUnusedParameters": false,
+      "removeComments": true,
+      "strictNullChecks": true,
+      "preserveConstEnums": true,
+      "sourceMap": true,
+      "lib": ["es2015", "es2016", "dom"],
+      "types": ["node"]
+    }
+  }