feat: Add onSelected callback in Menus, Menu

daybrush · Jul 7, 2019 · eb4ff1e · eb4ff1e
1 parent d74b5f9
commit eb4ff1e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Menus/Menu.tsx b/packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Menus/Menu.tsx
@@ -2,14 +2,23 @@ import * as React from "react";
 import { prefix } from "../../utils";
 
 export default class Menu extends React.Component<{
+    type: string,
     selected?: boolean,
     icon: typeof React.Component,
+    onSelected?: (e: { type: string }) => void,
 }> {
     public render() {
         const { selected, icon } = this.props;
         return (
-            <div className={prefix("menu", selected ? "selected" : "")}>
+            <div className={prefix("menu", selected ? "selected" : "")} onClick={this.onSelected}>
                 {React.createElement(icon)}
             </div>);
     }
+    public onSelected = () => {
+        const onSelected = this.props.onSelected;
+
+        if (onSelected) {
+            onSelected({ type: this.props.type });
+        }
+    }
 }
diff --git a/packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Menus/Menus.tsx b/packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Menus/Menus.tsx
@@ -10,21 +10,38 @@ import PolyIcon from "./PolyIcon";
 import OvalIcon from "./OvalIcon";
 import RectIcon from "./RectIcon";
 import StarIcon from "./StarIcon";
+import Moveable from "../../../react-moveable/Moveable";
 
 const MenusElement = styler("div", MENUS_CSS);
 
-export default class Menus extends React.Component<{
+export default class Menus extends React.PureComponent<{
+}, {
+    type: string,
 }> {
+    public state = {
+        type: "cursor",
+    };
     public render() {
+        const type = this.state.type;
+        const onSelected = this.onSelected;
+
         return (
             <MenusElement className={prefix("menus")}>
-                <Menu icon={CursorIcon} selected={true} />
-                <Menu icon={AutoCursorIcon} />
-                <Menu icon={TextIcon} />
-                <Menu icon={RectIcon} />
-                <Menu icon={PolyIcon} />
-                <Menu icon={StarIcon} />
-                <Menu icon={OvalIcon} />
+                <Menu icon={CursorIcon} type="cursor" selected={type === "cursor"} onSelected={onSelected} />
+                <Menu icon={AutoCursorIcon} type="auto" selected={type === "auto"} onSelected={onSelected} />
+                <Menu icon={TextIcon} type="text" selected={type === "text"} onSelected={onSelected} />
+                <Menu icon={RectIcon} type="rect" selected={type === "rect"} onSelected={onSelected} />
+                <Menu icon={PolyIcon} type="poly" selected={type === "poly"} onSelected={onSelected} />
+                <Menu icon={StarIcon} type="star" selected={type === "star"} onSelected={onSelected} />
+                <Menu icon={OvalIcon} type="oval" selected={type === "oval"} onSelected={onSelected} />
             </MenusElement>);
     }
+    public onSelected = (e: { type: string }) => {
+        if (this.state.type === e.type) {
+            return;
+        }
+        this.setState({
+            type: e.type,
+        });
+    }
 }