disable pin column buttons

This commit is contained in:
jeffvli
2026-02-09 03:01:42 -08:00
parent de6cd7d0dc
commit 775cb6be07
2 changed files with 38 additions and 26 deletions
@@ -195,6 +195,7 @@ const Config = ({
if (props.detailConfig) { if (props.detailConfig) {
return ( return (
<TableConfig <TableConfig
enablePinColumnButtons={false}
listKey={props.detailConfig.listKey} listKey={props.detailConfig.listKey}
optionsConfig={props.detailConfig.optionsConfig} optionsConfig={props.detailConfig.optionsConfig}
tableColumnsData={props.detailConfig.tableColumnsData} tableColumnsData={props.detailConfig.tableColumnsData}
@@ -39,6 +39,7 @@ import { dndUtils, DragData, DragOperation, DragTarget } from '/@/shared/types/d
import { ItemListKey, ListPaginationType } from '/@/shared/types/types'; import { ItemListKey, ListPaginationType } from '/@/shared/types/types';
interface TableConfigProps { interface TableConfigProps {
enablePinColumnButtons?: boolean;
extraOptions?: { extraOptions?: {
component: React.ReactNode; component: React.ReactNode;
id: string; id: string;
@@ -55,6 +56,7 @@ interface TableConfigProps {
} }
export const TableConfig = ({ export const TableConfig = ({
enablePinColumnButtons = true,
extraOptions, extraOptions,
listKey, listKey,
optionsConfig, optionsConfig,
@@ -264,6 +266,7 @@ export const TableConfig = ({
<Divider /> <Divider />
<TableColumnConfig <TableColumnConfig
data={tableColumnsData} data={tableColumnsData}
enablePinColumnButtons={enablePinColumnButtons}
onChange={(columns) => setList(listKey, { table: { columns } })} onChange={(columns) => setList(listKey, { table: { columns } })}
value={list.table.columns} value={list.table.columns}
/> />
@@ -273,10 +276,12 @@ export const TableConfig = ({
const TableColumnConfig = ({ const TableColumnConfig = ({
data, data,
enablePinColumnButtons,
onChange, onChange,
value, value,
}: { }: {
data: { label: string; value: string }[]; data: { label: string; value: string }[];
enablePinColumnButtons: boolean;
onChange: (value: ItemTableListColumnConfig[]) => void; onChange: (value: ItemTableListColumnConfig[]) => void;
value: ItemTableListColumnConfig[]; value: ItemTableListColumnConfig[];
}) => { }) => {
@@ -473,6 +478,7 @@ const TableColumnConfig = ({
<div style={{ userSelect: 'none' }}> <div style={{ userSelect: 'none' }}>
{filteredColumns.map(({ item, matches }) => ( {filteredColumns.map(({ item, matches }) => (
<TableColumnItem <TableColumnItem
enablePinColumnButtons={enablePinColumnButtons}
handleAlignCenter={handleAlignCenter} handleAlignCenter={handleAlignCenter}
handleAlignLeft={handleAlignLeft} handleAlignLeft={handleAlignLeft}
handleAlignRight={handleAlignRight} handleAlignRight={handleAlignRight}
@@ -516,6 +522,7 @@ const DragHandle = ({
const TableColumnItem = memo( const TableColumnItem = memo(
({ ({
enablePinColumnButtons,
handleAlignCenter, handleAlignCenter,
handleAlignLeft, handleAlignLeft,
handleAlignRight, handleAlignRight,
@@ -531,6 +538,7 @@ const TableColumnItem = memo(
label, label,
matches, matches,
}: { }: {
enablePinColumnButtons: boolean;
handleAlignCenter: (item: ItemTableListColumnConfig) => void; handleAlignCenter: (item: ItemTableListColumnConfig) => void;
handleAlignLeft: (item: ItemTableListColumnConfig) => void; handleAlignLeft: (item: ItemTableListColumnConfig) => void;
handleAlignRight: (item: ItemTableListColumnConfig) => void; handleAlignRight: (item: ItemTableListColumnConfig) => void;
@@ -667,32 +675,34 @@ const TableColumnItem = memo(
variant="subtle" variant="subtle"
/> />
</ActionIconGroup> </ActionIconGroup>
<ActionIconGroup className={styles.group}> {enablePinColumnButtons && (
<ActionIcon <ActionIconGroup className={styles.group}>
icon="arrowLeftToLine" <ActionIcon
iconProps={{ size: 'md' }} icon="arrowLeftToLine"
onClick={() => handlePinToLeft(item)} iconProps={{ size: 'md' }}
size="xs" onClick={() => handlePinToLeft(item)}
tooltip={{ size="xs"
label: t('table.config.general.pinToLeft', { tooltip={{
postProcess: 'sentenceCase', label: t('table.config.general.pinToLeft', {
}), postProcess: 'sentenceCase',
}} }),
variant={item.pinned === 'left' ? 'filled' : 'subtle'} }}
/> variant={item.pinned === 'left' ? 'filled' : 'subtle'}
<ActionIcon />
icon="arrowRightToLine" <ActionIcon
iconProps={{ size: 'md' }} icon="arrowRightToLine"
onClick={() => handlePinToRight(item)} iconProps={{ size: 'md' }}
size="xs" onClick={() => handlePinToRight(item)}
tooltip={{ size="xs"
label: t('table.config.general.pinToRight', { tooltip={{
postProcess: 'sentenceCase', label: t('table.config.general.pinToRight', {
}), postProcess: 'sentenceCase',
}} }),
variant={item.pinned === 'right' ? 'filled' : 'subtle'} }}
/> variant={item.pinned === 'right' ? 'filled' : 'subtle'}
</ActionIconGroup> />
</ActionIconGroup>
)}
<ActionIconGroup className={styles.group}> <ActionIconGroup className={styles.group}>
<ActionIcon <ActionIcon
icon="alignLeft" icon="alignLeft"
@@ -772,6 +782,7 @@ const TableColumnItem = memo(
(prevProps, nextProps) => { (prevProps, nextProps) => {
// Custom comparison function for better memoization // Custom comparison function for better memoization
return ( return (
prevProps.enablePinColumnButtons === nextProps.enablePinColumnButtons &&
prevProps.item.id === nextProps.item.id && prevProps.item.id === nextProps.item.id &&
prevProps.item.isEnabled === nextProps.item.isEnabled && prevProps.item.isEnabled === nextProps.item.isEnabled &&
prevProps.item.autoSize === nextProps.item.autoSize && prevProps.item.autoSize === nextProps.item.autoSize &&