@elliemae/ds-imagelibrarymodal 3.48.2-rc.0 → 3.49.0-beta.1
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.
|
@@ -44,64 +44,6 @@ const elementClassName = "imglibmodal-element";
|
|
|
44
44
|
class ImageLibraryModalImpl extends import_react.default.PureComponent {
|
|
45
45
|
constructor(props) {
|
|
46
46
|
super(props);
|
|
47
|
-
this.onReject = () => {
|
|
48
|
-
const { onReject, onClose } = this.props;
|
|
49
|
-
if (onReject) {
|
|
50
|
-
onReject();
|
|
51
|
-
} else {
|
|
52
|
-
onClose();
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
this.handleElementClick = (e, image) => {
|
|
56
|
-
if (e.key && e.key !== " ") {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
const { selected } = this.state;
|
|
60
|
-
const { disableDoubleClick, onConfirm, onSelect } = this.props;
|
|
61
|
-
if (image === selected && onConfirm && !disableDoubleClick) {
|
|
62
|
-
onConfirm();
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
this.setState({
|
|
66
|
-
selected: image,
|
|
67
|
-
user: this.getUser(image)
|
|
68
|
-
});
|
|
69
|
-
if (onSelect) {
|
|
70
|
-
onSelect(image);
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
this.renderElements = () => {
|
|
74
|
-
const { imagesData } = this.props;
|
|
75
|
-
if (!imagesData) {
|
|
76
|
-
return "Empty";
|
|
77
|
-
}
|
|
78
|
-
const { selected } = this.state;
|
|
79
|
-
return imagesData.map((image, idx) => {
|
|
80
|
-
const extras = {};
|
|
81
|
-
const { name, id } = image;
|
|
82
|
-
if (this.focusFirst && idx === 0) {
|
|
83
|
-
extras.ref = (element) => element && element.focus();
|
|
84
|
-
this.focusFirst = void 0;
|
|
85
|
-
} else if (selected && name === selected.name) {
|
|
86
|
-
extras.ref = (element) => element && element.focus();
|
|
87
|
-
}
|
|
88
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
-
"div",
|
|
90
|
-
{
|
|
91
|
-
className: elementClassName,
|
|
92
|
-
onClick: (e) => this.handleElementClick(e, image),
|
|
93
|
-
onKeyUp: (e) => this.handleElementClick(e, image),
|
|
94
|
-
role: "button",
|
|
95
|
-
tabIndex: 0,
|
|
96
|
-
...extras,
|
|
97
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children: name })
|
|
98
|
-
},
|
|
99
|
-
id || `${name}_${idx}`
|
|
100
|
-
);
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
this.renderSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_spinner.DSSpinner, { message: "Loading...", size: "m" });
|
|
104
|
-
this.renderError = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ImageMissing, { color: import_ds_icon.DSIconColors.NEUTRAL, size: import_ds_icon.DSIconSizes.M });
|
|
105
47
|
this.state = {
|
|
106
48
|
selected: void 0,
|
|
107
49
|
user: void 0
|
|
@@ -121,6 +63,14 @@ class ImageLibraryModalImpl extends import_react.default.PureComponent {
|
|
|
121
63
|
this.setState({ selected: imagesData[0] });
|
|
122
64
|
}
|
|
123
65
|
}
|
|
66
|
+
onReject = () => {
|
|
67
|
+
const { onReject, onClose } = this.props;
|
|
68
|
+
if (onReject) {
|
|
69
|
+
onReject();
|
|
70
|
+
} else {
|
|
71
|
+
onClose();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
124
74
|
getUser(selected) {
|
|
125
75
|
if (!selected) {
|
|
126
76
|
return "";
|
|
@@ -131,6 +81,24 @@ class ImageLibraryModalImpl extends import_react.default.PureComponent {
|
|
|
131
81
|
}
|
|
132
82
|
return selected.createdBy.substring(index + 5);
|
|
133
83
|
}
|
|
84
|
+
handleElementClick = (e, image) => {
|
|
85
|
+
if (e.key && e.key !== " ") {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
const { selected } = this.state;
|
|
89
|
+
const { disableDoubleClick, onConfirm, onSelect } = this.props;
|
|
90
|
+
if (image === selected && onConfirm && !disableDoubleClick) {
|
|
91
|
+
onConfirm();
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
this.setState({
|
|
95
|
+
selected: image,
|
|
96
|
+
user: this.getUser(image)
|
|
97
|
+
});
|
|
98
|
+
if (onSelect) {
|
|
99
|
+
onSelect(image);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
134
102
|
preventSpacebarScroll() {
|
|
135
103
|
document.onkeypress = function(e) {
|
|
136
104
|
if (!(0, import_lodash.includes)(e.target.className, elementClassName)) {
|
|
@@ -154,6 +122,38 @@ class ImageLibraryModalImpl extends import_react.default.PureComponent {
|
|
|
154
122
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "value", children: value })
|
|
155
123
|
] });
|
|
156
124
|
}
|
|
125
|
+
renderElements = () => {
|
|
126
|
+
const { imagesData } = this.props;
|
|
127
|
+
if (!imagesData) {
|
|
128
|
+
return "Empty";
|
|
129
|
+
}
|
|
130
|
+
const { selected } = this.state;
|
|
131
|
+
return imagesData.map((image, idx) => {
|
|
132
|
+
const extras = {};
|
|
133
|
+
const { name, id } = image;
|
|
134
|
+
if (this.focusFirst && idx === 0) {
|
|
135
|
+
extras.ref = (element) => element && element.focus();
|
|
136
|
+
this.focusFirst = void 0;
|
|
137
|
+
} else if (selected && name === selected.name) {
|
|
138
|
+
extras.ref = (element) => element && element.focus();
|
|
139
|
+
}
|
|
140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
|
+
"div",
|
|
142
|
+
{
|
|
143
|
+
className: elementClassName,
|
|
144
|
+
onClick: (e) => this.handleElementClick(e, image),
|
|
145
|
+
onKeyUp: (e) => this.handleElementClick(e, image),
|
|
146
|
+
role: "button",
|
|
147
|
+
tabIndex: 0,
|
|
148
|
+
...extras,
|
|
149
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children: name })
|
|
150
|
+
},
|
|
151
|
+
id || `${name}_${idx}`
|
|
152
|
+
);
|
|
153
|
+
});
|
|
154
|
+
};
|
|
155
|
+
renderSpinner = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_spinner.DSSpinner, { message: "Loading...", size: "m" });
|
|
156
|
+
renderError = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ImageMissing, { color: import_ds_icon.DSIconColors.NEUTRAL, size: import_ds_icon.DSIconSizes.M });
|
|
157
157
|
render() {
|
|
158
158
|
const { selected, user } = this.state;
|
|
159
159
|
const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/ImageLibraryModalImpl.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSModal } from '@elliemae/ds-modal';\nimport { DSSpinner } from '@elliemae/ds-spinner';\nimport { DSIconSizes as ICONS_SIZES, DSIconColors as ICONS_COLORS } from '@elliemae/ds-icon';\nimport { includes } from 'lodash';\nimport ImageLoader from 'react-loading-image';\nimport { ImageMissing } from '@elliemae/ds-icons';\n\nconst elementClassName = 'imglibmodal-element';\n\nexport default class ImageLibraryModalImpl extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n selected: undefined,\n user: undefined,\n };\n this.preventSpacebarScroll();\n }\n\n componentDidMount() {\n const { imagesData } = this.props;\n if (imagesData) {\n this.handleElementClick({}, imagesData[0]);\n this.focusFirst = true;\n }\n }\n\n getDerivedStateFromProps(nextProps) {\n const { imagesData } = this.props;\n if (!imagesData && nextProps.imagesData) {\n this.setState({ selected: imagesData[0] });\n }\n }\n\n onReject = () => {\n const { onReject, onClose } = this.props;\n if (onReject) {\n onReject();\n } else {\n onClose();\n }\n };\n\n getUser(selected) {\n if (!selected) {\n return '';\n }\n const index = selected.createdBy.lastIndexOf('user:');\n if (index === -1) {\n return selected.createdBy;\n }\n return selected.createdBy.substring(index + 5);\n }\n\n handleElementClick = (e, image) => {\n if (e.key && e.key !== ' ') {\n return;\n }\n const { selected } = this.state;\n const { disableDoubleClick, onConfirm, onSelect } = this.props;\n if (image === selected && onConfirm && !disableDoubleClick) {\n onConfirm();\n return;\n }\n this.setState({\n selected: image,\n user: this.getUser(image),\n });\n if (onSelect) {\n onSelect(image);\n }\n };\n\n preventSpacebarScroll() {\n document.onkeypress = function (e) {\n if (!includes(e.target.className, elementClassName)) {\n return true;\n }\n e = e || window.event;\n const charCode = e.keyCode || e.which;\n if (charCode === 32) {\n e.preventDefault();\n return false;\n }\n return true;\n };\n }\n\n drawDiv(className, content) {\n return <div className={className}>{content}</div>;\n }\n\n drawLabel(className, label, value) {\n return (\n <div className={className}>\n <span className=\"label\">{label}</span>\n <span className=\"value\">{value}</span>\n </div>\n );\n }\n\n renderElements = () => {\n const { imagesData } = this.props;\n if (!imagesData) {\n return 'Empty';\n }\n const { selected } = this.state;\n return imagesData.map((image, idx) => {\n const extras = {};\n const { name, id } = image;\n if (this.focusFirst && idx === 0) {\n extras.ref = (element) => element && element.focus();\n this.focusFirst = undefined;\n } else if (selected && name === selected.name) {\n extras.ref = (element) => element && element.focus();\n }\n return (\n <div\n key={id || `${name}_${idx}`}\n className={elementClassName}\n onClick={(e) => this.handleElementClick(e, image)}\n onKeyUp={(e) => this.handleElementClick(e, image)}\n role=\"button\"\n tabIndex={0}\n {...extras}\n >\n <div className=\"content\">{name}</div>\n </div>\n );\n });\n };\n\n renderSpinner = () => <DSSpinner message=\"Loading...\" size=\"m\" />;\n\n renderError = () => <ImageMissing color={ICONS_COLORS.NEUTRAL} size={ICONS_SIZES.M} />;\n\n render() {\n const { selected, user } = this.state;\n const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;\n return (\n <DSModal\n containerProps={containerProps}\n {...modalProps}\n className=\"em-ds-modal-image-library\"\n onReject={this.onReject}\n >\n <div className=\"wrapper\">\n <div className=\"col-1\">\n {this.drawDiv('title', 'Company Images')}\n {this.renderElements()}\n </div>\n <div className=\"col-2\">\n {this.drawDiv('title', selected ? selected.name : '')}\n <ImageLoader\n className=\"image-loader\"\n error={this.renderError}\n loading={this.renderSpinner}\n src={selected ? selected.url : ''}\n />\n {selected && (\n <div className=\"info\">\n {this.drawLabel('info-element', 'Created Date:', selected.createdDate)}\n {this.drawLabel('info-element', 'Created By:', user)}\n </div>\n )}\n </div>\n </div>\n </DSModal>\n );\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2FZ;AA1FX,mBAAkB;AAClB,sBAAwB;AACxB,wBAA0B;AAC1B,qBAAyE;AACzE,oBAAyB;AACzB,iCAAwB;AACxB,sBAA6B;AAE7B,MAAM,mBAAmB;AAEzB,MAAO,8BAA4C,aAAAA,QAAM,cAAc;AAAA,EACrE,YAAY,OAAO;AACjB,UAAM,KAAK;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "ICONS_COLORS", "ICONS_SIZES", "ImageLoader"]
|
|
7
7
|
}
|
|
@@ -11,64 +11,6 @@ const elementClassName = "imglibmodal-element";
|
|
|
11
11
|
class ImageLibraryModalImpl extends React2.PureComponent {
|
|
12
12
|
constructor(props) {
|
|
13
13
|
super(props);
|
|
14
|
-
this.onReject = () => {
|
|
15
|
-
const { onReject, onClose } = this.props;
|
|
16
|
-
if (onReject) {
|
|
17
|
-
onReject();
|
|
18
|
-
} else {
|
|
19
|
-
onClose();
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
this.handleElementClick = (e, image) => {
|
|
23
|
-
if (e.key && e.key !== " ") {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
const { selected } = this.state;
|
|
27
|
-
const { disableDoubleClick, onConfirm, onSelect } = this.props;
|
|
28
|
-
if (image === selected && onConfirm && !disableDoubleClick) {
|
|
29
|
-
onConfirm();
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
this.setState({
|
|
33
|
-
selected: image,
|
|
34
|
-
user: this.getUser(image)
|
|
35
|
-
});
|
|
36
|
-
if (onSelect) {
|
|
37
|
-
onSelect(image);
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
this.renderElements = () => {
|
|
41
|
-
const { imagesData } = this.props;
|
|
42
|
-
if (!imagesData) {
|
|
43
|
-
return "Empty";
|
|
44
|
-
}
|
|
45
|
-
const { selected } = this.state;
|
|
46
|
-
return imagesData.map((image, idx) => {
|
|
47
|
-
const extras = {};
|
|
48
|
-
const { name, id } = image;
|
|
49
|
-
if (this.focusFirst && idx === 0) {
|
|
50
|
-
extras.ref = (element) => element && element.focus();
|
|
51
|
-
this.focusFirst = void 0;
|
|
52
|
-
} else if (selected && name === selected.name) {
|
|
53
|
-
extras.ref = (element) => element && element.focus();
|
|
54
|
-
}
|
|
55
|
-
return /* @__PURE__ */ jsx(
|
|
56
|
-
"div",
|
|
57
|
-
{
|
|
58
|
-
className: elementClassName,
|
|
59
|
-
onClick: (e) => this.handleElementClick(e, image),
|
|
60
|
-
onKeyUp: (e) => this.handleElementClick(e, image),
|
|
61
|
-
role: "button",
|
|
62
|
-
tabIndex: 0,
|
|
63
|
-
...extras,
|
|
64
|
-
children: /* @__PURE__ */ jsx("div", { className: "content", children: name })
|
|
65
|
-
},
|
|
66
|
-
id || `${name}_${idx}`
|
|
67
|
-
);
|
|
68
|
-
});
|
|
69
|
-
};
|
|
70
|
-
this.renderSpinner = () => /* @__PURE__ */ jsx(DSSpinner, { message: "Loading...", size: "m" });
|
|
71
|
-
this.renderError = () => /* @__PURE__ */ jsx(ImageMissing, { color: ICONS_COLORS.NEUTRAL, size: ICONS_SIZES.M });
|
|
72
14
|
this.state = {
|
|
73
15
|
selected: void 0,
|
|
74
16
|
user: void 0
|
|
@@ -88,6 +30,14 @@ class ImageLibraryModalImpl extends React2.PureComponent {
|
|
|
88
30
|
this.setState({ selected: imagesData[0] });
|
|
89
31
|
}
|
|
90
32
|
}
|
|
33
|
+
onReject = () => {
|
|
34
|
+
const { onReject, onClose } = this.props;
|
|
35
|
+
if (onReject) {
|
|
36
|
+
onReject();
|
|
37
|
+
} else {
|
|
38
|
+
onClose();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
91
41
|
getUser(selected) {
|
|
92
42
|
if (!selected) {
|
|
93
43
|
return "";
|
|
@@ -98,6 +48,24 @@ class ImageLibraryModalImpl extends React2.PureComponent {
|
|
|
98
48
|
}
|
|
99
49
|
return selected.createdBy.substring(index + 5);
|
|
100
50
|
}
|
|
51
|
+
handleElementClick = (e, image) => {
|
|
52
|
+
if (e.key && e.key !== " ") {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const { selected } = this.state;
|
|
56
|
+
const { disableDoubleClick, onConfirm, onSelect } = this.props;
|
|
57
|
+
if (image === selected && onConfirm && !disableDoubleClick) {
|
|
58
|
+
onConfirm();
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
this.setState({
|
|
62
|
+
selected: image,
|
|
63
|
+
user: this.getUser(image)
|
|
64
|
+
});
|
|
65
|
+
if (onSelect) {
|
|
66
|
+
onSelect(image);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
101
69
|
preventSpacebarScroll() {
|
|
102
70
|
document.onkeypress = function(e) {
|
|
103
71
|
if (!includes(e.target.className, elementClassName)) {
|
|
@@ -121,6 +89,38 @@ class ImageLibraryModalImpl extends React2.PureComponent {
|
|
|
121
89
|
/* @__PURE__ */ jsx("span", { className: "value", children: value })
|
|
122
90
|
] });
|
|
123
91
|
}
|
|
92
|
+
renderElements = () => {
|
|
93
|
+
const { imagesData } = this.props;
|
|
94
|
+
if (!imagesData) {
|
|
95
|
+
return "Empty";
|
|
96
|
+
}
|
|
97
|
+
const { selected } = this.state;
|
|
98
|
+
return imagesData.map((image, idx) => {
|
|
99
|
+
const extras = {};
|
|
100
|
+
const { name, id } = image;
|
|
101
|
+
if (this.focusFirst && idx === 0) {
|
|
102
|
+
extras.ref = (element) => element && element.focus();
|
|
103
|
+
this.focusFirst = void 0;
|
|
104
|
+
} else if (selected && name === selected.name) {
|
|
105
|
+
extras.ref = (element) => element && element.focus();
|
|
106
|
+
}
|
|
107
|
+
return /* @__PURE__ */ jsx(
|
|
108
|
+
"div",
|
|
109
|
+
{
|
|
110
|
+
className: elementClassName,
|
|
111
|
+
onClick: (e) => this.handleElementClick(e, image),
|
|
112
|
+
onKeyUp: (e) => this.handleElementClick(e, image),
|
|
113
|
+
role: "button",
|
|
114
|
+
tabIndex: 0,
|
|
115
|
+
...extras,
|
|
116
|
+
children: /* @__PURE__ */ jsx("div", { className: "content", children: name })
|
|
117
|
+
},
|
|
118
|
+
id || `${name}_${idx}`
|
|
119
|
+
);
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
renderSpinner = () => /* @__PURE__ */ jsx(DSSpinner, { message: "Loading...", size: "m" });
|
|
123
|
+
renderError = () => /* @__PURE__ */ jsx(ImageMissing, { color: ICONS_COLORS.NEUTRAL, size: ICONS_SIZES.M });
|
|
124
124
|
render() {
|
|
125
125
|
const { selected, user } = this.state;
|
|
126
126
|
const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/ImageLibraryModalImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSModal } from '@elliemae/ds-modal';\nimport { DSSpinner } from '@elliemae/ds-spinner';\nimport { DSIconSizes as ICONS_SIZES, DSIconColors as ICONS_COLORS } from '@elliemae/ds-icon';\nimport { includes } from 'lodash';\nimport ImageLoader from 'react-loading-image';\nimport { ImageMissing } from '@elliemae/ds-icons';\n\nconst elementClassName = 'imglibmodal-element';\n\nexport default class ImageLibraryModalImpl extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n selected: undefined,\n user: undefined,\n };\n this.preventSpacebarScroll();\n }\n\n componentDidMount() {\n const { imagesData } = this.props;\n if (imagesData) {\n this.handleElementClick({}, imagesData[0]);\n this.focusFirst = true;\n }\n }\n\n getDerivedStateFromProps(nextProps) {\n const { imagesData } = this.props;\n if (!imagesData && nextProps.imagesData) {\n this.setState({ selected: imagesData[0] });\n }\n }\n\n onReject = () => {\n const { onReject, onClose } = this.props;\n if (onReject) {\n onReject();\n } else {\n onClose();\n }\n };\n\n getUser(selected) {\n if (!selected) {\n return '';\n }\n const index = selected.createdBy.lastIndexOf('user:');\n if (index === -1) {\n return selected.createdBy;\n }\n return selected.createdBy.substring(index + 5);\n }\n\n handleElementClick = (e, image) => {\n if (e.key && e.key !== ' ') {\n return;\n }\n const { selected } = this.state;\n const { disableDoubleClick, onConfirm, onSelect } = this.props;\n if (image === selected && onConfirm && !disableDoubleClick) {\n onConfirm();\n return;\n }\n this.setState({\n selected: image,\n user: this.getUser(image),\n });\n if (onSelect) {\n onSelect(image);\n }\n };\n\n preventSpacebarScroll() {\n document.onkeypress = function (e) {\n if (!includes(e.target.className, elementClassName)) {\n return true;\n }\n e = e || window.event;\n const charCode = e.keyCode || e.which;\n if (charCode === 32) {\n e.preventDefault();\n return false;\n }\n return true;\n };\n }\n\n drawDiv(className, content) {\n return <div className={className}>{content}</div>;\n }\n\n drawLabel(className, label, value) {\n return (\n <div className={className}>\n <span className=\"label\">{label}</span>\n <span className=\"value\">{value}</span>\n </div>\n );\n }\n\n renderElements = () => {\n const { imagesData } = this.props;\n if (!imagesData) {\n return 'Empty';\n }\n const { selected } = this.state;\n return imagesData.map((image, idx) => {\n const extras = {};\n const { name, id } = image;\n if (this.focusFirst && idx === 0) {\n extras.ref = (element) => element && element.focus();\n this.focusFirst = undefined;\n } else if (selected && name === selected.name) {\n extras.ref = (element) => element && element.focus();\n }\n return (\n <div\n key={id || `${name}_${idx}`}\n className={elementClassName}\n onClick={(e) => this.handleElementClick(e, image)}\n onKeyUp={(e) => this.handleElementClick(e, image)}\n role=\"button\"\n tabIndex={0}\n {...extras}\n >\n <div className=\"content\">{name}</div>\n </div>\n );\n });\n };\n\n renderSpinner = () => <DSSpinner message=\"Loading...\" size=\"m\" />;\n\n renderError = () => <ImageMissing color={ICONS_COLORS.NEUTRAL} size={ICONS_SIZES.M} />;\n\n render() {\n const { selected, user } = this.state;\n const { containerProps, imagesData, onSelect, disableDoubleClick, ...modalProps } = this.props;\n return (\n <DSModal\n containerProps={containerProps}\n {...modalProps}\n className=\"em-ds-modal-image-library\"\n onReject={this.onReject}\n >\n <div className=\"wrapper\">\n <div className=\"col-1\">\n {this.drawDiv('title', 'Company Images')}\n {this.renderElements()}\n </div>\n <div className=\"col-2\">\n {this.drawDiv('title', selected ? selected.name : '')}\n <ImageLoader\n className=\"image-loader\"\n error={this.renderError}\n loading={this.renderSpinner}\n src={selected ? selected.url : ''}\n />\n {selected && (\n <div className=\"info\">\n {this.drawLabel('info-element', 'Created Date:', selected.createdDate)}\n {this.drawLabel('info-element', 'Created By:', user)}\n </div>\n )}\n </div>\n </div>\n </DSModal>\n );\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC2FZ,cAKL,YALK;AA1FX,OAAOA,YAAW;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,eAAe,aAAa,gBAAgB,oBAAoB;AACzE,SAAS,gBAAgB;AACzB,OAAO,iBAAiB;AACxB,SAAS,oBAAoB;AAE7B,MAAM,mBAAmB;AAEzB,MAAO,8BAA4CA,OAAM,cAAc;AAAA,EACrE,YAAY,OAAO;AACjB,UAAM,KAAK;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-imagelibrarymodal",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.49.0-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Image Library Modal",
|
|
6
6
|
"files": [
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"prop-types": "~15.8.1",
|
|
40
40
|
"react-loading-image": "~0.5.0",
|
|
41
|
-
"@elliemae/ds-icon": "3.
|
|
42
|
-
"@elliemae/ds-modal": "3.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
41
|
+
"@elliemae/ds-icon": "3.49.0-beta.1",
|
|
42
|
+
"@elliemae/ds-modal": "3.49.0-beta.1",
|
|
43
|
+
"@elliemae/ds-shared": "3.49.0-beta.1",
|
|
44
|
+
"@elliemae/ds-icons": "3.49.0-beta.1",
|
|
45
|
+
"@elliemae/ds-spinner": "3.49.0-beta.1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.49.0-beta.1"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"lodash": "^4.17.21",
|