@instructure/ui-svg-images 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/InlineSVG/InlineSVGLocator.js +2 -1
- package/es/InlineSVG/index.js +14 -37
- package/es/InlineSVG/props.js +1 -0
- package/es/InlineSVG/styles.js +1 -2
- package/es/InlineSVG/theme.js +3 -3
- package/es/SVGIcon/SVGIconLocator.js +2 -1
- package/es/SVGIcon/index.js +15 -28
- package/es/SVGIcon/props.js +2 -1
- package/es/SVGIcon/styles.js +2 -3
- package/es/SVGIcon/theme.js +2 -2
- package/es/index.js +1 -0
- package/lib/InlineSVG/InlineSVGLocator.js +1 -3
- package/lib/InlineSVG/index.js +14 -46
- package/lib/InlineSVG/locator.js +0 -2
- package/lib/InlineSVG/props.js +1 -3
- package/lib/InlineSVG/styles.js +1 -3
- package/lib/InlineSVG/theme.js +3 -4
- package/lib/SVGIcon/SVGIconLocator.js +1 -3
- package/lib/SVGIcon/index.js +15 -35
- package/lib/SVGIcon/locator.js +0 -2
- package/lib/SVGIcon/props.js +3 -5
- package/lib/SVGIcon/styles.js +2 -4
- package/lib/SVGIcon/theme.js +2 -3
- package/lib/index.js +0 -2
- package/package.json +11 -11
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-svg-images
|
|
9
|
+
|
|
6
10
|
## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @instructure/ui-svg-images
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { InlineSVG } from './index';
|
|
25
|
+
import { InlineSVG } from './index';
|
|
26
26
|
|
|
27
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
27
28
|
export const InlineSVGLocator = locator(InlineSVG.selector);
|
package/es/InlineSVG/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["style", "title", "description", "focusable", "children", "src", "styles"];
|
|
3
|
-
|
|
4
3
|
var _dec, _dec2, _dec3, _class, _class2;
|
|
5
|
-
|
|
6
4
|
/*
|
|
7
5
|
* The MIT License (MIT)
|
|
8
6
|
*
|
|
@@ -35,7 +33,6 @@ import { withStyle, jsx } from '@instructure/emotion';
|
|
|
35
33
|
import generateStyle from './styles';
|
|
36
34
|
import generateComponentTheme from './theme';
|
|
37
35
|
import { allowedProps, propTypes } from './props';
|
|
38
|
-
|
|
39
36
|
/**
|
|
40
37
|
---
|
|
41
38
|
category: components/utilities
|
|
@@ -48,32 +45,24 @@ let InlineSVG = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
|
|
|
48
45
|
this.titleId = void 0;
|
|
49
46
|
this.descId = void 0;
|
|
50
47
|
this.ref = null;
|
|
51
|
-
|
|
52
48
|
this.handleRef = el => {
|
|
53
49
|
const elementRef = this.props.elementRef;
|
|
54
50
|
this.ref = el;
|
|
55
|
-
|
|
56
51
|
if (typeof elementRef === 'function') {
|
|
57
52
|
elementRef(el);
|
|
58
53
|
}
|
|
59
54
|
};
|
|
60
|
-
|
|
61
55
|
this.titleId = props.deterministicId('InlineSVG-title');
|
|
62
56
|
this.descId = props.deterministicId('InlineSVG-desc');
|
|
63
57
|
}
|
|
64
|
-
|
|
65
58
|
componentDidMount() {
|
|
66
59
|
var _this$props$makeStyle, _this$props;
|
|
67
|
-
|
|
68
60
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
69
61
|
}
|
|
70
|
-
|
|
71
62
|
componentDidUpdate() {
|
|
72
63
|
var _this$props$makeStyle2, _this$props2;
|
|
73
|
-
|
|
74
64
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
75
65
|
}
|
|
76
|
-
|
|
77
66
|
get role() {
|
|
78
67
|
if (this.props.title) {
|
|
79
68
|
return 'img';
|
|
@@ -81,39 +70,33 @@ let InlineSVG = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
|
|
|
81
70
|
return 'presentation';
|
|
82
71
|
}
|
|
83
72
|
}
|
|
84
|
-
|
|
85
73
|
renderTitle() {
|
|
86
74
|
const title = this.props.title;
|
|
87
75
|
return title ? jsx("title", {
|
|
88
76
|
id: this.titleId
|
|
89
77
|
}, title) : null;
|
|
90
78
|
}
|
|
91
|
-
|
|
92
79
|
renderDesc(desc) {
|
|
93
80
|
return desc ? jsx("desc", {
|
|
94
81
|
id: this.descId
|
|
95
82
|
}, desc) : null;
|
|
96
83
|
}
|
|
97
|
-
|
|
98
84
|
get labelledBy() {
|
|
99
85
|
const ids = [];
|
|
100
|
-
|
|
101
86
|
if (this.props.title) {
|
|
102
87
|
ids.push(this.titleId);
|
|
103
88
|
}
|
|
104
|
-
|
|
105
89
|
if (this.props.description) {
|
|
106
90
|
ids.push(this.descId);
|
|
107
91
|
}
|
|
108
|
-
|
|
109
92
|
return ids.length > 0 ? ids.join(' ') : void 0;
|
|
110
93
|
}
|
|
111
|
-
|
|
112
94
|
renderContent() {
|
|
113
95
|
if (this.props.src) {
|
|
114
96
|
const src = InlineSVG.prepareSrc(this.props.src);
|
|
115
97
|
return jsx("g", {
|
|
116
|
-
role: "presentation"
|
|
98
|
+
role: "presentation"
|
|
99
|
+
// eslint-disable-next-line react/no-danger
|
|
117
100
|
,
|
|
118
101
|
dangerouslySetInnerHTML: {
|
|
119
102
|
__html: src
|
|
@@ -125,23 +108,23 @@ let InlineSVG = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
|
|
|
125
108
|
}, this.props.children);
|
|
126
109
|
}
|
|
127
110
|
}
|
|
128
|
-
|
|
129
111
|
render() {
|
|
130
112
|
const _this$props3 = this.props,
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
113
|
+
style = _this$props3.style,
|
|
114
|
+
title = _this$props3.title,
|
|
115
|
+
description = _this$props3.description,
|
|
116
|
+
focusable = _this$props3.focusable,
|
|
117
|
+
children = _this$props3.children,
|
|
118
|
+
src = _this$props3.src,
|
|
119
|
+
styles = _this$props3.styles,
|
|
120
|
+
props = _objectWithoutProperties(_this$props3, _excluded);
|
|
121
|
+
|
|
122
|
+
// if width or height are 'auto', don't supply anything to the SVG
|
|
141
123
|
const width = this.props.width === 'auto' ? void 0 : this.props.width;
|
|
142
124
|
const height = this.props.height === 'auto' ? void 0 : this.props.height;
|
|
143
125
|
return jsx("svg", Object.assign({}, parseAttributes(src), omitProps(this.props, InlineSVG.allowedProps, ['inline']), {
|
|
144
|
-
style: {
|
|
126
|
+
style: {
|
|
127
|
+
...style,
|
|
145
128
|
width,
|
|
146
129
|
height
|
|
147
130
|
},
|
|
@@ -156,7 +139,6 @@ let InlineSVG = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
|
|
|
156
139
|
ref: this.handleRef
|
|
157
140
|
}), this.renderTitle(), this.renderDesc(description), this.renderContent());
|
|
158
141
|
}
|
|
159
|
-
|
|
160
142
|
}, _class2.displayName = "InlineSVG", _class2.componentId = 'InlineSVG', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
|
161
143
|
focusable: false,
|
|
162
144
|
src: '',
|
|
@@ -171,18 +153,15 @@ let InlineSVG = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
|
|
|
171
153
|
const matches = pattern.exec(src);
|
|
172
154
|
return matches ? matches[1] : src;
|
|
173
155
|
}, _class2)) || _class) || _class) || _class);
|
|
174
|
-
|
|
175
156
|
function parseAttributes(src) {
|
|
176
157
|
const attributes = {};
|
|
177
158
|
const SVGAttributesRegExp = /<svg\s+([^>]*)\s*>/;
|
|
178
159
|
const namesAndValuesRegExp = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g;
|
|
179
|
-
|
|
180
160
|
if (typeof src === 'string') {
|
|
181
161
|
const attributesMatches = SVGAttributesRegExp.exec(src);
|
|
182
162
|
const attributesString = attributesMatches ? attributesMatches[1] : '';
|
|
183
163
|
const excludes = ['xmlns', 'xmlns:xlink', 'version'];
|
|
184
164
|
let match = namesAndValuesRegExp.exec(attributesString);
|
|
185
|
-
|
|
186
165
|
while (match != null) {
|
|
187
166
|
if (excludes.indexOf(match[1]) === -1) {
|
|
188
167
|
attributes[match[1]] = match[2] || (match[3] ? match[3] : match[4] ? match[4] : match[5]) || match[1]; // eslint-disable-line no-nested-ternary, max-len
|
|
@@ -191,9 +170,7 @@ function parseAttributes(src) {
|
|
|
191
170
|
match = namesAndValuesRegExp.exec(attributesString);
|
|
192
171
|
}
|
|
193
172
|
}
|
|
194
|
-
|
|
195
173
|
return attributes;
|
|
196
174
|
}
|
|
197
|
-
|
|
198
175
|
export default InlineSVG;
|
|
199
176
|
export { InlineSVG };
|
package/es/InlineSVG/props.js
CHANGED
package/es/InlineSVG/styles.js
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (componentTheme, props) => {
|
|
36
36
|
const inline = props.inline,
|
|
37
|
-
|
|
37
|
+
color = props.color;
|
|
38
38
|
const colorVariants = {
|
|
39
39
|
inherit: {
|
|
40
40
|
color: 'inherit'
|
|
@@ -78,5 +78,4 @@ const generateStyle = (componentTheme, props) => {
|
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
80
|
};
|
|
81
|
-
|
|
82
81
|
export default generateStyle;
|
package/es/InlineSVG/theme.js
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
*/
|
|
32
32
|
const generateComponentTheme = theme => {
|
|
33
33
|
const colors = theme.colors,
|
|
34
|
-
|
|
34
|
+
themeName = theme.key;
|
|
35
35
|
const themeSpecificStyle = {
|
|
36
36
|
canvas: {
|
|
37
37
|
primaryColor: theme['ic-brand-font-color-dark'],
|
|
@@ -49,9 +49,9 @@ const generateComponentTheme = theme => {
|
|
|
49
49
|
alertColor: colors === null || colors === void 0 ? void 0 : colors.textAlert,
|
|
50
50
|
successColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
|
|
51
51
|
};
|
|
52
|
-
return {
|
|
52
|
+
return {
|
|
53
|
+
...componentVariables,
|
|
53
54
|
...themeSpecificStyle[themeName]
|
|
54
55
|
};
|
|
55
56
|
};
|
|
56
|
-
|
|
57
57
|
export default generateComponentTheme;
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
|
-
import { SVGIcon } from './index';
|
|
25
|
+
import { SVGIcon } from './index';
|
|
26
26
|
|
|
27
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
27
28
|
export const SVGIconLocator = locator(SVGIcon.selector);
|
package/es/SVGIcon/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
const _excluded = ["rotate", "className", "themeOverride", "size", "bidirectional", "makeStyles", "styles"],
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
_excluded2 = ["sizeXSmall", "sizeSmall", "sizeMedium", "sizeLarge", "sizeXLarge"];
|
|
5
4
|
var _dec, _dec2, _class, _class2;
|
|
6
|
-
|
|
7
5
|
/*
|
|
8
6
|
* The MIT License (MIT)
|
|
9
7
|
*
|
|
@@ -36,7 +34,6 @@ import { InlineSVG } from '../InlineSVG';
|
|
|
36
34
|
import generateStyle from './styles';
|
|
37
35
|
import generateComponentTheme from './theme';
|
|
38
36
|
import { allowedProps, propTypes } from './props';
|
|
39
|
-
|
|
40
37
|
/**
|
|
41
38
|
---
|
|
42
39
|
category: components/utilities
|
|
@@ -47,48 +44,39 @@ let SVGIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
47
44
|
constructor() {
|
|
48
45
|
super(...arguments);
|
|
49
46
|
this.ref = null;
|
|
50
|
-
|
|
51
47
|
this.handleRef = el => {
|
|
52
48
|
const elementRef = this.props.elementRef;
|
|
53
49
|
this.ref = el;
|
|
54
|
-
|
|
55
50
|
if (typeof elementRef === 'function') {
|
|
56
51
|
elementRef(el);
|
|
57
52
|
}
|
|
58
53
|
};
|
|
59
54
|
}
|
|
60
|
-
|
|
61
55
|
componentDidMount() {
|
|
62
56
|
var _this$props$makeStyle, _this$props;
|
|
63
|
-
|
|
64
57
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
65
58
|
}
|
|
66
|
-
|
|
67
59
|
componentDidUpdate() {
|
|
68
60
|
var _this$props$makeStyle2, _this$props2;
|
|
69
|
-
|
|
70
61
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
71
62
|
}
|
|
72
|
-
|
|
73
63
|
render() {
|
|
74
64
|
const _this$props3 = this.props,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
65
|
+
rotate = _this$props3.rotate,
|
|
66
|
+
className = _this$props3.className,
|
|
67
|
+
themeOverride = _this$props3.themeOverride,
|
|
68
|
+
size = _this$props3.size,
|
|
69
|
+
bidirectional = _this$props3.bidirectional,
|
|
70
|
+
makeStyles = _this$props3.makeStyles,
|
|
71
|
+
styles = _this$props3.styles,
|
|
72
|
+
props = _objectWithoutProperties(_this$props3, _excluded);
|
|
84
73
|
const _ref = themeOverride,
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
74
|
+
sizeXSmall = _ref.sizeXSmall,
|
|
75
|
+
sizeSmall = _ref.sizeSmall,
|
|
76
|
+
sizeMedium = _ref.sizeMedium,
|
|
77
|
+
sizeLarge = _ref.sizeLarge,
|
|
78
|
+
sizeXLarge = _ref.sizeXLarge,
|
|
79
|
+
inlineSVGThemeOverrides = _objectWithoutProperties(_ref, _excluded2);
|
|
92
80
|
return jsx(InlineSVG, Object.assign({}, props, {
|
|
93
81
|
themeOverride: inlineSVGThemeOverrides,
|
|
94
82
|
rotate: rotate,
|
|
@@ -97,7 +85,6 @@ let SVGIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
97
85
|
elementRef: this.handleRef
|
|
98
86
|
}));
|
|
99
87
|
}
|
|
100
|
-
|
|
101
88
|
}, _class2.displayName = "SVGIcon", _class2.componentId = 'SVGIcon', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
|
|
102
89
|
rotate: '0',
|
|
103
90
|
bidirectional: false
|
package/es/SVGIcon/props.js
CHANGED
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
*/
|
|
24
24
|
import PropTypes from 'prop-types';
|
|
25
25
|
import { InlineSVG } from '../InlineSVG';
|
|
26
|
-
const propTypes = {
|
|
26
|
+
const propTypes = {
|
|
27
|
+
// eslint-disable-next-line react/forbid-foreign-prop-types
|
|
27
28
|
...InlineSVG.propTypes,
|
|
28
29
|
rotate: PropTypes.oneOf(['0', '90', '180', '270']),
|
|
29
30
|
size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large']),
|
package/es/SVGIcon/styles.js
CHANGED
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (componentTheme, props) => {
|
|
36
36
|
const rotate = props.rotate,
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
size = props.size,
|
|
38
|
+
bidirectional = props.bidirectional;
|
|
39
39
|
const rotateVariants = {
|
|
40
40
|
0: {},
|
|
41
41
|
90: {
|
|
@@ -94,5 +94,4 @@ const generateStyle = (componentTheme, props) => {
|
|
|
94
94
|
}
|
|
95
95
|
};
|
|
96
96
|
};
|
|
97
|
-
|
|
98
97
|
export default generateStyle;
|
package/es/SVGIcon/theme.js
CHANGED
package/es/index.js
CHANGED
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.InlineSVGLocator = void 0;
|
|
7
|
-
|
|
8
7
|
var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
|
|
9
|
-
|
|
10
8
|
var _index = require("./index");
|
|
11
|
-
|
|
12
9
|
/*
|
|
13
10
|
* The MIT License (MIT)
|
|
14
11
|
*
|
|
@@ -32,6 +29,7 @@ var _index = require("./index");
|
|
|
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
|
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
36
34
|
const InlineSVGLocator = (0, _locator.locator)(_index.InlineSVG.selector);
|
|
37
35
|
exports.InlineSVGLocator = InlineSVGLocator;
|
package/lib/InlineSVG/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.InlineSVG = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
15
|
-
|
|
16
11
|
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
17
|
-
|
|
18
12
|
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
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 _props = require("./props");
|
|
27
|
-
|
|
28
17
|
const _excluded = ["style", "title", "description", "focusable", "children", "src", "styles"];
|
|
29
|
-
|
|
30
18
|
var _dec, _dec2, _dec3, _class, _class2;
|
|
31
|
-
|
|
32
19
|
/**
|
|
33
20
|
---
|
|
34
21
|
category: components/utilities
|
|
@@ -41,32 +28,24 @@ let InlineSVG = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
|
|
|
41
28
|
this.titleId = void 0;
|
|
42
29
|
this.descId = void 0;
|
|
43
30
|
this.ref = null;
|
|
44
|
-
|
|
45
31
|
this.handleRef = el => {
|
|
46
32
|
const elementRef = this.props.elementRef;
|
|
47
33
|
this.ref = el;
|
|
48
|
-
|
|
49
34
|
if (typeof elementRef === 'function') {
|
|
50
35
|
elementRef(el);
|
|
51
36
|
}
|
|
52
37
|
};
|
|
53
|
-
|
|
54
38
|
this.titleId = props.deterministicId('InlineSVG-title');
|
|
55
39
|
this.descId = props.deterministicId('InlineSVG-desc');
|
|
56
40
|
}
|
|
57
|
-
|
|
58
41
|
componentDidMount() {
|
|
59
42
|
var _this$props$makeStyle, _this$props;
|
|
60
|
-
|
|
61
43
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
62
44
|
}
|
|
63
|
-
|
|
64
45
|
componentDidUpdate() {
|
|
65
46
|
var _this$props$makeStyle2, _this$props2;
|
|
66
|
-
|
|
67
47
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
68
48
|
}
|
|
69
|
-
|
|
70
49
|
get role() {
|
|
71
50
|
if (this.props.title) {
|
|
72
51
|
return 'img';
|
|
@@ -74,39 +53,33 @@ let InlineSVG = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
|
|
|
74
53
|
return 'presentation';
|
|
75
54
|
}
|
|
76
55
|
}
|
|
77
|
-
|
|
78
56
|
renderTitle() {
|
|
79
57
|
const title = this.props.title;
|
|
80
58
|
return title ? (0, _emotion.jsx)("title", {
|
|
81
59
|
id: this.titleId
|
|
82
60
|
}, title) : null;
|
|
83
61
|
}
|
|
84
|
-
|
|
85
62
|
renderDesc(desc) {
|
|
86
63
|
return desc ? (0, _emotion.jsx)("desc", {
|
|
87
64
|
id: this.descId
|
|
88
65
|
}, desc) : null;
|
|
89
66
|
}
|
|
90
|
-
|
|
91
67
|
get labelledBy() {
|
|
92
68
|
const ids = [];
|
|
93
|
-
|
|
94
69
|
if (this.props.title) {
|
|
95
70
|
ids.push(this.titleId);
|
|
96
71
|
}
|
|
97
|
-
|
|
98
72
|
if (this.props.description) {
|
|
99
73
|
ids.push(this.descId);
|
|
100
74
|
}
|
|
101
|
-
|
|
102
75
|
return ids.length > 0 ? ids.join(' ') : void 0;
|
|
103
76
|
}
|
|
104
|
-
|
|
105
77
|
renderContent() {
|
|
106
78
|
if (this.props.src) {
|
|
107
79
|
const src = InlineSVG.prepareSrc(this.props.src);
|
|
108
80
|
return (0, _emotion.jsx)("g", {
|
|
109
|
-
role: "presentation"
|
|
81
|
+
role: "presentation"
|
|
82
|
+
// eslint-disable-next-line react/no-danger
|
|
110
83
|
,
|
|
111
84
|
dangerouslySetInnerHTML: {
|
|
112
85
|
__html: src
|
|
@@ -118,22 +91,23 @@ let InlineSVG = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
|
|
|
118
91
|
}, this.props.children);
|
|
119
92
|
}
|
|
120
93
|
}
|
|
121
|
-
|
|
122
94
|
render() {
|
|
123
95
|
const _this$props3 = this.props,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
96
|
+
style = _this$props3.style,
|
|
97
|
+
title = _this$props3.title,
|
|
98
|
+
description = _this$props3.description,
|
|
99
|
+
focusable = _this$props3.focusable,
|
|
100
|
+
children = _this$props3.children,
|
|
101
|
+
src = _this$props3.src,
|
|
102
|
+
styles = _this$props3.styles,
|
|
103
|
+
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
104
|
+
|
|
105
|
+
// if width or height are 'auto', don't supply anything to the SVG
|
|
133
106
|
const width = this.props.width === 'auto' ? void 0 : this.props.width;
|
|
134
107
|
const height = this.props.height === 'auto' ? void 0 : this.props.height;
|
|
135
108
|
return (0, _emotion.jsx)("svg", Object.assign({}, parseAttributes(src), (0, _omitProps.omitProps)(this.props, InlineSVG.allowedProps, ['inline']), {
|
|
136
|
-
style: {
|
|
109
|
+
style: {
|
|
110
|
+
...style,
|
|
137
111
|
width,
|
|
138
112
|
height
|
|
139
113
|
},
|
|
@@ -148,7 +122,6 @@ let InlineSVG = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
|
|
|
148
122
|
ref: this.handleRef
|
|
149
123
|
}), this.renderTitle(), this.renderDesc(description), this.renderContent());
|
|
150
124
|
}
|
|
151
|
-
|
|
152
125
|
}, _class2.displayName = "InlineSVG", _class2.componentId = 'InlineSVG', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
|
153
126
|
focusable: false,
|
|
154
127
|
src: '',
|
|
@@ -164,18 +137,15 @@ let InlineSVG = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
|
|
|
164
137
|
return matches ? matches[1] : src;
|
|
165
138
|
}, _class2)) || _class) || _class) || _class);
|
|
166
139
|
exports.InlineSVG = InlineSVG;
|
|
167
|
-
|
|
168
140
|
function parseAttributes(src) {
|
|
169
141
|
const attributes = {};
|
|
170
142
|
const SVGAttributesRegExp = /<svg\s+([^>]*)\s*>/;
|
|
171
143
|
const namesAndValuesRegExp = /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/g;
|
|
172
|
-
|
|
173
144
|
if (typeof src === 'string') {
|
|
174
145
|
const attributesMatches = SVGAttributesRegExp.exec(src);
|
|
175
146
|
const attributesString = attributesMatches ? attributesMatches[1] : '';
|
|
176
147
|
const excludes = ['xmlns', 'xmlns:xlink', 'version'];
|
|
177
148
|
let match = namesAndValuesRegExp.exec(attributesString);
|
|
178
|
-
|
|
179
149
|
while (match != null) {
|
|
180
150
|
if (excludes.indexOf(match[1]) === -1) {
|
|
181
151
|
attributes[match[1]] = match[2] || (match[3] ? match[3] : match[4] ? match[4] : match[5]) || match[1]; // eslint-disable-line no-nested-ternary, max-len
|
|
@@ -184,9 +154,7 @@ function parseAttributes(src) {
|
|
|
184
154
|
match = namesAndValuesRegExp.exec(attributesString);
|
|
185
155
|
}
|
|
186
156
|
}
|
|
187
|
-
|
|
188
157
|
return attributes;
|
|
189
158
|
}
|
|
190
|
-
|
|
191
159
|
var _default = InlineSVG;
|
|
192
160
|
exports.default = _default;
|
package/lib/InlineSVG/locator.js
CHANGED
package/lib/InlineSVG/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.node,
|
|
37
35
|
src: _propTypes.default.string,
|
package/lib/InlineSVG/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 inline = props.inline,
|
|
44
|
-
|
|
43
|
+
color = props.color;
|
|
45
44
|
const colorVariants = {
|
|
46
45
|
inherit: {
|
|
47
46
|
color: 'inherit'
|
|
@@ -85,6 +84,5 @@ const generateStyle = (componentTheme, props) => {
|
|
|
85
84
|
}
|
|
86
85
|
};
|
|
87
86
|
};
|
|
88
|
-
|
|
89
87
|
var _default = generateStyle;
|
|
90
88
|
exports.default = _default;
|
package/lib/InlineSVG/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
|
*
|
|
@@ -38,7 +37,7 @@ exports.default = void 0;
|
|
|
38
37
|
*/
|
|
39
38
|
const generateComponentTheme = theme => {
|
|
40
39
|
const colors = theme.colors,
|
|
41
|
-
|
|
40
|
+
themeName = theme.key;
|
|
42
41
|
const themeSpecificStyle = {
|
|
43
42
|
canvas: {
|
|
44
43
|
primaryColor: theme['ic-brand-font-color-dark'],
|
|
@@ -56,10 +55,10 @@ const generateComponentTheme = theme => {
|
|
|
56
55
|
alertColor: colors === null || colors === void 0 ? void 0 : colors.textAlert,
|
|
57
56
|
successColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
|
|
58
57
|
};
|
|
59
|
-
return {
|
|
58
|
+
return {
|
|
59
|
+
...componentVariables,
|
|
60
60
|
...themeSpecificStyle[themeName]
|
|
61
61
|
};
|
|
62
62
|
};
|
|
63
|
-
|
|
64
63
|
var _default = generateComponentTheme;
|
|
65
64
|
exports.default = _default;
|