Add more tooltips and move them to their own files

Also update the i18n files.
lowcoder-org · FalkWolsky · Apr 20, 2024 · Apr 11, 2024 · Apr 12, 2024 · Apr 12, 2024
commit f9f82952361b289ab1279c4abe968b7019b6ec76
diff --git a/client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx b/client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx
@@ -11,12 +11,12 @@ import {
 import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourCompConstants";
 import { TourInputCommonConfig } from "./tourInputConstants";
 import { Tour, TourProps } from "antd";
-import { PlacementType } from "@lowcoder-ee/comps/controls/tourStepControl";
 import React, { Suspense, useContext } from "react";
 import { EditorContext } from "@lowcoder-ee/comps/editorState";
 import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp";
 import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp";
 import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp";
+import { PlacementType } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
 
 /**
  * This component builds the Property Panel and the fake 'UI' for the Tour component
@@ -63,6 +63,8 @@ let TourBasicComp = (function() {
           steps={steps}
           open={props.open.value}
           onClose={() => props.open.onChange(false)}
+          indicatorsRender={(current, total) => props.indicatorsRender(current,total)}
+          disabledInteraction={props.disabledInteraction}
         />
       </Suspense>
     );

diff --git a/client/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx
@@ -1,7 +1,7 @@
 import { RecordConstructorToComp } from "lowcoder-core";
 import { BoolControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
-import { BoolCodeControl, StringControl } from "../../controls/codeControl";
+import { AlkjdfControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
 import { ControlNode, Section, sectionNames } from "lowcoder-design";
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
 import { useContext } from "react";
@@ -10,9 +10,11 @@ import { RefControl } from "comps/controls/refControl";
 import { BaseSelectRef } from "rc-select";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, focusMethod } from "comps/utils/methodUtils";
-import { EditorContext } from "comps/editorState";
 import { TourStepControl } from "@lowcoder-ee/comps/controls/tourStepControl";
-import { booleanExposingStateControl } from "lowcoder-sdk";
+import { booleanExposingStateControl, dropdownControl } from "lowcoder-sdk";
+import { trans } from "i18n";
+import { PlacementOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
+import { IndicatorsRenderTooltip, TourMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
 
 export const TourChildrenMap = {
   label: LabelControl,
@@ -24,6 +26,10 @@ export const TourChildrenMap = {
   inputValue: stateComp<string>(""), // user's input value when search
   showSearch: BoolControl.DEFAULT_TRUE,
   viewRef: RefControl<BaseSelectRef>,
+  indicatorsRender: AlkjdfControl,
+  disabledInteraction: BoolControl,
+  mask: MaskControl,
+  placement: dropdownControl(PlacementOptions, "bottom"),
 };
 
 export const TourPropertyView = (
@@ -39,6 +45,26 @@ export const TourPropertyView = (
     <Section name={sectionNames.basic}>
       {children.options.propertyView({})}
     </Section>
+
+    <Section name="customization">
+      {children.indicatorsRender.propertyView({
+        label: trans("tour.indicatorsRender.label"),
+        tooltip: IndicatorsRenderTooltip,
+      })}
+      {children.disabledInteraction.propertyView({
+        label: trans("tour.disabledInteraction.label"),
+        tooltip: trans("tour.disabledInteraction.tooltip")
+      })}
+      {children.mask.propertyView({
+        label: trans("tour.mask.label"),
+        tooltip: TourMaskTooltip,
+      })}
+      {/*{children.placement.propertyView({*/}
+      {/*  label: trans("tour.placement.label"),*/}
+      {/*  tooltip: TourPlacementTooltip,*/}
+      {/*  radioButton: false*/}
+      {/*})}*/}
+    </Section>
 
     {/*{["layout", "both"].includes(*/}
     {/*  useContext(EditorContext).editorModeStatus*/}

diff --git a/client/packages/lowcoder/src/comps/comps/tourComp/tourControlConstants.tsx b/client/packages/lowcoder/src/comps/comps/tourComp/tourControlConstants.tsx
@@ -0,0 +1,25 @@
+export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
+export type TourStepType = 'default' | 'primary';
+
+export const PlacementOptions: {label: string, value: PlacementType}[] = [
+  { label: "Center", value: "center"},
+  { label: "Left", value: "left"},
+  { label: "Left Top", value: "leftTop"},
+  { label: "Left Bottom", value: "leftBottom"},
+  { label: "Right", value: "right"},
+  { label: "Right Top", value: "rightTop"},
+  { label: "Right Bottom", value: "rightBottom"},
+  { label: "Top", value: "top"},
+  { label: "Top Left", value: "topLeft"},
+  { label: "Top Right", value: "topRight"},
+  { label: "Bottom", value: "bottom"},
+  { label: "Bottom Left", value: "bottomLeft"},
+  { label: "Bottom Right", value: "bottomRight"},
+];
+
+export const TypeOptions: {label: string, value: TourStepType}[] = [
+  { label: "Default", value: "default"},
+  { label: "Primary", value: "primary"},
+];
+
+export {};
diff --git a/client/packages/lowcoder/src/comps/comps/tourComp/tourInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/tourComp/tourInputConstants.tsx
@@ -88,36 +88,6 @@ export const useSelectInputValidate = (props: ValidationParams) => {
   ] as const;
 };
 
-// type ValidationCompWithValue = ValidationComp & {
-//   value: ConstructorToComp<
-//     ReturnType<
-//       | typeof stringExposingStateControl
-//       | typeof arrayStringExposingStateControl
-//       | typeof jsonExposingStateControl<(string | number)[]>
-//     >
-//   >;
-// };
-// export const TourInputInvalidConfig = depsConfig<
-//   ValidationCompWithValue,
-//   ChildrenTypeToDepsKeys<ValidationCompWithValue>
-// >({
-//   name: "invalid",
-//   desc: trans("export.invalidDesc"),
-//   depKeys: ["value", "required", "customRule"],
-//   func: (input) =>
-//     selectInputValidate({
-//       ...input,
-//       value: { value: input.value },
-//     }).validateStatus !== "success",
-// });
-
-// export const SelectInputValidationSection = (children: ValidationComp) => (
-//   <Section name={sectionNames.validation}>
-//     {requiredPropertyView(children)}
-//     {children.customRule.propertyView({})}
-//   </Section>
-// );
-
 type ChildrenType = RecordConstructorToComp<{
   value: ReturnType<typeof stringExposingStateControl>;
   options: typeof TourStepControl;
@@ -138,22 +108,4 @@ export const TourInputCommonConfig = [
 ];
 
 export const selectDivRefMethods = refMethods<HTMLDivElement>([focusWithOptions, blurMethod]);
-let styleExample = {
-  "style": { "boxShadow": "inset 0 0 15px #fff" },
-  "color": "rgba(40, 0, 255, .4)"
-};
 
-export const TourStepMaskTooltip = (
-  <div>
-    {trans("tour.options.mask.tooltip")}:
-    <br />
-    <br />
-    {trans("tour.options.mask.tooltipValidTypes")}
-    <br />
-    <br />
-    <h3>Example:</h3>
-    <code>
-      {JSON.stringify(styleExample, null, 1)}
-    </code>
-  </div>
-);
diff --git a/client/packages/lowcoder/src/comps/comps/tourComp/tourTooltips.tsx b/client/packages/lowcoder/src/comps/comps/tourComp/tourTooltips.tsx
@@ -0,0 +1,101 @@
+import { trans } from "@lowcoder-ee/i18n";
+
+const indicatorsRenderExample = `(current, total) => (
+  <span>
+    {current + 1} / {total}
+  </span>
+)`
+export const IndicatorsRenderTooltip = (
+  <div>
+    {trans("tour.indicatorsRender.tooltip")}
+    <br />
+    <br />
+    {trans("tour.indicatorsRender.tooltipValidTypes")}
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipSignatureHeader")}</h4>
+    <code>
+      {trans("tour.indicatorsRender.tooltipFunctionSignature")}
+    </code>
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipExampleHeader")}</h4>
+    <code>
+      {indicatorsRenderExample}
+    </code>
+  </div>
+);
+
+let styleExample = {
+  "style": { "boxShadow": "inset 0 0 15px #fff" },
+  "color": "rgba(40, 0, 255, .4)"
+};
+
+export const TourStepMaskTooltip = (
+  <div>
+    {trans("tour.options.mask.tooltip")}:
+    <br />
+    <br />
+    {trans("tour.options.mask.tooltipValidTypes")}
+    <br />
+    <br />
+    <h3>Example:</h3>
+    <code>
+      {JSON.stringify(styleExample, null, 1)}
+    </code>
+  </div>
+);
+
+export const TourMaskTooltip = (
+  <div>
+    {trans("tour.mask.tooltip")}:
+    <br />
+    <br />
+    {trans("tour.mask.tooltipValidTypes")}
+    <br />
+    <br />
+    <h4>Example:</h4>
+    <code>
+      {JSON.stringify(styleExample, null, 1)}
+    </code>
+  </div>
+);
+
+export const TourPlacementTooltip = (
+  <div>
+    {trans("tour.placement.tooltip")}:
+    <br />
+    <br />
+    <h4>Valid options</h4>
+    <h5>Above the component:</h5>
+    <ul>
+      <li><code>topLeft</code></li>
+      <li><code>top</code></li>
+      <li><code>topRight</code></li>
+    </ul>
+    <h5>To the left of the component:</h5>
+    <ul>
+      <li><code>leftTop</code></li>
+      <li><code>left</code></li>
+      <li><code>leftBottom</code></li>
+    </ul>
+    <h5>To the right of the component:</h5>
+    <ul>
+      <li><code>rightTop</code></li>
+      <li><code>right</code></li>
+      <li><code>rightBottom</code></li>
+    </ul>
+    <h5>Below the component:</h5>
+    <ul>
+      <li><code>bottomLeft</code></li>
+      <li><code>bottom</code></li>
+      <li><code>bottomRight</code></li>
+    </ul>
+    <h5>On top of the component:</h5>
+    <ul>
+      <li>center</li>
+    </ul>
+  </div>
+);
+
+export {};
diff --git a/client/packages/lowcoder/src/comps/controls/codeControl.tsx b/client/packages/lowcoder/src/comps/controls/codeControl.tsx
@@ -507,6 +507,16 @@ export const FunctionControl = codeControl<CodeFunction>(
   { codeType: "Function", evalWithMethods: true }
 );
 
+export const AlkjdfControl = codeControl<(current: number, total: number)=>ReactNode>(
+  (value) => {
+    // if (typeof value === "function") {
+    //   return value;
+    // }
+    return (current,total) => (value as (current: number, total: number)=>ReactNode)(current,total);
+  },
+  { codeType: "Function", evalWithMethods: true }
+);
+
 export const TransformerCodeControl = codeControl<JSONValue>(
   (value) => {
     if (typeof value === "function") {

diff --git a/client/packages/lowcoder/src/comps/controls/tourStepControl.tsx b/client/packages/lowcoder/src/comps/controls/tourStepControl.tsx
@@ -22,9 +22,8 @@ import { getNextEntityName } from "util/stringUtils";
 import { BoolControl, ControlParams } from "lowcoder-sdk";
 import { ReactNode, useContext, useEffect, useState } from "react";
 import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
-import { TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourInputConstants";
-export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
-export type TourStepType = 'default' | 'primary';
+import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
+import { TourPlacementTooltip, TourStepMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
 
 const OptionTypes = [
   {
@@ -265,29 +264,6 @@ export function tourStepsControl<T extends TourStepControlType>(
   };
 }
 
-const PlacementOptions: {label: string, value: PlacementType}[] = [
-  { label: "Center", value: "center"},
-  { label: "Left", value: "left"},
-  { label: "Left Top", value: "leftTop"},
-  { label: "Left Bottom", value: "leftBottom"},
-  { label: "Right", value: "right"},
-  { label: "Right Top", value: "rightTop"},
-  { label: "Right Bottom", value: "rightBottom"},
-  { label: "Top", value: "top"},
-  { label: "Top Left", value: "topLeft"},
-  { label: "Top Right", value: "topRight"},
-  { label: "Bottom", value: "bottom"},
-  { label: "Bottom Left", value: "bottomLeft"},
-  { label: "Bottom Right", value: "bottomRight"},
-];
-
-
-const TypeOptions: {label: string, value: TourStepType}[] = [
-  { label: "Default", value: "default"},
-  { label: "Primary", value: "primary"},
-];
-
-
 export function editorStateDropdownControl<T extends OptionsType>(
   options: ((editorState: EditorState) => T),
   defaultValue: ValueFromOption<T>
@@ -432,7 +408,8 @@ TourStep = class extends TourStep implements TourStepCompProperty {
           radioButton: false,
         })}
         {this.children.placement.propertyView({
-          label: trans("textShow.verticalAlignment"),
+          label: trans("tour.placement.label"),
+          tooltip: TourPlacementTooltip,
           radioButton: false
         })}
         {this.children.arrow.propertyView({
@@ -443,7 +420,7 @@ TourStep = class extends TourStep implements TourStepCompProperty {
           label: "Cover Image Url"
         })}
         {this.children.mask.propertyView({
-          label: "Mask",
+          label: trans("tour.options.mask.label"),
           tooltip: TourStepMaskTooltip,
         })}
         {this.children.type.propertyView({

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2825,13 +2825,37 @@ export const en = {
     "navItemStyle": "Menu Item Style"
   },
 
-  "tour": {
+  "tour": { 
+    tooltipExampleHeader: "Example:",
+    tooltipSignatureHeader: "Signature:",
     "options": {
       "mask": {
         "label": "Mask",
         "tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
-        "tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd. See an example below",
+        "tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
       }
+    },
+    "indicatorsRender": {
+      "label": "Indicators Render",
+      "tooltip": "Provides a custom indicator for which step you are on",
+      "tooltipValidTypes": "Format is a function that accepts two args, `current` and `total` and returns a ReactNode",
+      "tooltipFunctionSignatureHeader": "Signature:",
+      "tooltipFunctionSignature": "(current: number, total: number) => ReactNode",
+      "tooltipExampleHeader": "Example:",
+    },
+    "disabledInteraction": {
+      "label": "Disable Interaction",
+      "tooltip": "Disable interaction in the highlighted area."
+    },
+    "mask": {
+      "label": "Mask",
+      "tooltip": "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
+      "tooltipValidTypes": "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
+    },
+    placement: {
+      label: "Placement",
+      tooltip: "Position of the guide card relative to the target element",
+      tooltipValidOptions: "center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight"
     }
   },