planning

node_modules/decap-cms-widget-select/src/SelectControl.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Map, List, fromJS } from 'immutable';
+import { find } from 'lodash';
+import Select from 'react-select';
+import { reactSelectStyles } from 'decap-cms-ui-default';
+import { validations } from 'decap-cms-lib-widgets';
+
+function optionToString(option) {
+  return option && (typeof option.value === 'number' || typeof option.value === 'string')
+    ? option.value
+    : null;
+}
+
+function convertToOption(raw) {
+  if (typeof raw === 'string') {
+    return { label: raw, value: raw };
+  }
+  return Map.isMap(raw) ? raw.toJS() : raw;
+}
+
+function getSelectedValue({ value, options, isMultiple }) {
+  if (isMultiple) {
+    const selectedOptions = List.isList(value) ? value.toJS() : value;
+
+    if (!selectedOptions || !Array.isArray(selectedOptions)) {
+      return null;
+    }
+
+    return selectedOptions
+      .map(i => options.find(o => o.value === (i.value || i)))
+      .filter(Boolean)
+      .map(convertToOption);
+  } else {
+    return find(options, ['value', value]) || null;
+  }
+}
+
+export default class SelectControl extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.node,
+    forID: PropTypes.string.isRequired,
+    classNameWrapper: PropTypes.string.isRequired,
+    setActiveStyle: PropTypes.func.isRequired,
+    setInactiveStyle: PropTypes.func.isRequired,
+    field: ImmutablePropTypes.contains({
+      options: ImmutablePropTypes.listOf(
+        PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number,
+          ImmutablePropTypes.contains({
+            label: PropTypes.string.isRequired,
+            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+          }),
+        ]),
+      ).isRequired,
+    }),
+  };
+
+  isValid = () => {
+    const { field, value, t } = this.props;
+    const min = field.get('min');
+    const max = field.get('max');
+
+    if (!field.get('multiple')) {
+      return { error: false };
+    }
+
+    const error = validations.validateMinMax(
+      t,
+      field.get('label', field.get('name')),
+      value,
+      min,
+      max,
+    );
+
+    return error ? { error } : { error: false };
+  };
+
+  handleChange = selectedOption => {
+    const { onChange, field } = this.props;
+    const isMultiple = field.get('multiple', false);
+    const isEmpty = isMultiple ? !selectedOption?.length : !selectedOption;
+
+    if (field.get('required') && isEmpty && isMultiple) {
+      onChange(List());
+    } else if (isEmpty) {
+      onChange(null);
+    } else if (isMultiple) {
+      const options = selectedOption.map(optionToString);
+      onChange(fromJS(options));
+    } else {
+      onChange(optionToString(selectedOption));
+    }
+  };
+
+  componentDidMount() {
+    const { field, onChange, value } = this.props;
+    if (field.get('required') && field.get('multiple')) {
+      if (value && !List.isList(value)) {
+        onChange(fromJS([value]));
+      } else if (!value) {
+        onChange(fromJS([]));
+      }
+    }
+  }
+
+  render() {
+    const { field, value, forID, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
+    const fieldOptions = field.get('options');
+    const isMultiple = field.get('multiple', false);
+    const isClearable = !field.get('required', true) || isMultiple;
+
+    const options = [...fieldOptions.map(convertToOption)];
+    const selectedValue = getSelectedValue({
+      options,
+      value,
+      isMultiple,
+    });
+
+    return (
+      <Select
+        inputId={forID}
+        value={selectedValue}
+        onChange={this.handleChange}
+        className={classNameWrapper}
+        onFocus={setActiveStyle}
+        onBlur={setInactiveStyle}
+        options={options}
+        styles={reactSelectStyles}
+        isMulti={isMultiple}
+        isClearable={isClearable}
+        placeholder=""
+      />
+    );
+  }
+}

node_modules/decap-cms-widget-select/src/SelectPreview.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { List } from 'immutable';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { WidgetPreviewContainer } from 'decap-cms-ui-default';
+
+function ListPreview({ values }) {
+  return (
+    <ul>
+      {values.map((value, idx) => (
+        <li key={idx}>{value}</li>
+      ))}
+    </ul>
+  );
+}
+
+function SelectPreview({ value }) {
+  return (
+    <WidgetPreviewContainer>
+      {value && (List.isList(value) ? <ListPreview values={value} /> : value)}
+      {!value && null}
+    </WidgetPreviewContainer>
+  );
+}
+
+SelectPreview.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, ImmutablePropTypes.list]),
+};
+
+export default SelectPreview;

node_modules/decap-cms-widget-select/src/__tests__/select.spec.js

@@ -0,0 +1,378 @@
+import React from 'react';
+import { fromJS, List } from 'immutable';
+import { render, fireEvent } from '@testing-library/react';
+
+import { DecapCmsWidgetSelect } from '../';
+
+const SelectControl = DecapCmsWidgetSelect.controlComponent;
+
+const options = [
+  { value: 'foo', label: 'Foo' },
+  { value: 'bar', label: 'Bar' },
+  { value: 'baz', label: 'Baz' },
+];
+const stringOptions = ['foo', 'bar', 'baz'];
+const numberOptions = [
+  { value: 0, label: 'Foo' },
+  { value: 1, label: 'Bar' },
+  { value: 2, label: 'Baz' },
+];
+
+class SelectController extends React.Component {
+  state = {
+    value: this.props.defaultValue,
+  };
+
+  handleOnChange = jest.fn(value => {
+    this.setState({ value });
+  });
+
+  componentDidUpdate() {
+    this.props.onStateChange(this.state);
+  }
+
+  render() {
+    return this.props.children({
+      value: this.state.value,
+      handleOnChange: this.handleOnChange,
+    });
+  }
+}
+
+function setup({ field, defaultValue }) {
+  let renderArgs, ref;
+  const stateChangeSpy = jest.fn();
+  const setActiveSpy = jest.fn();
+  const setInactiveSpy = jest.fn();
+
+  const helpers = render(
+    <SelectController defaultValue={defaultValue} onStateChange={stateChangeSpy}>
+      {({ value, handleOnChange }) => {
+        renderArgs = { value, onChangeSpy: handleOnChange };
+        return (
+          <SelectControl
+            field={field}
+            value={value}
+            onChange={handleOnChange}
+            forID="basic-select"
+            classNameWrapper=""
+            setActiveStyle={setActiveSpy}
+            setInactiveStyle={setInactiveSpy}
+            ref={widgetRef => (ref = widgetRef)}
+            t={msg => msg}
+          />
+        );
+      }}
+    </SelectController>,
+  );
+
+  const input = helpers.container.querySelector('input');
+
+  return {
+    ...helpers,
+    ...renderArgs,
+    stateChangeSpy,
+    setActiveSpy,
+    setInactiveSpy,
+    ref,
+    input,
+  };
+}
+
+function clickClearButton(container) {
+  const allSvgs = container.querySelectorAll('svg');
+  const clear = allSvgs[allSvgs.length - 2];
+
+  fireEvent.mouseDown(clear, {
+    button: 0,
+  });
+}
+
+describe('Select widget', () => {
+  it('should call onChange with correct selectedItem', () => {
+    const field = fromJS({ options });
+    const { getByText, input, onChangeSpy } = setup({ field });
+
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.click(getByText('Foo'));
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(options[0].value);
+  });
+
+  it('should call onChange with null when no item is selected', () => {
+    const field = fromJS({ options, required: false });
+    const { input, onChangeSpy } = setup({ field, defaultValue: options[0].value });
+
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'Delete' });
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(null);
+  });
+
+  it('should call onChange with null when selection is cleared', () => {
+    const field = fromJS({ options, required: false });
+    const { onChangeSpy, container } = setup({ field, defaultValue: options[0].value });
+
+    clickClearButton(container);
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(null);
+  });
+
+  it('should respect default value', () => {
+    const field = fromJS({ options });
+    const { getByText } = setup({ field, defaultValue: options[2].value });
+
+    expect(getByText('Baz')).toBeInTheDocument();
+  });
+
+  it('should respect default value when options are string only', () => {
+    const field = fromJS({ options: stringOptions });
+    const { getByText } = setup({
+      field,
+      defaultValue: stringOptions[2],
+    });
+
+    expect(getByText('baz')).toBeInTheDocument();
+  });
+
+  it('should call onChange with correct selectedItem when value is number 0', () => {
+    const field = fromJS({ options: numberOptions });
+    const { getByText, input, onChangeSpy } = setup({ field });
+
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.click(getByText('Foo'));
+
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenCalledWith(numberOptions[0].value);
+  });
+
+  describe('with multiple', () => {
+    it('should call onChange with correct selectedItem', () => {
+      const field = fromJS({ options, multiple: true });
+      const { getByText, input, onChangeSpy } = setup({ field });
+
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('Foo'));
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('Baz'));
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(2);
+      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[0].value]));
+      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[0].value, options[2].value]));
+    });
+
+    it('should call onChange with correct selectedItem when item is removed', () => {
+      const field = fromJS({ options, multiple: true });
+      const { container, onChangeSpy } = setup({
+        field,
+        defaultValue: fromJS([options[1].value, options[2].value]),
+      });
+
+      fireEvent.click(container.querySelector('svg'), { button: 0 });
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[2].value]));
+    });
+
+    it('should call onChange with empty list on mount when required is true', () => {
+      const field = fromJS({ options, multiple: true, required: true });
+      const { onChangeSpy } = setup({
+        field,
+      });
+      expect(onChangeSpy).toHaveBeenCalledWith(List());
+    });
+
+    it('should not call onChange with empty list on mount when required is false', () => {
+      const field = fromJS({ options, multiple: true });
+      const { onChangeSpy } = setup({
+        field,
+      });
+      expect(onChangeSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call onChange with empty list when no item is selected and required is true', () => {
+      const field = fromJS({ options, multiple: true });
+      const { input, onChangeSpy } = setup({
+        field,
+        defaultValue: fromJS([options[1].value]),
+      });
+
+      fireEvent.focus(input);
+      fireEvent.keyDown(input, { key: 'Delete' });
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+      expect(onChangeSpy).toHaveBeenCalledWith(null);
+    });
+
+    it('should call onChange with value in list on mount when value is not a list and required is true', () => {
+      const field = fromJS({ options, multiple: true, required: true });
+      const { onChangeSpy } = setup({
+        field,
+        defaultValue: options[1].value,
+      });
+      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([options[1].value]));
+    });
+
+    it('should call onChange with empty list when selection is cleared and required is true', () => {
+      const field = fromJS({ options, multiple: true, required: true });
+      const { container, onChangeSpy } = setup({
+        field,
+        defaultValue: fromJS([options[1].value]),
+      });
+
+      clickClearButton(container);
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+      expect(onChangeSpy).toHaveBeenCalledWith(List());
+    });
+
+    it('should call onChange with null when selection is cleared and required is false', () => {
+      const field = fromJS({ options, multiple: true, required: false });
+      const { container, onChangeSpy } = setup({
+        field,
+        defaultValue: fromJS([options[1].value]),
+      });
+
+      clickClearButton(container);
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+      expect(onChangeSpy).toHaveBeenCalledWith(null);
+    });
+
+    it('should respect default value', () => {
+      const field = fromJS({ options, multiple: true });
+      const { getByText } = setup({
+        field,
+        defaultValue: fromJS([options[1].value, options[2].value]),
+      });
+
+      expect(getByText('Bar')).toBeInTheDocument();
+      expect(getByText('Baz')).toBeInTheDocument();
+    });
+
+    it('should respect default value when options are string only', () => {
+      const field = fromJS({ options: stringOptions, multiple: true });
+      const { getByText } = setup({
+        field,
+        defaultValue: fromJS([stringOptions[1], stringOptions[2]]),
+      });
+
+      expect(getByText('bar')).toBeInTheDocument();
+      expect(getByText('baz')).toBeInTheDocument();
+    });
+
+    it('should call onChange with correct selectedItem when values are numbers including 0', () => {
+      const field = fromJS({ options: numberOptions, multiple: true });
+      const { getByText, input, onChangeSpy } = setup({ field });
+
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('Foo'));
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('Baz'));
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(2);
+      expect(onChangeSpy).toHaveBeenCalledWith(fromJS([numberOptions[0].value]));
+      expect(onChangeSpy).toHaveBeenCalledWith(
+        fromJS([numberOptions[0].value, numberOptions[2].value]),
+      );
+    });
+  });
+  describe('validation', () => {
+    function validate(setupOpts) {
+      const { ref } = setup(setupOpts);
+      const { error } = ref.isValid();
+      return error?.message;
+    }
+    it('should fail with less items than min allows', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 2 }),
+        defaultValue: fromJS([stringOptions[0]]),
+      };
+      expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeMin"`);
+    });
+    it('should fail with more items than max allows', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, max: 1 }),
+        defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
+      };
+      expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeMax"`);
+    });
+    it('should enforce min when both min and max are set', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 3 }),
+        defaultValue: fromJS([stringOptions[0]]),
+      };
+      expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeCount"`);
+    });
+    it('should enforce max when both min and max are set', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 1, max: 2 }),
+        defaultValue: fromJS([stringOptions[0], stringOptions[1], stringOptions[2]]),
+      };
+      expect(validate(opts)).toMatchInlineSnapshot(`"editor.editorControlPane.widget.rangeCount"`);
+    });
+    it('should enforce min and max when they are the same value', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 2 }),
+        defaultValue: fromJS([stringOptions[0], stringOptions[1], stringOptions[2]]),
+      };
+      expect(validate(opts)).toMatchInlineSnapshot(
+        `"editor.editorControlPane.widget.rangeCountExact"`,
+      );
+    });
+    it('should pass when min is met', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 1 }),
+        defaultValue: fromJS([stringOptions[0]]),
+      };
+      expect(validate(opts)).toBeUndefined();
+    });
+    it('should pass when max is met', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, max: 1 }),
+        defaultValue: fromJS([stringOptions[0]]),
+      };
+      expect(validate(opts)).toBeUndefined();
+    });
+    it('should pass when both min and max are met', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 3 }),
+        defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
+      };
+      expect(validate(opts)).toBeUndefined();
+    });
+    it('should pass when both min and max are met, and are the same value', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 2, max: 2 }),
+        defaultValue: fromJS([stringOptions[0], stringOptions[1]]),
+      };
+      expect(validate(opts)).toBeUndefined();
+    });
+    it('should not fail on min/max if multiple is not true', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, min: 2, max: 2 }),
+        defaultValue: fromJS([stringOptions[0]]),
+      };
+      expect(validate(opts)).toBeUndefined();
+    });
+    it('should not fail for empty field (should work for optional field)', () => {
+      const opts = {
+        field: fromJS({ options: stringOptions, multiple: true, min: 2 }),
+      };
+      const { ref, input, getByText, container } = setup(opts);
+      expect(ref.isValid().error?.message).toBeUndefined();
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.click(getByText('foo'));
+      expect(ref.isValid().error?.message).toMatchInlineSnapshot(
+        `"editor.editorControlPane.widget.rangeMin"`,
+      );
+      clickClearButton(container);
+      expect(ref.isValid().error?.message).toBeUndefined();
+    });
+  });
+});

node_modules/decap-cms-widget-select/src/index.js

@@ -0,0 +1,16 @@
+import controlComponent from './SelectControl';
+import previewComponent from './SelectPreview';
+import schema from './schema';
+
+function Widget(opts = {}) {
+  return {
+    name: 'select',
+    controlComponent,
+    previewComponent,
+    schema,
+    ...opts,
+  };
+}
+
+export const DecapCmsWidgetSelect = { Widget, controlComponent, previewComponent };
+export default DecapCmsWidgetSelect;

node_modules/decap-cms-widget-select/src/schema.js

@@ -0,0 +1,25 @@
+export default {
+  properties: {
+    multiple: { type: 'boolean' },
+    min: { type: 'integer' },
+    max: { type: 'integer' },
+    options: {
+      type: 'array',
+      items: {
+        oneOf: [
+          { type: 'string' },
+          { type: 'number' },
+          {
+            type: 'object',
+            properties: {
+              label: { type: 'string' },
+              value: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+            },
+            required: ['label', 'value'],
+          },
+        ],
+      },
+    },
+  },
+  required: ['options'],
+};