imbric-theme 0.9.0 → 1.0.0

package/molecules/DynamicSelect/DynamicSelect.js

@@ -1,9 +1,42 @@
+// import React from 'react'
 import React from 'react'
-import Select from 'react-select'
+// import Select from 'react-select'
 import PropTypes from 'prop-types'
 import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
+import Select, { components } from 'react-select'
+
+import {
+  SortableContainer,
+  SortableElement,
+  sortableHandle
+} from 'react-sortable-hoc'
+
+const SortableMultiValue = SortableElement((props) => {
+  // this prevents the menu from being opened/closed when the user clicks
+  // on a value to begin dragging it. ideally, detecting a click (instead of
+  // a drag) would still focus the control and toggle the menu, but that
+  // requires some magic with refs that are out of scope for this example
+  const onMouseDown = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  // const onMouseUp = (e) => {
+  //   e.target.remove()
+  // }
+
+  const innerProps = { ...props.innerProps, onMouseDown };
+  return <components.MultiValue {...props} innerProps={innerProps} />
+})
+
+const SortableMultiValueLabel = sortableHandle((props) => (
+  <components.MultiValueLabel {...props} innerProps={props.innerProps} />
+))
+
+const SortableSelect = SortableContainer(Select)
+
 
 export const DynamicSelect = ({
   getStyles,
@@ -24,6 +57,11 @@ export const DynamicSelect = ({
   closeMenuOnSelect,
   maxMenuHeight,
   instanceId,
+  sortableMultiSelect,
+  onSortEnd,
+  formatGroupLabel,
+  hideSelectedOptions,
+  menuPlacement
 }) => {
 
 
@@ -54,7 +92,7 @@ export const DynamicSelect = ({
       boxShadow: state.isFocused ? "0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)" : "none",
       "&:hover": {
         borderColor: "var(--color-primary)"
-      }
+      },
     }),
     input: (base) => ({
       ...base,
@@ -94,6 +132,21 @@ export const DynamicSelect = ({
       minWidth: "100%",
     }),
 
+    multiValue: (base) => ({
+      ...base,
+      color: "hsl(0deg 100% 50%)",
+      zIndex: "40",
+      // width: "max-content",
+      // minWidth: "100%",
+    }),
+
+    MultiValueGeneric: (base) => ({
+      ...base,
+      color: "hsl(0deg 100% 50%)",
+      // width: "max-content",
+      // minWidth: "100%",
+    }),
+
     // menu: styles => ({ ...styles,                 
     //   width: '500px'
     //  })  
@@ -105,41 +158,76 @@ export const DynamicSelect = ({
 
   }
 
-  // const handleChange = (value) => {
-  //   console.group('Value Changed');
-  //   console.log(value);
-  //   // console.log(`action: ${actionMeta.action}`);
-  //   console.groupEnd();
-  // };
 
   return (
 
     <div className={getStyles('dynamic-select', {
       'is-inline': isInline,
     })}>
-      <Select
-        name="basic"
-        // className="basic-single"
-        // classNamePrefix="select"
-        placeholder={placeholder}
-        styles={customStyles}
-        options={optionsSelect}
-        defaultValue={defaultValue}
-        value={value}
-        isMulti={isMulti}
-        isClearable={isClearable}
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        isRtl={isRtl}
-        isSearchable={isSearchable}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        closeMenuOnSelect={closeMenuOnSelect}
-        maxMenuHeight={maxMenuHeight}
-        autosize={true}
-        instanceId={instanceId}
-      />
+
+
+      {sortableMultiSelect ?
+        <SortableSelect
+          useDragHandle
+          // react-sortable-hoc props:
+          axis="xy"
+          onSortEnd={onSortEnd}
+          distance={4}
+          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          // react-select props:
+          styles={customStyles}
+          placeholder={placeholder}
+          isMulti={isMulti}
+          options={optionsSelect}
+          defaultValue={defaultValue}
+          value={value}
+          onChange={onChange}
+          components={{
+            MultiValue: SortableMultiValue,
+            MultiValueLabel: SortableMultiValueLabel
+          }}
+          isClearable={isClearable}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          closeMenuOnSelect={false}
+          autosize={true}
+          instanceId={instanceId}
+          menuPlacement={menuPlacement}
+          menuPosition='fixed'
+          formatGroupLabel={formatGroupLabel}
+          hideSelectedOptions={hideSelectedOptions}
+        />
+        :
+        <Select
+          name="basic"
+          // className="basic-single"
+          // classNamePrefix="select"
+          placeholder={placeholder}
+          styles={customStyles}
+          options={optionsSelect}
+          defaultValue={defaultValue}
+          value={value}
+          isMulti={isMulti}
+          isClearable={isClearable}
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          isRtl={isRtl}
+          isSearchable={isSearchable}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          closeMenuOnSelect={closeMenuOnSelect}
+          maxMenuHeight={maxMenuHeight}
+          autosize={true}
+          instanceId={instanceId}
+          menuPlacement={menuPlacement}
+          menuPosition='fixed'
+          formatGroupLabel={formatGroupLabel}
+          hideSelectedOptions={hideSelectedOptions}
+        />}
+
+
     </div>
 
   )
@@ -163,6 +251,9 @@ DynamicSelect.propTypes = {
   closeMenuOnSelect: PropTypes.bool,
   maxMenuHeight: PropTypes.number,
   instanceId: PropTypes.string,
+  sortableMultiSelect: PropTypes.bool,
+  hideSelectedOptions: PropTypes.bool,
+  menuPlacement: PropTypes.string,
 }
 
 DynamicSelect.defaultProps = {
@@ -180,7 +271,10 @@ DynamicSelect.defaultProps = {
   onBlur: () => { },
   closeMenuOnSelect: true,
   maxMenuHeight: 300,
-  instanceId: ''
+  instanceId: '',
+  sortableMultiSelect: false,
+  hideSelectedOptions: true,
+  menuPlacement: 'auto'
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/DynamicSelect/DynamicSelect.module.css

@@ -7,4 +7,4 @@
 
 .is-inline {
   max-width: max-content;
-}
+}