@yklyklpackages/message-card 0.5.0 → 0.6.1

package/dist/index.mjs

@@ -148,7 +148,7 @@ function JSONSafeParse(str, defaultValue) {
   }
   return defaultValue;
 }
-const defaultTheme$1 = {
+const defaultTheme$2 = {
   fontSize: {
     FontSizes_JDH_Headline1: 46,
     FontSizes_JDH_Headline2: 34,
@@ -165,6 +165,9 @@ const defaultTheme$1 = {
     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",
@@ -190,14 +193,68 @@ const defaultTheme$1 = {
     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;
@@ -217,13 +274,14 @@ var __spreadValues$s = (a, b) => {
   return a;
 };
 var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-const ThemeContext = createContext(defaultTheme$1);
+const ThemeContext = createContext(defaultTheme$2);
 const ThemeProvider = ({
+  scale = DEFAULT_SCALE,
   theme,
   children
 }) => {
   const merged = useMemo$1(() => {
-    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) || {}),
@@ -4556,6 +4614,7 @@ const fractionWidth = (percent) => ({
 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",
@@ -5459,6 +5518,16 @@ const LayoutWrapper = ({
   if (!node2) return null;
   const { layoutType, props, subType } = node2;
   const layoutProps = props;
+  if (typeof (customLayoutComponent == null ? void 0 : customLayoutComponent[subType]) !== "undefined") {
+    return /* @__PURE__ */ jsx(
+      CustomLayout,
+      {
+        customComponent: customLayoutComponent[subType],
+        props: layoutProps,
+        children
+      }
+    );
+  }
   switch (subType) {
     case "full-row":
       return /* @__PURE__ */ jsx(FullRowLayout, __spreadProps$c(__spreadValues$e({ props: layoutProps }, { originProps }), { children }));
@@ -5483,14 +5552,7 @@ const LayoutWrapper = ({
     case "scroll-view":
       return /* @__PURE__ */ jsx(ScrollViewLayout, __spreadProps$c(__spreadValues$e({}, node2), { children }));
     default:
-      return typeof (customLayoutComponent == null ? void 0 : customLayoutComponent[subType]) !== "undefined" ? /* @__PURE__ */ jsx(
-        CustomLayout,
-        {
-          customComponent: customLayoutComponent[subType],
-          props: layoutProps,
-          children
-        }
-      ) : /* @__PURE__ */ jsx(UnknownRenderer, { type: String(layoutType), prefix: "未知布局类型" });
+      return /* @__PURE__ */ jsx(UnknownRenderer, { type: String(layoutType), prefix: "未知布局类型" });
   }
 };
 const isPlainObject$1 = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
@@ -29946,6 +30008,15 @@ const LeafWrapper = ({
   );
   if (!node2) return null;
   const { renderType, props, subType } = node2;
+  if (typeof (customRenderComponent == null ? void 0 : customRenderComponent[subType]) !== "undefined") {
+    return /* @__PURE__ */ jsx(
+      CustomRenderFromProps,
+      {
+        props,
+        component: customRenderComponent[subType]
+      }
+    );
+  }
   switch (subType) {
     case "text":
       return /* @__PURE__ */ jsx(TextRender, __spreadValues$4({}, props));
@@ -30009,13 +30080,7 @@ const LeafWrapper = ({
       return /* @__PURE__ */ jsx(CustomRenderFromIM, __spreadProps$3(__spreadValues$4({}, props), { originProps }));
     }
     default:
-      return typeof (customRenderComponent == null ? void 0 : customRenderComponent[subType]) !== "undefined" ? /* @__PURE__ */ jsx(
-        CustomRenderFromProps,
-        {
-          props,
-          component: customRenderComponent[subType]
-        }
-      ) : /* @__PURE__ */ jsx(UnknownRenderer, { type: String(renderType), prefix: "未知渲染类型" });
+      return /* @__PURE__ */ jsx(UnknownRenderer, { type: String(renderType), prefix: "未知渲染类型" });
   }
 };
 const ComponentRenderer = ({
@@ -30106,6 +30171,11 @@ const MessageContainer = (props) => {
   } = props;
   const { template, referenceComponentList, data } = component;
   const { editorMode: editorMode2 } = useForEditor({});
+  const responsiveValue = useMemo$1(() => {
+    return {
+      scale: props.devicePixelRatio ? 1 / props.devicePixelRatio : DEFAULT_SCALE
+    };
+  }, []);
   const [values, setValues] = useState({});
   const [dsValues, setDsValues] = useState({});
   const [nodes, setNodes] = useState([]);
@@ -30175,7 +30245,7 @@ const MessageContainer = (props) => {
     },
     [onAction]
   );
-  const content = /* @__PURE__ */ jsx(
+  const content = /* @__PURE__ */ jsx(ResponsiveContext.Provider, { value: responsiveValue, children: /* @__PURE__ */ jsx(
     ActionProvider,
     {
       onAction,
@@ -30204,11 +30274,8 @@ const MessageContainer = (props) => {
         )
       ] })
     }
-  );
-  if (theme) {
-    return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: content });
-  }
-  return content;
+  ) });
+  return /* @__PURE__ */ 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;
@@ -33911,11 +33978,6 @@ var __spreadValues$1 = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const MessageCard = (props) => {
-  const responsiveValue = useMemo$1(() => {
-    return {
-      scale: 0.5
-    };
-  }, []);
   const {
     templateJson,
     templateData,
@@ -33926,7 +33988,7 @@ const MessageCard = (props) => {
     theme
   } = useMessageCardLogic(props);
   const { data = {} } = props;
-  return /* @__PURE__ */ jsx(ResponsiveContext.Provider, { value: responsiveValue, children: /* @__PURE__ */ jsx("div", { className: "message-card-wrapper", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "message-card-wrapper", children: /* @__PURE__ */ jsx(
     Render,
     __spreadValues$1({
       component: __spreadProps(__spreadValues$1({}, templateJson), {
@@ -33947,7 +34009,7 @@ const MessageCard = (props) => {
       },
       externalActions: props.externalActions
     }, props)
-  ) }) });
+  ) });
 };
 const MessageCard_default = forwardRef(MessageCard);
 var __defProp = Object.defineProperty;
@@ -33977,7 +34039,7 @@ export {
   ThemeProvider,
   createRenderComponent,
   MessageCard_default as default,
-  defaultTheme$1 as defaultTheme,
+  defaultTheme$2 as defaultTheme,
   isLayoutNode,
   isRenderNode,
   useTheme$1 as useTheme