@cu-mkp/editioncrafter 1.0.3 → 1.0.4-beta.1

package/dist/es/src/component/ImageGridView.js

@@ -1,265 +1,200 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-import React from 'react';
-import { connect } from 'react-redux';
-import InfiniteScroll from 'react-infinite-scroller';
-import { MenuItem, Select } from '@material-ui/core';
-var ImageGridView = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageGridView, _React$Component);
-  var _super = _createSuper(ImageGridView);
-  function ImageGridView(props, context) {
-    var _this;
-    _classCallCheck(this, ImageGridView);
-    _this = _super.call(this, props, context);
-    _this.onJumpToChange = function (event) {
-      var jumpToBuffer = event.target.value;
-      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-        jumpToBuffer: jumpToBuffer
-      }));
-    };
-    _this.onJumpTo = function (event) {
-      var jumpToBuffer = _this.state.jumpToBuffer;
-      var _this$props = _this.props,
-        side = _this$props.side,
-        document = _this$props.document,
-        documentViewActions = _this$props.documentViewActions;
-      event.preventDefault();
+import { MenuItem, Select } from '@material-ui/core'
+import React from 'react'
+import InfiniteScroll from 'react-infinite-scroller'
+import { connect } from 'react-redux'
 
-      // Convert folioName to ID (and confirm it exists)
-      if (document.folioByName[jumpToBuffer]) {
-        var folio = document.folioByName[jumpToBuffer];
-        if (folio) {
-          documentViewActions.changeCurrentFolio(folio.id, side);
-        }
-      }
-      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-        jumpToBuffer: ''
-      }));
-    };
-    _this.onSelectDoc = function (event) {
-      if (!event.target.value || event.target.value == 0) {
-        return;
-      }
-      if (event.target.value && event.target.value !== 'none') {
-        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-          currentDoc: event.target.value
-        }));
-      } else {
-        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-          currentDoc: null
-        }));
-      }
-      var documentView = _this.props.documentView;
-      var folioID = documentView[_this.props.side].iiifShortID;
-      var thumbs = _this.generateThumbs(folioID, event.target.value !== 'none' ? _this.props.document.folios.filter(function (folio) {
-        return folio.doc_id === event.target.value;
-      }) : _this.props.document.folios);
-      var thumbCount = thumbs.length > _this.loadIncrement ? _this.loadIncrement : thumbs.length;
-      var visibleThumbs = thumbs.slice(0, thumbCount);
-      _this.setState({
-        thumbs: thumbs,
-        visibleThumbs: visibleThumbs
-      });
-    };
-    _this.onClickThumb = function (id, e) {
-      // Set the folio for this side
-      _this.props.documentViewActions.changeCurrentFolio(id, _this.props.side, 'f');
-    };
-    _this.moreThumbs = function () {
-      var thumbs = _this.state.thumbs;
-      var visibleThumbs = _this.state.visibleThumbs;
-      var thumbCount = visibleThumbs.length + _this.loadIncrement;
-      if (thumbs.length >= thumbCount) {
-        visibleThumbs = thumbs.slice(0, thumbCount);
-      } else {
-        visibleThumbs = thumbs;
-      }
-      _this.setState({
-        visibleThumbs: visibleThumbs
-      });
-    };
-    _this.generateThumbs = _this.generateThumbs.bind(_assertThisInitialized(_this));
-    _this.loadIncrement = 10;
-    _this.state = {
+class ImageGridView extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.generateThumbs = this.generateThumbs.bind(this)
+    this.loadIncrement = 10
+    this.state = {
       jumpToBuffer: '',
       thumbs: '',
       visibleThumbs: [],
-      currentDoc: props.selectedDoc || null
-    };
-    return _this;
+      currentDoc: props.selectedDoc || null,
+    }
   }
-  _createClass(ImageGridView, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-      var documentView = this.props.documentView;
-      var folioID = documentView[this.props.side].iiifShortID;
-      var nextFolioID = this.props.documentView[this.props.side].iiifShortID;
-      if (folioID !== nextFolioID) {
-        var thumbs = this.generateThumbs(nextFolioID, this.state.currentDoc ? this.props.document.folios.filter(function (folio) {
-          return folio.doc_id === _this2.state.currentDoc;
-        }) : this.props.document.folios);
-        var thumbCount = thumbs.length > this.loadIncrement ? this.loadIncrement : thumbs.length;
-        var visibleThumbs = thumbs.slice(0, thumbCount);
-        this.setState({
-          thumbs: thumbs,
-          visibleThumbs: visibleThumbs
-        });
-      }
+
+  componentDidUpdate(prevProps) {
+    const { documentView } = this.props
+    const folioID = documentView[this.props.side].iiifShortID
+    const nextFolioID = this.props.documentView[this.props.side].iiifShortID
+
+    if (folioID !== nextFolioID) {
+      const thumbs = this.generateThumbs(nextFolioID, this.state.currentDoc ? this.props.document.folios.filter(folio => (folio.doc_id === this.state.currentDoc)) : this.props.document.folios)
+      const thumbCount = (thumbs.length > this.loadIncrement) ? this.loadIncrement : thumbs.length
+      const visibleThumbs = thumbs.slice(0, thumbCount)
+      this.setState({ thumbs, visibleThumbs })
     }
-  }, {
-    key: "renderToolbar",
-    value: function renderToolbar() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "imageGridToolbar"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "fas fa-th",
-        style: {
-          paddingLeft: '15px'
-        }
-      }), this.props.document.variorum ? this.renderDocSelect() : /*#__PURE__*/React.createElement("div", {
-        className: "doc-select",
-        style: {
-          marginTop: '5px'
-        }
-      }, this.props.document.documentName), /*#__PURE__*/React.createElement("div", {
-        className: "jump-to"
-      }, /*#__PURE__*/React.createElement("form", {
-        onSubmit: this.onJumpTo
-      }, /*#__PURE__*/React.createElement("span", null, "Jump to: "), /*#__PURE__*/React.createElement("input", {
-        id: "jump-to-input",
-        placeholder: "Page Name (e.g. '3r')",
-        onChange: this.onJumpToChange,
-        value: this.state.jumpToBuffer
-      }), /*#__PURE__*/React.createElement("button", {
-        id: "jump-to-button",
-        onClick: this.onJumpTo
-      }, /*#__PURE__*/React.createElement("span", {
-        style: {
-          color: 'black'
-        },
-        className: "fa fa-hand-point-right"
-      })))));
+  }
+
+  onJumpToChange = (event) => {
+    const jumpToBuffer = event.target.value
+    this.setState({ ...this.state, jumpToBuffer })
+  }
+
+  onJumpTo = (event) => {
+    const { jumpToBuffer } = this.state
+    const { side, document, documentViewActions } = this.props
+    event.preventDefault()
+
+    // Convert folioName to ID (and confirm it exists)
+    if (document.folioByName[jumpToBuffer]) {
+      const folio = document.folioByName[jumpToBuffer]
+      if (folio) {
+        documentViewActions.changeCurrentFolio(folio.id, side)
+      }
     }
 
-    // in the case of a variorum, allow for filtering by document
-  }, {
-    key: "renderDocSelect",
-    value: function renderDocSelect() {
-      var _this3 = this;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "doc-select"
-      }, /*#__PURE__*/React.createElement(Select, {
-        id: "doc-filter",
-        className: "dark",
-        style: {
-          color: 'white',
-          fontSize: 'max(16px, 1rem)'
-        },
-        value: this.state.currentDoc || Object.keys(this.props.document.derivativeNames)[0],
-        onClick: this.onSelectDoc
-      }, Object.keys(this.props.document.derivativeNames).map(function (key) {
-        return /*#__PURE__*/React.createElement(MenuItem, {
-          value: key,
-          key: key
-        }, _this3.props.document.derivativeNames[key]);
-      })));
+    this.setState({ ...this.state, jumpToBuffer: '' })
+  }
+
+  renderToolbar() {
+    return (
+      <div className="imageGridToolbar">
+        <span className="fas fa-th" style={{ paddingLeft: '15px' }} />
+        { this.props.document.variorum
+          ? this.renderDocSelect()
+          : (
+              <div className="doc-select" style={{ marginTop: '5px' }}>
+                { this.props.document.documentName }
+              </div>
+            ) }
+        <div className="jump-to">
+          <form onSubmit={this.onJumpTo}>
+            <span>Jump to: </span>
+            <input
+              id="jump-to-input"
+              placeholder="Page Name (e.g. '3r')"
+              onChange={this.onJumpToChange}
+              value={this.state.jumpToBuffer}
+            />
+            <button id="jump-to-button" onClick={this.onJumpTo}>
+              <span style={{ color: 'black' }} className="fa fa-hand-point-right" />
+            </button>
+          </form>
+        </div>
+      </div>
+    )
+  }
+
+  // in the case of a variorum, allow for filtering by document
+  renderDocSelect() {
+    return (
+      <div className="doc-select">
+        <Select
+          id="doc-filter"
+          className="dark"
+          style={{ color: 'white', fontSize: 'max(16px, 1rem)' }}
+          value={this.state.currentDoc || Object.keys(this.props.document.derivativeNames)[0]}
+          onClick={this.onSelectDoc}
+        >
+          {/* <MenuItem value="none" key="none">{this.state.currentDoc ? 'View All' : 'Select a Document'}</MenuItem> */}
+          { Object.keys(this.props.document.derivativeNames).map(key => (
+            <MenuItem value={key} key={key}>{this.props.document.derivativeNames[key]}</MenuItem>
+          ))}
+        </Select>
+      </div>
+    )
+  }
+
+  onSelectDoc = (event) => {
+    if (!event.target.value || event.target.value == 0) {
+      return
+    }
+    if (event.target.value && event.target.value !== 'none') {
+      this.setState({ ...this.state, currentDoc: event.target.value })
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this4 = this;
-      var documentView = this.props.documentView;
-      var folioID = documentView[this.props.side].iiifShortID;
-      var thumbs = this.generateThumbs(folioID, this.props.document.variorum && this.state.currentDoc ? this.props.document.folios.filter(function (folio) {
-        return folio.doc_id === _this4.state.currentDoc;
-      }) : this.props.document.folios);
-      console.log(thumbs);
-      console.log(this.props.document.folios);
-      var thumbCount = thumbs.length > this.loadIncrement ? this.loadIncrement : thumbs.length;
-      var visibleThumbs = thumbs.slice(0, thumbCount);
-      this.setState({
-        thumbs: thumbs,
-        visibleThumbs: visibleThumbs
-      });
+    else {
+      this.setState({ ...this.state, currentDoc: null })
     }
-  }, {
-    key: "generateThumbs",
-    value: function generateThumbs(currentID, folios) {
-      var _this5 = this;
-      var thumbs = folios.map(function (folio, index) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line react/no-array-index-key
-          React.createElement("li", {
-            key: "thumb-".concat(index),
-            className: "thumbnail"
-          }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("a", {
-            id: folio.id,
-            onClick: _this5.onClickThumb.bind(_this5, folio.id)
-          }, /*#__PURE__*/React.createElement("img", {
-            src: folio.image_thumbnail_url,
-            alt: folio.name,
-            style: {
-              maxWidth: "130px",
-              maxHeight: "130px"
-            },
-            onError: function onError(_ref) {
-              var currentTarget = _ref.currentTarget;
-              currentTarget.onerror = null;
-              if (folio.image_zoom_url && currentTarget.src !== "".concat(folio.image_zoom_url.slice(0, -9), "full/full/0/default.jpg")) {
-                currentTarget.src = "".concat(folio.image_zoom_url.slice(0, -9), "full/full/0/default.jpg");
-              }
-            }
-          }))), /*#__PURE__*/React.createElement("figcaption", {
-            className: "thumbnail-caption"
-          }, folio.name))
-        );
-      });
-      return thumbs;
+    const { documentView } = this.props
+    const folioID = documentView[this.props.side].iiifShortID
+    const thumbs = this.generateThumbs(folioID, event.target.value !== 'none' ? this.props.document.folios.filter(folio => (folio.doc_id === event.target.value)) : this.props.document.folios)
+    const thumbCount = (thumbs.length > this.loadIncrement) ? this.loadIncrement : thumbs.length
+    const visibleThumbs = thumbs.slice(0, thumbCount)
+    this.setState({ thumbs, visibleThumbs })
+  }
+
+  componentDidMount() {
+    const { documentView } = this.props
+    const folioID = documentView[this.props.side].iiifShortID
+    const thumbs = this.generateThumbs(folioID, this.props.document.variorum && this.state.currentDoc ? this.props.document.folios.filter(folio => (folio.doc_id === this.state.currentDoc)) : this.props.document.folios)
+    const thumbCount = (thumbs.length > this.loadIncrement) ? this.loadIncrement : thumbs.length
+    const visibleThumbs = thumbs.slice(0, thumbCount)
+    this.setState({ thumbs, visibleThumbs })
+  }
+
+  onClickThumb = (id, e) => {
+    // Set the folio for this side
+    this.props.documentViewActions.changeCurrentFolio(
+      id,
+      this.props.side,
+      'f',
+    )
+  }
+
+  generateThumbs(currentID, folios) {
+    const thumbs = folios.map((folio, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <li key={`thumb-${index}`} className="thumbnail">
+        <figure><a id={folio.id} onClick={this.onClickThumb.bind(this, folio.id)}><img src={folio.image_thumbnail_url} alt={folio.name} style={{ maxWidth: '130px', maxHeight: '130px' }} onError={({ currentTarget }) => { currentTarget.onerror = null; if (folio.image_zoom_url && currentTarget.src !== `${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`) { currentTarget.src = `${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg` } }} /></a></figure>
+        <figcaption className="thumbnail-caption">
+          {folio.name}
+        </figcaption>
+
+      </li>
+    ))
+    return thumbs
+  }
+
+  moreThumbs = () => {
+    const { thumbs } = this.state
+    let { visibleThumbs } = this.state
+    const thumbCount = visibleThumbs.length + this.loadIncrement
+
+    if (thumbs.length >= thumbCount) {
+      visibleThumbs = thumbs.slice(0, thumbCount)
     }
-  }, {
-    key: "hasMore",
-    value: function hasMore() {
-      return this.state.visibleThumbs.length !== this.state.thumbs.length;
+    else {
+      visibleThumbs = thumbs
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var thisClass = 'imageGridComponent';
-      thisClass = "".concat(thisClass, " ").concat(this.props.side);
-      var visibleThumbs = this.state.visibleThumbs;
-      if (visibleThumbs.constructor.toString().indexOf('Array') === -1) {
-        visibleThumbs = [];
-      }
-      return /*#__PURE__*/React.createElement("div", {
-        className: thisClass
-      }, this.renderToolbar(), /*#__PURE__*/React.createElement(InfiniteScroll, {
-        element: "ul",
-        loadMore: this.moreThumbs,
-        hasMore: this.hasMore(),
-        useWindow: false
-      }, visibleThumbs));
+
+    this.setState({ visibleThumbs })
+  }
+
+  hasMore() {
+    return (this.state.visibleThumbs.length !== this.state.thumbs.length)
+  }
+
+  render() {
+    let thisClass = 'imageGridComponent'
+    thisClass = `${thisClass} ${this.props.side}`
+    let { visibleThumbs } = this.state
+    if (!visibleThumbs.constructor.toString().includes('Array')) {
+      visibleThumbs = []
     }
-  }]);
-  return ImageGridView;
-}(React.Component);
+    return (
+      <div className={thisClass}>
+        { this.renderToolbar() }
+        <InfiniteScroll
+          element="ul"
+          loadMore={this.moreThumbs}
+          hasMore={this.hasMore()}
+          useWindow={false}
+        >
+          {visibleThumbs}
+        </InfiniteScroll>
+      </div>
+    )
+  }
+}
+
 function mapStateToProps(state) {
   return {
-    document: state.document
-  };
+    document: state.document,
+  }
 }
-export default connect(mapStateToProps)(ImageGridView);
+
+export default connect(mapStateToProps)(ImageGridView)