@elliemae/ds-imagelibrarymodal 3.0.0-next.0 → 3.0.0-next.4

package/esm/DSImageLibraryModal.js

@@ -1,57 +0,0 @@
-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

@@ -1,242 +0,0 @@
-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

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

package/types/DSImageLibraryModal.d.ts

@@ -1,35 +0,0 @@
-/// <reference types="react" />
-import PropTypes from 'prop-types';
-declare const DSImageLibraryModal: {
-    ({ containerProps, confirmLabel, disableDoubleClick, isOpen, modalTitle, modalType, rejectLabel, shouldCloseOnOverlayClick, size, imagesData, onSelect, ...rest }: {
-        [x: string]: any;
-        containerProps?: {} | undefined;
-        confirmLabel?: string | undefined;
-        disableDoubleClick?: boolean | undefined;
-        isOpen?: boolean | undefined;
-        modalTitle?: string | undefined;
-        modalType?: string | undefined;
-        rejectLabel?: string | undefined;
-        shouldCloseOnOverlayClick?: boolean | undefined;
-        size?: any;
-        imagesData?: {
-            url: string;
-            name: string;
-            createdBy: string;
-            createdDate: string;
-        }[] | undefined;
-        onSelect?: (() => null) | undefined;
-    }): JSX.Element;
-    /** Inherits DSModal props */
-    propTypes: {
-        containerProps: PropTypes.Requireable<PropTypes.InferProps<{}>>;
-        /** List of images src */
-        imagesData: PropTypes.Requireable<(PropTypes.InferProps<{
-            url: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        /** Handler when user selects an image */
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-};
-export default DSImageLibraryModal;

package/types/components/ImageLibraryModalImpl.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export default class ImageLibraryModalImpl extends React.PureComponent {
-    constructor(props: any);
-    componentDidMount(): void;
-    getDerivedStateFromProps(nextProps: any): void;
-    onReject: () => void;
-    getUser(selected: any): any;
-    handleElementClick: (e: any, image: any) => void;
-    preventSpacebarScroll(): void;
-    drawDiv(className: any, content: any): JSX.Element;
-    drawLabel(className: any, label: any, value: any): JSX.Element;
-    renderElements: () => any;
-    renderSpinner: () => JSX.Element;
-    renderError: () => JSX.Element;
-    render(): JSX.Element;
-}

package/types/index.d.ts

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