Merge pull request #3687 from illacloud/release/4.4.13

Release/4.4.13
illacloud · Feb 6, 2024 · 412e4c5 · 412e4c5
2 parents 3cf4ba9 + b3af88a
commit 412e4c5
Show file tree

Hide file tree

Showing 16 changed files with 172 additions and 41 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -22,6 +22,7 @@
 
 
 [![Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://discord.gg/illacloud)
+[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?logo=x&logoColor=white)](https://twitter.com/illa_cloud)
 [![Discussions](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/orgs/illacloud/discussions)
 [![Crowdin](https://badges.crowdin.net/illa-builder/localized.svg)](https://crowdin.com/project/illa-builder)
 [![CI (Rolling and Humble)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml/badge.svg?query=branch%3Amain)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)

diff --git a/README-DE.md b/README-DE.md
@@ -20,6 +20,7 @@
 </p>
 
 [![Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://discord.gg/illacloud)
+[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?logo=x&logoColor=white)](https://twitter.com/illa_cloud)
 [![Discussions](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/orgs/illacloud/discussions)
 [![Crowdin](https://badges.crowdin.net/illa-builder/localized.svg)](https://crowdin.com/project/illa-builder)
 [![CI (Rolling and Humble)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml/badge.svg?query=branch%3Amain)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)

diff --git a/README-JP.md b/README-JP.md
@@ -21,6 +21,7 @@
 </p>
 
 [![Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://discord.gg/illacloud)
+[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?logo=x&logoColor=white)](https://twitter.com/illa_cloud)
 [![Discussions](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/orgs/illacloud/discussions)
 [![Crowdin](https://badges.crowdin.net/illa-builder/localized.svg)](https://crowdin.com/project/illa-builder)
 [![CI (Rolling and Humble)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml/badge.svg?query=branch%3Amain)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)

diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ English | <a href="https://github.com/illacloud/illa-builder/blob/beta/README-CN
 
 
 [![Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://discord.gg/illacloud)
+[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?logo=x&logoColor=white)](https://twitter.com/illa_cloud)
 [![Discussions](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/orgs/illacloud/discussions)
 [![Crowdin](https://badges.crowdin.net/illa-builder/localized.svg)](https://crowdin.com/project/illa-builder)
 [![CI (Rolling and Humble)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml/badge.svg?query=branch%3Amain)](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)

diff --git a/...s/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/index.tsx b/...s/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/index.tsx
@@ -0,0 +1,41 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { RefreshIcon, Trigger } from "@illa-design/react"
+import { UpdateButtonProps } from "./interface"
+import {
+  basicUpdateButtonContainerStyle,
+  updateButtonContainerStyle,
+} from "./style"
+
+export const UpdateButton: FC<UpdateButtonProps> = (props) => {
+  const { onClick } = props
+  const { t } = useTranslation()
+
+  return (
+    <Trigger
+      content={t("editor.inspect.setter_tips.grid_list.update")}
+      position="top-start"
+    >
+      <button css={updateButtonContainerStyle} onClick={onClick}>
+        <RefreshIcon size="16px" />
+        {t("editor.inspect.setter_label.grid_list.update")}
+      </button>
+    </Trigger>
+  )
+}
+
+export const BasicUpdateButton: FC<UpdateButtonProps> = (props) => {
+  const { onClick } = props
+  const { t } = useTranslation()
+
+  return (
+    <Trigger
+      content={t("editor.inspect.setter_tips.grid_list.update")}
+      position="top-start"
+    >
+      <button css={basicUpdateButtonContainerStyle} onClick={onClick}>
+        <RefreshIcon size="16px" />
+      </button>
+    </Trigger>
+  )
+}
diff --git a/...nspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/interface.ts b/...nspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/interface.ts
@@ -0,0 +1,3 @@
+export interface UpdateButtonProps {
+  onClick: () => void
+}
diff --git a/...ts/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/style.ts b/...ts/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/style.ts
@@ -0,0 +1,25 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-design/react"
+
+export const updateButtonContainerStyle = css`
+  display: flex;
+  padding: 5px 8px;
+  gap: 8px;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  color: ${getColor("orange", "03")};
+  font-size: 14px;
+  cursor: pointer;
+`
+
+export const basicUpdateButtonContainerStyle = css`
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: ${getColor("grayBlue", "02")};
+`
diff --git a/...r/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx b/...r/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx
@@ -1,9 +1,10 @@
 import { arrayMove } from "@dnd-kit/sortable"
-import deepDiff from "deep-diff"
 import { get } from "lodash-es"
-import { FC, useMemo } from "react"
+import { FC, useCallback, useMemo } from "react"
+import { useTranslation } from "react-i18next"
 import { useSelector } from "react-redux"
 import { v4 } from "uuid"
+import { Trigger, WarningCircleIcon, getColor } from "@illa-design/react"
 import { dealRawData2ArrayData } from "@/page/App/components/InspectPanel/PanelSetters/DataGridSetter/utils"
 import { ColumnContainer } from "@/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer"
 import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
@@ -13,9 +14,10 @@ import { UNIQUE_ID_NAME } from "@/widgetLibrary/DataGridWidget/constants"
 import { getColumnsTypeSetter } from "@/widgetLibrary/DataGridWidget/panelConfig"
 import { Column } from "../../DragMoveComponent/Column"
 import { ColumnEmpty } from "../../DragMoveComponent/Empty"
+import { BasicUpdateButton, UpdateButton } from "./Components/UpdateButton"
 import { ColumnConfig, ColumnSetterProps } from "./interface"
 
-function generateCalcColumnConfig(
+export function generateCalcColumnConfig(
   key: string,
   isCalc: boolean,
   randomKey: boolean,
@@ -55,6 +57,8 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
     widgetDisplayName,
   } = props
 
+  const { t } = useTranslation()
+
   const targetComponentProps = useSelector<RootState, Record<string, any>>(
     (rootState) => {
       const executionTree = getExecutionResult(rootState)
@@ -81,7 +85,7 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
     [rawData],
   )
 
-  const calculateColumns: ColumnConfig[] = useMemo(() => {
+  const calculateColumnsByDataSource: ColumnConfig[] = useMemo(() => {
     if (arrayData.length == 0) {
       return []
     } else {
@@ -91,17 +95,42 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
     }
   }, [arrayData])
 
+  const columnIDsByDataSource = useMemo(() => {
+    return calculateColumnsByDataSource
+      .map((item) => item.field)
+      .filter((key) => key !== UNIQUE_ID_NAME)
+  }, [calculateColumnsByDataSource])
+
+  const oldColumnConfigIDs = useMemo(() => {
+    return value
+      .filter((item) => item.isCalc)
+      .map((item) => item.field)
+      .filter((key) => key !== UNIQUE_ID_NAME)
+  }, [value])
+
   const customColumns = useMemo(() => {
     return value.filter((item) => !item.isCalc)
   }, [value])
 
-  const mixedColumns: ColumnConfig[] = useMemo(() => {
-    if (calculateColumns.length === 0) {
+  const removedColumnIDs: string[] = useMemo(() => {
+    return oldColumnConfigIDs.filter(
+      (item) => !columnIDsByDataSource.includes(item),
+    )
+  }, [oldColumnConfigIDs, columnIDsByDataSource])
+
+  const addedColumnsIDs: string[] = useMemo(() => {
+    return columnIDsByDataSource.filter(
+      (item) => !oldColumnConfigIDs.includes(item),
+    )
+  }, [columnIDsByDataSource, oldColumnConfigIDs])
+
+  const handleMixedColumns = useCallback(() => {
+    if (calculateColumnsByDataSource.length === 0) {
       return value
     }
     const mixedColumnsResult: ColumnConfig[] = []
 
-    calculateColumns.forEach((config) => {
+    calculateColumnsByDataSource.forEach((config) => {
       const oldConfig = value.find((item) => item.field === config.field)
       if (oldConfig) {
         mixedColumnsResult.push(oldConfig)
@@ -129,36 +158,28 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
       return aIndex - bIndex
     })
 
-    const diff = deepDiff(value, mixedColumnsResult)
-
-    if ((diff?.length ?? 0) > 0) {
-      handleUpdateMultiAttrDSL?.({
-        [attrName]: mixedColumnsResult,
-      })
-    }
+    handleUpdateMultiAttrDSL?.({
+      [attrName]: mixedColumnsResult,
+    })
 
     return mixedColumnsResult
   }, [
     attrName,
-    calculateColumns,
+    calculateColumnsByDataSource,
     customColumns,
     handleUpdateMultiAttrDSL,
     value,
   ])
 
   return (
     <ColumnContainer
-      columnNum={mixedColumns.length}
+      columnNum={value.length}
       onDragEnd={(event) => {
         const { active, over } = event
         if (active && over && active.id !== over.id) {
-          const oldIndex = mixedColumns.findIndex(
-            (item) => item.field === active.id,
-          )
-          const newIndex = mixedColumns.findIndex(
-            (item) => item.field === over.id,
-          )
-          const finalColumns = arrayMove(mixedColumns, oldIndex, newIndex)
+          const oldIndex = value.findIndex((item) => item.field === active.id)
+          const newIndex = value.findIndex((item) => item.field === over.id)
+          const finalColumns = arrayMove(value, oldIndex, newIndex)
           handleUpdateMultiAttrDSL?.({
             [attrName]: finalColumns,
           })
@@ -168,25 +189,38 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
       onClickNew={() => {
         handleUpdateMultiAttrDSL?.({
           [attrName]: [
-            ...mixedColumns,
-            generateCalcColumnConfig(
-              `column${mixedColumns.length + 1}`,
-              false,
-              true,
-            ),
+            ...value,
+            generateCalcColumnConfig(`column${value.length + 1}`, false, true),
           ],
         })
       }}
-      items={mixedColumns.map((item) => item.field)}
+      items={value.map((item) => item.field)}
+      headerExtNode={
+        removedColumnIDs.length > 0 || addedColumnsIDs.length > 0 ? (
+          <UpdateButton onClick={handleMixedColumns} />
+        ) : (
+          <BasicUpdateButton onClick={handleMixedColumns} />
+        )
+      }
     >
-      {mixedColumns.length > 0 ? (
-        mixedColumns.map((config, index) =>
+      {value.length > 0 ? (
+        value.map((config, index) =>
           config.field === UNIQUE_ID_NAME ? null : (
             <Column
-              onDelete={(id) => {
-                const finalColumns = mixedColumns.filter(
-                  (item) => item.field !== id,
+              labelTip={
+                removedColumnIDs.length > 0 &&
+                removedColumnIDs.includes(config.field) && (
+                  <Trigger
+                    content={t(
+                      "editor.inspect.setter_tips.grid_list.no_column",
+                    )}
+                  >
+                    <WarningCircleIcon color={getColor("orange", "03")} />
+                  </Trigger>
                 )
+              }
+              onDelete={(id) => {
+                const finalColumns = value.filter((item) => item.field !== id)
                 handleUpdateMultiAttrDSL?.({
                   [attrName]: finalColumns,
                 })

diff --git a/...lder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/index.tsx b/...lder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/index.tsx
@@ -16,6 +16,7 @@ import { ColumnProps } from "./interface"
 import {
   baseModalContainerStyle,
   columnContainerStyle,
+  columnLabelContainerStyle,
   columnLabelStyle,
   dragIconStyle,
 } from "./style"
@@ -33,6 +34,7 @@ export const Column: FC<ColumnProps> = (props) => {
     showVisible,
     extraElement,
     showCopy,
+    labelTip,
     onCopy,
     onVisibilityChange,
   } = props
@@ -87,7 +89,10 @@ export const Column: FC<ColumnProps> = (props) => {
         position="left"
         clickOutsideToClose
       >
-        <div css={columnLabelStyle}>{label}</div>
+        <div css={columnLabelContainerStyle}>
+          <span css={columnLabelStyle}> {label}</span>
+          {labelTip}
+        </div>
       </Trigger>
       {showCopy && (
         <IconHotSpot

diff --git a/...r/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/interface.ts b/...r/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/interface.ts
@@ -15,4 +15,5 @@ export interface ColumnProps {
   visibility?: boolean
   extraElement?: ReactNode
   childrenSetter?: PanelFieldConfig[]
+  labelTip?: ReactNode
 }
diff --git a/...ilder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/style.ts b/...ilder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/style.ts
@@ -22,17 +22,24 @@ export const columnContainerStyle = css`
     }
   }
 `
-export const columnLabelStyle = css`
-  color: ${getColor("grayBlue", "02")};
+export const columnLabelContainerStyle = css`
+  display: flex;
   flex-grow: 1;
   cursor: pointer;
+  overflow: hidden;
+  gap: 8px;
+`
+
+export const columnLabelStyle = css`
+  color: ${getColor("grayBlue", "02")};
   font-size: 14px;
   font-style: normal;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
   font-weight: 400;
   line-height: 22px;
+  max-width: 180px;
+  overflow: hidden;
 `
 
 export const baseModalContainerStyle = css`

diff --git a/...page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/index.tsx b/...page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/index.tsx
@@ -42,6 +42,7 @@ export const ColumnContainer: FC<ColumnContainerProps> = (props) => {
     columnNum,
     children,
     items,
+    headerExtNode,
   } = props
 
   const { t } = useTranslation()
@@ -79,6 +80,7 @@ export const ColumnContainer: FC<ColumnContainerProps> = (props) => {
             <div css={optionListLabelStyle}>
               {t("editor.inspect.setter_content.column_setter.title")}
             </div>
+            {headerExtNode}
           </div>
         )}
         <DndContext

diff --git a/...e/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/interface.ts b/...e/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/interface.ts
@@ -1,6 +1,6 @@
 import { UniqueIdentifier } from "@dnd-kit/core"
 import { DragEndEvent } from "@dnd-kit/core/dist/types"
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, ReactNode } from "react"
 
 export interface ColumnContainerProps extends PropsWithChildren {
   onDragEnd?: (event: DragEndEvent) => void
@@ -16,4 +16,5 @@ export interface ColumnContainerProps extends PropsWithChildren {
         id: UniqueIdentifier
       }
   )[]
+  headerExtNode?: ReactNode
 }
diff --git a/.../page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/style.ts b/.../page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/style.ts
@@ -6,6 +6,7 @@ export const optionListHeaderStyle = css`
   background-color: ${getColor("grayBlue", "09")};
   display: flex;
   align-items: center;
+  justify-content: space-between;
   height: 40px;
   box-sizing: border-box;
   padding: 0 16px;