Merge pull request #1037 from visuddhinanda/agile

:test_tube: 拆分单词

dashboard/src/components/template/Wbw/WbwCase.tsx

@@ -1,18 +1,18 @@
 import { useIntl } from "react-intl";
-import { Typography } from "antd";
+import { Typography, Button } from "antd";
+import { SwapOutlined } from "@ant-design/icons";
 
 import { IWbw } from "./WbwWord";
-import "./wbw.css"; // 告诉 umi 编译这个 css
+import "./wbw.css";
 
 const { Text } = Typography;
 
 interface IWidget {
   data: IWbw;
+  onSplit?: Function;
 }
-
-const Widget = ({ data }: IWidget) => {
+const Widget = ({ data, onSplit }: IWidget) => {
   const intl = useIntl();
-  console.log("case", data.case?.value);
   return (
     <div className="wbw_word_item" style={{ display: "flex" }}>
       <Text type="secondary">
@@ -24,6 +24,14 @@ const Widget = ({ data }: IWidget) => {
               </span>
             );
           })}
+          <Button
+            icon={<SwapOutlined />}
+            onClick={() => {
+              if (typeof onSplit !== "undefined") {
+                onSplit();
+              }
+            }}
+          />
         </div>
       </Text>
     </div>

dashboard/src/components/template/Wbw/WbwWord.tsx

@@ -5,6 +5,7 @@ import WbwFactorMeaning from "./WbwFactorMeaning";
 import WbwFactors from "./WbwFactors";
 import WbwMeaning from "./WbwMeaning";
 import WbwPali from "./WbwPali";
+import WbwWord from "./WbwWord";
 import "./wbw.css";
 
 export type TFieldName =
@@ -74,12 +75,14 @@ interface IWidget {
   display?: "block" | "inline";
   fields?: IWbwFields;
   onChange?: Function;
+  onSplit?: Function;
 }
 const Widget = ({
   data,
   display = "block",
   fields = { meaning: true, factors: true, factorMeaning: true, case: true },
   onChange,
+  onSplit,
 }: IWidget) => {
   const [wordData, setWordData] = useState(data);
 
@@ -123,7 +126,17 @@ const Widget = ({
         {fields?.factorMeaning ? (
           <WbwFactorMeaning data={wordData} />
         ) : undefined}
-        {fields?.case ? <WbwCase data={wordData} /> : undefined}
+        {fields?.case ? (
+          <WbwCase
+            data={wordData}
+            onSplit={() => {
+              console.log("onSplit", wordData.factors?.value);
+              if (typeof onSplit !== "undefined") {
+                onSplit();
+              }
+            }}
+          />
+        ) : undefined}
       </div>
     </div>
   );

dashboard/src/components/template/WbwSent.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import WbwWord, { IWbw, IWbwFields } from "./Wbw/WbwWord";
 
 interface IWidget {
@@ -6,22 +7,47 @@ interface IWidget {
   fields?: IWbwFields;
 }
 const Widget = ({ data, display, fields }: IWidget) => {
-  const wbwSent = data.map((item, id) => {
-    return (
-      <WbwWord
-        data={item}
-        key={id}
-        display={display}
-        fields={fields}
-        onChange={(e: IWbw) => {
-          console.log("word changed", e);
-          console.log("word id", id);
-          //TODO update
-        }}
-      />
-    );
-  });
-  return <div style={{ display: "flex", flexWrap: "wrap" }}>{wbwSent}</div>;
+  const [wordData, setWordData] = useState(data);
+
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap" }}>
+      {wordData.map((item, id) => {
+        return (
+          <WbwWord
+            data={item}
+            key={id}
+            display={display}
+            fields={fields}
+            onChange={(e: IWbw) => {
+              console.log("word changed", e);
+              console.log("word id", id);
+              //TODO update
+            }}
+            onSplit={() => {
+              console.log("word id", id, wordData[id].factors?.value);
+              const newData: IWbw[] = JSON.parse(JSON.stringify(wordData));
+
+              const children: IWbw[] | undefined = wordData[id].factors?.value
+                .split("+")
+                .map((item, id) => {
+                  return {
+                    word: { value: item, status: 5 },
+                    real: { value: item, status: 5 },
+                    confidence: 1,
+                  };
+                });
+              if (typeof children !== "undefined") {
+                console.log("children", children);
+                newData.splice(id + 1, 0, ...children);
+                console.log("new-data", newData);
+                setWordData(newData);
+              }
+            }}
+          />
+        );
+      })}
+    </div>
+  );
 };
 
 export default Widget;