Yxy

README.md

@@ -109,7 +109,7 @@ const Box = (props: BoxProps) => {
 主要分为两种：
 
 - 静态的挂载
-- 跟随 props 动态变化的处理
+- 跟随 props 动态变化的处理（TODO：已有增加，需要支持修改/删除）
 
 参考 jss-plugin-nested
 

package.json

@@ -21,6 +21,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "up": "git add . && git commit -m 'fix: update' && git push",
     "psmd": "git add . && git commit -m 'docs: update md' && git push"
   },
   "eslintConfig": {
@@ -37,5 +38,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.3",
+    "react-router-dom": "^5.1.2"
   }
 }

src/demo/Dark.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { stylex } from "../utils/stylex";
+
+interface StaticProps {
+  bgColor?: string;
+  color?: string;
+  children?: React.ReactNode;
+}
+
+const styles = stylex.create("static", {
+  wrapper: {
+    color: "red",
+    padding: "10px",
+    backgroundColor: "#ffeb3b",
+    "& p": {
+      color: "yellow",
+      "& span": {
+        color: "#a00"
+      }
+    },
+    "&$left, &$right": {
+      height: "100%",
+      width: 0
+    },
+    "& svg$iconSuffix": {
+      verticalAlign: "middle"
+    },
+    "& $inner": {
+      color: "gray"
+    },
+    "&$staticContainer": {
+      padding: "15px",
+      "& span": {
+        color: "red"
+      }
+    },
+    "&$staticContainer p": {
+      color: "blue"
+    },
+    "&$staticContainer$mine": {
+      color: "#000",
+      "&:not($test) > span": {
+        color: "orange"
+      }
+    },
+    "&, &:hover": {
+      color: "green",
+      animation: `$transferHighlightIn 1s`
+    }
+  },
+  "@keyframes transferHighlightIn": {
+    "0%": {
+      background: "bae7ff",
+      color: "red"
+    },
+    "100%": {
+      background: "transparent"
+    }
+  },
+  staticContainer: {
+    border: "1px solid #ccc"
+  }
+});
+
+const Static = (props: StaticProps) => {
+  const { children } = props;
+  return (
+    <div className={styles("wrapper", "staticContainer")}>
+      {children || "这是一个盒子"}
+      <p>这是一个段落</p>
+    </div>
+  );
+};
+
+export default Static;

src/demo/Dynamic.tsx

@@ -7,22 +7,57 @@ interface DynamicProps {
   children?: React.ReactNode;
 }
 
-const styles = stylex.create("dynamic", {
-  wrapper: {
-    color: "red",
-    padding: "10px",
-    backgroundColor: "#ffeb3b"
-  },
-  dynamicContainer: {
-    border: "1px solid #ccc"
-  }
-});
+const getOppositeColor = (color?: string) => (color === "red" ? "blue" : "red");
+
+const useDynamicStyle = (props: any) => {
+  const rules = {
+    wrapper: {
+      background: (props: Partial<DynamicProps>) => props.bgColor || ""
+    },
+    myBox: (props: Partial<DynamicProps>) => ({
+      display: "block",
+      color: props.color || ""
+    })
+  };
+
+  const idRef = React.useRef(0);
+
+  const [styles, setStyles] = React.useState<(...args: any[]) => string>(() => {
+    const { initialGetStyles, id } = stylex.createDynamic("dynamic", rules);
+    idRef.current = id;
+    return initialGetStyles(props);
+  });
+  const propsStr = JSON.stringify(props);
+
+  React.useEffect(() => {
+    const getStyles = stylex.updateDynamic("dynamic", idRef.current, rules);
+    const newStyles = getStyles(props);
+    console.log("...newStyles", newStyles);
+    setStyles(() => newStyles);
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [propsStr, setStyles]);
+
+  console.log("...styles", styles);
+  return styles;
+};
 
 const Dynamic = (props: DynamicProps) => {
   const { children } = props;
+  const [color, setColor] = React.useState(props.color);
+
+  // reference: https://cssinjs.org/react-jss/?v=v10.0.4#dynamic-values
+  const styles = useDynamicStyle({
+    ...props,
+    color,
+    bgColor: getOppositeColor(color)
+  });
+
   return (
-    <div className={styles("wrapper", "dynamicContainer")}>
-      {children || "这是一个盒子"}
+    <div>
+      <button onClick={() => setColor(getOppositeColor)}>切前景/背景色</button>
+      <div className={styles("wrapper", "myBox")}>
+        {children || "这是一个盒子"}
+      </div>
     </div>
   );
 };

src/demo/index.tsx

@@ -7,7 +7,9 @@ const Demo = () => {
   return (
     <div className="Demo">
       <Static>这是一个很好玩的静态盒子</Static>
-      <Dynamic>这是一个很好玩的动态盒子</Dynamic>
+      <Dynamic color="red">这是一个很好玩的动态盒子</Dynamic>
+      <Dynamic color="blue">这是一个很好玩的动态盒子</Dynamic>
+      {/* <Code>这是一个很好玩的动态盒子</Code> */}
     </div>
   );
 };