SelectStyling.jsx

import React from 'react';
import { Popup } from 'semantic-ui-react';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
import Icon from '@plone/volto/components/theme/Icon/Icon';
import DynamicHeightList from '@plone/volto/components/manage/ReactVirtualized/DynamicRowHeightList';

import downSVG from '@plone/volto/icons/down-key.svg';
import upSVG from '@plone/volto/icons/up-key.svg';
import checkSVG from '@plone/volto/icons/check.svg';
import checkBlankSVG from '@plone/volto/icons/check-blank.svg';
import clearSVG from '@plone/volto/icons/clear.svg';

export const MenuList = ({ children }) => {
  return <DynamicHeightList>{children}</DynamicHeightList>;
};

// 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();
};

export const SortableMultiValue = injectLazyLibs([
  'reactSelect',
  'dndKitSortable',
  'dndKitUtilities',
])((props) => {
  const { MultiValue } = props.reactSelect.components;
  const { useSortable } = props.dndKitSortable;
  const { CSS } = props.dndKitUtilities;
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({
      id: props.data.value,
    });

  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    <div
      ref={setNodeRef}
      style={{
        transform: CSS.Transform.toString(transform),
        transition,
      }}
      {...attributes}
      {...listeners}
      tabIndex={-1}
      aria-label={`${props.selectProps.fieldTitle || ''}: ${props.data.label}`}
      onKeyDown={(e) => {
        if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Enter') {
          e.preventDefault();
          props.removeProps?.onClick?.(e);
        }
      }}
    >
      <MultiValue
        {...props}
        innerProps={{ ...props.innerProps, onMouseDown }}
      />
    </div>
  );
});

export const SortableMultiValueLabel = injectLazyLibs(['reactSelect'])((
  props,
) => {
  const { MultiValueLabel } = props.reactSelect.components;
  return <MultiValueLabel {...props} />;
});

export const MultiValueContainer = injectLazyLibs('reactSelect')((props) => {
  const { MultiValueContainer } = props.reactSelect.components;
  return (
    <Popup
      content={props.data.label}
      trigger={
        <div ref={props.innerProps?.ref}>
          <MultiValueContainer {...props} />
        </div>
      }
    />
  );
});

export const MultiValueRemove = injectLazyLibs(['reactSelect'])((props) => {
  const { MultiValueRemove } = props.reactSelect.components;
  return (
    <MultiValueRemove
      {...props}
      innerProps={{
        ...props.innerProps,
        role: 'button',
        tabIndex: -1,
        onPointerDown: (e) => e.stopPropagation(),
      }}
    />
  );
});

export const Option = injectLazyLibs('reactSelect')((props) => {
  const { Option } = props.reactSelect.components;
  const color = props.isFocused && !props.isSelected ? '#b8c6c8' : '#007bc1';
  const svgIcon =
    props.isFocused || props.isSelected ? checkSVG : checkBlankSVG;

  return (
    <Option {...props}>
      <div>{props.label}</div>
      <Icon name={svgIcon} size="20px" color={color} />
    </Option>
  );
});

export const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
  const { DropdownIndicator } = props.reactSelect.components;
  return (
    <DropdownIndicator {...props}>
      {props.selectProps.menuIsOpen ? (
        <Icon name={upSVG} size="24px" color="#007bc1" />
      ) : (
        <Icon name={downSVG} size="24px" color="#007bc1" />
      )}
    </DropdownIndicator>
  );
});

export const ClearIndicator = injectLazyLibs('reactSelect')((props) => {
  const { ClearIndicator } = props.reactSelect.components;
  return (
    <ClearIndicator {...props}>
      <Icon name={clearSVG} size="18px" color="#e40166" />
    </ClearIndicator>
  );
});

export const Group = injectLazyLibs('reactSelect')((props) => {
  const { Group } = props.reactSelect.components;
  return <Group {...props}></Group>;
});

export const selectTheme = (theme) => ({
  ...theme,
  borderRadius: 0,
  colors: {
    ...theme.colors,
    primary25: 'hotpink',
    primary: '#b8c6c8',
  },
});

export const customSelectStyles = {
  control: (styles, state) => ({
    ...styles,
    border: 'none',
    borderBottom: '1px solid #c7d5d8',
    boxShadow: 'none',
    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
    minHeight: '60px',
  }),
  menu: (styles, state) => ({
    ...styles,
    top: null,
    marginTop: 0,
    boxShadow: 'none',
    borderBottom: '1px solid #c7d5d8',
    zIndex: 2,
  }),
  indicatorSeparator: (styles) => ({
    ...styles,
    width: null,
  }),
  valueContainer: (styles) => ({
    ...styles,
    paddingLeft: 0,
  }),
  dropdownIndicator: (styles) => ({
    paddingRight: 0,
  }),
  clearIndicator: (styles) => ({
    color: '#e40166',
  }),
  option: (styles, state) => ({
    ...styles,
    backgroundColor: null,
    minHeight: '50px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '12px 12px',
    color: state.isSelected
      ? '#007bc1'
      : state.isDisabled
        ? '#b5b5b5'
        : state.isFocused
          ? '#4a4a4a'
          : 'inherit',
    ':active': {
      backgroundColor: null,
    },
    svg: {
      flex: '0 0 auto',
    },
  }),
};