demo: demo update (#422)

* demo: code optimization * demo: code optimization
react-component · May 8, 2024 · 248128c · 248128c
1 parent dcc74ee
commit 248128c
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 81 deletions.
diff --git a/docs/examples/ant-design.tsx b/docs/examples/ant-design.tsx
@@ -12,41 +12,33 @@ const clearPath =
   ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' +
   '28.7 64-64V306c0-35.3-28.7-64-64-64z';
 
-const getSvg = (path: string, props = {}, align = false) => {
-  return (
-    <i {...props}>
-      <svg
-        viewBox="0 0 1024 1024"
-        width="1em"
-        height="1em"
-        fill="currentColor"
-        style={align ? { verticalAlign: '-.125em ' } : {}}
-      >
-        <path d={path} p-id="5827" />
-      </svg>
-    </i>
-  );
-};
+const getSvg = (path: string, props = {}, align = false) => (
+  <i {...props}>
+    <svg
+      viewBox="0 0 1024 1024"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      style={align ? { verticalAlign: '-0.125em ' } : {}}
+    >
+      <path d={path} />
+    </svg>
+  </i>
+);
 
-const MyControl = () => {
+const MyControl: React.FC = () => {
   const [visible1, setVisible1] = React.useState(true);
   const [visible2, setVisible2] = React.useState(false);
   const [visible3, setVisible3] = React.useState(false);
   const [width, setWidth] = React.useState(600);
   const [destroyOnClose, setDestroyOnClose] = React.useState(false);
   const [center, setCenter] = React.useState(false);
-  const [mousePosition, setMousePosition] = React.useState({
-    x: null,
-    y: null,
-  });
+  const [mousePosition, setMousePosition] = React.useState({ x: null, y: null });
   const [useIcon, setUseIcon] = React.useState(false);
   const [forceRender, setForceRender] = React.useState(false);
 
   const onClick = (e: React.MouseEvent) => {
-    setMousePosition({
-      x: e.pageX,
-      y: e.pageY,
-    });
+    setMousePosition({ x: e.pageX, y: e.pageY });
     setVisible1(true);
   };
 

diff --git a/docs/examples/bootstrap.tsx b/docs/examples/bootstrap.tsx
@@ -1,15 +1,15 @@
-import 'bootstrap/dist/css/bootstrap.css';
-import * as React from 'react';
+import React from 'react';
 import Dialog from 'rc-dialog';
+import 'bootstrap/dist/css/bootstrap.css';
 import '../../assets/bootstrap.less';
 
 // Check for memo update should work
-const InnerRender = () => {
+const InnerRender: React.FC = () => {
   console.log('Updated...', Date.now());
   return null;
 };
 
-const MyControl = () => {
+const MyControl: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
   const [destroyOnClose, setDestroyOnClose] = React.useState(false);
 

diff --git a/docs/examples/draggable.tsx b/docs/examples/draggable.tsx
@@ -1,61 +1,56 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import * as React from 'react';
-import Draggable from 'react-draggable'; 
+import Draggable from 'react-draggable';
 import Dialog from 'rc-dialog';
 import '../../assets/index.less';
 
-const MyControl = () => {
+const MyControl: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
   const [disabled, setDisabled] = React.useState(true);
   const onClick = () => {
     setVisible(true);
-  }
-
+  };
   const onClose = () => {
     setVisible(false);
-  }
-
+  };
   return (
     <div style={{ margin: 20 }}>
       <p>
-        <button type="button" className="btn btn-primary" onClick={onClick}>show dialog</button>
+        <button type="button" className="btn btn-primary" onClick={onClick}>
+          show dialog
+        </button>
       </p>
       <Dialog
         visible={visible}
         animation="slide-fade"
         maskAnimation="fade"
         onClose={onClose}
         style={{ width: 600 }}
-        title={(
-            <div
-                style={{
-                    width: '100%',
-                    cursor: 'pointer',
-                }}
-                onMouseOver={() => {
-                    if (disabled){
-                        setDisabled(false)
-                    }
-                }}
-                onMouseOut={() => {
-                    setDisabled(true)
-                }}
-                // fix eslintjsx-a11y/mouse-events-have-key-events
-                // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
-                onFocus={ () => {} }
-                onBlur={ () => {}} 
-                // end 
-            >modal</div>
-        )}
-        modalRender={modal => <Draggable disabled={disabled}>{modal}</Draggable>}
-      >
+        title={
           <div
-            style={{
-                height: 200,
+            style={{ width: '100%', cursor: 'pointer' }}
+            onMouseOver={() => {
+              if (disabled) {
+                setDisabled(false);
+              }
             }}
+            onMouseOut={() => {
+              setDisabled(true);
+            }}
+            // fix eslintjsx-a11y/mouse-events-have-key-events
+            // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
+            onFocus={() => {}}
+            onBlur={() => {}}
+            // end
           >
-              Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.
+            modal
           </div>
+        }
+        modalRender={(modal) => <Draggable disabled={disabled}>{modal}</Draggable>}
+      >
+        <div style={{ height: 200 }}>
+          Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.
+        </div>
       </Dialog>
     </div>
   );

diff --git a/docs/examples/multiple-Portal.tsx b/docs/examples/multiple-Portal.tsx
@@ -4,18 +4,16 @@ import 'rc-drawer/assets/index.css';
 import Dialog from 'rc-dialog';
 import '../../assets/index.less';
 
-const { useState } = React;
-
-const Demo = () => {
-  const [showDialog, setShowDialog] = useState(false);
-  const [showDrawer, setShowDrawer] = useState(false);
+const Demo: React.FC = () => {
+  const [showDialog, setShowDialog] = React.useState(false);
+  const [showDrawer, setShowDrawer] = React.useState(false);
 
   const onToggleDrawer = () => {
-    setShowDrawer(value => !value);
+    setShowDrawer((value) => !value);
   };
 
   const onToggleDialog = () => {
-    setShowDialog(value => !value);
+    setShowDialog((value) => !value);
   };
 
   const dialog = (
@@ -27,23 +25,26 @@ const Demo = () => {
       forceRender
       title="basic modal"
     >
-      <p><button type="button" onClick={onToggleDrawer}>show drawer</button></p>
+      <p>
+        <button type="button" onClick={onToggleDrawer}>
+          show drawer
+        </button>
+      </p>
       <div style={{ height: 200 }} />
     </Dialog>
   );
   const drawer = (
-    <Drawer
-      open={showDrawer}
-      handler={false}
-      onClose={onToggleDrawer}
-      level={null}
-    >
-      <button type="button" onClick={onToggleDrawer}>close drawer</button>
+    <Drawer open={showDrawer} onClose={onToggleDrawer}>
+      <button type="button" onClick={onToggleDrawer}>
+        close drawer
+      </button>
     </Drawer>
   );
   return (
     <div>
-      <button type="button" onClick={onToggleDialog}>open dialog</button>
+      <button type="button" onClick={onToggleDialog}>
+        open dialog
+      </button>
       {dialog}
       {drawer}
     </div>

diff --git a/docs/examples/pure.tsx b/docs/examples/pure.tsx
@@ -1,11 +1,12 @@
-/* eslint no-console:0 */
-import * as React from 'react';
-import 'rc-select/assets/index.less';
+import React from 'react';
 import { Panel } from 'rc-dialog';
+import 'rc-select/assets/index.less';
 import '../../assets/index.less';
 
-export default () => (
+const Demo: React.FC = () => (
   <Panel prefixCls="rc-dialog" title="Title" closable>
     Hello World!
   </Panel>
 );
+
+export default Demo;