@instructure/ui-table 8.14.1-snapshot.6 → 8.14.1-snapshot.63
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/es/Table/Body/index.js +2 -1
- package/es/Table/Body/props.js +0 -3
- package/es/Table/Cell/index.js +1 -0
- package/es/Table/Cell/props.js +0 -4
- package/es/Table/ColHeader/index.js +3 -2
- package/es/Table/ColHeader/props.js +0 -30
- package/es/Table/Head/index.js +25 -21
- package/es/Table/Head/props.js +0 -3
- package/es/Table/Row/index.js +1 -0
- package/es/Table/Row/props.js +0 -3
- package/es/Table/RowHeader/index.js +1 -0
- package/es/Table/RowHeader/props.js +0 -4
- package/es/Table/index.js +8 -7
- package/es/Table/props.js +0 -28
- package/lib/Table/Body/index.js +2 -1
- package/lib/Table/Body/props.js +0 -3
- package/lib/Table/Cell/index.js +1 -0
- package/lib/Table/Cell/props.js +0 -4
- package/lib/Table/ColHeader/index.js +5 -2
- package/lib/Table/ColHeader/props.js +0 -30
- package/lib/Table/Head/index.js +29 -23
- package/lib/Table/Head/props.js +0 -3
- package/lib/Table/Row/index.js +1 -0
- package/lib/Table/Row/props.js +0 -3
- package/lib/Table/RowHeader/index.js +1 -0
- package/lib/Table/RowHeader/props.js +0 -4
- package/lib/Table/index.js +10 -7
- package/lib/Table/props.js +0 -28
- package/package.json +17 -17
- package/src/Table/Body/index.tsx +14 -12
- package/src/Table/Body/props.ts +5 -4
- package/src/Table/Cell/index.tsx +1 -0
- package/src/Table/Cell/props.ts +5 -5
- package/src/Table/ColHeader/index.tsx +6 -15
- package/src/Table/ColHeader/props.ts +29 -26
- package/src/Table/Head/index.tsx +40 -27
- package/src/Table/Head/props.ts +4 -4
- package/src/Table/Row/index.tsx +3 -4
- package/src/Table/Row/props.ts +5 -4
- package/src/Table/RowHeader/index.tsx +1 -0
- package/src/Table/RowHeader/props.ts +4 -4
- package/src/Table/index.tsx +14 -10
- package/src/Table/props.ts +24 -24
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Table/Body/index.d.ts +4 -3
- package/types/Table/Body/index.d.ts.map +1 -1
- package/types/Table/Body/props.d.ts +5 -1
- package/types/Table/Body/props.d.ts.map +1 -1
- package/types/Table/Cell/index.d.ts +5 -4
- package/types/Table/Cell/index.d.ts.map +1 -1
- package/types/Table/Cell/props.d.ts +5 -2
- package/types/Table/Cell/props.d.ts.map +1 -1
- package/types/Table/ColHeader/index.d.ts +11 -6
- package/types/Table/ColHeader/index.d.ts.map +1 -1
- package/types/Table/ColHeader/props.d.ts +28 -2
- package/types/Table/ColHeader/props.d.ts.map +1 -1
- package/types/Table/Head/index.d.ts +6 -5
- package/types/Table/Head/index.d.ts.map +1 -1
- package/types/Table/Head/props.d.ts +4 -1
- package/types/Table/Head/props.d.ts.map +1 -1
- package/types/Table/Row/index.d.ts +3 -2
- package/types/Table/Row/index.d.ts.map +1 -1
- package/types/Table/Row/props.d.ts +5 -1
- package/types/Table/Row/props.d.ts.map +1 -1
- package/types/Table/RowHeader/index.d.ts +3 -2
- package/types/Table/RowHeader/index.d.ts.map +1 -1
- package/types/Table/RowHeader/props.d.ts +4 -1
- package/types/Table/RowHeader/props.d.ts.map +1 -1
- package/types/Table/index.d.ts +7 -6
- package/types/Table/index.d.ts.map +1 -1
- package/types/Table/props.d.ts +24 -1
- package/types/Table/props.d.ts.map +1 -1
package/es/Table/Body/index.js
CHANGED
@@ -38,6 +38,7 @@ import { allowedProps, propTypes } from './props';
|
|
38
38
|
parent: Table
|
39
39
|
id: Table.Body
|
40
40
|
---
|
41
|
+
@tsProps
|
41
42
|
**/
|
42
43
|
|
43
44
|
let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Body extends Component {
|
@@ -47,7 +48,7 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
47
48
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
48
49
|
}
|
49
50
|
|
50
|
-
componentDidUpdate(
|
51
|
+
componentDidUpdate() {
|
51
52
|
var _this$props$makeStyle2, _this$props2;
|
52
53
|
|
53
54
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
package/es/Table/Body/props.js
CHANGED
@@ -25,9 +25,6 @@ import PropTypes from 'prop-types';
|
|
25
25
|
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
26
26
|
import { Row } from '../Row';
|
27
27
|
const propTypes = {
|
28
|
-
/**
|
29
|
-
* `Table.Row`
|
30
|
-
*/
|
31
28
|
children: ChildrenPropTypes.oneOf([Row]),
|
32
29
|
hover: PropTypes.bool,
|
33
30
|
isStacked: PropTypes.bool,
|
package/es/Table/Cell/index.js
CHANGED
package/es/Table/Cell/props.js
CHANGED
@@ -26,10 +26,6 @@ const propTypes = {
|
|
26
26
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
27
27
|
isStacked: PropTypes.bool,
|
28
28
|
header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
29
|
-
|
30
|
-
/**
|
31
|
-
* Control the text alignment in cell
|
32
|
-
*/
|
33
29
|
textAlign: PropTypes.oneOf(['start', 'center', 'end'])
|
34
30
|
};
|
35
31
|
const allowedProps = ['children', 'isStacked', 'header', 'textAlign'];
|
@@ -25,7 +25,7 @@ var _dec, _class, _class2, _temp, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
|
|
25
25
|
*/
|
26
26
|
|
27
27
|
/** @jsx jsx */
|
28
|
-
import { Component } from 'react';
|
28
|
+
import React, { Component } from 'react';
|
29
29
|
import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
|
30
30
|
import { IconMiniArrowUpLine, IconMiniArrowDownLine } from '@instructure/ui-icons';
|
31
31
|
import { withStyle, jsx } from '@instructure/emotion';
|
@@ -37,6 +37,7 @@ import { allowedProps, propTypes } from './props';
|
|
37
37
|
parent: Table
|
38
38
|
id: Table.ColHeader
|
39
39
|
---
|
40
|
+
@tsProps
|
40
41
|
**/
|
41
42
|
|
42
43
|
let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class ColHeader extends Component {
|
@@ -47,7 +48,7 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
47
48
|
const _this$props = this.props,
|
48
49
|
id = _this$props.id,
|
49
50
|
onRequestSort = _this$props.onRequestSort;
|
50
|
-
onRequestSort(event, {
|
51
|
+
onRequestSort && onRequestSort(event, {
|
51
52
|
id
|
52
53
|
});
|
53
54
|
};
|
@@ -23,43 +23,13 @@
|
|
23
23
|
*/
|
24
24
|
import PropTypes from 'prop-types';
|
25
25
|
const propTypes = {
|
26
|
-
/**
|
27
|
-
* A unique id for this column. The `id` is also used as option in combobox,
|
28
|
-
* when sortable table is in stacked layout,
|
29
|
-
* and no `stackedSortByLabel` is provided.
|
30
|
-
*/
|
31
26
|
id: PropTypes.string.isRequired,
|
32
|
-
|
33
|
-
/**
|
34
|
-
* A custom string to display as option text in the combobox (instead of
|
35
|
-
* using the `id` prop), when sortable table is in stacked layout.
|
36
|
-
*/
|
37
27
|
stackedSortByLabel: PropTypes.string,
|
38
28
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
39
|
-
|
40
|
-
/**
|
41
|
-
* Control the width of column.
|
42
|
-
*/
|
43
29
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
44
|
-
|
45
|
-
/**
|
46
|
-
* Control the text alignment in column header
|
47
|
-
*/
|
48
30
|
textAlign: PropTypes.oneOf(['start', 'center', 'end']),
|
49
|
-
|
50
|
-
/**
|
51
|
-
* The string of sorting direction
|
52
|
-
*/
|
53
31
|
sortDirection: PropTypes.oneOf(['none', 'ascending', 'descending']),
|
54
|
-
|
55
|
-
/**
|
56
|
-
* Callback fired when column header is clicked. Parameters: `(event, { id })`
|
57
|
-
*/
|
58
32
|
onRequestSort: PropTypes.func,
|
59
|
-
|
60
|
-
/**
|
61
|
-
* The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
|
62
|
-
*/
|
63
33
|
scope: PropTypes.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
|
64
34
|
};
|
65
35
|
const allowedProps = ['id', 'stackedSortByLabel', 'children', 'width', 'textAlign', 'sortDirection', 'onRequestSort', 'scope'];
|
package/es/Table/Head/index.js
CHANGED
@@ -27,7 +27,7 @@ var _dec, _class, _class2, _temp, _ScreenReaderContent;
|
|
27
27
|
*/
|
28
28
|
|
29
29
|
/** @jsx jsx */
|
30
|
-
import { Component, Children } from 'react';
|
30
|
+
import React, { Component, Children } from 'react';
|
31
31
|
import { omitProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
|
32
32
|
import { SimpleSelect } from '@instructure/ui-simple-select';
|
33
33
|
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
|
@@ -44,13 +44,14 @@ import { allowedProps, propTypes } from './props';
|
|
44
44
|
parent: Table
|
45
45
|
id: Table.Head
|
46
46
|
---
|
47
|
+
@tsProps
|
47
48
|
**/
|
48
49
|
|
49
50
|
let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Head extends Component {
|
50
51
|
get isSortable() {
|
51
|
-
const
|
52
|
-
|
53
|
-
row =
|
52
|
+
const _ref = Children.toArray(this.props.children),
|
53
|
+
_ref2 = _slicedToArray(_ref, 1),
|
54
|
+
row = _ref2[0];
|
54
55
|
|
55
56
|
let sortable = false;
|
56
57
|
|
@@ -86,9 +87,9 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
86
87
|
children = _this$props3.children,
|
87
88
|
renderSortLabel = _this$props3.renderSortLabel;
|
88
89
|
|
89
|
-
const
|
90
|
-
|
91
|
-
row =
|
90
|
+
const _ref3 = Children.toArray(children),
|
91
|
+
_ref4 = _slicedToArray(_ref3, 1),
|
92
|
+
row = _ref4[0];
|
92
93
|
|
93
94
|
if (!matchComponentTypes(row, [Row])) {
|
94
95
|
return null;
|
@@ -96,17 +97,17 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
96
97
|
|
97
98
|
const options = [];
|
98
99
|
const clickHandlers = {};
|
99
|
-
let selectedOption
|
100
|
+
let selectedOption;
|
100
101
|
let count = 0;
|
101
102
|
Children.forEach(row.props.children, colHeader => {
|
102
103
|
count += 1;
|
103
104
|
|
104
105
|
if (matchComponentTypes(colHeader, [ColHeader])) {
|
105
|
-
const
|
106
|
-
id =
|
107
|
-
stackedSortByLabel =
|
108
|
-
sortDirection =
|
109
|
-
onRequestSort =
|
106
|
+
const _props = colHeader.props,
|
107
|
+
id = _props.id,
|
108
|
+
stackedSortByLabel = _props.stackedSortByLabel,
|
109
|
+
sortDirection = _props.sortDirection,
|
110
|
+
onRequestSort = _props.onRequestSort;
|
110
111
|
const label = stackedSortByLabel || id;
|
111
112
|
|
112
113
|
if (onRequestSort) {
|
@@ -127,11 +128,14 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
127
128
|
return null;
|
128
129
|
}
|
129
130
|
|
130
|
-
const handleSelect = (event,
|
131
|
-
let value =
|
132
|
-
|
133
|
-
|
134
|
-
|
131
|
+
const handleSelect = (event, _ref5) => {
|
132
|
+
let value = _ref5.value;
|
133
|
+
|
134
|
+
if (value && typeof clickHandlers[value] === 'function') {
|
135
|
+
clickHandlers[value](event, {
|
136
|
+
id: `${value}`
|
137
|
+
});
|
138
|
+
}
|
135
139
|
};
|
136
140
|
|
137
141
|
return jsx("div", {
|
@@ -146,9 +150,9 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
146
150
|
renderBeforeInput: selectedOption && IconCheckLine,
|
147
151
|
value: selectedOption,
|
148
152
|
onChange: handleSelect
|
149
|
-
}, options.map(
|
150
|
-
let id =
|
151
|
-
label =
|
153
|
+
}, options.map(_ref6 => {
|
154
|
+
let id = _ref6.id,
|
155
|
+
label = _ref6.label;
|
152
156
|
return jsx(SimpleSelect.Option, {
|
153
157
|
id: id,
|
154
158
|
key: id,
|
package/es/Table/Head/props.js
CHANGED
@@ -25,9 +25,6 @@ import PropTypes from 'prop-types';
|
|
25
25
|
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
26
26
|
import { Row } from '../Row';
|
27
27
|
const propTypes = {
|
28
|
-
/**
|
29
|
-
* `Table.Row`
|
30
|
-
*/
|
31
28
|
children: ChildrenPropTypes.oneOf([Row]),
|
32
29
|
isStacked: PropTypes.bool,
|
33
30
|
renderSortLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
|
package/es/Table/Row/index.js
CHANGED
package/es/Table/Row/props.js
CHANGED
@@ -27,9 +27,6 @@ import { ColHeader } from '../ColHeader';
|
|
27
27
|
import { RowHeader } from '../RowHeader';
|
28
28
|
import { Cell } from '../Cell';
|
29
29
|
const propTypes = {
|
30
|
-
/**
|
31
|
-
* `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
|
32
|
-
*/
|
33
30
|
children: ChildrenPropTypes.oneOf([ColHeader, RowHeader, Cell]),
|
34
31
|
hover: PropTypes.bool,
|
35
32
|
isStacked: PropTypes.bool,
|
@@ -37,6 +37,7 @@ import { allowedProps, propTypes } from './props';
|
|
37
37
|
parent: Table
|
38
38
|
id: Table.RowHeader
|
39
39
|
---
|
40
|
+
@tsProps
|
40
41
|
**/
|
41
42
|
|
42
43
|
let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class RowHeader extends Component {
|
@@ -25,10 +25,6 @@ import PropTypes from 'prop-types';
|
|
25
25
|
const propTypes = {
|
26
26
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
27
27
|
isStacked: PropTypes.bool,
|
28
|
-
|
29
|
-
/**
|
30
|
-
* Control the text alignment in row header
|
31
|
-
*/
|
32
28
|
textAlign: PropTypes.oneOf(['start', 'center', 'end'])
|
33
29
|
};
|
34
30
|
const allowedProps = ['children', 'isStacked', 'textAlign'];
|
package/es/Table/index.js
CHANGED
@@ -27,7 +27,7 @@ var _dec, _class, _class2, _temp;
|
|
27
27
|
*/
|
28
28
|
|
29
29
|
/** @jsx jsx */
|
30
|
-
import { Component, Children } from 'react';
|
30
|
+
import React, { Component, Children } from 'react';
|
31
31
|
import { matchComponentTypes, safeCloneElement, omitProps } from '@instructure/ui-react-utils';
|
32
32
|
import { View } from '@instructure/ui-view';
|
33
33
|
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
|
@@ -45,6 +45,7 @@ import { allowedProps, propTypes } from './props';
|
|
45
45
|
---
|
46
46
|
category: components
|
47
47
|
---
|
48
|
+
@tsProps
|
48
49
|
**/
|
49
50
|
|
50
51
|
let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Table extends Component {
|
@@ -77,14 +78,14 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
|
|
77
78
|
getHeaders() {
|
78
79
|
const children = this.props.children;
|
79
80
|
|
80
|
-
const
|
81
|
-
|
82
|
-
head =
|
81
|
+
const _ref = Children.toArray(children),
|
82
|
+
_ref2 = _slicedToArray(_ref, 1),
|
83
|
+
head = _ref2[0];
|
83
84
|
|
84
85
|
if (matchComponentTypes(head, [Head])) {
|
85
|
-
const
|
86
|
-
|
87
|
-
row =
|
86
|
+
const _ref3 = Children.toArray(head.props.children),
|
87
|
+
_ref4 = _slicedToArray(_ref3, 1),
|
88
|
+
row = _ref4[0];
|
88
89
|
|
89
90
|
if (matchComponentTypes(row, [Row])) {
|
90
91
|
return Children.map(row.props.children, colHeader => {
|
package/es/Table/props.js
CHANGED
@@ -27,39 +27,11 @@ import { ThemeablePropTypes } from '@instructure/emotion';
|
|
27
27
|
import { Head } from './Head';
|
28
28
|
import { Body } from './Body';
|
29
29
|
const propTypes = {
|
30
|
-
/**
|
31
|
-
* Provide a screen reader friendly description. Anything passed to this
|
32
|
-
* prop will be wrapped by `<ScreenReaderContent>` when it is rendered.
|
33
|
-
*/
|
34
30
|
caption: PropTypes.node.isRequired,
|
35
|
-
|
36
|
-
/**
|
37
|
-
* Build table via `Table.Head` and `Table.Body`
|
38
|
-
*/
|
39
31
|
children: ChildrenPropTypes.oneOf([Head, Body]),
|
40
|
-
|
41
|
-
/**
|
42
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
43
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
44
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
45
|
-
*/
|
46
32
|
margin: ThemeablePropTypes.spacing,
|
47
|
-
|
48
|
-
/**
|
49
|
-
* Provide a reference to the underlying html element
|
50
|
-
*/
|
51
33
|
elementRef: PropTypes.func,
|
52
|
-
|
53
|
-
/**
|
54
|
-
* Highlight each row on hover
|
55
|
-
*/
|
56
34
|
hover: PropTypes.bool,
|
57
|
-
|
58
|
-
/**
|
59
|
-
* `auto` lets the browser determine table column widths based on cell content,
|
60
|
-
* while `fixed` forces columns of equal width. `stacked` renders table in one
|
61
|
-
* column to be more readable on narrow screens
|
62
|
-
*/
|
63
35
|
layout: PropTypes.oneOf(['auto', 'fixed', 'stacked'])
|
64
36
|
};
|
65
37
|
const allowedProps = ['caption', 'children', 'margin', 'elementRef', 'hover', 'layout'];
|
package/lib/Table/Body/index.js
CHANGED
@@ -34,6 +34,7 @@ var _dec, _class, _class2, _temp;
|
|
34
34
|
parent: Table
|
35
35
|
id: Table.Body
|
36
36
|
---
|
37
|
+
@tsProps
|
37
38
|
**/
|
38
39
|
let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Body extends _react.Component {
|
39
40
|
componentDidMount() {
|
@@ -42,7 +43,7 @@ let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
42
43
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
43
44
|
}
|
44
45
|
|
45
|
-
componentDidUpdate(
|
46
|
+
componentDidUpdate() {
|
46
47
|
var _this$props$makeStyle2, _this$props2;
|
47
48
|
|
48
49
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
package/lib/Table/Body/props.js
CHANGED
package/lib/Table/Cell/index.js
CHANGED
@@ -30,6 +30,7 @@ var _dec, _class, _class2, _temp;
|
|
30
30
|
parent: Table
|
31
31
|
id: Table.Cell
|
32
32
|
---
|
33
|
+
@tsProps
|
33
34
|
**/
|
34
35
|
let Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Cell extends _react.Component {
|
35
36
|
componentDidMount() {
|
package/lib/Table/Cell/props.js
CHANGED
@@ -36,10 +36,6 @@ const propTypes = {
|
|
36
36
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
37
37
|
isStacked: _propTypes.default.bool,
|
38
38
|
header: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
39
|
-
|
40
|
-
/**
|
41
|
-
* Control the text alignment in cell
|
42
|
-
*/
|
43
39
|
textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
|
44
40
|
};
|
45
41
|
exports.propTypes = propTypes;
|
@@ -1,5 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
4
|
+
|
3
5
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
6
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
9
|
});
|
8
10
|
exports.default = exports.ColHeader = void 0;
|
9
11
|
|
10
|
-
var _react = require("react");
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
11
13
|
|
12
14
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
13
15
|
|
@@ -32,6 +34,7 @@ var _dec, _class, _class2, _temp, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
|
|
32
34
|
parent: Table
|
33
35
|
id: Table.ColHeader
|
34
36
|
---
|
37
|
+
@tsProps
|
35
38
|
**/
|
36
39
|
let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class ColHeader extends _react.Component {
|
37
40
|
constructor() {
|
@@ -41,7 +44,7 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
41
44
|
const _this$props = this.props,
|
42
45
|
id = _this$props.id,
|
43
46
|
onRequestSort = _this$props.onRequestSort;
|
44
|
-
onRequestSort(event, {
|
47
|
+
onRequestSort && onRequestSort(event, {
|
45
48
|
id
|
46
49
|
});
|
47
50
|
};
|
@@ -33,43 +33,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
33
33
|
* SOFTWARE.
|
34
34
|
*/
|
35
35
|
const propTypes = {
|
36
|
-
/**
|
37
|
-
* A unique id for this column. The `id` is also used as option in combobox,
|
38
|
-
* when sortable table is in stacked layout,
|
39
|
-
* and no `stackedSortByLabel` is provided.
|
40
|
-
*/
|
41
36
|
id: _propTypes.default.string.isRequired,
|
42
|
-
|
43
|
-
/**
|
44
|
-
* A custom string to display as option text in the combobox (instead of
|
45
|
-
* using the `id` prop), when sortable table is in stacked layout.
|
46
|
-
*/
|
47
37
|
stackedSortByLabel: _propTypes.default.string,
|
48
38
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
49
|
-
|
50
|
-
/**
|
51
|
-
* Control the width of column.
|
52
|
-
*/
|
53
39
|
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
54
|
-
|
55
|
-
/**
|
56
|
-
* Control the text alignment in column header
|
57
|
-
*/
|
58
40
|
textAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
|
59
|
-
|
60
|
-
/**
|
61
|
-
* The string of sorting direction
|
62
|
-
*/
|
63
41
|
sortDirection: _propTypes.default.oneOf(['none', 'ascending', 'descending']),
|
64
|
-
|
65
|
-
/**
|
66
|
-
* Callback fired when column header is clicked. Parameters: `(event, { id })`
|
67
|
-
*/
|
68
42
|
onRequestSort: _propTypes.default.func,
|
69
|
-
|
70
|
-
/**
|
71
|
-
* The column header scope attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
|
72
|
-
*/
|
73
43
|
scope: _propTypes.default.oneOf(['row', 'col', 'rowgroup', 'colgroup', 'auto'])
|
74
44
|
};
|
75
45
|
exports.propTypes = propTypes;
|
package/lib/Table/Head/index.js
CHANGED
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
4
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -9,7 +11,7 @@ exports.default = exports.Head = void 0;
|
|
9
11
|
|
10
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
13
|
|
12
|
-
var _react = require("react");
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
13
15
|
|
14
16
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
15
17
|
|
@@ -35,7 +37,7 @@ var _Row = require("../Row");
|
|
35
37
|
|
36
38
|
var _ColHeader = require("../ColHeader");
|
37
39
|
|
38
|
-
var
|
40
|
+
var _props2 = require("./props");
|
39
41
|
|
40
42
|
var _dec, _class, _class2, _temp, _ScreenReaderContent;
|
41
43
|
|
@@ -44,12 +46,13 @@ var _dec, _class, _class2, _temp, _ScreenReaderContent;
|
|
44
46
|
parent: Table
|
45
47
|
id: Table.Head
|
46
48
|
---
|
49
|
+
@tsProps
|
47
50
|
**/
|
48
51
|
let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Head extends _react.Component {
|
49
52
|
get isSortable() {
|
50
|
-
const
|
51
|
-
|
52
|
-
row =
|
53
|
+
const _ref = _react.Children.toArray(this.props.children),
|
54
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 1),
|
55
|
+
row = _ref2[0];
|
53
56
|
|
54
57
|
let sortable = false;
|
55
58
|
|
@@ -85,9 +88,9 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
85
88
|
children = _this$props3.children,
|
86
89
|
renderSortLabel = _this$props3.renderSortLabel;
|
87
90
|
|
88
|
-
const
|
89
|
-
|
90
|
-
row =
|
91
|
+
const _ref3 = _react.Children.toArray(children),
|
92
|
+
_ref4 = (0, _slicedToArray2.default)(_ref3, 1),
|
93
|
+
row = _ref4[0];
|
91
94
|
|
92
95
|
if (!(0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
|
93
96
|
return null;
|
@@ -95,18 +98,18 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
95
98
|
|
96
99
|
const options = [];
|
97
100
|
const clickHandlers = {};
|
98
|
-
let selectedOption
|
101
|
+
let selectedOption;
|
99
102
|
let count = 0;
|
100
103
|
|
101
104
|
_react.Children.forEach(row.props.children, colHeader => {
|
102
105
|
count += 1;
|
103
106
|
|
104
107
|
if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
|
105
|
-
const
|
106
|
-
id =
|
107
|
-
stackedSortByLabel =
|
108
|
-
sortDirection =
|
109
|
-
onRequestSort =
|
108
|
+
const _props = colHeader.props,
|
109
|
+
id = _props.id,
|
110
|
+
stackedSortByLabel = _props.stackedSortByLabel,
|
111
|
+
sortDirection = _props.sortDirection,
|
112
|
+
onRequestSort = _props.onRequestSort;
|
110
113
|
const label = stackedSortByLabel || id;
|
111
114
|
|
112
115
|
if (onRequestSort) {
|
@@ -127,11 +130,14 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
127
130
|
return null;
|
128
131
|
}
|
129
132
|
|
130
|
-
const handleSelect = (event,
|
131
|
-
let value =
|
132
|
-
|
133
|
-
|
134
|
-
|
133
|
+
const handleSelect = (event, _ref5) => {
|
134
|
+
let value = _ref5.value;
|
135
|
+
|
136
|
+
if (value && typeof clickHandlers[value] === 'function') {
|
137
|
+
clickHandlers[value](event, {
|
138
|
+
id: `${value}`
|
139
|
+
});
|
140
|
+
}
|
135
141
|
};
|
136
142
|
|
137
143
|
return (0, _emotion.jsx)("div", {
|
@@ -146,9 +152,9 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
146
152
|
renderBeforeInput: selectedOption && _IconCheckLine.IconCheckLine,
|
147
153
|
value: selectedOption,
|
148
154
|
onChange: handleSelect
|
149
|
-
}, options.map(
|
150
|
-
let id =
|
151
|
-
label =
|
155
|
+
}, options.map(_ref6 => {
|
156
|
+
let id = _ref6.id,
|
157
|
+
label = _ref6.label;
|
152
158
|
return (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
|
153
159
|
id: id,
|
154
160
|
key: id,
|
@@ -172,7 +178,7 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
172
178
|
}), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
|
173
179
|
}
|
174
180
|
|
175
|
-
}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps =
|
181
|
+
}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = _props2.allowedProps, _class2.propTypes = _props2.propTypes, _class2.defaultProps = {
|
176
182
|
children: null
|
177
183
|
}, _temp)) || _class);
|
178
184
|
exports.Head = Head;
|
package/lib/Table/Head/props.js
CHANGED
@@ -37,9 +37,6 @@ var _Row = require("../Row");
|
|
37
37
|
* SOFTWARE.
|
38
38
|
*/
|
39
39
|
const propTypes = {
|
40
|
-
/**
|
41
|
-
* `Table.Row`
|
42
|
-
*/
|
43
40
|
children: _Children.Children.oneOf([_Row.Row]),
|
44
41
|
isStacked: _propTypes.default.bool,
|
45
42
|
renderSortLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
|
package/lib/Table/Row/index.js
CHANGED
@@ -38,6 +38,7 @@ var _dec, _class, _class2, _temp;
|
|
38
38
|
parent: Table
|
39
39
|
id: Table.Row
|
40
40
|
---
|
41
|
+
@tsProps
|
41
42
|
**/
|
42
43
|
let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Row extends _react.Component {
|
43
44
|
componentDidMount() {
|
package/lib/Table/Row/props.js
CHANGED
@@ -41,9 +41,6 @@ var _Cell = require("../Cell");
|
|
41
41
|
* SOFTWARE.
|
42
42
|
*/
|
43
43
|
const propTypes = {
|
44
|
-
/**
|
45
|
-
* `Table.ColHeader`, `Table.RowHeader` or `Table.Cell`
|
46
|
-
*/
|
47
44
|
children: _Children.Children.oneOf([_ColHeader.ColHeader, _RowHeader.RowHeader, _Cell.Cell]),
|
48
45
|
hover: _propTypes.default.bool,
|
49
46
|
isStacked: _propTypes.default.bool,
|
@@ -30,6 +30,7 @@ var _dec, _class, _class2, _temp;
|
|
30
30
|
parent: Table
|
31
31
|
id: Table.RowHeader
|
32
32
|
---
|
33
|
+
@tsProps
|
33
34
|
**/
|
34
35
|
let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class RowHeader extends _react.Component {
|
35
36
|
componentDidMount() {
|
@@ -35,10 +35,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
35
35
|
const propTypes = {
|
36
36
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
37
37
|
isStacked: _propTypes.default.bool,
|
38
|
-
|
39
|
-
/**
|
40
|
-
* Control the text alignment in row header
|
41
|
-
*/
|
42
38
|
textAlign: _propTypes.default.oneOf(['start', 'center', 'end'])
|
43
39
|
};
|
44
40
|
exports.propTypes = propTypes;
|