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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React3, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation, Trans, useLocaleCode, i18n } from '@orderly.network/i18n';
-import { cn, Flex, Divider, Box, useScreen, useOrderlyTheme, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Text, Switch } from '@orderly.network/ui';
+import { injectable, cn, Flex, Divider, useScreen, useOrderlyTheme, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Text, Switch } from '@orderly.network/ui';
 import { useMediaQuery, useConfig, useAccount, useSymbolsInfo, useLocalStorage, useOrderEntry_deprecated, useMarginModeBySymbol, useWS, usePositionStream, useOrderStream, useEventEmitter } from '@orderly.network/hooks';
 import { MEDIA_TABLET, OrderSide, TradingviewFullscreenKey, OrderType, AccountStatusEnum, OrderStatus, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, MarginMode } from '@orderly.network/types';
 import { Decimal, commify, getTrailingStopPrice, getPrecisionByNumber } from '@orderly.network/utils';
@@ -4767,9 +4767,25 @@ var NoTradingview = () => {
   ] }) });
 };
 var TopBar = (props) => {
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    "div",
+    {
+      "data-testid": "tradingview-chart",
+      ref: chartRef,
+      className: "oui-size-full oui-overflow-hidden"
+    }
+  );
+};
+
+// src/components/tradingview.injectable.tsx
+var InjectableTradingviewDesktop = injectable(
+  TradingviewChart,
+  "TradingView.Desktop"
+);
 var LazyLineType = React3.lazy(() => Promise.resolve().then(() => (init_lineType(), lineType_exports)));
 var LazyTimeInterval = React3.lazy(
   () => Promise.resolve().then(() => (init_timeInterval(), timeInterval_exports)).then((mod) => ({ default: mod.TimeInterval }))
@@ -4784,6 +4800,98 @@ var LazyDesktopDisplayControl = React3.lazy(
     default: mod.DesktopDisplayControl
   }))
 );
+var MobileTopBar = ({
+  interval,
+  changeInterval,
+  displayControlState,
+  changeDisplaySetting,
+  openChartIndicators
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      gapX: 2,
+      width: "100%",
+      justify: "between",
+      className: "oui-hide-scrollbar oui-overflow-x-scroll",
+      children: [
+        /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          LazyTimeInterval,
+          {
+            interval: interval ?? "15",
+            changeInterval
+          }
+        ) }),
+        /* @__PURE__ */ jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsx(IndicatorsIcon, {}) }),
+        /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          LazyMobileDisplayControl,
+          {
+            displayControlState,
+            changeDisplayControlState: changeDisplaySetting
+          }
+        ) })
+      ]
+    }
+  );
+};
+var DesktopTopBar = ({
+  interval,
+  changeInterval,
+  displayControlState,
+  changeDisplaySetting,
+  openChartIndicators,
+  lineType,
+  changeLineType,
+  openChartSetting,
+  fullscreen,
+  onFullScreenChange
+}) => {
+  return /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+    /* @__PURE__ */ jsxs(Flex, { children: [
+      /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        LazyTimeInterval,
+        {
+          interval: interval ?? "1",
+          changeInterval
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Divider,
+        {
+          direction: "vertical",
+          className: "oui-h-4",
+          mx: 2,
+          intensity: 8
+        }
+      ),
+      /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          LazyDesktopDisplayControl,
+          {
+            displayControlState,
+            changeDisplayControlState: changeDisplaySetting
+          }
+        ) }),
+        /* @__PURE__ */ jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsx(IndicatorsIcon, {}) }),
+        /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyLineType, { lineType, changeLineType }) }),
+        /* @__PURE__ */ jsx(OperateButton, { onClick: openChartSetting, children: /* @__PURE__ */ jsx(SettingIcon, {}) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { children: fullscreen ? /* @__PURE__ */ jsx(
+      ZoomOutIcon,
+      {
+        className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
+        onClick: onFullScreenChange
+      }
+    ) : /* @__PURE__ */ jsx(
+      ZoomInIcon,
+      {
+        className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
+        onClick: onFullScreenChange
+      }
+    ) })
+  ] });
+};
 var OperateButton = ({ children, onClick }) => {
   return /* @__PURE__ */ jsx(
     Box,
@@ -4853,83 +4961,31 @@ var TradingviewUI = forwardRef((props, ref) => {
             props.classNames?.content
           ),
           children: [
-            /* @__PURE__ */ jsx(topBar_default, { children: isMobile ? /* @__PURE__ */ jsxs(
-              Flex,
+            /* @__PURE__ */ jsx(topBar_default, { children: isMobile ? /* @__PURE__ */ jsx(
+              MobileTopBar,
               {
-                gapX: 2,
-                width: "100%",
-                justify: "between",
-                className: "oui-hide-scrollbar oui-overflow-x-scroll",
-                children: [
-                  /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                    LazyTimeInterval,
-                    {
-                      interval: interval ?? "15",
-                      changeInterval
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsx(IndicatorsIcon, {}) }),
-                  /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                    LazyMobileDisplayControl,
-                    {
-                      displayControlState,
-                      changeDisplayControlState: changeDisplaySetting
-                    }
-                  ) })
-                ]
+                interval,
+                changeInterval,
+                displayControlState,
+                changeDisplaySetting,
+                openChartIndicators
               }
-            ) : /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
-              /* @__PURE__ */ jsxs(Flex, { children: [
-                /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                  LazyTimeInterval,
-                  {
-                    interval: interval ?? "1",
-                    changeInterval
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  Divider,
-                  {
-                    direction: "vertical",
-                    className: "oui-h-4",
-                    mx: 2,
-                    intensity: 8
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                    LazyDesktopDisplayControl,
-                    {
-                      displayControlState,
-                      changeDisplayControlState: changeDisplaySetting
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(OperateButton, { onClick: openChartIndicators, children: /* @__PURE__ */ jsx(IndicatorsIcon, {}) }),
-                  /* @__PURE__ */ jsx(React3.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                    LazyLineType,
-                    {
-                      lineType,
-                      changeLineType
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(OperateButton, { onClick: openChartSetting, children: /* @__PURE__ */ jsx(SettingIcon, {}) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(Flex, { children: props.fullscreen ? /* @__PURE__ */ jsx(
-                ZoomOutIcon,
-                {
-                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
-                  onClick: onFullScreenChange
-                }
-              ) : /* @__PURE__ */ jsx(
-                ZoomInIcon,
-                {
-                  className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer",
-                  onClick: onFullScreenChange
-                }
-              ) })
-            ] }) }),
-            /* @__PURE__ */ jsx("div", { ref: chartRef, className: "oui-size-full oui-overflow-hidden" })
+            ) : /* @__PURE__ */ jsx(
+              DesktopTopBar,
+              {
+                interval,
+                changeInterval,
+                displayControlState,
+                changeDisplaySetting,
+                openChartIndicators,
+                lineType,
+                changeLineType,
+                openChartSetting,
+                fullscreen: props.fullscreen,
+                onFullScreenChange
+              }
+            ) }),
+            /* @__PURE__ */ jsx(InjectableTradingviewDesktop, { ...props })
           ]
         }
       )
@@ -4938,9 +4994,9 @@ var TradingviewUI = forwardRef((props, ref) => {
 });
 var TradingviewWidget = forwardRef((props, ref) => {
   const state = useTradingviewScript(props);
-  return /* @__PURE__ */ jsx(TradingviewUI, { ...state, ref });
+  return /* @__PURE__ */ jsx(TradingviewUI, { ...state });
 });
 
-export { TradingviewUI, TradingviewWidget, useTradingviewScript };
+export { InjectableTradingviewDesktop, TradingviewUI, TradingviewWidget, useTradingviewScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map