@instructure/ui-table 8.33.1 → 8.33.2-snapshot-5
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 +8 -0
- package/es/Table/Body/index.js +6 -12
- package/es/Table/Body/props.js +1 -0
- package/es/Table/Body/styles.js +0 -1
- package/es/Table/Body/theme.js +3 -3
- package/es/Table/Cell/index.js +5 -11
- package/es/Table/Cell/props.js +1 -0
- package/es/Table/Cell/styles.js +0 -1
- package/es/Table/Cell/theme.js +4 -4
- package/es/Table/ColHeader/index.js +11 -24
- package/es/Table/ColHeader/props.js +1 -0
- package/es/Table/ColHeader/styles.js +1 -2
- package/es/Table/ColHeader/theme.js +5 -5
- package/es/Table/Head/index.js +15 -38
- package/es/Table/Head/props.js +1 -0
- package/es/Table/Head/styles.js +0 -1
- package/es/Table/Head/theme.js +3 -3
- package/es/Table/Row/index.js +5 -14
- package/es/Table/Row/props.js +1 -0
- package/es/Table/Row/styles.js +1 -2
- package/es/Table/Row/theme.js +5 -5
- package/es/Table/RowHeader/index.js +4 -10
- package/es/Table/RowHeader/props.js +1 -0
- package/es/Table/RowHeader/styles.js +0 -1
- package/es/Table/RowHeader/theme.js +4 -4
- package/es/Table/index.js +11 -28
- package/es/Table/props.js +1 -0
- package/es/Table/styles.js +0 -1
- package/es/Table/theme.js +4 -4
- package/lib/Table/Body/index.js +5 -23
- package/lib/Table/Body/props.js +1 -5
- package/lib/Table/Body/styles.js +0 -2
- package/lib/Table/Body/theme.js +3 -4
- package/lib/Table/Cell/index.js +4 -20
- package/lib/Table/Cell/props.js +1 -3
- package/lib/Table/Cell/styles.js +0 -2
- package/lib/Table/Cell/theme.js +4 -5
- package/lib/Table/ColHeader/index.js +10 -36
- package/lib/Table/ColHeader/props.js +1 -3
- package/lib/Table/ColHeader/styles.js +1 -3
- package/lib/Table/ColHeader/theme.js +5 -6
- package/lib/Table/Head/index.js +14 -54
- package/lib/Table/Head/props.js +1 -5
- package/lib/Table/Head/styles.js +0 -2
- package/lib/Table/Head/theme.js +3 -4
- package/lib/Table/Row/index.js +4 -27
- package/lib/Table/Row/props.js +1 -7
- package/lib/Table/Row/styles.js +1 -3
- package/lib/Table/Row/theme.js +5 -6
- package/lib/Table/RowHeader/index.js +3 -19
- package/lib/Table/RowHeader/props.js +1 -3
- package/lib/Table/RowHeader/styles.js +0 -2
- package/lib/Table/RowHeader/theme.js +4 -5
- package/lib/Table/index.js +10 -45
- package/lib/Table/props.js +1 -7
- package/lib/Table/styles.js +0 -2
- package/lib/Table/theme.js +4 -5
- package/lib/index.js +0 -1
- package/package.json +16 -16
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,14 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @instructure/ui-table
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
|
6
14
|
## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
|
7
15
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-table
|
package/es/Table/Body/index.js
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
var _dec, _class, _class2;
|
2
|
-
|
3
2
|
/*
|
4
3
|
* The MIT License (MIT)
|
5
4
|
*
|
@@ -33,6 +32,7 @@ import generateStyle from './styles';
|
|
33
32
|
import generateComponentTheme from './theme';
|
34
33
|
import { Row } from '../Row';
|
35
34
|
import { allowedProps, propTypes } from './props';
|
35
|
+
|
36
36
|
/**
|
37
37
|
---
|
38
38
|
parent: Table
|
@@ -40,27 +40,22 @@ id: Table.Body
|
|
40
40
|
---
|
41
41
|
@tsProps
|
42
42
|
**/
|
43
|
-
|
44
43
|
let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Body extends Component {
|
45
44
|
componentDidMount() {
|
46
45
|
var _this$props$makeStyle, _this$props;
|
47
|
-
|
48
46
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
49
47
|
}
|
50
|
-
|
51
48
|
componentDidUpdate() {
|
52
49
|
var _this$props$makeStyle2, _this$props2;
|
53
|
-
|
54
50
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
55
51
|
}
|
56
|
-
|
57
52
|
render() {
|
58
53
|
const _this$props3 = this.props,
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
54
|
+
children = _this$props3.children,
|
55
|
+
hover = _this$props3.hover,
|
56
|
+
isStacked = _this$props3.isStacked,
|
57
|
+
headers = _this$props3.headers,
|
58
|
+
styles = _this$props3.styles;
|
64
59
|
return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.allowedProps), Body), {
|
65
60
|
as: isStacked ? 'div' : 'tbody',
|
66
61
|
css: styles === null || styles === void 0 ? void 0 : styles.body,
|
@@ -72,7 +67,6 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
72
67
|
headers
|
73
68
|
}) : null));
|
74
69
|
}
|
75
|
-
|
76
70
|
}, _class2.displayName = "Body", _class2.componentId = 'Table.Body', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
77
71
|
children: null
|
78
72
|
}, _class2)) || _class);
|
package/es/Table/Body/props.js
CHANGED
package/es/Table/Body/styles.js
CHANGED
package/es/Table/Body/theme.js
CHANGED
@@ -29,7 +29,7 @@
|
|
29
29
|
*/
|
30
30
|
const generateComponentTheme = theme => {
|
31
31
|
const colors = theme.colors,
|
32
|
-
|
32
|
+
typography = theme.typography;
|
33
33
|
const componentVariables = {
|
34
34
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
35
35
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -37,8 +37,8 @@ const generateComponentTheme = theme => {
|
|
37
37
|
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
38
38
|
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
39
39
|
};
|
40
|
-
return {
|
40
|
+
return {
|
41
|
+
...componentVariables
|
41
42
|
};
|
42
43
|
};
|
43
|
-
|
44
44
|
export default generateComponentTheme;
|
package/es/Table/Cell/index.js
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
var _dec, _class, _class2;
|
2
|
-
|
3
2
|
/*
|
4
3
|
* The MIT License (MIT)
|
5
4
|
*
|
@@ -32,6 +31,7 @@ import { withStyle, jsx } from '@instructure/emotion';
|
|
32
31
|
import generateStyle from './styles';
|
33
32
|
import generateComponentTheme from './theme';
|
34
33
|
import { allowedProps, propTypes } from './props';
|
34
|
+
|
35
35
|
/**
|
36
36
|
---
|
37
37
|
parent: Table
|
@@ -39,33 +39,27 @@ id: Table.Cell
|
|
39
39
|
---
|
40
40
|
@tsProps
|
41
41
|
**/
|
42
|
-
|
43
42
|
let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Cell extends Component {
|
44
43
|
componentDidMount() {
|
45
44
|
var _this$props$makeStyle, _this$props;
|
46
|
-
|
47
45
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
48
46
|
}
|
49
|
-
|
50
47
|
componentDidUpdate() {
|
51
48
|
var _this$props$makeStyle2, _this$props2;
|
52
|
-
|
53
49
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
54
50
|
}
|
55
|
-
|
56
51
|
render() {
|
57
52
|
const _this$props3 = this.props,
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
53
|
+
children = _this$props3.children,
|
54
|
+
styles = _this$props3.styles,
|
55
|
+
isStacked = _this$props3.isStacked,
|
56
|
+
header = _this$props3.header;
|
62
57
|
return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell), {
|
63
58
|
as: isStacked ? 'div' : 'td',
|
64
59
|
css: styles === null || styles === void 0 ? void 0 : styles.cell,
|
65
60
|
role: isStacked ? 'cell' : void 0
|
66
61
|
}), header && callRenderProp(header), header && ': ', callRenderProp(children));
|
67
62
|
}
|
68
|
-
|
69
63
|
}, _class2.displayName = "Cell", _class2.componentId = 'Table.Cell', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
70
64
|
textAlign: 'start',
|
71
65
|
children: null
|
package/es/Table/Cell/props.js
CHANGED
package/es/Table/Cell/styles.js
CHANGED
package/es/Table/Cell/theme.js
CHANGED
@@ -29,8 +29,8 @@
|
|
29
29
|
*/
|
30
30
|
const generateComponentTheme = theme => {
|
31
31
|
const colors = theme.colors,
|
32
|
-
|
33
|
-
|
32
|
+
typography = theme.typography,
|
33
|
+
spacing = theme.spacing;
|
34
34
|
const componentVariables = {
|
35
35
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
36
36
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -41,8 +41,8 @@ const generateComponentTheme = theme => {
|
|
41
41
|
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
42
42
|
padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
|
43
43
|
};
|
44
|
-
return {
|
44
|
+
return {
|
45
|
+
...componentVariables
|
45
46
|
};
|
46
47
|
};
|
47
|
-
|
48
48
|
export default generateComponentTheme;
|
@@ -1,5 +1,4 @@
|
|
1
1
|
var _dec, _class, _class2, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
|
2
|
-
|
3
2
|
/*
|
4
3
|
* The MIT License (MIT)
|
5
4
|
*
|
@@ -32,6 +31,7 @@ import { withStyle, jsx } from '@instructure/emotion';
|
|
32
31
|
import generateStyle from './styles';
|
33
32
|
import generateComponentTheme from './theme';
|
34
33
|
import { allowedProps, propTypes } from './props';
|
34
|
+
|
35
35
|
/**
|
36
36
|
---
|
37
37
|
parent: Table
|
@@ -39,46 +39,36 @@ id: Table.ColHeader
|
|
39
39
|
---
|
40
40
|
@tsProps
|
41
41
|
**/
|
42
|
-
|
43
42
|
let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class ColHeader extends Component {
|
44
43
|
constructor() {
|
45
44
|
super(...arguments);
|
46
|
-
|
47
45
|
this.handleClick = event => {
|
48
46
|
const _this$props = this.props,
|
49
|
-
|
50
|
-
|
47
|
+
id = _this$props.id,
|
48
|
+
onRequestSort = _this$props.onRequestSort;
|
51
49
|
onRequestSort && onRequestSort(event, {
|
52
50
|
id
|
53
51
|
});
|
54
52
|
};
|
55
53
|
}
|
56
|
-
|
57
54
|
componentDidMount() {
|
58
55
|
var _this$props$makeStyle, _this$props2;
|
59
|
-
|
60
56
|
(_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
|
61
57
|
}
|
62
|
-
|
63
58
|
componentDidUpdate() {
|
64
59
|
var _this$props$makeStyle2, _this$props3;
|
65
|
-
|
66
60
|
(_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
|
67
61
|
}
|
68
|
-
|
69
62
|
renderSortArrow() {
|
70
63
|
const _this$props4 = this.props,
|
71
|
-
|
72
|
-
|
73
|
-
|
64
|
+
sortDirection = _this$props4.sortDirection,
|
65
|
+
onRequestSort = _this$props4.onRequestSort;
|
74
66
|
if (sortDirection === 'ascending') {
|
75
67
|
return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = jsx(IconMiniArrowUpLine, null));
|
76
68
|
}
|
77
|
-
|
78
69
|
if (sortDirection === 'descending') {
|
79
70
|
return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = jsx(IconMiniArrowDownLine, null));
|
80
71
|
}
|
81
|
-
|
82
72
|
if (onRequestSort) {
|
83
73
|
return jsx(IconMiniArrowDoubleLine, {
|
84
74
|
css: {
|
@@ -86,18 +76,16 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
86
76
|
}
|
87
77
|
});
|
88
78
|
}
|
89
|
-
|
90
79
|
return void 0;
|
91
80
|
}
|
92
|
-
|
93
81
|
render() {
|
94
82
|
const _this$props5 = this.props,
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
83
|
+
onRequestSort = _this$props5.onRequestSort,
|
84
|
+
width = _this$props5.width,
|
85
|
+
children = _this$props5.children,
|
86
|
+
sortDirection = _this$props5.sortDirection,
|
87
|
+
scope = _this$props5.scope,
|
88
|
+
styles = _this$props5.styles;
|
101
89
|
return jsx("th", Object.assign({}, omitProps(this.props, ColHeader.allowedProps), {
|
102
90
|
css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
|
103
91
|
style: {
|
@@ -112,7 +100,6 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
112
100
|
css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
|
113
101
|
}, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
|
114
102
|
}
|
115
|
-
|
116
103
|
}, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
117
104
|
textAlign: 'start',
|
118
105
|
sortDirection: 'none',
|
@@ -34,7 +34,7 @@
|
|
34
34
|
*/
|
35
35
|
const generateStyle = (componentTheme, props) => {
|
36
36
|
const onRequestSort = props.onRequestSort,
|
37
|
-
|
37
|
+
textAlign = props.textAlign;
|
38
38
|
const headerStyle = {
|
39
39
|
color: componentTheme.color,
|
40
40
|
fontSize: componentTheme.fontSize,
|
@@ -90,5 +90,4 @@ const generateStyle = (componentTheme, props) => {
|
|
90
90
|
}
|
91
91
|
};
|
92
92
|
};
|
93
|
-
|
94
93
|
export default generateStyle;
|
@@ -29,9 +29,9 @@
|
|
29
29
|
*/
|
30
30
|
const generateComponentTheme = theme => {
|
31
31
|
const typography = theme.typography,
|
32
|
-
|
33
|
-
|
34
|
-
|
32
|
+
colors = theme.colors,
|
33
|
+
borders = theme.borders,
|
34
|
+
spacing = theme.spacing;
|
35
35
|
const componentVariables = {
|
36
36
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
37
37
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -44,8 +44,8 @@ const generateComponentTheme = theme => {
|
|
44
44
|
focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
|
45
45
|
focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
|
46
46
|
};
|
47
|
-
return {
|
47
|
+
return {
|
48
|
+
...componentVariables
|
48
49
|
};
|
49
50
|
};
|
50
|
-
|
51
51
|
export default generateComponentTheme;
|
package/es/Table/Head/index.js
CHANGED
@@ -1,7 +1,5 @@
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
2
|
-
|
3
2
|
var _dec, _class, _class2, _ScreenReaderContent;
|
4
|
-
|
5
3
|
/*
|
6
4
|
* The MIT License (MIT)
|
7
5
|
*
|
@@ -39,6 +37,7 @@ import generateComponentTheme from './theme';
|
|
39
37
|
import { Row } from '../Row';
|
40
38
|
import { ColHeader } from '../ColHeader';
|
41
39
|
import { allowedProps, propTypes } from './props';
|
40
|
+
|
42
41
|
/**
|
43
42
|
---
|
44
43
|
parent: Table
|
@@ -46,15 +45,12 @@ id: Table.Head
|
|
46
45
|
---
|
47
46
|
@tsProps
|
48
47
|
**/
|
49
|
-
|
50
48
|
let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Head extends Component {
|
51
49
|
get isSortable() {
|
52
50
|
const _ref = Children.toArray(this.props.children),
|
53
|
-
|
54
|
-
|
55
|
-
|
51
|
+
_ref2 = _slicedToArray(_ref, 1),
|
52
|
+
row = _ref2[0];
|
56
53
|
let sortable = false;
|
57
|
-
|
58
54
|
if (row) {
|
59
55
|
Children.forEach(row.props.children, colHeader => {
|
60
56
|
if (matchComponentTypes(colHeader, [ColHeader])) {
|
@@ -62,82 +58,65 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
62
58
|
}
|
63
59
|
});
|
64
60
|
}
|
65
|
-
|
66
61
|
return sortable;
|
67
62
|
}
|
68
|
-
|
69
63
|
componentDidMount() {
|
70
64
|
var _this$props$makeStyle, _this$props;
|
71
|
-
|
72
65
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
73
66
|
}
|
74
|
-
|
75
67
|
componentDidUpdate() {
|
76
68
|
var _this$props$makeStyle2, _this$props2;
|
77
|
-
|
78
69
|
if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
|
79
70
|
warn(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
|
80
71
|
}
|
81
|
-
|
82
72
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
83
73
|
}
|
84
|
-
|
85
74
|
renderSelect() {
|
86
75
|
const _this$props3 = this.props,
|
87
|
-
|
88
|
-
|
89
|
-
|
76
|
+
children = _this$props3.children,
|
77
|
+
renderSortLabel = _this$props3.renderSortLabel;
|
90
78
|
const _ref3 = Children.toArray(children),
|
91
|
-
|
92
|
-
|
93
|
-
|
79
|
+
_ref4 = _slicedToArray(_ref3, 1),
|
80
|
+
row = _ref4[0];
|
94
81
|
if (!matchComponentTypes(row, [Row])) {
|
95
82
|
return null;
|
96
83
|
}
|
97
|
-
|
98
84
|
const options = [];
|
99
85
|
const clickHandlers = {};
|
100
86
|
let selectedOption;
|
101
87
|
let count = 0;
|
102
88
|
Children.forEach(row.props.children, colHeader => {
|
103
89
|
count += 1;
|
104
|
-
|
105
90
|
if (matchComponentTypes(colHeader, [ColHeader])) {
|
106
91
|
const _colHeader$props = colHeader.props,
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
92
|
+
id = _colHeader$props.id,
|
93
|
+
stackedSortByLabel = _colHeader$props.stackedSortByLabel,
|
94
|
+
sortDirection = _colHeader$props.sortDirection,
|
95
|
+
onRequestSort = _colHeader$props.onRequestSort;
|
111
96
|
const label = stackedSortByLabel || id;
|
112
|
-
|
113
97
|
if (onRequestSort) {
|
114
98
|
options.push({
|
115
99
|
id,
|
116
100
|
label
|
117
101
|
});
|
118
102
|
clickHandlers[id] = onRequestSort;
|
119
|
-
|
120
103
|
if (sortDirection !== 'none') {
|
121
104
|
selectedOption = id;
|
122
105
|
}
|
123
106
|
}
|
124
107
|
}
|
125
108
|
});
|
126
|
-
|
127
109
|
if (!options.length) {
|
128
110
|
return null;
|
129
111
|
}
|
130
|
-
|
131
112
|
const handleSelect = (event, _ref5) => {
|
132
113
|
let value = _ref5.value;
|
133
|
-
|
134
114
|
if (value && typeof clickHandlers[value] === 'function') {
|
135
115
|
clickHandlers[value](event, {
|
136
116
|
id: `${value}`
|
137
117
|
});
|
138
118
|
}
|
139
119
|
};
|
140
|
-
|
141
120
|
return jsx("div", {
|
142
121
|
role: "rowgroup"
|
143
122
|
}, jsx("div", {
|
@@ -152,7 +131,7 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
152
131
|
onChange: handleSelect
|
153
132
|
}, options.map(_ref6 => {
|
154
133
|
let id = _ref6.id,
|
155
|
-
|
134
|
+
label = _ref6.label;
|
156
135
|
return jsx(SimpleSelect.Option, {
|
157
136
|
id: id,
|
158
137
|
key: id,
|
@@ -165,17 +144,15 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
165
144
|
}, label);
|
166
145
|
})))));
|
167
146
|
}
|
168
|
-
|
169
147
|
render() {
|
170
148
|
const _this$props4 = this.props,
|
171
|
-
|
172
|
-
|
173
|
-
|
149
|
+
children = _this$props4.children,
|
150
|
+
isStacked = _this$props4.isStacked,
|
151
|
+
styles = _this$props4.styles;
|
174
152
|
return isStacked ? this.renderSelect() : jsx("thead", Object.assign({}, omitProps(this.props, Head.allowedProps), {
|
175
153
|
css: styles === null || styles === void 0 ? void 0 : styles.head
|
176
154
|
}), Children.map(children, child => matchComponentTypes(child, [Row]) ? child : null));
|
177
155
|
}
|
178
|
-
|
179
156
|
}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
180
157
|
children: null
|
181
158
|
}, _class2)) || _class);
|
package/es/Table/Head/props.js
CHANGED
package/es/Table/Head/styles.js
CHANGED
package/es/Table/Head/theme.js
CHANGED
@@ -29,7 +29,7 @@
|
|
29
29
|
*/
|
30
30
|
const generateComponentTheme = theme => {
|
31
31
|
const colors = theme.colors,
|
32
|
-
|
32
|
+
typography = theme.typography;
|
33
33
|
const componentVariables = {
|
34
34
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
35
35
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -37,8 +37,8 @@ const generateComponentTheme = theme => {
|
|
37
37
|
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
38
38
|
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
39
39
|
};
|
40
|
-
return {
|
40
|
+
return {
|
41
|
+
...componentVariables
|
41
42
|
};
|
42
43
|
};
|
43
|
-
|
44
44
|
export default generateComponentTheme;
|
package/es/Table/Row/index.js
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
var _dec, _class, _class2;
|
2
|
-
|
3
2
|
/*
|
4
3
|
* The MIT License (MIT)
|
5
4
|
*
|
@@ -35,6 +34,7 @@ import { ColHeader } from '../ColHeader';
|
|
35
34
|
import { RowHeader } from '../RowHeader';
|
36
35
|
import { Cell } from '../Cell';
|
37
36
|
import { allowedProps, propTypes } from './props';
|
37
|
+
|
38
38
|
/**
|
39
39
|
---
|
40
40
|
parent: Table
|
@@ -42,26 +42,21 @@ id: Table.Row
|
|
42
42
|
---
|
43
43
|
@tsProps
|
44
44
|
**/
|
45
|
-
|
46
45
|
let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Row extends Component {
|
47
46
|
componentDidMount() {
|
48
47
|
var _this$props$makeStyle, _this$props;
|
49
|
-
|
50
48
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
51
49
|
}
|
52
|
-
|
53
50
|
componentDidUpdate() {
|
54
51
|
var _this$props$makeStyle2, _this$props2;
|
55
|
-
|
56
52
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
57
53
|
}
|
58
|
-
|
59
54
|
render() {
|
60
55
|
const _this$props3 = this.props,
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
56
|
+
children = _this$props3.children,
|
57
|
+
styles = _this$props3.styles,
|
58
|
+
isStacked = _this$props3.isStacked,
|
59
|
+
headers = _this$props3.headers;
|
65
60
|
return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Row.allowedProps), Row), {
|
66
61
|
as: isStacked ? 'div' : 'tr',
|
67
62
|
css: styles === null || styles === void 0 ? void 0 : styles.row,
|
@@ -70,14 +65,12 @@ let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
70
65
|
if (matchComponentTypes(child, [ColHeader])) {
|
71
66
|
return child;
|
72
67
|
}
|
73
|
-
|
74
68
|
if (matchComponentTypes(child, [RowHeader])) {
|
75
69
|
return safeCloneElement(child, {
|
76
70
|
key: child.props.name,
|
77
71
|
isStacked
|
78
72
|
});
|
79
73
|
}
|
80
|
-
|
81
74
|
if (matchComponentTypes(child, [Cell])) {
|
82
75
|
return safeCloneElement(child, {
|
83
76
|
key: child.props.name,
|
@@ -85,11 +78,9 @@ let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
85
78
|
header: headers && headers[index]
|
86
79
|
});
|
87
80
|
}
|
88
|
-
|
89
81
|
return null;
|
90
82
|
}));
|
91
83
|
}
|
92
|
-
|
93
84
|
}, _class2.displayName = "Row", _class2.componentId = 'Table.Row', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
94
85
|
children: null
|
95
86
|
}, _class2)) || _class);
|
package/es/Table/Row/props.js
CHANGED
@@ -21,6 +21,7 @@
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
22
22
|
* SOFTWARE.
|
23
23
|
*/
|
24
|
+
|
24
25
|
import PropTypes from 'prop-types';
|
25
26
|
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
26
27
|
import { ColHeader } from '../ColHeader';
|
package/es/Table/Row/styles.js
CHANGED
@@ -34,7 +34,7 @@
|
|
34
34
|
*/
|
35
35
|
const generateStyle = (componentTheme, props) => {
|
36
36
|
const hover = props.hover,
|
37
|
-
|
37
|
+
isStacked = props.isStacked;
|
38
38
|
return {
|
39
39
|
row: {
|
40
40
|
label: 'row',
|
@@ -61,5 +61,4 @@ const generateStyle = (componentTheme, props) => {
|
|
61
61
|
}
|
62
62
|
};
|
63
63
|
};
|
64
|
-
|
65
64
|
export default generateStyle;
|
package/es/Table/Row/theme.js
CHANGED
@@ -29,9 +29,9 @@
|
|
29
29
|
*/
|
30
30
|
const generateComponentTheme = theme => {
|
31
31
|
const colors = theme.colors,
|
32
|
-
|
33
|
-
|
34
|
-
|
32
|
+
typography = theme.typography,
|
33
|
+
spacing = theme.spacing,
|
34
|
+
themeName = theme.key;
|
35
35
|
const themeSpecificStyle = {
|
36
36
|
canvas: {
|
37
37
|
hoverBorderColor: theme['ic-brand-primary']
|
@@ -47,9 +47,9 @@ const generateComponentTheme = theme => {
|
|
47
47
|
hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
|
48
48
|
padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`
|
49
49
|
};
|
50
|
-
return {
|
50
|
+
return {
|
51
|
+
...componentVariables,
|
51
52
|
...themeSpecificStyle[themeName]
|
52
53
|
};
|
53
54
|
};
|
54
|
-
|
55
55
|
export default generateComponentTheme;
|