hooks

Author: wb-lp356237

.eslintrc

@@ -20,6 +20,8 @@
     "no-lonely-if": 0, // 允许有单个if
     "no-param-reassign": 0, // 允许修改函数参数
     "import/prefer-default-export": 0,
-    "indent": [1, 2] // 缩进
+    "indent": [1, 2], // 缩进
+    "no-plusplus": 0,
+    "react/prop-types": 0
   }
 }

mocks/db.json

@@ -2,15 +2,15 @@
     "data":[
         {
           "key": 1,
-          "name": "胡彦斌",
-          "age": 32,
-          "address": "西湖区湖底公园1号"
+          "name": "张三丰",
+          "age": 100,
+          "address": "武当山"
         },
         {
           "key": 2,
-          "name": "胡彦祖",
-          "age": 42,
-          "address": "西湖区湖底公园1号"
+          "name": "张无忌",
+          "age": 20,
+          "address": "光明顶"
         }
       ]
 }

src/App.tsx

@@ -1,22 +1,20 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
-// import Layout from "../src/components/Layout";
+import Layout from "../src/components/Layout";
 import Dashboard from "./pages/dashboard";
 import About from "./pages/about";
-import Test from "./pages/test/A";
 import "./App.css";
 
 const App: React.FC = () => {
   return (
     <Router>
-      {/* <Layout> */}
-      <Switch>
-        <Redirect exact from="/" to="/Test" />,
-        <Route path="/dashboard" component={Dashboard} />
-        <Route path="/about" component={About} />
-        <Route path="/test" component={Test} />
-      </Switch>
-      {/* </Layout> */}
+      <Layout>
+        <Switch>
+          <Redirect exact from="/" to="/dashboard" />,
+          <Route path="/dashboard" component={Dashboard} />
+          <Route path="/about" component={About} />
+        </Switch>
+      </Layout>
     </Router>
   );
 };

src/components/Layout/index.tsx

@@ -41,7 +41,7 @@ const LayoutWrap = (props: Props) => {
             borderBottom: "1px solid #eee"
           }}
         >
-          LENS后台管理系统
+          LENS
         </Header>
         <Content
           style={{

src/hooks/demo/useEffect.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable no-plusplus */
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "../../App";
+
+const allDeps: any[][] = [];
+let effectCursor = 0;
+
+export function useEffect(callback: () => void, deps: any[]) {
+  if (!allDeps[effectCursor]) {
+    // 初次渲染：赋值 + 调用回调函数
+    allDeps[effectCursor] = deps;
+    ++effectCursor;
+    setTimeout(() => {
+      callback();
+    });
+    return;
+  }
+
+  const currenEffectCursor = effectCursor;
+  const rawDeps = allDeps[currenEffectCursor];
+  // 检测依赖项是否发生变化，发生变化需要重新render
+  const isChanged = rawDeps.some((dep: any, index: number) => dep !== deps[index]);
+  if (isChanged) {
+    callback();
+    allDeps[effectCursor] = deps;
+    render();
+  }
+  ++effectCursor;
+}
+
+const render = () => {
+  ReactDOM.render(<App />, document.getElementById("root"));
+  effectCursor = 0;
+};

src/hooks/demo/useState.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable no-plusplus */
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "../../App";
+
+const _state: any[] = [];
+let cursor = 0;
+
+function useState<T>(initialState: T): [T, (value: T) => void] {
+  _state[cursor] = _state[cursor] || initialState;
+  const currentCursor = cursor;
+  function setState(newState: T) {
+    _state[currentCursor] = newState;
+    // 重新渲染
+    render();
+  }
+  return [_state[cursor++], setState];
+}
+
+const render = () => {
+  ReactDOM.render(<App />, document.getElementById("root"));
+  cursor = 0;
+};
+
+export default useState;

src/hooks/useModal.tsx

@@ -0,0 +1,14 @@
+import { useCallback, useState } from "react";
+
+const useModal = () => {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  const show = useCallback(() => setVisible(true), []);
+
+  return [visible, hide, show] as [boolean, () => void, () => void];
+};
+
+export default useModal;

src/pages/about/index.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Form, Modal, Input } from "antd";
+
+interface IProps {
+  visible: boolean;
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  defaultValues: any;
+}
+
+const EditModal: React.FunctionComponent<IProps> = (props) => {
+  const { visible, onCancel, onOk, defaultValues } = props;
+  const [form] = Form.useForm();
+  const { validateFields, resetFields } = form;
+
+  /**
+   * 提交
+   */
+  const handleSubmit = () => {
+    validateFields().then((values) => {
+      onOk(values);
+    });
+  };
+
+  /**
+   * 取消
+   */
+  const handleClose = () => {
+    resetFields();
+    onCancel();
+  };
+
+  return (
+    <Modal visible={visible} title="编辑" onCancel={handleClose} onOk={handleSubmit}>
+      <Form name="basic" initialValues={defaultValues}>
+        <Form.Item label="name" name="name">
+          <Input />
+        </Form.Item>
+
+        <Form.Item label="age" name="age">
+          <Input />
+        </Form.Item>
+
+        <Form.Item label="address" name="address">
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditModal;

src/pages/dashboard/components/EditForm/index.tsx

@@ -1,28 +1,82 @@
 import React from "react";
+import useModal from "../../hooks/useModal";
 import { Table, Button } from "antd";
-import { columns } from "./config/columns";
 import { fetchAllData } from "../../services/dashborad";
+import EditForm from "./components/EditForm";
 import "./index.scss";
 
+interface IItems {
+  name: string;
+  age: number;
+  address: string;
+}
+
 const Dashborad = () => {
-  const [dataSource, changeDataSource] = React.useState();
+  const [visible, hide, show] = useModal();
+
+  const handleEdit = (item: {}) => {
+    show();
+    setDefaultItems(item);
+  };
+
+  const columns = [
+    {
+      title: "姓名",
+      dataIndex: "name",
+      key: "name"
+    },
+    {
+      title: "年龄",
+      dataIndex: "age",
+      key: "age"
+    },
+    {
+      title: "住址",
+      dataIndex: "address",
+      key: "address"
+    },
+    {
+      title: "操作",
+      dataIndex: "action",
+      key: "action",
+      render: (text: string, record: IItems) => (
+        <div className="actionWrap">
+          <span onClick={() => handleEdit(record)}>编辑</span>
+          <span>删除</span>
+        </div>
+      )
+    }
+  ];
+
+  const [dataSource, changeDataSource] = React.useState<IItems[]>([]);
+
+  const [defaultItems, setDefaultItems] = React.useState<IItems | {}>({});
 
   React.useEffect(() => {
     fetchData();
   }, []);
 
-  // 请求列表数据
+  /**
+   * 请求列表数据
+   */
   const fetchData = async () => {
     const res = await fetchAllData();
     changeDataSource(res);
   };
 
+  const update = () => {
+    hide();
+  };
+
   return (
     <>
       <Button type="primary" className="addBtn">
         添加
       </Button>
       <Table dataSource={dataSource} columns={columns} />;
+      {visible && (
+        <EditForm visible={visible} onOk={update} onCancel={hide} defaultValues={defaultItems} />
+      )}
     </>
   );
 };