Skip to content

Commit 8ad9c9d

Browse files
rwieruchrwieruch
committed
fix(resize): handle highligting improved
1 parent eb0bbb0 commit 8ad9c9d

File tree

9 files changed

+69
-46
lines changed

9 files changed

+69
-46
lines changed

‎.storybook/preview.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export const parameters = {
4444
['Compact Table', 'Composed Table'],
4545
'Compact Table',
4646
['Base', ...Features],
47+
'Features',
48+
Features,
4749
'Theming',
4850
['Themes', 'CSS Class', 'Imperative Style'],
4951
'Library Themes',
@@ -55,8 +57,6 @@ export const parameters = {
5557
'Bootstrap (WIP)',
5658
'Ant Design (WIP)',
5759
],
58-
'Features',
59-
Features,
6060
'Composites',
6161
['Sort & Select', 'Tree & Select', 'Tree & Sort'],
6262
'Types',

‎.storybook/stories/Compact/resize.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Component = () => {
3232
renderCell: (item) => item.isComplete.toString(),
3333
resize: true,
3434
},
35-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length, resize: true },
35+
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
3636
];
3737

3838
return (
@@ -80,7 +80,7 @@ const Component = () => {
8080
renderCell: (item) => item.isComplete.toString(),
8181
resize: true,
8282
},
83-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length, resize: true },
83+
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
8484
];
8585
8686
return (

‎.storybook/stories/Features/resize.story.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ storiesOf('Features/Resize', module)
3838
<HeaderCell resize>Deadline</HeaderCell>
3939
<HeaderCell resize>Type</HeaderCell>
4040
<HeaderCell resize>Complete</HeaderCell>
41-
<HeaderCell resize>Tasks</HeaderCell>
41+
<HeaderCell>Tasks</HeaderCell>
4242
</HeaderRow>
4343
</Header>
4444

@@ -67,7 +67,7 @@ storiesOf('Features/Resize', module)
6767
.add('minWidth', () => {
6868
const data = { nodes };
6969

70-
const resize = { minWidth: 50 };
70+
const resize = { minWidth: 25 };
7171

7272
return (
7373
<Table data={data}>
@@ -79,7 +79,7 @@ storiesOf('Features/Resize', module)
7979
<HeaderCell resize={resize}>Deadline</HeaderCell>
8080
<HeaderCell resize={resize}>Type</HeaderCell>
8181
<HeaderCell resize={resize}>Complete</HeaderCell>
82-
<HeaderCell resize={resize}>Tasks</HeaderCell>
82+
<HeaderCell>Tasks</HeaderCell>
8383
</HeaderRow>
8484
</Header>
8585

@@ -105,10 +105,10 @@ storiesOf('Features/Resize', module)
105105
</Table>
106106
);
107107
})
108-
.add('resizerWidth', () => {
108+
.add('resizerHighlight', () => {
109109
const data = { nodes };
110110

111-
const resize = { resizerWidth: 30 };
111+
const resize = { resizerHighlight: '#dde2eb' };
112112

113113
return (
114114
<Table data={data}>
@@ -120,7 +120,7 @@ storiesOf('Features/Resize', module)
120120
<HeaderCell resize={resize}>Deadline</HeaderCell>
121121
<HeaderCell resize={resize}>Type</HeaderCell>
122122
<HeaderCell resize={resize}>Complete</HeaderCell>
123-
<HeaderCell resize={resize}>Tasks</HeaderCell>
123+
<HeaderCell>Tasks</HeaderCell>
124124
</HeaderRow>
125125
</Header>
126126

@@ -146,10 +146,10 @@ storiesOf('Features/Resize', module)
146146
</Table>
147147
);
148148
})
149-
.add('resizerHighlight', () => {
149+
.add('resizerWidth', () => {
150150
const data = { nodes };
151151

152-
const resize = { resizerHighlight: '#ff0000' };
152+
const resize = { resizerHighlight: '#dde2eb', resizerWidth: 25 };
153153

154154
return (
155155
<Table data={data}>
@@ -161,7 +161,7 @@ storiesOf('Features/Resize', module)
161161
<HeaderCell resize={resize}>Deadline</HeaderCell>
162162
<HeaderCell resize={resize}>Type</HeaderCell>
163163
<HeaderCell resize={resize}>Complete</HeaderCell>
164-
<HeaderCell resize={resize}>Tasks</HeaderCell>
164+
<HeaderCell>Tasks</HeaderCell>
165165
</HeaderRow>
166166
</Header>
167167

@@ -202,7 +202,7 @@ storiesOf('Features/Resize', module)
202202
<HeaderCell resize>Deadline</HeaderCell>
203203
<HeaderCell resize>Type</HeaderCell>
204204
<HeaderCell resize>Complete</HeaderCell>
205-
<HeaderCell resize>Tasks</HeaderCell>
205+
<HeaderCell>Tasks</HeaderCell>
206206
</HeaderRow>
207207
</Header>
208208

‎.storybook/stories/Misc/cell.story.js

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -141,28 +141,21 @@ storiesOf('Misc/Cell', module)
141141
{tableList.map((item, index) => (
142142
<Row key={item.id} item={item}>
143143
<Cell
144-
ariaColindex={1 + index * 5}
145144
tabIndex={1 + index * 5}
146145
onClick={(event) => console.log('Click Cell', event)}
147146
>
148147
{item.name}
149148
</Cell>
150-
<Cell ariaColindex={2 + index * 5} tabIndex={2 + index * 5}>
149+
<Cell tabIndex={2 + index * 5}>
151150
{item.deadline.toLocaleDateString('en-US', {
152151
year: 'numeric',
153152
month: '2-digit',
154153
day: '2-digit',
155154
})}
156155
</Cell>
157-
<Cell ariaColindex={3 + index * 5} tabIndex={3 + index * 5}>
158-
{item.type}
159-
</Cell>
160-
<Cell ariaColindex={4 + index * 5} tabIndex={4 + index * 5}>
161-
{item.isComplete.toString()}
162-
</Cell>
163-
<Cell ariaColindex={5 + index * 5} tabIndex={5 + index * 5}>
164-
{item.nodes?.length}
165-
</Cell>
156+
<Cell tabIndex={3 + index * 5}>{item.type}</Cell>
157+
<Cell tabIndex={4 + index * 5}>{item.isComplete.toString()}</Cell>
158+
<Cell tabIndex={5 + index * 5}>{item.nodes?.length}</Cell>
166159
</Row>
167160
))}
168161
</Body>

‎.storybook/stories/Theming/themes.story.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ const BASELINE_THEME = {
7777
font-weight: bold;
7878
border-bottom: 1px solid ${COLORS.BORDER};
7979
80+
.resizer-handle {
81+
background-color: ${COLORS.BORDER};
82+
}
83+
8084
svg,
8185
path {
8286
fill: currentColor;

‎src/baseline/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ const BASELINE_THEME = {
3535
font-weight: bold;
3636
border-bottom: 1px solid ${COLORS.BORDER};
3737
38+
.resizer-handle {
39+
background-color: ${COLORS.BORDER};
40+
}
41+
3842
svg,
3943
path {
4044
fill: currentColor;

‎src/resize/styles.ts

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,48 @@
11
/** @jsxRuntime classic */
22
/** @jsx jsx */
3-
import { css, jsx } from '@emotion/react';
3+
import { css, jsx, SerializedStyles } from '@emotion/react';
44

55
import { ColumnResizeProps } from '@table-library/react-table-library/types/resize';
66

7-
const resizerStyle = (resize: ColumnResizeProps) => {
7+
const resizerStyle = (
8+
resize: ColumnResizeProps,
9+
): { handle: SerializedStyles; area: SerializedStyles } => {
810
const width =
9-
typeof resize === 'boolean' || resize?.resizerWidth == null ? 3 : resize.resizerWidth;
11+
typeof resize === 'boolean' || resize?.resizerWidth == null ? 10 : resize.resizerWidth;
1012

1113
const highlight =
1214
typeof resize === 'boolean' || resize?.resizerHighlight == null
1315
? 'transparent'
1416
: resize.resizerHighlight;
1517

16-
return css`
17-
z-index: 1;
18-
position: absolute;
19-
top: 0;
20-
right: 0;
21-
bottom: 0;
22-
cursor: col-resize;
23-
width: ${width}px;
24-
25-
background-color: transparent;
26-
transition: background-color 0.1s linear;
27-
28-
&:hover {
29-
background-color: ${highlight};
30-
}
31-
`;
18+
return {
19+
handle: css`
20+
z-index: 2;
21+
position: absolute;
22+
top: 0;
23+
right: 0;
24+
bottom: 0;
25+
26+
width: 1px;
27+
margin: 4px 0;
28+
`,
29+
area: css`
30+
z-index: 1;
31+
position: absolute;
32+
top: 0;
33+
right: 0;
34+
bottom: 0;
35+
36+
cursor: ew-resize;
37+
width: ${width}px;
38+
height: 100%;
39+
40+
&:hover,
41+
&.active {
42+
background-color: ${highlight};
43+
}
44+
`,
45+
};
3246
};
3347

3448
export { resizerStyle };

‎src/resize/useResize.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export const useResize = (index: number, hide: boolean | Nullish) => {
136136
const { tableElementRef, tableMemoryRef, layout } = context;
137137

138138
const cellRef = React.useRef<HTMLTableCellElement>(null);
139-
const resizeRef = React.useRef<HTMLSpanElement>(null);
139+
const resizeRef = React.useRef<HTMLDivElement>(null);
140140

141141
const previousGrid = React.useRef<string>('');
142142

@@ -153,6 +153,8 @@ export const useResize = (index: number, hide: boolean | Nullish) => {
153153

154154
isMouseDown.current = true;
155155
startOffset.current = cellRef.current!.offsetWidth - event.pageX;
156+
157+
cellRef.current?.querySelector('.resizer-area')!.classList.add('active');
156158
},
157159
[tableElementRef],
158160
);
@@ -186,6 +188,8 @@ export const useResize = (index: number, hide: boolean | Nullish) => {
186188
const newPreservedDataColumns = getHeaderColumns(tableElementRef).map(toDataColumn);
187189
tableMemoryRef.current!.dataColumns = newPreservedDataColumns;
188190
}
191+
192+
cellRef.current?.querySelector('.resizer-area')!.classList.remove('active');
189193
}, [layout, tableElementRef, tableMemoryRef]);
190194

191195
React.useEffect(() => {

‎src/table/Cell/HeaderCell.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,11 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
109109
{...rest}
110110
>
111111
<div>{children}</div>
112-
{resize && !hide && <span ref={resizeRef} css={resizerStyle(resize)} />}
112+
{resize && !hide && (
113+
<div className="resizer-area" ref={resizeRef} css={resizerStyle(resize).area}>
114+
<span className="resizer-handle" css={resizerStyle(resize).handle} />
115+
</div>
116+
)}
113117
</HeaderCellContainer>
114118
);
115119
};

0 commit comments

Comments
 (0)