@atlaskit/media-avatar-picker 24.6.5 → 24.6.6
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 +6 -0
- package/compass.yml +3 -2
- package/dist/cjs/avatar-list/index.js +4 -1
- package/dist/cjs/avatar-list/styles.js +6 -0
- package/dist/cjs/avatar-picker-dialog/SubmitErrorDialog.js +17 -13
- package/dist/cjs/avatar-picker-dialog/index.js +9 -6
- package/dist/cjs/avatar-picker-dialog/styles.js +10 -0
- package/dist/cjs/image-cropper/index.js +14 -1
- package/dist/cjs/image-navigator/dragZone.js +2 -0
- package/dist/cjs/image-navigator/index.js +24 -18
- package/dist/cjs/image-navigator/slider.js +30 -27
- package/dist/cjs/image-navigator/styles.js +32 -2
- package/dist/cjs/image-placer/containerWrapper.js +4 -0
- package/dist/cjs/image-placer/imagePlacerErrorWrapper.js +7 -3
- package/dist/cjs/image-placer/imageWrapper.js +12 -8
- package/dist/cjs/image-placer/index.js +29 -26
- package/dist/cjs/image-placer/margin.js +3 -1
- package/dist/cjs/image-placer/styles.js +20 -0
- package/dist/cjs/predefined-avatar-list/index.js +24 -20
- package/dist/cjs/predefined-avatar-list/styles.js +2 -2
- package/dist/cjs/predefined-avatar-view/index.js +27 -23
- package/dist/cjs/predefined-avatar-view/styles.js +13 -0
- package/dist/cjs/styles.js +9 -0
- package/dist/es2019/avatar-list/index.js +4 -1
- package/dist/es2019/avatar-list/styles.js +6 -0
- package/dist/es2019/avatar-picker-dialog/SubmitErrorDialog.js +17 -13
- package/dist/es2019/avatar-picker-dialog/index.js +9 -5
- package/dist/es2019/avatar-picker-dialog/styles.js +10 -0
- package/dist/es2019/image-cropper/index.js +14 -0
- package/dist/es2019/image-navigator/dragZone.js +2 -0
- package/dist/es2019/image-navigator/index.js +24 -17
- package/dist/es2019/image-navigator/slider.js +26 -22
- package/dist/es2019/image-navigator/styles.js +32 -2
- package/dist/es2019/image-placer/containerWrapper.js +4 -0
- package/dist/es2019/image-placer/imagePlacerErrorWrapper.js +4 -1
- package/dist/es2019/image-placer/imageWrapper.js +4 -1
- package/dist/es2019/image-placer/index.js +29 -25
- package/dist/es2019/image-placer/margin.js +3 -0
- package/dist/es2019/image-placer/styles.js +19 -0
- package/dist/es2019/predefined-avatar-list/index.js +24 -20
- package/dist/es2019/predefined-avatar-list/styles.js +2 -1
- package/dist/es2019/predefined-avatar-view/index.js +27 -23
- package/dist/es2019/predefined-avatar-view/styles.js +13 -0
- package/dist/es2019/styles.js +9 -0
- package/dist/esm/avatar-list/index.js +4 -1
- package/dist/esm/avatar-list/styles.js +6 -0
- package/dist/esm/avatar-picker-dialog/SubmitErrorDialog.js +17 -13
- package/dist/esm/avatar-picker-dialog/index.js +9 -5
- package/dist/esm/avatar-picker-dialog/styles.js +10 -0
- package/dist/esm/image-cropper/index.js +14 -0
- package/dist/esm/image-navigator/dragZone.js +2 -0
- package/dist/esm/image-navigator/index.js +24 -17
- package/dist/esm/image-navigator/slider.js +30 -26
- package/dist/esm/image-navigator/styles.js +32 -2
- package/dist/esm/image-placer/containerWrapper.js +4 -0
- package/dist/esm/image-placer/imagePlacerErrorWrapper.js +7 -3
- package/dist/esm/image-placer/imageWrapper.js +12 -8
- package/dist/esm/image-placer/index.js +29 -25
- package/dist/esm/image-placer/margin.js +3 -0
- package/dist/esm/image-placer/styles.js +19 -0
- package/dist/esm/predefined-avatar-list/index.js +24 -20
- package/dist/esm/predefined-avatar-list/styles.js +2 -1
- package/dist/esm/predefined-avatar-view/index.js +27 -23
- package/dist/esm/predefined-avatar-view/styles.js +13 -0
- package/dist/esm/styles.js +9 -0
- package/example-helpers/StatefulAvatarPickerDialog.tsx +2 -0
- package/example-helpers/styles.ts +9 -0
- package/package.json +77 -77
package/CHANGELOG.md
CHANGED
package/compass.yml
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
name: Media Avatar Picker
|
|
2
2
|
id: 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/91b4a140-e4d9-4c93-b685-33ab22c6fa6d'
|
|
3
|
-
description:
|
|
3
|
+
description:
|
|
4
|
+
'A component to select, drag and resize image avatars. It also provides a default list of
|
|
5
|
+
predefined avatars.'
|
|
4
6
|
configVersion: 1
|
|
5
7
|
typeId: UI_ELEMENT
|
|
6
8
|
ownerId: 'ari:cloud:teams::team/5e42d9d6-0823-4c6f-b469-7445522c9d10'
|
|
@@ -42,6 +44,5 @@ links:
|
|
|
42
44
|
type: PROJECT
|
|
43
45
|
url: 'https://product-fabric.atlassian.net/jira/software/c/projects/MEX/boards/713'
|
|
44
46
|
relationships: {}
|
|
45
|
-
|
|
46
47
|
# Learn more about formatting compass.yml:
|
|
47
48
|
# https://go.atlassian.com/compass-yml-format
|
|
@@ -9,6 +9,7 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
9
9
|
var _mediaUi = require("@atlaskit/media-ui");
|
|
10
10
|
var _styles = require("./styles");
|
|
11
11
|
/** @jsx jsx */
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
13
|
|
|
13
14
|
var AvatarList = exports.AvatarList = function AvatarList(_ref) {
|
|
14
15
|
var _ref$avatars = _ref.avatars,
|
|
@@ -43,7 +44,9 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
|
|
|
43
44
|
});
|
|
44
45
|
return (0, _react.jsx)("div", {
|
|
45
46
|
role: "radiogroup",
|
|
46
|
-
"aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar)
|
|
47
|
+
"aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar)
|
|
48
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
49
|
+
,
|
|
47
50
|
css: _styles.avatarListWrapperStyles
|
|
48
51
|
}, cards);
|
|
49
52
|
};
|
|
@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.smallAvatarImageStyles = exports.avatarListWrapperStyles = void 0;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _styles = require("../styles");
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
|
+
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
9
12
|
var smallAvatarImageStyles = exports.smallAvatarImageStyles = (0, _react.css)(_styles.avatarImageStyles, {
|
|
10
13
|
width: "var(--ds-space-500, 40px)",
|
|
11
14
|
height: "var(--ds-space-500, 40px)"
|
|
12
15
|
});
|
|
16
|
+
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
13
18
|
var avatarListWrapperStyles = exports.avatarListWrapperStyles = (0, _react.css)({
|
|
14
19
|
display: 'flex',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
15
21
|
label: {
|
|
16
22
|
paddingRight: "var(--ds-space-050, 4px)",
|
|
17
23
|
display: 'inline-flex'
|
|
@@ -14,6 +14,7 @@ var _mediaUi = require("@atlaskit/media-ui");
|
|
|
14
14
|
var _reactIntlNext = require("react-intl-next");
|
|
15
15
|
var _styles = require("./styles");
|
|
16
16
|
/** @jsx jsx */
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
17
18
|
|
|
18
19
|
var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog() {
|
|
19
20
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
@@ -23,17 +24,20 @@ var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog()
|
|
|
23
24
|
flagContainerRef.current.children[0].focus();
|
|
24
25
|
}
|
|
25
26
|
}, []);
|
|
26
|
-
return (
|
|
27
|
-
css
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
return (
|
|
28
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
29
|
+
(0, _react.jsx)("div", {
|
|
30
|
+
css: _styles.avatarPickerErrorStyles,
|
|
31
|
+
ref: flagContainerRef
|
|
32
|
+
}, (0, _react.jsx)(_flag.default, {
|
|
33
|
+
appearance: "error",
|
|
34
|
+
icon: (0, _react.jsx)(_error.default, {
|
|
35
|
+
label: "Error",
|
|
36
|
+
secondaryColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")")
|
|
37
|
+
}),
|
|
38
|
+
id: "avatar-picker-error",
|
|
39
|
+
key: "error",
|
|
40
|
+
title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
|
|
41
|
+
}))
|
|
42
|
+
);
|
|
39
43
|
};
|
|
@@ -38,7 +38,7 @@ var _SubmitErrorDialog = require("./SubmitErrorDialog");
|
|
|
38
38
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
39
39
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
40
40
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
41
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
|
|
41
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
42
42
|
var MAX_SIZE_MB = exports.MAX_SIZE_MB = 10;
|
|
43
43
|
var ERROR = exports.ERROR = {
|
|
44
44
|
URL: _mediaUi.messages.image_url_invalid_error,
|
|
@@ -54,11 +54,14 @@ var fixedCrop = exports.fixedCrop = {
|
|
|
54
54
|
var HeaderContent = function HeaderContent(_ref) {
|
|
55
55
|
var title = _ref.title;
|
|
56
56
|
var modal = (0, _modalDialog.useModal)();
|
|
57
|
-
return (
|
|
58
|
-
css
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
return (
|
|
58
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
59
|
+
(0, _react2.jsx)("h1", {
|
|
60
|
+
css: _styles.modalHeaderStyles,
|
|
61
|
+
"data-test-id": "modal-header",
|
|
62
|
+
id: modal.titleId
|
|
63
|
+
}, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar))
|
|
64
|
+
);
|
|
62
65
|
};
|
|
63
66
|
var altTextFieldStyles = (0, _primitives.xcss)({
|
|
64
67
|
paddingTop: 'space.100',
|
|
@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.modalHeaderStyles = exports.formStyles = exports.avatarPickerViewWrapperStyles = exports.avatarPickerErrorStyles = void 0;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
|
+
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
8
11
|
var avatarPickerErrorStyles = exports.avatarPickerErrorStyles = (0, _react.css)({
|
|
9
12
|
margin: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
|
|
10
13
|
});
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
11
16
|
var formStyles = exports.formStyles = (0, _react.css)({
|
|
12
17
|
margin: 0
|
|
13
18
|
});
|
|
19
|
+
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
14
21
|
var avatarPickerViewWrapperStyles = exports.avatarPickerViewWrapperStyles = (0, _react.css)({
|
|
15
22
|
display: 'flex',
|
|
16
23
|
justifyContent: 'center',
|
|
@@ -18,8 +25,11 @@ var avatarPickerViewWrapperStyles = exports.avatarPickerViewWrapperStyles = (0,
|
|
|
18
25
|
textAlign: 'center',
|
|
19
26
|
minHeight: '339px'
|
|
20
27
|
});
|
|
28
|
+
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
21
30
|
var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)({
|
|
22
31
|
// Using `&` twice to increase specificity
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
23
33
|
'&&': {
|
|
24
34
|
margin: "var(--ds-space-200, 16px)",
|
|
25
35
|
fontWeight: 500,
|
|
@@ -27,7 +27,8 @@ var _layoutConst = require("../avatar-picker-dialog/layout-const");
|
|
|
27
27
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
28
28
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
29
29
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
30
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
|
|
30
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
31
32
|
var removeImageButtonStyles = (0, _react.css)({
|
|
32
33
|
borderRadius: "var(--ds-border-radius-050, 3px)",
|
|
33
34
|
backgroundColor: 'transparent',
|
|
@@ -36,6 +37,7 @@ var removeImageButtonStyles = (0, _react.css)({
|
|
|
36
37
|
border: 'none',
|
|
37
38
|
cursor: 'pointer',
|
|
38
39
|
padding: 0,
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
39
41
|
svg: {
|
|
40
42
|
position: 'absolute',
|
|
41
43
|
top: "var(--ds-space-050, 4px)",
|
|
@@ -61,9 +63,13 @@ var maskShadow = {
|
|
|
61
63
|
};
|
|
62
64
|
var maskStyles = (0, _primitives.xcss)({
|
|
63
65
|
position: 'absolute',
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
64
67
|
top: "".concat(_styles.CONTAINER_PADDING, "px"),
|
|
68
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
65
69
|
bottom: "".concat(_styles.CONTAINER_PADDING, "px"),
|
|
70
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
66
71
|
left: "".concat(_styles.CONTAINER_PADDING, "px"),
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
67
73
|
right: "".concat(_styles.CONTAINER_PADDING, "px"),
|
|
68
74
|
opacity: 'opacity.disabled'
|
|
69
75
|
});
|
|
@@ -134,16 +140,23 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
|
|
|
134
140
|
onImageLoaded = _this$props3.onImageLoaded,
|
|
135
141
|
formatMessage = _this$props3.intl.formatMessage;
|
|
136
142
|
var containerDimensions = (0, _primitives.xcss)({
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
137
144
|
width: "".concat(containerSize, "px"),
|
|
145
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
138
146
|
height: "".concat(containerSize, "px")
|
|
139
147
|
});
|
|
140
148
|
var width = imageWidth ? "".concat(imageWidth, "px") : 'auto';
|
|
141
149
|
var height = imageHeight ? "".concat(imageHeight, "px") : 'auto';
|
|
142
150
|
var imageContainerDynamicStyles = (0, _primitives.xcss)({
|
|
151
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
143
152
|
width: width,
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
144
154
|
height: height,
|
|
155
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
145
156
|
display: width === 'auto' ? 'none' : 'block',
|
|
157
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
146
158
|
top: "".concat(top, "px"),
|
|
159
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
147
160
|
left: "".concat(left, "px")
|
|
148
161
|
});
|
|
149
162
|
var crossOrigin;
|
|
@@ -11,12 +11,14 @@ var _react = require("@emotion/react");
|
|
|
11
11
|
var _styles = require("./styles");
|
|
12
12
|
var _excluded = ["showBorder", "isDroppingFile", "children"];
|
|
13
13
|
/**@jsx jsx */
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
15
|
var DragZone = exports.DragZone = function DragZone(_ref) {
|
|
15
16
|
var showBorder = _ref.showBorder,
|
|
16
17
|
isDroppingFile = _ref.isDroppingFile,
|
|
17
18
|
children = _ref.children,
|
|
18
19
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
19
20
|
return (0, _react.jsx)("div", (0, _extends2.default)({
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
20
22
|
css: (0, _styles.dragZoneStyles)({
|
|
21
23
|
showBorder: showBorder,
|
|
22
24
|
isDroppingFile: isDroppingFile
|
|
@@ -35,7 +35,7 @@ var _dragZone = require("./dragZone");
|
|
|
35
35
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
36
36
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
37
37
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
38
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
|
|
38
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
39
39
|
var viewport = exports.viewport = new _viewport2.Viewport(_layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_PADDING);
|
|
40
40
|
var defaultState = {
|
|
41
41
|
imagePos: new _mediaUi.Vector2(_layoutConst.CONTAINER_PADDING, _layoutConst.CONTAINER_PADDING),
|
|
@@ -319,23 +319,27 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
|
|
|
319
319
|
var _this$props3 = this.props,
|
|
320
320
|
errorMessage = _this$props3.errorMessage,
|
|
321
321
|
isLoading = _this$props3.isLoading;
|
|
322
|
-
return (
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
322
|
+
return (
|
|
323
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
324
|
+
(0, _react2.jsx)("div", {
|
|
325
|
+
id: "image-uploader",
|
|
326
|
+
css: _styles.imageUploaderStyles
|
|
327
|
+
}, this.renderDragZone(), isLoading ? null : (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", {
|
|
328
|
+
id: "padded-break",
|
|
329
|
+
css: _styles.paddedBreakStyles
|
|
330
|
+
}, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), (0, _react2.jsx)(_standardButton.default, {
|
|
331
|
+
onClick: this.onUploadButtonClick,
|
|
332
|
+
isDisabled: isLoading,
|
|
333
|
+
testId: "upload-button"
|
|
334
|
+
}, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), (0, _react2.jsx)("input", {
|
|
335
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
336
|
+
css: _styles.fileInputStyles,
|
|
337
|
+
type: "file",
|
|
338
|
+
id: "image-input",
|
|
339
|
+
onChange: this.onFileChange,
|
|
340
|
+
accept: _avatarPickerDialog.ACCEPT.join(',')
|
|
341
|
+
}))))
|
|
342
|
+
);
|
|
339
343
|
}
|
|
340
344
|
}, {
|
|
341
345
|
key: "renderImageCropper",
|
|
@@ -391,6 +395,8 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
|
|
|
391
395
|
var isLoading = this.props.isLoading;
|
|
392
396
|
var dataURI = this.dataURI;
|
|
393
397
|
var content = dataURI && !isLoading ? this.renderImageCropper(dataURI) : this.renderImageUploader();
|
|
398
|
+
|
|
399
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
394
400
|
return (0, _react2.jsx)("div", {
|
|
395
401
|
css: _styles.containerStyles
|
|
396
402
|
}, content);
|
|
@@ -19,7 +19,7 @@ var _scaleSmall = _interopRequireDefault(require("@atlaskit/icon/glyph/media-ser
|
|
|
19
19
|
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
|
|
20
20
|
var _styles = require("./styles");
|
|
21
21
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
22
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
|
|
22
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
23
23
|
var defaultProps = exports.defaultProps = {
|
|
24
24
|
value: 0
|
|
25
25
|
};
|
|
@@ -36,32 +36,35 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
|
|
|
36
36
|
var _this$props = this.props,
|
|
37
37
|
value = _this$props.value,
|
|
38
38
|
onChange = _this$props.onChange;
|
|
39
|
-
return (
|
|
40
|
-
css
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
39
|
+
return (
|
|
40
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
41
|
+
(0, _react.jsx)("div", {
|
|
42
|
+
css: _styles.sliderWrapperStyles
|
|
43
|
+
}, (0, _react.jsx)(_standardButton.default
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
45
|
+
, {
|
|
46
|
+
className: "zoom_button zoom_button_small",
|
|
47
|
+
iconAfter: (0, _react.jsx)(_scaleSmall.default, {
|
|
48
|
+
label: "scale-small-icon"
|
|
49
|
+
}),
|
|
50
|
+
onClick: function onClick() {
|
|
51
|
+
return onChange(0);
|
|
52
|
+
}
|
|
53
|
+
}), (0, _react.jsx)(_range.default, {
|
|
54
|
+
value: value,
|
|
55
|
+
onChange: onChange
|
|
56
|
+
}), (0, _react.jsx)(_standardButton.default
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
58
|
+
, {
|
|
59
|
+
className: "zoom_button zoom_button_large",
|
|
60
|
+
iconAfter: (0, _react.jsx)(_scaleLarge.default, {
|
|
61
|
+
label: "scale-large-icon"
|
|
62
|
+
}),
|
|
63
|
+
onClick: function onClick() {
|
|
64
|
+
return onChange(100);
|
|
65
|
+
}
|
|
66
|
+
}))
|
|
67
|
+
);
|
|
65
68
|
}
|
|
66
69
|
}]);
|
|
67
70
|
return Slider;
|
|
@@ -8,37 +8,51 @@ var _react = require("@emotion/react");
|
|
|
8
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
9
|
var _images = require("./images");
|
|
10
10
|
var _layoutConst = require("../avatar-picker-dialog/layout-const");
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
|
+
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
11
14
|
var imageBgStyles = exports.imageBgStyles = (0, _react.css)({
|
|
12
15
|
position: 'absolute',
|
|
13
16
|
top: 0,
|
|
14
17
|
left: 0,
|
|
15
18
|
width: '256px',
|
|
16
19
|
height: '256px',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
17
21
|
background: "url('".concat(_images.checkeredBg, "')"),
|
|
18
22
|
borderRadius: "var(--ds-border-radius, 3px)"
|
|
19
23
|
});
|
|
24
|
+
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
20
26
|
var containerStyles = exports.containerStyles = (0, _react.css)({
|
|
21
27
|
boxSizing: 'border-box',
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
22
29
|
'*, *::before, *::after': {
|
|
23
30
|
boxSizing: 'border-box'
|
|
24
31
|
},
|
|
25
32
|
position: 'relative'
|
|
26
33
|
});
|
|
34
|
+
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
27
36
|
var sliderContainerStyles = exports.sliderContainerStyles = (0, _react.css)({
|
|
28
37
|
alignItems: 'center',
|
|
29
38
|
justifyContent: 'center',
|
|
30
39
|
display: 'flex',
|
|
31
40
|
flexDirection: 'row',
|
|
32
41
|
marginTop: "var(--ds-space-100, 8px)",
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
33
43
|
input: {
|
|
34
44
|
boxSizing: 'content-box',
|
|
35
45
|
padding: 0
|
|
36
46
|
},
|
|
37
47
|
backgroundColor: "var(--ds-surface-overlay, #fff)"
|
|
38
48
|
});
|
|
49
|
+
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
39
51
|
var fileInputStyles = exports.fileInputStyles = (0, _react.css)({
|
|
40
52
|
display: 'none'
|
|
41
53
|
});
|
|
54
|
+
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
42
56
|
var imageUploaderStyles = exports.imageUploaderStyles = (0, _react.css)({
|
|
43
57
|
display: 'flex',
|
|
44
58
|
flexDirection: 'column',
|
|
@@ -64,6 +78,7 @@ var getBorder = function getBorder(showBorder) {
|
|
|
64
78
|
var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
|
|
65
79
|
return isDroppingFile ? (0, _react.css)({
|
|
66
80
|
backgroundColor: "var(--ds-background-information-hovered, #ddecfe)",
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
67
82
|
'&:after': droppingAnimation
|
|
68
83
|
}) : '';
|
|
69
84
|
};
|
|
@@ -81,6 +96,7 @@ var dragZoneStyles = exports.dragZoneStyles = function dragZoneStyles(props) {
|
|
|
81
96
|
transition: 'background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
|
|
82
97
|
'&::after': {
|
|
83
98
|
content: "''",
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
84
100
|
border: getBorder(props.showBorder),
|
|
85
101
|
borderRadius: '100%',
|
|
86
102
|
position: 'absolute',
|
|
@@ -90,9 +106,13 @@ var dragZoneStyles = exports.dragZoneStyles = function dragZoneStyles(props) {
|
|
|
90
106
|
height: '100%',
|
|
91
107
|
transition: 'border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1)'
|
|
92
108
|
}
|
|
93
|
-
},
|
|
109
|
+
},
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
111
|
+
getDroppingAnimation(props.isDroppingFile));
|
|
94
112
|
};
|
|
95
113
|
dragZoneStyles.displayName = 'DragZone';
|
|
114
|
+
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
96
116
|
var dragZoneImageStyles = exports.dragZoneImageStyles = (0, _react.css)({
|
|
97
117
|
width: '100px'
|
|
98
118
|
});
|
|
@@ -103,8 +123,12 @@ var dragZoneTextStyles = exports.dragZoneTextStyles = function dragZoneTextStyle
|
|
|
103
123
|
return (0, _react.css)({
|
|
104
124
|
textAlign: 'center',
|
|
105
125
|
color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
|
|
106
|
-
},
|
|
126
|
+
},
|
|
127
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
128
|
+
getWidth(props.isFullSize));
|
|
107
129
|
};
|
|
130
|
+
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
108
132
|
var selectionBlockerStyles = exports.selectionBlockerStyles = (0, _react.css)({
|
|
109
133
|
position: 'fixed',
|
|
110
134
|
left: 0,
|
|
@@ -114,15 +138,21 @@ var selectionBlockerStyles = exports.selectionBlockerStyles = (0, _react.css)({
|
|
|
114
138
|
backgroundColor: 'transparent',
|
|
115
139
|
userSelect: 'none'
|
|
116
140
|
});
|
|
141
|
+
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
117
143
|
var paddedBreakStyles = exports.paddedBreakStyles = (0, _react.css)({
|
|
144
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
118
145
|
marginTop: "var(--ds-space-100, 10px)".concat(" !important"),
|
|
119
146
|
marginBottom: "var(--ds-space-100, 10px)",
|
|
120
147
|
textAlign: 'center'
|
|
121
148
|
});
|
|
149
|
+
|
|
150
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
|
|
122
151
|
var sliderWrapperStyles = exports.sliderWrapperStyles = (0, _react.css)({
|
|
123
152
|
display: 'flex',
|
|
124
153
|
alignItems: 'center',
|
|
125
154
|
width: '100%',
|
|
155
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
126
156
|
'.zoom_button svg': {
|
|
127
157
|
position: 'relative',
|
|
128
158
|
left: "var(--ds-space-negative-025, -2px)"
|
|
@@ -12,7 +12,9 @@ var _primitives = require("@atlaskit/primitives");
|
|
|
12
12
|
var _styles = require("./styles");
|
|
13
13
|
var _excluded = ["width", "height", "margin", "children"];
|
|
14
14
|
/**@jsx jsx */
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
16
|
var containerWrapperStyles = (0, _primitives.xcss)({
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
18
|
background: "url('".concat(_styles.checkeredBg, "')"),
|
|
17
19
|
position: "relative",
|
|
18
20
|
cursor: "move",
|
|
@@ -26,7 +28,9 @@ var ContainerWrapper = exports.ContainerWrapper = function ContainerWrapper(_ref
|
|
|
26
28
|
children = _ref.children,
|
|
27
29
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
28
30
|
var containerWrapperDimensions = (0, _primitives.xcss)({
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
29
32
|
width: "".concat(width !== undefined ? width + margin * 2 : 0, "px"),
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
30
34
|
height: "".concat(height !== undefined ? height + margin * 2 : 0, "px")
|
|
31
35
|
});
|
|
32
36
|
return (0, _react.jsx)(_primitives.Box, (0, _extends2.default)({
|
|
@@ -7,10 +7,14 @@ exports.ImagePlacerErrorWrapper = void 0;
|
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _styles = require("./styles");
|
|
9
9
|
/**@jsx jsx */
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
11
|
|
|
11
12
|
var ImagePlacerErrorWrapper = exports.ImagePlacerErrorWrapper = function ImagePlacerErrorWrapper(_ref) {
|
|
12
13
|
var children = _ref.children;
|
|
13
|
-
return (
|
|
14
|
-
css
|
|
15
|
-
|
|
14
|
+
return (
|
|
15
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
16
|
+
(0, _react.jsx)("div", {
|
|
17
|
+
css: _styles.imagePlacerErrorWrapperStyles
|
|
18
|
+
}, children)
|
|
19
|
+
);
|
|
16
20
|
};
|
|
@@ -11,18 +11,22 @@ var _react = require("@emotion/react");
|
|
|
11
11
|
var _styles = require("./styles");
|
|
12
12
|
var _excluded = ["x", "y", "width", "height"];
|
|
13
13
|
/**@jsx jsx */
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
15
|
var ImageWrapper = exports.ImageWrapper = function ImageWrapper(_ref) {
|
|
15
16
|
var x = _ref.x,
|
|
16
17
|
y = _ref.y,
|
|
17
18
|
width = _ref.width,
|
|
18
19
|
height = _ref.height,
|
|
19
20
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
20
|
-
return (
|
|
21
|
-
css
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
return (
|
|
22
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
23
|
+
(0, _react.jsx)("img", (0, _extends2.default)({
|
|
24
|
+
css: (0, _styles.imageWrapperStyles)({
|
|
25
|
+
x: x,
|
|
26
|
+
y: y,
|
|
27
|
+
width: width,
|
|
28
|
+
height: height
|
|
29
|
+
})
|
|
30
|
+
}, props))
|
|
31
|
+
);
|
|
28
32
|
};
|