Update module to use react-select

.editorconfig

@@ -10,8 +10,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[{*.yml,package.json}]
+[{*.yml,package.json,*.js,*.scss}]
 indent_size = 2
+indent_style = space
 
 # The indent size used in the package.json file cannot be changed:
 # https://github.com/npm/npm/pull/3180#issuecomment-16336516

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.eslintrc');

.travis.yml

@@ -5,6 +5,7 @@ dist: trusty
 env:
   global:
     - COMPOSER_ROOT_VERSION=2.0.x-dev
+    - TRAVIS_NODE_VERSION="6"
 
 matrix:
   include:
@@ -14,6 +15,8 @@ matrix:
       env: DB=PGSQL PHPUNIT_TEST=1
     - php: 7.1
       env: DB=MYSQL PHPUNIT_COVERAGE_TEST=1
+    - php: 7.1
+      env: DB=MYSQL NPM_TEST=1
 
 before_script:
   - phpenv rehash
@@ -24,10 +27,17 @@ before_script:
   - if [[ $DB == PGSQL ]]; then composer require --prefer-dist --no-update silverstripe/postgresql:2.0.x-dev; fi
   - composer install --prefer-dist --no-interaction --no-progress --no-suggest --optimize-autoloader --verbose --profile
 
+  # Install NPM dependencies
+  - if [[ $NPM_TEST ]]; then nvm install $TRAVIS_NODE_VERSION && nvm use $TRAVIS_NODE_VERSION && npm install -g yarn && yarn install --network-concurrency 1 && (cd vendor/silverstripe/admin && yarn install --network-concurrency 1) && yarn run build; fi
+
 script:
   - if [[ $PHPUNIT_TEST ]]; then vendor/bin/phpunit; fi
   - if [[ $PHPUNIT_COVERAGE_TEST ]]; then phpdbg -qrr vendor/bin/phpunit --coverage-clover=coverage.xml; fi
   - if [[ $PHPCS_TEST ]]; then vendor/bin/phpcs --standard=vendor/silverstripe/framework/phpcs.xml.dist src/ tests/; fi
+  - if [[ $NPM_TEST ]]; then git diff-files --quiet -w --relative=client; fi
+  - if [[ $NPM_TEST ]]; then git diff --name-status --relative=client; fi
+  - if [[ $NPM_TEST ]]; then yarn run test; fi
+  - if [[ $NPM_TEST ]]; then yarn run lint; fi
 
 after_success:
   - if [[ $PHPUNIT_COVERAGE_TEST ]]; then bash <(curl -s https://codecov.io/bash) -f coverage.xml; fi

client/src/bundles/bundle.js

@@ -0,0 +1 @@
+require('legacy/entwine/TagField.js');

client/src/components/TagField.js

@@ -0,0 +1,107 @@
+import React, { Component, PropTypes } from 'react';
+import Select from 'react-select';
+import fetch from 'isomorphic-fetch';
+import url from 'url';
+
+class TagField extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.getOptions = this.getOptions.bind(this);
+  }
+
+  onChange(value) {
+    this.setState({
+      value
+    });
+
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(value);
+    }
+  }
+
+  getOptions(input) {
+    const { lazyLoad, options, optionUrl, labelKey, valueKey } = this.props;
+
+    if (!lazyLoad) {
+      return Promise.resolve({ options });
+    }
+
+    if (!input) {
+      return Promise.resolve({ options: [] });
+    }
+
+    const fetchURL = url.parse(optionUrl, true);
+    fetchURL.query.term = input;
+
+    return fetch(url.format(fetchURL), { credentials: 'same-origin' })
+      .then((response) => response.json())
+      .then((json) => ({
+        options: json.items.map(item => ({
+          [labelKey]: item.id,
+          [valueKey]: item.text,
+        }))
+      }));
+  }
+
+  render() {
+    const {
+      lazyLoad,
+      options,
+      creatable,
+      ...passThroughAttributes
+    } = this.props;
+
+    const optionAttributes = lazyLoad
+      ? { loadOptions: this.getOptions }
+      : { options };
+
+    let SelectComponent = Select;
+    if (lazyLoad && creatable) {
+      SelectComponent = Select.AsyncCreatable;
+    } else if (lazyLoad) {
+      SelectComponent = Select.Async;
+    } else if (creatable) {
+      SelectComponent = Select.Creatable;
+    }
+
+    passThroughAttributes.value = this.state.value;
+
+    return (
+      <SelectComponent
+        {...passThroughAttributes}
+        onChange={this.onChange}
+        inputProps={{ className: 'no-change-track' }}
+        {...optionAttributes}
+      />
+    );
+  }
+}
+
+TagField.propTypes = {
+  name: PropTypes.string.isRequired,
+  labelKey: PropTypes.string.isRequired,
+  valueKey: PropTypes.string.isRequired,
+  lazyLoad: PropTypes.bool.isRequired,
+  creatable: PropTypes.bool.isRequired,
+  multi: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.object),
+  optionUrl: PropTypes.string,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
+TagField.defaultProps = {
+  labelKey: 'Title',
+  valueKey: 'Value',
+  disabled: false
+};
+
+export default TagField;

client/src/components/TagField.scss

@@ -0,0 +1,5 @@
+@import "~react-select/dist/react-select.css";
+
+.ss-tag-field .Select--multi .Select-value {
+  margin-top: 3px;
+}

client/src/components/tests/TagField-test.js

@@ -0,0 +1,81 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* global jest, describe, beforeEach, it, expect, setTimeout, document */
+
+jest.mock('isomorphic-fetch');
+
+import React from 'react';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15.4';
+import TagField from '../TagField';
+import Select from 'react-select';
+import fetch from 'isomorphic-fetch';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('TagField', () => {
+  let props;
+
+  beforeEach(() => {
+    props = {
+      name: 'Test',
+      labelKey: 'label',
+      valueKey: 'value',
+      lazyLoad: false,
+      creatable: false,
+      multi: true,
+    };
+  });
+
+  describe('should render a Select component with type', () => {
+    it('Select', () => {
+      const wrapper = shallow(
+        <TagField {...props} />
+      );
+      expect(wrapper.find(Select).length).toBe(1);
+    });
+    it('Select.Creatable with creatable option', () => {
+      props.creatable = true;
+      const wrapper = shallow(
+        <TagField {...props} />
+      );
+      expect(wrapper.find(Select.Creatable).length).toBe(1);
+    });
+    it('Select.Async with lazyLoad option', () => {
+      props.lazyLoad = true;
+      const wrapper = shallow(
+        <TagField {...props} />
+      );
+      expect(wrapper.find(Select.Async).length).toBe(1);
+    });
+    it('Select.AsyncCreatable with both creatable and lazyLoad options', () => {
+      props.creatable = true;
+      props.lazyLoad = true;
+      const wrapper = shallow(
+        <TagField {...props} />
+      );
+      expect(wrapper.find(Select.AsyncCreatable).length).toBe(1);
+    });
+  });
+
+  describe('with lazyLoad on and given a URL', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      props.lazyLoad = true;
+      props.optionUrl = 'localhost/some-fetch-url';
+
+      wrapper = shallow(
+        <TagField {...props} />
+      );
+
+      fetch.mockImplementation(() => Promise.resolve({
+        json: () => ({}),
+      }));
+    });
+
+    it('should fetch the URL for results', () => {
+      wrapper.instance().getOptions('a');
+      expect(fetch).toBeCalledWith('localhost/some-fetch-url?term=a', expect.anything());
+    });
+  });
+});

client/src/legacy/entwine/TagField.js

@@ -0,0 +1,28 @@
+/* global window */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TagField from 'components/TagField';
+
+window.jQuery.entwine('ss', ($) => {
+  $('.js-injector-boot .ss-tag-field').entwine({
+    onmatch() {
+      const dataSchema = {
+        ...this.data('schema'),
+        onBlur: () => {
+          this.parents('.cms-edit-form:first').trigger('change');
+        }
+      };
+
+      ReactDOM.render(
+        <TagField
+          {...dataSchema}
+        />,
+        this[0]
+      );
+    },
+
+    onunmatch() {
+      ReactDOM.unmountComponentAtNode(this[0]);
+    }
+  });
+});

client/src/styles/bundle.scss

@@ -0,0 +1,5 @@
+// Import core variables
+@import "variables";
+
+// Components
+@import '../components/TagField';

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "silverstripe/tagfield",
-    "description": "Tag field for Silverstripe",
+    "description": "Tag field for SilverStripe",
     "license": "BSD-3-Clause",
     "type": "silverstripe-vendormodule",
     "keywords": [
@@ -37,8 +37,7 @@
             "dev-master": "2.x-dev"
         },
         "expose": [
-            "css",
-            "js"
+            "client/dist"
         ]
     },
     "minimum-stability": "dev",

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "silverstripe-tagfield",
+  "version": "2.2.0",
+  "description": "Tag field for SilverStripe",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/silverstripe/silverstripe-tagfield.git"
+  },
+  "homepage": "https://github.com/silverstripe/silverstripe-tagfield",
+  "bugs": {
+    "url": "https://github.com/silverstripe/silverstripe-tagfield/issues"
+  },
+  "author": "SilverStripe Ltd.",
+  "engines": {
+    "node": ">=6.x"
+  },
+  "scripts": {
+    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "dev": "NODE_ENV=development webpack --progress",
+    "watch": "NODE_ENV=development webpack --watch --progress",
+    "css": "WEBPACK_CHILD=css npm run build",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "lock": "npm-shrinkwrap --dev",
+    "lint": "eslint client/src && sass-lint client/src",
+    "lint-js": "eslint client/src",
+    "lint-js-fix": "eslint client/src --fix",
+    "lint-sass": "sass-lint client/src"
+  },
+  "jest": {
+    "roots": [
+      "client/src"
+    ],
+    "modulePaths": [
+      "client/src",
+      "../admin/client/src",
+      "../admin/node_modules",
+      "vendor/silverstripe/admin/client/src",
+      "vendor/silverstripe/admin/node_modules"
+    ],
+    "testMatch": [
+      "**/tests/**/*-test.js?(x)"
+    ],
+    "transform": {
+      ".*": "babel-jest"
+    }
+  },
+  "babel": {
+    "presets": [
+      "env",
+      "react"
+    ],
+    "plugins": [
+      "transform-object-rest-spread"
+    ]
+  },
+  "devDependencies": {
+    "@silverstripe/eslint-config": "^0.0.4",
+    "@silverstripe/webpack-config": "^0.8.0",
+    "@storybook/addon-actions": "^3.2.19",
+    "@storybook/addon-options": "^3.2.19",
+    "@storybook/react": "^3.2.19",
+    "babel-jest": "^20.0.3",
+    "copy-webpack-plugin": "^4.2.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-15.4": "^1.0.5",
+    "html-loader": "^0.5.1",
+    "jest-cli": "^19.0.2",
+    "webpack": "^2"
+  },
+  "dependencies": {
+    "babel-polyfill": "6.7.4",
+    "classnames": "^2.2.5",
+    "isomorphic-fetch": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+    "jquery": "^3.1.1",
+    "react": "15.3.1",
+    "react-dom": "15.3.1",
+    "react-select": "^1.0.0-rc.5",
+    "url": "^0.11.0"
+  }
+}