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

package/dist/index.d.mts

@@ -1,6 +1,6 @@
+import { LocaleCode } from '@orderly.network/i18n';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { LocaleCode } from '@orderly.network/i18n';
 
 /* eslint-enable jsdoc/require-jsdoc */
 declare enum HHistDirection {
@@ -15532,6 +15532,40 @@ interface DisplayControlSettingInterface {
     liquidationPrice: boolean;
 }
 
+interface IProps {
+    displayControlState: DisplayControlSettingInterface;
+    changeDisplayControlState: (state: DisplayControlSettingInterface) => void;
+}
+/**
+ * One desktop dropdown menu row in display-control panel.
+ * `onCheckedChange` allows plugins to inject fully custom toggle behaviors.
+ */
+type DesktopDisplayControlMenuItem = {
+    id: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+};
+/**
+ * Interceptor props for desktop display-control menu list target.
+ */
+type DesktopDisplayControlMenuListProps = {
+    items: DesktopDisplayControlMenuItem[];
+};
+
+/**
+ * Module augmentation: maps TradingView interceptor target paths to props types.
+ * Import from @orderly.network/ui-tradingview to enable typed props in
+ * createInterceptor("TradingView.DisplayControl.DesktopMenuList", ...).
+ */
+
+declare module "@orderly.network/plugin-core" {
+    interface InterceptorTargetPropsMap {
+        "TradingView.DisplayControl.DesktopMenuList": DesktopDisplayControlMenuListProps;
+    }
+}
+
 declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWidgetPropsInterface & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const TradingviewUI: React__default.ForwardRefExoticComponent<TradingviewUIPropsInterface & React__default.RefAttributes<HTMLDivElement>>;
@@ -15558,4 +15592,12 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     fullscreen: any;
 };
 
-export { type DisplayControlSettingInterface, InjectableTradingviewDesktop, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+/**
+ * Interceptor target path for desktop TradingView display-control dropdown list.
+ */
+declare const DesktopDisplayControlMenuListTarget = "TradingView.DisplayControl.DesktopMenuList";
+declare const DesktopDisplayControl: React.FC<IProps>;
+
+declare const MobileDisplayControl: React.FC<IProps>;
+
+export { DesktopDisplayControl, type DesktopDisplayControlMenuItem, type DesktopDisplayControlMenuListProps, DesktopDisplayControlMenuListTarget, type DisplayControlSettingInterface, InjectableTradingviewDesktop, MobileDisplayControl, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import { LocaleCode } from '@orderly.network/i18n';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { LocaleCode } from '@orderly.network/i18n';
 
 /* eslint-enable jsdoc/require-jsdoc */
 declare enum HHistDirection {
@@ -15532,6 +15532,40 @@ interface DisplayControlSettingInterface {
     liquidationPrice: boolean;
 }
 
+interface IProps {
+    displayControlState: DisplayControlSettingInterface;
+    changeDisplayControlState: (state: DisplayControlSettingInterface) => void;
+}
+/**
+ * One desktop dropdown menu row in display-control panel.
+ * `onCheckedChange` allows plugins to inject fully custom toggle behaviors.
+ */
+type DesktopDisplayControlMenuItem = {
+    id: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+};
+/**
+ * Interceptor props for desktop display-control menu list target.
+ */
+type DesktopDisplayControlMenuListProps = {
+    items: DesktopDisplayControlMenuItem[];
+};
+
+/**
+ * Module augmentation: maps TradingView interceptor target paths to props types.
+ * Import from @orderly.network/ui-tradingview to enable typed props in
+ * createInterceptor("TradingView.DisplayControl.DesktopMenuList", ...).
+ */
+
+declare module "@orderly.network/plugin-core" {
+    interface InterceptorTargetPropsMap {
+        "TradingView.DisplayControl.DesktopMenuList": DesktopDisplayControlMenuListProps;
+    }
+}
+
 declare const TradingviewWidget: React$1.ForwardRefExoticComponent<TradingviewWidgetPropsInterface & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const TradingviewUI: React__default.ForwardRefExoticComponent<TradingviewUIPropsInterface & React__default.RefAttributes<HTMLDivElement>>;
@@ -15558,4 +15592,12 @@ declare function useTradingviewScript(props: TradingviewWidgetPropsInterface): {
     fullscreen: any;
 };
 
-export { type DisplayControlSettingInterface, InjectableTradingviewDesktop, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };
+/**
+ * Interceptor target path for desktop TradingView display-control dropdown list.
+ */
+declare const DesktopDisplayControlMenuListTarget = "TradingView.DisplayControl.DesktopMenuList";
+declare const DesktopDisplayControl: React.FC<IProps>;
+
+declare const MobileDisplayControl: React.FC<IProps>;
+
+export { DesktopDisplayControl, type DesktopDisplayControlMenuItem, type DesktopDisplayControlMenuListProps, DesktopDisplayControlMenuListTarget, type DisplayControlSettingInterface, InjectableTradingviewDesktop, MobileDisplayControl, type TradingviewLocaleCode, TradingviewUI, type TradingviewUIPropsInterface, TradingviewWidget, type TradingviewWidgetPropsInterface, useTradingviewScript };

package/dist/index.js

@@ -627,11 +627,48 @@ var init_timeInterval = __esm({
     };
   }
 });
-var DesktopDisplayControl;
+exports.DesktopDisplayControlMenuListTarget = void 0; var DesktopDisplayControlMenuList, InjectableDesktopDisplayControlMenuList; exports.DesktopDisplayControl = void 0;
 var init_displayControl_desktop = __esm({
   "src/components/displayControl/displayControl.desktop.tsx"() {
     init_icons();
-    DesktopDisplayControl = (props) => {
+    exports.DesktopDisplayControlMenuListTarget = "TradingView.DisplayControl.DesktopMenuList";
+    DesktopDisplayControlMenuList = ({ items }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Flex,
+        {
+          justify: "between",
+          itemAlign: "center",
+          className: "oui-w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                className: ui.cn(
+                  "oui-text-sm oui-text-base-contrast-80",
+                  !(item.checked ?? true) && "oui-text-base-contrast-36"
+                ),
+                children: item.label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Switch,
+              {
+                className: "oui-h-4 oui-w-8",
+                checked: item.checked ?? true,
+                disabled: item.disabled,
+                onCheckedChange: (checked) => item.onCheckedChange?.(checked)
+              }
+            )
+          ]
+        },
+        item.id
+      )) });
+    };
+    InjectableDesktopDisplayControlMenuList = ui.injectable(
+      DesktopDisplayControlMenuList,
+      exports.DesktopDisplayControlMenuListTarget
+    );
+    exports.DesktopDisplayControl = (props) => {
       const { displayControlState, changeDisplayControlState } = props;
       const [open, setOpen] = React3.useState(false);
       const { t } = i18n.useTranslation();
@@ -639,38 +676,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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           ui.Flex,
@@ -717,40 +810,12 @@ var init_displayControl_desktop = __esm({
                 width: 240,
                 justify: "start",
                 itemAlign: "start",
-                children: displayControlMap.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  ui.Flex,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  InjectableDesktopDisplayControlMenuList,
                   {
-                    justify: "between",
-                    itemAlign: "center",
-                    className: "oui-w-full",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Text,
-                        {
-                          className: ui.cn(
-                            "oui-text-sm oui-text-base-contrast-80",
-                            !(displayControlState[item.id] ?? true) && "oui-text-base-contrast-36"
-                          ),
-                          children: item.label
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ui.Switch,
-                        {
-                          className: "oui-h-4 oui-w-8",
-                          checked: displayControlState[item.id] ?? true,
-                          onCheckedChange: (checked) => {
-                            changeDisplayControlState({
-                              ...displayControlState,
-                              [item.id]: checked
-                            });
-                          }
-                        }
-                      )
-                    ]
-                  },
-                  item.id
-                ))
+                    items: displayControlMap
+                  }
+                )
               }
             )
           }
@@ -759,11 +824,11 @@ var init_displayControl_desktop = __esm({
     };
   }
 });
-var MobileDisplayControl;
+exports.MobileDisplayControl = void 0;
 var init_displayControl_mobile = __esm({
   "src/components/displayControl/displayControl.mobile.tsx"() {
     init_icons();
-    MobileDisplayControl = (props) => {
+    exports.MobileDisplayControl = (props) => {
       const [open, setOpen] = React3.useState(false);
       const { t } = i18n.useTranslation();
       const mobileDisplayControlMap = React3.useMemo(() => {
@@ -888,8 +953,9 @@ var init_displayControl_mobile = __esm({
 // src/components/displayControl/index.tsx
 var displayControl_exports = {};
 __export(displayControl_exports, {
-  DesktopDisplayControl: () => DesktopDisplayControl,
-  MobileDisplayControl: () => MobileDisplayControl
+  DesktopDisplayControl: () => exports.DesktopDisplayControl,
+  DesktopDisplayControlMenuListTarget: () => exports.DesktopDisplayControlMenuListTarget,
+  MobileDisplayControl: () => exports.MobileDisplayControl
 });
 var init_displayControl = __esm({
   "src/components/displayControl/index.tsx"() {
@@ -5003,6 +5069,9 @@ var TradingviewWidget = React3.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TradingviewUI, { ...state });
 });
 
+// src/index.ts
+init_displayControl();
+
 exports.InjectableTradingviewDesktop = InjectableTradingviewDesktop;
 exports.TradingviewUI = TradingviewUI;
 exports.TradingviewWidget = TradingviewWidget;