@servicetitan/table 22.0.1 → 22.1.0
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/CHANGELOG.md +16 -0
- package/package.json +6 -6
- package/src/select-cell/select-cell.tsx +44 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
# v22.1.0 (Mon Jun 27 2022)
|
|
2
|
+
|
|
3
|
+
:tada: This release contains work from a new contributor! :tada:
|
|
4
|
+
|
|
5
|
+
Thank you, Anton Maksimenko ([@AntonMaksimenko](https://github.com/AntonMaksimenko)), for all your work!
|
|
6
|
+
|
|
7
|
+
#### 🚀 Enhancement
|
|
8
|
+
|
|
9
|
+
- Table: allow user to select table row by clicking on any spot within cell with selection [#113](https://github.com/servicetitan/anvil-uikit-contrib/pull/113) ([@AntonMaksimenko](https://github.com/AntonMaksimenko))
|
|
10
|
+
|
|
11
|
+
#### Authors: 1
|
|
12
|
+
|
|
13
|
+
- Anton Maksimenko ([@AntonMaksimenko](https://github.com/AntonMaksimenko))
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
1
17
|
# v22.0.1 (Tue Jun 21 2022)
|
|
2
18
|
|
|
3
19
|
#### 🐛 Bug Fix
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/table",
|
|
3
|
-
"version": "22.0
|
|
3
|
+
"version": "22.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"homepage": "https://docs.st.dev/docs/frontend/table",
|
|
6
6
|
"repository": {
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
"memoize-one": "~6.0.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@servicetitan/data-query": "^22.0
|
|
39
|
+
"@servicetitan/data-query": "^22.1.0",
|
|
40
40
|
"@servicetitan/design-system": "~11.8.0",
|
|
41
|
-
"@servicetitan/form": "^22.0
|
|
41
|
+
"@servicetitan/form": "^22.1.0",
|
|
42
42
|
"@servicetitan/react-ioc": "^21.6.0",
|
|
43
43
|
"@servicetitan/suppress-warnings": "^21.6.0",
|
|
44
44
|
"@types/accounting": "~0.4.2",
|
|
@@ -52,9 +52,9 @@
|
|
|
52
52
|
"react": "~17.0.2"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
|
-
"@servicetitan/data-query": "^22.0
|
|
55
|
+
"@servicetitan/data-query": "^22.1.0",
|
|
56
56
|
"@servicetitan/design-system": "~11.8.0",
|
|
57
|
-
"@servicetitan/form": "^22.0
|
|
57
|
+
"@servicetitan/form": "^22.1.0",
|
|
58
58
|
"@servicetitan/react-ioc": "^20.0.0",
|
|
59
59
|
"@servicetitan/suppress-warnings": "^20.0.0",
|
|
60
60
|
"accounting": "~0.4.1",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"cli": {
|
|
72
72
|
"webpack": false
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "334ce0dc18294927da0751130f290c203c64d266"
|
|
75
75
|
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { ComponentType, SyntheticEvent, FC } from 'react';
|
|
1
|
+
import { ComponentType, SyntheticEvent, FC, useCallback } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
TableCellProps,
|
|
4
4
|
TableHeaderCellProps,
|
|
5
5
|
Checkbox,
|
|
6
6
|
CheckboxProps,
|
|
7
7
|
} from '@servicetitan/design-system';
|
|
8
|
+
import classNames from 'classnames';
|
|
8
9
|
import * as Styles from './select-cell.module.css';
|
|
9
10
|
|
|
10
11
|
export type SelectionControlType = ComponentType<CheckboxProps<never>>;
|
|
@@ -32,33 +33,60 @@ export const SelectCell: FC<SelectCellProps> = ({
|
|
|
32
33
|
control: Control = Checkbox,
|
|
33
34
|
...props
|
|
34
35
|
}: SelectCellProps) => {
|
|
35
|
-
const onChange = (
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
const onChange = useCallback(
|
|
37
|
+
(_0: never, _1: boolean, event: SyntheticEvent<HTMLInputElement>) => {
|
|
38
|
+
if (!selectionChange) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
selectionChange({ syntheticEvent: event });
|
|
42
|
+
},
|
|
43
|
+
[selectionChange]
|
|
44
|
+
);
|
|
41
45
|
|
|
42
46
|
return <Control className={Styles.checkbox} onChange={onChange} {...props} />;
|
|
43
47
|
};
|
|
44
48
|
|
|
45
|
-
export const SelectColumnCell: FC<SelectColumnCellProps> = (
|
|
46
|
-
|
|
49
|
+
export const SelectColumnCell: FC<SelectColumnCellProps> = ({
|
|
50
|
+
style,
|
|
51
|
+
rowType,
|
|
52
|
+
dataItem,
|
|
53
|
+
control,
|
|
54
|
+
isRowSelectable,
|
|
55
|
+
selectionChange,
|
|
56
|
+
className,
|
|
57
|
+
}: SelectColumnCellProps) => {
|
|
58
|
+
const onSelectionChange = useCallback(
|
|
59
|
+
(event: SyntheticEvent<HTMLTableCellElement>) => {
|
|
60
|
+
if (isRowSelectable && selectionChange) {
|
|
61
|
+
selectionChange({ syntheticEvent: event });
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
[selectionChange, isRowSelectable]
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
if (rowType === 'groupHeader') {
|
|
47
68
|
return null;
|
|
48
69
|
}
|
|
49
70
|
|
|
50
|
-
if (
|
|
71
|
+
if (rowType === 'groupFooter') {
|
|
51
72
|
return <td />;
|
|
52
73
|
}
|
|
53
74
|
|
|
54
75
|
return (
|
|
55
|
-
<td
|
|
76
|
+
<td
|
|
77
|
+
style={style}
|
|
78
|
+
className={classNames(
|
|
79
|
+
isRowSelectable && selectionChange && 'cursor-pointer',
|
|
80
|
+
className
|
|
81
|
+
)}
|
|
82
|
+
onClick={onSelectionChange}
|
|
83
|
+
>
|
|
56
84
|
<SelectCell
|
|
57
|
-
checked={
|
|
58
|
-
disabled={!
|
|
59
|
-
selectionChange={
|
|
60
|
-
indeterminate={
|
|
61
|
-
control={
|
|
85
|
+
checked={dataItem.selected}
|
|
86
|
+
disabled={!isRowSelectable}
|
|
87
|
+
selectionChange={selectionChange}
|
|
88
|
+
indeterminate={dataItem.indeterminate}
|
|
89
|
+
control={control}
|
|
62
90
|
/>
|
|
63
91
|
</td>
|
|
64
92
|
);
|