@zendeskgarden/react-tables 9.0.0-next.1 → 9.0.0-next.10
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/README.md +24 -33
- package/dist/esm/elements/Body.js +26 -0
- package/dist/esm/elements/Caption.js +26 -0
- package/dist/esm/elements/Cell.js +44 -0
- package/dist/esm/elements/GroupRow.js +33 -0
- package/dist/esm/elements/Head.js +26 -0
- package/dist/esm/elements/HeaderCell.js +39 -0
- package/dist/esm/elements/HeaderRow.js +33 -0
- package/dist/esm/elements/OverflowButton.js +55 -0
- package/dist/esm/elements/Row.js +68 -0
- package/dist/esm/elements/SortableCell.js +55 -0
- package/dist/esm/elements/Table.js +65 -0
- package/dist/esm/index.js +17 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-fill.svg.js +27 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js +27 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/overflow-stroke.svg.js +36 -0
- package/dist/esm/styled/StyledBody.js +22 -0
- package/dist/esm/styled/StyledCaption.js +22 -0
- package/dist/esm/styled/StyledCell.js +47 -0
- package/dist/esm/styled/StyledGroupRow.js +31 -0
- package/dist/esm/styled/StyledHead.js +27 -0
- package/dist/esm/styled/StyledHeaderCell.js +44 -0
- package/dist/esm/styled/StyledHeaderRow.js +33 -0
- package/dist/esm/styled/StyledHiddenCell.js +23 -0
- package/dist/esm/styled/StyledOverflowButton.js +51 -0
- package/dist/esm/styled/StyledRow.js +62 -0
- package/dist/esm/styled/StyledSortableButton.js +81 -0
- package/dist/esm/styled/StyledTable.js +25 -0
- package/dist/esm/styled/style-utils.js +16 -0
- package/dist/esm/types/index.js +10 -0
- package/dist/esm/utils/useTableContext.js +17 -0
- package/dist/index.cjs.js +72 -77
- package/dist/typings/elements/Body.d.ts +2 -0
- package/dist/typings/elements/Caption.d.ts +2 -0
- package/dist/typings/elements/Cell.d.ts +2 -0
- package/dist/typings/elements/GroupRow.d.ts +2 -0
- package/dist/typings/elements/Head.d.ts +2 -0
- package/dist/typings/elements/HeaderCell.d.ts +2 -0
- package/dist/typings/elements/HeaderRow.d.ts +2 -0
- package/dist/typings/elements/OverflowButton.d.ts +2 -0
- package/dist/typings/elements/Row.d.ts +2 -0
- package/dist/typings/elements/SortableCell.d.ts +2 -0
- package/dist/typings/elements/Table.d.ts +23 -1
- package/dist/typings/styled/StyledHeaderCell.d.ts +1 -1
- package/package.json +6 -6
- package/dist/index.esm.js +0 -637
package/README.md
CHANGED
|
@@ -16,45 +16,36 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
|
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
import { ThemeProvider } from '@zendeskgarden/react-theming';
|
|
19
|
-
import {
|
|
20
|
-
Table,
|
|
21
|
-
Caption,
|
|
22
|
-
Head,
|
|
23
|
-
HeaderRow,
|
|
24
|
-
HeaderCell,
|
|
25
|
-
Body,
|
|
26
|
-
Row,
|
|
27
|
-
Cell
|
|
28
|
-
} from '@zendeskgarden/react-tables';
|
|
19
|
+
import { Table } from '@zendeskgarden/react-tables';
|
|
29
20
|
|
|
30
21
|
/**
|
|
31
22
|
* Place a `ThemeProvider` at the root of your React application
|
|
32
23
|
*/
|
|
33
24
|
<ThemeProvider>
|
|
34
25
|
<Table>
|
|
35
|
-
<Caption>Your Unsolved Tickets</Caption>
|
|
36
|
-
<Head>
|
|
37
|
-
<HeaderRow>
|
|
38
|
-
<HeaderCell>Subject</HeaderCell>
|
|
39
|
-
<HeaderCell>Requester</HeaderCell>
|
|
40
|
-
<HeaderCell>Requested</HeaderCell>
|
|
41
|
-
<HeaderCell>Type</HeaderCell>
|
|
42
|
-
</HeaderRow>
|
|
43
|
-
</Head>
|
|
44
|
-
<Body>
|
|
45
|
-
<Row>
|
|
46
|
-
<Cell>Where are my shoes?</Cell>
|
|
47
|
-
<Cell>John Smith</Cell>
|
|
48
|
-
<Cell>15 minutes ago</Cell>
|
|
49
|
-
<Cell>Ticket</Cell>
|
|
50
|
-
</Row>
|
|
51
|
-
<Row>
|
|
52
|
-
<Cell>I was charged twice!</Cell>
|
|
53
|
-
<Cell>Jane Doe</Cell>
|
|
54
|
-
<Cell>25 minutes ago</Cell>
|
|
55
|
-
<Cell>Call</Cell>
|
|
56
|
-
</Row>
|
|
57
|
-
</Body>
|
|
26
|
+
<Table.Caption>Your Unsolved Tickets</Table.Caption>
|
|
27
|
+
<Table.Head>
|
|
28
|
+
<Table.HeaderRow>
|
|
29
|
+
<Table.HeaderCell>Subject</Table.HeaderCell>
|
|
30
|
+
<Table.HeaderCell>Requester</Table.HeaderCell>
|
|
31
|
+
<Table.HeaderCell>Requested</Table.HeaderCell>
|
|
32
|
+
<Table.HeaderCell>Type</Table.HeaderCell>
|
|
33
|
+
</Table.HeaderRow>
|
|
34
|
+
</Table.Head>
|
|
35
|
+
<Table.Body>
|
|
36
|
+
<Table.Row>
|
|
37
|
+
<Table.Cell>Where are my shoes?</Table.Cell>
|
|
38
|
+
<Table.Cell>John Smith</Table.Cell>
|
|
39
|
+
<Table.Cell>15 minutes ago</Table.Cell>
|
|
40
|
+
<Table.Cell>Ticket</Table.Cell>
|
|
41
|
+
</Table.Row>
|
|
42
|
+
<Table.Row>
|
|
43
|
+
<Table.Cell>I was charged twice!</Table.Cell>
|
|
44
|
+
<Table.Cell>Jane Doe</Table.Cell>
|
|
45
|
+
<Table.Cell>25 minutes ago</Table.Cell>
|
|
46
|
+
<Table.Cell>Call</Table.Cell>
|
|
47
|
+
</Table.Row>
|
|
48
|
+
</Table.Body>
|
|
58
49
|
</Table>
|
|
59
50
|
</ThemeProvider>;
|
|
60
51
|
```
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef } from 'react';
|
|
8
|
+
import { StyledBody } from '../styled/StyledBody.js';
|
|
9
|
+
import '../styled/StyledCaption.js';
|
|
10
|
+
import '../styled/StyledHeaderRow.js';
|
|
11
|
+
import '../styled/StyledHead.js';
|
|
12
|
+
import '../styled/StyledCell.js';
|
|
13
|
+
import '../styled/StyledGroupRow.js';
|
|
14
|
+
import '../styled/StyledTable.js';
|
|
15
|
+
import '../styled/StyledHeaderCell.js';
|
|
16
|
+
import '../styled/StyledHiddenCell.js';
|
|
17
|
+
import '../styled/StyledSortableButton.js';
|
|
18
|
+
import '../styled/StyledOverflowButton.js';
|
|
19
|
+
import '../styled/StyledRow.js';
|
|
20
|
+
|
|
21
|
+
const Body = forwardRef((props, ref) => React__default.createElement(StyledBody, Object.assign({
|
|
22
|
+
ref: ref
|
|
23
|
+
}, props)));
|
|
24
|
+
Body.displayName = 'Body';
|
|
25
|
+
|
|
26
|
+
export { Body };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef } from 'react';
|
|
8
|
+
import '../styled/StyledBody.js';
|
|
9
|
+
import { StyledCaption } from '../styled/StyledCaption.js';
|
|
10
|
+
import '../styled/StyledHeaderRow.js';
|
|
11
|
+
import '../styled/StyledHead.js';
|
|
12
|
+
import '../styled/StyledCell.js';
|
|
13
|
+
import '../styled/StyledGroupRow.js';
|
|
14
|
+
import '../styled/StyledTable.js';
|
|
15
|
+
import '../styled/StyledHeaderCell.js';
|
|
16
|
+
import '../styled/StyledHiddenCell.js';
|
|
17
|
+
import '../styled/StyledSortableButton.js';
|
|
18
|
+
import '../styled/StyledOverflowButton.js';
|
|
19
|
+
import '../styled/StyledRow.js';
|
|
20
|
+
|
|
21
|
+
const Caption = forwardRef((props, ref) => React__default.createElement(StyledCaption, Object.assign({
|
|
22
|
+
ref: ref
|
|
23
|
+
}, props)));
|
|
24
|
+
Caption.displayName = 'Caption';
|
|
25
|
+
|
|
26
|
+
export { Caption };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import '../styled/StyledBody.js';
|
|
10
|
+
import '../styled/StyledCaption.js';
|
|
11
|
+
import '../styled/StyledHeaderRow.js';
|
|
12
|
+
import '../styled/StyledHead.js';
|
|
13
|
+
import { StyledCell } from '../styled/StyledCell.js';
|
|
14
|
+
import '../styled/StyledGroupRow.js';
|
|
15
|
+
import '../styled/StyledTable.js';
|
|
16
|
+
import '../styled/StyledHeaderCell.js';
|
|
17
|
+
import { StyledHiddenCell } from '../styled/StyledHiddenCell.js';
|
|
18
|
+
import '../styled/StyledSortableButton.js';
|
|
19
|
+
import '../styled/StyledOverflowButton.js';
|
|
20
|
+
import '../styled/StyledRow.js';
|
|
21
|
+
import { useTableContext } from '../utils/useTableContext.js';
|
|
22
|
+
|
|
23
|
+
const Cell = React__default.forwardRef((_ref, ref) => {
|
|
24
|
+
let {
|
|
25
|
+
hidden,
|
|
26
|
+
...props
|
|
27
|
+
} = _ref;
|
|
28
|
+
const {
|
|
29
|
+
size
|
|
30
|
+
} = useTableContext();
|
|
31
|
+
return React__default.createElement(StyledCell, Object.assign({
|
|
32
|
+
ref: ref,
|
|
33
|
+
size: size
|
|
34
|
+
}, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
|
|
35
|
+
});
|
|
36
|
+
Cell.displayName = 'Cell';
|
|
37
|
+
Cell.propTypes = {
|
|
38
|
+
isMinimum: PropTypes.bool,
|
|
39
|
+
isTruncated: PropTypes.bool,
|
|
40
|
+
hasOverflow: PropTypes.bool,
|
|
41
|
+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export { Cell };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef } from 'react';
|
|
8
|
+
import '../styled/StyledBody.js';
|
|
9
|
+
import '../styled/StyledCaption.js';
|
|
10
|
+
import '../styled/StyledHeaderRow.js';
|
|
11
|
+
import '../styled/StyledHead.js';
|
|
12
|
+
import '../styled/StyledCell.js';
|
|
13
|
+
import { StyledGroupRow } from '../styled/StyledGroupRow.js';
|
|
14
|
+
import '../styled/StyledTable.js';
|
|
15
|
+
import '../styled/StyledHeaderCell.js';
|
|
16
|
+
import '../styled/StyledHiddenCell.js';
|
|
17
|
+
import '../styled/StyledSortableButton.js';
|
|
18
|
+
import '../styled/StyledOverflowButton.js';
|
|
19
|
+
import '../styled/StyledRow.js';
|
|
20
|
+
import { useTableContext } from '../utils/useTableContext.js';
|
|
21
|
+
|
|
22
|
+
const GroupRow = forwardRef((props, ref) => {
|
|
23
|
+
const {
|
|
24
|
+
size
|
|
25
|
+
} = useTableContext();
|
|
26
|
+
return React__default.createElement(StyledGroupRow, Object.assign({
|
|
27
|
+
ref: ref,
|
|
28
|
+
size: size
|
|
29
|
+
}, props));
|
|
30
|
+
});
|
|
31
|
+
GroupRow.displayName = 'GroupRow';
|
|
32
|
+
|
|
33
|
+
export { GroupRow };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef } from 'react';
|
|
8
|
+
import '../styled/StyledBody.js';
|
|
9
|
+
import '../styled/StyledCaption.js';
|
|
10
|
+
import '../styled/StyledHeaderRow.js';
|
|
11
|
+
import { StyledHead } from '../styled/StyledHead.js';
|
|
12
|
+
import '../styled/StyledCell.js';
|
|
13
|
+
import '../styled/StyledGroupRow.js';
|
|
14
|
+
import '../styled/StyledTable.js';
|
|
15
|
+
import '../styled/StyledHeaderCell.js';
|
|
16
|
+
import '../styled/StyledHiddenCell.js';
|
|
17
|
+
import '../styled/StyledSortableButton.js';
|
|
18
|
+
import '../styled/StyledOverflowButton.js';
|
|
19
|
+
import '../styled/StyledRow.js';
|
|
20
|
+
|
|
21
|
+
const Head = forwardRef((props, ref) => React__default.createElement(StyledHead, Object.assign({
|
|
22
|
+
ref: ref
|
|
23
|
+
}, props)));
|
|
24
|
+
Head.displayName = 'Head';
|
|
25
|
+
|
|
26
|
+
export { Head };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef } from 'react';
|
|
8
|
+
import '../styled/StyledBody.js';
|
|
9
|
+
import '../styled/StyledCaption.js';
|
|
10
|
+
import '../styled/StyledHeaderRow.js';
|
|
11
|
+
import '../styled/StyledHead.js';
|
|
12
|
+
import '../styled/StyledCell.js';
|
|
13
|
+
import '../styled/StyledGroupRow.js';
|
|
14
|
+
import '../styled/StyledTable.js';
|
|
15
|
+
import { StyledHeaderCell } from '../styled/StyledHeaderCell.js';
|
|
16
|
+
import { StyledHiddenCell } from '../styled/StyledHiddenCell.js';
|
|
17
|
+
import '../styled/StyledSortableButton.js';
|
|
18
|
+
import '../styled/StyledOverflowButton.js';
|
|
19
|
+
import '../styled/StyledRow.js';
|
|
20
|
+
import { useTableContext } from '../utils/useTableContext.js';
|
|
21
|
+
import { Cell } from './Cell.js';
|
|
22
|
+
|
|
23
|
+
const HeaderCell = forwardRef((_ref, ref) => {
|
|
24
|
+
let {
|
|
25
|
+
hidden,
|
|
26
|
+
...props
|
|
27
|
+
} = _ref;
|
|
28
|
+
const {
|
|
29
|
+
size
|
|
30
|
+
} = useTableContext();
|
|
31
|
+
return React__default.createElement(StyledHeaderCell, Object.assign({
|
|
32
|
+
ref: ref,
|
|
33
|
+
size: size
|
|
34
|
+
}, props), hidden && props.children ? React__default.createElement(StyledHiddenCell, null, props.children) : props.children);
|
|
35
|
+
});
|
|
36
|
+
HeaderCell.displayName = 'HeaderCell';
|
|
37
|
+
HeaderCell.propTypes = Cell.propTypes;
|
|
38
|
+
|
|
39
|
+
export { HeaderCell };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default from 'react';
|
|
8
|
+
import '../styled/StyledBody.js';
|
|
9
|
+
import '../styled/StyledCaption.js';
|
|
10
|
+
import { StyledHeaderRow } from '../styled/StyledHeaderRow.js';
|
|
11
|
+
import '../styled/StyledHead.js';
|
|
12
|
+
import '../styled/StyledCell.js';
|
|
13
|
+
import '../styled/StyledGroupRow.js';
|
|
14
|
+
import '../styled/StyledTable.js';
|
|
15
|
+
import '../styled/StyledHeaderCell.js';
|
|
16
|
+
import '../styled/StyledHiddenCell.js';
|
|
17
|
+
import '../styled/StyledSortableButton.js';
|
|
18
|
+
import '../styled/StyledOverflowButton.js';
|
|
19
|
+
import '../styled/StyledRow.js';
|
|
20
|
+
import { useTableContext } from '../utils/useTableContext.js';
|
|
21
|
+
|
|
22
|
+
const HeaderRow = React__default.forwardRef((props, ref) => {
|
|
23
|
+
const {
|
|
24
|
+
size
|
|
25
|
+
} = useTableContext();
|
|
26
|
+
return React__default.createElement(StyledHeaderRow, Object.assign({
|
|
27
|
+
ref: ref,
|
|
28
|
+
size: size
|
|
29
|
+
}, props));
|
|
30
|
+
});
|
|
31
|
+
HeaderRow.displayName = 'HeaderRow';
|
|
32
|
+
|
|
33
|
+
export { HeaderRow };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef, useState } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import { composeEventHandlers } from '@zendeskgarden/container-utilities';
|
|
10
|
+
import SvgOverflowStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/overflow-stroke.svg.js';
|
|
11
|
+
import '../styled/StyledBody.js';
|
|
12
|
+
import '../styled/StyledCaption.js';
|
|
13
|
+
import '../styled/StyledHeaderRow.js';
|
|
14
|
+
import '../styled/StyledHead.js';
|
|
15
|
+
import '../styled/StyledCell.js';
|
|
16
|
+
import '../styled/StyledGroupRow.js';
|
|
17
|
+
import '../styled/StyledTable.js';
|
|
18
|
+
import '../styled/StyledHeaderCell.js';
|
|
19
|
+
import '../styled/StyledHiddenCell.js';
|
|
20
|
+
import '../styled/StyledSortableButton.js';
|
|
21
|
+
import { StyledOverflowButton, StyledOverflowButtonIconWrapper } from '../styled/StyledOverflowButton.js';
|
|
22
|
+
import '../styled/StyledRow.js';
|
|
23
|
+
import { useTableContext } from '../utils/useTableContext.js';
|
|
24
|
+
|
|
25
|
+
const OverflowButton = forwardRef((_ref, ref) => {
|
|
26
|
+
let {
|
|
27
|
+
onFocus,
|
|
28
|
+
onBlur,
|
|
29
|
+
isFocused: focused,
|
|
30
|
+
...other
|
|
31
|
+
} = _ref;
|
|
32
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
33
|
+
const {
|
|
34
|
+
size
|
|
35
|
+
} = useTableContext();
|
|
36
|
+
return React__default.createElement(StyledOverflowButton, Object.assign({
|
|
37
|
+
onFocus: composeEventHandlers(onFocus, () => {
|
|
38
|
+
setIsFocused(true);
|
|
39
|
+
}),
|
|
40
|
+
onBlur: composeEventHandlers(onBlur, () => {
|
|
41
|
+
setIsFocused(false);
|
|
42
|
+
}),
|
|
43
|
+
size: size,
|
|
44
|
+
isFocused: typeof focused === 'undefined' ? isFocused : focused,
|
|
45
|
+
ref: ref
|
|
46
|
+
}, other), React__default.createElement(StyledOverflowButtonIconWrapper, null, React__default.createElement(SvgOverflowStroke, null)));
|
|
47
|
+
});
|
|
48
|
+
OverflowButton.displayName = 'OverflowButton';
|
|
49
|
+
OverflowButton.propTypes = {
|
|
50
|
+
isHovered: PropTypes.bool,
|
|
51
|
+
isActive: PropTypes.bool,
|
|
52
|
+
isFocused: PropTypes.bool
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export { OverflowButton };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef, useState, useMemo } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import { composeEventHandlers } from '@zendeskgarden/container-utilities';
|
|
10
|
+
import '../styled/StyledBody.js';
|
|
11
|
+
import '../styled/StyledCaption.js';
|
|
12
|
+
import '../styled/StyledHeaderRow.js';
|
|
13
|
+
import '../styled/StyledHead.js';
|
|
14
|
+
import '../styled/StyledCell.js';
|
|
15
|
+
import '../styled/StyledGroupRow.js';
|
|
16
|
+
import '../styled/StyledTable.js';
|
|
17
|
+
import '../styled/StyledHeaderCell.js';
|
|
18
|
+
import '../styled/StyledHiddenCell.js';
|
|
19
|
+
import '../styled/StyledSortableButton.js';
|
|
20
|
+
import '../styled/StyledOverflowButton.js';
|
|
21
|
+
import { StyledRow } from '../styled/StyledRow.js';
|
|
22
|
+
import { useTableContext } from '../utils/useTableContext.js';
|
|
23
|
+
|
|
24
|
+
const Row = forwardRef((_ref, ref) => {
|
|
25
|
+
let {
|
|
26
|
+
onFocus,
|
|
27
|
+
onBlur,
|
|
28
|
+
isFocused: focused,
|
|
29
|
+
...otherProps
|
|
30
|
+
} = _ref;
|
|
31
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
32
|
+
const {
|
|
33
|
+
size,
|
|
34
|
+
isReadOnly
|
|
35
|
+
} = useTableContext();
|
|
36
|
+
const computedFocused = useMemo(() => {
|
|
37
|
+
if (typeof focused !== 'undefined') {
|
|
38
|
+
return focused;
|
|
39
|
+
}
|
|
40
|
+
if (isReadOnly) {
|
|
41
|
+
return false;
|
|
42
|
+
}
|
|
43
|
+
return isFocused;
|
|
44
|
+
}, [focused, isFocused, isReadOnly]);
|
|
45
|
+
const onFocusCallback = useMemo(() => composeEventHandlers(onFocus, () => {
|
|
46
|
+
setIsFocused(true);
|
|
47
|
+
}), [onFocus, setIsFocused]);
|
|
48
|
+
const onBlurCallback = useMemo(() => composeEventHandlers(onBlur, () => {
|
|
49
|
+
setIsFocused(false);
|
|
50
|
+
}), [onBlur, setIsFocused]);
|
|
51
|
+
return React__default.createElement(StyledRow, Object.assign({
|
|
52
|
+
onFocus: onFocusCallback,
|
|
53
|
+
onBlur: onBlurCallback,
|
|
54
|
+
size: size,
|
|
55
|
+
isReadOnly: isReadOnly,
|
|
56
|
+
isFocused: computedFocused,
|
|
57
|
+
ref: ref
|
|
58
|
+
}, otherProps));
|
|
59
|
+
});
|
|
60
|
+
Row.displayName = 'Row';
|
|
61
|
+
Row.propTypes = {
|
|
62
|
+
isStriped: PropTypes.bool,
|
|
63
|
+
isFocused: PropTypes.bool,
|
|
64
|
+
isHovered: PropTypes.bool,
|
|
65
|
+
isSelected: PropTypes.bool
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export { Row };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { forwardRef } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import SvgSortStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/sort-stroke.svg.js';
|
|
10
|
+
import SvgSortFill from '../node_modules/@zendeskgarden/svg-icons/src/12/sort-fill.svg.js';
|
|
11
|
+
import { SORT } from '../types/index.js';
|
|
12
|
+
import '../styled/StyledBody.js';
|
|
13
|
+
import '../styled/StyledCaption.js';
|
|
14
|
+
import '../styled/StyledHeaderRow.js';
|
|
15
|
+
import '../styled/StyledHead.js';
|
|
16
|
+
import '../styled/StyledCell.js';
|
|
17
|
+
import '../styled/StyledGroupRow.js';
|
|
18
|
+
import '../styled/StyledTable.js';
|
|
19
|
+
import { StyledHeaderCell } from '../styled/StyledHeaderCell.js';
|
|
20
|
+
import '../styled/StyledHiddenCell.js';
|
|
21
|
+
import { StyledSortableButton, StyledSortableStrokeIconWrapper, StyledSortableFillIconWrapper } from '../styled/StyledSortableButton.js';
|
|
22
|
+
import '../styled/StyledOverflowButton.js';
|
|
23
|
+
import '../styled/StyledRow.js';
|
|
24
|
+
|
|
25
|
+
const SortableCell = forwardRef((_ref, ref) => {
|
|
26
|
+
let {
|
|
27
|
+
sort,
|
|
28
|
+
cellProps,
|
|
29
|
+
width,
|
|
30
|
+
children,
|
|
31
|
+
...otherProps
|
|
32
|
+
} = _ref;
|
|
33
|
+
let ariaSortValue = 'none';
|
|
34
|
+
if (sort === 'asc') {
|
|
35
|
+
ariaSortValue = 'ascending';
|
|
36
|
+
} else if (sort === 'desc') {
|
|
37
|
+
ariaSortValue = 'descending';
|
|
38
|
+
}
|
|
39
|
+
const SortIcon = sort === undefined ? SvgSortStroke : SvgSortFill;
|
|
40
|
+
return React__default.createElement(StyledHeaderCell, Object.assign({
|
|
41
|
+
"aria-sort": ariaSortValue,
|
|
42
|
+
width: width
|
|
43
|
+
}, cellProps), React__default.createElement(StyledSortableButton, Object.assign({
|
|
44
|
+
sort: sort,
|
|
45
|
+
ref: ref
|
|
46
|
+
}, otherProps), children, React__default.createElement(StyledSortableStrokeIconWrapper, null, React__default.createElement(SortIcon, null)), React__default.createElement(StyledSortableFillIconWrapper, null, React__default.createElement(SvgSortFill, null))));
|
|
47
|
+
});
|
|
48
|
+
SortableCell.displayName = 'SortableCell';
|
|
49
|
+
SortableCell.propTypes = {
|
|
50
|
+
sort: PropTypes.oneOf(SORT),
|
|
51
|
+
cellProps: PropTypes.any,
|
|
52
|
+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export { SortableCell };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import React__default, { useMemo } from 'react';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import { SIZE } from '../types/index.js';
|
|
10
|
+
import '../styled/StyledBody.js';
|
|
11
|
+
import '../styled/StyledCaption.js';
|
|
12
|
+
import '../styled/StyledHeaderRow.js';
|
|
13
|
+
import '../styled/StyledHead.js';
|
|
14
|
+
import '../styled/StyledCell.js';
|
|
15
|
+
import '../styled/StyledGroupRow.js';
|
|
16
|
+
import { StyledTable } from '../styled/StyledTable.js';
|
|
17
|
+
import '../styled/StyledHeaderCell.js';
|
|
18
|
+
import '../styled/StyledHiddenCell.js';
|
|
19
|
+
import '../styled/StyledSortableButton.js';
|
|
20
|
+
import '../styled/StyledOverflowButton.js';
|
|
21
|
+
import '../styled/StyledRow.js';
|
|
22
|
+
import { TableContext } from '../utils/useTableContext.js';
|
|
23
|
+
import { Head } from './Head.js';
|
|
24
|
+
import { Body } from './Body.js';
|
|
25
|
+
import { Caption } from './Caption.js';
|
|
26
|
+
import { Cell } from './Cell.js';
|
|
27
|
+
import { GroupRow } from './GroupRow.js';
|
|
28
|
+
import { HeaderCell } from './HeaderCell.js';
|
|
29
|
+
import { HeaderRow } from './HeaderRow.js';
|
|
30
|
+
import { OverflowButton } from './OverflowButton.js';
|
|
31
|
+
import { Row } from './Row.js';
|
|
32
|
+
import { SortableCell } from './SortableCell.js';
|
|
33
|
+
|
|
34
|
+
const TableComponent = React__default.forwardRef((props, ref) => {
|
|
35
|
+
const tableContextValue = useMemo(() => ({
|
|
36
|
+
size: props.size,
|
|
37
|
+
isReadOnly: props.isReadOnly
|
|
38
|
+
}), [props.size, props.isReadOnly]);
|
|
39
|
+
return React__default.createElement(TableContext.Provider, {
|
|
40
|
+
value: tableContextValue
|
|
41
|
+
}, React__default.createElement(StyledTable, Object.assign({
|
|
42
|
+
ref: ref
|
|
43
|
+
}, props)));
|
|
44
|
+
});
|
|
45
|
+
TableComponent.displayName = 'Table';
|
|
46
|
+
TableComponent.defaultProps = {
|
|
47
|
+
size: 'medium'
|
|
48
|
+
};
|
|
49
|
+
TableComponent.propTypes = {
|
|
50
|
+
size: PropTypes.oneOf(SIZE),
|
|
51
|
+
isReadOnly: PropTypes.bool
|
|
52
|
+
};
|
|
53
|
+
const Table = TableComponent;
|
|
54
|
+
Table.Body = Body;
|
|
55
|
+
Table.Caption = Caption;
|
|
56
|
+
Table.Cell = Cell;
|
|
57
|
+
Table.GroupRow = GroupRow;
|
|
58
|
+
Table.Head = Head;
|
|
59
|
+
Table.HeaderCell = HeaderCell;
|
|
60
|
+
Table.HeaderRow = HeaderRow;
|
|
61
|
+
Table.OverflowButton = OverflowButton;
|
|
62
|
+
Table.Row = Row;
|
|
63
|
+
Table.SortableCell = SortableCell;
|
|
64
|
+
|
|
65
|
+
export { Table, TableComponent };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
export { Body } from './elements/Body.js';
|
|
8
|
+
export { Caption } from './elements/Caption.js';
|
|
9
|
+
export { Cell } from './elements/Cell.js';
|
|
10
|
+
export { GroupRow } from './elements/GroupRow.js';
|
|
11
|
+
export { Head } from './elements/Head.js';
|
|
12
|
+
export { HeaderCell } from './elements/HeaderCell.js';
|
|
13
|
+
export { HeaderRow } from './elements/HeaderRow.js';
|
|
14
|
+
export { OverflowButton } from './elements/OverflowButton.js';
|
|
15
|
+
export { Row } from './elements/Row.js';
|
|
16
|
+
export { SortableCell } from './elements/SortableCell.js';
|
|
17
|
+
export { Table } from './elements/Table.js';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
|
|
9
|
+
var _path, _path2;
|
|
10
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
|
+
var SvgSortFill = function SvgSortFill(props) {
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
width: 12,
|
|
15
|
+
height: 12,
|
|
16
|
+
focusable: "false",
|
|
17
|
+
viewBox: "0 0 12 12",
|
|
18
|
+
"aria-hidden": "true"
|
|
19
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
20
|
+
fill: "currentColor",
|
|
21
|
+
d: "M10 5H2a.5.5 0 01-.46-.31.47.47 0 01.11-.54L5.29.5A1 1 0 016.7.5l3.65 3.65a.49.49 0 01.11.54A.51.51 0 0110 5z"
|
|
22
|
+
})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
d: "M2 7a.5.5 0 00-.46.31.47.47 0 00.11.54L5.3 11.5a1 1 0 001.41 0l3.65-3.65a.49.49 0 00.11-.54A.53.53 0 0010 7z"
|
|
24
|
+
})));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { SvgSortFill as default };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
|
|
9
|
+
var _path;
|
|
10
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
|
+
var SvgSortStroke = function SvgSortStroke(props) {
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
width: 12,
|
|
15
|
+
height: 12,
|
|
16
|
+
focusable: "false",
|
|
17
|
+
viewBox: "0 0 12 12",
|
|
18
|
+
"aria-hidden": "true"
|
|
19
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
20
|
+
fill: "none",
|
|
21
|
+
stroke: "currentColor",
|
|
22
|
+
strokeLinecap: "round",
|
|
23
|
+
d: "M2.5 4L5.6.9c.2-.2.5-.2.7 0L9.5 4m-7 4l3.1 3.1c.2.2.5.2.7 0L9.5 8"
|
|
24
|
+
})));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { SvgSortStroke as default };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
|
|
9
|
+
var _g;
|
|
10
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
|
+
var SvgOverflowStroke = function SvgOverflowStroke(props) {
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
width: 16,
|
|
15
|
+
height: 16,
|
|
16
|
+
focusable: "false",
|
|
17
|
+
viewBox: "0 0 16 16",
|
|
18
|
+
"aria-hidden": "true"
|
|
19
|
+
}, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
|
|
20
|
+
fill: "currentColor"
|
|
21
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
22
|
+
cx: 2.5,
|
|
23
|
+
cy: 8,
|
|
24
|
+
r: 1.5
|
|
25
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
26
|
+
cx: 8,
|
|
27
|
+
cy: 8,
|
|
28
|
+
r: 1.5
|
|
29
|
+
}), /*#__PURE__*/React.createElement("circle", {
|
|
30
|
+
cx: 13.5,
|
|
31
|
+
cy: 8,
|
|
32
|
+
r: 1.5
|
|
33
|
+
}))));
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export { SvgOverflowStroke as default };
|