Skip to content

Commit 9afc383

Browse files
yazhouioyazhouio
authored
feat: Table toobar add disabled status (#319)
* fix: Fix fixed table style Signed-off-by: yazhou <[email protected]> * chore: remove console.log Signed-off-by: yazhou <[email protected]> * feat: Table add disabled state to FilterInput and Toolbar components Signed-off-by: yazhou <[email protected]> * ci: update version Signed-off-by: yazhou <[email protected]> * style: FilterInput disabled style Signed-off-by: yazhou <[email protected]> --------- Signed-off-by: yazhou <[email protected]>
1 parent 415f833 commit 9afc383

File tree

7 files changed

+86
-16
lines changed

7 files changed

+86
-16
lines changed

‎.changeset/few-grapes-leave.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
'@kubed/code-editor': patch
3+
'@kubed/diff-viewer': patch
4+
'@kubed/components': patch
5+
'@kubed/log-viewer': patch
6+
'@kubed/charts': patch
7+
'@kubed/hooks': patch
8+
'@kubed/icons': patch
9+
'@kubed/tests': patch
10+
'kubed-documents': patch
11+
---
12+
13+
1. Fix table fixed style.
14+
2. Table toolbar support disabled status.

‎packages/components/src/FilterInput/FilterInput.styles.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ export const Wrapper = styled.div`
1717
border-color: ${({ theme }) => theme.palette.border};
1818
}
1919
20+
&.is-disabled {
21+
border: solid 1px transparent;
22+
opacity: 0.6;
23+
cursor: not-allowed;
24+
& > * {
25+
pointer-events: none;
26+
}
27+
}
2028
&.has-value,
2129
&.is-focused {
2230
background-color: ${({ theme }) => theme.palette.background};

‎packages/components/src/FilterInput/FilterInput.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export interface FilterInputProps extends DefaultProps {
5757
// renderMenuItem?: () => void;
5858
initialKeyword?: string;
5959
simpleMode?: boolean;
60+
disabled?: boolean;
6061
}
6162

6263
export const FilterInput = forwardRef<FilterInputProps, null>((props, ref) => {
@@ -261,7 +262,11 @@ export const FilterInput = forwardRef<FilterInputProps, null>((props, ref) => {
261262

262263
return (
263264
<Wrapper
264-
className={cx(props.className, { 'has-value': hasValue, 'is-focused': isFocused })}
265+
className={cx(props.className, {
266+
'has-value': hasValue,
267+
'is-focused': isFocused,
268+
'is-disabled': props.disabled,
269+
})}
265270
ref={ref}
266271
>
267272
<Magnifier className="icon-search" />

‎packages/components/src/Table/BaseTable/Table.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ const TableRoot = styled('table')<{
1717
},
1818
...($stickyHeader && {
1919
borderCollapse: 'separate',
20+
width: 'max-content',
21+
minWidth: '100%',
2022
}),
2123
}));
2224

‎packages/components/src/Table/BaseTable/TableCell.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ type OwnerState = Pick<
3232
| 'fixedLastLeft'
3333
| 'fixedLastRight'
3434
| 'hasBorder'
35+
| 'width'
3536
>;
3637
const TableCellRoot = styled.td<{
3738
$ownerState: OwnerState;
@@ -50,6 +51,7 @@ const TableCellRoot = styled.td<{
5051
fixedLastLeft,
5152
fixedLastRight,
5253
hasBorder = false,
54+
width,
5355
},
5456
}) => {
5557
const paddingV =
@@ -70,6 +72,9 @@ const TableCellRoot = styled.td<{
7072
return {
7173
display: 'table-cell',
7274
verticalAlign: 'inherit',
75+
...(width && {
76+
width: typeof width === 'number' ? `${width}px` : width,
77+
}),
7378
// boxShadow: `inset 0 -1px 0 0 ${theme.palette.accents_1}`,
7479
...(size && {
7580
height: {
@@ -104,16 +109,17 @@ const TableCellRoot = styled.td<{
104109
zIndex: 1,
105110
backgroundColor: theme.palette.background,
106111
}),
107-
...(stickyHeader && {
112+
'&.with-sticky': {
108113
position: 'sticky',
109114
top: 0,
110115
zIndex: fixed ? 3 : 2,
111-
}),
112-
'&.with-sticky': {
116+
backgroundColor: 'white',
117+
},
118+
...(stickyHeader && {
113119
position: 'sticky',
114120
top: 0,
115-
zIndex: 2,
116-
},
121+
zIndex: fixed ? 3 : 2,
122+
}),
117123
...(fixedLastLeft && {
118124
'&:after': {
119125
content: '""',
@@ -182,6 +188,7 @@ export const TableCell = React.forwardRef<
182188
fixedLastLeft,
183189
fixedLastRight,
184190
hasBorder: hasBorder ?? (tableLv && tableLv.hasBorder),
191+
width: other.width,
185192
};
186193
const isHeadCell = tableLv && tableLv.variant === 'head';
187194
const component = isHeadCell ? 'th' : 'td';

‎packages/components/src/Table/BaseTable/Toolbar/index.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ export interface ToolbarProps {
3131
simpleMode?: boolean;
3232
onChange?: (value: any) => void;
3333
initialKeyword?: string;
34+
disabled?: boolean;
3435
};
3536
onFilterInputChange?: (value: any) => void;
3637
refetch?: any;
3738
loading?: boolean;
39+
refreshDisabled?: boolean;
40+
settingMenuDisabled?: boolean;
3841
}
3942

4043
export const Toolbar = (props: ToolbarProps) => {
@@ -54,6 +57,8 @@ export const Toolbar = (props: ToolbarProps) => {
5457
loading,
5558
enableSettingMenu = true,
5659
className,
60+
refreshDisabled,
61+
settingMenuDisabled,
5762
} = props;
5863
return (
5964
<ToolbarWrapper className={className}>
@@ -75,12 +80,17 @@ export const Toolbar = (props: ToolbarProps) => {
7580
{toolbarLeft && <div className="toolbar-left">{toolbarLeft}</div>}
7681
<div className="toolbar-item">{enableFilters && <FilterInput {...filterProps} />}</div>
7782
<div className="toolbar-right">
78-
<Button variant="text" className="btn-refresh" disabled={!!loading} onClick={refetch}>
83+
<Button
84+
variant="text"
85+
className="btn-refresh"
86+
disabled={!!loading || refreshDisabled}
87+
onClick={refetch}
88+
>
7989
{loading ? <CircleLoader size={14} /> : <Refresh />}
8090
</Button>
8191
{enableSettingMenu && (
8292
<Dropdown content={settingMenu} placement="bottom-end" maxWidth={160}>
83-
<Button variant="text" className="btn-setting">
93+
<Button variant="text" className="btn-setting" disabled={settingMenuDisabled}>
8494
<Cogwheel />
8595
</Button>
8696
</Dropdown>

‎packages/components/src/Table/Table.story.tsx‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -170,22 +170,23 @@ export const basicTableWithFixedColumn = () => {
170170
style={{
171171
height: '300px',
172172
overflow: 'auto',
173-
width: 500,
174173
}}
175174
>
176-
<Table
177-
stickyHeader
178-
style={{
179-
width: 700,
180-
minWidth: '100%',
181-
}}
182-
>
175+
<Table stickyHeader>
183176
<colgroup>
184177
<col width="100" />
185178
<col width="200" />
186179
<col />
187180
<col />
188181
<col />
182+
<col />
183+
<col />
184+
<col />
185+
<col />
186+
<col />
187+
<col />
188+
<col />
189+
<col />
189190
<col width="100" />
190191
</colgroup>
191192
<TableHead hasBorder>
@@ -199,6 +200,14 @@ export const basicTableWithFixedColumn = () => {
199200
<TableCell>Header 3</TableCell>
200201
<TableCell>Header 3</TableCell>
201202
<TableCell>Header 3</TableCell>
203+
<TableCell>Header 3</TableCell>
204+
<TableCell>Header 3</TableCell>
205+
<TableCell>Header 3</TableCell>
206+
<TableCell>Header 3</TableCell>
207+
<TableCell>Header 3</TableCell>
208+
<TableCell>Header 3</TableCell>
209+
<TableCell>Header 3</TableCell>
210+
<TableCell>Header 3</TableCell>
202211
<TableCell fixed="right" fixedLastRight fixedWidth={0}>
203212
Header 3
204213
</TableCell>
@@ -218,6 +227,14 @@ export const basicTableWithFixedColumn = () => {
218227
</TableCell>
219228
<TableCell>{row.col3}</TableCell>
220229
<TableCell>{row.col3}</TableCell>
230+
<TableCell>{row.col3}</TableCell>
231+
<TableCell>{row.col3}</TableCell>
232+
<TableCell>{row.col3}</TableCell>
233+
<TableCell>{row.col3}</TableCell>
234+
<TableCell>{row.col3}</TableCell>
235+
<TableCell>{row.col3}</TableCell>
236+
<TableCell>{row.col3}</TableCell>
237+
<TableCell>{row.col3}</TableCell>
221238
<TableCell fixed="right" fixedLastRight fixedWidth={0}>
222239
{row.col3}
223240
</TableCell>
@@ -1053,8 +1070,15 @@ export const DataTableSimple = () => {
10531070
},
10541071
],
10551072
getProps: {
1073+
toolbar: () => {
1074+
return {
1075+
// refreshDisabled: true,
1076+
// settingMenuDisabled: true,
1077+
};
1078+
},
10561079
filters: () => {
10571080
return {
1081+
disabled: true,
10581082
simpleMode: false,
10591083
suggestions: [
10601084
{

0 commit comments

Comments
 (0)