@instructure/emotion 8.33.2-snapshot-0 → 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 +1 -5
- package/es/EmotionThemeProvider/index.js +3 -4
- package/es/InstUISettingsProvider/index.js +7 -12
- package/es/getComponentThemeOverride.js +6 -8
- package/es/getTheme.js +6 -14
- package/es/index.js +1 -0
- package/es/styleUtils/ThemeablePropTypes.js +8 -15
- package/es/styleUtils/ThemeablePropValues.js +4 -1
- package/es/styleUtils/getShorthandPropValue.js +2 -7
- package/es/styleUtils/index.js +1 -0
- package/es/styleUtils/makeThemeVars.js +1 -2
- package/es/styleUtils/mirrorShorthand.js +1 -11
- package/es/useTheme.js +1 -7
- package/es/withStyle.js +23 -24
- package/lib/EmotionThemeProvider/index.js +2 -8
- package/lib/InstUISettingsProvider/index.js +6 -21
- package/lib/getComponentThemeOverride.js +6 -9
- package/lib/getTheme.js +6 -18
- package/lib/index.js +0 -6
- package/lib/styleUtils/ThemeablePropTypes.js +8 -19
- package/lib/styleUtils/ThemeablePropValues.js +3 -2
- package/lib/styleUtils/getShorthandPropValue.js +0 -10
- package/lib/styleUtils/index.js +0 -6
- package/lib/styleUtils/makeThemeVars.js +0 -3
- package/lib/styleUtils/mirrorShorthand.js +1 -11
- package/lib/styleUtils/mirrorShorthandCorners.js +0 -2
- package/lib/styleUtils/mirrorShorthandEdges.js +0 -2
- package/lib/useTheme.js +0 -11
- package/lib/withStyle.js +23 -34
- package/package.json +11 -11
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -1,29 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.InstUISettingsProvider = InstUISettingsProvider;
|
|
11
9
|
exports.default = void 0;
|
|
12
|
-
|
|
13
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
|
-
|
|
15
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
|
-
|
|
17
12
|
var _react2 = require("@emotion/react");
|
|
18
|
-
|
|
19
13
|
var _TextDirectionContext = require("@instructure/ui-i18n/lib/TextDirectionContext.js");
|
|
20
|
-
|
|
21
14
|
var _DeterministicIdContextProvider = require("@instructure/ui-react-utils/lib/DeterministicIdContext/DeterministicIdContextProvider.js");
|
|
22
|
-
|
|
23
15
|
var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
|
|
24
|
-
|
|
25
16
|
var _getTheme = require("../getTheme");
|
|
26
|
-
|
|
27
17
|
/*
|
|
28
18
|
* The MIT License (MIT)
|
|
29
19
|
*
|
|
@@ -57,15 +47,13 @@ var _getTheme = require("../getTheme");
|
|
|
57
47
|
*/
|
|
58
48
|
function InstUISettingsProvider(_ref) {
|
|
59
49
|
let children = _ref.children,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
50
|
+
_ref$theme = _ref.theme,
|
|
51
|
+
theme = _ref$theme === void 0 ? {} : _ref$theme,
|
|
52
|
+
dir = _ref.dir,
|
|
53
|
+
instanceCounterMap = _ref.instanceCounterMap,
|
|
54
|
+
as = _ref.as;
|
|
65
55
|
const finalDir = dir || (0, _react.useContext)(_TextDirectionContext.TextDirectionContext);
|
|
66
|
-
|
|
67
56
|
if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {}
|
|
68
|
-
|
|
69
57
|
let providers = /*#__PURE__*/_react.default.createElement(_DeterministicIdContextProvider.DeterministicIdContextProvider, {
|
|
70
58
|
instanceCounterMap: instanceCounterMap
|
|
71
59
|
}, /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
|
|
@@ -73,7 +61,6 @@ function InstUISettingsProvider(_ref) {
|
|
|
73
61
|
}, /*#__PURE__*/_react.default.createElement(_TextDirectionContext.TextDirectionContext.Provider, {
|
|
74
62
|
value: finalDir
|
|
75
63
|
}, children)));
|
|
76
|
-
|
|
77
64
|
if (dir) {
|
|
78
65
|
const Element = (0, _getElementType.getElementType)(InstUISettingsProvider, {
|
|
79
66
|
as
|
|
@@ -82,10 +69,8 @@ function InstUISettingsProvider(_ref) {
|
|
|
82
69
|
dir: finalDir
|
|
83
70
|
}, providers);
|
|
84
71
|
} else if (as && process.env.NODE_ENV !== 'production') {}
|
|
85
|
-
|
|
86
72
|
return providers;
|
|
87
73
|
}
|
|
88
|
-
|
|
89
74
|
InstUISettingsProvider.propTypes = {
|
|
90
75
|
/* eslint-disable react/require-default-props */
|
|
91
76
|
children: _propTypes.default.node,
|
|
@@ -94,8 +79,8 @@ InstUISettingsProvider.propTypes = {
|
|
|
94
79
|
instanceCounterMap: _propTypes.default.instanceOf(Map),
|
|
95
80
|
as: _propTypes.default.string
|
|
96
81
|
/* eslint-enable react/require-default-props */
|
|
97
|
-
|
|
98
82
|
};
|
|
83
|
+
|
|
99
84
|
InstUISettingsProvider.defaultProps = {
|
|
100
85
|
theme: {},
|
|
101
86
|
as: void 0
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getComponentThemeOverride = exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -47,31 +46,29 @@ const getComponentThemeOverride = (theme, displayName, componentId, props, compo
|
|
|
47
46
|
const name = displayName;
|
|
48
47
|
const id = componentId;
|
|
49
48
|
const _ref = props,
|
|
50
|
-
|
|
49
|
+
themeOverride = _ref.themeOverride;
|
|
51
50
|
const _ref2 = theme,
|
|
52
|
-
|
|
51
|
+
componentOverrides = _ref2.componentOverrides;
|
|
53
52
|
let overridesFromTheme = {};
|
|
54
53
|
let overrideFromComponent = {};
|
|
55
|
-
|
|
56
54
|
if (componentOverrides) {
|
|
57
55
|
overridesFromTheme = name && componentOverrides[name] || id && componentOverrides[id] || {};
|
|
58
56
|
}
|
|
59
|
-
|
|
60
57
|
if (themeOverride) {
|
|
61
58
|
if (typeof themeOverride === 'function') {
|
|
62
|
-
overrideFromComponent = themeOverride(componentTheme || {},
|
|
59
|
+
overrideFromComponent = themeOverride(componentTheme || {},
|
|
60
|
+
// the `theme` technically could be a partial theme / override object too,
|
|
63
61
|
// but we want to display all possible options
|
|
64
62
|
theme);
|
|
65
63
|
} else {
|
|
66
64
|
overrideFromComponent = themeOverride;
|
|
67
65
|
}
|
|
68
66
|
}
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
return {
|
|
68
|
+
...overridesFromTheme,
|
|
71
69
|
...overrideFromComponent
|
|
72
70
|
};
|
|
73
71
|
};
|
|
74
|
-
|
|
75
72
|
exports.getComponentThemeOverride = getComponentThemeOverride;
|
|
76
73
|
var _default = getComponentThemeOverride;
|
|
77
74
|
exports.default = _default;
|
package/lib/getTheme.js
CHANGED
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getTheme = exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _uiThemes = require("@instructure/ui-themes");
|
|
9
|
-
|
|
10
8
|
var _themeRegistry = require("@instructure/theme-registry");
|
|
11
|
-
|
|
12
9
|
var _isBaseTheme = require("@instructure/ui-utils/lib/isBaseTheme.js");
|
|
13
|
-
|
|
14
10
|
var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
|
|
15
|
-
|
|
16
11
|
/*
|
|
17
12
|
* The MIT License (MIT)
|
|
18
13
|
*
|
|
@@ -53,9 +48,7 @@ var _mergeDeep = require("@instructure/ui-utils/lib/mergeDeep.js");
|
|
|
53
48
|
*/
|
|
54
49
|
const getTheme = themeOrOverride => function () {
|
|
55
50
|
var _themeOrOverride, _themeOrOverride$them;
|
|
56
|
-
|
|
57
51
|
let ancestorTheme = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
58
|
-
|
|
59
52
|
try {
|
|
60
53
|
// If a valid InstUI theme is given, it just returns the theme.
|
|
61
54
|
if ((0, _isBaseTheme.isBaseTheme)(themeOrOverride)) {
|
|
@@ -65,31 +58,26 @@ const getTheme = themeOrOverride => function () {
|
|
|
65
58
|
// If the prop passed is not an Object, it will throw an error.
|
|
66
59
|
// We are using this fail-safe here for the non-TS users,
|
|
67
60
|
// because the whole page can break without a theme.
|
|
68
|
-
if (process.env.NODE_ENV !== 'production') {}
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
if (process.env.NODE_ENV !== 'production') {}
|
|
62
|
+
// eslint-disable-next-line no-param-reassign
|
|
71
63
|
themeOrOverride = {};
|
|
72
|
-
}
|
|
73
|
-
|
|
64
|
+
}
|
|
74
65
|
|
|
66
|
+
// we need to clone the ancestor theme not to override it
|
|
75
67
|
let currentTheme;
|
|
76
|
-
|
|
77
68
|
if (Object.keys(ancestorTheme).length === 0) {
|
|
78
69
|
const globalTheme = _themeRegistry.ThemeRegistry.getCurrentTheme();
|
|
79
|
-
|
|
80
70
|
if (process.env.NODE_ENV !== 'production' && !globalTheme) {}
|
|
81
|
-
|
|
82
71
|
currentTheme = globalTheme || _uiThemes.canvas;
|
|
83
72
|
} else {
|
|
84
73
|
currentTheme = ancestorTheme;
|
|
85
74
|
}
|
|
75
|
+
const themeName = currentTheme.key;
|
|
86
76
|
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
// we pick the overrides for the current theme from the override object
|
|
89
78
|
const currentThemeOverrides = ((_themeOrOverride = themeOrOverride) === null || _themeOrOverride === void 0 ? void 0 : (_themeOrOverride$them = _themeOrOverride.themeOverrides) === null || _themeOrOverride$them === void 0 ? void 0 : _themeOrOverride$them[themeName]) || themeOrOverride.themeOverrides || {};
|
|
90
79
|
return (0, _mergeDeep.mergeDeep)(currentTheme, themeOrOverride, currentThemeOverrides);
|
|
91
80
|
};
|
|
92
|
-
|
|
93
81
|
exports.getTheme = getTheme;
|
|
94
82
|
var _default = getTheme;
|
|
95
83
|
exports.default = _default;
|
package/lib/index.js
CHANGED
|
@@ -68,9 +68,7 @@ Object.defineProperty(exports, "withStyle", {
|
|
|
68
68
|
return _withStyle.withStyle;
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
|
-
|
|
72
71
|
var _react = require("@emotion/react");
|
|
73
|
-
|
|
74
72
|
Object.keys(_react).forEach(function (key) {
|
|
75
73
|
if (key === "default" || key === "__esModule") return;
|
|
76
74
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -82,11 +80,7 @@ Object.keys(_react).forEach(function (key) {
|
|
|
82
80
|
}
|
|
83
81
|
});
|
|
84
82
|
});
|
|
85
|
-
|
|
86
83
|
var _EmotionThemeProvider = require("./EmotionThemeProvider");
|
|
87
|
-
|
|
88
84
|
var _InstUISettingsProvider = require("./InstUISettingsProvider");
|
|
89
|
-
|
|
90
85
|
var _withStyle = require("./withStyle");
|
|
91
|
-
|
|
92
86
|
var _styleUtils = require("./styleUtils");
|
|
@@ -1,17 +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.default = exports.ThemeablePropTypes = void 0;
|
|
9
8
|
exports.shorthandPropType = shorthandPropType;
|
|
10
|
-
|
|
11
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
-
|
|
13
10
|
var _ThemeablePropValues = require("./ThemeablePropValues");
|
|
14
|
-
|
|
15
11
|
/*
|
|
16
12
|
* The MIT License (MIT)
|
|
17
13
|
*
|
|
@@ -35,13 +31,15 @@ var _ThemeablePropValues = require("./ThemeablePropValues");
|
|
|
35
31
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
36
32
|
* SOFTWARE.
|
|
37
33
|
*/
|
|
34
|
+
|
|
38
35
|
const SHADOW_TYPES = _ThemeablePropValues.ThemeablePropValues.SHADOW_TYPES,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
STACKING_TYPES = _ThemeablePropValues.ThemeablePropValues.STACKING_TYPES,
|
|
37
|
+
BORDER_WIDTHS = _ThemeablePropValues.ThemeablePropValues.BORDER_WIDTHS,
|
|
38
|
+
BORDER_RADII = _ThemeablePropValues.ThemeablePropValues.BORDER_RADII,
|
|
39
|
+
BACKGROUNDS = _ThemeablePropValues.ThemeablePropValues.BACKGROUNDS,
|
|
40
|
+
SIZES = _ThemeablePropValues.ThemeablePropValues.SIZES,
|
|
41
|
+
SPACING = _ThemeablePropValues.ThemeablePropValues.SPACING;
|
|
42
|
+
|
|
45
43
|
/**
|
|
46
44
|
* ---
|
|
47
45
|
* category: utilities/themes
|
|
@@ -49,7 +47,6 @@ const SHADOW_TYPES = _ThemeablePropValues.ThemeablePropValues.SHADOW_TYPES,
|
|
|
49
47
|
* Custom prop types for themeable React components.
|
|
50
48
|
* @module ThemeablePropTypes
|
|
51
49
|
*/
|
|
52
|
-
|
|
53
50
|
const ThemeablePropTypes = {
|
|
54
51
|
shadow: _propTypes.default.oneOf(Object.values(SHADOW_TYPES)),
|
|
55
52
|
stacking: _propTypes.default.oneOf(Object.values(STACKING_TYPES)),
|
|
@@ -60,26 +57,20 @@ const ThemeablePropTypes = {
|
|
|
60
57
|
spacing: shorthandPropType(Object.values(SPACING))
|
|
61
58
|
};
|
|
62
59
|
exports.ThemeablePropTypes = ThemeablePropTypes;
|
|
63
|
-
|
|
64
60
|
function shorthandPropType(validValues) {
|
|
65
61
|
return function (props, propName, componentName, location) {
|
|
66
62
|
const propValue = props[propName];
|
|
67
|
-
|
|
68
63
|
if (typeof propValue === 'undefined') {
|
|
69
64
|
return null;
|
|
70
65
|
}
|
|
71
|
-
|
|
72
66
|
if (typeof propValue !== 'string') {
|
|
73
67
|
return new Error(`Invalid ${location} \`${propName}\` of type \`${typeof propValue}\` supplied to \`${componentName}\`, expected ` + `a string.`);
|
|
74
68
|
}
|
|
75
|
-
|
|
76
69
|
const propValues = propValue.split(' ');
|
|
77
70
|
const valuesLength = propValues.length;
|
|
78
|
-
|
|
79
71
|
if (valuesLength > 0 && valuesLength < 5) {
|
|
80
72
|
for (let i = 0; i < valuesLength; i++) {
|
|
81
73
|
const valueIndex = validValues.indexOf(propValues[i]);
|
|
82
|
-
|
|
83
74
|
if (valueIndex === -1) {
|
|
84
75
|
return new Error(`Invalid ${location} \`${propName}\` \`${propValues[i]}\` supplied to \`${componentName}\`, expected ` + `a one of \`${validValues.join(', ')}\`.`);
|
|
85
76
|
}
|
|
@@ -87,10 +78,8 @@ function shorthandPropType(validValues) {
|
|
|
87
78
|
} else {
|
|
88
79
|
return new Error(`Invalid ${location} \`${propName}\` \`${propValue}\` supplied to \`${componentName}\`, expected ` + `between one and four of the following valid values: \`${validValues.join(', ')}\`.`);
|
|
89
80
|
}
|
|
90
|
-
|
|
91
81
|
return null;
|
|
92
82
|
};
|
|
93
83
|
}
|
|
94
|
-
|
|
95
84
|
var _default = ThemeablePropTypes;
|
|
96
85
|
exports.default = _default;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.ThemeablePropValues = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -28,6 +27,7 @@ exports.default = exports.ThemeablePropValues = void 0;
|
|
|
28
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
29
28
|
* SOFTWARE.
|
|
30
29
|
*/
|
|
30
|
+
|
|
31
31
|
const ThemeablePropValues = {
|
|
32
32
|
SHADOW_TYPES: {
|
|
33
33
|
resting: 'resting',
|
|
@@ -83,8 +83,9 @@ const ThemeablePropValues = {
|
|
|
83
83
|
xLarge: 'x-large',
|
|
84
84
|
xxLarge: 'xx-large'
|
|
85
85
|
}
|
|
86
|
-
};
|
|
86
|
+
};
|
|
87
87
|
|
|
88
|
+
// SPACING
|
|
88
89
|
exports.ThemeablePropValues = ThemeablePropValues;
|
|
89
90
|
var _default = ThemeablePropValues;
|
|
90
91
|
exports.default = _default;
|
|
@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
exports.getShorthandPropValue = getShorthandPropValue;
|
|
8
|
-
|
|
9
8
|
var _isEmpty = require("@instructure/ui-utils/lib/isEmpty.js");
|
|
10
|
-
|
|
11
9
|
var _camelize = require("@instructure/ui-utils/lib/camelize.js");
|
|
12
|
-
|
|
13
10
|
var _console = require("@instructure/console");
|
|
14
|
-
|
|
15
11
|
/*
|
|
16
12
|
* The MIT License (MIT)
|
|
17
13
|
*
|
|
@@ -56,30 +52,24 @@ function getShorthandPropValue(componentName, componentTheme, propValue, propNam
|
|
|
56
52
|
if (typeof propValue !== 'string' || (0, _isEmpty.isEmpty)(componentTheme)) {
|
|
57
53
|
return;
|
|
58
54
|
}
|
|
59
|
-
|
|
60
55
|
return propValue.split(' ').map(shortHandValue => {
|
|
61
56
|
if (shortHandValue === 'auto' || shortHandValue === '0') {
|
|
62
57
|
return shortHandValue;
|
|
63
58
|
}
|
|
64
|
-
|
|
65
59
|
if (shortHandValue === 'none') {
|
|
66
60
|
return '0';
|
|
67
61
|
}
|
|
68
|
-
|
|
69
62
|
if (shortHandValue === 'circle') {
|
|
70
63
|
return '100%';
|
|
71
64
|
}
|
|
72
|
-
|
|
73
65
|
if (shortHandValue === 'pill') {
|
|
74
66
|
return '999em';
|
|
75
67
|
}
|
|
76
|
-
|
|
77
68
|
const themeVariableName = (0, _camelize.camelize)(`${propName}-${shortHandValue}`);
|
|
78
69
|
const themeVariableValue = componentTheme[themeVariableName];
|
|
79
70
|
(0, _console.logError)(typeof themeVariableValue !== 'undefined', `[${componentName}] '${themeVariableName}' is an invalid '${propName}' value.`);
|
|
80
71
|
return themeVariableValue || '0';
|
|
81
72
|
}).join(' ').trim();
|
|
82
73
|
}
|
|
83
|
-
|
|
84
74
|
var _default = getShorthandPropValue;
|
|
85
75
|
exports.default = _default;
|
package/lib/styleUtils/index.js
CHANGED
|
@@ -39,15 +39,9 @@ Object.defineProperty(exports, "mirrorShorthandEdges", {
|
|
|
39
39
|
return _mirrorShorthandEdges.mirrorShorthandEdges;
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
|
-
|
|
43
42
|
var _ThemeablePropValues = require("./ThemeablePropValues");
|
|
44
|
-
|
|
45
43
|
var _ThemeablePropTypes = require("./ThemeablePropTypes");
|
|
46
|
-
|
|
47
44
|
var _makeThemeVars = require("./makeThemeVars");
|
|
48
|
-
|
|
49
45
|
var _getShorthandPropValue = require("./getShorthandPropValue");
|
|
50
|
-
|
|
51
46
|
var _mirrorShorthandCorners = require("./mirrorShorthandCorners");
|
|
52
|
-
|
|
53
47
|
var _mirrorShorthandEdges = require("./mirrorShorthandEdges");
|
|
@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
exports.makeThemeVars = makeThemeVars;
|
|
8
|
-
|
|
9
8
|
var _camelize = require("@instructure/ui-utils/lib/camelize.js");
|
|
10
|
-
|
|
11
9
|
/*
|
|
12
10
|
* The MIT License (MIT)
|
|
13
11
|
*
|
|
@@ -50,6 +48,5 @@ function makeThemeVars(prefix, vars) {
|
|
|
50
48
|
});
|
|
51
49
|
return themeVars;
|
|
52
50
|
}
|
|
53
|
-
|
|
54
51
|
var _default = makeThemeVars;
|
|
55
52
|
exports.default = _default;
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.mirrorShorthandCorners = mirrorShorthandCorners;
|
|
7
7
|
exports.mirrorShorthandEdges = mirrorShorthandEdges;
|
|
8
|
-
|
|
9
8
|
/*
|
|
10
9
|
* The MIT License (MIT)
|
|
11
10
|
*
|
|
@@ -54,9 +53,7 @@ function mirrorShorthandEdges(values) {
|
|
|
54
53
|
if (typeof values !== 'string') {
|
|
55
54
|
return;
|
|
56
55
|
}
|
|
57
|
-
|
|
58
56
|
const valuesArr = values.split(' ');
|
|
59
|
-
|
|
60
57
|
if (valuesArr.length === 4) {
|
|
61
58
|
// swap the 2nd and 4th values
|
|
62
59
|
;
|
|
@@ -64,9 +61,9 @@ function mirrorShorthandEdges(values) {
|
|
|
64
61
|
valuesArr[1] = _ref[0];
|
|
65
62
|
valuesArr[3] = _ref[1];
|
|
66
63
|
}
|
|
67
|
-
|
|
68
64
|
return valuesArr.join(' ');
|
|
69
65
|
}
|
|
66
|
+
|
|
70
67
|
/**
|
|
71
68
|
* Convert shorthand CSS properties for corners to rtl
|
|
72
69
|
*
|
|
@@ -80,15 +77,11 @@ function mirrorShorthandEdges(values) {
|
|
|
80
77
|
* @param {String} values - space delimited string values representing a CSS shorthand
|
|
81
78
|
* @returns {String} a space delimited CSS shorthand string converted to RTL
|
|
82
79
|
*/
|
|
83
|
-
|
|
84
|
-
|
|
85
80
|
function mirrorShorthandCorners(values) {
|
|
86
81
|
if (typeof values !== 'string') {
|
|
87
82
|
return;
|
|
88
83
|
}
|
|
89
|
-
|
|
90
84
|
const valuesArr = values.split(' ');
|
|
91
|
-
|
|
92
85
|
if (valuesArr.length === 2) {
|
|
93
86
|
// swap the 1st and 2nd values
|
|
94
87
|
;
|
|
@@ -96,12 +89,10 @@ function mirrorShorthandCorners(values) {
|
|
|
96
89
|
valuesArr[0] = _ref2[0];
|
|
97
90
|
valuesArr[1] = _ref2[1];
|
|
98
91
|
}
|
|
99
|
-
|
|
100
92
|
if (valuesArr.length === 3) {
|
|
101
93
|
// convert 3 value syntax to 4 value syntax
|
|
102
94
|
valuesArr.push(valuesArr[1]);
|
|
103
95
|
}
|
|
104
|
-
|
|
105
96
|
if (valuesArr.length === 4) {
|
|
106
97
|
;
|
|
107
98
|
var _ref3 = [valuesArr[1], valuesArr[0], valuesArr[3], valuesArr[2]];
|
|
@@ -110,6 +101,5 @@ function mirrorShorthandCorners(values) {
|
|
|
110
101
|
valuesArr[2] = _ref3[2];
|
|
111
102
|
valuesArr[3] = _ref3[3];
|
|
112
103
|
}
|
|
113
|
-
|
|
114
104
|
return valuesArr.join(' ');
|
|
115
105
|
}
|
package/lib/useTheme.js
CHANGED
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useTheme = exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("@emotion/react");
|
|
9
|
-
|
|
10
8
|
var _uiThemes = require("@instructure/ui-themes");
|
|
11
|
-
|
|
12
9
|
var _isEmpty = require("@instructure/ui-utils/lib/isEmpty.js");
|
|
13
|
-
|
|
14
10
|
var _themeRegistry = require("@instructure/theme-registry");
|
|
15
|
-
|
|
16
11
|
/*
|
|
17
12
|
* The MIT License (MIT)
|
|
18
13
|
*
|
|
@@ -48,22 +43,16 @@ var _themeRegistry = require("@instructure/theme-registry");
|
|
|
48
43
|
*/
|
|
49
44
|
const useTheme = () => {
|
|
50
45
|
let theme = (0, _react.useTheme)();
|
|
51
|
-
|
|
52
46
|
if ((0, _isEmpty.isEmpty)(theme)) {
|
|
53
47
|
const globalTheme = _themeRegistry.ThemeRegistry.getCurrentTheme();
|
|
54
|
-
|
|
55
48
|
if (globalTheme) {
|
|
56
49
|
return globalTheme;
|
|
57
50
|
}
|
|
58
|
-
|
|
59
51
|
if (process.env.NODE_ENV !== 'production') {}
|
|
60
|
-
|
|
61
52
|
theme = _uiThemes.canvas;
|
|
62
53
|
}
|
|
63
|
-
|
|
64
54
|
return theme;
|
|
65
55
|
};
|
|
66
|
-
|
|
67
56
|
exports.useTheme = useTheme;
|
|
68
57
|
var _default = useTheme;
|
|
69
58
|
exports.default = _default;
|
package/lib/withStyle.js
CHANGED
|
@@ -1,30 +1,19 @@
|
|
|
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.withStyle = exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
|
|
16
11
|
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
|
|
17
|
-
|
|
18
12
|
var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
|
|
19
|
-
|
|
20
13
|
var _console = require("@instructure/console");
|
|
21
|
-
|
|
22
14
|
var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
|
|
23
|
-
|
|
24
15
|
var _getComponentThemeOverride = require("./getComponentThemeOverride");
|
|
25
|
-
|
|
26
16
|
var _useTheme = require("./useTheme");
|
|
27
|
-
|
|
28
17
|
/*
|
|
29
18
|
* The MIT License (MIT)
|
|
30
19
|
*
|
|
@@ -48,10 +37,12 @@ var _useTheme = require("./useTheme");
|
|
|
48
37
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
49
38
|
* SOFTWARE.
|
|
50
39
|
*/
|
|
40
|
+
|
|
51
41
|
const defaultValues = {
|
|
52
42
|
styles: {},
|
|
53
43
|
makeStyles: () => {}
|
|
54
44
|
};
|
|
45
|
+
|
|
55
46
|
/**
|
|
56
47
|
* ---
|
|
57
48
|
* category: utilities/themes
|
|
@@ -127,75 +118,73 @@ const defaultValues = {
|
|
|
127
118
|
* @param {function} generateComponentTheme - The function that returns the component's theme variables object
|
|
128
119
|
* @returns {ReactElement} The decorated WithStyle Component
|
|
129
120
|
*/
|
|
130
|
-
|
|
131
121
|
const withStyle = (0, _decorator.decorator)((ComposedComponent, generateStyle, generateComponentTheme) => {
|
|
132
122
|
const displayName = ComposedComponent.displayName || ComposedComponent.name;
|
|
133
123
|
const WithStyle = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
134
124
|
const theme = (0, _useTheme.useTheme)();
|
|
135
|
-
|
|
136
125
|
if (props.styles) {
|
|
137
126
|
(0, _console.warn)(false, `Manually passing the "styles" property is not allowed on the ${displayName} component. Using the default styles calculated by the @withStyle decorator instead.\n`, props.styles);
|
|
138
127
|
}
|
|
139
|
-
|
|
140
128
|
if (props.makeStyles) {
|
|
141
129
|
(0, _console.warn)(false, `Manually passing the "makeStyles" property is not allowed on the ${displayName} component. Styles are calculated by the @withStyle decorator.`);
|
|
142
130
|
}
|
|
143
|
-
|
|
144
|
-
|
|
131
|
+
const componentProps = {
|
|
132
|
+
...ComposedComponent.defaultProps,
|
|
145
133
|
...props,
|
|
146
134
|
...defaultValues
|
|
147
135
|
};
|
|
148
136
|
let componentTheme = typeof generateComponentTheme === 'function' ? generateComponentTheme(theme) : {};
|
|
149
137
|
const themeOverride = (0, _getComponentThemeOverride.getComponentThemeOverride)(theme, displayName, ComposedComponent.componentId, componentProps, componentTheme);
|
|
150
|
-
componentTheme = {
|
|
138
|
+
componentTheme = {
|
|
139
|
+
...componentTheme,
|
|
151
140
|
...themeOverride
|
|
152
141
|
};
|
|
153
|
-
|
|
154
142
|
const _useState = (0, _react.useState)(generateStyle ? generateStyle(componentTheme, componentProps, {}) : {}),
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
143
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
144
|
+
styles = _useState2[0],
|
|
145
|
+
setStyles = _useState2[1];
|
|
159
146
|
const makeStyleHandler = extraArgs => {
|
|
160
147
|
const calculatedStyles = generateStyle(componentTheme, componentProps, extraArgs);
|
|
161
|
-
|
|
162
148
|
if (!(0, _deepEqual.deepEqual)(calculatedStyles, styles)) {
|
|
163
149
|
setStyles(calculatedStyles);
|
|
164
150
|
}
|
|
165
151
|
};
|
|
166
|
-
|
|
167
152
|
return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
|
|
168
153
|
ref: ref
|
|
169
154
|
}, props, {
|
|
170
155
|
makeStyles: makeStyleHandler,
|
|
171
|
-
styles: styles
|
|
156
|
+
styles: styles
|
|
157
|
+
// passing themeOverrides is needed for components like Button
|
|
172
158
|
// that have no makeStyles of their own and only pass themeOverrides
|
|
173
159
|
// to the underlying component (e.g.: BaseButton)
|
|
174
160
|
,
|
|
175
161
|
themeOverride: themeOverride
|
|
176
162
|
}));
|
|
177
163
|
});
|
|
178
|
-
(0, _hoistNonReactStatics.default)(WithStyle, ComposedComponent);
|
|
164
|
+
(0, _hoistNonReactStatics.default)(WithStyle, ComposedComponent);
|
|
165
|
+
|
|
166
|
+
// we have to pass these on, because sometimes users
|
|
179
167
|
// access propTypes of the component in other components
|
|
180
168
|
// eslint-disable-next-line react/forbid-foreign-prop-types
|
|
181
|
-
|
|
182
169
|
WithStyle.propTypes = ComposedComponent.propTypes;
|
|
183
|
-
WithStyle.defaultProps = ComposedComponent.defaultProps;
|
|
170
|
+
WithStyle.defaultProps = ComposedComponent.defaultProps;
|
|
184
171
|
|
|
185
|
-
|
|
172
|
+
// These static fields exist on InstUI components
|
|
173
|
+
WithStyle.allowedProps = ComposedComponent.allowedProps;
|
|
186
174
|
|
|
187
|
-
|
|
188
|
-
|
|
175
|
+
// we are exposing the theme generator for the docs generation
|
|
176
|
+
WithStyle.generateComponentTheme = generateComponentTheme;
|
|
189
177
|
|
|
190
|
-
|
|
178
|
+
// we have to add defaults to makeStyles and styles added by this decorator
|
|
179
|
+
// eslint-disable-next-line no-param-reassign
|
|
180
|
+
ComposedComponent.defaultProps = {
|
|
181
|
+
...ComposedComponent.defaultProps,
|
|
191
182
|
makeStyles: defaultValues.makeStyles,
|
|
192
183
|
styles: defaultValues.styles
|
|
193
184
|
};
|
|
194
|
-
|
|
195
185
|
if (process.env.NODE_ENV !== 'production') {
|
|
196
186
|
WithStyle.displayName = `WithStyle(${displayName})`;
|
|
197
187
|
}
|
|
198
|
-
|
|
199
188
|
return WithStyle;
|
|
200
189
|
});
|
|
201
190
|
exports.withStyle = withStyle;
|