mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-10 04:30:25 +02:00
fix potential stale state on list config reorder, slight redesign
This commit is contained in:
@@ -404,7 +404,10 @@ const GridRowConfig = ({
|
|||||||
|
|
||||||
const handleReorder = useCallback(
|
const handleReorder = useCallback(
|
||||||
(idFrom: string, idTo: string, edge: Edge | null) => {
|
(idFrom: string, idTo: string, edge: Edge | null) => {
|
||||||
const idList = value.map((item) => item.id);
|
const currentValue = useSettingsStore.getState().lists[listKey]?.grid.rows;
|
||||||
|
if (!currentValue) return;
|
||||||
|
|
||||||
|
const idList = currentValue.map((item) => item.id);
|
||||||
const newIdOrder = dndUtils.reorderById({
|
const newIdOrder = dndUtils.reorderById({
|
||||||
edge,
|
edge,
|
||||||
idFrom,
|
idFrom,
|
||||||
@@ -413,10 +416,10 @@ const GridRowConfig = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Map the new ID order back to full items
|
// Map the new ID order back to full items
|
||||||
const newOrder = newIdOrder.map((id) => value.find((item) => item.id === id)!);
|
const newOrder = newIdOrder.map((id) => currentValue.find((item) => item.id === id)!);
|
||||||
onChange(newOrder);
|
onChange(newOrder);
|
||||||
},
|
},
|
||||||
[onChange, value],
|
[listKey, onChange],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -128,7 +128,7 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
|
|||||||
<Modal
|
<Modal
|
||||||
handlers={handlers}
|
handlers={handlers}
|
||||||
opened={isOpen}
|
opened={isOpen}
|
||||||
size="lg"
|
size="xl"
|
||||||
title={t('common.configure', { postProcess: 'sentenceCase' })}
|
title={t('common.configure', { postProcess: 'sentenceCase' })}
|
||||||
>
|
>
|
||||||
<Stack gap="xs">
|
<Stack gap="xs">
|
||||||
|
|||||||
@@ -486,7 +486,10 @@ const TableColumnConfig = ({
|
|||||||
|
|
||||||
const handleReorder = useCallback(
|
const handleReorder = useCallback(
|
||||||
(idFrom: string, idTo: string, edge: Edge | null) => {
|
(idFrom: string, idTo: string, edge: Edge | null) => {
|
||||||
const idList = value.map((item) => item.id);
|
const currentValue = useSettingsStore.getState().lists[listKey]?.table.columns;
|
||||||
|
if (!currentValue) return;
|
||||||
|
|
||||||
|
const idList = currentValue.map((item) => item.id);
|
||||||
const newIdOrder = dndUtils.reorderById({
|
const newIdOrder = dndUtils.reorderById({
|
||||||
edge,
|
edge,
|
||||||
idFrom,
|
idFrom,
|
||||||
@@ -495,10 +498,10 @@ const TableColumnConfig = ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Map the new ID order back to full items
|
// Map the new ID order back to full items
|
||||||
const newOrder = newIdOrder.map((id) => value.find((item) => item.id === id)!);
|
const newOrder = newIdOrder.map((id) => currentValue.find((item) => item.id === id)!);
|
||||||
onChange(newOrder);
|
onChange(newOrder);
|
||||||
},
|
},
|
||||||
[onChange, value],
|
[listKey, onChange],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -721,7 +724,7 @@ const TableColumnItem = memo(
|
|||||||
postProcess: 'sentenceCase',
|
postProcess: 'sentenceCase',
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
variant={item.pinned === 'left' ? 'filled' : 'subtle'}
|
variant={item.pinned === 'left' ? 'outline' : 'subtle'}
|
||||||
/>
|
/>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
icon="arrowRightToLine"
|
icon="arrowRightToLine"
|
||||||
@@ -733,7 +736,7 @@ const TableColumnItem = memo(
|
|||||||
postProcess: 'sentenceCase',
|
postProcess: 'sentenceCase',
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
variant={item.pinned === 'right' ? 'filled' : 'subtle'}
|
variant={item.pinned === 'right' ? 'outline' : 'subtle'}
|
||||||
/>
|
/>
|
||||||
</ActionIconGroup>
|
</ActionIconGroup>
|
||||||
<ActionIconGroup className={styles.group}>
|
<ActionIconGroup className={styles.group}>
|
||||||
@@ -747,7 +750,7 @@ const TableColumnItem = memo(
|
|||||||
postProcess: 'sentenceCase',
|
postProcess: 'sentenceCase',
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
variant={item.align === 'start' ? 'filled' : 'subtle'}
|
variant={item.align === 'start' ? 'outline' : 'subtle'}
|
||||||
/>
|
/>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
icon="alignCenter"
|
icon="alignCenter"
|
||||||
@@ -759,7 +762,7 @@ const TableColumnItem = memo(
|
|||||||
postProcess: 'sentenceCase',
|
postProcess: 'sentenceCase',
|
||||||
}),
|
}),
|
||||||
}}
|
}}
|
||||||
variant={item.align === 'center' ? 'filled' : 'subtle'}
|
variant={item.align === 'center' ? 'outline' : 'subtle'}
|
||||||
/>
|
/>
|
||||||
<ActionIcon
|
<ActionIcon
|
||||||
icon="alignRight"
|
icon="alignRight"
|
||||||
|
|||||||
@@ -41,6 +41,11 @@
|
|||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
border: 1px solid lighten(var(--theme-colors-border), 10%);
|
border: 1px solid lighten(var(--theme-colors-border), 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: var(--theme-colors-primary);
|
||||||
|
fill: var(--theme-colors-primary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-variant='filled'] {
|
&[data-variant='filled'] {
|
||||||
|
|||||||
Reference in New Issue
Block a user