export function PaletteTable()

in app/src/sandbox/tokens/palette/components/paletteTable/paletteTable.tsx [44:154]
96 lines of code
3 McCabe index (conditional complexity)

export function PaletteTable(props: PaletteTableProps) {
    const { params, result, grouped } = props;
    const { tokens, loading, uuiTheme } = result;
    const { valueType, filter } = params;

    const filtersConfig = useMemo(() => {
        return getFiltersConfig(getTotals(tokens));
    }, [tokens]);

    const defaultColumns = useMemo(() => {
        return getColumns({ uuiTheme, valueType, filter });
    }, [filter, uuiTheme, valueType]);

    const [value, onValueChange] = useState<DataTableState<TTokensLocalFilter>>({
        topIndex: 0,
        visibleCount: Number.MAX_SAFE_INTEGER,
        filter: DEFAULT_LOCAL_FILTER,
    });

    const { tableState, setTableState } = useTableState<TTokensLocalFilter>({
        onValueChange,
        filters: filtersConfig,
        value,
    });

    const items: ITokenRow[] = useMemo(() => {
        return convertLocalTokens({
            tokens,
            grouped,
            localFilter: tableState.filter,
        });
    }, [grouped, tokens, tableState.filter]);

    const tokensDs = useArrayDataSource<ITokenRow, string, TTokensLocalFilter>(
        {
            items,
            getId: (item) => {
                return item.id;
            },
            sortBy: getSortBy(),
            getParentId: (item) => {
                if (grouped) {
                    return item.parentId;
                }
            },
        },
        [items],
    );
    const tokensDsView = tokensDs.useView(tableState, setTableState, {
        isFoldedByDefault: () => false,
    });
    const { columns, config: columnsConfig } = useColumnsConfig(defaultColumns, tableState.columnsConfig || {});
    const renderRow = (rowProps: DataTableRowProps<ITokenRow, string>) => {
        return (
            <DataTableRow
                // cx={ cx }
                key={ rowProps.id }
                { ...rowProps }
                columns={ columns }
                indent={ Math.min(rowProps.indent || 0, 1) }
            />
        );
    };

    const handleChangeValueType = (newValueType: TThemeTokenValueType) => {
        props.onChangeParams((prev) => {
            return {
                ...prev,
                valueType: newValueType,
            };
        });
    };

    return (
        <Panel background="surface-main" shadow>
            <FlexRow
                padding="12"
                vPadding="24"
                rawProps={ { style: { flexWrap: 'nowrap', gap: '3px', paddingBottom: 0 } } }
            >
                <ParamsFilters params={ props.params } onChangeParams={ props.onChangeParams } />
                <FiltersPanel<TTokensLocalFilter>
                    filters={ filtersConfig }
                    tableState={ tableState }
                    setTableState={ setTableState }
                />
                <TokensSummary
                    uuiTheme={ uuiTheme }
                    expectedValueType={ params.valueType }
                    onChangeExpectedValueType={ handleChangeValueType }
                />
            </FlexRow>
            <div>
                <Blocker isEnabled={ loading } cx={ css.blocker } />
                <ScrollBars style={ { height: `calc(100vh - ${TOP_INDENT})`, marginBottom: '0px' } }>
                    <div>
                        <div className={ css.stickyHeader }>
                            <DataTableHeaderRow
                                columns={ columns }
                                allowColumnsResizing={ false }
                                value={ { ...tableState, columnsConfig } }
                                onValueChange={ setTableState }
                            />
                        </div>
                        { tokensDsView.getVisibleRows().map(renderRow) }
                    </div>
                </ScrollBars>
            </div>
        </Panel>
    );
}