Merge branch 'feat/Layout-Mode' into feat-layout-mode-table

FalkWolsky · web-flow · commit a90b975fe3a9 · 2023-11-30T18:21:13.000+01:00
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -53,6 +53,9 @@ import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
 import { RowColorComp, TableChildrenView, TableInitComp } from "./tableTypes";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 export class TableImplComp extends TableInitComp implements IContainer {
   private prevUnevaledValue?: string;
   readonly filterData: RecordType[] = [];
@@ -298,7 +301,7 @@ export class TableImplComp extends TableInitComp implements IContainer {
   filterNode() {
     const nodes = {
       data: this.sortDataNode(),
-      searchValue: this.children.toolbar.children.searchText.node(),
+      searchValue: this.children.searchText.node(),
       filter: this.children.toolbar.children.filter.node(),
       showFilter: this.children.toolbar.children.showFilter.node(),
     };
@@ -443,7 +446,20 @@ let TableTmpComp = withViewFn(TableImplComp, (comp) => {
   );
 });
 
-TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
+
+const withEditorModeStatus = (Component:any) => (props:any) => {
+  const editorModeStatus = useContext(EditorContext).editorModeStatus;
+  return <Component {...props} editorModeStatus={editorModeStatus} />;
+};
+
+// Use this HOC when defining TableTmpComp
+TableTmpComp = withPropertyViewFn(TableTmpComp, (comp) => withEditorModeStatus(compTablePropertyView)(comp));
+
+// TableTmpComp = withPropertyViewFn(TableTmpComp, compTablePropertyView);
+
+
+
+
 
 /**
  * Hijack children's execution events and ensure that selectedRow is modified first (you can also add a triggeredRow field).
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -471,7 +471,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
     const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
     let colWidth: number | string = "auto";
     let minWidth: number | string = COL_MIN_WIDTH;
-    if (resizeWidth > 0) {
+    if (typeof resizeWidth === "number" && resizeWidth > 0) {
       minWidth = "unset";
       colWidth = resizeWidth;
     } else {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -397,83 +397,120 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
 
 function columnPropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T) {
   const columnLabel = trans("table.columnNum");
-  const dynamicColumn = comp.children.dynamicColumn.getView();
+  // const dynamicColumn = comp.children.dynamicColumn.getView();
   return [
     controlItem(
       { filterText: columnLabel },
       <ColumnPropertyView comp={comp} columnLabel={columnLabel} />
     ),
-    comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") }),
+    /* comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") }),
     dynamicColumn &&
       comp.children.dynamicColumnConfig.propertyView({
         label: trans("table.dynamicColumnConfig"),
         tooltip: trans("table.dynamicColumnConfigDesc"),
-      }),
+      }), */
   ];
 }
 
-export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T) {
+export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType> & { editorModeStatus: string }>(comp: T) {
+  const editorModeStatus = comp.editorModeStatus;
   const dataLabel = trans("data");
   return (
     <>
-      <Section name={trans("data")}>
-        {controlItem(
-          { filterText: dataLabel },
-          <div className={tableDataDivClassName}>
-            {comp.children.data.propertyView({
-              label: dataLabel,
+      {["logic", "both"].includes(editorModeStatus) && (
+        <Section name={trans("table.dataDesc")}>
+          {controlItem(
+            { filterText: dataLabel },
+            <div className={tableDataDivClassName}>
+              {comp.children.data.propertyView({
+                label: dataLabel,
+              })}
+            </div>
+          )}
+        </Section>
+      )}
+
+      {["layout", "both"].includes(editorModeStatus) && (
+        <Section name={trans("prop.columns")}>
+          {columnPropertyView(comp)}
+        </Section>
+      )}
+
+      {["logic", "both"].includes(editorModeStatus) && (
+        <>
+          <Section name={sectionNames.interaction}>
+            {comp.children.onEvent.getPropertyView()}
+            {comp.children.selection.getPropertyView()}
+            {hiddenPropertyView(comp.children)}
+            {loadingPropertyView(comp.children)}
+          </Section>
+
+          <Section name={trans("prop.toolbar")}>
+            {comp.children.toolbar.getPropertyView()}
+          </Section>
+        </>
+      )}
+
+      {["layout", "both"].includes(editorModeStatus) && (
+        <>
+          <Section name={sectionNames.layout}>
+            {comp.children.size.propertyView({
+              label: trans("table.tableSize"),
+              radioButton: true,
             })}
-          </div>
-        )}
-      </Section>
-      <Section name={trans("prop.columns")}>{columnPropertyView(comp)}</Section>
-      <Section name={sectionNames.layout}>
-        {comp.children.expansion.getPropertyView()}
-        {comp.children.autoHeight.getPropertyView()}
-        {hiddenPropertyView(comp.children)}
-      </Section>
-      <Section name={trans("prop.rowSelection")}>
-        {comp.children.selection.getPropertyView()}
-      </Section>
-      <Section name={trans("prop.toolbar")}>{comp.children.toolbar.getPropertyView()}</Section>
-      <Section name={trans("prop.pagination")}>
-        {comp.children.pagination.getPropertyView()}
-      </Section>
-      <Section name={sectionNames.interaction}>
-        {comp.children.onEvent.getPropertyView()}
-        {loadingPropertyView(comp.children)}
-        {comp.children.showDataLoadSpinner.propertyView({
-          label: trans("table.showDataLoadSpinner"),
-        })}
-        {comp.children.viewModeResizable.propertyView({
-          label: trans("table.viewModeResizable"),
-          tooltip: trans("table.viewModeResizableTooltip"),
-        })}
-      </Section>
-      <Section name={"Table Style"}>
-        {comp.children.style.getPropertyView()}
-        {comp.children.size.propertyView({
-          label: trans("table.tableSize"),
-          radioButton: true,
-        })}
-        {comp.children.hideBordered.propertyView({
-          label: trans("table.hideBordered"),
-        })}
-        {comp.children.hideHeader.propertyView({
-          label: trans("table.hideHeader"),
-        })}
-        {comp.children.fixedHeader.propertyView({
-          label: trans("table.fixedHeader"),
-          tooltip: trans("table.fixedHeaderTooltip")
-        })}
-      </Section>
-      <Section name={"Row Style"}>
-        {comp.children.rowStyle.getPropertyView()}
-        {comp.children.rowColor.getPropertyView()}
-      </Section>
-      <Section name={"Column Style"}>
-        {comp.children.columnsStyle.getPropertyView()}
-      </Section>
+            {comp.children.hideHeader.propertyView({
+              label: trans("table.hideHeader"),
+            })}
+            {comp.children.hideBordered.propertyView({
+              label: trans("table.hideBordered"),
+            })}
+            {comp.children.viewModeResizable.propertyView({
+              label: trans("table.viewModeResizable"),
+              tooltip: trans("table.viewModeResizableTooltip"),
+            })}
+          </Section>
+          <Section name={trans("prop.pagination")}>
+            {comp.children.pagination.getPropertyView()}
+          </Section>
+        </>
+      )}
+
+      {["logic", "both"].includes(editorModeStatus) && (
+        <>
+          <Section name={sectionNames.advanced}>
+            {comp.children.expansion.getPropertyView()}
+            {comp.children.showDataLoadSpinner.propertyView({
+              label: trans("table.showDataLoadSpinner"),
+            })}
+            {comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") })}
+            {comp.children.dynamicColumn.getView() &&
+              comp.children.dynamicColumnConfig.propertyView({
+                label: trans("table.dynamicColumnConfig"),
+                tooltip: trans("table.dynamicColumnConfigDesc"),
+            })}
+            {comp.children.searchText.propertyView({
+              label: trans("table.searchText"),
+              tooltip: trans("table.searchTextTooltip"),
+              placeholder: "{{input1.value}}",
+            })}
+          </Section>
+        </>
+      )}
+
+      {["layout", "both"].includes(editorModeStatus) && (
+        <><Section name={"Table Style"}>
+            {comp.children.style.getPropertyView()}
+            
+          </Section>
+          <Section name={"Row Style"}>
+            {comp.children.rowStyle.getPropertyView()}
+            {comp.children.rowColor.getPropertyView()}
+          </Section>
+          <Section name={"Column Style"}>
+            {comp.children.columnsStyle.getPropertyView()}
+          </Section>
+        </>
+      )}
     </>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -539,7 +539,7 @@ export const TableToolbarComp = (function () {
     showDownload: BoolControl,
     showFilter: BoolControl,
     columnSetting: BoolControl,
-    searchText: StringControl,
+    // searchText: StringControl,
     filter: stateComp<TableFilter>({ stackType: "and", filters: [] }),
     position: dropdownControl(positionOptions, "below"),
   };
@@ -567,11 +567,11 @@ export const TableToolbarComp = (function () {
       children.showRefresh.propertyView({ label: trans("table.showRefresh") }),
       children.showDownload.propertyView({ label: trans("table.showDownload") }),
       children.columnSetting.propertyView({ label: trans("table.columnSetting") }),
-      children.searchText.propertyView({
+      /* children.searchText.propertyView({
         label: trans("table.searchText"),
         tooltip: trans("table.searchTextTooltip"),
         placeholder: "{{input1.value}}",
-      }),
+      }), */
     ])
     .build();
 })();
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -7,6 +7,7 @@ import {
   ColorOrBoolCodeControl,
   JSONObjectArrayControl,
   RadiusControl,
+  StringControl,
 } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -148,6 +149,7 @@ const tableChildrenMap = {
   toolbar: TableToolbarComp,
   style: styleControl(TableStyle),
   rowStyle: styleControl(TableRowStyle),
+  searchText: StringControl,
   columnsStyle: withDefault(styleControl(TableColumnStyle), {radius: '0px'}),
   viewModeResizable: BoolControl,
   // sample data for regenerating columns
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -237,14 +237,26 @@ export const TabbedContainerBaseComp = (function () {
               newOptionLabel: "Tab",
             })}
             {children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
-            {children.autoHeight.getPropertyView()}
           </Section>
-          <Section name={sectionNames.interaction}>
-            {children.onEvent.getPropertyView()}
-            {disabledPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <>
+              <Section name={sectionNames.layout}>
+                {children.autoHeight.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+            </>
+          )}
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -62,6 +62,9 @@ import { Timeline } from "antd";
 
 import { ANTDICON } from "./antIcon"; // todo: select icons to not import all icons
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState"; 
+
 const EventOptions = [
   clickEvent,
 ] as const;
@@ -167,24 +170,34 @@ let TimeLineBasicComp = (function () {
             tooltip: TimelineDataTooltip,
             placeholder: "[]",
           })}
-          {children.mode.propertyView({
-            label: trans("timeLine.mode"),
-            tooltip: trans("timeLine.modeTooltip"),
-          })}
-          {children.reverse.propertyView({
-            label: trans("timeLine.reverse"),
-          })}
-          {children.pending.propertyView({
-            label: trans("timeLine.pending"),
-          })}
-        </Section>
-        <Section name={sectionNames.layout}>
-          {children.onEvent.getPropertyView()}
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
         </Section>
+
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><Section name={sectionNames.layout}>
+              {children.mode.propertyView({
+                label: trans("timeLine.mode"),
+                tooltip: trans("timeLine.modeTooltip"),
+              })}
+              {children.pending.propertyView({
+                label: trans("timeLine.pending"),
+                tooltip: trans("timeLine.pendingDescription"),
+              })}
+              {children.reverse.propertyView({
+                label: trans("timeLine.reverse"),
+              })}
+            </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          </>
+        )}
       </>
     ))
     .build();
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2641,20 +2641,21 @@ export const en = {
   },
   /////////////////////
   timeLine: {
-    titleColor: "title Color",
-    subTitleColor: "subTitle Color",
-    lableColor: "lable Color",
-    value: "value",
-    mode: "mode",
-    left: "Left",
-    right: "Right",
-    alternate: "alternate",
+    titleColor: "Title color",
+    subTitleColor: "Subtitle color",
+    lableColor: "Label color",
+    value: "Timeline data",
+    mode: "Display order",
+    left: "Content right",
+    right: "Content left",
+    alternate: "Alternate content order",
     modeTooltip:
       "Set the content to appear left/right or alternately on both sides of the timeline",
-    reverse: "reverse",
-    pending: "pending",
+    reverse: "Newest events first",
+    pending: "Pending node text",
+    pendingDescription: "When set, then an last node with the text and a waiting indicator will be displayed.",
     defaultPending: "continuous improvement",
-    clickTitleEvent: "clickTitleEvent",
+    clickTitleEvent: "Click Title Event",
     clickTitleEventDesc: "click Title Event",
     Introduction: "Introduction keys",
     helpTitle: "title of timeline(Required)",
