diff --git a/app/src/demo/tables/editableTable/columns.tsx b/app/src/demo/tables/editableTable/columns.tsx index 98268d5ebb..4dc8cf97b7 100644 --- a/app/src/demo/tables/editableTable/columns.tsx +++ b/app/src/demo/tables/editableTable/columns.tsx @@ -24,6 +24,7 @@ export function getColumnsTableMode(columnsProps: ColumnsProps) { caption: 'Name', width: 300, fix: 'left', + isLocked: true, renderCell: (props) => ( [] = [ width: 130, fix: 'left', isSortable: true, - isAlwaysVisible: true, + isLocked: true, }, { key: 'profileStatus', @@ -26,6 +26,7 @@ export const personColumns: DataColumnProps[] = [ width: 100, minWidth: 90, isSortable: true, + isAlwaysVisible: true, }, { key: 'salary', diff --git a/app/src/demo/tables/masterDetailedTable/columns.tsx b/app/src/demo/tables/masterDetailedTable/columns.tsx index e8aaf2e316..fb90021d31 100644 --- a/app/src/demo/tables/masterDetailedTable/columns.tsx +++ b/app/src/demo/tables/masterDetailedTable/columns.tsx @@ -15,7 +15,7 @@ export const personColumns: DataColumnProps 0 with `searchPosition = 'body'`. * Added renderEmpty prop to render custom empty block for depends on various reasons. diff --git a/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx b/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx index f1253baab8..064fafc0c8 100644 --- a/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx +++ b/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx @@ -53,11 +53,11 @@ const mockAcceptDropParams = (params: TAcceptDropParams): TAcceptDropParamsAll = describe('columnsConfigurationUtils', () => { describe('canAcceptDrop', () => { - it('should not accept drop before isAlwaysVisible fixed left columns', () => { + it('should not accept drop before isLocked fixed left columns', () => { const params = mockAcceptDropParams({ dstData: { column: { - key: '1', fix: 'left', caption: '1', isAlwaysVisible: true, width: 1, + key: '1', fix: 'left', caption: '1', isLocked: true, width: 1, }, columnConfig: { width: 1, isVisible: true, order: 'a' }, }, @@ -68,18 +68,18 @@ describe('columnsConfigurationUtils', () => { columnConfig: { width: 2, isVisible: true, order: 'b' }, }, }); - const result = canAcceptDrop(params, { key: '100500', fix: 'left', isAlwaysVisible: true, width: 0 }); // Try to drop between 2 isAlwaysVisible columns + const result = canAcceptDrop(params, { key: '100500', fix: 'left', isLocked: true, width: 0 }); // Try to drop between 2 isLocked columns expect(result).toEqual({}); - const result2 = canAcceptDrop(params, { key: '100500', width: 0 }); // Try to drop at last isAlwaysVisible columns + const result2 = canAcceptDrop(params, { key: '100500', width: 0 }); // Try to drop at last isLocked columns expect(result2).toEqual({ bottom: true }); }); - it('should not accept drop after isAlwaysVisible fixed right columns', () => { + it('should not accept drop after isLocked fixed right columns', () => { const params = mockAcceptDropParams({ dstData: { column: { - key: '1', fix: 'right', caption: '1', isAlwaysVisible: true, width: 1, + key: '1', fix: 'right', caption: '1', isLocked: true, width: 1, }, columnConfig: { width: 1, isVisible: true, order: 'a' }, }, @@ -90,12 +90,31 @@ describe('columnsConfigurationUtils', () => { columnConfig: { width: 2, isVisible: true, order: 'b' }, }, }); - const result = canAcceptDrop(params, { key: '100500', width: 0 }, { key: '100501', fix: 'right', isAlwaysVisible: true, width: 0 }); // Try to drop between 2 isAlwaysVisible columns + const result = canAcceptDrop(params, { key: '100500', width: 0 }, { key: '100501', fix: 'right', isLocked: true, width: 0 }); // Try to drop between 2 isLocked columns expect(result).toEqual({}); - const result2 = canAcceptDrop(params, { key: '100500', width: 0 }); // Try to drop at first isAlwaysVisible columns + const result2 = canAcceptDrop(params, { key: '100500', width: 0 }); // Try to drop at first isLocked columns expect(result2).toEqual({ top: true }); }); + + it('should not accept drop for isAlwaysVisible column in hidden section', () => { + const params = mockAcceptDropParams({ + dstData: { + column: { + key: '1', fix: 'right', caption: '1', width: 1, + }, + columnConfig: { width: 1, isVisible: false, order: 'a' }, + }, + srcData: { + column: { + key: '2', caption: '2', width: 2, isAlwaysVisible: true, + }, + columnConfig: { width: 2, isVisible: true, order: 'b' }, + }, + }); + const result = canAcceptDrop(params); + expect(result).toEqual({}); + }); }); describe('sortColumnsAndAddGroupKey', () => { it('should sort columns by "order" and should add "groupKey" attribute', () => { diff --git a/uui-components/src/table/columnsConfigurationModal/columnsConfigurationUtils.ts b/uui-components/src/table/columnsConfigurationModal/columnsConfigurationUtils.ts index 469974693c..ed7a47df13 100644 --- a/uui-components/src/table/columnsConfigurationModal/columnsConfigurationUtils.ts +++ b/uui-components/src/table/columnsConfigurationModal/columnsConfigurationUtils.ts @@ -2,25 +2,29 @@ import React from 'react'; import { AcceptDropParams, ColumnsConfig, DataColumnProps, DropPosition, getOrderBetween, IColumnConfig, orderBy } from '@epam/uui-core'; import { ColumnsConfigurationRowProps, DndDataType, GroupedColumnsType, GroupedDataColumnProps } from './types'; -export function isColumnAlwaysPinned(column: DataColumnProps) { - return Boolean(column?.isAlwaysVisible); +export function isColumnLocked(column: DataColumnProps) { + return Boolean(column?.isLocked); } export function canAcceptDrop(props: AcceptDropParams, nextColumn?: DataColumnProps, prevColumn?: DataColumnProps) { - const { dstData } = props; + const { dstData, srcData } = props; - if (isColumnAlwaysPinned(dstData.column)) { - if (dstData.column.fix === 'left' && !isColumnAlwaysPinned(nextColumn)) { // If user try to drop column at the last isAlwaysVisible column. Allow to drop only to the end of the fixed list. + if (isColumnLocked(dstData.column)) { + if (dstData.column.fix === 'left' && !isColumnLocked(nextColumn)) { // If user try to drop column at the last isAlwaysVisible column. Allow to drop only to the end of the fixed list. return { bottom: true }; } - if (dstData.column.fix === 'right' && !isColumnAlwaysPinned(prevColumn)) { // If user try to drop column at the first isAlwaysVisible. Allow to drop only to the start of the fixed list + if (dstData.column.fix === 'right' && !isColumnLocked(prevColumn)) { // If user try to drop column at the first isAlwaysVisible. Allow to drop only to the start of the fixed list return { top: true }; } return {}; // Shouldn't drop between 2 isAlwaysVisible columns } + if (srcData.column.isAlwaysVisible && dstData.columnConfig.isVisible === false) { + return {}; // We shouldn't move isAlwaysVisible column into 'Hidden from table' group + } + return { top: true, bottom: true }; } diff --git a/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts b/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts index 33062735a7..38b79133eb 100644 --- a/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts +++ b/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts @@ -6,7 +6,7 @@ import { import { canAcceptDrop, isColumnAlwaysHiddenInTheConfigurationModal, - isColumnAlwaysPinned, + isColumnLocked, } from '../columnsConfigurationUtils'; import { DndDataType, GroupedDataColumnProps, ColumnsConfigurationRowProps, TColumnPinPosition } from '../types'; import { groupAndFilterSortedColumns, sortColumnsAndAddGroupKey } from '../columnsConfigurationUtils'; @@ -75,7 +75,7 @@ export function useColumnsConfiguration(props: UseColumnsConfigurationProps(columns: DataColumnProps extends */ isSortable?: boolean; + /** Pass true to make this column always visible and forbid to hide it from columns config dialog */ + isAlwaysVisible?: boolean; + /** Makes this column locked, which means that you can't hide, unpin or reorder this column. Usually applicable for such column without which table because useless. - * Note, that isAlwaysVisible column should be always fixed to any side of the table, if you didn't specify `column.fix` prop for such column, 'left' value will be used by default. - * Also, if you have a few isAlwaysVisible columns, it's necessary to place it together in the start or end(depends on `fix` prop) of columns array. + * Note, that isLocked column should be always fixed to any side of the table, if you didn't specify `column.fix` prop for such column, 'left' value will be used by default. + * Also, if you have a few isLocked columns, it's necessary to place it together in the start or end(depends on `fix` prop) of columns array. * */ - isAlwaysVisible?: boolean; + isLocked?: boolean; /** Makes column hidden by default. User can turn it on later, via ColumnsConfiguration */ isHiddenByDefault?: boolean; diff --git a/uui/components/tables/columnsConfigurationModal/ColumnRow.tsx b/uui/components/tables/columnsConfigurationModal/ColumnRow.tsx index f3037ab446..f457ba6132 100644 --- a/uui/components/tables/columnsConfigurationModal/ColumnRow.tsx +++ b/uui/components/tables/columnsConfigurationModal/ColumnRow.tsx @@ -50,7 +50,7 @@ export const ColumnRow = React.memo(function ColumnRow(props: ColumnRowProps
{product}
, isSortable: true, - isAlwaysVisible: true, + isLocked: true, grow: 0, width: 96, }, { diff --git a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap index 0b12f8ebe8..afc59ce5c2 100644 --- a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap +++ b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap @@ -324,8 +324,77 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = ` + + + +
+
+
+
+
+ +
+
+ Not pinned +
+
+
+
+
+
+
+
+ +
+ +