@yklyklpackages/message-card 0.5.0 → 0.6.1

package/dist/index.umd.js

@@ -165,7 +165,7 @@
     }
     return defaultValue;
   }
-  const defaultTheme$1 = {
+  const defaultTheme$2 = {
     fontSize: {
       FontSizes_JDH_Headline1: 46,
       FontSizes_JDH_Headline2: 34,
@@ -182,6 +182,9 @@
       Color_JDH_Red_Price: "#FF0F23",
       Color_JDH_Red_Discount: "#FF0F23",
       Color_JDH_Green_Success: "#67CC52",
+      Color_JDH_Green_Background: "#17CB8E1F",
+      Color_JDH_Red_Background: "#FF0F231F",
+      Color_JDH_Yellow_Background: "#FF80001F",
       Color_JDH_Gray_Headline: "#222222",
       Color_JDH_Gray_Text: "#222222",
       Color_JDH_Gray_SecondText: "#575859",
@@ -207,14 +210,68 @@
       Spacing_JDH_xxs: 4
     },
     borderRadius: {
-      Radius_JDH_LargeExtra: 32,
-      Radius_JDH_Large: 24,
-      Radius_JDH_Medium: 16,
-      Radius_JDH_Small: 8,
-      Radius_JDH_Mini: 6
+      Radius_JDH_xxl: 32,
+      Radius_JDH_xl: 24,
+      Radius_JDH_lg: 16,
+      Radius_JDH_sm: 8,
+      Radius_JDH_xs: 6
+    },
+    components: {}
+  };
+  const defaultTheme$1 = {
+    fontSize: {
+      FontSizes_JDH_Headline1: 23,
+      FontSizes_JDH_Headline2: 17,
+      FontSizes_JDH_Title: 15,
+      FontSizes_JDH_Text: 14,
+      FontSizes_JDH_AccentText: 12,
+      FontSizes_JDH_TagText: 10
+    },
+    color: {
+      Color_JDH_Primary: "#17CB8E",
+      Color_JDH_Accent1: "#FF8000",
+      Color_JDH_Accent2: "#73B0FF",
+      Color_JDH_Red_Danger: "#FF0F23",
+      Color_JDH_Red_Price: "#FF0F23",
+      Color_JDH_Red_Discount: "#FF0F23",
+      Color_JDH_Green_Success: "#67CC52",
+      Color_JDH_Green_Background: "#17CB8E1F",
+      Color_JDH_Red_Background: "#FF0F231F",
+      Color_JDH_Yellow_Background: "#FF80001F",
+      Color_JDH_Gray_Headline: "#222222",
+      Color_JDH_Gray_Text: "#222222",
+      Color_JDH_Gray_SecondText: "#575859",
+      Color_JDH_Gray_AccentText: "#858687",
+      Color_JDH_Gray_DividingLine: "#D3D3D3",
+      Color_JDH_Gray_Background: "#F5F5F6",
+      Color_JDH_Gray_CardBackground: "#E5E9EB",
+      Color_JDH_Gray_Card: "#FFFFFF",
+      Color_JDH_Gray_Mask: "#00000080"
+    },
+    fontWeight: {
+      FontWeight_JDH_Normal: 400,
+      FontWeight_JDH_Medium: 500
+    },
+    space: {
+      Spacing_JDH_4xl: 16,
+      Spacing_JDH_xxxl: 14,
+      Spacing_JDH_xxl: 12,
+      Spacing_JDH_xl: 10,
+      Spacing_JDH_lg: 8,
+      Spacing_JDH_sm: 6,
+      Spacing_JDH_xs: 4,
+      Spacing_JDH_xxs: 2
+    },
+    borderRadius: {
+      Radius_JDH_xxl: 16,
+      Radius_JDH_xl: 12,
+      Radius_JDH_lg: 8,
+      Radius_JDH_sm: 4,
+      Radius_JDH_xs: 3
     },
     components: {}
   };
+  const DEFAULT_SCALE = 0.5;
   var __defProp$v = Object.defineProperty;
   var __defProps$q = Object.defineProperties;
   var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
@@ -234,13 +291,14 @@
     return a;
   };
   var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-  const ThemeContext = React.createContext(defaultTheme$1);
+  const ThemeContext = React.createContext(defaultTheme$2);
   const ThemeProvider = ({
+    scale = DEFAULT_SCALE,
     theme,
     children
   }) => {
     const merged = React.useMemo(() => {
-      const base = defaultTheme$1;
+      const base = scale <= DEFAULT_SCALE ? defaultTheme$2 : defaultTheme$1;
       return __spreadProps$q(__spreadValues$s({}, base), {
         fontSize: __spreadValues$s(__spreadValues$s({}, base.fontSize), (theme == null ? void 0 : theme.fontSize) || {}),
         color: __spreadValues$s(__spreadValues$s({}, base.color), (theme == null ? void 0 : theme.color) || {}),
@@ -4573,6 +4631,7 @@
   const buildItemContainerStyle = (index2, count, props, horizontal = false, scale = 1) => {
     const style2 = __spreadValues$q({
       width: (props == null ? void 0 : props.flexDirection) === "row" ? "auto" : "100%",
+      flexDirection: props.direction || "column",
       height: "auto",
       boxSizing: "border-box",
       display: "flex",
@@ -5476,6 +5535,16 @@
     if (!node2) return null;
     const { layoutType, props, subType } = node2;
     const layoutProps = props;
+    if (typeof (customLayoutComponent == null ? void 0 : customLayoutComponent[subType]) !== "undefined") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CustomLayout,
+        {
+          customComponent: customLayoutComponent[subType],
+          props: layoutProps,
+          children
+        }
+      );
+    }
     switch (subType) {
       case "full-row":
         return /* @__PURE__ */ jsxRuntime.jsx(FullRowLayout, __spreadProps$c(__spreadValues$e({ props: layoutProps }, { originProps }), { children }));
@@ -5500,14 +5569,7 @@
       case "scroll-view":
         return /* @__PURE__ */ jsxRuntime.jsx(ScrollViewLayout, __spreadProps$c(__spreadValues$e({}, node2), { children }));
       default:
-        return typeof (customLayoutComponent == null ? void 0 : customLayoutComponent[subType]) !== "undefined" ? /* @__PURE__ */ jsxRuntime.jsx(
-          CustomLayout,
-          {
-            customComponent: customLayoutComponent[subType],
-            props: layoutProps,
-            children
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownRenderer, { type: String(layoutType), prefix: "未知布局类型" });
+        return /* @__PURE__ */ jsxRuntime.jsx(UnknownRenderer, { type: String(layoutType), prefix: "未知布局类型" });
     }
   };
   const isPlainObject$1 = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
@@ -29963,6 +30025,15 @@
     );
     if (!node2) return null;
     const { renderType, props, subType } = node2;
+    if (typeof (customRenderComponent == null ? void 0 : customRenderComponent[subType]) !== "undefined") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CustomRenderFromProps,
+        {
+          props,
+          component: customRenderComponent[subType]
+        }
+      );
+    }
     switch (subType) {
       case "text":
         return /* @__PURE__ */ jsxRuntime.jsx(TextRender, __spreadValues$4({}, props));
@@ -30026,13 +30097,7 @@
         return /* @__PURE__ */ jsxRuntime.jsx(CustomRenderFromIM, __spreadProps$3(__spreadValues$4({}, props), { originProps }));
       }
       default:
-        return typeof (customRenderComponent == null ? void 0 : customRenderComponent[subType]) !== "undefined" ? /* @__PURE__ */ jsxRuntime.jsx(
-          CustomRenderFromProps,
-          {
-            props,
-            component: customRenderComponent[subType]
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(UnknownRenderer, { type: String(renderType), prefix: "未知渲染类型" });
+        return /* @__PURE__ */ jsxRuntime.jsx(UnknownRenderer, { type: String(renderType), prefix: "未知渲染类型" });
     }
   };
   const ComponentRenderer = ({
@@ -30123,6 +30188,11 @@
     } = props;
     const { template, referenceComponentList, data } = component;
     const { editorMode: editorMode2 } = useForEditor({});
+    const responsiveValue = React.useMemo(() => {
+      return {
+        scale: props.devicePixelRatio ? 1 / props.devicePixelRatio : DEFAULT_SCALE
+      };
+    }, []);
     const [values, setValues] = React.useState({});
     const [dsValues, setDsValues] = React.useState({});
     const [nodes, setNodes] = React.useState([]);
@@ -30192,7 +30262,7 @@
       },
       [onAction]
     );
-    const content = /* @__PURE__ */ jsxRuntime.jsx(
+    const content = /* @__PURE__ */ jsxRuntime.jsx(ResponsiveContext.Provider, { value: responsiveValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       ActionProvider,
       {
         onAction,
@@ -30221,11 +30291,8 @@
           )
         ] })
       }
-    );
-    if (theme) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { theme, children: content });
-    }
-    return content;
+    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scale: responsiveValue.scale, theme, children: content });
   };
   var __defProp$5 = Object.defineProperty;
   var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -33928,11 +33995,6 @@
   };
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const MessageCard = (props) => {
-    const responsiveValue = React.useMemo(() => {
-      return {
-        scale: 0.5
-      };
-    }, []);
     const {
       templateJson,
       templateData,
@@ -33943,7 +34005,7 @@
       theme
     } = useMessageCardLogic(props);
     const { data = {} } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveContext.Provider, { value: responsiveValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-card-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-card-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
       Render,
       __spreadValues$1({
         component: __spreadProps(__spreadValues$1({}, templateJson), {
@@ -33964,7 +34026,7 @@
         },
         externalActions: props.externalActions
       }, props)
-    ) }) });
+    ) });
   };
   const MessageCard_default = React.forwardRef(MessageCard);
   var __defProp = Object.defineProperty;
@@ -33993,7 +34055,7 @@
   exports2.ThemeProvider = ThemeProvider;
   exports2.createRenderComponent = createRenderComponent;
   exports2.default = MessageCard_default;
-  exports2.defaultTheme = defaultTheme$1;
+  exports2.defaultTheme = defaultTheme$2;
   exports2.isLayoutNode = isLayoutNode;
   exports2.isRenderNode = isRenderNode;
   exports2.useTheme = useTheme$1;