fix: Add framework-utils module

README.md

@@ -61,7 +61,7 @@ If you find a bug, please report to us opening a new [Issue](https://github.com/
 
 ## 📝 License
 
-This project is [MIT](https://github.com/daybrush/scenejs-timeline/blob/master/README.md) licensed.
+This project is [MIT](https://github.com/daybrush/scenejs-timeline/blob/master/LICENSE) licensed.
 
 ```
 MIT License

packages/react-scenejs-timeline/package.json

@@ -47,9 +47,10 @@
     "typescript": "^3.4.5"
   },
   "dependencies": {
-    "@daybrush/drag": "^0.4.2",
+    "@daybrush/drag": "^0.5.0",
     "@daybrush/utils": "^0.10.0",
     "@egjs/axes": "^2.5.13",
+    "framework-utils": "^0.1.0",
     "keycon": "^0.3.0",
     "react-color": "^2.17.3",
     "react-css-styler": "^0.1.1",

packages/react-scenejs-timeline/src/demo/App.tsx

@@ -3,10 +3,10 @@ import { Component } from "react";
 import * as React from "react";
 import Timeline from "../react-scenejs-timeline";
 import Scene from "scenejs";
-import { ref } from "../react-scenejs-timeline/utils";
 import { poly } from "shape-svg";
 import "./App.css";
 import Editor from "../react-scenejs-timeline/Editor/Editor";
+import { ref } from "framework-utils";
 
 export default class App extends Component<{}> {
     private scene: Scene = new Scene();

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Editor.tsx

@@ -1,22 +1,29 @@
 import * as React from "react";
 import Timeline from "../Timeline";
 import Scene, { SceneItem } from "scenejs";
-import { ref } from "../utils";
 import Infos from "./Infos/Infos";
 import Menus from "./Menus/Menus";
-import MenuControl from "./Menus/MenuControl";
 import { SelectEvent } from "../types";
+import { ref } from "framework-utils";
 
 export default class Editor extends React.Component<{
     scene: Scene | SceneItem,
+}, {
+    selectedTarget: HTMLElement | null,
 }> {
+    public state: {
+        selectedTarget: HTMLElement | null,
+    } = {
+        selectedTarget: null,
+    };
     private infos!: Infos;
     private timeline!: Timeline;
     public render() {
+        const selectedTarget = this.state.selectedTarget;
+
         return (
             <div className="scenejs-editor">
                 <Menus />
-                <MenuControl />
                 <Infos
                     ref={ref(this, "infos")}
                     onUpdate={this.onUpdate}

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Infos/Infos.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { prefix, ref, isSceneItem } from "../../utils";
+import { prefix, isSceneItem } from "../../utils";
 import Options from "./Options";
 import Properties from "./Properties";
 import Scene, { SceneItem } from "scenejs";
@@ -8,6 +8,7 @@ import { IObject } from "@daybrush/utils";
 import styler from "react-css-styler";
 import { INFOS_CSS } from "../../consts";
 import { SelectEvent } from "../../types";
+import { ref } from "framework-utils";
 
 const InfosElement = styler("div", INFOS_CSS);
 

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Inputs/ColorBox.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { ChromePicker, ColorResult } from "react-color";
 import Input from "./Input";
-import { ref, prefix } from "../../utils";
+import { prefix } from "../../utils";
 import TextBox from "./TextBox";
 import { splitBracket } from "@daybrush/utils";
+import { ref } from "framework-utils";
 
 export default class ColorBox extends Input<{
     options: string[],

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Inputs/NumberBox.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import Input from "./Input";
-import { ref, prefix } from "../../utils";
+import { prefix } from "../../utils";
 import TextBox from "./TextBox";
 import { isUndefined } from "@daybrush/utils";
+import { ref } from "framework-utils";
 
 export default class NumberBox extends TextBox {
     public render() {

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Inputs/SelectBox.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import Input from "./Input";
-import { ref, prefix } from "../../utils";
+import { prefix } from "../../utils";
+import { ref } from "framework-utils";
 
 export default class SelectBox extends Input<{
     options: string[],

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Inputs/TextBox.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { getKey } from "keycon";
 import Input from "./Input";
-import { ref } from "../../utils";
+import { ref } from "framework-utils";
 
 export default class TextBox extends Input<{
     onFocus?: () => void,

packages/react-scenejs-timeline/src/react-scenejs-timeline/Editor/Inputs/UnitBox.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import Input from "./Input";
-import { ref, prefix } from "../../utils";
+import { prefix } from "../../utils";
 import NumberBox from "./NumberBox";
 import SelectBox from "./SelectBox";
 import { splitUnit } from "@daybrush/utils";
+import { ref } from "framework-utils";
 
 export default class UnitBox extends Input<{
     options: string[],

packages/react-scenejs-timeline/src/react-scenejs-timeline/HeaderArea/ControlArea.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { prefix, ref } from "../utils";
+import { prefix } from "../utils";
 import ElementComponent from "../utils/ElementComponent";
 import TimeArea from "./TimeArea";
 import Scene, { SceneItem } from "scenejs";
+import { ref } from "framework-utils";
 
 export default class ControlArea extends ElementComponent<{
     scene?: Scene | SceneItem,

packages/react-scenejs-timeline/src/react-scenejs-timeline/HeaderArea/HeaderArea.tsx

@@ -2,9 +2,10 @@ import { TimelineInfo } from "../types";
 import ElementComponent from "../utils/ElementComponent";
 import KeytimesArea from "./KeytimesArea";
 import * as React from "react";
-import { prefix, ref } from "../utils";
+import { prefix } from "../utils";
 import Axes from "@egjs/axes";
 import Scene, { SceneItem } from "scenejs";
+import { ref } from "framework-utils";
 
 export default class HeaderArea extends ElementComponent<{
     timelineInfo: TimelineInfo,

packages/react-scenejs-timeline/src/react-scenejs-timeline/HeaderArea/KeytimesArea.tsx

@@ -1,11 +1,12 @@
 import { TimelineInfo } from "../types";
 import * as React from "react";
-import { prefix, ref } from "../utils";
+import { prefix } from "../utils";
 import ElementComponent from "../utils/ElementComponent";
 import KeyframeCursor from "../ScrollArea/KeyframesArea/KeyframeCursor";
 import { addEvent } from "@daybrush/utils";
 import Axes from "@egjs/axes";
 import { drag } from "@daybrush/drag";
+import { ref } from "framework-utils";
 
 export default class KeytimesArea extends ElementComponent<{
     timelineInfo: TimelineInfo,

packages/react-scenejs-timeline/src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframeCursor.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import ElementComponent from "../../utils/ElementComponent";
-import { ref, prefix } from "../../utils";
+import { prefix } from "../../utils";
+import { ref } from "framework-utils";
 
 export default class KeyframeCursor extends ElementComponent {
     public render() {

packages/react-scenejs-timeline/src/react-scenejs-timeline/ScrollArea/KeyframesArea/KeyframesArea.tsx

@@ -2,12 +2,13 @@ import { TimelineInfo } from "../../types";
 import Keyframes from "./Keyframes";
 import LineArea from "./LineArea";
 import * as React from "react";
-import { prefix, ref, refs, checkFolded } from "../../utils";
+import { prefix, checkFolded } from "../../utils";
 import ElementComponent from "../../utils/ElementComponent";
 import Axes from "@egjs/axes";
 import KeyController from "keycon";
 import { addEvent, IObject } from "@daybrush/utils";
 import KeyframeCursor from "./KeyframeCursor";
+import { refs, ref } from "framework-utils";
 
 export default class KeyframesArea extends ElementComponent<{
     timelineInfo: TimelineInfo,

packages/react-scenejs-timeline/src/react-scenejs-timeline/ScrollArea/PropertiesArea/PropertiesArea.tsx

@@ -1,9 +1,10 @@
 import { TimelineInfo } from "../../types";
 import Property from "./Property";
 import * as React from "react";
-import { prefix, refs, checkFolded } from "../../utils";
+import { prefix, checkFolded } from "../../utils";
 import ElementComponent from "../../utils/ElementComponent";
 import { IObject } from "@daybrush/utils";
+import { refs } from "framework-utils";
 
 export default class PropertiesArea extends ElementComponent<{
     timelineInfo: TimelineInfo,

packages/react-scenejs-timeline/src/react-scenejs-timeline/ScrollArea/ScrollArea.tsx

@@ -4,10 +4,11 @@ import KeyframesArea from "./KeyframesArea/KeyframesArea";
 import PropertiesArea from "./PropertiesArea/PropertiesArea";
 import ValuesArea from "./ValuesArea/ValuesArea";
 import * as React from "react";
-import { prefix, ref, fold, getTarget, hasClass } from "../utils";
+import { prefix, fold, getTarget, hasClass } from "../utils";
 import Axes from "@egjs/axes";
 import KeyController from "keycon";
 import Scene, { SceneItem } from "scenejs";
+import { ref } from "framework-utils";
 
 export default class ScrollArea extends ElementComponent<{
     timelineInfo: TimelineInfo,

packages/react-scenejs-timeline/src/react-scenejs-timeline/ScrollArea/ValuesArea/Value.tsx

@@ -1,8 +1,9 @@
 import { PropertiesInfo } from "../../types";
 import * as React from "react";
-import { prefix, ref } from "../../utils";
+import { prefix } from "../../utils";
 import Scene, { SceneItem } from "scenejs";
 import ElementComponent from "../../utils/ElementComponent";
+import { ref } from "framework-utils";
 
 export default class Value extends ElementComponent<{
     id: string,

packages/react-scenejs-timeline/src/react-scenejs-timeline/ScrollArea/ValuesArea/ValuesArea.tsx

@@ -1,12 +1,13 @@
 import { TimelineInfo } from "../../types";
 import Value from "./Value";
 import * as React from "react";
-import { prefix, refs, checkFolded, getTarget, hasClass } from "../../utils";
+import { prefix, checkFolded, getTarget, hasClass } from "../../utils";
 import ElementComponent from "../../utils/ElementComponent";
 import { IObject, findIndex } from "@daybrush/utils";
 import Scene, { SceneItem } from "scenejs";
 import { drag } from "@daybrush/drag";
 import KeyController from "keycon";
+import { refs } from "framework-utils";
 
 export default class ValuesArea extends ElementComponent<{
     timelineInfo: TimelineInfo,

packages/react-scenejs-timeline/src/react-scenejs-timeline/Timeline.tsx

@@ -7,7 +7,6 @@ import { SUPPORT_TOUCH, SUPPORT_POINTER_EVENTS, CSS } from "./consts";
 import {
     prefix,
     numberFormat,
-    ref,
     getTarget, findElementIndexByPosition,
     hasClass, flatObject, isScene,
 } from "./utils";
@@ -20,6 +19,7 @@ import { getTimelineInfo } from "./TimelineInfo";
 import { IObject, find, isUndefined, isObject } from "@daybrush/utils";
 import PureProps from "react-pure-props";
 import styled from "react-css-styler";
+import { ref } from "framework-utils";
 
 const TimelineElement = styled("div", CSS);
 

packages/react-scenejs-timeline/src/react-scenejs-timeline/consts.ts

@@ -1,11 +1,12 @@
 import { DirectionType, FillModeType } from "scenejs";
 import { IObject } from "@daybrush/utils";
+import { prefixCSS } from "framework-utils";
 
 export const PREFIX = `scenejs-editor-`;
 export const SUPPORT_POINTER_EVENTS = "PointerEvent" in window || "MSPointerEvent" in window;
 export const SUPPORT_TOUCH = "ontouchstart" in window;
 
-export const CSS = `
+export const CSS = prefixCSS(PREFIX, `
 {
     position: relative;
     width: 100%;
@@ -438,7 +439,7 @@ export const CSS = `
   height: 100%;
   transform: translate(-50%);
 }
-`.replace(/\.([^{,\s\d.]+)/g, `.${PREFIX}$1`);
+`);
 
 export const DURATION = "duration";
 export const FILL_MODE = "fillMode";
@@ -470,7 +471,7 @@ export const TICK_TIME = "tickTime";
 export const CURRENT_TIME = "currentTime";
 export const SELECTOR = "selector";
 export const TRANSFORM_NAME = "transform";
-export const INFOS_CSS = `
+export const INFOS_CSS = prefixCSS(PREFIX, `
 {
     position: fixed;
     right: 0;
@@ -643,9 +644,9 @@ export const INFOS_CSS = `
     top: 100%;
     z-index: 10;
 }
-`.replace(/\.([^{,\s\d.]+)/g, `.${PREFIX}$1`);
+`);
 
-export const MENUS_CSS = `
+export const MENUS_CSS = prefixCSS(PREFIX, `
 {
     position: fixed;
     left: 0;
@@ -680,7 +681,7 @@ export const MENUS_CSS = `
     background: transparent;
     border: 1px solid #eee;
 }
-`.replace(/\.([^{,\s\d.]+)/g, `.${PREFIX}$1`);
+`);
 
 export const DIRECTIONS: DirectionType[] = ["normal", "reverse", "alternate", "alternate-reverse"];
 export const FILL_MODES: FillModeType[] = ["forwards", "backwards", "both"];

packages/react-scenejs-timeline/src/react-scenejs-timeline/utils.ts

@@ -8,6 +8,7 @@ import {
     isObject,
     findIndex,
 } from "@daybrush/utils";
+import { prefixNames } from "framework-utils";
 import ElementComponent from "./utils/ElementComponent";
 
 export function numberFormat(num: number, count: number, isRight?: boolean) {
@@ -130,17 +131,7 @@ export function findElementIndexByPosition(elements: HTMLElement[], pos: number)
 }
 
 export function prefix(...classNames: string[]) {
-    return classNames.map(className => className.split(" ").map(name => `${PREFIX}${name}`).join(" ")).join(" ");
-}
-export function ref(target: any, name: string) {
-    return (e: any) => {
-        e && (target[name] = e);
-    };
-}
-export function refs(target: any, name: string, i: number) {
-    return (e: any) => {
-        e && (target[name][i] = e);
-    };
+    return prefixNames(PREFIX, ...classNames);
 }
 
 export function checkFolded(foldedInfo: IObject<any>, names: any[]) {