@orderly.network/ui-tradingview 3.0.0 → 3.0.1-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 { injectable, cn, Flex, Divider, useScreen, useOrderlyTheme, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Text, Switch } from '@orderly.network/ui';
+import { injectable, cn, Flex, Divider, useScreen, useOrderlyTheme, Text, Switch, Box, useThemeAttribute, toast, modal, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent } 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';
@@ -621,10 +621,47 @@ var init_timeInterval = __esm({
     };
   }
 });
-var DesktopDisplayControl;
+var DesktopDisplayControlMenuListTarget, DesktopDisplayControlMenuList, InjectableDesktopDisplayControlMenuList, DesktopDisplayControl;
 var init_displayControl_desktop = __esm({
   "src/components/displayControl/displayControl.desktop.tsx"() {
     init_icons();
+    DesktopDisplayControlMenuListTarget = "TradingView.DisplayControl.DesktopMenuList";
+    DesktopDisplayControlMenuList = ({ items }) => {
+      return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          justify: "between",
+          itemAlign: "center",
+          className: "oui-w-full",
+          children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: cn(
+                  "oui-text-sm oui-text-base-contrast-80",
+                  !(item.checked ?? true) && "oui-text-base-contrast-36"
+                ),
+                children: item.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                className: "oui-h-4 oui-w-8",
+                checked: item.checked ?? true,
+                disabled: item.disabled,
+                onCheckedChange: (checked) => item.onCheckedChange?.(checked)
+              }
+            )
+          ]
+        },
+        item.id
+      )) });
+    };
+    InjectableDesktopDisplayControlMenuList = injectable(
+      DesktopDisplayControlMenuList,
+      DesktopDisplayControlMenuListTarget
+    );
     DesktopDisplayControl = (props) => {
       const { displayControlState, changeDisplayControlState } = props;
       const [open, setOpen] = useState(false);
@@ -633,38 +670,94 @@ var init_displayControl_desktop = __esm({
         return [
           {
             label: t("common.position"),
-            id: "position"
+            id: "position",
+            checked: displayControlState.position ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                position: checked
+              });
+            }
           },
           {
             label: t("tradingView.displayControl.buySell"),
-            id: "buySell"
+            id: "buySell",
+            checked: displayControlState.buySell ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                buySell: checked
+              });
+            }
           },
           {
             label: t("tradingView.displayControl.limitOrders"),
-            id: "limitOrders"
+            id: "limitOrders",
+            checked: displayControlState.limitOrders ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                limitOrders: checked
+              });
+            }
           },
           {
             label: t("tradingView.displayControl.stopOrders"),
-            id: "stopOrders"
+            id: "stopOrders",
+            checked: displayControlState.stopOrders ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                stopOrders: checked
+              });
+            }
           },
           {
             label: t("common.tpsl"),
-            id: "tpsl"
+            id: "tpsl",
+            checked: displayControlState.tpsl ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                tpsl: checked
+              });
+            }
           },
           {
             label: t("tpsl.positionTpsl"),
-            id: "positionTpsl"
+            id: "positionTpsl",
+            checked: displayControlState.positionTpsl ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                positionTpsl: checked
+              });
+            }
           },
           {
             label: t("orderEntry.orderType.trailingStop"),
-            id: "trailingStop"
+            id: "trailingStop",
+            checked: displayControlState.trailingStop ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                trailingStop: checked
+              });
+            }
           },
           {
             label: t("tradingView.displayControl.liquidationPrice"),
-            id: "liquidationPrice"
+            id: "liquidationPrice",
+            checked: displayControlState.liquidationPrice ?? true,
+            onCheckedChange: (checked) => {
+              changeDisplayControlState({
+                ...displayControlState,
+                liquidationPrice: checked
+              });
+            }
           }
         ];
-      }, [t]);
+      }, [changeDisplayControlState, displayControlState, t]);
       return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           Flex,
@@ -711,40 +804,12 @@ var init_displayControl_desktop = __esm({
                 width: 240,
                 justify: "start",
                 itemAlign: "start",
-                children: displayControlMap.map((item) => /* @__PURE__ */ jsxs(
-                  Flex,
+                children: /* @__PURE__ */ jsx(
+                  InjectableDesktopDisplayControlMenuList,
                   {
-                    justify: "between",
-                    itemAlign: "center",
-                    className: "oui-w-full",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          className: cn(
-                            "oui-text-sm oui-text-base-contrast-80",
-                            !(displayControlState[item.id] ?? true) && "oui-text-base-contrast-36"
-                          ),
-                          children: item.label
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Switch,
-                        {
-                          className: "oui-h-4 oui-w-8",
-                          checked: displayControlState[item.id] ?? true,
-                          onCheckedChange: (checked) => {
-                            changeDisplayControlState({
-                              ...displayControlState,
-                              [item.id]: checked
-                            });
-                          }
-                        }
-                      )
-                    ]
-                  },
-                  item.id
-                ))
+                    items: displayControlMap
+                  }
+                )
               }
             )
           }
@@ -883,6 +948,7 @@ var init_displayControl_mobile = __esm({
 var displayControl_exports = {};
 __export(displayControl_exports, {
   DesktopDisplayControl: () => DesktopDisplayControl,
+  DesktopDisplayControlMenuListTarget: () => DesktopDisplayControlMenuListTarget,
   MobileDisplayControl: () => MobileDisplayControl
 });
 var init_displayControl = __esm({
@@ -4997,6 +5063,9 @@ var TradingviewWidget = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(TradingviewUI, { ...state });
 });
 
-export { InjectableTradingviewDesktop, TradingviewUI, TradingviewWidget, useTradingviewScript };
+// src/index.ts
+init_displayControl();
+
+export { DesktopDisplayControl, DesktopDisplayControlMenuListTarget, InjectableTradingviewDesktop, MobileDisplayControl, TradingviewUI, TradingviewWidget, useTradingviewScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map