From 44556cda5aff02ed92ddd22d81eb9c1b312ef478 Mon Sep 17 00:00:00 2001 From: Beate Quednau Date: Thu, 17 Oct 2024 13:59:49 +0200 Subject: [PATCH] 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 (91417f6b2b) --- .../stylesheets/components/QuillEditor.css | 5 +++ .../package-mods/react-select.scss | 10 ++++- app/packs/src/components/common/Select.js | 31 +++++++------- .../components/common/SpectraEditorButton.js | 6 +-- .../container/ContainerDatasetField.js | 42 +++++++++---------- .../components/reactQuill/ToolbarDropdown.js | 21 +--------- .../ToolbarTemplateCreator.js | 11 +++-- 7 files changed, 60 insertions(+), 66 deletions(-) diff --git a/app/assets/stylesheets/components/QuillEditor.css b/app/assets/stylesheets/components/QuillEditor.css index ffa480625d..88bd452a3c 100644 --- 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 index 64ece59be0..f7ab72b564 100644 --- 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 index 9a1cb46d18..1f8ac45be5 100644 --- 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}) => ( - -); +export const Select = forwardRef(function Select(props, ref) { + return ( + + ); +}); -export const AsyncSelect = ({className, ...props}) => ( +export const AsyncSelect = ({ className, ...props }) => ( ( /> ); -export const CreatableSelect = ({className, ...props}) => ( +export const CreatableSelect = ({ className, ...props }) => ( - ); + return ( + + ); } render() { @@ -51,16 +51,16 @@ class ContainerDatasetField extends Component { } const gdsDownload = (datasetContainer.dataset == null || typeof datasetContainer.dataset === 'undefined') ? () : ( - download metadata}> - - - ); + download metadata}> + + + ); return connectDropTarget(
{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 index 0f748fb9ac..2e666f32c6 100644 --- 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 ( diff --git a/app/packs/src/components/textTemplateToolbar/ToolbarTemplateCreator.js b/app/packs/src/components/textTemplateToolbar/ToolbarTemplateCreator.js index 5a5c033fc3..bd9f8b0007 100644 --- 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 ( - <> +
@@ -188,7 +187,7 @@ export default class ToolbarTemplateCreator extends React.Component {
- +
); }); @@ -219,8 +218,8 @@ export default class ToolbarTemplateCreator extends React.Component { defaultValue="Toolbar" />