@instructure/ui-table 8.33.1 → 8.33.2
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 -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
@@ -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,25 +39,20 @@ id: Table.RowHeader
|
|
39
39
|
---
|
40
40
|
@tsProps
|
41
41
|
**/
|
42
|
-
|
43
42
|
let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class RowHeader 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
|
-
|
53
|
+
children = _this$props3.children,
|
54
|
+
isStacked = _this$props3.isStacked,
|
55
|
+
styles = _this$props3.styles;
|
61
56
|
return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader), {
|
62
57
|
as: isStacked ? 'div' : 'th',
|
63
58
|
css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
|
@@ -65,7 +60,6 @@ let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
65
60
|
role: isStacked ? 'rowheader' : void 0
|
66
61
|
}), callRenderProp(children));
|
67
62
|
}
|
68
|
-
|
69
63
|
}, _class2.displayName = "RowHeader", _class2.componentId = 'Table.RowHeader', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
70
64
|
textAlign: 'start',
|
71
65
|
children: null
|
@@ -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;
|
package/es/Table/index.js
CHANGED
@@ -1,7 +1,5 @@
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
2
|
-
|
3
2
|
var _dec, _class, _class2;
|
4
|
-
|
5
3
|
/*
|
6
4
|
* The MIT License (MIT)
|
7
5
|
*
|
@@ -41,70 +39,58 @@ import { ColHeader } from './ColHeader';
|
|
41
39
|
import { RowHeader } from './RowHeader';
|
42
40
|
import { Cell } from './Cell';
|
43
41
|
import { allowedProps, propTypes } from './props';
|
42
|
+
|
44
43
|
/**
|
45
44
|
---
|
46
45
|
category: components
|
47
46
|
---
|
48
47
|
@tsProps
|
49
48
|
**/
|
50
|
-
|
51
49
|
let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Table extends Component {
|
52
50
|
constructor() {
|
53
51
|
super(...arguments);
|
54
52
|
this.ref = null;
|
55
|
-
|
56
53
|
this.handleRef = el => {
|
57
54
|
const elementRef = this.props.elementRef;
|
58
55
|
this.ref = el;
|
59
|
-
|
60
56
|
if (typeof elementRef === 'function') {
|
61
57
|
elementRef(el);
|
62
58
|
}
|
63
59
|
};
|
64
60
|
}
|
65
|
-
|
66
61
|
componentDidMount() {
|
67
62
|
var _this$props$makeStyle, _this$props;
|
68
|
-
|
69
63
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
70
64
|
}
|
71
|
-
|
72
65
|
componentDidUpdate() {
|
73
66
|
var _this$props$makeStyle2, _this$props2;
|
74
|
-
|
75
67
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
76
68
|
}
|
77
|
-
|
78
69
|
getHeaders() {
|
79
70
|
const children = this.props.children;
|
80
|
-
|
81
71
|
const _ref = Children.toArray(children),
|
82
|
-
|
83
|
-
|
84
|
-
|
72
|
+
_ref2 = _slicedToArray(_ref, 1),
|
73
|
+
head = _ref2[0];
|
85
74
|
if (matchComponentTypes(head, [Head])) {
|
86
75
|
const _Children$toArray = Children.toArray(head.props.children),
|
87
|
-
|
88
|
-
|
89
|
-
|
76
|
+
_Children$toArray2 = _slicedToArray(_Children$toArray, 1),
|
77
|
+
row = _Children$toArray2[0];
|
90
78
|
if (matchComponentTypes(row, [Row])) {
|
91
79
|
return Children.map(row.props.children, colHeader => {
|
92
80
|
return matchComponentTypes(colHeader, [ColHeader]) ? colHeader.props.children : void 0;
|
93
81
|
});
|
94
82
|
}
|
95
83
|
}
|
96
|
-
|
97
84
|
return void 0;
|
98
85
|
}
|
99
|
-
|
100
86
|
render() {
|
101
87
|
const _this$props3 = this.props,
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
88
|
+
margin = _this$props3.margin,
|
89
|
+
layout = _this$props3.layout,
|
90
|
+
caption = _this$props3.caption,
|
91
|
+
children = _this$props3.children,
|
92
|
+
hover = _this$props3.hover,
|
93
|
+
styles = _this$props3.styles;
|
108
94
|
const isStacked = layout === 'stacked';
|
109
95
|
const headers = isStacked ? this.getHeaders() : void 0;
|
110
96
|
return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.allowedProps), Table), {
|
@@ -121,7 +107,6 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
|
|
121
107
|
isStacked
|
122
108
|
});
|
123
109
|
}
|
124
|
-
|
125
110
|
if (matchComponentTypes(child, [Body])) {
|
126
111
|
return safeCloneElement(child, {
|
127
112
|
key: child.props.name,
|
@@ -130,11 +115,9 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
|
|
130
115
|
headers
|
131
116
|
});
|
132
117
|
}
|
133
|
-
|
134
118
|
return null;
|
135
119
|
}));
|
136
120
|
}
|
137
|
-
|
138
121
|
}, _class2.displayName = "Table", _class2.componentId = 'Table', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
139
122
|
children: null,
|
140
123
|
hover: false,
|
package/es/Table/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 { ThemeablePropTypes } from '@instructure/emotion';
|
package/es/Table/styles.js
CHANGED
package/es/Table/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
|
+
themeName = theme.key;
|
34
34
|
const themeSpecificStyle = {
|
35
35
|
canvas: {
|
36
36
|
color: theme['ic-brand-font-color-dark']
|
@@ -43,9 +43,9 @@ const generateComponentTheme = theme => {
|
|
43
43
|
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
44
44
|
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
45
45
|
};
|
46
|
-
return {
|
46
|
+
return {
|
47
|
+
...componentVariables,
|
47
48
|
...themeSpecificStyle[themeName]
|
48
49
|
};
|
49
50
|
};
|
50
|
-
|
51
51
|
export default generateComponentTheme;
|
package/lib/Table/Body/index.js
CHANGED
@@ -1,34 +1,21 @@
|
|
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.Body = void 0;
|
9
|
-
|
10
8
|
var _react = require("react");
|
11
|
-
|
12
9
|
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
13
|
-
|
14
10
|
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
15
|
-
|
16
11
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.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 _Row = require("../Row");
|
27
|
-
|
28
17
|
var _props = require("./props");
|
29
|
-
|
30
18
|
var _dec, _class, _class2;
|
31
|
-
|
32
19
|
/**
|
33
20
|
---
|
34
21
|
parent: Table
|
@@ -39,23 +26,19 @@ id: Table.Body
|
|
39
26
|
let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Body extends _react.Component {
|
40
27
|
componentDidMount() {
|
41
28
|
var _this$props$makeStyle, _this$props;
|
42
|
-
|
43
29
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
44
30
|
}
|
45
|
-
|
46
31
|
componentDidUpdate() {
|
47
32
|
var _this$props$makeStyle2, _this$props2;
|
48
|
-
|
49
33
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
50
34
|
}
|
51
|
-
|
52
35
|
render() {
|
53
36
|
const _this$props3 = this.props,
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
37
|
+
children = _this$props3.children,
|
38
|
+
hover = _this$props3.hover,
|
39
|
+
isStacked = _this$props3.isStacked,
|
40
|
+
headers = _this$props3.headers,
|
41
|
+
styles = _this$props3.styles;
|
59
42
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.allowedProps), Body), {
|
60
43
|
as: isStacked ? 'div' : 'tbody',
|
61
44
|
css: styles === null || styles === void 0 ? void 0 : styles.body,
|
@@ -67,7 +50,6 @@ let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
67
50
|
headers
|
68
51
|
}) : null));
|
69
52
|
}
|
70
|
-
|
71
53
|
}, _class2.displayName = "Body", _class2.componentId = 'Table.Body', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
72
54
|
children: null
|
73
55
|
}, _class2)) || _class);
|
package/lib/Table/Body/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
|
hover: _propTypes.default.bool,
|
package/lib/Table/Body/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/Body/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/Cell/index.js
CHANGED
@@ -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.Cell = 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,29 +24,24 @@ id: Table.Cell
|
|
35
24
|
let Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Cell 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
|
-
|
53
|
-
|
35
|
+
children = _this$props3.children,
|
36
|
+
styles = _this$props3.styles,
|
37
|
+
isStacked = _this$props3.isStacked,
|
38
|
+
header = _this$props3.header;
|
54
39
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell), {
|
55
40
|
as: isStacked ? 'div' : 'td',
|
56
41
|
css: styles === null || styles === void 0 ? void 0 : styles.cell,
|
57
42
|
role: isStacked ? 'cell' : void 0
|
58
43
|
}), header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children));
|
59
44
|
}
|
60
|
-
|
61
45
|
}, _class2.displayName = "Cell", _class2.componentId = 'Table.Cell', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
62
46
|
textAlign: 'start',
|
63
47
|
children: null
|
package/lib/Table/Cell/props.js
CHANGED
@@ -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,
|
package/lib/Table/Cell/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
|
*
|
@@ -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;
|
package/lib/Table/Cell/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,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;
|
@@ -1,36 +1,22 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
4
|
-
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
6
|
-
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
8
6
|
value: true
|
9
7
|
});
|
10
8
|
exports.default = exports.ColHeader = void 0;
|
11
|
-
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
13
|
-
|
14
10
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
15
|
-
|
16
11
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
17
|
-
|
18
12
|
var _IconMiniArrowUpLine2 = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
|
19
|
-
|
20
13
|
var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine.js");
|
21
|
-
|
22
14
|
var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/IconMiniArrowDoubleLine.js");
|
23
|
-
|
24
15
|
var _emotion = require("@instructure/emotion");
|
25
|
-
|
26
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
27
|
-
|
28
17
|
var _theme = _interopRequireDefault(require("./theme"));
|
29
|
-
|
30
18
|
var _props = require("./props");
|
31
|
-
|
32
19
|
var _dec, _class, _class2, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
|
33
|
-
|
34
20
|
/**
|
35
21
|
---
|
36
22
|
parent: Table
|
@@ -41,42 +27,33 @@ id: Table.ColHeader
|
|
41
27
|
let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class ColHeader extends _react.Component {
|
42
28
|
constructor() {
|
43
29
|
super(...arguments);
|
44
|
-
|
45
30
|
this.handleClick = event => {
|
46
31
|
const _this$props = this.props,
|
47
|
-
|
48
|
-
|
32
|
+
id = _this$props.id,
|
33
|
+
onRequestSort = _this$props.onRequestSort;
|
49
34
|
onRequestSort && onRequestSort(event, {
|
50
35
|
id
|
51
36
|
});
|
52
37
|
};
|
53
38
|
}
|
54
|
-
|
55
39
|
componentDidMount() {
|
56
40
|
var _this$props$makeStyle, _this$props2;
|
57
|
-
|
58
41
|
(_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
|
59
42
|
}
|
60
|
-
|
61
43
|
componentDidUpdate() {
|
62
44
|
var _this$props$makeStyle2, _this$props3;
|
63
|
-
|
64
45
|
(_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
|
65
46
|
}
|
66
|
-
|
67
47
|
renderSortArrow() {
|
68
48
|
const _this$props4 = this.props,
|
69
|
-
|
70
|
-
|
71
|
-
|
49
|
+
sortDirection = _this$props4.sortDirection,
|
50
|
+
onRequestSort = _this$props4.onRequestSort;
|
72
51
|
if (sortDirection === 'ascending') {
|
73
52
|
return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, null));
|
74
53
|
}
|
75
|
-
|
76
54
|
if (sortDirection === 'descending') {
|
77
55
|
return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, null));
|
78
56
|
}
|
79
|
-
|
80
57
|
if (onRequestSort) {
|
81
58
|
return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
|
82
59
|
css: {
|
@@ -84,18 +61,16 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
84
61
|
}
|
85
62
|
});
|
86
63
|
}
|
87
|
-
|
88
64
|
return void 0;
|
89
65
|
}
|
90
|
-
|
91
66
|
render() {
|
92
67
|
const _this$props5 = this.props,
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
68
|
+
onRequestSort = _this$props5.onRequestSort,
|
69
|
+
width = _this$props5.width,
|
70
|
+
children = _this$props5.children,
|
71
|
+
sortDirection = _this$props5.sortDirection,
|
72
|
+
scope = _this$props5.scope,
|
73
|
+
styles = _this$props5.styles;
|
99
74
|
return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
|
100
75
|
css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
|
101
76
|
style: {
|
@@ -110,7 +85,6 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
110
85
|
css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
|
111
86
|
}, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
|
112
87
|
}
|
113
|
-
|
114
88
|
}, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
115
89
|
textAlign: 'start',
|
116
90
|
sortDirection: 'none',
|
@@ -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
|
id: _propTypes.default.string.isRequired,
|
37
35
|
stackedSortByLabel: _propTypes.default.string,
|
@@ -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 onRequestSort = props.onRequestSort,
|
44
|
-
|
43
|
+
textAlign = props.textAlign;
|
45
44
|
const headerStyle = {
|
46
45
|
color: componentTheme.color,
|
47
46
|
fontSize: componentTheme.fontSize,
|
@@ -97,6 +96,5 @@ const generateStyle = (componentTheme, props) => {
|
|
97
96
|
}
|
98
97
|
};
|
99
98
|
};
|
100
|
-
|
101
99
|
var _default = generateStyle;
|
102
100
|
exports.default = _default;
|