mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 04:27:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(Table): add 'Hide column' configuration option (#5597)

Browse Source 
* chore(deps): bump antd from 5.12.8 to 5.13.3

* chore: update yarn.lock

* chore: fix unit tests

* chore: make e2e tests pass

* feat(Table): add 'Hide column' configuration option

* test: add e2e test

* chore: fix build

* Revert "chore: make e2e tests pass"

This reverts commit a84a22c140.

* Revert "chore: fix unit tests"

This reverts commit 436b001c9b.

* Revert "chore: update yarn.lock"

This reverts commit 0b960251c4.

* Revert "chore(deps): bump antd from 5.12.8 to 5.13.3"

This reverts commit b165d557f6.

* chore: make e2e more stable
This commit is contained in:
Zeke Zhang 2024-11-07 20:47:14 +08:00 committed by GitHub
parent 89269ec7a4
commit 3d512adade
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 613 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/client/src/locale/en-US.json
View File

@ -847,5 +847,7 @@
"Skip getting the total number of table records during paging to speed up loading. It is recommended to enable this option for data tables with a large amount of data": "Skip getting the total number of table records during paging to speed up loading. It is recommended to enable this option for data tables with a large amount of data",
"Enable secondary confirmation": "Enable secondary confirmation",
"Notification": "Notification",
"Ellipsis overflow content": "Ellipsis overflow content"
"Ellipsis overflow content": "Ellipsis overflow content",
"Hide column": "Hide column",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect."
}

4
packages/core/client/src/locale/es-ES.json
View File

@ -768,5 +768,7 @@
"Sorry, the page you visited does not exist.": "Lo siento, la página que visitaste no existe.",
"Allow multiple selection": "Permitir selección múltiple",
"Parent object": "Objeto padre",
"Ellipsis overflow content": "Contenido de desbordamiento de elipsis"
"Ellipsis overflow content": "Contenido de desbordamiento de elipsis",
"Hide column": "Ocultar columna",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "En modo de configuración, toda la columna se vuelve transparente. En modo de no configuración, toda la columna se ocultará. Incluso si toda la columna está oculta, sus valores predeterminados configurados y otras configuraciones seguirán tomando efecto."
}

4
packages/core/client/src/locale/fr-FR.json
View File

@ -788,5 +788,7 @@
"Sorry, the page you visited does not exist.": "Désolé, la page que vous avez visitée n'existe pas.",
"Allow multiple selection": "Permettre la sélection multiple",
"Parent object": "Objet parent",
"Ellipsis overflow content": "Contenu de débordement avec ellipse"
"Ellipsis overflow content": "Contenu de débordement avec ellipse",
"Hide column": "Masquer la colonne",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "En mode de configuration, toute la colonne devient transparente. En mode de non-configuration, toute la colonne sera masquée. Même si toute la colonne est masquée, ses valeurs par défaut configurées et les autres paramètres resteront toujours en vigueur."
}

4
packages/core/client/src/locale/ja-JP.json
View File

@ -1006,5 +1006,7 @@
"Skip getting the total number of table records during paging to speed up loading. It is recommended to enable this option for data tables with a large amount of data": "ページング時にテーブルレコードの総数取得をスキップして、読み込み速度を向上させます。データ量が多い場合にこのオプションの使用をお勧めします。",
"The current user only has the UI configuration permission, but don't have view permission for collection \"{{name}}\"": "現在のユーザーにはUI設定の権限しかなく、コレクション「{{name}}」を閲覧する権限はありません。",
"Allow multiple selection": "複数選択を許可",
"Parent object": "親オブジェクト"
"Parent object": "親オブジェクト",
"Hide column": "列を非表示",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "設定モードでは、列全体が透明になります。非設定モードでは、列全体が非表示になります。列全体が非表示になっても、設定されたデフォルト値やその他の設定は依然として有効です。"
}

4
packages/core/client/src/locale/ko-KR.json
View File

@ -879,5 +879,7 @@
"Sorry, the page you visited does not exist.": "죄송합니다. 방문한 페이지가 존재하지 않습니다.",
"Allow multiple selection": "다중 선택 허용",
"Parent object": "부모 객체",
"Ellipsis overflow content": "생략 부호로 내용 줄임"
"Ellipsis overflow content": "생략 부호로 내용 줄임",
"Hide column": "열 숨기기",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "구성 모드에서는 전체 열이 투명해집니다. 비구성 모드에서는 전체 열이 숨겨집니다. 전체 열이 숨겨져도 구성된 기본값 및 기타 설정은 여전히 적용됩니다."
}

4
packages/core/client/src/locale/pt-BR.json
View File

@ -745,5 +745,7 @@
"Sorry, the page you visited does not exist.": "Desculpe, a página que você visitou não existe.",
"Allow multiple selection": "Permitir seleção múltipla",
"Parent object": "Objeto pai",
"Ellipsis overflow content": "Conteúdo de transbordamento com reticências"
"Ellipsis overflow content": "Conteúdo de transbordamento com reticências",
"Hide column": "Ocultar coluna",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "Em modo de configuração, a coluna inteira se torna transparente. Em modo de não configuração, a coluna inteira será ocultada. Mesmo se a coluna inteira estiver oculta, seus valores padrão configurados e outras configurações ainda terão efeito."
}

4
packages/core/client/src/locale/ru-RU.json
View File

@ -582,5 +582,7 @@
"Sorry, the page you visited does not exist.": "Извините, посещенной вами страницы не существует.",
"Allow multiple selection": "Разрешить множественный выбор",
"Parent object": "Родительский объект",
"Ellipsis overflow content": "Содержимое с многоточием при переполнении"
"Ellipsis overflow content": "Содержимое с многоточием при переполнении",
"Hide column": "Скрыть столбец",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "В режиме конфигурации вся колонка становится прозрачной. В режиме не конфигурации вся колонка будет скрыта. Даже если вся колонка будет скрыта, её настроенные значения по умолчанию и другие настройки все равно будут действовать."
}

4
packages/core/client/src/locale/tr-TR.json
View File

@ -580,5 +580,7 @@
"Sorry, the page you visited does not exist.": "Üzgünüz, ziyaret ettiğiniz sayfa mevcut değil.",
"Allow multiple selection": "Çoklu seçim izni",
"Parent object": "Üst nesne",
"Ellipsis overflow content": "Üç nokta ile taşan içerik"
"Ellipsis overflow content": "Üç nokta ile taşan içerik",
"Hide column": "Sütunu gizle",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "Yapılandırma modunda, tüm sütun tamamen saydamlık alır. Yapılandırma modu olmayan durumda, tüm sütun gizlenir. Tamamen sütun gizlendiğinde bile, yapılandırılmış varsayılan değerleri ve diğer ayarları hâlâ etkin olur."
}

4
packages/core/client/src/locale/uk-UA.json
View File

@ -788,5 +788,7 @@
"Sorry, the page you visited does not exist.": "Вибачте, сторінка, яку ви відвідали, не існує.",
"Allow multiple selection": "Дозволити множинний вибір",
"Parent object": "Батьківський об'єкт",
"Ellipsis overflow content": "Вміст з багатокрапкою при переповненні"
"Ellipsis overflow content": "Вміст з багатокрапкою при переповненні",
"Hide column": "Сховати стовпець",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "В режимі конфігурації вся колонка стає прозорою. В режимі не конфігурації вся колонка буде прихована. Якщо вся колонка буде прихована, її налаштовані значення за замовчуванням і інші налаштування все одно будуть діяти."
}

4
packages/core/client/src/locale/zh-CN.json
View File

@ -1025,5 +1025,7 @@
"Ellipsis": "省略",
"Set block layout": "设置区块布局",
"Add & Update": "添加 & 更新",
"Table size":"表格大小"
"Table size":"表格大小",
"Hide column": "隐藏列",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "在配置模式下，整个列会变为透明色。在非配置模式下，整个列将被隐藏。即使整个列被隐藏了，其配置的默认值和其他设置仍然有效。"
}

4
packages/core/client/src/locale/zh-TW.json
View File

@ -878,5 +878,7 @@
"Sorry, the page you visited does not exist.": "抱歉，你訪問的頁面不存在。",
"Allow multiple selection": "允許多選",
"Parent object": "上級物件",
"Ellipsis overflow content": "省略超出長度的內容"
"Ellipsis overflow content": "省略超出長度的內容",
"Hide column": "隱藏列",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "在配置模式下，整個列會變為透明色。在非配置模式下，整個列將被隱藏。即使整個列被隱藏了，其配置的默認值和其他設置仍然有效。"
}

42
packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/hideColumn.test.ts Normal file
View File

@ -0,0 +1,42 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { expect, test } from '@nocobase/test/e2e';
import { hideColumnBasic } from './templatesOfBug';
test.describe('hide column', () => {
test('basic', async ({ page, mockPage }) => {
await mockPage(hideColumnBasic).goto();
// 1. Normal table: hide column
await page.getByRole('button', { name: 'Nickname' }).hover();
await page
.getByRole('button', { name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-users' })
.hover();
await page.getByRole('menuitem', { name: 'Hide column question-circle' }).click();
await page.mouse.move(500, 0);
// 2. Sub table: hide column
await page.getByRole('button', { name: 'Role name' }).hover();
await page
.getByRole('button', { name: 'designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-roles' })
.hover();
await page.getByRole('menuitem', { name: 'Hide column question-circle' }).click();
await page.mouse.move(500, 0);
// Assert: In configuration mode, the entire column becomes transparent
await expect(page.locator('th', { hasText: 'Nickname' })).toHaveCSS('opacity', '0.3');
await expect(page.locator('th', { hasText: 'Role name' })).toHaveCSS('opacity', '0.3');
// Assert: In non-configuration mode, the entire column will be hidden
await page.getByTestId('ui-editor-button').click();
await expect(page.locator('th', { hasText: 'Nickname' })).not.toBeVisible();
await expect(page.locator('th', { hasText: 'Role name' })).not.toBeVisible();
});
});

441
packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/templatesOfBug.ts
View File

@ -7926,3 +7926,444 @@ export const differentURL_DifferentPopupContent = {
'x-index': 1,
},
};
export const hideColumnBasic = {
pageSchema: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Page',
'x-app-version': '1.4.0-alpha.1',
properties: {
bfc254m95nt: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'page:addBlock',
'x-app-version': '1.4.0-alpha.1',
properties: {
'4e61hstsu6e': {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Row',
'x-app-version': '1.4.0-alpha.1',
properties: {
j9xovyw5nce: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Col',
'x-app-version': '1.4.0-alpha.1',
properties: {
'9ivpaiunf9y': {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableBlockProvider',
'x-acl-action': 'users:list',
'x-use-decorator-props': 'useTableBlockDecoratorProps',
'x-decorator-props': {
collection: 'users',
dataSource: 'main',
action: 'list',
params: {
pageSize: 20,
},
rowKey: 'id',
showIndex: true,
dragSort: false,
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:table',
'x-component': 'CardItem',
'x-filter-targets': [],
'x-app-version': '1.4.0-alpha.1',
properties: {
actions: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-initializer': 'table:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 'var(--nb-spacing)',
},
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': '51wc0e6u31j',
'x-async': false,
'x-index': 1,
},
bs7p8uu830m: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'array',
'x-initializer': 'table:configureColumns',
'x-component': 'TableV2',
'x-use-component-props': 'useTableBlockProps',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
},
'x-app-version': '1.4.0-alpha.1',
properties: {
actions: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
title: '{{ t("Actions") }}',
'x-action-column': 'actions',
'x-decorator': 'TableV2.Column.ActionBar',
'x-component': 'TableV2.Column',
'x-toolbar': 'TableColumnSchemaToolbar',
'x-initializer': 'table:configureItemActions',
'x-settings': 'fieldSettings:TableColumn',
'x-toolbar-props': {
initializer: 'table:configureItemActions',
},
'x-app-version': '1.4.0-alpha.1',
properties: {
jw80rplhox4: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'DndContext',
'x-component': 'Space',
'x-component-props': {
split: '|',
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': 'u06c9tleqou',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '9s1pfakz0om',
'x-async': false,
'x-index': 1,
},
aph2w5uiev9: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableV2.Column.Decorator',
'x-toolbar': 'TableColumnSchemaToolbar',
'x-settings': 'fieldSettings:TableColumn',
'x-component': 'TableV2.Column',
'x-app-version': '1.4.0-alpha.1',
properties: {
nickname: {
_isJSONSchemaObject: true,
version: '2.0',
'x-collection-field': 'users.nickname',
'x-component': 'CollectionField',
'x-component-props': {
ellipsis: true,
},
'x-read-pretty': true,
'x-decorator': null,
'x-decorator-props': {
labelStyle: {
display: 'none',
},
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': '3w3zou3ceb3',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '4m9sepacwvm',
'x-async': false,
'x-index': 2,
},
wpmysa656gq: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableV2.Column.Decorator',
'x-toolbar': 'TableColumnSchemaToolbar',
'x-settings': 'fieldSettings:TableColumn',
'x-component': 'TableV2.Column',
'x-app-version': '1.4.0-alpha.1',
properties: {
username: {
_isJSONSchemaObject: true,
version: '2.0',
'x-collection-field': 'users.username',
'x-component': 'CollectionField',
'x-component-props': {
ellipsis: true,
},
'x-read-pretty': true,
'x-decorator': null,
'x-decorator-props': {
labelStyle: {
display: 'none',
},
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': '38dn4mm3hr5',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '9ed6nyhlgzi',
'x-async': false,
'x-index': 3,
},
},
'x-uid': 'sc4a347zrvr',
'x-async': false,
'x-index': 2,
},
},
'x-uid': 'z8gp6wsukkv',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '60rzu0t7mm9',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'po4tzdbip1j',
'x-async': false,
'x-index': 1,
},
h9rg0fz8izl: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Row',
'x-app-version': '1.4.0-alpha.1',
properties: {
acu1j5bgeeh: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Col',
'x-app-version': '1.4.0-alpha.1',
properties: {
azoaet9funq: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-acl-action-props': {
skipScopeCheck: true,
},
'x-acl-action': 'users:create',
'x-decorator': 'FormBlockProvider',
'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
'x-decorator-props': {
dataSource: 'main',
collection: 'users',
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': 'blockSettings:createForm',
'x-component': 'CardItem',
'x-app-version': '1.4.0-alpha.1',
properties: {
pfltqojjolr: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'FormV2',
'x-use-component-props': 'useCreateFormBlockProps',
'x-app-version': '1.4.0-alpha.1',
properties: {
grid: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid',
'x-initializer': 'form:configureFields',
'x-app-version': '1.4.0-alpha.1',
properties: {
y4g2q6tyb0a: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Row',
'x-app-version': '1.4.0-alpha.1',
properties: {
thgbnha840e: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'Grid.Col',
'x-app-version': '1.4.0-alpha.1',
properties: {
roles: {
'x-uid': 'ivyzmc9lc21',
_isJSONSchemaObject: true,
version: '2.0',
type: 'string',
'x-toolbar': 'FormItemSchemaToolbar',
'x-settings': 'fieldSettings:FormItem',
'x-component': 'CollectionField',
'x-decorator': 'FormItem',
'x-collection-field': 'users.roles',
'x-component-props': {
fieldNames: {
label: 'name',
value: 'name',
},
mode: 'SubTable',
},
'x-app-version': '1.4.0-alpha.1',
default: null,
properties: {
eoizayhit92: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-component': 'AssociationField.SubTable',
'x-initializer': 'table:configureColumns',
'x-initializer-props': {
action: false,
},
'x-index': 1,
'x-app-version': '1.4.0-alpha.1',
properties: {
nhe3d7uuyur: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableV2.Column.Decorator',
'x-toolbar': 'TableColumnSchemaToolbar',
'x-settings': 'fieldSettings:TableColumn',
'x-component': 'TableV2.Column',
'x-app-version': '1.4.0-alpha.1',
properties: {
name: {
_isJSONSchemaObject: true,
version: '2.0',
'x-collection-field': 'roles.name',
'x-component': 'CollectionField',
'x-component-props': {
ellipsis: true,
},
'x-decorator': 'FormItem',
'x-decorator-props': {
labelStyle: {
display: 'none',
},
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': 'e89fxf1mg7i',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'kxbrpz5jmc7',
'x-async': false,
'x-index': 1,
},
jgnjc800er5: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-decorator': 'TableV2.Column.Decorator',
'x-toolbar': 'TableColumnSchemaToolbar',
'x-settings': 'fieldSettings:TableColumn',
'x-component': 'TableV2.Column',
'x-app-version': '1.4.0-alpha.1',
properties: {
title: {
_isJSONSchemaObject: true,
version: '2.0',
'x-collection-field': 'roles.title',
'x-component': 'CollectionField',
'x-component-props': {
ellipsis: true,
},
'x-decorator': 'FormItem',
'x-decorator-props': {
labelStyle: {
display: 'none',
},
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': 'bankqu2es91',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'uwyyk7ix2lb',
'x-async': false,
'x-index': 2,
},
},
'x-uid': 'ff16rxs8lbo',
'x-async': false,
},
},
'x-async': false,
'x-index': 1,
},
},
'x-uid': '4nagabglobc',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'noqp2jcfp2j',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'a330n90aoyf',
'x-async': false,
'x-index': 1,
},
vpwq72gj933: {
_isJSONSchemaObject: true,
version: '2.0',
type: 'void',
'x-initializer': 'createForm:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
layout: 'one-column',
},
'x-app-version': '1.4.0-alpha.1',
'x-uid': '1nauytag1dh',
'x-async': false,
'x-index': 2,
},
},
'x-uid': '342ktwn88zo',
'x-async': false,
'x-index': 1,
},
},
'x-uid': '84tmhiuph4u',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'j70955c17aq',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'vtz6tq8n0mx',
'x-async': false,
'x-index': 2,
},
},
'x-uid': '1f4xbt4prbg',
'x-async': false,
'x-index': 1,
},
},
'x-uid': 'ifb5nqtgnng',
'x-async': true,
'x-index': 1,
},
};

43
packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx
View File

@ -7,8 +7,10 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { QuestionCircleOutlined } from '@ant-design/icons';
import { ISchema } from '@formily/json-schema';
import { useField, useFieldSchema } from '@formily/react';
import { Tooltip } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useApp, useSchemaToolbar } from '../../../../application';
@ -380,6 +382,47 @@ export const tableColumnSettings = new SchemaSettings({
};
},
},
{
name: 'hidden',
type: 'switch',
useComponentProps() {
const field: any = useField();
const { t } = useTranslation();
const columnSchema = useFieldSchema();
const { dn } = useDesignable();
return {
title: (
<span>
{t('Hide column')}
<Tooltip
title={t(
'In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.',
)}
>
<QuestionCircleOutlined style={{ marginLeft: 4, opacity: 0.65 }} />
</Tooltip>
</span>
),
checked: field.componentProps.columnHidden,
onChange: (v) => {
const schema: ISchema = {
['x-uid']: columnSchema['x-uid'],
};
columnSchema['x-component-props'] = {
...columnSchema['x-component-props'],
columnHidden: v,
};
schema['x-component-props'] = columnSchema['x-component-props'];
field.componentProps.columnHidden = v;
dn.emit('patch', {
schema,
});
dn.refresh();
},
};
},
},
fieldComponentSettingsItem,
],
},

2
packages/core/client/src/modules/menu/__e2e__/schemaInitializer.test.ts
View File

@ -102,7 +102,7 @@ test.describe('add menu item', () => {
// open link page
await page.getByLabel(pageLink).click();
await page.waitForTimeout(1000);
await page.waitForTimeout(2000);
// After clicking, it will redirect to another page, so we need to get the instance of the new page
const newPage = page.context().pages()[1];

54
packages/core/client/src/schema-component/antd/table-v2/Table.tsx
View File

@ -121,13 +121,15 @@ const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }, paginat
}
}, []);
const dataIndex = collectionFields?.length > 0 ? collectionFields[0].name : s.name;
const columnHidden = !!s['x-component-props']?.['columnHidden'];
return {
title: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
dataIndex,
key: s.name,
sorter: s['x-component-props']?.['sorter'],
width: 200,
columnHidden,
...s['x-component-props'],
width: columnHidden && !designable ? 0 : s['x-component-props']?.width || 200,
render: (v, record) => {
// 这行代码会导致这里的测试不通过：packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaInitializer.test.ts:189
// if (collectionFields?.length === 1 && collectionFields[0]['x-read-pretty'] && v == undefined) return null;
@ -149,14 +151,25 @@ const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }, paginat
);
},
onCell: (record, rowIndex) => {
return { record, schema: s, rowIndex, isSubTable: props.isSubTable };
return {
record,
schema: s,
rowIndex,
isSubTable: props.isSubTable,
columnHidden,
};
},
onHeaderCell: () => {
return {
columnHidden,
};
},
} as TableColumnProps<any>;
}),
// 这里不能把 columnsSchema 作为依赖，因为其每次都会变化，这里使用 hasChangedColumns 作为依赖
// eslint-disable-next-line react-hooks/exhaustive-deps
[hasChangedColumns, field.value, field.address, collection, parentRecordData, schemaToolbarBigger],
[hasChangedColumns, field.value, field.address, collection, parentRecordData, schemaToolbarBigger, designable],
);
const tableColumns = useMemo(() => {
@ -440,7 +453,25 @@ const HeaderWrapperComponent = (props) => {
);
};
// Style when Hidden is enabled in table column configuration
const columnHiddenStyle = {
borderRight: 'none',
paddingLeft: 0,
paddingRight: 0,
};
// Style when Hidden is enabled in configuration mode
const columnOpacityStyle = {
opacity: 0.3,
};
const HeaderCellComponent = (props) => {
const { designable } = useDesignable();
if (props.columnHidden) {
return <th style={designable ? columnOpacityStyle : columnHiddenStyle}>{designable ? props.children : null}</th>;
}
return <th {...props} className={cls(props.className, headerClass)} />;
};
@ -453,7 +484,7 @@ const BodyRowComponent = (props: {
return <SortableRow {...props} />;
};
const BodyCellComponent = (props) => {
const InternalBodyCellComponent = (props) => {
const { token } = useToken();
const inView = useContext(InViewContext);
const isIndex = props.className?.includes('selection-column');
@ -474,6 +505,21 @@ const BodyCellComponent = (props) => {
);
};
const displayNone = { display: 'none' };
const BodyCellComponent = (props) => {
const { designable } = useDesignable();
if (props.columnHidden) {
return (
<td style={designable ? columnOpacityStyle : columnHiddenStyle}>
{designable ? props.children : <span style={displayNone}>{props.children}</span>}
</td>
);
}
return <InternalBodyCellComponent {...props} />;
};
interface TableProps {
/** @deprecated */
useProps?: () => any;

8
packages/core/client/src/schema-settings/SchemaSettings.tsx
View File

@ -363,7 +363,7 @@ export const SchemaSettingsFormItemTemplate = function FormItemTemplate(props) {
};
export interface SchemaSettingsItemProps extends Omit<MenuItemProps, 'title'> {
title: string;
title: string | ReactNode;
}
export const SchemaSettingsItem: FC<SchemaSettingsItemProps> = (props) => {
const { pushMenuItem } = useCollectMenuItems();
@ -544,7 +544,7 @@ export const SchemaSettingsCascaderItem: FC<SchemaSettingsCascaderItemProps> = (
};
export interface SchemaSettingsSwitchItemProps extends Omit<MenuItemProps, 'onChange'> {
title: string;
title: string | ReactNode;
checked?: boolean;
onChange?: (v: boolean) => void;
}
@ -598,9 +598,7 @@ export const SchemaSettingsPopupItem: FC<SchemaSettingsPopupProps> = (props) =>
);
};
export interface SchemaSettingsActionModalItemProps
extends SchemaSettingsModalItemProps,
Omit<SchemaSettingsItemProps, 'onSubmit' | 'onClick'> {
export interface SchemaSettingsActionModalItemProps extends SchemaSettingsModalItemProps {
uid?: string;
initialSchema?: ISchema;
schema?: ISchema;