@salt-ds/data-grid 1.0.4-alpha.3 → 1.0.4-alpha.5
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/dist-cjs/DropdownCellEditor.js +8 -2
- package/dist-cjs/DropdownCellEditor.js.map +1 -1
- package/dist-cjs/internal/TableBody.js +1 -1
- package/dist-cjs/internal/TableBody.js.map +1 -1
- package/dist-es/DropdownCellEditor.js +8 -2
- package/dist-es/DropdownCellEditor.js.map +1 -1
- package/dist-es/internal/TableBody.js +1 -1
- package/dist-es/internal/TableBody.js.map +1 -1
- package/package.json +12 -11
|
@@ -46,6 +46,11 @@ function DropdownCellEditor(props) {
|
|
|
46
46
|
endEditMode(item);
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
const onSelect = (event, item) => {
|
|
50
|
+
if (item) {
|
|
51
|
+
endEditMode(item);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
49
54
|
react.useEffect(() => {
|
|
50
55
|
if (triggerRef.current) {
|
|
51
56
|
triggerRef.current.focus();
|
|
@@ -64,14 +69,15 @@ function DropdownCellEditor(props) {
|
|
|
64
69
|
children: [
|
|
65
70
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
66
71
|
className: withBaseName("dropdownContainer"),
|
|
67
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(lab.Dropdown, {
|
|
72
|
+
children: options && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(lab.Dropdown, {
|
|
68
73
|
isOpen: true,
|
|
69
74
|
source: options,
|
|
70
75
|
defaultSelected: value,
|
|
71
76
|
onSelectionChange,
|
|
77
|
+
onSelect,
|
|
72
78
|
triggerComponent,
|
|
73
79
|
width: column.info.width - 5
|
|
74
|
-
})
|
|
80
|
+
}) : triggerComponent
|
|
75
81
|
}),
|
|
76
82
|
/* @__PURE__ */ jsxRuntime.jsx(CornerTag.CornerTag, {})
|
|
77
83
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectionChangeHandler } from \"@salt-ds/lab\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n options: ReadonlyArray<string>;\n // Row and column are provided by the grid. See TableRow.tsx\n row?: GridRowModel<T>;\n column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n const { options, column, row } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-cell-editor\",\n css: dropdownCellEditorCss,\n window: targetWindow,\n });\n\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const value = column!.info.props.getValue!(row!.data);\n\n const { endEditMode } = useEditorContext();\n\n const onSelectionChange: SelectionChangeHandler = (event, item) => {\n if (item) {\n endEditMode(item);\n }\n };\n\n useEffect(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, [triggerRef.current]);\n\n const triggerComponent = (\n <div\n tabIndex={0}\n ref={triggerRef}\n className={withBaseName(\"currentValue\")}\n data-testid=\"grid-cell-editor-trigger\"\n >\n {value}\n </div>\n );\n\n return (\n <Cell separator={column?.separator} className={withBaseName()}>\n <div className={withBaseName(\"dropdownContainer\")}>\n <Dropdown\n
|
|
1
|
+
{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectionChangeHandler, SelectHandler } from \"@salt-ds/lab\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n options: ReadonlyArray<string>;\n // Row and column are provided by the grid. See TableRow.tsx\n row?: GridRowModel<T>;\n column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n const { options, column, row } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-cell-editor\",\n css: dropdownCellEditorCss,\n window: targetWindow,\n });\n\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const value = column!.info.props.getValue!(row!.data);\n\n const { endEditMode } = useEditorContext();\n\n const onSelectionChange: SelectionChangeHandler = (event, item) => {\n if (item) {\n endEditMode(item);\n }\n };\n\n const onSelect: SelectHandler = (event, item) => {\n if (item) {\n endEditMode(item);\n }\n };\n\n useEffect(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, [triggerRef.current]);\n\n const triggerComponent = (\n <div\n tabIndex={0}\n ref={triggerRef}\n className={withBaseName(\"currentValue\")}\n data-testid=\"grid-cell-editor-trigger\"\n >\n {value}\n </div>\n );\n\n return (\n <Cell separator={column?.separator} className={withBaseName()}>\n <div className={withBaseName(\"dropdownContainer\")}>\n {options && options.length > 0 ? (\n <Dropdown\n isOpen={true}\n source={options}\n defaultSelected={value}\n onSelectionChange={onSelectionChange}\n onSelect={onSelect}\n triggerComponent={triggerComponent}\n width={column!.info.width! - 5}\n />\n ) : (\n triggerComponent\n )}\n </div>\n <CornerTag />\n </Cell>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","dropdownCellEditorCss","useRef","useEditorContext","useEffect","jsx","jsxs","Cell","Dropdown","CornerTag"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,4BAA4B,CAAA,CAAA;AASvD,SAAS,mBAAsB,KAAmC,EAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAC,oBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,QAAQ,MAAQ,CAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAU,IAAK,IAAI,CAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEzC,EAAM,MAAA,iBAAA,GAA4C,CAAC,KAAA,EAAO,IAAS,KAAA;AACjE,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAA0B,CAAC,KAAA,EAAO,IAAS,KAAA;AAC/C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,UAAA,CAAW,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,UAAW,CAAA,OAAO,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,mCACHC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,GAAK,EAAA,UAAA;AAAA,IACL,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,IACtC,aAAY,EAAA,0BAAA;AAAA,IAEX,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAGF,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,WAAW,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,SAAA;AAAA,IAAW,WAAW,YAAa,EAAA;AAAA,IAC1D,QAAA,EAAA;AAAA,sBAACF,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,QAC7C,QAAW,EAAA,OAAA,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,mBAC1BA,cAAA,CAAAG,YAAA,EAAA;AAAA,UACC,MAAQ,EAAA,IAAA;AAAA,UACR,MAAQ,EAAA,OAAA;AAAA,UACR,eAAiB,EAAA,KAAA;AAAA,UACjB,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA,EAAO,MAAQ,CAAA,IAAA,CAAK,KAAS,GAAA,CAAA;AAAA,SAC/B,CAEA,GAAA,gBAAA;AAAA,OAEJ,CAAA;AAAA,qCACCC,mBAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -38,7 +38,7 @@ function TableBody(props) {
|
|
|
38
38
|
const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } = CursorContext.useCursorContext();
|
|
39
39
|
const { editMode, startEditMode } = EditorContext.useEditorContext();
|
|
40
40
|
const onRowMouseEnter = (event) => {
|
|
41
|
-
const target = event.
|
|
41
|
+
const target = event.currentTarget;
|
|
42
42
|
const rowKey = utils.getRowKeyAttribute(target);
|
|
43
43
|
setHoverRowKey(rowKey);
|
|
44
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","sources":["../src/internal/TableBody.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useMemo } from \"react\";\nimport { TableRow } from \"./TableRow\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { getRowKeyAttribute } from \"./utils\";\nimport { useSelectionContext } from \"../SelectionContext\";\nimport { useEditorContext } from \"../EditorContext\";\nimport { useCursorContext } from \"../CursorContext\";\nimport { CellValidationState } from \"../GridColumn\";\n\nexport interface TableBodyProps<T> {\n columns: GridColumnModel<T>[];\n rows: GridRowModel<T>[];\n hoverRowKey?: string;\n setHoverRowKey: (key: string | undefined) => void;\n gap?: number;\n zebra?: boolean;\n getRowValidationStatus?: (\n row: GridRowModel<T>\n ) => CellValidationState | undefined;\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n const {\n columns,\n rows,\n hoverRowKey,\n setHoverRowKey,\n gap,\n zebra,\n getRowValidationStatus,\n } = props;\n const { selRowIdxs, selectedCellRange } = useSelectionContext();\n\n const isCellInSelectedRange = useCallback(\n (rowIdx: number, colIdx: number) => {\n if (!selectedCellRange) {\n return false;\n }\n const { start, end } = selectedCellRange;\n const minRowIdx = Math.min(start.rowIdx, end.rowIdx);\n const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);\n const minColIdx = Math.min(start.colIdx, end.colIdx);\n const maxColIdx = Math.max(start.colIdx, end.colIdx);\n return (\n rowIdx >= minRowIdx &&\n rowIdx <= maxRowIdx &&\n colIdx >= minColIdx &&\n colIdx <= maxColIdx\n );\n },\n [selectedCellRange]\n );\n\n const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } =\n useCursorContext();\n\n const { editMode, startEditMode } = useEditorContext();\n\n const onRowMouseEnter: MouseEventHandler<HTMLTableRowElement> = (event) => {\n const target = event.
|
|
1
|
+
{"version":3,"file":"TableBody.js","sources":["../src/internal/TableBody.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useMemo } from \"react\";\nimport { TableRow } from \"./TableRow\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { getRowKeyAttribute } from \"./utils\";\nimport { useSelectionContext } from \"../SelectionContext\";\nimport { useEditorContext } from \"../EditorContext\";\nimport { useCursorContext } from \"../CursorContext\";\nimport { CellValidationState } from \"../GridColumn\";\n\nexport interface TableBodyProps<T> {\n columns: GridColumnModel<T>[];\n rows: GridRowModel<T>[];\n hoverRowKey?: string;\n setHoverRowKey: (key: string | undefined) => void;\n gap?: number;\n zebra?: boolean;\n getRowValidationStatus?: (\n row: GridRowModel<T>\n ) => CellValidationState | undefined;\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n const {\n columns,\n rows,\n hoverRowKey,\n setHoverRowKey,\n gap,\n zebra,\n getRowValidationStatus,\n } = props;\n const { selRowIdxs, selectedCellRange } = useSelectionContext();\n\n const isCellInSelectedRange = useCallback(\n (rowIdx: number, colIdx: number) => {\n if (!selectedCellRange) {\n return false;\n }\n const { start, end } = selectedCellRange;\n const minRowIdx = Math.min(start.rowIdx, end.rowIdx);\n const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);\n const minColIdx = Math.min(start.colIdx, end.colIdx);\n const maxColIdx = Math.max(start.colIdx, end.colIdx);\n return (\n rowIdx >= minRowIdx &&\n rowIdx <= maxRowIdx &&\n colIdx >= minColIdx &&\n colIdx <= maxColIdx\n );\n },\n [selectedCellRange]\n );\n\n const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } =\n useCursorContext();\n\n const { editMode, startEditMode } = useEditorContext();\n\n const onRowMouseEnter: MouseEventHandler<HTMLTableRowElement> = (event) => {\n const target = event.currentTarget as HTMLElement;\n const rowKey = getRowKeyAttribute(target);\n setHoverRowKey(rowKey);\n };\n\n const onMouseLeave: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n setHoverRowKey(undefined);\n };\n\n const onDoubleClick: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n startEditMode();\n };\n\n return (\n <tbody onMouseLeave={onMouseLeave} onDoubleClick={onDoubleClick}>\n {rows.map((row) => {\n const isSelected = selRowIdxs.has(row.index);\n const cursorIdx =\n focusedPart === \"body\" && cursorRowIdx === row.index\n ? cursorColIdx\n : undefined;\n const editorColIdx = editMode ? cursorIdx : undefined;\n return (\n <TableRow\n key={row.key}\n row={row}\n onMouseEnter={onRowMouseEnter}\n columns={columns}\n isHoverOver={row.key === hoverRowKey}\n isSelected={isSelected}\n cursorColIdx={cursorIdx}\n gap={gap}\n zebra={zebra && row.index % 2 == 0}\n editorColIdx={editorColIdx}\n isCellSelected={isCellInSelectedRange}\n headerIsFocusable={headerIsFocusable}\n validationStatus={\n getRowValidationStatus ? getRowValidationStatus(row) : undefined\n }\n />\n );\n })}\n </tbody>\n );\n}\n"],"names":["useSelectionContext","useCallback","useCursorContext","useEditorContext","getRowKeyAttribute","jsx","TableRow"],"mappings":"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"}
|
|
@@ -42,6 +42,11 @@ function DropdownCellEditor(props) {
|
|
|
42
42
|
endEditMode(item);
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
+
const onSelect = (event, item) => {
|
|
46
|
+
if (item) {
|
|
47
|
+
endEditMode(item);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
45
50
|
useEffect(() => {
|
|
46
51
|
if (triggerRef.current) {
|
|
47
52
|
triggerRef.current.focus();
|
|
@@ -60,14 +65,15 @@ function DropdownCellEditor(props) {
|
|
|
60
65
|
children: [
|
|
61
66
|
/* @__PURE__ */ jsx("div", {
|
|
62
67
|
className: withBaseName("dropdownContainer"),
|
|
63
|
-
children: /* @__PURE__ */ jsx(Dropdown, {
|
|
68
|
+
children: options && options.length > 0 ? /* @__PURE__ */ jsx(Dropdown, {
|
|
64
69
|
isOpen: true,
|
|
65
70
|
source: options,
|
|
66
71
|
defaultSelected: value,
|
|
67
72
|
onSelectionChange,
|
|
73
|
+
onSelect,
|
|
68
74
|
triggerComponent,
|
|
69
75
|
width: column.info.width - 5
|
|
70
|
-
})
|
|
76
|
+
}) : triggerComponent
|
|
71
77
|
}),
|
|
72
78
|
/* @__PURE__ */ jsx(CornerTag, {})
|
|
73
79
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectionChangeHandler } from \"@salt-ds/lab\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n options: ReadonlyArray<string>;\n // Row and column are provided by the grid. See TableRow.tsx\n row?: GridRowModel<T>;\n column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n const { options, column, row } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-cell-editor\",\n css: dropdownCellEditorCss,\n window: targetWindow,\n });\n\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const value = column!.info.props.getValue!(row!.data);\n\n const { endEditMode } = useEditorContext();\n\n const onSelectionChange: SelectionChangeHandler = (event, item) => {\n if (item) {\n endEditMode(item);\n }\n };\n\n useEffect(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, [triggerRef.current]);\n\n const triggerComponent = (\n <div\n tabIndex={0}\n ref={triggerRef}\n className={withBaseName(\"currentValue\")}\n data-testid=\"grid-cell-editor-trigger\"\n >\n {value}\n </div>\n );\n\n return (\n <Cell separator={column?.separator} className={withBaseName()}>\n <div className={withBaseName(\"dropdownContainer\")}>\n <Dropdown\n
|
|
1
|
+
{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectionChangeHandler, SelectHandler } from \"@salt-ds/lab\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n options: ReadonlyArray<string>;\n // Row and column are provided by the grid. See TableRow.tsx\n row?: GridRowModel<T>;\n column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n const { options, column, row } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-cell-editor\",\n css: dropdownCellEditorCss,\n window: targetWindow,\n });\n\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const value = column!.info.props.getValue!(row!.data);\n\n const { endEditMode } = useEditorContext();\n\n const onSelectionChange: SelectionChangeHandler = (event, item) => {\n if (item) {\n endEditMode(item);\n }\n };\n\n const onSelect: SelectHandler = (event, item) => {\n if (item) {\n endEditMode(item);\n }\n };\n\n useEffect(() => {\n if (triggerRef.current) {\n triggerRef.current.focus();\n }\n }, [triggerRef.current]);\n\n const triggerComponent = (\n <div\n tabIndex={0}\n ref={triggerRef}\n className={withBaseName(\"currentValue\")}\n data-testid=\"grid-cell-editor-trigger\"\n >\n {value}\n </div>\n );\n\n return (\n <Cell separator={column?.separator} className={withBaseName()}>\n <div className={withBaseName(\"dropdownContainer\")}>\n {options && options.length > 0 ? (\n <Dropdown\n isOpen={true}\n source={options}\n defaultSelected={value}\n onSelectionChange={onSelectionChange}\n onSelect={onSelect}\n triggerComponent={triggerComponent}\n width={column!.info.width! - 5}\n />\n ) : (\n triggerComponent\n )}\n </div>\n <CornerTag />\n </Cell>\n );\n}\n"],"names":["dropdownCellEditorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,4BAA4B,CAAA,CAAA;AASvD,SAAS,mBAAsB,KAAmC,EAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,QAAQ,MAAQ,CAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAU,IAAK,IAAI,CAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEzC,EAAM,MAAA,iBAAA,GAA4C,CAAC,KAAA,EAAO,IAAS,KAAA;AACjE,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAA0B,CAAC,KAAA,EAAO,IAAS,KAAA;AAC/C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,UAAA,CAAW,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,UAAW,CAAA,OAAO,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,mCACH,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,GAAK,EAAA,UAAA;AAAA,IACL,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,IACtC,aAAY,EAAA,0BAAA;AAAA,IAEX,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAGF,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IAAK,WAAW,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,SAAA;AAAA,IAAW,WAAW,YAAa,EAAA;AAAA,IAC1D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,QAC7C,QAAW,EAAA,OAAA,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,mBAC1B,GAAA,CAAA,QAAA,EAAA;AAAA,UACC,MAAQ,EAAA,IAAA;AAAA,UACR,MAAQ,EAAA,OAAA;AAAA,UACR,eAAiB,EAAA,KAAA;AAAA,UACjB,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA,EAAO,MAAQ,CAAA,IAAA,CAAK,KAAS,GAAA,CAAA;AAAA,SAC/B,CAEA,GAAA,gBAAA;AAAA,OAEJ,CAAA;AAAA,0BACC,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -34,7 +34,7 @@ function TableBody(props) {
|
|
|
34
34
|
const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } = useCursorContext();
|
|
35
35
|
const { editMode, startEditMode } = useEditorContext();
|
|
36
36
|
const onRowMouseEnter = (event) => {
|
|
37
|
-
const target = event.
|
|
37
|
+
const target = event.currentTarget;
|
|
38
38
|
const rowKey = getRowKeyAttribute(target);
|
|
39
39
|
setHoverRowKey(rowKey);
|
|
40
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","sources":["../src/internal/TableBody.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useMemo } from \"react\";\nimport { TableRow } from \"./TableRow\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { getRowKeyAttribute } from \"./utils\";\nimport { useSelectionContext } from \"../SelectionContext\";\nimport { useEditorContext } from \"../EditorContext\";\nimport { useCursorContext } from \"../CursorContext\";\nimport { CellValidationState } from \"../GridColumn\";\n\nexport interface TableBodyProps<T> {\n columns: GridColumnModel<T>[];\n rows: GridRowModel<T>[];\n hoverRowKey?: string;\n setHoverRowKey: (key: string | undefined) => void;\n gap?: number;\n zebra?: boolean;\n getRowValidationStatus?: (\n row: GridRowModel<T>\n ) => CellValidationState | undefined;\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n const {\n columns,\n rows,\n hoverRowKey,\n setHoverRowKey,\n gap,\n zebra,\n getRowValidationStatus,\n } = props;\n const { selRowIdxs, selectedCellRange } = useSelectionContext();\n\n const isCellInSelectedRange = useCallback(\n (rowIdx: number, colIdx: number) => {\n if (!selectedCellRange) {\n return false;\n }\n const { start, end } = selectedCellRange;\n const minRowIdx = Math.min(start.rowIdx, end.rowIdx);\n const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);\n const minColIdx = Math.min(start.colIdx, end.colIdx);\n const maxColIdx = Math.max(start.colIdx, end.colIdx);\n return (\n rowIdx >= minRowIdx &&\n rowIdx <= maxRowIdx &&\n colIdx >= minColIdx &&\n colIdx <= maxColIdx\n );\n },\n [selectedCellRange]\n );\n\n const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } =\n useCursorContext();\n\n const { editMode, startEditMode } = useEditorContext();\n\n const onRowMouseEnter: MouseEventHandler<HTMLTableRowElement> = (event) => {\n const target = event.
|
|
1
|
+
{"version":3,"file":"TableBody.js","sources":["../src/internal/TableBody.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useMemo } from \"react\";\nimport { TableRow } from \"./TableRow\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { getRowKeyAttribute } from \"./utils\";\nimport { useSelectionContext } from \"../SelectionContext\";\nimport { useEditorContext } from \"../EditorContext\";\nimport { useCursorContext } from \"../CursorContext\";\nimport { CellValidationState } from \"../GridColumn\";\n\nexport interface TableBodyProps<T> {\n columns: GridColumnModel<T>[];\n rows: GridRowModel<T>[];\n hoverRowKey?: string;\n setHoverRowKey: (key: string | undefined) => void;\n gap?: number;\n zebra?: boolean;\n getRowValidationStatus?: (\n row: GridRowModel<T>\n ) => CellValidationState | undefined;\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n const {\n columns,\n rows,\n hoverRowKey,\n setHoverRowKey,\n gap,\n zebra,\n getRowValidationStatus,\n } = props;\n const { selRowIdxs, selectedCellRange } = useSelectionContext();\n\n const isCellInSelectedRange = useCallback(\n (rowIdx: number, colIdx: number) => {\n if (!selectedCellRange) {\n return false;\n }\n const { start, end } = selectedCellRange;\n const minRowIdx = Math.min(start.rowIdx, end.rowIdx);\n const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);\n const minColIdx = Math.min(start.colIdx, end.colIdx);\n const maxColIdx = Math.max(start.colIdx, end.colIdx);\n return (\n rowIdx >= minRowIdx &&\n rowIdx <= maxRowIdx &&\n colIdx >= minColIdx &&\n colIdx <= maxColIdx\n );\n },\n [selectedCellRange]\n );\n\n const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } =\n useCursorContext();\n\n const { editMode, startEditMode } = useEditorContext();\n\n const onRowMouseEnter: MouseEventHandler<HTMLTableRowElement> = (event) => {\n const target = event.currentTarget as HTMLElement;\n const rowKey = getRowKeyAttribute(target);\n setHoverRowKey(rowKey);\n };\n\n const onMouseLeave: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n setHoverRowKey(undefined);\n };\n\n const onDoubleClick: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n startEditMode();\n };\n\n return (\n <tbody onMouseLeave={onMouseLeave} onDoubleClick={onDoubleClick}>\n {rows.map((row) => {\n const isSelected = selRowIdxs.has(row.index);\n const cursorIdx =\n focusedPart === \"body\" && cursorRowIdx === row.index\n ? cursorColIdx\n : undefined;\n const editorColIdx = editMode ? cursorIdx : undefined;\n return (\n <TableRow\n key={row.key}\n row={row}\n onMouseEnter={onRowMouseEnter}\n columns={columns}\n isHoverOver={row.key === hoverRowKey}\n isSelected={isSelected}\n cursorColIdx={cursorIdx}\n gap={gap}\n zebra={zebra && row.index % 2 == 0}\n editorColIdx={editorColIdx}\n isCellSelected={isCellInSelectedRange}\n headerIsFocusable={headerIsFocusable}\n validationStatus={\n getRowValidationStatus ? getRowValidationStatus(row) : undefined\n }\n />\n );\n })}\n </tbody>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/data-grid",
|
|
3
|
-
"version": "1.0.4-alpha.
|
|
3
|
+
"version": "1.0.4-alpha.5",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "dist-cjs/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"peerDependencies": {
|
|
8
|
-
"@types/react": ">=16.
|
|
9
|
-
"react": ">=16.
|
|
10
|
-
"react-dom": ">=16.
|
|
8
|
+
"@types/react": ">=16.14.0",
|
|
9
|
+
"react": ">=16.14.0",
|
|
10
|
+
"react-dom": ">=16.14.0"
|
|
11
11
|
},
|
|
12
12
|
"peerDependenciesMeta": {
|
|
13
13
|
"@types/react": {
|
|
@@ -16,17 +16,18 @@
|
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"directory": "../../dist/salt-ds-data-grid",
|
|
19
|
-
"tag": "next"
|
|
19
|
+
"tag": "next",
|
|
20
|
+
"provenance": true
|
|
20
21
|
},
|
|
21
22
|
"module": "dist-es/index.js",
|
|
22
23
|
"typings": "dist-types/index.d.ts",
|
|
23
24
|
"dependencies": {
|
|
24
|
-
"clsx": "^
|
|
25
|
-
"@salt-ds/core": "^1.8.0-rc.
|
|
26
|
-
"@salt-ds/window": "^0.1.
|
|
27
|
-
"@salt-ds/styles": "^0.1.
|
|
28
|
-
"@salt-ds/icons": "^1.
|
|
29
|
-
"@salt-ds/lab": "^1.0.0-alpha.
|
|
25
|
+
"clsx": "^2.0.0",
|
|
26
|
+
"@salt-ds/core": "^1.8.0-rc.5",
|
|
27
|
+
"@salt-ds/window": "^0.1.1",
|
|
28
|
+
"@salt-ds/styles": "^0.1.1",
|
|
29
|
+
"@salt-ds/icons": "^1.5.1",
|
|
30
|
+
"@salt-ds/lab": "^1.0.0-alpha.14"
|
|
30
31
|
},
|
|
31
32
|
"files": [
|
|
32
33
|
"dist-cjs",
|