@vuu-ui/vuu-table 2.1.15 → 2.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Table.js +4 -6
- package/cjs/Table.js.map +1 -1
- package/cjs/{useHighlighting.js → applyHighlighting.js} +3 -3
- package/cjs/applyHighlighting.js.map +1 -0
- package/cjs/bulk-edit/BulkEditPanel.js +46 -3
- package/cjs/bulk-edit/BulkEditPanel.js.map +1 -1
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js +6 -0
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +1 -0
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js +80 -0
- package/cjs/bulk-edit/ColumnCascadingUpdateEditor.js.map +1 -0
- package/cjs/bulk-edit/{BulkEditRow.css.js → InsertNewRowEditor.css.js} +1 -1
- package/cjs/bulk-edit/InsertNewRowEditor.css.js.map +1 -0
- package/cjs/bulk-edit/{BulkEditRow.js → InsertNewRowEditor.js} +7 -7
- package/cjs/bulk-edit/InsertNewRowEditor.js.map +1 -0
- package/cjs/bulk-edit/useBulkEditPanel.js.map +1 -1
- package/cjs/bulk-edit/{useBulkEditRow.js → useColumnCascadingEditor.js} +1 -1
- package/cjs/bulk-edit/useColumnCascadingEditor.js.map +1 -0
- package/cjs/cell-renderers/input-cell/InputCell.css.js +1 -1
- package/cjs/cell-renderers/input-cell/InputCell.js +15 -5
- package/cjs/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/cjs/cell-renderers/input-cell/useInputCell.js +211 -0
- package/cjs/cell-renderers/input-cell/useInputCell.js.map +1 -0
- package/cjs/data-row/DataRow.js +11 -2
- package/cjs/data-row/DataRow.js.map +1 -1
- package/cjs/index.js +2 -6
- package/cjs/index.js.map +1 -1
- package/cjs/table-cell/TableCell.css.js +1 -1
- package/cjs/table-cell/TableCell.js +19 -36
- package/cjs/table-cell/TableCell.js.map +1 -1
- package/cjs/table-cell/TableGroupCell.js +2 -2
- package/cjs/table-cell/TableGroupCell.js.map +1 -1
- package/cjs/table-data-source/useDataSource.js +2 -0
- package/cjs/table-data-source/useDataSource.js.map +1 -1
- package/cjs/table-dom-utils.js +26 -2
- package/cjs/table-dom-utils.js.map +1 -1
- package/cjs/useCell.js +3 -4
- package/cjs/useCell.js.map +1 -1
- package/cjs/useCellEditing.js +3 -30
- package/cjs/useCellEditing.js.map +1 -1
- package/cjs/useCellFocus.js.map +1 -1
- package/cjs/useKeyboardNavigation.js +10 -0
- package/cjs/useKeyboardNavigation.js.map +1 -1
- package/cjs/useTable.js +4 -32
- package/cjs/useTable.js.map +1 -1
- package/esm/Table.js +4 -6
- package/esm/Table.js.map +1 -1
- package/esm/{useHighlighting.js → applyHighlighting.js} +3 -3
- package/esm/applyHighlighting.js.map +1 -0
- package/esm/bulk-edit/BulkEditPanel.js +46 -3
- package/esm/bulk-edit/BulkEditPanel.js.map +1 -1
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js +4 -0
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.css.js.map +1 -0
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js +78 -0
- package/esm/bulk-edit/ColumnCascadingUpdateEditor.js.map +1 -0
- package/esm/bulk-edit/{BulkEditRow.css.js → InsertNewRowEditor.css.js} +1 -1
- package/esm/bulk-edit/InsertNewRowEditor.css.js.map +1 -0
- package/esm/bulk-edit/{BulkEditRow.js → InsertNewRowEditor.js} +5 -5
- package/esm/bulk-edit/InsertNewRowEditor.js.map +1 -0
- package/esm/bulk-edit/useBulkEditPanel.js.map +1 -1
- package/esm/bulk-edit/{useBulkEditRow.js → useColumnCascadingEditor.js} +1 -1
- package/esm/bulk-edit/useColumnCascadingEditor.js.map +1 -0
- package/esm/cell-renderers/input-cell/InputCell.css.js +1 -1
- package/esm/cell-renderers/input-cell/InputCell.js +17 -7
- package/esm/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/esm/cell-renderers/input-cell/useInputCell.js +209 -0
- package/esm/cell-renderers/input-cell/useInputCell.js.map +1 -0
- package/esm/data-row/DataRow.js +11 -2
- package/esm/data-row/DataRow.js.map +1 -1
- package/esm/index.js +1 -3
- package/esm/index.js.map +1 -1
- package/esm/table-cell/TableCell.css.js +1 -1
- package/esm/table-cell/TableCell.js +20 -37
- package/esm/table-cell/TableCell.js.map +1 -1
- package/esm/table-cell/TableGroupCell.js +2 -2
- package/esm/table-cell/TableGroupCell.js.map +1 -1
- package/esm/table-data-source/useDataSource.js +2 -0
- package/esm/table-data-source/useDataSource.js.map +1 -1
- package/esm/table-dom-utils.js +25 -3
- package/esm/table-dom-utils.js.map +1 -1
- package/esm/useCell.js +3 -4
- package/esm/useCell.js.map +1 -1
- package/esm/useCellEditing.js +5 -32
- package/esm/useCellEditing.js.map +1 -1
- package/esm/useCellFocus.js.map +1 -1
- package/esm/useKeyboardNavigation.js +11 -1
- package/esm/useKeyboardNavigation.js.map +1 -1
- package/esm/useTable.js +5 -33
- package/esm/useTable.js.map +1 -1
- package/package.json +10 -10
- package/types/Table.d.ts +14 -2
- package/types/applyHighlighting.d.ts +2 -0
- package/types/bulk-edit/BulkEditPanel.d.ts +3 -1
- package/types/bulk-edit/ColumnCascadingUpdateEditor.d.ts +9 -0
- package/types/bulk-edit/{BulkEditRow.d.ts → InsertNewRowEditor.d.ts} +1 -1
- package/types/bulk-edit/useBulkEditPanel.d.ts +1 -1
- package/types/cell-renderers/input-cell/InputCell.d.ts +1 -1
- package/types/cell-renderers/input-cell/useInputCell.d.ts +21 -0
- package/types/index.d.ts +2 -2
- package/types/table-cell/TableCell.d.ts +1 -1
- package/types/table-dom-utils.d.ts +3 -1
- package/types/useCell.d.ts +1 -1
- package/types/useCellEditing.d.ts +1 -3
- package/types/useKeyboardNavigation.d.ts +2 -1
- package/types/useTable.d.ts +4 -5
- package/cjs/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/cjs/bulk-edit/BulkEditRow.js.map +0 -1
- package/cjs/bulk-edit/useBulkEditRow.js.map +0 -1
- package/cjs/useHighlighting.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.css.js.map +0 -1
- package/esm/bulk-edit/BulkEditRow.js.map +0 -1
- package/esm/bulk-edit/useBulkEditRow.js.map +0 -1
- package/esm/useHighlighting.js.map +0 -1
- package/types/bulk-edit/index.d.ts +0 -3
- package/types/useHighlighting.d.ts +0 -2
- /package/types/bulk-edit/{useBulkEditRow.d.ts → useColumnCascadingEditor.d.ts} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInputCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/input-cell/useInputCell.ts"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type {\n RuntimeColumnDescriptor,\n TableCellEditHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n DataValidationError,\n dispatchCustomEvent,\n getTypedValue,\n isRpcError,\n isRpcSuccess,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n FormEventHandler,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport interface InputCellHookProps<\n T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n column: Pick<\n RuntimeColumnDescriptor,\n \"clientSideEditValidationCheck\" | \"label\" | \"name\"\n >;\n value?: T;\n onEdit?: TableCellEditHandler;\n type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n editing: boolean;\n message?: string;\n // Set once we commit an edit, cleared when edit session is ended.\n previousValue?: string;\n value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useInputCell = <T extends string | number | boolean = string>({\n column,\n value,\n onEdit,\n type = \"string\",\n}: InputCellHookProps<T>) => {\n const [editState, setEditState] = useState<EditState>({\n editing: false,\n value: stringValueOf(value),\n });\n const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n const isDirtyRef = useRef(false);\n\n useMemo(() => {\n if (initialValueRef.current !== value?.toString()) {\n initialValueRef.current = stringValueOf(value);\n setEditState((editState) => ({\n ...editState,\n message: undefined,\n value: stringValueOf(value),\n }));\n }\n }, [value]);\n\n const commit = useCallback(async () => {\n const { value } = editState;\n const result = column.clientSideEditValidationCheck?.(value, \"*\");\n if (result?.ok === false) {\n setEditState((state) => ({\n ...state,\n message: result?.messages?.join(\",\"),\n }));\n return false;\n } else {\n //save initial value,it could be reset by time async operation completes\n const { current: initialValue } = initialValueRef;\n const previousValue = getTypedValue(initialValue, type);\n try {\n const typedValue = getTypedValue(value, type, true);\n const response = await onEdit?.(\n {\n editType: \"commit\",\n isValid: true,\n previousValue,\n value: typedValue,\n },\n \"commit\",\n );\n if (isRpcSuccess(response)) {\n isDirtyRef.current = false;\n setEditState(({ previousValue, value }) => ({\n editing: false,\n previousValue:\n previousValue === value\n ? undefined\n : previousValue === undefined\n ? initialValue\n : previousValue,\n value,\n }));\n } else if (isRpcError(response)) {\n setEditState((state) => ({\n ...state,\n message: response.errorMessage,\n }));\n return false;\n }\n initialValueRef.current = value;\n return true;\n } catch (e) {\n if (e instanceof DataValidationError) {\n const { actualType, expectedType, message } = e;\n if (column) {\n const { name, label = name } = column;\n const message = `${label} is a ${expectedType} value, data entered is ${actualType} `;\n setEditState((state) => ({\n ...state,\n message,\n }));\n onEdit?.(\n {\n editType: \"commit\",\n isValid: false,\n previousValue,\n value,\n },\n \"commit\",\n );\n } else {\n setEditState((state) => ({\n ...state,\n message,\n }));\n }\n }\n }\n }\n return false;\n }, [column, editState, onEdit, type]);\n\n /**\n * Depending on the current state (editing or not, dirty or not) activation will either be\n * entering into edit state, leaving edit state or commiting edited value.\n */\n const toggleActivation = useCallback(\n async (input: HTMLInputElement, cancel = false) => {\n if (editState.editing) {\n if (isDirtyRef.current) {\n if (cancel) {\n const { value: previousValue } = editState;\n isDirtyRef.current = false;\n setEditState({\n editing: false,\n value: initialValueRef.current,\n message: undefined,\n });\n // this assumes the original value was valid, is that safe ?\n onEdit?.(\n {\n editType: \"cancel\",\n isValid: true,\n previousValue,\n value: getTypedValue(initialValueRef.current, type, true),\n },\n \"commit\",\n );\n } else {\n const commitSuccessful = await commit();\n if (commitSuccessful) {\n setEditState((editState) => ({ ...editState, editing: false }));\n dispatchCustomEvent(input, \"vuu-commit\");\n }\n }\n } else {\n setEditState((editState) => ({ ...editState, editing: false }));\n }\n } else if (!cancel) {\n setEditState((editState) => ({ ...editState, editing: true }));\n input.select();\n }\n },\n [commit, editState, onEdit],\n );\n\n const handleKeyDown = useCallback(\n async (evt: KeyboardEvent<HTMLElement>) => {\n const { key, target } = evt;\n const input = target as HTMLInputElement;\n if (key === \"Enter\") {\n toggleActivation(input);\n } else if (\n key === \"ArrowRight\" ||\n key === \"ArrowLeft\" ||\n key === \"ArrowUp\" ||\n key === \"ArrowDown\"\n ) {\n if (editState.editing) {\n evt.stopPropagation();\n } else {\n // console.log(\n // `[useEditableText] handleKeydown, arrowkey, not editing so let it bubble`,\n // );\n // evt.preventDefault();\n }\n } else if (evt.key === \"Escape\") {\n toggleActivation(input, true);\n }\n },\n [editState, toggleActivation],\n );\n\n const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n (e) => {\n // If focus is transferred from enclosing cell element, we are explicitl entering edit mode\n const input = e.target as HTMLInputElement;\n const source = e.relatedTarget as HTMLElement;\n if (\n source?.classList.contains(\"vuuTableCell\") &&\n source.contains(input)\n ) {\n toggleActivation(input);\n }\n },\n [toggleActivation],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(async () => {\n if (editState.editing) {\n if (isDirtyRef.current) {\n const commitSuccessful = await commit();\n console.log({ commitSuccessful });\n }\n setEditState((editState) => ({ ...editState, editing: false }));\n }\n }, [commit, editState]);\n\n const handleChange = useCallback<FormEventHandler>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n isDirtyRef.current = value !== initialValueRef.current;\n const result = column.clientSideEditValidationCheck?.(value, \"change\");\n setEditState({ editing: true, value });\n\n onEdit?.(\n {\n editType: \"change\",\n isValid: result?.ok !== false,\n previousValue: initialValueRef.current,\n value,\n },\n \"change\",\n );\n if (result?.ok === false) {\n setEditState({\n editing: true,\n value,\n message: result.messages?.join(\",\"),\n });\n }\n },\n [column, onEdit],\n );\n\n // console.log(\n // `[useEditableText] edited = ${\n // editState.previousValue !== undefined &&\n // editState.previousValue !== editState.value\n // }\n // editState.previousValue ${editState.previousValue}\n // editState.value ${editState.value}\n // `,\n // );\n\n return {\n editing: editState.editing,\n inputProps: {\n onBlur: handleBlur,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n },\n onChange: handleChange,\n previousValue: editState.previousValue,\n value: editState.value,\n warningMessage: editState.message,\n };\n};\n"],"names":["editState","value","previousValue","message"],"mappings":"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"}
|
package/esm/data-row/DataRow.js
CHANGED
|
@@ -135,7 +135,7 @@ function createColumnMap(columns, schemaColumns) {
|
|
|
135
135
|
const columnMap = {
|
|
136
136
|
...ColumnMapIntrinsicColumns
|
|
137
137
|
};
|
|
138
|
-
columns.forEach((name, i) => {
|
|
138
|
+
columns.forEach((name, i, cols) => {
|
|
139
139
|
const schemaColumn = schemaColumns.find((col) => col.name === name);
|
|
140
140
|
if (schemaColumn) {
|
|
141
141
|
const serverDataType = getServerDataType(schemaColumn, true);
|
|
@@ -149,11 +149,20 @@ function createColumnMap(columns, schemaColumns) {
|
|
|
149
149
|
`[DataRow] calculated column with invalid serverDataType ${name}`
|
|
150
150
|
);
|
|
151
151
|
}
|
|
152
|
+
} else if (name === "vuuMsg" && i === cols.length - 1) {
|
|
153
|
+
columnMap[name] = { index: i + 10, type: "string" };
|
|
152
154
|
} else {
|
|
153
155
|
throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);
|
|
154
156
|
}
|
|
155
157
|
});
|
|
156
|
-
|
|
158
|
+
if (columnMap.vuuMsg === void 0) {
|
|
159
|
+
return {
|
|
160
|
+
...columnMap,
|
|
161
|
+
vuuMsg: { index: columns.length + 10, type: "string" }
|
|
162
|
+
};
|
|
163
|
+
} else {
|
|
164
|
+
return columnMap;
|
|
165
|
+
}
|
|
157
166
|
}
|
|
158
167
|
const dataRowFactory = (columns, schemaColumns) => {
|
|
159
168
|
let columnMap = createColumnMap(columns, schemaColumns);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataRow.js","sources":["../../../../packages/vuu-table/src/data-row/DataRow.ts"],"sourcesContent":["import { DataSourceRow, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n StringNumericType,\n VuuColumnDataType,\n VuuDataRow,\n VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n DataRow,\n DataRowIntrinsicAttribute,\n DataRowOperation,\n DataRowOperations,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n getCalculatedColumnDetails,\n getServerDataType,\n isCalculatedColumn,\n isVuuColumnDataType,\n} from \"@vuu-ui/vuu-utils\";\n\ntype ColumnMapEntry = {\n index: number;\n type: VuuColumnDataType;\n};\n\nconst dataRowSymbol = Symbol(\"DataRow\");\n\n/**\n * We allow undefined to allow us to null out rather than delete entries, for\n * performance reasons.\n */\ntype DataRowColumnMap = Record<string, ColumnMapEntry | undefined>;\n\nconst dataRowIntrinsicAttributes: Record<DataRowIntrinsicAttribute, true> = {\n childCount: true,\n depth: true,\n index: true,\n isExpanded: true,\n isSelected: true,\n isLeaf: true,\n key: true,\n renderIndex: true,\n};\n\nconst dataRowOperations: Record<DataRowOperation, true> = {\n hasColumn: true,\n};\n\nconst isDataRowIntrinsicAttribute = (\n attrName: string,\n): attrName is DataRowIntrinsicAttribute =>\n dataRowIntrinsicAttributes[attrName as DataRowIntrinsicAttribute] === true;\n\nconst isDataRowOperation = (attrName: string): attrName is DataRowOperation =>\n dataRowOperations[attrName as DataRowOperation] === true;\n\nconst stringNumericTypes: Record<StringNumericType, true> = {\n long: true,\n scaleddecimal2: true,\n scaleddecimal4: true,\n scaleddecimal6: true,\n scaleddecimal8: true,\n};\n\nconst isStringNumericType = (\n type: VuuColumnDataType,\n): type is StringNumericType =>\n stringNumericTypes[type as StringNumericType] === true;\n\nconst MAX_DECIMALS = \"0000000\";\n\nconst injectDecimalPoint = (value: string, decimal: 2 | 4 | 6 | 8) => {\n if (value === \"0\" || value === \"-0\" || value === \"\") {\n return value;\n } else {\n if (value[0] === \"-\") {\n const digits = value.slice(1);\n if (digits.length < decimal) {\n return `-0.${(MAX_DECIMALS + digits).slice(-decimal)}`;\n } else if (digits.length === decimal) {\n return `-0.${value}`;\n } else {\n return `-${digits.slice(0, -decimal)}.${digits.slice(-decimal)}`;\n }\n } else {\n if (value.length < decimal) {\n return `0.${(MAX_DECIMALS + value).slice(-decimal)}`;\n } else if (value.length === decimal) {\n return `0.${value}`;\n } else {\n return `${value.slice(0, -decimal)}.${value.slice(-decimal)}`;\n }\n }\n }\n};\n\nconst formatStringNumeric = (value: string, type: StringNumericType) => {\n switch (type) {\n case \"long\":\n return value;\n case \"scaleddecimal2\":\n return injectDecimalPoint(value, 2);\n case \"scaleddecimal4\":\n return injectDecimalPoint(value, 4);\n case \"scaleddecimal6\":\n return injectDecimalPoint(value, 6);\n case \"scaleddecimal8\":\n return injectDecimalPoint(value, 8);\n }\n};\n/**\n * DataRow wraps a vuu DataSourceRow and a columnMap to provide a more convenient\n * API for manipulating rows from server. It is now used internally by Table. This\n * removes the need to always provide a columnMap to any componnet that must work with\n * data rows. It also removes a category of timing bugs which cause the columnMap\n * to get out of sync with data.\n * Because properties are provided via a proxy, and the DataRow has the Schema, there is\n * flexibility to enhance handling for specific properties. This is used now to insert\n * decimal point in scaleddecimal values.\n * @param data\n * @param columnMap\n * @returns\n */\nfunction DataRowImpl(data: VuuDataRow, columnMap: DataRowColumnMap): DataRow {\n const target: Record<string, VuuRowDataItemType> = {};\n\n const getPropertyNames = () => {\n return Object.keys(columnMap);\n };\n\n const jsonSerializer = () => {\n return Object.entries(columnMap).reduce<Record<string, VuuRowDataItemType>>(\n (json, [name, mapEntry]) => {\n if (mapEntry) {\n json[name] = data[mapEntry.index];\n }\n return json;\n },\n {},\n );\n };\n\n const DataRowOperations: DataRowOperations = {\n hasColumn: (name: string) => columnMap[name] !== undefined,\n };\n\n return new Proxy(target, {\n get(_obj, prop: string | symbol) {\n if (typeof prop === \"symbol\") {\n if (prop === dataRowSymbol) return true;\n // TODO what does React use this for\n return undefined;\n } else if (prop === \"toJSON\") {\n return jsonSerializer;\n } else if (prop === \"toString\") {\n return \"DataRow\";\n } else if (prop === \"$$typeof\") {\n // some react internal weirdness\n return undefined;\n } else if (isDataRowOperation(prop)) {\n return DataRowOperations[prop];\n } else if (prop === \"getPropertyNames\") {\n return getPropertyNames;\n }\n const columnMapEntry = columnMap[prop];\n\n if (columnMapEntry === undefined) {\n if (prop !== \"\") {\n // System columns like the selection checkbox column\n console.warn(`[DataRow:Proxy] unknown column ${prop}`);\n }\n return undefined;\n }\n\n if (isDataRowIntrinsicAttribute(prop)) {\n return data[columnMapEntry.index];\n }\n\n if (isStringNumericType(columnMapEntry.type)) {\n return formatStringNumeric(\n data[columnMapEntry.index] as string,\n columnMapEntry.type,\n );\n }\n\n return data[columnMapEntry.index];\n\n // throw new Error(`Unknown column: ${prop}`);\n },\n set() {\n throw new TypeError(\"DataRow is readonly\");\n },\n }) as DataRow;\n}\n\nexport type DataRowFunc = (data: DataSourceRow) => DataRow;\n\nconst ColumnMapIntrinsicColumns: DataRowColumnMap = {\n index: { index: 0, type: \"int\" },\n renderIndex: { index: 1, type: \"int\" },\n isLeaf: { index: 2, type: \"boolean\" },\n isExpanded: { index: 3, type: \"boolean\" },\n depth: { index: 4, type: \"int\" },\n childCount: { index: 5, type: \"int\" },\n key: { index: 6, type: \"string\" },\n isSelected: { index: 7, type: \"boolean\" },\n};\n\nfunction createColumnMap(\n columns: string[],\n schemaColumns: readonly SchemaColumn[],\n) {\n const columnMap: DataRowColumnMap = {\n ...ColumnMapIntrinsicColumns,\n };\n\n columns.forEach((name, i) => {\n const schemaColumn = schemaColumns.find((col) => col.name === name);\n if (schemaColumn) {\n const serverDataType = getServerDataType(schemaColumn, true);\n columnMap[name] = { index: i + 10, type: serverDataType };\n } else if (isCalculatedColumn(name)) {\n const { serverDataType } = getCalculatedColumnDetails(name);\n if (isVuuColumnDataType(serverDataType)) {\n columnMap[name] = { index: i + 10, type: serverDataType };\n } else {\n throw Error(\n `[DataRow] calculated column with invalid serverDataType ${name}`,\n );\n }\n } else {\n throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);\n }\n });\n return columnMap;\n}\n\n/**\n *\n * @param columns the names of columns included in subscription\n * @param schemaColumns full schema definitions for all available columns,\n * the serverDataTypes are used.\n * @returns a tuple containing:\n * - factory function that will create a DataRow instance from a DataSourceRow\n * array.\n * - a function that can be used to reset the columns, which will be used for all\n * subsequently created DataRows. Used by Table when user adds or removes columns\n * at runtime.\n */\nexport const dataRowFactory = (\n columns: string[],\n schemaColumns: readonly SchemaColumn[],\n): [DataRowFunc, (columns: string[]) => void] => {\n let columnMap = createColumnMap(columns, schemaColumns);\n\n const setColumns = (columns: string[]) => {\n // new columnMap will be used for all subsequently created DataRows\n columnMap = createColumnMap(columns, schemaColumns);\n };\n\n const DataRow = function (data: DataSourceRow) {\n return DataRowImpl(data, columnMap);\n };\n\n return [DataRow, setColumns];\n};\n\nif (process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore\n window.devtoolsFormatters = [\n {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header: function (obj: any) {\n if (obj[dataRowSymbol]) {\n return [\n \"div\",\n {\n style: \"display: flex; gap: 4px; justify-content: space-between\",\n },\n [\"span\", {}, \"Vuu DataRow\"],\n [\"span\", { style: \"font-weight: bold;\" }, `[${obj.index}]`],\n [\n \"span\",\n { style: \"font-weight: bold; color: blue;\" },\n `#${obj.key}`,\n ],\n ];\n }\n return null;\n },\n hasBody: function () {\n return true;\n },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n body: function (obj: any) {\n return [\n \"div\",\n {},\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"index\"],\n [\"span\", {}, obj.index],\n ],\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"key\"],\n [\"span\", {}, obj.key],\n ],\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"renderIndex\"],\n [\"span\", {}, obj.renderIndex],\n ],\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"isSelected\"],\n [\"span\", {}, obj.isSelected],\n ],\n ...obj.getPropertyNames().map((name: string) => {\n return [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, name],\n [\"span\", {}, obj[name]],\n ];\n }),\n ];\n },\n },\n ];\n}\n"],"names":["DataRowOperations","columns","DataRow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataRow.js","sources":["../../../../packages/vuu-table/src/data-row/DataRow.ts"],"sourcesContent":["import { DataSourceRow, SchemaColumn } from \"@vuu-ui/vuu-data-types\";\nimport {\n StringNumericType,\n VuuColumnDataType,\n VuuDataRow,\n VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n DataRow,\n DataRowIntrinsicAttribute,\n DataRowOperation,\n DataRowOperations,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n getCalculatedColumnDetails,\n getServerDataType,\n isCalculatedColumn,\n isVuuColumnDataType,\n} from \"@vuu-ui/vuu-utils\";\n\ntype ColumnMapEntry = {\n index: number;\n type: VuuColumnDataType;\n};\n\nconst dataRowSymbol = Symbol(\"DataRow\");\n\n/**\n * We allow undefined to allow us to null out rather than delete entries, for\n * performance reasons.\n */\ntype DataRowColumnMap = Record<string, ColumnMapEntry | undefined>;\n\nconst dataRowIntrinsicAttributes: Record<DataRowIntrinsicAttribute, true> = {\n childCount: true,\n depth: true,\n index: true,\n isExpanded: true,\n isSelected: true,\n isLeaf: true,\n key: true,\n renderIndex: true,\n};\n\nconst dataRowOperations: Record<DataRowOperation, true> = {\n hasColumn: true,\n};\n\nconst isDataRowIntrinsicAttribute = (\n attrName: string,\n): attrName is DataRowIntrinsicAttribute =>\n dataRowIntrinsicAttributes[attrName as DataRowIntrinsicAttribute] === true;\n\nconst isDataRowOperation = (attrName: string): attrName is DataRowOperation =>\n dataRowOperations[attrName as DataRowOperation] === true;\n\nconst stringNumericTypes: Record<StringNumericType, true> = {\n long: true,\n scaleddecimal2: true,\n scaleddecimal4: true,\n scaleddecimal6: true,\n scaleddecimal8: true,\n};\n\nconst isStringNumericType = (\n type: VuuColumnDataType,\n): type is StringNumericType =>\n stringNumericTypes[type as StringNumericType] === true;\n\nconst MAX_DECIMALS = \"0000000\";\n\nconst injectDecimalPoint = (value: string, decimal: 2 | 4 | 6 | 8) => {\n if (value === \"0\" || value === \"-0\" || value === \"\") {\n return value;\n } else {\n if (value[0] === \"-\") {\n const digits = value.slice(1);\n if (digits.length < decimal) {\n return `-0.${(MAX_DECIMALS + digits).slice(-decimal)}`;\n } else if (digits.length === decimal) {\n return `-0.${value}`;\n } else {\n return `-${digits.slice(0, -decimal)}.${digits.slice(-decimal)}`;\n }\n } else {\n if (value.length < decimal) {\n return `0.${(MAX_DECIMALS + value).slice(-decimal)}`;\n } else if (value.length === decimal) {\n return `0.${value}`;\n } else {\n return `${value.slice(0, -decimal)}.${value.slice(-decimal)}`;\n }\n }\n }\n};\n\nconst formatStringNumeric = (value: string, type: StringNumericType) => {\n switch (type) {\n case \"long\":\n return value;\n case \"scaleddecimal2\":\n return injectDecimalPoint(value, 2);\n case \"scaleddecimal4\":\n return injectDecimalPoint(value, 4);\n case \"scaleddecimal6\":\n return injectDecimalPoint(value, 6);\n case \"scaleddecimal8\":\n return injectDecimalPoint(value, 8);\n }\n};\n/**\n * DataRow wraps a vuu DataSourceRow and a columnMap to provide a more convenient\n * API for manipulating rows from server. It is now used internally by Table. This\n * removes the need to always provide a columnMap to any component that must work with\n * data rows. It also removes a category of timing bugs which cause the columnMap\n * to get out of sync with data.\n * Because properties are provided via a proxy, and the DataRow has the Schema, there is\n * flexibility to enhance handling for specific properties. This is used now to insert\n * decimal point in scaleddecimal values.\n * @param data\n * @param columnMap\n * @returns\n */\nfunction DataRowImpl(data: VuuDataRow, columnMap: DataRowColumnMap): DataRow {\n const target: Record<string, VuuRowDataItemType> = {};\n\n const getPropertyNames = () => {\n return Object.keys(columnMap);\n };\n\n const jsonSerializer = () => {\n return Object.entries(columnMap).reduce<Record<string, VuuRowDataItemType>>(\n (json, [name, mapEntry]) => {\n if (mapEntry) {\n json[name] = data[mapEntry.index];\n }\n return json;\n },\n {},\n );\n };\n\n const DataRowOperations: DataRowOperations = {\n hasColumn: (name: string) => columnMap[name] !== undefined,\n };\n\n return new Proxy(target, {\n get(_obj, prop: string | symbol) {\n if (typeof prop === \"symbol\") {\n if (prop === dataRowSymbol) return true;\n // TODO what does React use this for\n return undefined;\n } else if (prop === \"toJSON\") {\n return jsonSerializer;\n } else if (prop === \"toString\") {\n return \"DataRow\";\n } else if (prop === \"$$typeof\") {\n // some react internal weirdness\n return undefined;\n } else if (isDataRowOperation(prop)) {\n return DataRowOperations[prop];\n } else if (prop === \"getPropertyNames\") {\n return getPropertyNames;\n }\n const columnMapEntry = columnMap[prop];\n\n if (columnMapEntry === undefined) {\n if (prop !== \"\") {\n // System columns like the selection checkbox column\n console.warn(`[DataRow:Proxy] unknown column ${prop}`);\n }\n return undefined;\n }\n\n if (isDataRowIntrinsicAttribute(prop)) {\n return data[columnMapEntry.index];\n }\n\n if (isStringNumericType(columnMapEntry.type)) {\n return formatStringNumeric(\n data[columnMapEntry.index] as string,\n columnMapEntry.type,\n );\n }\n\n return data[columnMapEntry.index];\n\n // throw new Error(`Unknown column: ${prop}`);\n },\n set() {\n throw new TypeError(\"DataRow is readonly\");\n },\n }) as DataRow;\n}\n\nexport type DataRowFunc = (data: DataSourceRow) => DataRow;\n\nconst ColumnMapIntrinsicColumns: DataRowColumnMap = {\n index: { index: 0, type: \"int\" },\n renderIndex: { index: 1, type: \"int\" },\n isLeaf: { index: 2, type: \"boolean\" },\n isExpanded: { index: 3, type: \"boolean\" },\n depth: { index: 4, type: \"int\" },\n childCount: { index: 5, type: \"int\" },\n key: { index: 6, type: \"string\" },\n isSelected: { index: 7, type: \"boolean\" },\n};\n\nfunction createColumnMap(\n columns: string[],\n schemaColumns: readonly SchemaColumn[],\n) {\n const columnMap: DataRowColumnMap = {\n ...ColumnMapIntrinsicColumns,\n };\n\n columns.forEach((name, i, cols) => {\n const schemaColumn = schemaColumns.find((col) => col.name === name);\n if (schemaColumn) {\n const serverDataType = getServerDataType(schemaColumn, true);\n columnMap[name] = { index: i + 10, type: serverDataType };\n } else if (isCalculatedColumn(name)) {\n const { serverDataType } = getCalculatedColumnDetails(name);\n if (isVuuColumnDataType(serverDataType)) {\n columnMap[name] = { index: i + 10, type: serverDataType };\n } else {\n throw Error(\n `[DataRow] calculated column with invalid serverDataType ${name}`,\n );\n }\n } else if (name === \"vuuMsg\" && i === cols.length - 1) {\n // Mag column on a session table, always in last place\n columnMap[name] = { index: i + 10, type: \"string\" };\n } else {\n throw Error(`[DataRow] dataRowFactory column not in schema ${name}`);\n }\n });\n\n if (columnMap.vuuMsg === undefined) {\n // We will always check for vuuMsg, even if it isn't explicitly included in the subscribed columns\n return {\n ...columnMap,\n vuuMsg: { index: columns.length + 10, type: \"string\" },\n } as DataRowColumnMap;\n } else {\n return columnMap;\n }\n}\n\n/**\n *\n * @param columns the names of columns included in subscription\n * @param schemaColumns full schema definitions for all available columns,\n * the serverDataTypes are used.\n * @returns a tuple containing:\n * - factory function that will create a DataRow instance from a DataSourceRow\n * array.\n * - a function that can be used to reset the columns, which will be used for all\n * subsequently created DataRows. Used by Table when user adds or removes columns\n * at runtime.\n */\nexport const dataRowFactory = (\n columns: string[],\n schemaColumns: readonly SchemaColumn[],\n): [DataRowFunc, (columns: string[]) => void] => {\n let columnMap = createColumnMap(columns, schemaColumns);\n\n const setColumns = (columns: string[]) => {\n // new columnMap will be used for all subsequently created DataRows\n columnMap = createColumnMap(columns, schemaColumns);\n };\n\n const DataRow = function (data: DataSourceRow) {\n return DataRowImpl(data, columnMap);\n };\n\n return [DataRow, setColumns];\n};\n\nif (process.env.NODE_ENV !== \"production\") {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n //@ts-ignore\n window.devtoolsFormatters = [\n {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n header: function (obj: any) {\n if (obj[dataRowSymbol]) {\n return [\n \"div\",\n {\n style: \"display: flex; gap: 4px; justify-content: space-between\",\n },\n [\"span\", {}, \"Vuu DataRow\"],\n [\"span\", { style: \"font-weight: bold;\" }, `[${obj.index}]`],\n [\n \"span\",\n { style: \"font-weight: bold; color: blue;\" },\n `#${obj.key}`,\n ],\n ];\n }\n return null;\n },\n hasBody: function () {\n return true;\n },\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n body: function (obj: any) {\n return [\n \"div\",\n {},\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"index\"],\n [\"span\", {}, obj.index],\n ],\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"key\"],\n [\"span\", {}, obj.key],\n ],\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"renderIndex\"],\n [\"span\", {}, obj.renderIndex],\n ],\n [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, \"isSelected\"],\n [\"span\", {}, obj.isSelected],\n ],\n ...obj.getPropertyNames().map((name: string) => {\n return [\n \"div\",\n {\n style: \"display: flex; gap: 4px;\",\n },\n [\"span\", {}, name],\n [\"span\", {}, obj[name]],\n ];\n }),\n ];\n },\n },\n ];\n}\n"],"names":["DataRowOperations","columns","DataRow"],"mappings":"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"}
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export { BulkEditPanel } from './bulk-edit/BulkEditPanel.js';
|
|
2
|
-
export { useBulkEditPanel } from './bulk-edit/useBulkEditPanel.js';
|
|
3
|
-
export { useBulkEditRow } from './bulk-edit/useBulkEditRow.js';
|
|
4
2
|
export { CheckboxCell } from './cell-renderers/checkbox-cell/CheckboxCell.js';
|
|
5
3
|
export { CheckboxRowSelectorCell } from './cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js';
|
|
6
4
|
export { InputCell } from './cell-renderers/input-cell/InputCell.js';
|
|
@@ -19,7 +17,7 @@ export { HeaderProvider, useHeaderProps } from './table-header/HeaderProvider.js
|
|
|
19
17
|
export { TableHeader } from './table-header/TableHeader.js';
|
|
20
18
|
export { isRowSelectionKey, useControlledTableNavigation } from './useControlledTableNavigation.js';
|
|
21
19
|
export { useEditableCell } from './useEditableCell.js';
|
|
22
|
-
export {
|
|
20
|
+
export { applyHighlighting } from './applyHighlighting.js';
|
|
23
21
|
export { isNavigationKey, isPagingKey, useKeyboardNavigation } from './useKeyboardNavigation.js';
|
|
24
22
|
export { isTableLocation, useTableContextMenu } from './useTableContextMenu.js';
|
|
25
23
|
export { useTableModel } from './useTableModel.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n outline-offset: -2px;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n text-overflow: ellipsis;\n vertical-align: top;\n\n\n &:has(.vuuCheckboxRowSelector) {\n text-overflow: unset;\n }\n\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell:focus-visible {\n outline: none;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\n /** This is to achieve a white background to outline dashes */\n /* box-shadow: inset 0 0 0 var(--cell-outline-width) white; */\n border-bottom: none;\n .saltInput-bordered {\n border-color: transparent;\n outline: solid var(--salt-editable-borderColor-active) 2px;\n outline-offset: -1px;\n }\n\n
|
|
1
|
+
var tableCellCss = ".vuuTableCell {\n border-right-color: var(--cell-borderColor);\n border-right-style: solid;\n border-right-width: 1px;\n /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n display: inline-block;\n white-space: nowrap;\n height: 100%;\n outline-offset: -2px;\n overflow: hidden;\n padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n text-overflow: ellipsis;\n vertical-align: top;\n\n\n &:has(.vuuCheckboxRowSelector) {\n text-overflow: unset;\n }\n\n}\n\n.vuuTableCell-right {\n text-align: right;\n}\n\n.vuuTableCell-editable {\n align-items: center;\n display: inline-flex;\n padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);\n}\n\n.vuuTableCell:focus-visible {\n outline: none;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\n /** This is to achieve a white background to outline dashes */\n /* box-shadow: inset 0 0 0 var(--cell-outline-width) white; */\n border-bottom: none;\n .saltInput-bordered {\n border-color: transparent;\n outline: solid var(--salt-editable-borderColor-active) 2px;\n outline-offset: -1px;\n }\n\n .saltInput-bordered.vuuEditing{\n outline: dashed var(--salt-editable-borderColor-active) 2px;\n outline-offset: -1px;\n }\n\n .vuuTableInputCell-error.saltInput-bordered {\n outline: dashed var(--salt-status-error-borderColor) 2px;\n }\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n outline: var(\n --vuuTableCell-outline,\n solid var(--salt-focused-outlineColor) 2px\n );\n\n &:has(.vuuCheckboxRowSelector) {\n outline: none;\n }\n}\n/* .vuuTableCell-editable:focus {\n outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n outline: var(\n --vuuTableCell-outline,\n solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n );\n}\n";
|
|
2
2
|
|
|
3
3
|
export { tableCellCss as default };
|
|
4
4
|
//# sourceMappingURL=TableCell.css.js.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
3
|
import { useWindow } from '@salt-ds/window';
|
|
4
|
-
import {
|
|
4
|
+
import { useEditSession } from '@vuu-ui/vuu-utils';
|
|
5
5
|
import { useState, useCallback } from 'react';
|
|
6
|
+
import { applyHighlighting } from '../applyHighlighting.js';
|
|
6
7
|
import { useCell } from '../useCell.js';
|
|
7
|
-
import { useHighlighting } from '../useHighlighting.js';
|
|
8
8
|
import tableCellCss from './TableCell.css.js';
|
|
9
9
|
|
|
10
10
|
const classBase = "vuuTableCell";
|
|
@@ -12,7 +12,6 @@ const TableCell = ({
|
|
|
12
12
|
column,
|
|
13
13
|
dataRow,
|
|
14
14
|
onClick,
|
|
15
|
-
onDataEdited,
|
|
16
15
|
searchPattern = ""
|
|
17
16
|
}) => {
|
|
18
17
|
const targetWindow = useWindow();
|
|
@@ -21,41 +20,26 @@ const TableCell = ({
|
|
|
21
20
|
css: tableCellCss,
|
|
22
21
|
window: targetWindow
|
|
23
22
|
});
|
|
24
|
-
const
|
|
25
|
-
const { className, style } = useCell(column, classBase, false
|
|
26
|
-
const { ariaColIndex, CellRenderer, valueFormatter } = column;
|
|
23
|
+
const editSession = useEditSession();
|
|
24
|
+
const { className, style } = useCell(column, classBase, false);
|
|
25
|
+
const { ariaColIndex, CellRenderer, name, valueFormatter } = column;
|
|
26
|
+
const [editedDuringCurrentSession, setEditingDuringCurrentSession] = useState(void 0);
|
|
27
27
|
const handleDataItemEdited = useCallback(
|
|
28
|
-
(editState, editPhase) => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
async (editState, editPhase) => {
|
|
29
|
+
const { isValid = true, previousValue = "", value } = editState;
|
|
30
|
+
if (editPhase === "commit" && editSession) {
|
|
31
|
+
const { editedDuringCurrentSession: editedDuringCurrentSession2, ...response } = await editSession.commit(
|
|
32
|
+
dataRow.key,
|
|
33
|
+
name,
|
|
34
|
+
previousValue,
|
|
35
|
+
value,
|
|
36
|
+
isValid
|
|
35
37
|
);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
...editState,
|
|
39
|
-
dataRow,
|
|
40
|
-
columnName: column.name,
|
|
41
|
-
value: typedValue
|
|
42
|
-
},
|
|
43
|
-
editPhase
|
|
44
|
-
);
|
|
45
|
-
} else {
|
|
46
|
-
setHasError(editState.isValid === false);
|
|
47
|
-
onDataEdited?.(
|
|
48
|
-
{
|
|
49
|
-
...editState,
|
|
50
|
-
dataRow,
|
|
51
|
-
columnName: column.name
|
|
52
|
-
},
|
|
53
|
-
editPhase
|
|
54
|
-
);
|
|
55
|
-
return void 0;
|
|
38
|
+
setEditingDuringCurrentSession(editedDuringCurrentSession2);
|
|
39
|
+
return response;
|
|
56
40
|
}
|
|
57
41
|
},
|
|
58
|
-
[
|
|
42
|
+
[dataRow.key, editSession, name]
|
|
59
43
|
);
|
|
60
44
|
const handleClick = useCallback(
|
|
61
45
|
(evt) => {
|
|
@@ -63,8 +47,6 @@ const TableCell = ({
|
|
|
63
47
|
},
|
|
64
48
|
[column, onClick]
|
|
65
49
|
);
|
|
66
|
-
const value = valueFormatter(dataRow[column.name]);
|
|
67
|
-
const valueWithHighlighting = useHighlighting(value, searchPattern);
|
|
68
50
|
return /* @__PURE__ */ jsx(
|
|
69
51
|
"div",
|
|
70
52
|
{
|
|
@@ -78,10 +60,11 @@ const TableCell = ({
|
|
|
78
60
|
{
|
|
79
61
|
column,
|
|
80
62
|
dataRow,
|
|
63
|
+
editedDuringCurrentSession,
|
|
81
64
|
onEdit: handleDataItemEdited,
|
|
82
65
|
searchPattern
|
|
83
66
|
}
|
|
84
|
-
) :
|
|
67
|
+
) : applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)
|
|
85
68
|
}
|
|
86
69
|
);
|
|
87
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type {\n TableCellEditHandler,\n TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type {\n TableCellEditHandler,\n TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { useEditSession } from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { applyHighlighting } from \"../applyHighlighting\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n column,\n dataRow,\n onClick,\n searchPattern = \"\",\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-cell\",\n css: tableCellCss,\n window: targetWindow,\n });\n\n const editSession = useEditSession();\n\n const { className, style } = useCell(column, classBase, false);\n const { ariaColIndex, CellRenderer, name, valueFormatter } = column;\n const [editedDuringCurrentSession, setEditingDuringCurrentSession] = useState<\n boolean | undefined\n >(undefined);\n\n const handleDataItemEdited = useCallback<TableCellEditHandler>(\n async (editState, editPhase) => {\n const { isValid = true, previousValue = \"\", value } = editState;\n if (editPhase === \"commit\" && editSession) {\n const { editedDuringCurrentSession, ...response } =\n await editSession.commit(\n dataRow.key,\n name,\n previousValue,\n value,\n isValid,\n );\n setEditingDuringCurrentSession(editedDuringCurrentSession);\n return response;\n }\n },\n [dataRow.key, editSession, name],\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n return (\n <div\n aria-colindex={ariaColIndex}\n className={className}\n onClick={onClick ? handleClick : undefined}\n role=\"cell\"\n style={style}\n >\n {CellRenderer ? (\n <CellRenderer\n column={column}\n dataRow={dataRow}\n editedDuringCurrentSession={editedDuringCurrentSession}\n onEdit={handleDataItemEdited}\n searchPattern={searchPattern}\n />\n ) : (\n applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)\n )}\n </div>\n );\n};\n"],"names":["editedDuringCurrentSession"],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAc,cAAe,EAAA;AAEnC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,KAAU,OAAQ,CAAA,MAAA,EAAQ,WAAW,KAAK,CAAA;AAC7D,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,IAAA,EAAM,gBAAmB,GAAA,MAAA;AAC7D,EAAA,MAAM,CAAC,0BAAA,EAA4B,8BAA8B,CAAA,GAAI,SAEnE,KAAS,CAAA,CAAA;AAEX,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,OAAO,WAAW,SAAc,KAAA;AAC9B,MAAA,MAAM,EAAE,OAAU,GAAA,IAAA,EAAM,aAAgB,GAAA,EAAA,EAAI,OAAU,GAAA,SAAA;AACtD,MAAI,IAAA,SAAA,KAAc,YAAY,WAAa,EAAA;AACzC,QAAA,MAAM,EAAE,0BAAAA,EAAAA,2BAAAA,EAA4B,GAAG,QAAS,EAAA,GAC9C,MAAM,WAAY,CAAA,MAAA;AAAA,UAChB,OAAQ,CAAA,GAAA;AAAA,UACR,IAAA;AAAA,UACA,aAAA;AAAA,UACA,KAAA;AAAA,UACA;AAAA,SACF;AACF,QAAA,8BAAA,CAA+BA,2BAA0B,CAAA;AACzD,QAAO,OAAA,QAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,OAAA,CAAQ,GAAK,EAAA,WAAA,EAAa,IAAI;AAAA,GACjC;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,OAAA;AAAA,UACA,0BAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR;AAAA;AAAA,OACF,GAEA,kBAAkB,cAAe,CAAA,OAAA,CAAQ,OAAO,IAAI,CAAC,GAAG,aAAa;AAAA;AAAA,GAEzE;AAEJ;;;;"}
|
|
@@ -8,7 +8,7 @@ import { useCallback } from 'react';
|
|
|
8
8
|
import { useCell } from '../useCell.js';
|
|
9
9
|
import tableCellCss from './TableCell.css.js';
|
|
10
10
|
import tableGroupCellCss from './TableGroupCell.css.js';
|
|
11
|
-
import {
|
|
11
|
+
import { applyHighlighting } from '../applyHighlighting.js';
|
|
12
12
|
|
|
13
13
|
const classBase = "vuuTableGroupCell";
|
|
14
14
|
const TableGroupCell = ({
|
|
@@ -30,7 +30,7 @@ const TableGroupCell = ({
|
|
|
30
30
|
});
|
|
31
31
|
const { columns } = column;
|
|
32
32
|
const value = getGroupValue(columns, dataRow);
|
|
33
|
-
const valueWithHighlighting =
|
|
33
|
+
const valueWithHighlighting = applyHighlighting(value || "", searchPattern);
|
|
34
34
|
const icon = getGroupIcon(columns, dataRow);
|
|
35
35
|
const { className, style } = useCell(column, classBase);
|
|
36
36
|
const handleClick = useCallback(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableGroupCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { getGroupIcon, getGroupValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\nimport tableGroupCellCss from \"./TableGroupCell.css\";\nimport {
|
|
1
|
+
{"version":3,"file":"TableGroupCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableGroupCell.tsx"],"sourcesContent":["import { GroupColumnDescriptor, TableCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { Icon, ToggleIconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { getGroupIcon, getGroupValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { MouseEvent, useCallback } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\nimport tableGroupCellCss from \"./TableGroupCell.css\";\nimport { applyHighlighting } from \"../applyHighlighting\";\n\nconst classBase = \"vuuTableGroupCell\";\n\nexport const TableGroupCell = ({\n column,\n dataRow,\n onClick,\n searchPattern = \"\",\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-cell\",\n css: tableCellCss,\n window: targetWindow,\n });\n useComponentCssInjection({\n testId: \"vuu-table-group-cell\",\n css: tableGroupCellCss,\n window: targetWindow,\n });\n\n const { columns } = column as GroupColumnDescriptor;\n const value = getGroupValue(columns, dataRow);\n const valueWithHighlighting = applyHighlighting(value || \"\", searchPattern);\n\n const icon = getGroupIcon(columns, dataRow);\n const { className, style } = useCell(column, classBase);\n\n const handleClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n const { childCount, isExpanded, isLeaf } = dataRow;\n\n // In a TreeTable, no nodes are tagged as leaf nodes, but those with childCount = 0\n // behave as leaf nodes\n const isLeafNode = isLeaf || childCount == 0;\n\n return (\n <div\n aria-colindex={1}\n className={cx(className, \"vuuTableCell\")}\n role=\"cell\"\n style={style}\n onClick={isLeafNode ? undefined : handleClick}\n >\n <span className={`${classBase}-spacer`} />\n {isLeafNode ? null : <ToggleIconButton isExpanded={isExpanded} />}\n {icon ? <Icon name={icon} /> : null}\n <span className={`${classBase}-label`}>{valueWithHighlighting}</span>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAY,GAAA,MAAA;AACpB,EAAM,MAAA,KAAA,GAAQ,aAAc,CAAA,OAAA,EAAS,OAAO,CAAA;AAC5C,EAAA,MAAM,qBAAwB,GAAA,iBAAA,CAAkB,KAAS,IAAA,EAAA,EAAI,aAAa,CAAA;AAE1E,EAAM,MAAA,IAAA,GAAO,YAAa,CAAA,OAAA,EAAS,OAAO,CAAA;AAC1C,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,OAAA,CAAQ,QAAQ,SAAS,CAAA;AAEtD,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAoC,KAAA;AACnC,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,MAAA,EAAW,GAAA,OAAA;AAI3C,EAAM,MAAA,UAAA,GAAa,UAAU,UAAc,IAAA,CAAA;AAE3C,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,CAAA;AAAA,MACf,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,cAAc,CAAA;AAAA,MACvC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MACA,OAAA,EAAS,aAAa,KAAY,CAAA,GAAA,WAAA;AAAA,MAElC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAW,OAAA,CAAA,EAAA,CAAA;AAAA,QACvC,UAAa,GAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAwB,EAAA,CAAA;AAAA,QAC9D,IAAO,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAM,MAAM,CAAK,GAAA,IAAA;AAAA,4BAC9B,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAsB,EAAA,qBAAA,EAAA;AAAA;AAAA;AAAA,GAChE;AAEJ;;;;"}
|
|
@@ -99,6 +99,8 @@ const useDataSource = ({
|
|
|
99
99
|
if (message.type === "subscribed") {
|
|
100
100
|
createDataRow(message.columns, message.tableSchema.columns);
|
|
101
101
|
onSubscribed?.(message);
|
|
102
|
+
} else if (message.type === "subscribe-failed") {
|
|
103
|
+
console.warn(`subscribe failed ${message.msg}`);
|
|
102
104
|
} else if (message.type === "viewport-update") {
|
|
103
105
|
if (typeof message.size === "number") {
|
|
104
106
|
onSizeChange?.(message.size);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n DataSourceConfigChangeHandler,\n DataSourceRow,\n DataSourceSubscribeCallback,\n DataSourceSubscribedMessage,\n DataSourceSuspenseProps,\n SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n DataRow,\n TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { DataRowMovingWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n extends Pick<\n TableProps,\n | \"autoSelectFirstRow\"\n | \"autoSelectRowKey\"\n | \"dataSource\"\n | \"renderBufferSize\"\n | \"revealSelected\"\n | \"selectionModel\"\n > {\n suspenseProps?: DataSourceSuspenseProps;\n onSelect: TableRowSelectHandlerInternal;\n onSizeChange: (size: number) => void;\n onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n autoSelectFirstRow,\n autoSelectRowKey,\n dataSource,\n onSizeChange,\n onSubscribed,\n renderBufferSize = 0,\n revealSelected,\n onSelect,\n selectionModel,\n suspenseProps,\n}: DataSourceHookProps) => {\n const [, forceUpdate] = useState<unknown>(null);\n const dataRows = useRef<DataRow[]>([]);\n const isMounted = useRef(true);\n const hasUpdated = useRef(false);\n const rangeRef = useRef<Range>(dataSource.range);\n const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n undefined,\n );\n const totalRowCountRef = useRef(0);\n const rowAutoSelected = useRef(false);\n\n const autoSelect =\n autoSelectRowKey ??\n (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n (_config, _range, _confirmed, configChanges) => {\n if (configChanges?.filterChanged) {\n rowAutoSelected.current = false;\n }\n },\n [],\n );\n\n useEffect(() => {\n if (autoSelect) {\n dataSource.on(\"config\", handleConfigChange);\n }\n return () => {\n if (autoSelect) {\n dataSource.removeListener(\"config\", handleConfigChange);\n }\n };\n }, [autoSelect, dataSource, handleConfigChange]);\n\n const dataRowWindow = useMemo(\n () => new DataRowMovingWindow(rangeRef.current.withBuffer),\n [],\n );\n\n const handleResume = useCallback(() => {\n // When we resume a dataSource (after switching tabs etc)\n // client will receive rows. We may not have received any\n // setRange calls at this point so dataWindow range will\n //not yet be set. If the dataWindow range is already set,\n // this is a no-op.\n const { range } = dataSource;\n if (range.to !== 0) {\n dataRowWindow.setRange(dataSource.range.withBuffer);\n }\n }, [dataRowWindow, dataSource]);\n\n useEffect(() => {\n return () => {\n dataSource.removeListener(\"resumed\", handleResume);\n };\n }, [dataSource, handleResume]);\n\n const setData = useCallback(\n (updates: DataSourceRow[]) => {\n const { current: DataRow } = dataRowRef;\n for (const row of updates) {\n // for now, we create a new DataRow each time\n dataRowWindow.add(DataRow(row));\n }\n dataRows.current = dataRowWindow.data;\n if (isMounted.current) {\n // TODO do we ever need to worry about missing updates here ?\n forceUpdate({});\n }\n },\n [dataRowWindow],\n );\n\n const selectRow = useCallback(\n (dataRow: DataRow) => {\n const rowKey = dataRow.key;\n dataSource.select?.({\n preserveExistingSelection: false,\n rowKey,\n type: \"SELECT_ROW\",\n } as SelectRowRequest);\n onSelect?.(dataRow);\n },\n [dataSource, onSelect],\n );\n\n const createDataRow = useCallback(\n (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n dataRowRef.current = DataRow;\n setColumnsRef.current = setColumns;\n },\n [],\n );\n\n const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n (message) => {\n if (message.type === \"subscribed\") {\n createDataRow(message.columns, message.tableSchema.columns);\n onSubscribed?.(message);\n } else if (message.type === \"viewport-update\") {\n if (typeof message.size === \"number\") {\n onSizeChange?.(message.size);\n // const size = dataRowWindow.data.length;\n dataRowWindow.setRowCount(message.size);\n totalRowCountRef.current = message.size;\n\n // if (dataRowWindow.data.length < size) {\n // if (isMounted.current === false) {\n // console.log(\"setting state whilst unmounted\");\n // }\n\n // forceUpdate({});\n // }\n }\n if (message.rows) {\n setData(message.rows);\n if (autoSelect && rowAutoSelected.current === false) {\n // OR if no selected row in message.rows, e.g after a filter\n rowAutoSelected.current = true;\n if (typeof autoSelect === \"string\") {\n const dataRow = dataRowWindow.getByKey(autoSelect);\n if (dataRow) {\n selectRow(dataRow);\n } else {\n console.warn(\n `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n );\n }\n } else if (dataRowWindow.hasData) {\n selectRow(dataRowWindow.firstRow);\n }\n }\n } else if (message.size === 0) {\n setData([]);\n } else if (typeof message.size === \"number\") {\n dataRows.current = dataRowWindow.data;\n hasUpdated.current = true;\n }\n } else if (message.type === \"viewport-clear\") {\n onSizeChange?.(0);\n dataRowWindow.setRowCount(0);\n setData([]);\n forceUpdate({});\n } else {\n console.log(`useDataSource unexpected message ${message.type}`);\n }\n },\n [\n autoSelect,\n createDataRow,\n dataRowWindow,\n onSizeChange,\n onSubscribed,\n selectRow,\n setData,\n ],\n );\n\n const getSelectedRows = useCallback(() => {\n return dataRowWindow.getSelectedRows();\n }, [dataRowWindow]);\n\n useEffect(() => {\n if (dataSource.status === \"disabled\") {\n dataSource.enable?.(datasourceMessageHandler);\n }\n }, [dataSource, datasourceMessageHandler]);\n\n useMemo(() => {\n setColumnsRef.current?.(dataSource.columns);\n }, [dataSource.columns]);\n\n const setRange = useCallback(\n (viewportRange: VuuRange) => {\n if (!rangeRef.current.equals(viewportRange)) {\n const range = Range(\n viewportRange.from,\n viewportRange.to,\n renderBufferSize,\n );\n\n dataRowWindow.setRange(range.withBuffer);\n\n if (\n dataSource.status !== \"subscribed\" &&\n dataSource.status !== \"subscribing\" &&\n dataSource.status !== \"enabling\"\n ) {\n dataSource?.subscribe(\n {\n range,\n revealSelected,\n selectedKeyValues: autoSelectRowKey\n ? [autoSelectRowKey]\n : undefined,\n },\n datasourceMessageHandler,\n );\n } else {\n dataSource.range = rangeRef.current = range;\n }\n }\n },\n [\n autoSelectRowKey,\n dataRowWindow,\n dataSource,\n datasourceMessageHandler,\n renderBufferSize,\n revealSelected,\n ],\n );\n\n useEffect(() => {\n if (dataSource.status !== \"initialising\") {\n const { columns, tableSchema } = dataSource;\n if (tableSchema) {\n createDataRow(columns, tableSchema.columns);\n } else {\n throw Error(\n `[useDataSource] a resumed dataSource must have a tableSchema`,\n );\n }\n dataSource.resume?.(datasourceMessageHandler);\n\n if (dataSource.range.from > 0) {\n // UI does not currently restore scroll position, so always reset to top of dataset\n const { from, to } = rangeRef.current.reset;\n setRange({ from, to });\n }\n }\n return () => {\n dataSource.suspend?.(\n suspenseProps?.escalateToDisable,\n suspenseProps?.escalateDelay,\n );\n };\n }, [\n createDataRow,\n dataSource,\n datasourceMessageHandler,\n setRange,\n suspenseProps,\n ]);\n\n return {\n dataRows: dataRows.current,\n dataRowsRef: dataRows,\n getSelectedRows,\n range: rangeRef.current,\n setRange,\n };\n};\n"],"names":["DataRow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useDataSource.js","sources":["../../../../packages/vuu-table/src/table-data-source/useDataSource.ts"],"sourcesContent":["import type {\n DataSourceConfigChangeHandler,\n DataSourceRow,\n DataSourceSubscribeCallback,\n DataSourceSubscribedMessage,\n DataSourceSuspenseProps,\n SchemaColumn,\n} from \"@vuu-ui/vuu-data-types\";\nimport { SelectRowRequest, VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { Range } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { TableProps } from \"../Table\";\nimport {\n DataRow,\n TableRowSelectHandlerInternal,\n} from \"@vuu-ui/vuu-table-types\";\nimport { DataRowMovingWindow } from \"./DataRowMovingWindow\";\nimport { dataRowFactory, DataRowFunc } from \"../data-row/DataRow\";\n\nconst NullDataRow = () => ({}) as DataRow;\n\nexport interface DataSourceHookProps\n extends Pick<\n TableProps,\n | \"autoSelectFirstRow\"\n | \"autoSelectRowKey\"\n | \"dataSource\"\n | \"renderBufferSize\"\n | \"revealSelected\"\n | \"selectionModel\"\n > {\n suspenseProps?: DataSourceSuspenseProps;\n onSelect: TableRowSelectHandlerInternal;\n onSizeChange: (size: number) => void;\n onSubscribed: (subscription: DataSourceSubscribedMessage) => void;\n}\n\nexport const useDataSource = ({\n autoSelectFirstRow,\n autoSelectRowKey,\n dataSource,\n onSizeChange,\n onSubscribed,\n renderBufferSize = 0,\n revealSelected,\n onSelect,\n selectionModel,\n suspenseProps,\n}: DataSourceHookProps) => {\n const [, forceUpdate] = useState<unknown>(null);\n const dataRows = useRef<DataRow[]>([]);\n const isMounted = useRef(true);\n const hasUpdated = useRef(false);\n const rangeRef = useRef<Range>(dataSource.range);\n const dataRowRef = useRef<DataRowFunc>(NullDataRow);\n const setColumnsRef = useRef<undefined | ((columns: string[]) => void)>(\n undefined,\n );\n const totalRowCountRef = useRef(0);\n const rowAutoSelected = useRef(false);\n\n const autoSelect =\n autoSelectRowKey ??\n (autoSelectFirstRow || selectionModel === \"single-no-deselect\");\n\n const handleConfigChange = useCallback<DataSourceConfigChangeHandler>(\n (_config, _range, _confirmed, configChanges) => {\n if (configChanges?.filterChanged) {\n rowAutoSelected.current = false;\n }\n },\n [],\n );\n\n useEffect(() => {\n if (autoSelect) {\n dataSource.on(\"config\", handleConfigChange);\n }\n return () => {\n if (autoSelect) {\n dataSource.removeListener(\"config\", handleConfigChange);\n }\n };\n }, [autoSelect, dataSource, handleConfigChange]);\n\n const dataRowWindow = useMemo(\n () => new DataRowMovingWindow(rangeRef.current.withBuffer),\n [],\n );\n\n const handleResume = useCallback(() => {\n // When we resume a dataSource (after switching tabs etc)\n // client will receive rows. We may not have received any\n // setRange calls at this point so dataWindow range will\n //not yet be set. If the dataWindow range is already set,\n // this is a no-op.\n const { range } = dataSource;\n if (range.to !== 0) {\n dataRowWindow.setRange(dataSource.range.withBuffer);\n }\n }, [dataRowWindow, dataSource]);\n\n useEffect(() => {\n return () => {\n dataSource.removeListener(\"resumed\", handleResume);\n };\n }, [dataSource, handleResume]);\n\n const setData = useCallback(\n (updates: DataSourceRow[]) => {\n const { current: DataRow } = dataRowRef;\n for (const row of updates) {\n // for now, we create a new DataRow each time\n dataRowWindow.add(DataRow(row));\n }\n dataRows.current = dataRowWindow.data;\n if (isMounted.current) {\n // TODO do we ever need to worry about missing updates here ?\n forceUpdate({});\n }\n },\n [dataRowWindow],\n );\n\n const selectRow = useCallback(\n (dataRow: DataRow) => {\n const rowKey = dataRow.key;\n dataSource.select?.({\n preserveExistingSelection: false,\n rowKey,\n type: \"SELECT_ROW\",\n } as SelectRowRequest);\n onSelect?.(dataRow);\n },\n [dataSource, onSelect],\n );\n\n const createDataRow = useCallback(\n (columns: string[], schemaColumns: readonly SchemaColumn[]) => {\n const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);\n dataRowRef.current = DataRow;\n setColumnsRef.current = setColumns;\n },\n [],\n );\n\n const datasourceMessageHandler: DataSourceSubscribeCallback = useCallback(\n (message) => {\n if (message.type === \"subscribed\") {\n createDataRow(message.columns, message.tableSchema.columns);\n onSubscribed?.(message);\n } else if (message.type === \"subscribe-failed\") {\n console.warn(`subscribe failed ${message.msg}`);\n } else if (message.type === \"viewport-update\") {\n if (typeof message.size === \"number\") {\n onSizeChange?.(message.size);\n // const size = dataRowWindow.data.length;\n dataRowWindow.setRowCount(message.size);\n totalRowCountRef.current = message.size;\n }\n if (message.rows) {\n setData(message.rows);\n if (autoSelect && rowAutoSelected.current === false) {\n // OR if no selected row in message.rows, e.g after a filter\n rowAutoSelected.current = true;\n if (typeof autoSelect === \"string\") {\n const dataRow = dataRowWindow.getByKey(autoSelect);\n if (dataRow) {\n selectRow(dataRow);\n } else {\n console.warn(\n `[useDataSource] autoSelect row key ${autoSelect} not in viewport`,\n );\n }\n } else if (dataRowWindow.hasData) {\n selectRow(dataRowWindow.firstRow);\n }\n }\n } else if (message.size === 0) {\n setData([]);\n } else if (typeof message.size === \"number\") {\n dataRows.current = dataRowWindow.data;\n hasUpdated.current = true;\n }\n } else if (message.type === \"viewport-clear\") {\n onSizeChange?.(0);\n dataRowWindow.setRowCount(0);\n setData([]);\n forceUpdate({});\n } else {\n console.log(`useDataSource unexpected message ${message.type}`);\n }\n },\n [\n autoSelect,\n createDataRow,\n dataRowWindow,\n onSizeChange,\n onSubscribed,\n selectRow,\n setData,\n ],\n );\n\n const getSelectedRows = useCallback(() => {\n return dataRowWindow.getSelectedRows();\n }, [dataRowWindow]);\n\n useEffect(() => {\n if (dataSource.status === \"disabled\") {\n dataSource.enable?.(datasourceMessageHandler);\n }\n }, [dataSource, datasourceMessageHandler]);\n\n useMemo(() => {\n setColumnsRef.current?.(dataSource.columns);\n }, [dataSource.columns]);\n\n const setRange = useCallback(\n (viewportRange: VuuRange) => {\n if (!rangeRef.current.equals(viewportRange)) {\n const range = Range(\n viewportRange.from,\n viewportRange.to,\n renderBufferSize,\n );\n\n dataRowWindow.setRange(range.withBuffer);\n\n if (\n dataSource.status !== \"subscribed\" &&\n dataSource.status !== \"subscribing\" &&\n dataSource.status !== \"enabling\"\n ) {\n dataSource?.subscribe(\n {\n range,\n revealSelected,\n selectedKeyValues: autoSelectRowKey\n ? [autoSelectRowKey]\n : undefined,\n },\n datasourceMessageHandler,\n );\n } else {\n dataSource.range = rangeRef.current = range;\n }\n }\n },\n [\n autoSelectRowKey,\n dataRowWindow,\n dataSource,\n datasourceMessageHandler,\n renderBufferSize,\n revealSelected,\n ],\n );\n\n useEffect(() => {\n if (dataSource.status !== \"initialising\") {\n const { columns, tableSchema } = dataSource;\n if (tableSchema) {\n createDataRow(columns, tableSchema.columns);\n } else {\n throw Error(\n `[useDataSource] a resumed dataSource must have a tableSchema`,\n );\n }\n dataSource.resume?.(datasourceMessageHandler);\n\n if (dataSource.range.from > 0) {\n // UI does not currently restore scroll position, so always reset to top of dataset\n const { from, to } = rangeRef.current.reset;\n setRange({ from, to });\n }\n }\n return () => {\n dataSource.suspend?.(\n suspenseProps?.escalateToDisable,\n suspenseProps?.escalateDelay,\n );\n };\n }, [\n createDataRow,\n dataSource,\n datasourceMessageHandler,\n setRange,\n suspenseProps,\n ]);\n\n return {\n dataRows: dataRows.current,\n dataRowsRef: dataRows,\n getSelectedRows,\n range: rangeRef.current,\n setRange,\n };\n};\n"],"names":["DataRow"],"mappings":"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"}
|
package/esm/table-dom-utils.js
CHANGED
|
@@ -20,9 +20,12 @@ const getLevelUp = (containerRef, cellPos) => {
|
|
|
20
20
|
}
|
|
21
21
|
return cellPos;
|
|
22
22
|
};
|
|
23
|
-
const
|
|
23
|
+
const getTableCellElement = (containerRef, [rowIdx, colIdx]) => {
|
|
24
24
|
const cssQuery = dataCellQuery(rowIdx, colIdx);
|
|
25
|
-
|
|
25
|
+
return containerRef.current?.querySelector(cssQuery);
|
|
26
|
+
};
|
|
27
|
+
const getTableCell = (containerRef, cellPos) => {
|
|
28
|
+
const cell = getTableCellElement(containerRef, cellPos);
|
|
26
29
|
if (cellIsEditable(cell)) {
|
|
27
30
|
const focusableContent = cell.querySelector(
|
|
28
31
|
`button,input[type="checkbox"]`
|
|
@@ -115,6 +118,25 @@ function getNextCellPos(key, [rowIdx, colIdx], columnCount, maxRowIndex) {
|
|
|
115
118
|
}
|
|
116
119
|
return [rowIdx, colIdx];
|
|
117
120
|
}
|
|
121
|
+
const getNextEditableCellPos = (containerRef, key, cellPos, columnCount, maxRowIndex) => {
|
|
122
|
+
let [lastRowIdx, lastColIdx] = cellPos;
|
|
123
|
+
do {
|
|
124
|
+
const [nextRowIdx, nextColIdx] = getNextCellPos(
|
|
125
|
+
key,
|
|
126
|
+
[lastRowIdx, lastColIdx],
|
|
127
|
+
columnCount,
|
|
128
|
+
maxRowIndex
|
|
129
|
+
);
|
|
130
|
+
if (nextRowIdx === lastRowIdx && nextColIdx === lastColIdx) {
|
|
131
|
+
return cellPos;
|
|
132
|
+
}
|
|
133
|
+
const cell = getTableCellElement(containerRef, [nextRowIdx, nextColIdx]);
|
|
134
|
+
if (cellIsEditable(cell)) {
|
|
135
|
+
return [nextRowIdx, nextColIdx];
|
|
136
|
+
}
|
|
137
|
+
[lastRowIdx, lastColIdx] = [nextRowIdx, nextColIdx];
|
|
138
|
+
} while (true);
|
|
139
|
+
};
|
|
118
140
|
const getTreeNodeOperation = (containerRef, navigationStyle, cellPos, key, shiftKey) => {
|
|
119
141
|
const cell = getTableCell(containerRef, cellPos);
|
|
120
142
|
if (navigationStyle === "cell" && !cellIsGroupCell(cell)) {
|
|
@@ -162,5 +184,5 @@ const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer =
|
|
|
162
184
|
}
|
|
163
185
|
};
|
|
164
186
|
|
|
165
|
-
export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getAriaCellPos, getFocusedCell, getHeaderCell, getLevelUp, getNextCellPos, getRowElementByAriaIndex, getTableCell, getTreeNodeOperation, headerCellQuery, howFarIsRowOutsideViewport };
|
|
187
|
+
export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getAriaCellPos, getFocusedCell, getHeaderCell, getLevelUp, getNextCellPos, getNextEditableCellPos, getRowElementByAriaIndex, getTableCell, getTableCellElement, getTreeNodeOperation, headerCellQuery, howFarIsRowOutsideViewport };
|
|
166
188
|
//# sourceMappingURL=table-dom-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-dom-utils.js","sources":["../../../packages/vuu-table/src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport {\n getAriaColIndex,\n getAriaRowIndex,\n type ArrowKey,\n type PageKey,\n} from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n containerRef: RefObject<HTMLElement | null>,\n cellPos: CellPos,\n): CellPos => {\n const cell = getTableCell(containerRef, cellPos);\n let row = cell?.parentElement;\n const level = parseInt(row?.ariaLevel ?? \"1\");\n if (level > 1) {\n const targetLevel = `${level - 1}`;\n while (row !== null && row.ariaLevel !== targetLevel) {\n row = row.previousElementSibling as HTMLElement;\n }\n if (row) {\n const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n if (nextRowIndex !== -1) {\n return [nextRowIndex, 1];\n }\n }\n }\n return cellPos;\n};\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement | null>,\n [rowIdx, colIdx]: CellPos,\n) => {\n const cssQuery = dataCellQuery(rowIdx, colIdx);\n const cell = containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n\n if (cellIsEditable(cell)) {\n // Dropdown gets focus, Input does not\n const focusableContent = cell.querySelector(\n `button,input[type=\"checkbox\"]`,\n ) as HTMLElement;\n return focusableContent || cell;\n } else {\n return cell;\n }\n};\n\nexport const getHeaderCell = (\n containerRef: RefObject<HTMLElement | null>,\n columnName: string,\n) =>\n containerRef.current?.querySelector(\n `.vuuTableHeaderCell[data-column-name=\"${columnName}\"]`,\n ) as HTMLDivElement | null;\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n return el as HTMLDivElement;\n } else {\n return el?.closest(\n \"[role='columnHeader'],[role='cell']\",\n ) as HTMLDivElement | null;\n }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n if (cellIsEditable(cell)) {\n return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n }\n return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n switch (cell.parentElement?.ariaExpanded) {\n case \"true\":\n return true;\n case \"false\":\n return false;\n default:\n return undefined;\n }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getRowElementByAriaIndex = (\n container: HTMLDivElement | EventTarget,\n rowIndex: number,\n) => {\n if (rowIndex === -1) {\n return null;\n } else {\n const activeRow = (container as HTMLElement).querySelector(\n `[aria-rowindex=\"${rowIndex}\"]`,\n ) as HTMLElement;\n\n if (activeRow) {\n return activeRow;\n } else {\n throw Error(\n `getRowElementAtIndex no row found for index index ${rowIndex}`,\n );\n }\n }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n key: ArrowKey,\n [rowIdx, colIdx]: CellPos,\n columnCount: number,\n maxRowIndex: number,\n): CellPos {\n if (key === \"ArrowUp\") {\n if (rowIdx > -1) {\n return [rowIdx - 1, colIdx];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowDown\") {\n if (rowIdx === -1) {\n return [1, colIdx];\n } else if (rowIdx === maxRowIndex) {\n return [rowIdx, colIdx];\n } else {\n return [rowIdx + 1, colIdx];\n }\n } else if (key === \"ArrowRight\") {\n if (colIdx < columnCount) {\n return [rowIdx, colIdx + 1];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowLeft\") {\n if (colIdx > 1) {\n return [rowIdx, colIdx - 1];\n } else {\n return [rowIdx, colIdx];\n }\n }\n return [rowIdx, colIdx];\n}\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n containerRef: RefObject<HTMLElement | null>,\n navigationStyle: \"cell\" | \"tree\",\n cellPos: CellPos,\n key: NavigationKey,\n shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n const cell = getTableCell(containerRef, cellPos);\n if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n return undefined;\n }\n if (navigationStyle == \"cell\" && !shiftKey) {\n return undefined;\n }\n if (cellIsGroupCell(cell)) {\n const isExpanded = rowIsExpanded(cell);\n if (isExpanded === true) {\n if (key === \"ArrowLeft\") {\n return \"collapse\";\n }\n } else if (isExpanded === false) {\n if (key === \"ArrowRight\") {\n return \"expand\";\n } else if (key === \"ArrowLeft\") {\n return \"level-up\";\n }\n } else if (key === \"ArrowLeft\") {\n return \"level-up\";\n }\n }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n rowEl: HTMLElement,\n totalHeaderHeight: number,\n contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n //TODO lots of scope for optimisation here\n if (contentContainer) {\n // TODO take totalHeaderHeight into consideration\n const viewport = contentContainer?.getBoundingClientRect();\n const upperBoundary = viewport.top + totalHeaderHeight;\n const row = rowEl.getBoundingClientRect();\n if (row) {\n if (row.bottom > viewport.bottom) {\n return [\"down\", row.bottom - viewport.bottom];\n } else if (row.top < upperBoundary) {\n return [\"up\", row.top - upperBoundary];\n } else {\n return NO_SCROLL_NECESSARY;\n }\n } else {\n throw Error(\"Whats going on, row not found\");\n }\n } else {\n throw Error(\"Whats going on, scrollbar container not found\");\n }\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table-dom-utils.js","sources":["../../../packages/vuu-table/src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport {\n getAriaColIndex,\n getAriaRowIndex,\n type ArrowKey,\n type PageKey,\n} from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n containerRef: RefObject<HTMLElement | null>,\n cellPos: CellPos,\n): CellPos => {\n const cell = getTableCell(containerRef, cellPos);\n let row = cell?.parentElement;\n const level = parseInt(row?.ariaLevel ?? \"1\");\n if (level > 1) {\n const targetLevel = `${level - 1}`;\n while (row !== null && row.ariaLevel !== targetLevel) {\n row = row.previousElementSibling as HTMLElement;\n }\n if (row) {\n const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n if (nextRowIndex !== -1) {\n return [nextRowIndex, 1];\n }\n }\n }\n return cellPos;\n};\n\nexport const getTableCellElement = (\n containerRef: RefObject<HTMLElement | null>,\n [rowIdx, colIdx]: CellPos,\n) => {\n const cssQuery = dataCellQuery(rowIdx, colIdx);\n return containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n};\n\nexport const getTableCell = (\n containerRef: RefObject<HTMLElement | null>,\n cellPos: CellPos,\n) => {\n const cell = getTableCellElement(containerRef, cellPos);\n\n if (cellIsEditable(cell)) {\n // Dropdown gets focus, Input does not\n const focusableContent = cell.querySelector(\n `button,input[type=\"checkbox\"]`,\n ) as HTMLElement;\n return focusableContent || cell;\n } else {\n return cell;\n }\n};\n\nexport const getHeaderCell = (\n containerRef: RefObject<HTMLElement | null>,\n columnName: string,\n) =>\n containerRef.current?.querySelector(\n `.vuuTableHeaderCell[data-column-name=\"${columnName}\"]`,\n ) as HTMLDivElement | null;\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n return el as HTMLDivElement;\n } else {\n return el?.closest(\n \"[role='columnHeader'],[role='cell']\",\n ) as HTMLDivElement | null;\n }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n if (cellIsEditable(cell)) {\n return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n }\n return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n switch (cell.parentElement?.ariaExpanded) {\n case \"true\":\n return true;\n case \"false\":\n return false;\n default:\n return undefined;\n }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getRowElementByAriaIndex = (\n container: HTMLDivElement | EventTarget,\n rowIndex: number,\n) => {\n if (rowIndex === -1) {\n return null;\n } else {\n const activeRow = (container as HTMLElement).querySelector(\n `[aria-rowindex=\"${rowIndex}\"]`,\n ) as HTMLElement;\n\n if (activeRow) {\n return activeRow;\n } else {\n throw Error(\n `getRowElementAtIndex no row found for index index ${rowIndex}`,\n );\n }\n }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n key: ArrowKey,\n [rowIdx, colIdx]: CellPos,\n columnCount: number,\n maxRowIndex: number,\n): CellPos {\n if (key === \"ArrowUp\") {\n if (rowIdx > -1) {\n return [rowIdx - 1, colIdx];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowDown\") {\n if (rowIdx === -1) {\n return [1, colIdx];\n } else if (rowIdx === maxRowIndex) {\n return [rowIdx, colIdx];\n } else {\n return [rowIdx + 1, colIdx];\n }\n } else if (key === \"ArrowRight\") {\n if (colIdx < columnCount) {\n return [rowIdx, colIdx + 1];\n } else {\n return [rowIdx, colIdx];\n }\n } else if (key === \"ArrowLeft\") {\n if (colIdx > 1) {\n return [rowIdx, colIdx - 1];\n } else {\n return [rowIdx, colIdx];\n }\n }\n return [rowIdx, colIdx];\n}\n\nexport const getNextEditableCellPos = (\n containerRef: RefObject<HTMLElement | null>,\n key: ArrowKey,\n cellPos: CellPos,\n columnCount: number,\n maxRowIndex: number,\n) => {\n let [lastRowIdx, lastColIdx] = cellPos;\n do {\n const [nextRowIdx, nextColIdx] = getNextCellPos(\n key,\n [lastRowIdx, lastColIdx],\n columnCount,\n maxRowIndex,\n );\n if (nextRowIdx === lastRowIdx && nextColIdx === lastColIdx) {\n // we have not moved, we never found a new editable cell, bail\n return cellPos;\n }\n\n const cell = getTableCellElement(containerRef, [nextRowIdx, nextColIdx]);\n if (cellIsEditable(cell)) {\n return [nextRowIdx, nextColIdx];\n }\n // keep going\n [lastRowIdx, lastColIdx] = [nextRowIdx, nextColIdx];\n // eslint-disable-next-line no-constant-condition\n } while (true);\n};\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n containerRef: RefObject<HTMLElement | null>,\n navigationStyle: \"cell\" | \"tree\",\n cellPos: CellPos,\n key: NavigationKey,\n shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n const cell = getTableCell(containerRef, cellPos);\n if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n return undefined;\n }\n if (navigationStyle == \"cell\" && !shiftKey) {\n return undefined;\n }\n if (cellIsGroupCell(cell)) {\n const isExpanded = rowIsExpanded(cell);\n if (isExpanded === true) {\n if (key === \"ArrowLeft\") {\n return \"collapse\";\n }\n } else if (isExpanded === false) {\n if (key === \"ArrowRight\") {\n return \"expand\";\n } else if (key === \"ArrowLeft\") {\n return \"level-up\";\n }\n } else if (key === \"ArrowLeft\") {\n return \"level-up\";\n }\n }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n rowEl: HTMLElement,\n totalHeaderHeight: number,\n contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n //TODO lots of scope for optimisation here\n if (contentContainer) {\n // TODO take totalHeaderHeight into consideration\n const viewport = contentContainer?.getBoundingClientRect();\n const upperBoundary = viewport.top + totalHeaderHeight;\n const row = rowEl.getBoundingClientRect();\n if (row) {\n if (row.bottom > viewport.bottom) {\n return [\"down\", row.bottom - viewport.bottom];\n } else if (row.top < upperBoundary) {\n return [\"up\", row.top - upperBoundary];\n } else {\n return NO_SCROLL_NECESSARY;\n }\n } else {\n throw Error(\"Whats going on, row not found\");\n }\n } else {\n throw Error(\"Whats going on, scrollbar container not found\");\n }\n};\n"],"names":[],"mappings":"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"}
|
package/esm/useCell.js
CHANGED
|
@@ -2,7 +2,7 @@ import { getColumnStyle } from '@vuu-ui/vuu-utils';
|
|
|
2
2
|
import cx from 'clsx';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
|
|
5
|
-
const useCell = (column, classBase, isHeader
|
|
5
|
+
const useCell = (column, classBase, isHeader) => (
|
|
6
6
|
// TODO measure perf without the memo, might not be worth the cost
|
|
7
7
|
useMemo(() => {
|
|
8
8
|
const className = cx(classBase, column.className, {
|
|
@@ -10,15 +10,14 @@ const useCell = (column, classBase, isHeader, hasError) => (
|
|
|
10
10
|
vuuPinRight: column.pin === "right",
|
|
11
11
|
vuuEndPin: isHeader && column.pinnedWidth,
|
|
12
12
|
[`${classBase}-editable`]: column.editable,
|
|
13
|
-
[`${classBase}-right`]: column.align === "right"
|
|
14
|
-
[`${classBase}-error`]: hasError
|
|
13
|
+
[`${classBase}-right`]: column.align === "right"
|
|
15
14
|
});
|
|
16
15
|
const style = getColumnStyle(column);
|
|
17
16
|
return {
|
|
18
17
|
className,
|
|
19
18
|
style
|
|
20
19
|
};
|
|
21
|
-
}, [classBase, column, isHeader
|
|
20
|
+
}, [classBase, column, isHeader])
|
|
22
21
|
);
|
|
23
22
|
|
|
24
23
|
export { useCell };
|
package/esm/useCell.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n column: RuntimeColumnDescriptor,\n classBase: string,\n isHeader?: boolean,\n
|
|
1
|
+
{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n column: RuntimeColumnDescriptor,\n classBase: string,\n isHeader?: boolean,\n) =>\n // TODO measure perf without the memo, might not be worth the cost\n useMemo(() => {\n const className = cx(classBase, column.className, {\n vuuPinLeft: column.pin === \"left\",\n vuuPinRight: column.pin === \"right\",\n vuuEndPin: isHeader && column.pinnedWidth,\n [`${classBase}-editable`]: column.editable,\n [`${classBase}-right`]: column.align === \"right\",\n });\n\n const style = getColumnStyle(column);\n return {\n className,\n style,\n };\n }, [classBase, column, isHeader]);\n"],"names":[],"mappings":";;;;AAKa,MAAA,OAAA,GAAU,CACrB,MAAA,EACA,SACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,WAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA;AAAA,KAC1C,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,eAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,QAAQ,CAAC;AAAA;;;;"}
|