chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

[Feature] Add language #19

Merged
chris-kruining merged 25 commits from feature/add-language into main 2024-12-19 15:22:42 +00:00
Conversation 0 Commits 25 Files changed 43 +43 -69
1 changed files with 43 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit ed8eecea2a - Show all commits

36
src/components/table/table.tsx
View file

@ -12,17 +12,12 @@ export type Column<T> = {
sortable?: boolean,
group?: string,
readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
};
export type CellEditor<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: CellEditor<T, K> };
export type CellEditor<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
export type CellEditors<T extends Record<string, any>> = { [K in keyof T]?: CellEditor<T, K> };
export interface TableApi<T extends Record<string, any>> {
readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
readonly rows: Accessor<DataSet<T>>;
readonly selection: Accessor<SelectionItem<keyof T, T>[]>;
readonly rows: Accessor<DataSet<T>>;
readonly columns: Accessor<Column<T>[]>;
@ -30,10 +25,6 @@ export interface TableApi<T extends Record<string, any>> {
clear(): void;
}
interface TableContextType<T extends Record<string, any>> {
readonly rows: Accessor<DataSet<T>>,
readonly columns: Accessor<Column<T>[]>,
readonly selection: Accessor<SelectionItem<keyof T, T>[]>,
interface TableContextType<T extends Record<string, any>> {
readonly rows: Accessor<DataSet<T>>,
readonly columns: Accessor<Column<T>[]>,
@ -55,7 +46,6 @@ type TableProps<T extends Record<string, any>> = {
class?: string,
summary?: string,
rows: DataSet<T>,
rows: DataSet<T>,
columns: Column<T>[],
selectionMode?: SelectionMode,
children?: CellEditors<T>,
@ -65,13 +55,11 @@ type TableProps<T extends Record<string, any>> = {
export function Table<T extends Record<string, any>>(props: TableProps<T>) {
const [selection, setSelection] = createSignal<SelectionItem<keyof T, T>[]>([]);
const rows = createMemo(() => props.rows);
const rows = createMemo(() => props.rows);
const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
const cellRenderers = createMemo<CellEditors<T>>(() => props.children ?? {});
const context: TableContextType<T> = {
const context: TableContextType<T> = {
rows,
columns,
@ -89,12 +77,10 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
</TableContext.Provider>;
};
type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: DataSet<T> };
type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: DataSet<T> };
function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
const table = useTable<T>();
const table = useTable<T>();
const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
const columnCount = createMemo(() => table.columns().length);
@ -108,7 +94,6 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
<Head />
<tbody class={css.main}>
<For each={props.rows.value()}>{
<For each={props.rows.value()}>{
node => <Node node={node} depth={0} />
}</For>
@ -127,11 +112,8 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
const table = useTable<T>();
const selectionContext = useSelection<T>();
const table = useTable<T>();
const selectionContext = useSelection<T>();
const api: TableApi<T> = {
selection: selectionContext.selection,
selection: selectionContext.selection,
rows: table.rows,
columns: table.columns,
@ -181,7 +163,6 @@ function Head(props: {}) {
<For each={table.columns()}>{
({ id, label, sortable }) => {
const sort = createMemo(() => table.rows().sort());
const sort = createMemo(() => table.rows().sort());
const by = String(id);
@ -219,7 +200,6 @@ function Head(props: {}) {
};
function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T, T>, depth: number, groupedBy?: keyof T }) {
function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T, T>, depth: number, groupedBy?: keyof T }) {
return <Switch>
<Match when={props.node.kind === 'row' ? props.node : undefined}>{
row => <Row key={row().key} value={row().value} depth={props.depth} groupedBy={props.groupedBy} />
@ -229,14 +209,9 @@ function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T,
group => <Group key={group().key} groupedBy={group().groupedBy} nodes={group().nodes} depth={props.depth} />
}</Match>
</Switch>;
}
}
function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, depth: number, groupedBy?: keyof T }) {
const table = useTable<T>();
const context = useSelection<T>();
const columns = table.columns;
function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, depth: number, groupedBy?: keyof T }) {
function Row<T extends Record<string, any>>(props: { key: keyof T, value: T, depth: number, groupedBy?: keyof T }) {
const table = useTable<T>();
const context = useSelection<T>();
const columns = table.columns;
@ -254,10 +229,9 @@ function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T,
({ id }) => <td class={'css.cell'}>{table.cellRenderers()[id]?.({ row: props.key as number, column: id, value: props.value[id] }) ?? props.value[id]}</td>
}</For>
</tr>;
};
};
function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
function Group<T extends Record<string, any>>(props: { key: keyof T, groupedBy: keyof T, nodes: DataSetNode<keyof T, T>[], depth: number }) {
const table = useTable();
return <details open>
@ -268,4 +242,4 @@ function Node<T extends Record<string, any>>(props: { node: DataSetNode<keyof T,
node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />
}</For>
</details>;
};
};