Use react-select from separate chunk

eea · Oct 22, 2020 · a8356a3 · a8356a3
1 parent e2ca18a
commit a8356a3
Showing 1 changed file with 50 additions and 34 deletions.
diff --git a/src/Widgets/LayoutSelectWidget.jsx b/src/Widgets/LayoutSelectWidget.jsx
@@ -6,7 +6,9 @@
 import React, { Component } from 'react';
 import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
-import Select, { components } from 'react-select';
+
+import loadable from '@loadable/component';
+
 import { isEqual } from 'lodash';
 import { variants } from '../grid';
 import { FormFieldWrapper, Icon } from '@plone/volto/components';
@@ -17,6 +19,8 @@ import {
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 import checkSVG from '@plone/volto/icons/check.svg';
 
+const ReactSelectLib = loadable.lib(() => import('react-select'));
+
 const gridColsAreEqual = (gridCols1, gridCols2) => {
   return isEqual(gridCols1, gridCols2);
 };
@@ -27,21 +31,27 @@ const variantToGridCols = (v) => {
 
 export const Option = (props) => {
   return (
-    <components.Option {...props}>
-      <Icon
-        name={
-          variants.find((v) =>
-            gridColsAreEqual(variantToGridCols(v), props.value),
-          ).icon
-        }
-        size="24px"
-      />
-      <div>{props.label}</div>
-      {props.isFocused && !props.isSelected && (
-        <Icon name={checkSVG} size="24px" color="#b8c6c8" />
-      )}
-      {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
-    </components.Option>
+    <ReactSelectLib>
+      {({ components }) => {
+        return (
+          <components.Option {...props}>
+            <Icon
+              name={
+                variants.find((v) =>
+                  gridColsAreEqual(variantToGridCols(v), props.value),
+                ).icon
+              }
+              size="24px"
+            />
+            <div>{props.label}</div>
+            {props.isFocused && !props.isSelected && (
+              <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+            )}
+            {props.isSelected && <Icon name={checkSVG} size="24px" color="#007bc1" />}
+          </components.Option>
+        );
+      }}
+    </ReactSelectLib>
   );
 };
 
@@ -119,25 +129,31 @@ export class LayoutSelectWidget extends Component {
 
     return (
       <FormFieldWrapper {...this.props}>
-        <Select
-          id={`field-${id}`}
-          key={this.props.choices}
-          name={id}
-          value={this.state.selectedOption}
-          isDisabled={this.props.isDisabled}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          options={choices.map((x) => {
-            return { value: x[0], label: x[1] };
-          })}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{ DropdownIndicator, Option, SingleValue }}
-          onChange={(data) => {
-            this.setState({ selectedOption: data });
-            return onChange?.(id, data.value);
+        <ReactSelectLib>
+          {({ default: Select }) => {
+            return (
+              <Select
+                id={`field-${id}`}
+                key={this.props.choices}
+                name={id}
+                value={this.state.selectedOption}
+                isDisabled={this.props.isDisabled}
+                className="react-select-container"
+                classNamePrefix="react-select"
+                options={choices.map((x) => {
+                  return { value: x[0], label: x[1] };
+                })}
+                styles={customSelectStyles}
+                theme={selectTheme}
+                components={{ DropdownIndicator, Option, SingleValue }}
+                onChange={(data) => {
+                  this.setState({ selectedOption: data });
+                  return onChange?.(id, data.value);
+                }}
+              />
+            );
           }}
-        />
+        </ReactSelectLib>
       </FormFieldWrapper>
     );
   }