@orderly.network/ui-tradingview 2.12.4 → 3.0.0-alpha.0

package/dist/index.d.mts

@@ -15536,6 +15536,8 @@ declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWi
 
 declare const TradingviewUI: React__default.ForwardRefExoticComponent<TradingviewUIPropsInterface & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const InjectableTradingviewDesktop: React$1.ComponentType<TradingviewUIPropsInterface>;
+
 declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     tradingViewScriptSrc: string | undefined;
     chartRef: React$1.RefObject<HTMLDivElement>;
@@ -15556,4 +15558,4 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     fullscreen: any;
 };
 
-export { type DisplayControlSettingInterface, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+export { type DisplayControlSettingInterface, InjectableTradingviewDesktop, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.d.ts

@@ -15536,6 +15536,8 @@ declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWi
 
 declare const TradingviewUI: React__default.ForwardRefExoticComponent<TradingviewUIPropsInterface & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const InjectableTradingviewDesktop: React$1.ComponentType<TradingviewUIPropsInterface>;
+
 declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     tradingViewScriptSrc: string | undefined;
     chartRef: React$1.RefObject<HTMLDivElement>;
@@ -15556,4 +15558,4 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     fullscreen: any;
 };
 
-export { type DisplayControlSettingInterface, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+export { type DisplayControlSettingInterface, InjectableTradingviewDesktop, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.js

@@ -4773,9 +4773,25 @@ var NoTradingview = () => {
   ] }) });
 };
 var TopBar = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-toolbar oui-flex oui-h-[44px] oui-justify-between md:oui-justify-start oui-items-center oui-p-2 md:oui-px-3 md:oui-pt-3 md:oui-pb-[14px]", children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-toolbar oui-flex oui-h-[44px] oui-justify-between md:oui-justify-start oui-items-center oui-p-2 md:oui-px-3 md:oui-pt-3 md:oui-pb-[14px] oui-w-full", children: props.children });
 };
 var topBar_default = TopBar;
+var TradingviewChart = ({ chartRef }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": "tradingview-chart",
+      ref: chartRef,
+      className: "oui-size-full oui-overflow-hidden"
+    }
+  );
+};
+
+// src/components/tradingview.injectable.tsx
+var InjectableTradingviewDesktop = ui.injectable(
+  TradingviewChart,
+  "TradingView.Desktop"
+);
 var LazyLineType = React3__default.default.lazy(() => Promise.resolve().then(() => (init_lineType(), lineType_exports)));
 var LazyTimeInterval = React3__default.default.lazy(
   () => Promise.resolve().then(() => (init_timeInterval(), timeInterval_exports)).then((mod) => ({ default: mod.TimeInterval }))
@@ -4790,6 +4806,98 @@ var LazyDesktopDisplayControl = React3__default.default.lazy(
     default: mod.DesktopDisplayControl
   }))
 );
+var MobileTopBar = ({
+  interval,
+  changeInterval,
+  displayControlState,
+  changeDisplaySetting,
+  openChartIndicators
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gapX: 2,
+      width: "100%",
+      justify: "between",
+      className: "oui-hide-scrollbar oui-overflow-x-scroll",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyTimeInterval,
+          {
+            interval: interval ?? "15",
+            changeInterval
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyMobileDisplayControl,
+          {
+            displayControlState,
+            changeDisplayControlState: changeDisplaySetting
+          }
+        ) })
+      ]
+    }
+  );
+};
+var DesktopTopBar = ({
+  interval,
+  changeInterval,
+  displayControlState,
+  changeDisplaySetting,
+  openChartIndicators,
+  lineType,
+  changeLineType,
+  openChartSetting,
+  fullscreen,
+  onFullScreenChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        LazyTimeInterval,
+        {
+          interval: interval ?? "1",
+          changeInterval
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Divider,
+        {
+          direction: "vertical",
+          className: "oui-h-4",
+          mx: 2,
+          intensity: 8
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyDesktopDisplayControl,
+          {
+            displayControlState,
+            changeDisplayControlState: changeDisplaySetting
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyLineType, { lineType, changeLineType }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartSetting, children: /* @__PURE__ */ jsxRuntime.jsx(SettingIcon, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { children: fullscreen ? /* @__PURE__ */ jsxRuntime.jsx(
+      ZoomOutIcon,
+      {
+        className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
+        onClick: onFullScreenChange
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ZoomInIcon,
+      {
+        className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
+        onClick: onFullScreenChange
+      }
+    ) })
+  ] });
+};
 var OperateButton = ({ children, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
@@ -4859,83 +4967,31 @@ var TradingviewUI = React3.forwardRef((props, ref) => {
             props.classNames?.content
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(topBar_default, { children: isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.Flex,
+            /* @__PURE__ */ jsxRuntime.jsx(topBar_default, { children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+              MobileTopBar,
               {
-                gapX: 2,
-                width: "100%",
-                justify: "between",
-                className: "oui-hide-scrollbar oui-overflow-x-scroll",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyTimeInterval,
-                    {
-                      interval: interval ?? "15",
-                      changeInterval
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyMobileDisplayControl,
-                    {
-                      displayControlState,
-                      changeDisplayControlState: changeDisplaySetting
-                    }
-                  ) })
-                ]
+                interval,
+                changeInterval,
+                displayControlState,
+                changeDisplaySetting,
+                openChartIndicators
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LazyTimeInterval,
-                  {
-                    interval: interval ?? "1",
-                    changeInterval
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Divider,
-                  {
-                    direction: "vertical",
-                    className: "oui-h-4",
-                    mx: 2,
-                    intensity: 8
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyDesktopDisplayControl,
-                    {
-                      displayControlState,
-                      changeDisplayControlState: changeDisplaySetting
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsxRuntime.jsx(IndicatorsIcon, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    LazyLineType,
-                    {
-                      lineType,
-                      changeLineType
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(OperateButton, { onClick: openChartSetting, children: /* @__PURE__ */ jsxRuntime.jsx(SettingIcon, {}) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { children: props.fullscreen ? /* @__PURE__ */ jsxRuntime.jsx(
-                ZoomOutIcon,
-                {
-                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
-                  onClick: onFullScreenChange
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                ZoomInIcon,
-                {
-                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
-                  onClick: onFullScreenChange
-                }
-              ) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: chartRef, className: "oui-size-full oui-overflow-hidden" })
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              DesktopTopBar,
+              {
+                interval,
+                changeInterval,
+                displayControlState,
+                changeDisplaySetting,
+                openChartIndicators,
+                lineType,
+                changeLineType,
+                openChartSetting,
+                fullscreen: props.fullscreen,
+                onFullScreenChange
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(InjectableTradingviewDesktop, { ...props })
           ]
         }
       )
@@ -4944,9 +5000,10 @@ var TradingviewUI = React3.forwardRef((props, ref) => {
 });
 var TradingviewWidget = React3.forwardRef((props, ref) => {
   const state = useTradingviewScript(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(TradingviewUI, { ...state, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(TradingviewUI, { ...state });
 });
 
+exports.InjectableTradingviewDesktop = InjectableTradingviewDesktop;
 exports.TradingviewUI = TradingviewUI;
 exports.TradingviewWidget = TradingviewWidget;
 exports.useTradingviewScript = useTradingviewScript;