@elliemae/ds-imagelibrarymodal 3.0.0-next.2 → 3.0.0-next.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.
@@ -0,0 +1,189 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+ import * as React from "react";
33
+ import React2 from "react";
34
+ import DSModal from "@elliemae/ds-modal";
35
+ import DSSpinner from "@elliemae/ds-spinner";
36
+ import { DSIconSizes as ICONS_SIZES, DSIconColors as ICONS_COLORS } from "@elliemae/ds-icon";
37
+ import { includes } from "lodash";
38
+ import ImageLoader from "react-loading-image";
39
+ import { ImageMissing } from "@elliemae/ds-icons";
40
+ const elementClassName = "imglibmodal-element";
41
+ class ImageLibraryModalImpl extends React2.PureComponent {
42
+ constructor(props) {
43
+ super(props);
44
+ this.onReject = () => {
45
+ const { onReject, onClose } = this.props;
46
+ if (onReject) {
47
+ onReject();
48
+ } else {
49
+ onClose();
50
+ }
51
+ };
52
+ this.handleElementClick = (e, image) => {
53
+ if (e.key && e.key !== " ") {
54
+ return;
55
+ }
56
+ const { selected } = this.state;
57
+ const { disableDoubleClick, onConfirm, onSelect } = this.props;
58
+ if (image === selected && onConfirm && !disableDoubleClick) {
59
+ onConfirm();
60
+ return;
61
+ }
62
+ this.setState({
63
+ selected: image,
64
+ user: this.getUser(image)
65
+ });
66
+ if (onSelect) {
67
+ onSelect(image);
68
+ }
69
+ };
70
+ this.renderElements = () => {
71
+ const { imagesData } = this.props;
72
+ if (!imagesData) {
73
+ return "Empty";
74
+ }
75
+ const { selected } = this.state;
76
+ return imagesData.map((image, idx) => {
77
+ const extras = {};
78
+ const { name, id } = image;
79
+ if (this.focusFirst && idx === 0) {
80
+ extras.ref = (element) => element && element.focus();
81
+ this.focusFirst = void 0;
82
+ } else if (selected && name === selected.name) {
83
+ extras.ref = (element) => element && element.focus();
84
+ }
85
+ return /* @__PURE__ */ React2.createElement("div", __spreadValues({
86
+ key: id || `${name}_${idx}`,
87
+ className: elementClassName,
88
+ onClick: (e) => this.handleElementClick(e, image),
89
+ onKeyUp: (e) => this.handleElementClick(e, image),
90
+ role: "button",
91
+ tabIndex: 0
92
+ }, extras), /* @__PURE__ */ React2.createElement("div", {
93
+ className: "content"
94
+ }, name));
95
+ });
96
+ };
97
+ this.renderSpinner = () => /* @__PURE__ */ React2.createElement(DSSpinner, {
98
+ message: "Loading...",
99
+ size: "m"
100
+ });
101
+ this.renderError = () => /* @__PURE__ */ React2.createElement(ImageMissing, {
102
+ color: ICONS_COLORS.NEUTRAL,
103
+ size: ICONS_SIZES.M
104
+ });
105
+ this.state = {
106
+ selected: void 0,
107
+ user: void 0
108
+ };
109
+ this.preventSpacebarScroll();
110
+ }
111
+ componentDidMount() {
112
+ const { imagesData } = this.props;
113
+ if (imagesData) {
114
+ this.handleElementClick({}, imagesData[0]);
115
+ this.focusFirst = true;
116
+ }
117
+ }
118
+ getDerivedStateFromProps(nextProps) {
119
+ const { imagesData } = this.props;
120
+ if (!imagesData && nextProps.imagesData) {
121
+ this.setState({ selected: imagesData[0] });
122
+ }
123
+ }
124
+ getUser(selected) {
125
+ if (!selected) {
126
+ return "";
127
+ }
128
+ const index = selected.createdBy.lastIndexOf("user:");
129
+ if (index === -1) {
130
+ return selected.createdBy;
131
+ }
132
+ return selected.createdBy.substring(index + 5);
133
+ }
134
+ preventSpacebarScroll() {
135
+ document.onkeypress = function(e) {
136
+ if (!includes(e.target.className, elementClassName)) {
137
+ return true;
138
+ }
139
+ e = e || window.event;
140
+ const charCode = e.keyCode || e.which;
141
+ if (charCode === 32) {
142
+ e.preventDefault();
143
+ return false;
144
+ }
145
+ return true;
146
+ };
147
+ }
148
+ drawDiv(className, content) {
149
+ return /* @__PURE__ */ React2.createElement("div", {
150
+ className
151
+ }, content);
152
+ }
153
+ drawLabel(className, label, value) {
154
+ return /* @__PURE__ */ React2.createElement("div", {
155
+ className
156
+ }, /* @__PURE__ */ React2.createElement("span", {
157
+ className: "label"
158
+ }, label), /* @__PURE__ */ React2.createElement("span", {
159
+ className: "value"
160
+ }, value));
161
+ }
162
+ render() {
163
+ const { selected, user } = this.state;
164
+ const _a = this.props, { containerProps, imagesData, onSelect, disableDoubleClick } = _a, modalProps = __objRest(_a, ["containerProps", "imagesData", "onSelect", "disableDoubleClick"]);
165
+ return /* @__PURE__ */ React2.createElement(DSModal, __spreadProps(__spreadValues({
166
+ containerProps
167
+ }, modalProps), {
168
+ className: "em-ds-modal-image-library",
169
+ onReject: this.onReject
170
+ }), /* @__PURE__ */ React2.createElement("div", {
171
+ className: "wrapper"
172
+ }, /* @__PURE__ */ React2.createElement("div", {
173
+ className: "col-1"
174
+ }, this.drawDiv("title", "Company Images"), this.renderElements()), /* @__PURE__ */ React2.createElement("div", {
175
+ className: "col-2"
176
+ }, this.drawDiv("title", selected ? selected.name : ""), /* @__PURE__ */ React2.createElement(ImageLoader, {
177
+ className: "image-loader",
178
+ error: this.renderError,
179
+ loading: this.renderSpinner,
180
+ src: selected ? selected.url : ""
181
+ }), selected && /* @__PURE__ */ React2.createElement("div", {
182
+ className: "info"
183
+ }, this.drawLabel("info-element", "Created Date:", selected.createdDate), this.drawLabel("info-element", "Created By:", user)))));
184
+ }
185
+ }
186
+ export {
187
+ ImageLibraryModalImpl as default
188
+ };
189
+ //# sourceMappingURL=ImageLibraryModalImpl.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/ImageLibraryModalImpl.tsx"],
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;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB;AAEzB,oCAAmD,OAAM,cAAc;AAAA,EACrE,YAAY,OAAO;AACjB,UAAM;AAuBR,oBAAW,MAAM;AACf,YAAM,EAAE,UAAU,YAAY,KAAK;AACnC,UAAI,UAAU;AACZ;AAAA,aACK;AACL;AAAA;AAAA;AAeJ,8BAAqB,CAAC,GAAG,UAAU;AACjC,UAAI,EAAE,OAAO,EAAE,QAAQ,KAAK;AAC1B;AAAA;AAEF,YAAM,EAAE,aAAa,KAAK;AAC1B,YAAM,EAAE,oBAAoB,WAAW,aAAa,KAAK;AACzD,UAAI,UAAU,YAAY,aAAa,CAAC,oBAAoB;AAC1D;AACA;AAAA;AAEF,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,MAAM,KAAK,QAAQ;AAAA;AAErB,UAAI,UAAU;AACZ,iBAAS;AAAA;AAAA;AAgCb,0BAAiB,MAAM;AACrB,YAAM,EAAE,eAAe,KAAK;AAC5B,UAAI,CAAC,YAAY;AACf,eAAO;AAAA;AAET,YAAM,EAAE,aAAa,KAAK;AAC1B,aAAO,WAAW,IAAI,CAAC,OAAO,QAAQ;AACpC,cAAM,SAAS;AACf,cAAM,EAAE,MAAM,OAAO;AACrB,YAAI,KAAK,cAAc,QAAQ,GAAG;AAChC,iBAAO,MAAM,CAAC,YAAY,WAAW,QAAQ;AAC7C,eAAK,aAAa;AAAA,mBACT,YAAY,SAAS,SAAS,MAAM;AAC7C,iBAAO,MAAM,CAAC,YAAY,WAAW,QAAQ;AAAA;AAE/C,eACE,qCAAC,OAAD;AAAA,UACE,KAAK,MAAM,GAAG,QAAQ;AAAA,UACtB,WAAW;AAAA,UACX,SAAS,CAAC,MAAM,KAAK,mBAAmB,GAAG;AAAA,UAC3C,SAAS,CAAC,MAAM,KAAK,mBAAmB,GAAG;AAAA,UAC3C,MAAK;AAAA,UACL,UAAU;AAAA,WACN,SAEJ,qCAAC,OAAD;AAAA,UAAK,WAAU;AAAA,WAAW;AAAA;AAAA;AAMlC,yBAAgB,MAAM,qCAAC,WAAD;AAAA,MAAW,SAAQ;AAAA,MAAa,MAAK;AAAA;AAE3D,uBAAc,MAAM,qCAAC,cAAD;AAAA,MAAc,OAAO,aAAa;AAAA,MAAS,MAAM,YAAY;AAAA;AA1H/E,SAAK,QAAQ;AAAA,MACX,UAAU;AAAA,MACV,MAAM;AAAA;AAER,SAAK;AAAA;AAAA,EAGP,oBAAoB;AAClB,UAAM,EAAE,eAAe,KAAK;AAC5B,QAAI,YAAY;AACd,WAAK,mBAAmB,IAAI,WAAW;AACvC,WAAK,aAAa;AAAA;AAAA;AAAA,EAItB,yBAAyB,WAAW;AAClC,UAAM,EAAE,eAAe,KAAK;AAC5B,QAAI,CAAC,cAAc,UAAU,YAAY;AACvC,WAAK,SAAS,EAAE,UAAU,WAAW;AAAA;AAAA;AAAA,EAazC,QAAQ,UAAU;AAChB,QAAI,CAAC,UAAU;AACb,aAAO;AAAA;AAET,UAAM,QAAQ,SAAS,UAAU,YAAY;AAC7C,QAAI,UAAU,IAAI;AAChB,aAAO,SAAS;AAAA;AAElB,WAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,EAsB9C,wBAAwB;AACtB,aAAS,aAAa,SAAU,GAAG;AACjC,UAAI,CAAC,SAAS,EAAE,OAAO,WAAW,mBAAmB;AACnD,eAAO;AAAA;AAET,UAAI,KAAK,OAAO;AAChB,YAAM,WAAW,EAAE,WAAW,EAAE;AAChC,UAAI,aAAa,IAAI;AACnB,UAAE;AACF,eAAO;AAAA;AAET,aAAO;AAAA;AAAA;AAAA,EAIX,QAAQ,WAAW,SAAS;AAC1B,WAAO,qCAAC,OAAD;AAAA,MAAK;AAAA,OAAuB;AAAA;AAAA,EAGrC,UAAU,WAAW,OAAO,OAAO;AACjC,WACE,qCAAC,OAAD;AAAA,MAAK;AAAA,OACH,qCAAC,QAAD;AAAA,MAAM,WAAU;AAAA,OAAS,QACzB,qCAAC,QAAD;AAAA,MAAM,WAAU;AAAA,OAAS;AAAA;AAAA,EAwC/B,SAAS;AACP,UAAM,EAAE,UAAU,SAAS,KAAK;AAChC,UAAoF,UAAK,OAAjF,kBAAgB,YAAY,UAAU,uBAAsC,IAAf,uBAAe,IAAf,CAA7D,kBAAgB,cAAY,YAAU;AAC9C,WACE,qCAAC,SAAD;AAAA,MACE;AAAA,OACI,aAFN;AAAA,MAGE,WAAU;AAAA,MACV,UAAU,KAAK;AAAA,QAEf,qCAAC,OAAD;AAAA,MAAK,WAAU;AAAA,OACb,qCAAC,OAAD;AAAA,MAAK,WAAU;AAAA,OACZ,KAAK,QAAQ,SAAS,mBACtB,KAAK,mBAER,qCAAC,OAAD;AAAA,MAAK,WAAU;AAAA,OACZ,KAAK,QAAQ,SAAS,WAAW,SAAS,OAAO,KAClD,qCAAC,aAAD;AAAA,MACE,WAAU;AAAA,MACV,OAAO,KAAK;AAAA,MACZ,SAAS,KAAK;AAAA,MACd,KAAK,WAAW,SAAS,MAAM;AAAA,QAEhC,YACC,qCAAC,OAAD;AAAA,MAAK,WAAU;AAAA,OACZ,KAAK,UAAU,gBAAgB,iBAAiB,SAAS,cACzD,KAAK,UAAU,gBAAgB,eAAe;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ import { default as default2 } from "./DSImageLibraryModal";
3
+ export {
4
+ default2 as default
5
+ };
6
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default } from './DSImageLibraryModal';\n"],
5
+ "mappings": "AAAA;ACAA;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,23 +1,26 @@
1
1
  {
2
2
  "name": "@elliemae/ds-imagelibrarymodal",
3
- "version": "3.0.0-next.2",
3
+ "version": "3.0.0-next.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Image Library Modal",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "module": "./dist/esm/index.js",
10
+ "main": "./dist/cjs/index.js",
11
+ "types": "./dist/types/index.d.ts",
9
12
  "exports": {
10
13
  ".": {
11
- "import": "./esm/index.js",
12
- "require": "./cjs/index.js"
14
+ "import": "./dist/esm/index.js",
15
+ "require": "./dist/cjs/index.js"
13
16
  },
14
17
  "./DSImageLibraryModal": {
15
- "import": "./esm/DSImageLibraryModal.js",
16
- "require": "./cjs/DSImageLibraryModal.js"
18
+ "import": "./dist/esm/DSImageLibraryModal.js",
19
+ "require": "./dist/cjs/DSImageLibraryModal.js"
17
20
  },
18
21
  "./components/ImageLibraryModalImpl": {
19
- "import": "./esm/components/ImageLibraryModalImpl.js",
20
- "require": "./cjs/components/ImageLibraryModalImpl.js"
22
+ "import": "./dist/esm/components/ImageLibraryModalImpl.js",
23
+ "require": "./dist/cjs/components/ImageLibraryModalImpl.js"
21
24
  }
22
25
  },
23
26
  "sideEffects": [
@@ -29,22 +32,22 @@
29
32
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
30
33
  },
31
34
  "engines": {
32
- "npm": ">=7",
33
- "node": ">=14"
35
+ "pnpm": ">=6",
36
+ "node": ">=16"
34
37
  },
35
38
  "author": "ICE MT",
36
- "scripts": {
37
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
38
- "prebuild": "exit 0",
39
- "predev": "exit 0",
40
- "build": "node ../../scripts/build/build.js"
39
+ "jestSonar": {
40
+ "sonar56x": true,
41
+ "reportPath": "reports",
42
+ "reportFile": "tests.xml",
43
+ "indent": 4
41
44
  },
42
45
  "dependencies": {
43
- "@elliemae/ds-icon": "3.0.0-next.2",
44
- "@elliemae/ds-icons": "3.0.0-next.2",
45
- "@elliemae/ds-modal": "3.0.0-next.2",
46
- "@elliemae/ds-shared": "3.0.0-next.2",
47
- "@elliemae/ds-spinner": "3.0.0-next.2",
46
+ "@elliemae/ds-icon": "3.0.0-next.6",
47
+ "@elliemae/ds-icons": "3.0.0-next.6",
48
+ "@elliemae/ds-modal": "3.0.0-next.6",
49
+ "@elliemae/ds-shared": "3.0.0-next.6",
50
+ "@elliemae/ds-spinner": "3.0.0-next.6",
48
51
  "prop-types": "~15.7.2",
49
52
  "react-loading-image": "~0.5.0"
50
53
  },
@@ -55,7 +58,13 @@
55
58
  },
56
59
  "publishConfig": {
57
60
  "access": "public",
58
- "directory": "dist",
59
- "generateSubmodules": true
61
+ "typeSafety": false
62
+ },
63
+ "scripts": {
64
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
65
+ "test": "node ../../scripts/testing/test.mjs",
66
+ "lint": "node ../../scripts/lint.mjs",
67
+ "dts": "node ../../scripts/dts.mjs",
68
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
60
69
  }
61
70
  }
@@ -1,64 +0,0 @@
1
- 'use strict';
2
-
3
- require('core-js/modules/esnext.async-iterator.filter.js');
4
- require('core-js/modules/esnext.iterator.constructor.js');
5
- require('core-js/modules/esnext.iterator.filter.js');
6
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
- require('core-js/modules/esnext.iterator.for-each.js');
8
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
9
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
10
- require('react');
11
- var DSModal = require('@elliemae/ds-modal');
12
- var constants = require('@elliemae/ds-shared/constants');
13
- var ImageLibraryModalImpl = require('./components/ImageLibraryModalImpl.js');
14
- var jsxRuntime = require('react/jsx-runtime');
15
-
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
-
18
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
19
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
20
-
21
- const _excluded = ["containerProps", "confirmLabel", "disableDoubleClick", "isOpen", "modalTitle", "modalType", "rejectLabel", "shouldCloseOnOverlayClick", "size", "imagesData", "onSelect"];
22
-
23
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
24
-
25
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
26
- const modalTypes = Object.values(DSModal.MODAL_TYPE);
27
-
28
- const DSImageLibraryModal = _ref => {
29
- let {
30
- containerProps = {},
31
- confirmLabel = 'Add',
32
- disableDoubleClick = false,
33
- isOpen = true,
34
- modalTitle = 'Add Image',
35
- modalType = modalTypes[2],
36
- rejectLabel = 'Cancel',
37
- shouldCloseOnOverlayClick = true,
38
- size = constants.sizeOptions[3],
39
- imagesData = [{
40
- url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',
41
- name: 'no image',
42
- createdBy: 'user:John Doe',
43
- createdDate: '0000-01-01 00:00 AM UTC'
44
- }],
45
- onSelect = () => null
46
- } = _ref,
47
- rest = _objectWithoutProperties__default["default"](_ref, _excluded);
48
-
49
- return /*#__PURE__*/jsxRuntime.jsx(ImageLibraryModalImpl, _objectSpread({
50
- confirmLabel: confirmLabel,
51
- containerProps: containerProps,
52
- disableDoubleClick: disableDoubleClick,
53
- imagesData: imagesData,
54
- isOpen: isOpen,
55
- modalTitle: modalTitle,
56
- modalType: modalType,
57
- onSelect: onSelect,
58
- rejectLabel: rejectLabel,
59
- shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
60
- size: size
61
- }, rest));
62
- };
63
-
64
- module.exports = DSImageLibraryModal;
@@ -1,254 +0,0 @@
1
- 'use strict';
2
-
3
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
4
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('core-js/modules/esnext.async-iterator.map.js');
7
- require('core-js/modules/esnext.iterator.map.js');
8
- require('core-js/modules/esnext.async-iterator.filter.js');
9
- require('core-js/modules/esnext.iterator.constructor.js');
10
- require('core-js/modules/esnext.iterator.filter.js');
11
- require('core-js/modules/esnext.async-iterator.for-each.js');
12
- require('core-js/modules/esnext.iterator.for-each.js');
13
- var React = require('react');
14
- var DSModal = require('@elliemae/ds-modal');
15
- var DSSpinner = require('@elliemae/ds-spinner');
16
- var dsIcon = require('@elliemae/ds-icon');
17
- var lodash = require('lodash');
18
- var ImageLoader = require('react-loading-image');
19
- var dsIcons = require('@elliemae/ds-icons');
20
- var jsxRuntime = require('react/jsx-runtime');
21
-
22
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
-
24
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
25
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
26
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
27
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
- var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
29
- var DSSpinner__default = /*#__PURE__*/_interopDefaultLegacy(DSSpinner);
30
- var ImageLoader__default = /*#__PURE__*/_interopDefaultLegacy(ImageLoader);
31
-
32
- const _excluded = ["containerProps", "imagesData", "onSelect", "disableDoubleClick"];
33
-
34
- var _DSSpinner;
35
-
36
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
37
-
38
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
39
- const elementClassName = 'imglibmodal-element';
40
- class ImageLibraryModalImpl extends React__default["default"].PureComponent {
41
- constructor(props) {
42
- super(props);
43
-
44
- this.onReject = () => {
45
- const {
46
- onReject,
47
- onClose
48
- } = this.props;
49
-
50
- if (onReject) {
51
- onReject();
52
- } else {
53
- onClose();
54
- }
55
- };
56
-
57
- this.handleElementClick = (e, image) => {
58
- if (e.key && e.key !== ' ') {
59
- return;
60
- }
61
-
62
- const {
63
- selected
64
- } = this.state;
65
- const {
66
- disableDoubleClick,
67
- onConfirm,
68
- onSelect
69
- } = this.props;
70
-
71
- if (image === selected && onConfirm && !disableDoubleClick) {
72
- onConfirm();
73
- return;
74
- }
75
-
76
- this.setState({
77
- selected: image,
78
- user: this.getUser(image)
79
- });
80
-
81
- if (onSelect) {
82
- onSelect(image);
83
- }
84
- };
85
-
86
- this.renderElements = () => {
87
- const {
88
- imagesData
89
- } = this.props;
90
-
91
- if (!imagesData) {
92
- return 'Empty';
93
- }
94
-
95
- const {
96
- selected
97
- } = this.state;
98
- return imagesData.map((image, idx) => {
99
- const extras = {};
100
- const {
101
- name,
102
- id
103
- } = image;
104
-
105
- if (this.focusFirst && idx === 0) {
106
- extras.ref = element => element && element.focus();
107
-
108
- this.focusFirst = undefined;
109
- } else if (selected && name === selected.name) {
110
- extras.ref = element => element && element.focus();
111
- }
112
-
113
- return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
114
- className: elementClassName,
115
- onClick: e => this.handleElementClick(e, image),
116
- onKeyUp: e => this.handleElementClick(e, image),
117
- role: "button",
118
- tabIndex: 0
119
- }, extras), {}, {
120
- children: /*#__PURE__*/_jsx__default["default"]("div", {
121
- className: "content"
122
- }, void 0, name)
123
- }), id || "".concat(name, "_").concat(idx));
124
- });
125
- };
126
-
127
- this.renderSpinner = () => _DSSpinner || (_DSSpinner = /*#__PURE__*/_jsx__default["default"](DSSpinner__default["default"], {
128
- message: "Loading...",
129
- size: "m"
130
- }));
131
-
132
- this.renderError = () => /*#__PURE__*/_jsx__default["default"](dsIcons.ImageMissing, {
133
- color: dsIcon.DSIconColors.NEUTRAL,
134
- size: dsIcon.DSIconSizes.M
135
- });
136
-
137
- this.state = {
138
- selected: undefined,
139
- user: undefined
140
- };
141
- this.preventSpacebarScroll();
142
- }
143
-
144
- componentDidMount() {
145
- const {
146
- imagesData
147
- } = this.props;
148
-
149
- if (imagesData) {
150
- this.handleElementClick({}, imagesData[0]);
151
- this.focusFirst = true;
152
- }
153
- }
154
-
155
- getDerivedStateFromProps(nextProps) {
156
- const {
157
- imagesData
158
- } = this.props;
159
-
160
- if (!imagesData && nextProps.imagesData) {
161
- this.setState({
162
- selected: imagesData[0]
163
- });
164
- }
165
- }
166
-
167
- getUser(selected) {
168
- if (!selected) {
169
- return '';
170
- }
171
-
172
- const index = selected.createdBy.lastIndexOf('user:');
173
-
174
- if (index === -1) {
175
- return selected.createdBy;
176
- }
177
-
178
- return selected.createdBy.substring(index + 5);
179
- }
180
-
181
- preventSpacebarScroll() {
182
- document.onkeypress = function (e) {
183
- if (!lodash.includes(e.target.className, elementClassName)) {
184
- return true;
185
- }
186
-
187
- e = e || window.event;
188
- const charCode = e.keyCode || e.which;
189
-
190
- if (charCode === 32) {
191
- e.preventDefault();
192
- return false;
193
- }
194
-
195
- return true;
196
- };
197
- }
198
-
199
- drawDiv(className, content) {
200
- return /*#__PURE__*/_jsx__default["default"]("div", {
201
- className: className
202
- }, void 0, content);
203
- }
204
-
205
- drawLabel(className, label, value) {
206
- return /*#__PURE__*/_jsx__default["default"]("div", {
207
- className: className
208
- }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
209
- className: "label"
210
- }, void 0, label), /*#__PURE__*/_jsx__default["default"]("span", {
211
- className: "value"
212
- }, void 0, value));
213
- }
214
-
215
- render() {
216
- const {
217
- selected,
218
- user
219
- } = this.state;
220
-
221
- const _this$props = this.props,
222
- {
223
- containerProps,
224
- imagesData,
225
- onSelect,
226
- disableDoubleClick
227
- } = _this$props,
228
- modalProps = _objectWithoutProperties__default["default"](_this$props, _excluded);
229
-
230
- return /*#__PURE__*/jsxRuntime.jsx(DSModal__default["default"], _objectSpread(_objectSpread({
231
- containerProps: containerProps
232
- }, modalProps), {}, {
233
- className: "em-ds-modal-image-library",
234
- onReject: this.onReject,
235
- children: /*#__PURE__*/_jsx__default["default"]("div", {
236
- className: "wrapper"
237
- }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
238
- className: "col-1"
239
- }, void 0, this.drawDiv('title', 'Company Images'), this.renderElements()), /*#__PURE__*/_jsx__default["default"]("div", {
240
- className: "col-2"
241
- }, void 0, this.drawDiv('title', selected ? selected.name : ''), /*#__PURE__*/_jsx__default["default"](ImageLoader__default["default"], {
242
- className: "image-loader",
243
- error: this.renderError,
244
- loading: this.renderSpinner,
245
- src: selected ? selected.url : ''
246
- }), selected && /*#__PURE__*/_jsx__default["default"]("div", {
247
- className: "info"
248
- }, void 0, this.drawLabel('info-element', 'Created Date:', selected.createdDate), this.drawLabel('info-element', 'Created By:', user))))
249
- }));
250
- }
251
-
252
- }
253
-
254
- module.exports = ImageLibraryModalImpl;
package/cjs/index.js DELETED
@@ -1,7 +0,0 @@
1
- 'use strict';
2
-
3
- var DSImageLibraryModal = require('./DSImageLibraryModal.js');
4
-
5
-
6
-
7
- module.exports = DSImageLibraryModal;