refactor: quill editor and other warnings (#2218)

* Remove insert and delete css, Add general css style * Fix required kind property * Remove pullRight, Add margin for icons * Fix warnings for refs at select and uniq keys * Fix ref of select for ToolbarTemplateCreator * Remove unecessary ddQuillId * Fix select value and select styles complements #1930 (91417f6)
ComPlat · Oct 17, 2024 · 44556cd · 44556cd
1 parent 6ca226b
commit 44556cd
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 66 deletions.
diff --git a/app/assets/stylesheets/components/QuillEditor.css b/app/assets/stylesheets/components/QuillEditor.css
@@ -456,6 +456,11 @@
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
   stroke: $primary;
 }
+.ql-snow .ql-picker .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: attr(data-label);
+  line-height: 25px;
+}
+
 .ql-snow {
   box-sizing: border-box;
 }

diff --git a/app/assets/stylesheets/global-styles/package-mods/react-select.scss b/app/assets/stylesheets/global-styles/package-mods/react-select.scss
@@ -81,6 +81,15 @@
     }
   }
 
+  &__value-container {
+    @extend .flex-nowrap;
+    @extend .text-nowrap;
+  }
+
+  &__value-container.chemotion-select__value-container--is-multi {
+    @extend .flex-wrap;
+    @extend .text-wrap;
+  }
 
   &__indicator, &__value-container, &__input-container, &__placeholder, &__single-value, &__indicator-separator {
     @extend .p-0;
@@ -149,5 +158,4 @@
   &__clear-indicator {
     @include fa-based-remove-icon;
   }
-
 }
diff --git a/app/packs/src/components/common/Select.js b/app/packs/src/components/common/Select.js
@@ -1,24 +1,27 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import RSelect from 'react-select';
 import RAsyncSelect from 'react-select/async';
 import RCreatableSelect from 'react-select/creatable';
 
 /* eslint-disable react/jsx-props-no-spreading */
 
- // deactivate the default styling and apply custom class names to enable bootstrap styling
- // see https://react-select.com/styles#the-unstyled-prop
- // see https://react-select.com/styles#the-classnameprefix-prop
+// deactivate the default styling and apply custom class names to enable bootstrap styling
+// see https://react-select.com/styles#the-unstyled-prop
+// see https://react-select.com/styles#the-classnameprefix-prop
 
-export const Select = ({className, ...props}) => (
-  <RSelect
-    className={["chemotion-select", className].join(' ')}
-    classNamePrefix="chemotion-select"
-    unstyled
-    {...props}
-  />
-);
+export const Select = forwardRef(function Select(props, ref) {
+  return (
+    <RSelect
+      className={["chemotion-select", props.className].join(' ')}
+      classNamePrefix="chemotion-select"
+      ref={ref}
+      unstyled
+      {...props}
+    />
+  );
+});
 
-export const AsyncSelect = ({className, ...props}) => (
+export const AsyncSelect = ({ className, ...props }) => (
   <RAsyncSelect
     className={["chemotion-select", className].join(' ')}
     classNamePrefix="chemotion-select"
@@ -27,7 +30,7 @@ export const AsyncSelect = ({className, ...props}) => (
   />
 );
 
-export const CreatableSelect = ({className, ...props}) => (
+export const CreatableSelect = ({ className, ...props }) => (
   <RCreatableSelect
     className={["chemotion-select", className].join(' ')}
     classNamePrefix="chemotion-select"

diff --git a/app/packs/src/components/common/SpectraEditorButton.js b/app/packs/src/components/common/SpectraEditorButton.js
@@ -27,7 +27,6 @@ export default function SpectraEditorButton({
             <Dropdown as={ButtonGroup}>
               <Button
                 id="spectra-editor-split-button"
-                pullRight
                 variant="info"
                 size="xxsm"
                 onToggle={(_, event) => { if (event) { event.stopPropagation(); } }}
@@ -47,7 +46,7 @@ export default function SpectraEditorButton({
                   }}
                   disabled={!hasJcamp || !element.can_update}
                 >
-                  <i className="fa fa-refresh" />
+                  <i className="fa fa-refresh me-1" />
                   Reprocess
                 </Dropdown.Item>
                 {hasEditedJcamp
@@ -60,7 +59,7 @@ export default function SpectraEditorButton({
                         confirmRegenerateEdited(event);
                       }}
                     >
-                      <i className="fa fa-refresh" />
+                      <i className="fa fa-refresh me-1" />
                       Regenerate .edit.jdx files
                     </Dropdown.Item>
                   )}
@@ -91,7 +90,6 @@ export default function SpectraEditorButton({
             <ButtonGroup>
               <Button
                 id="spectra-editor-split-button"
-                pullRight
                 variant="info"
                 size="xxsm"
                 onToggle={(_, event) => { if (event) { event.stopPropagation(); } }}

diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
@@ -16,16 +16,16 @@ class ContainerDatasetField extends Component {
     if (readOnly) {
       return null;
     }
-      return (
-        <Button
-          size="xxsm"
-          variant="danger"
-          onClick={() => handleRemove(datasetContainer)}
-          disabled={disabled}
-        >
-          <i className="fa fa-trash-o" />
-        </Button>
-      );
+    return (
+      <Button
+        size="xxsm"
+        variant="danger"
+        onClick={() => handleRemove(datasetContainer)}
+        disabled={disabled}
+      >
+        <i className="fa fa-trash-o" />
+      </Button>
+    );
   }
 
   render() {
@@ -51,16 +51,16 @@ class ContainerDatasetField extends Component {
     }
     const gdsDownload = (datasetContainer.dataset == null
       || typeof datasetContainer.dataset === 'undefined') ? (<span />) : (
-        <OverlayTrigger placement="top" overlay={<Tooltip id="download metadata">download metadata</Tooltip>}>
-          <Button
-            size="xxsm"
-            variant="success"
-            onClick={() => AttachmentFetcher.downloadDataset(datasetContainer.id)}
-          >
-            <i className="fa fa-download" />
-          </Button>
-        </OverlayTrigger>
-      );
+      <OverlayTrigger placement="top" overlay={<Tooltip id="download metadata">download metadata</Tooltip>}>
+        <Button
+          size="xxsm"
+          variant="success"
+          onClick={() => AttachmentFetcher.downloadDataset(datasetContainer.id)}
+        >
+          <i className="fa fa-download" />
+        </Button>
+      </OverlayTrigger>
+    );
     return connectDropTarget(
       <div className="d-flex justify-content-between">
         {datasetContainer.dataset && datasetContainer.dataset.klass_ols !== absOlsTermId(kind)
@@ -100,7 +100,7 @@ ContainerDatasetField.propTypes = {
     id: PropTypes.number,
   }).isRequired,
   handleUndo: PropTypes.func.isRequired,
-  kind: PropTypes.string.isRequired,
+  kind: PropTypes.string,
   handleModalOpen: PropTypes.func.isRequired,
 };
 

diff --git a/app/packs/src/components/reactQuill/ToolbarDropdown.js b/app/packs/src/components/reactQuill/ToolbarDropdown.js
@@ -19,9 +19,6 @@ export default class ToolbarDropdown extends React.Component {
     this.pickerSpan = React.createRef();
     this.pickerLabel = React.createRef();
 
-    const genId = Math.random().toString().substr(2, 10);
-    this.ddQuillId = `ql-dropdown-${genId}`;
-
     const sheets = document.styleSheets;
     this.sheet = sheets[sheets.length - 1];
 
@@ -30,14 +27,6 @@ export default class ToolbarDropdown extends React.Component {
   }
 
   componentDidMount() {
-    const cssRule = ".ql-snow .ql-picker." + this.ddQuillId + " .ql-picker-label::before, ." + this.ddQuillId + " .ql-picker.ql-size .ql-picker-item::before { content: attr(data-label); line-height: 25px; }";
-
-    try {
-      this.ruleId = this.sheet.insertRule(cssRule, this.sheet.cssRules.length);
-    } catch (err) {
-      console.log(err);
-    }
-
     const requiredWidth = this.getTextWidth() + 40;
     this.pickerLabel.current.style.width = `${requiredWidth}px`;
 
@@ -50,14 +39,6 @@ export default class ToolbarDropdown extends React.Component {
     });
   }
 
-  componentWillUnmount() {
-    try {
-      this.sheet.deleteRule(this.ruleId - 1);
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
   getTextWidth(font = "500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") {
     const canvas = this.canvas || (this.canvas = document.createElement('canvas'));
     const context = canvas.getContext('2d');
@@ -95,7 +76,7 @@ export default class ToolbarDropdown extends React.Component {
 
     const { expanded } = this.state;
     const expandedClass = expanded ? 'ql-expanded' : '';
-    const className = `${this.ddQuillId} ql-picker ${expandedClass}`;
+    const className = `ql-picker ${expandedClass}`;
 
     return (
       <span className="ql-formats">

diff --git a/app/packs/src/components/textTemplateToolbar/ToolbarTemplateCreator.js b/app/packs/src/components/textTemplateToolbar/ToolbarTemplateCreator.js
@@ -116,7 +116,7 @@ export default class ToolbarTemplateCreator extends React.Component {
     const { updateTextTemplates } = this.props;
     if (!updateTextTemplates) return;
 
-    const iconTemplates = this.toolbarSelectRef.current.state.value;
+    const iconTemplates = this.toolbarSelectRef.current.state.selectValue;
     const userTemplate = { _toolbar: iconTemplates.map(n => n.value) };
 
     const { dropdownTemplates } = this.state;
@@ -126,7 +126,7 @@ export default class ToolbarTemplateCreator extends React.Component {
       if (selectRefs.length === 0 || titleRefs.length === 0) return;
 
       const selectRef = selectRefs[0].ref;
-      const selectedValue = selectRef.current.state.value;
+      const selectedValue = selectRef.current.state.selectValue;
 
       const tempName = template.name;
       userTemplate[tempName] = selectedValue.map(v => v.value);
@@ -156,10 +156,9 @@ export default class ToolbarTemplateCreator extends React.Component {
       const removeDropdown = () => this.removeDropdownTemplate(template);
 
       return (
-        <>
+        <div key={`ttc_dd_${name}_${id}`}>
           <hr />
           <div
-            key={`ttc_dd_${name}_${id}`}
             className="d-flex gap-2 mt-2"
             style={{ maxWidth: '775px' }}
           >
@@ -188,7 +187,7 @@ export default class ToolbarTemplateCreator extends React.Component {
               <i className="fa fa-trash" />
             </Button>
           </div>
-        </>
+        </div>
       );
     });
 
@@ -219,8 +218,8 @@ export default class ToolbarTemplateCreator extends React.Component {
               defaultValue="Toolbar"
             />
             <Select
-              ref={this.toolbarSelectRef}
               className="me-5 col-10 f-5"
+              ref={this.toolbarSelectRef}
               defaultValue={iconSelected}
               options={options}
               isMulti