@instructure/ui-table 8.33.1-snapshot-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 +4 -8
- 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
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -36,9 +35,9 @@ exports.default = void 0;
|
|
36
35
|
*/
|
37
36
|
const generateComponentTheme = theme => {
|
38
37
|
const typography = theme.typography,
|
39
|
-
|
40
|
-
|
41
|
-
|
38
|
+
colors = theme.colors,
|
39
|
+
borders = theme.borders,
|
40
|
+
spacing = theme.spacing;
|
42
41
|
const componentVariables = {
|
43
42
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
44
43
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -51,9 +50,9 @@ const generateComponentTheme = theme => {
|
|
51
50
|
focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
|
52
51
|
focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
|
53
52
|
};
|
54
|
-
return {
|
53
|
+
return {
|
54
|
+
...componentVariables
|
55
55
|
};
|
56
56
|
};
|
57
|
-
|
58
57
|
var _default = generateComponentTheme;
|
59
58
|
exports.default = _default;
|
package/lib/Table/Head/index.js
CHANGED
@@ -1,44 +1,26 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
|
-
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
8
7
|
exports.default = exports.Head = void 0;
|
9
|
-
|
10
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11
|
-
|
12
9
|
var _react = require("react");
|
13
|
-
|
14
10
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
15
|
-
|
16
11
|
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
17
|
-
|
18
12
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
19
|
-
|
20
13
|
var _SimpleSelect = require("@instructure/ui-simple-select/lib/SimpleSelect");
|
21
|
-
|
22
14
|
var _ScreenReaderContent2 = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
23
|
-
|
24
15
|
var _IconCheckLine = require("@instructure/ui-icons/lib/IconCheckLine.js");
|
25
|
-
|
26
16
|
var _console = require("@instructure/console");
|
27
|
-
|
28
17
|
var _emotion = require("@instructure/emotion");
|
29
|
-
|
30
18
|
var _styles = _interopRequireDefault(require("./styles"));
|
31
|
-
|
32
19
|
var _theme = _interopRequireDefault(require("./theme"));
|
33
|
-
|
34
20
|
var _Row = require("../Row");
|
35
|
-
|
36
21
|
var _ColHeader = require("../ColHeader");
|
37
|
-
|
38
22
|
var _props = require("./props");
|
39
|
-
|
40
23
|
var _dec, _class, _class2, _ScreenReaderContent;
|
41
|
-
|
42
24
|
/**
|
43
25
|
---
|
44
26
|
parent: Table
|
@@ -49,11 +31,9 @@ id: Table.Head
|
|
49
31
|
let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Head extends _react.Component {
|
50
32
|
get isSortable() {
|
51
33
|
const _ref = _react.Children.toArray(this.props.children),
|
52
|
-
|
53
|
-
|
54
|
-
|
34
|
+
_ref2 = (0, _slicedToArray2.default)(_ref, 1),
|
35
|
+
row = _ref2[0];
|
55
36
|
let sortable = false;
|
56
|
-
|
57
37
|
if (row) {
|
58
38
|
_react.Children.forEach(row.props.children, colHeader => {
|
59
39
|
if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
|
@@ -61,83 +41,65 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
61
41
|
}
|
62
42
|
});
|
63
43
|
}
|
64
|
-
|
65
44
|
return sortable;
|
66
45
|
}
|
67
|
-
|
68
46
|
componentDidMount() {
|
69
47
|
var _this$props$makeStyle, _this$props;
|
70
|
-
|
71
48
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
72
49
|
}
|
73
|
-
|
74
50
|
componentDidUpdate() {
|
75
51
|
var _this$props$makeStyle2, _this$props2;
|
76
|
-
|
77
52
|
if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
|
78
53
|
(0, _console.warn)(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
|
79
54
|
}
|
80
|
-
|
81
55
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
82
56
|
}
|
83
|
-
|
84
57
|
renderSelect() {
|
85
58
|
const _this$props3 = this.props,
|
86
|
-
|
87
|
-
|
88
|
-
|
59
|
+
children = _this$props3.children,
|
60
|
+
renderSortLabel = _this$props3.renderSortLabel;
|
89
61
|
const _ref3 = _react.Children.toArray(children),
|
90
|
-
|
91
|
-
|
92
|
-
|
62
|
+
_ref4 = (0, _slicedToArray2.default)(_ref3, 1),
|
63
|
+
row = _ref4[0];
|
93
64
|
if (!(0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
|
94
65
|
return null;
|
95
66
|
}
|
96
|
-
|
97
67
|
const options = [];
|
98
68
|
const clickHandlers = {};
|
99
69
|
let selectedOption;
|
100
70
|
let count = 0;
|
101
|
-
|
102
71
|
_react.Children.forEach(row.props.children, colHeader => {
|
103
72
|
count += 1;
|
104
|
-
|
105
73
|
if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
|
106
74
|
const _colHeader$props = colHeader.props,
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
75
|
+
id = _colHeader$props.id,
|
76
|
+
stackedSortByLabel = _colHeader$props.stackedSortByLabel,
|
77
|
+
sortDirection = _colHeader$props.sortDirection,
|
78
|
+
onRequestSort = _colHeader$props.onRequestSort;
|
111
79
|
const label = stackedSortByLabel || id;
|
112
|
-
|
113
80
|
if (onRequestSort) {
|
114
81
|
options.push({
|
115
82
|
id,
|
116
83
|
label
|
117
84
|
});
|
118
85
|
clickHandlers[id] = onRequestSort;
|
119
|
-
|
120
86
|
if (sortDirection !== 'none') {
|
121
87
|
selectedOption = id;
|
122
88
|
}
|
123
89
|
}
|
124
90
|
}
|
125
91
|
});
|
126
|
-
|
127
92
|
if (!options.length) {
|
128
93
|
return null;
|
129
94
|
}
|
130
|
-
|
131
95
|
const handleSelect = (event, _ref5) => {
|
132
96
|
let value = _ref5.value;
|
133
|
-
|
134
97
|
if (value && typeof clickHandlers[value] === 'function') {
|
135
98
|
clickHandlers[value](event, {
|
136
99
|
id: `${value}`
|
137
100
|
});
|
138
101
|
}
|
139
102
|
};
|
140
|
-
|
141
103
|
return (0, _emotion.jsx)("div", {
|
142
104
|
role: "rowgroup"
|
143
105
|
}, (0, _emotion.jsx)("div", {
|
@@ -152,7 +114,7 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
152
114
|
onChange: handleSelect
|
153
115
|
}, options.map(_ref6 => {
|
154
116
|
let id = _ref6.id,
|
155
|
-
|
117
|
+
label = _ref6.label;
|
156
118
|
return (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
|
157
119
|
id: id,
|
158
120
|
key: id,
|
@@ -165,17 +127,15 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
165
127
|
}, label);
|
166
128
|
})))));
|
167
129
|
}
|
168
|
-
|
169
130
|
render() {
|
170
131
|
const _this$props4 = this.props,
|
171
|
-
|
172
|
-
|
173
|
-
|
132
|
+
children = _this$props4.children,
|
133
|
+
isStacked = _this$props4.isStacked,
|
134
|
+
styles = _this$props4.styles;
|
174
135
|
return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps), {
|
175
136
|
css: styles === null || styles === void 0 ? void 0 : styles.head
|
176
137
|
}), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
|
177
138
|
}
|
178
|
-
|
179
139
|
}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
180
140
|
children: null
|
181
141
|
}, _class2)) || _class);
|
package/lib/Table/Head/props.js
CHANGED
@@ -1,18 +1,13 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
|
-
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
9
|
-
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
-
|
12
9
|
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
13
|
-
|
14
10
|
var _Row = require("../Row");
|
15
|
-
|
16
11
|
/*
|
17
12
|
* The MIT License (MIT)
|
18
13
|
*
|
@@ -36,6 +31,7 @@ var _Row = require("../Row");
|
|
36
31
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
37
32
|
* SOFTWARE.
|
38
33
|
*/
|
34
|
+
|
39
35
|
const propTypes = {
|
40
36
|
children: _Children.Children.oneOf([_Row.Row]),
|
41
37
|
isStacked: _propTypes.default.bool,
|
package/lib/Table/Head/styles.js
CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -51,6 +50,5 @@ const generateStyle = componentTheme => {
|
|
51
50
|
}
|
52
51
|
};
|
53
52
|
};
|
54
|
-
|
55
53
|
var _default = generateStyle;
|
56
54
|
exports.default = _default;
|
package/lib/Table/Head/theme.js
CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -36,7 +35,7 @@ exports.default = void 0;
|
|
36
35
|
*/
|
37
36
|
const generateComponentTheme = theme => {
|
38
37
|
const colors = theme.colors,
|
39
|
-
|
38
|
+
typography = theme.typography;
|
40
39
|
const componentVariables = {
|
41
40
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
42
41
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -44,9 +43,9 @@ const generateComponentTheme = theme => {
|
|
44
43
|
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
45
44
|
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
46
45
|
};
|
47
|
-
return {
|
46
|
+
return {
|
47
|
+
...componentVariables
|
48
48
|
};
|
49
49
|
};
|
50
|
-
|
51
50
|
var _default = generateComponentTheme;
|
52
51
|
exports.default = _default;
|
package/lib/Table/Row/index.js
CHANGED
@@ -1,38 +1,23 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
|
-
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
8
7
|
exports.default = exports.Row = void 0;
|
9
|
-
|
10
8
|
var _react = require("react");
|
11
|
-
|
12
9
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
13
|
-
|
14
10
|
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
15
|
-
|
16
11
|
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
17
|
-
|
18
12
|
var _View = require("@instructure/ui-view/lib/View");
|
19
|
-
|
20
13
|
var _emotion = require("@instructure/emotion");
|
21
|
-
|
22
14
|
var _styles = _interopRequireDefault(require("./styles"));
|
23
|
-
|
24
15
|
var _theme = _interopRequireDefault(require("./theme"));
|
25
|
-
|
26
16
|
var _ColHeader = require("../ColHeader");
|
27
|
-
|
28
17
|
var _RowHeader = require("../RowHeader");
|
29
|
-
|
30
18
|
var _Cell = require("../Cell");
|
31
|
-
|
32
19
|
var _props = require("./props");
|
33
|
-
|
34
20
|
var _dec, _class, _class2;
|
35
|
-
|
36
21
|
/**
|
37
22
|
---
|
38
23
|
parent: Table
|
@@ -43,22 +28,18 @@ id: Table.Row
|
|
43
28
|
let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Row extends _react.Component {
|
44
29
|
componentDidMount() {
|
45
30
|
var _this$props$makeStyle, _this$props;
|
46
|
-
|
47
31
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
48
32
|
}
|
49
|
-
|
50
33
|
componentDidUpdate() {
|
51
34
|
var _this$props$makeStyle2, _this$props2;
|
52
|
-
|
53
35
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
54
36
|
}
|
55
|
-
|
56
37
|
render() {
|
57
38
|
const _this$props3 = this.props,
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
39
|
+
children = _this$props3.children,
|
40
|
+
styles = _this$props3.styles,
|
41
|
+
isStacked = _this$props3.isStacked,
|
42
|
+
headers = _this$props3.headers;
|
62
43
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row), {
|
63
44
|
as: isStacked ? 'div' : 'tr',
|
64
45
|
css: styles === null || styles === void 0 ? void 0 : styles.row,
|
@@ -67,14 +48,12 @@ let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
67
48
|
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ColHeader.ColHeader])) {
|
68
49
|
return child;
|
69
50
|
}
|
70
|
-
|
71
51
|
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_RowHeader.RowHeader])) {
|
72
52
|
return (0, _safeCloneElement.safeCloneElement)(child, {
|
73
53
|
key: child.props.name,
|
74
54
|
isStacked
|
75
55
|
});
|
76
56
|
}
|
77
|
-
|
78
57
|
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Cell.Cell])) {
|
79
58
|
return (0, _safeCloneElement.safeCloneElement)(child, {
|
80
59
|
key: child.props.name,
|
@@ -82,11 +61,9 @@ let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
82
61
|
header: headers && headers[index]
|
83
62
|
});
|
84
63
|
}
|
85
|
-
|
86
64
|
return null;
|
87
65
|
}));
|
88
66
|
}
|
89
|
-
|
90
67
|
}, _class2.displayName = "Row", _class2.componentId = 'Table.Row', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
91
68
|
children: null
|
92
69
|
}, _class2)) || _class);
|
package/lib/Table/Row/props.js
CHANGED
@@ -1,22 +1,15 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
|
-
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
9
|
-
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
-
|
12
9
|
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
13
|
-
|
14
10
|
var _ColHeader = require("../ColHeader");
|
15
|
-
|
16
11
|
var _RowHeader = require("../RowHeader");
|
17
|
-
|
18
12
|
var _Cell = require("../Cell");
|
19
|
-
|
20
13
|
/*
|
21
14
|
* The MIT License (MIT)
|
22
15
|
*
|
@@ -40,6 +33,7 @@ var _Cell = require("../Cell");
|
|
40
33
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
41
34
|
* SOFTWARE.
|
42
35
|
*/
|
36
|
+
|
43
37
|
const propTypes = {
|
44
38
|
children: _Children.Children.oneOf([_ColHeader.ColHeader, _RowHeader.RowHeader, _Cell.Cell]),
|
45
39
|
hover: _propTypes.default.bool,
|
package/lib/Table/Row/styles.js
CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -41,7 +40,7 @@ exports.default = void 0;
|
|
41
40
|
*/
|
42
41
|
const generateStyle = (componentTheme, props) => {
|
43
42
|
const hover = props.hover,
|
44
|
-
|
43
|
+
isStacked = props.isStacked;
|
45
44
|
return {
|
46
45
|
row: {
|
47
46
|
label: 'row',
|
@@ -68,6 +67,5 @@ const generateStyle = (componentTheme, props) => {
|
|
68
67
|
}
|
69
68
|
};
|
70
69
|
};
|
71
|
-
|
72
70
|
var _default = generateStyle;
|
73
71
|
exports.default = _default;
|
package/lib/Table/Row/theme.js
CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -36,9 +35,9 @@ exports.default = void 0;
|
|
36
35
|
*/
|
37
36
|
const generateComponentTheme = theme => {
|
38
37
|
const colors = theme.colors,
|
39
|
-
|
40
|
-
|
41
|
-
|
38
|
+
typography = theme.typography,
|
39
|
+
spacing = theme.spacing,
|
40
|
+
themeName = theme.key;
|
42
41
|
const themeSpecificStyle = {
|
43
42
|
canvas: {
|
44
43
|
hoverBorderColor: theme['ic-brand-primary']
|
@@ -54,10 +53,10 @@ const generateComponentTheme = theme => {
|
|
54
53
|
hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
|
55
54
|
padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`
|
56
55
|
};
|
57
|
-
return {
|
56
|
+
return {
|
57
|
+
...componentVariables,
|
58
58
|
...themeSpecificStyle[themeName]
|
59
59
|
};
|
60
60
|
};
|
61
|
-
|
62
61
|
var _default = generateComponentTheme;
|
63
62
|
exports.default = _default;
|
@@ -1,30 +1,19 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
|
-
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
8
7
|
exports.default = exports.RowHeader = void 0;
|
9
|
-
|
10
8
|
var _react = require("react");
|
11
|
-
|
12
9
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
13
|
-
|
14
10
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
15
|
-
|
16
11
|
var _View = require("@instructure/ui-view/lib/View");
|
17
|
-
|
18
12
|
var _emotion = require("@instructure/emotion");
|
19
|
-
|
20
13
|
var _styles = _interopRequireDefault(require("./styles"));
|
21
|
-
|
22
14
|
var _theme = _interopRequireDefault(require("./theme"));
|
23
|
-
|
24
15
|
var _props = require("./props");
|
25
|
-
|
26
16
|
var _dec, _class, _class2;
|
27
|
-
|
28
17
|
/**
|
29
18
|
---
|
30
19
|
parent: Table
|
@@ -35,21 +24,17 @@ id: Table.RowHeader
|
|
35
24
|
let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class RowHeader extends _react.Component {
|
36
25
|
componentDidMount() {
|
37
26
|
var _this$props$makeStyle, _this$props;
|
38
|
-
|
39
27
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
40
28
|
}
|
41
|
-
|
42
29
|
componentDidUpdate() {
|
43
30
|
var _this$props$makeStyle2, _this$props2;
|
44
|
-
|
45
31
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
46
32
|
}
|
47
|
-
|
48
33
|
render() {
|
49
34
|
const _this$props3 = this.props,
|
50
|
-
|
51
|
-
|
52
|
-
|
35
|
+
children = _this$props3.children,
|
36
|
+
isStacked = _this$props3.isStacked,
|
37
|
+
styles = _this$props3.styles;
|
53
38
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader), {
|
54
39
|
as: isStacked ? 'div' : 'th',
|
55
40
|
css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
|
@@ -57,7 +42,6 @@ let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
57
42
|
role: isStacked ? 'rowheader' : void 0
|
58
43
|
}), (0, _callRenderProp.callRenderProp)(children));
|
59
44
|
}
|
60
|
-
|
61
45
|
}, _class2.displayName = "RowHeader", _class2.componentId = 'Table.RowHeader', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
62
46
|
textAlign: 'start',
|
63
47
|
children: null
|
@@ -1,14 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
4
|
-
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
6
5
|
value: true
|
7
6
|
});
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
9
|
-
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
-
|
12
9
|
/*
|
13
10
|
* The MIT License (MIT)
|
14
11
|
*
|
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
32
29
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
33
30
|
* SOFTWARE.
|
34
31
|
*/
|
32
|
+
|
35
33
|
const propTypes = {
|
36
34
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
37
35
|
isStacked: _propTypes.default.bool,
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -59,6 +58,5 @@ const generateStyle = (componentTheme, props) => {
|
|
59
58
|
}
|
60
59
|
};
|
61
60
|
};
|
62
|
-
|
63
61
|
var _default = generateStyle;
|
64
62
|
exports.default = _default;
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = void 0;
|
7
|
-
|
8
7
|
/*
|
9
8
|
* The MIT License (MIT)
|
10
9
|
*
|
@@ -36,8 +35,8 @@ exports.default = void 0;
|
|
36
35
|
*/
|
37
36
|
const generateComponentTheme = theme => {
|
38
37
|
const colors = theme.colors,
|
39
|
-
|
40
|
-
|
38
|
+
typography = theme.typography,
|
39
|
+
spacing = theme.spacing;
|
41
40
|
const componentVariables = {
|
42
41
|
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
43
42
|
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
@@ -48,9 +47,9 @@ const generateComponentTheme = theme => {
|
|
48
47
|
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
49
48
|
padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
|
50
49
|
};
|
51
|
-
return {
|
50
|
+
return {
|
51
|
+
...componentVariables
|
52
52
|
};
|
53
53
|
};
|
54
|
-
|
55
54
|
var _default = generateComponentTheme;
|
56
55
|
exports.default = _default;
|