@complat/react-spectra-editor 1.0.0-rc2 → 1.0.0-rc20.patch-1

package/dist/components/panel/compare.js

@@ -12,8 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
+var _core = require("@material-ui/core");
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 var _HighlightOff = _interopRequireDefault(require("@material-ui/icons/HighlightOff"));
 var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
@@ -31,122 +30,120 @@ var _jcamp = require("../../actions/jcamp");
 /* eslint-disable function-paren-newline, react/jsx-props-no-spreading,
 react/function-component-definition */
 
-var styles = function styles(theme) {
-  return {
-    panel: {
-      backgroundColor: '#eee',
-      display: 'table-row'
-    },
-    panelSummary: {
-      backgroundColor: '#eee',
-      height: 32
-    },
-    txtBadge: {},
-    panelDetail: {
-      backgroundColor: '#fff',
-      maxHeight: 'calc(90vh - 220px)',
-      // ROI
-      overflow: 'auto'
-    },
-    table: {
-      width: '100%'
-    },
-    tTxt: {
-      padding: 0
-    },
-    tTxtHide: {
-      color: '#D5D8DC'
-    },
-    tRow: {
-      height: 28,
-      '&:nth-of-type(even)': {
-        backgroundColor: theme.palette.background.default
-      }
-    },
-    rmBtn: {
-      color: 'red',
-      padding: '0 5px 0 5px',
-      '&:hover': {
-        borderRadius: 12,
-        backgroundColor: 'red',
-        color: 'white'
-      }
-    },
-    showBtn: {
-      color: 'steelblue',
-      padding: '0 5px 0 5px',
-      '&:hover': {
-        borderRadius: 12,
-        backgroundColor: 'steelblue',
-        color: 'white'
-      }
-    },
-    hideBtn: {
-      color: 'gray',
-      padding: '0 5px 0 5px',
-      '&:hover': {
-        borderRadius: 12,
-        backgroundColor: 'gray',
-        color: 'white'
-      }
-    },
-    square: {
-      textAlign: 'center !important'
-    },
-    baseDD: {
-      backgroundColor: 'white',
-      border: '1px dashed black',
-      borderRadius: 5,
-      height: 26,
-      lineHeight: '26px',
-      margin: '7px 0 7px 0',
-      textAlign: 'center',
-      verticalAlign: 'middle',
-      width: '90%'
-    },
-    enableDD: {
-      border: '2px dashed #000',
-      color: '#000'
-    },
-    disableDD: {
-      border: '2px dashed #aaa',
-      color: '#aaa'
-    },
-    tpCard: {},
-    tpMoreTxt: {
-      padding: '0 0 0 60px'
-    },
-    tpLabel: {
-      fontSize: 16
+const styles = theme => ({
+  panel: {
+    backgroundColor: '#eee',
+    display: 'table-row'
+  },
+  panelSummary: {
+    backgroundColor: '#eee',
+    height: 32
+  },
+  txtBadge: {},
+  panelDetail: {
+    backgroundColor: '#fff',
+    maxHeight: 'calc(90vh - 220px)',
+    // ROI
+    overflow: 'auto'
+  },
+  table: {
+    width: '100%'
+  },
+  tTxt: {
+    padding: 0
+  },
+  tTxtHide: {
+    color: '#D5D8DC'
+  },
+  tRow: {
+    height: 28,
+    '&:nth-of-type(even)': {
+      backgroundColor: theme.palette.background.default
     }
-  };
-};
-var msgDefault = 'Add spectra to compare.';
-var tpHint = function tpHint(classes) {
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tpCard)
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
-  }, "- Accept *.dx, *.jdx, *.JCAMP,"), /*#__PURE__*/_react.default.createElement("p", {
-    className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
-  }, "- Max 5 spectra."));
-};
-var content = function content(classes, desc) {
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    title: tpHint(classes),
-    placement: "bottom"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
-  }, desc));
-};
-var inputOthers = function inputOthers(classes, jcampSt) {
-  var selectedIdx = jcampSt.selectedIdx,
-    jcamps = jcampSt.jcamps;
-  var selectedJcamp = jcamps[selectedIdx];
-  var addOthersCb = selectedJcamp.addOthersCb;
-  var fileName = '';
-  var desc = fileName || msgDefault;
-  var onDrop = function onDrop(jcampFiles) {
+  },
+  rmBtn: {
+    color: 'red',
+    padding: '0 5px 0 5px',
+    '&:hover': {
+      borderRadius: 12,
+      backgroundColor: 'red',
+      color: 'white'
+    }
+  },
+  showBtn: {
+    color: 'steelblue',
+    padding: '0 5px 0 5px',
+    '&:hover': {
+      borderRadius: 12,
+      backgroundColor: 'steelblue',
+      color: 'white'
+    }
+  },
+  hideBtn: {
+    color: 'gray',
+    padding: '0 5px 0 5px',
+    '&:hover': {
+      borderRadius: 12,
+      backgroundColor: 'gray',
+      color: 'white'
+    }
+  },
+  square: {
+    textAlign: 'center !important'
+  },
+  baseDD: {
+    backgroundColor: 'white',
+    border: '1px dashed black',
+    borderRadius: 5,
+    height: 26,
+    lineHeight: '26px',
+    margin: '7px 0 7px 0',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    width: '90%'
+  },
+  enableDD: {
+    border: '2px dashed #000',
+    color: '#000'
+  },
+  disableDD: {
+    border: '2px dashed #aaa',
+    color: '#aaa'
+  },
+  tpCard: {},
+  tpMoreTxt: {
+    padding: '0 0 0 60px'
+  },
+  tpLabel: {
+    fontSize: 16
+  }
+});
+const msgDefault = 'Add spectra to compare.';
+const tpHint = classes => /*#__PURE__*/_react.default.createElement("span", {
+  className: (0, _classnames.default)(classes.tpCard)
+}, /*#__PURE__*/_react.default.createElement("p", {
+  className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
+}, "- Accept *.dx, *.jdx, *.JCAMP,"), /*#__PURE__*/_react.default.createElement("p", {
+  className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
+}, "- Max 5 spectra."));
+const content = (classes, desc) => /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+  title: tpHint(classes),
+  placement: "bottom"
+}, /*#__PURE__*/_react.default.createElement("span", {
+  className: (0, _classnames.default)(classes.tpLabel, 'txt-sv-tp')
+}, desc));
+const inputOthers = (classes, jcampSt) => {
+  const {
+    selectedIdx,
+    jcamps
+  } = jcampSt;
+  const selectedJcamp = jcamps[selectedIdx];
+  const {
+    addOthersCb
+  } = selectedJcamp;
+  const fileName = '';
+  const desc = fileName || msgDefault;
+  const onDrop = jcampFiles => {
     if (!addOthersCb) return;
     addOthersCb({
       jcamps: jcampFiles
@@ -155,79 +152,79 @@ var inputOthers = function inputOthers(classes, jcampSt) {
   return /*#__PURE__*/_react.default.createElement(_reactDropzone.default, {
     className: "dropbox",
     onDrop: onDrop
-  }, function (_ref) {
-    var getRootProps = _ref.getRootProps,
-      getInputProps = _ref.getInputProps;
+  }, _ref => {
+    let {
+      getRootProps,
+      getInputProps
+    } = _ref;
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getRootProps(), {
       className: (0, _classnames.default)(classes.baseDD)
     }), /*#__PURE__*/_react.default.createElement("input", getInputProps()), content(classes, desc));
   });
 };
-var compareList = function compareList(classes, jcampSt, rmOthersOneAct, toggleShowAct) {
-  var selectedIdx = jcampSt.selectedIdx,
-    jcamps = jcampSt.jcamps;
-  var selectedJcamp = jcamps[selectedIdx];
-  var others = selectedJcamp.others;
-  var rows = others.map(function (o, idx) {
-    return {
-      idx: idx,
-      title: o.spectra[0].title,
-      color: _format.default.compareColors(idx),
-      rmCb: function rmCb() {
-        return rmOthersOneAct(idx);
-      },
-      isShow: o.show,
-      toggleShowCb: function toggleShowCb() {
-        return toggleShowAct(idx);
-      }
-    };
-  });
+const compareList = (classes, jcampSt, rmOthersOneAct, toggleShowAct) => {
+  const {
+    selectedIdx,
+    jcamps
+  } = jcampSt;
+  const selectedJcamp = jcamps[selectedIdx];
+  const {
+    others
+  } = selectedJcamp;
+  const rows = others.map((o, idx) => ({
+    idx,
+    title: o.spectra[0].title,
+    color: _format.default.compareColors(idx),
+    rmCb: () => rmOthersOneAct(idx),
+    isShow: o.show,
+    toggleShowCb: () => toggleShowAct(idx)
+  }));
   return /*#__PURE__*/_react.default.createElement(_Table.default, {
     className: classes.table
-  }, /*#__PURE__*/_react.default.createElement(_TableBody.default, null, rows.map(function (row) {
-    return /*#__PURE__*/_react.default.createElement(_TableRow.default, {
-      key: row.idx,
-      className: classes.tRow,
-      hover: true
-    }, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      align: "right",
-      className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
-      style: {
-        backgroundColor: row.color
-      }
-    }, row.idx + 1), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      align: "right",
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt', row.isShow ? null : classes.tTxtHide)
-    }, row.title), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      align: "right",
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, row.isShow ? /*#__PURE__*/_react.default.createElement(_VisibilityOutlined.default, {
-      onClick: row.toggleShowCb,
-      className: classes.showBtn
-    }) : /*#__PURE__*/_react.default.createElement(_VisibilityOffOutlined.default, {
-      onClick: row.toggleShowCb,
-      className: classes.hideBtn
-    }), /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
-      onClick: row.rmCb,
-      className: classes.rmBtn
-    })));
-  })));
+  }, /*#__PURE__*/_react.default.createElement(_TableBody.default, null, rows.map(row => /*#__PURE__*/_react.default.createElement(_TableRow.default, {
+    key: row.idx,
+    className: classes.tRow,
+    hover: true
+  }, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+    align: "right",
+    className: (0, _classnames.default)(classes.tTxt, classes.square, 'txt-sv-panel-txt'),
+    style: {
+      backgroundColor: row.color
+    }
+  }, row.idx + 1), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+    align: "right",
+    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt', row.isShow ? null : classes.tTxtHide)
+  }, row.title), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+    align: "right",
+    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
+  }, row.isShow ? /*#__PURE__*/_react.default.createElement(_VisibilityOutlined.default, {
+    onClick: row.toggleShowCb,
+    className: classes.showBtn
+  }) : /*#__PURE__*/_react.default.createElement(_VisibilityOffOutlined.default, {
+    onClick: row.toggleShowCb,
+    className: classes.hideBtn
+  }), /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
+    onClick: row.rmCb,
+    className: classes.rmBtn
+  }))))));
 };
-var ComparePanel = function ComparePanel(_ref2) {
-  var classes = _ref2.classes,
-    expand = _ref2.expand,
-    onExapnd = _ref2.onExapnd,
-    jcampSt = _ref2.jcampSt,
-    rmOthersOneAct = _ref2.rmOthersOneAct,
-    toggleShowAct = _ref2.toggleShowAct;
-  return /*#__PURE__*/_react.default.createElement(_ExpansionPanel.default, {
+const ComparePanel = _ref2 => {
+  let {
+    classes,
+    expand,
+    onExapnd,
+    jcampSt,
+    rmOthersOneAct,
+    toggleShowAct
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
     TransitionProps: {
       unmountOnExit: true
     } // increase ExpansionPanel performance
-  }, /*#__PURE__*/_react.default.createElement(_ExpansionPanelSummary.default, {
+  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
     className: (0, _classnames.default)(classes.panelSummary)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -238,20 +235,15 @@ var ComparePanel = function ComparePanel(_ref2) {
     className: (0, _classnames.default)(classes.panelDetail)
   }, compareList(classes, jcampSt, rmOthersOneAct, toggleShowAct)));
 };
-var mapStateToProps = function mapStateToProps(state, props) {
-  return (
-    // eslint-disable-line
-    {
-      jcampSt: state.jcamp
-    }
-  );
-};
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return (0, _redux.bindActionCreators)({
-    rmOthersOneAct: _jcamp.rmOthersOne,
-    toggleShowAct: _jcamp.toggleShow
-  }, dispatch);
-};
+const mapStateToProps = (state, props) => (
+// eslint-disable-line
+{
+  jcampSt: state.jcamp
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  rmOthersOneAct: _jcamp.rmOthersOne,
+  toggleShowAct: _jcamp.toggleShow
+}, dispatch);
 ComparePanel.propTypes = {
   classes: _propTypes.default.object.isRequired,
   expand: _propTypes.default.bool.isRequired,
@@ -260,5 +252,4 @@ ComparePanel.propTypes = {
   rmOthersOneAct: _propTypes.default.func.isRequired,
   toggleShowAct: _propTypes.default.func.isRequired
 };
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(ComparePanel));
-exports.default = _default;
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(ComparePanel));