diff --git a/README-CN.md b/README-CN.md
index 569e8ba779..73a42e2207 100644
--- a/README-CN.md
+++ b/README-CN.md
@@ -22,6 +22,7 @@
[](https://discord.gg/illacloud)
+[](https://twitter.com/illa_cloud)
[](https://github.com/orgs/illacloud/discussions)
[](https://crowdin.com/project/illa-builder)
[](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)
diff --git a/README-DE.md b/README-DE.md
index bd26f3709d..fb15a91457 100644
--- a/README-DE.md
+++ b/README-DE.md
@@ -20,6 +20,7 @@
</p>
[](https://discord.gg/illacloud)
+[](https://twitter.com/illa_cloud)
[](https://github.com/orgs/illacloud/discussions)
[](https://crowdin.com/project/illa-builder)
[](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)
diff --git a/README-JP.md b/README-JP.md
index f49497d3c6..6799aa46e6 100644
--- a/README-JP.md
+++ b/README-JP.md
@@ -21,6 +21,7 @@
</p>
[](https://discord.gg/illacloud)
+[](https://twitter.com/illa_cloud)
[](https://github.com/orgs/illacloud/discussions)
[](https://crowdin.com/project/illa-builder)
[](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)
diff --git a/README.md b/README.md
index 1e2fe13491..35b7694ddd 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ English | <a href="https://github.com/illacloud/illa-builder/blob/beta/README-CN
[](https://discord.gg/illacloud)
+[](https://twitter.com/illa_cloud)
[](https://github.com/orgs/illacloud/discussions)
[](https://crowdin.com/project/illa-builder)
[](https://github.com/illacloud/illa-builder/actions/workflows/build-docker.yml?query=branch%3Amain)
diff --git a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/index.tsx b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/index.tsx
new file mode 100644
index 0000000000..27fb291b1e
--- /dev/null
+++ b/apps/builder/src/page/App/components/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/interface.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/interface.ts
new file mode 100644
index 0000000000..efbfe84d53
--- /dev/null
+++ b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/interface.ts
@@ -0,0 +1,3 @@
+export interface UpdateButtonProps {
+ onClick: () => void
+}
diff --git a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/style.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/Components/UpdateButton/style.ts
new file mode 100644
index 0000000000..a79104be73
--- /dev/null
+++ b/apps/builder/src/page/App/components/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx
index 4cb1680f4b..e3062d5c76 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter/index.tsx
+++ b/apps/builder/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,18 +158,14 @@ 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,
@@ -148,17 +173,13 @@ const ColumnSetter: FC<ColumnSetterProps> = (props) => {
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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/index.tsx b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/index.tsx
index 29011dda2b..74e0ca6d6a 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/index.tsx
+++ b/apps/builder/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/interface.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/interface.ts
index e1a9a8c149..488ea09b0c 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/interface.ts
+++ b/apps/builder/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/style.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/style.ts
index 972448d29f..916953c37a 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/Column/style.ts
+++ b/apps/builder/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/index.tsx b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/index.tsx
index b910649829..5211a69b9c 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/index.tsx
+++ b/apps/builder/src/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/interface.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/interface.ts
index 4d920120d2..bb64e3b7a4 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/interface.ts
+++ b/apps/builder/src/page/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/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/style.ts b/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/style.ts
index 7d87b30d5a..835c4ee1c0 100644
--- a/apps/builder/src/page/App/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer/style.ts
+++ b/apps/builder/src/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;
diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx
index fc069cf6ff..8e29d55669 100644
--- a/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx
+++ b/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx
@@ -1,6 +1,8 @@
import TableWidgetIcon from "@/assets/widgetCover/table.svg?react"
import i18n from "@/i18n/config"
+import { generateCalcColumnConfig } from "@/page/App/components/InspectPanel/PanelSetters/DataGridSetter/ColumnSetter"
import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface"
+import { UNIQUE_ID_NAME } from "./constants"
const originData = [
{
@@ -143,5 +145,10 @@ export const DATA_GRID_WIDGET_CONFIG: WidgetConfig = {
dataSource: [],
enablePagination: false,
sortOrder: "default",
+ columns: Object.keys(originData[0])
+ .map((key) => {
+ return generateCalcColumnConfig(key, true, false)
+ })
+ .concat(generateCalcColumnConfig(UNIQUE_ID_NAME, true, false)),
},
}
diff --git a/packages/illa-public-component b/packages/illa-public-component
index e672ae38bd..3bcc912a29 160000
--- a/packages/illa-public-component
+++ b/packages/illa-public-component
@@ -1 +1 @@
-Subproject commit e672ae38bdac534a78434089686bf6c2b8e59214
+Subproject commit 3bcc912a29f1d738e6505d0744fa28564fdf9a1d