decap-cms-widget-relation/src/RelationControl.js

Widget for linking related entries in Decap CMS.

import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { components } from 'react-select';
import AsyncSelect from 'react-select/async';
import { debounce, find, get, isEmpty, last, uniqBy } from 'lodash';
import { fromJS, List, Map } from 'immutable';
import { reactSelectStyles } from 'decap-cms-ui-default';
import { stringTemplate, validations } from 'decap-cms-lib-widgets';
import { FixedSizeList } from 'react-window';
import {
  DndContext,
  MouseSensor,
  TouchSensor,
  closestCenter,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import { SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
import { restrictToParentElement } from '@dnd-kit/modifiers';
import { CSS } from '@dnd-kit/utilities';
import { v4 as uuid } from 'uuid';

function arrayMove(array, from, to) {
  const slicedArray = array.slice();
  slicedArray.splice(to < 0 ? array.length + to : to, 0, slicedArray.splice(from, 1)[0]);
  return slicedArray;
}

function MultiValue(props) {
  const { setNodeRef, transform, transition } = useSortable({
    id: props.data.data.id,
  });

  function onMouseDown(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const innerProps = { ...props.innerProps, onMouseDown };
  return (
    <div ref={setNodeRef} style={style}>
      <components.MultiValue {...props} innerProps={innerProps} />
    </div>
  );
}

function MultiValueLabel(props) {
  const { attributes, listeners } = useSortable({
    id: props.data.data.id,
  });

  return (
    <div {...attributes} {...listeners}>
      <components.MultiValueLabel {...props} />
    </div>
  );
}

function SortableSelect(props) {
  const { distance, value, onSortEnd, isMulti } = props;

  if (!isMulti) {
    return <AsyncSelect {...props} />;
  }

  const keys = Array.isArray(value) ? value.map(({ data }) => data.id) : [];

  const activationConstraint = { distance };
  const sensors = useSensors(
    useSensor(MouseSensor, { activationConstraint }),
    useSensor(TouchSensor, { activationConstraint }),
  );

  function handleSortEnd({ active, over }) {
    onSortEnd({
      oldIndex: keys.indexOf(active.id),
      newIndex: keys.indexOf(over.id),
    });
  }

  return (
    <DndContext
      modifiers={[restrictToParentElement]}
      collisionDetection={closestCenter}
      sensors={sensors}
      onDragEnd={handleSortEnd}
    >
      <SortableContext items={keys} strategy={horizontalListSortingStrategy}>
        <AsyncSelect {...props} />
      </SortableContext>
    </DndContext>
  );
}

function Option({ index, style, data }) {
  return <div style={style}>{data.options[index]}</div>;
}

function MenuList(props) {
  if (props.isLoading || props.options.length <= 0 || !Array.isArray(props.children)) {
    return props.children;
  }
  const rows = props.children;
  const itemSize = 30;
  return (
    <FixedSizeList
      style={{ width: '100%' }}
      width={300}
      height={Math.min(300, rows.length * itemSize + itemSize / 3)}
      itemCount={rows.length}
      itemSize={itemSize}
      itemData={{ options: rows }}
    >
      {Option}
    </FixedSizeList>
  );
}

function optionToString(option) {
  return option && option.value ? option.value : '';
}

function convertToOption(raw) {
  if (typeof raw === 'string') {
    return { label: raw, value: raw };
  }
  return Map.isMap(raw) ? raw.toJS() : raw;
}

function getSelectedOptions(value) {
  const selectedOptions = List.isList(value) ? value.toJS() : value;

  if (!selectedOptions || !Array.isArray(selectedOptions)) {
    return null;
  }

  return selectedOptions;
}

function uniqOptions(initial, current) {
  return uniqBy(initial.concat(current), o => o.value);
}

function getFieldArray(field) {
  if (!field) {
    return [];
  }

  return List.isList(field) ? field.toJS() : [field];
}

function getSelectedValue({ value, options, isMultiple }) {
  if (isMultiple) {
    const selectedOptions = getSelectedOptions(value);
    if (selectedOptions === null) {
      return null;
    }

    const selected = selectedOptions
      .map(i => options.find(o => o.value === (i.value || i)))
      .filter(Boolean)
      .map(convertToSortableOption);
    return selected;
  } else {
    return find(options, ['value', value]) || null;
  }
}

function convertToSortableOption(raw) {
  const option = convertToOption(raw);
  return {
    ...option,
    data: {
      ...option.data,
      id: uuid(),
    },
  };
}

export default class RelationControl extends React.Component {
  mounted = false;

  state = {
    initialOptions: [],
  };

  static propTypes = {
    onChange: PropTypes.func.isRequired,
    forID: PropTypes.string.isRequired,
    value: PropTypes.node,
    field: ImmutablePropTypes.map,
    query: PropTypes.func.isRequired,
    queryHits: PropTypes.array,
    classNameWrapper: PropTypes.string.isRequired,
    setActiveStyle: PropTypes.func.isRequired,
    setInactiveStyle: PropTypes.func.isRequired,
    locale: PropTypes.string,
  };

  isValid = () => {
    const { field, value, t } = this.props;
    const min = field.get('min');
    const max = field.get('max');

    if (!this.isMultiple()) {
      return { error: false };
    }

    const error = validations.validateMinMax(
      t,
      field.get('label', field.get('name')),
      value,
      min,
      max,
    );

    return error ? { error } : { error: false };
  };

  shouldComponentUpdate(nextProps) {
    return (
      this.props.value !== nextProps.value ||
      this.props.hasActiveStyle !== nextProps.hasActiveStyle ||
      this.props.queryHits !== nextProps.queryHits
    );
  }

  async componentDidMount() {
    this.mounted = true;
    // if the field has a previous value perform an initial search based on the value field
    // this is required since each search is limited by optionsLength so the selected value
    // might not show up on the search
    const { forID, field, value, query, onChange } = this.props;
    const collection = field.get('collection');
    const file = field.get('file');
    const initialSearchValues = value && (this.isMultiple() ? getSelectedOptions(value) : [value]);
    if (initialSearchValues && initialSearchValues.length > 0) {
      const metadata = {};
      const searchFieldsArray = getFieldArray(field.get('search_fields'));
      const { payload } = await query(forID, collection, searchFieldsArray, '', file);
      const hits = payload.hits || [];
      const options = this.parseHitOptions(hits);
      const initialOptions = initialSearchValues
        .map(v => {
          const selectedOption = options.find(o => o.value === v);
          metadata[v] = selectedOption?.data;
          return selectedOption;
        })
        .filter(Boolean);
      const filteredValue = initialOptions.map(option => option.value);

      this.mounted && this.setState({ initialOptions });

      //set metadata
      this.mounted &&
        onChange(
          filteredValue.length === 1 && !this.isMultiple()
            ? filteredValue[0]
            : fromJS(filteredValue),
          {
            [field.get('name')]: {
              [field.get('collection')]: metadata,
            },
          },
        );
    }
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  onSortEnd =
    options =>
    ({ oldIndex, newIndex }) => {
      const { onChange, field } = this.props;
      const value = options.map(optionToString);
      const newValue = arrayMove(value, oldIndex, newIndex);
      const metadata =
        (!isEmpty(options) && {
          [field.get('name')]: {
            [field.get('collection')]: {
              [last(newValue)]: last(options).data,
            },
          },
        }) ||
        {};
      onChange(fromJS(newValue), metadata);
    };

  handleChange = selectedOption => {
    const { onChange, field } = this.props;

    if (this.isMultiple()) {
      const options = selectedOption;
      this.setState({ initialOptions: options.filter(Boolean) });
      const value = options.map(optionToString);
      const metadata =
        (!isEmpty(options) && {
          [field.get('name')]: {
            [field.get('collection')]: {
              [last(value)]: last(options).data,
            },
          },
        }) ||
        {};
      onChange(fromJS(value), metadata);
    } else {
      this.setState({ initialOptions: [selectedOption].filter(Boolean) });
      const value = optionToString(selectedOption);
      const metadata = selectedOption && {
        [field.get('name')]: {
          [field.get('collection')]: { [value]: selectedOption.data },
        },
      };
      onChange(value, metadata);
    }
  };

  parseNestedFields = (hit, field) => {
    const { locale } = this.props;
    const hitData =
      locale != null && hit.i18n != null && hit.i18n[locale] != null
        ? hit.i18n[locale].data
        : hit.data;
    const templateVars = stringTemplate.extractTemplateVars(field);
    // return non template fields as is
    if (templateVars.length <= 0) {
      return get(hitData, field);
    }
    const data = stringTemplate.addFileTemplateFields(hit.path, fromJS(hitData));
    const value = stringTemplate.compileStringTemplate(field, null, hit.slug, data);
    return value;
  };

  isMultiple() {
    return this.props.field.get('multiple', false);
  }

  parseHitOptions = hits => {
    const { field } = this.props;
    const valueField = field.get('value_field');
    const displayField = field.get('display_fields') || List([field.get('value_field')]);
    const filters = getFieldArray(field.get('filters'));

    const options = hits.reduce((acc, hit) => {
      if (
        filters.every(filter => {
          // check if the value for the (nested) filter field is in the filter values
          const fieldKeys = filter.field.split('.');
          let value = hit.data;
          for (let i = 0; i < fieldKeys.length; i++) {
            if (Object.prototype.hasOwnProperty.call(value, fieldKeys[i])) {
              value = value[fieldKeys[i]];
            } else {
              return false;
            }
          }
          return filter.values.includes(value);
        })
      ) {
        const valuesPaths = stringTemplate.expandPath({ data: hit.data, path: valueField });
        for (let i = 0; i < valuesPaths.length; i++) {
          const label = displayField
            .toJS()
            .map(key => {
              const displayPaths = stringTemplate.expandPath({ data: hit.data, path: key });
              return this.parseNestedFields(hit, displayPaths[i] || displayPaths[0]);
            })
            .join(' ');
          const value = this.parseNestedFields(hit, valuesPaths[i]);
          acc.push({ data: hit.data, value, label });
        }
      }

      return acc;
    }, []);

    return options;
  };

  loadOptions = debounce((term, callback) => {
    const { field, query, forID } = this.props;
    const collection = field.get('collection');
    const optionsLength = field.get('options_length') || 20;
    const searchFieldsArray = getFieldArray(field.get('search_fields'));
    const file = field.get('file');

    query(forID, collection, searchFieldsArray, term, file).then(({ payload }) => {
      const hits = payload.hits || [];
      const options = this.parseHitOptions(hits);
      const uniq = uniqOptions(this.state.initialOptions, options).slice(0, optionsLength);
      callback(uniq);
    });
  }, 500);

  render() {
    const { value, field, forID, classNameWrapper, setActiveStyle, setInactiveStyle, queryHits } =
      this.props;
    const isMultiple = this.isMultiple();
    const isClearable = !field.get('required', true) || isMultiple;

    const queryOptions = this.parseHitOptions(queryHits);
    const options = uniqOptions(this.state.initialOptions, queryOptions);
    const selectedValue = getSelectedValue({
      options,
      value,
      isMultiple,
    });

    return (
      <SortableSelect
        useDragHandle
        onSortEnd={this.onSortEnd(selectedValue)}
        distance={4}
        // react-select props:
        components={{ MenuList, MultiValue, MultiValueLabel }}
        value={selectedValue}
        inputId={forID}
        cacheOptions
        defaultOptions
        loadOptions={this.loadOptions}
        onChange={this.handleChange}
        className={classNameWrapper}
        onFocus={setActiveStyle}
        onBlur={setInactiveStyle}
        styles={reactSelectStyles}
        isMulti={isMultiple}
        isClearable={isClearable}
        placeholder=""
      />
    );
  }
}