@elliemae/ds-imagelibrarymodal 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/DSImageLibraryModal.js

@@ -0,0 +1,64 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var DSModal = require('@elliemae/ds-modal');
+var constants = require('@elliemae/ds-shared/constants');
+var ImageLibraryModalImpl = require('./components/ImageLibraryModalImpl.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["containerProps", "confirmLabel", "disableDoubleClick", "isOpen", "modalTitle", "modalType", "rejectLabel", "shouldCloseOnOverlayClick", "size", "imagesData", "onSelect"];
+
+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; }
+
+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; }
+const modalTypes = Object.values(DSModal.MODAL_TYPE);
+
+const DSImageLibraryModal = _ref => {
+  let {
+    containerProps = {},
+    confirmLabel = 'Add',
+    disableDoubleClick = false,
+    isOpen = true,
+    modalTitle = 'Add Image',
+    modalType = modalTypes[2],
+    rejectLabel = 'Cancel',
+    shouldCloseOnOverlayClick = true,
+    size = constants.sizeOptions[3],
+    imagesData = [{
+      url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',
+      name: 'no image',
+      createdBy: 'user:John Doe',
+      createdDate: '0000-01-01 00:00 AM UTC'
+    }],
+    onSelect = () => null
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(ImageLibraryModalImpl, _objectSpread({
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    disableDoubleClick: disableDoubleClick,
+    imagesData: imagesData,
+    isOpen: isOpen,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onSelect: onSelect,
+    rejectLabel: rejectLabel,
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+    size: size
+  }, rest));
+};
+
+module.exports = DSImageLibraryModal;

package/cjs/components/ImageLibraryModalImpl.js

@@ -0,0 +1,254 @@
+'use strict';
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var DSModal = require('@elliemae/ds-modal');
+var DSSpinner = require('@elliemae/ds-spinner');
+var dsIcon = require('@elliemae/ds-icon');
+var lodash = require('lodash');
+var ImageLoader = require('react-loading-image');
+var dsIcons = require('@elliemae/ds-icons');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+var DSSpinner__default = /*#__PURE__*/_interopDefaultLegacy(DSSpinner);
+var ImageLoader__default = /*#__PURE__*/_interopDefaultLegacy(ImageLoader);
+
+const _excluded = ["containerProps", "imagesData", "onSelect", "disableDoubleClick"];
+
+var _DSSpinner;
+
+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; }
+
+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; }
+const elementClassName = 'imglibmodal-element';
+class ImageLibraryModalImpl extends React__default["default"].PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onReject = () => {
+      const {
+        onReject,
+        onClose
+      } = this.props;
+
+      if (onReject) {
+        onReject();
+      } else {
+        onClose();
+      }
+    };
+
+    this.handleElementClick = (e, image) => {
+      if (e.key && e.key !== ' ') {
+        return;
+      }
+
+      const {
+        selected
+      } = this.state;
+      const {
+        disableDoubleClick,
+        onConfirm,
+        onSelect
+      } = this.props;
+
+      if (image === selected && onConfirm && !disableDoubleClick) {
+        onConfirm();
+        return;
+      }
+
+      this.setState({
+        selected: image,
+        user: this.getUser(image)
+      });
+
+      if (onSelect) {
+        onSelect(image);
+      }
+    };
+
+    this.renderElements = () => {
+      const {
+        imagesData
+      } = this.props;
+
+      if (!imagesData) {
+        return 'Empty';
+      }
+
+      const {
+        selected
+      } = this.state;
+      return imagesData.map((image, idx) => {
+        const extras = {};
+        const {
+          name,
+          id
+        } = image;
+
+        if (this.focusFirst && idx === 0) {
+          extras.ref = element => element && element.focus();
+
+          this.focusFirst = undefined;
+        } else if (selected && name === selected.name) {
+          extras.ref = element => element && element.focus();
+        }
+
+        return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+          className: elementClassName,
+          onClick: e => this.handleElementClick(e, image),
+          onKeyUp: e => this.handleElementClick(e, image),
+          role: "button",
+          tabIndex: 0
+        }, extras), {}, {
+          children: /*#__PURE__*/_jsx__default["default"]("div", {
+            className: "content"
+          }, void 0, name)
+        }), id || "".concat(name, "_").concat(idx));
+      });
+    };
+
+    this.renderSpinner = () => _DSSpinner || (_DSSpinner = /*#__PURE__*/_jsx__default["default"](DSSpinner__default["default"], {
+      message: "Loading...",
+      size: "m"
+    }));
+
+    this.renderError = () => /*#__PURE__*/_jsx__default["default"](dsIcons.ImageMissing, {
+      color: dsIcon.DSIconColors.NEUTRAL,
+      size: dsIcon.DSIconSizes.M
+    });
+
+    this.state = {
+      selected: undefined,
+      user: undefined
+    };
+    this.preventSpacebarScroll();
+  }
+
+  componentDidMount() {
+    const {
+      imagesData
+    } = this.props;
+
+    if (imagesData) {
+      this.handleElementClick({}, imagesData[0]);
+      this.focusFirst = true;
+    }
+  }
+
+  getDerivedStateFromProps(nextProps) {
+    const {
+      imagesData
+    } = this.props;
+
+    if (!imagesData && nextProps.imagesData) {
+      this.setState({
+        selected: imagesData[0]
+      });
+    }
+  }
+
+  getUser(selected) {
+    if (!selected) {
+      return '';
+    }
+
+    const index = selected.createdBy.lastIndexOf('user:');
+
+    if (index === -1) {
+      return selected.createdBy;
+    }
+
+    return selected.createdBy.substring(index + 5);
+  }
+
+  preventSpacebarScroll() {
+    document.onkeypress = function (e) {
+      if (!lodash.includes(e.target.className, elementClassName)) {
+        return true;
+      }
+
+      e = e || window.event;
+      const charCode = e.keyCode || e.which;
+
+      if (charCode === 32) {
+        e.preventDefault();
+        return false;
+      }
+
+      return true;
+    };
+  }
+
+  drawDiv(className, content) {
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: className
+    }, void 0, content);
+  }
+
+  drawLabel(className, label, value) {
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: className
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "label"
+    }, void 0, label), /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "value"
+    }, void 0, value));
+  }
+
+  render() {
+    const {
+      selected,
+      user
+    } = this.state;
+
+    const _this$props = this.props,
+          {
+      containerProps,
+      imagesData,
+      onSelect,
+      disableDoubleClick
+    } = _this$props,
+          modalProps = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsx(DSModal__default["default"], _objectSpread(_objectSpread({
+      containerProps: containerProps
+    }, modalProps), {}, {
+      className: "em-ds-modal-image-library",
+      onReject: this.onReject,
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "wrapper"
+      }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "col-1"
+      }, void 0, this.drawDiv('title', 'Company Images'), this.renderElements()), /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "col-2"
+      }, void 0, this.drawDiv('title', selected ? selected.name : ''), /*#__PURE__*/_jsx__default["default"](ImageLoader__default["default"], {
+        className: "image-loader",
+        error: this.renderError,
+        loading: this.renderSpinner,
+        src: selected ? selected.url : ''
+      }), selected && /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "info"
+      }, void 0, this.drawLabel('info-element', 'Created Date:', selected.createdDate), this.drawLabel('info-element', 'Created By:', user))))
+    }));
+  }
+
+}
+
+module.exports = ImageLibraryModalImpl;

package/cjs/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var DSImageLibraryModal = require('./DSImageLibraryModal.js');
+
+
+
+module.exports = DSImageLibraryModal;

package/esm/DSImageLibraryModal.js

@@ -0,0 +1,57 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { MODAL_TYPE } from '@elliemae/ds-modal';
+import { sizeOptions } from '@elliemae/ds-shared/constants';
+import ImageLibraryModalImpl from './components/ImageLibraryModalImpl.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "confirmLabel", "disableDoubleClick", "isOpen", "modalTitle", "modalType", "rejectLabel", "shouldCloseOnOverlayClick", "size", "imagesData", "onSelect"];
+
+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; }
+
+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(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; }
+const modalTypes = Object.values(MODAL_TYPE);
+
+const DSImageLibraryModal = _ref => {
+  let {
+    containerProps = {},
+    confirmLabel = 'Add',
+    disableDoubleClick = false,
+    isOpen = true,
+    modalTitle = 'Add Image',
+    modalType = modalTypes[2],
+    rejectLabel = 'Cancel',
+    shouldCloseOnOverlayClick = true,
+    size = sizeOptions[3],
+    imagesData = [{
+      url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',
+      name: 'no image',
+      createdBy: 'user:John Doe',
+      createdDate: '0000-01-01 00:00 AM UTC'
+    }],
+    onSelect = () => null
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(ImageLibraryModalImpl, _objectSpread({
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    disableDoubleClick: disableDoubleClick,
+    imagesData: imagesData,
+    isOpen: isOpen,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onSelect: onSelect,
+    rejectLabel: rejectLabel,
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+    size: size
+  }, rest));
+};
+
+export { DSImageLibraryModal as default };

package/esm/components/ImageLibraryModalImpl.js

@@ -0,0 +1,242 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React from 'react';
+import DSModal from '@elliemae/ds-modal';
+import DSSpinner from '@elliemae/ds-spinner';
+import { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';
+import { includes } from 'lodash';
+import ImageLoader from 'react-loading-image';
+import { ImageMissing } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "imagesData", "onSelect", "disableDoubleClick"];
+
+var _DSSpinner;
+
+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; }
+
+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(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; }
+const elementClassName = 'imglibmodal-element';
+class ImageLibraryModalImpl extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onReject = () => {
+      const {
+        onReject,
+        onClose
+      } = this.props;
+
+      if (onReject) {
+        onReject();
+      } else {
+        onClose();
+      }
+    };
+
+    this.handleElementClick = (e, image) => {
+      if (e.key && e.key !== ' ') {
+        return;
+      }
+
+      const {
+        selected
+      } = this.state;
+      const {
+        disableDoubleClick,
+        onConfirm,
+        onSelect
+      } = this.props;
+
+      if (image === selected && onConfirm && !disableDoubleClick) {
+        onConfirm();
+        return;
+      }
+
+      this.setState({
+        selected: image,
+        user: this.getUser(image)
+      });
+
+      if (onSelect) {
+        onSelect(image);
+      }
+    };
+
+    this.renderElements = () => {
+      const {
+        imagesData
+      } = this.props;
+
+      if (!imagesData) {
+        return 'Empty';
+      }
+
+      const {
+        selected
+      } = this.state;
+      return imagesData.map((image, idx) => {
+        const extras = {};
+        const {
+          name,
+          id
+        } = image;
+
+        if (this.focusFirst && idx === 0) {
+          extras.ref = element => element && element.focus();
+
+          this.focusFirst = undefined;
+        } else if (selected && name === selected.name) {
+          extras.ref = element => element && element.focus();
+        }
+
+        return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+          className: elementClassName,
+          onClick: e => this.handleElementClick(e, image),
+          onKeyUp: e => this.handleElementClick(e, image),
+          role: "button",
+          tabIndex: 0
+        }, extras), {}, {
+          children: /*#__PURE__*/_jsx("div", {
+            className: "content"
+          }, void 0, name)
+        }), id || "".concat(name, "_").concat(idx));
+      });
+    };
+
+    this.renderSpinner = () => _DSSpinner || (_DSSpinner = /*#__PURE__*/_jsx(DSSpinner, {
+      message: "Loading...",
+      size: "m"
+    }));
+
+    this.renderError = () => /*#__PURE__*/_jsx(ImageMissing, {
+      color: DSIconColors.NEUTRAL,
+      size: DSIconSizes.M
+    });
+
+    this.state = {
+      selected: undefined,
+      user: undefined
+    };
+    this.preventSpacebarScroll();
+  }
+
+  componentDidMount() {
+    const {
+      imagesData
+    } = this.props;
+
+    if (imagesData) {
+      this.handleElementClick({}, imagesData[0]);
+      this.focusFirst = true;
+    }
+  }
+
+  getDerivedStateFromProps(nextProps) {
+    const {
+      imagesData
+    } = this.props;
+
+    if (!imagesData && nextProps.imagesData) {
+      this.setState({
+        selected: imagesData[0]
+      });
+    }
+  }
+
+  getUser(selected) {
+    if (!selected) {
+      return '';
+    }
+
+    const index = selected.createdBy.lastIndexOf('user:');
+
+    if (index === -1) {
+      return selected.createdBy;
+    }
+
+    return selected.createdBy.substring(index + 5);
+  }
+
+  preventSpacebarScroll() {
+    document.onkeypress = function (e) {
+      if (!includes(e.target.className, elementClassName)) {
+        return true;
+      }
+
+      e = e || window.event;
+      const charCode = e.keyCode || e.which;
+
+      if (charCode === 32) {
+        e.preventDefault();
+        return false;
+      }
+
+      return true;
+    };
+  }
+
+  drawDiv(className, content) {
+    return /*#__PURE__*/_jsx("div", {
+      className: className
+    }, void 0, content);
+  }
+
+  drawLabel(className, label, value) {
+    return /*#__PURE__*/_jsx("div", {
+      className: className
+    }, void 0, /*#__PURE__*/_jsx("span", {
+      className: "label"
+    }, void 0, label), /*#__PURE__*/_jsx("span", {
+      className: "value"
+    }, void 0, value));
+  }
+
+  render() {
+    const {
+      selected,
+      user
+    } = this.state;
+
+    const _this$props = this.props,
+          {
+      containerProps,
+      imagesData,
+      onSelect,
+      disableDoubleClick
+    } = _this$props,
+          modalProps = _objectWithoutProperties(_this$props, _excluded);
+
+    return /*#__PURE__*/jsx(DSModal, _objectSpread(_objectSpread({
+      containerProps: containerProps
+    }, modalProps), {}, {
+      className: "em-ds-modal-image-library",
+      onReject: this.onReject,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "wrapper"
+      }, void 0, /*#__PURE__*/_jsx("div", {
+        className: "col-1"
+      }, void 0, this.drawDiv('title', 'Company Images'), this.renderElements()), /*#__PURE__*/_jsx("div", {
+        className: "col-2"
+      }, void 0, this.drawDiv('title', selected ? selected.name : ''), /*#__PURE__*/_jsx(ImageLoader, {
+        className: "image-loader",
+        error: this.renderError,
+        loading: this.renderSpinner,
+        src: selected ? selected.url : ''
+      }), selected && /*#__PURE__*/_jsx("div", {
+        className: "info"
+      }, void 0, this.drawLabel('info-element', 'Created Date:', selected.createdDate), this.drawLabel('info-element', 'Created By:', user))))
+    }));
+  }
+
+}
+
+export { ImageLibraryModalImpl as default };

package/esm/index.js

@@ -0,0 +1 @@
+export { default } from './DSImageLibraryModal.js';