react-select-input-v2 1.0.7 → 1.0.8-react16

package/package.json

@@ -1,30 +1,29 @@
 {
   "name": "react-select-input-v2",
-  "version": "1.0.7",
-  "description": "react-select-input React component",
+  "version": "1.0.8-react16",
+  "description": "react-select-input React component (React 16 compatible)",
   "main": "lib/index.js",
   "module": "es/index.js",
   "files": [
     "css",
     "es",
     "lib",
-    "umd"
+    "umd",
+    "src"
   ],
   "scripts": {
     "build": "nwb build-react-component --copy-files",
     "clean": "nwb clean-module && nwb clean-demo",
     "start": "nwb serve-react-demo",
-    "test": "nwb test-react",
-    "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server",
-    "deploy": "gh-pages -d demo/dist"
+    "test": "nwb test-react"
   },
   "dependencies": {
     "prop-types": "^15.6.2",
     "react-autosize-textarea": "^0.4.8"
   },
   "peerDependencies": {
-    "react": "15.x"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
     "eslint": "^5.4.0",
@@ -32,38 +31,14 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.11.1",
-    "gh-pages": "^1.0.0",
-    "nwb": "0.18.x",
-    "prettier": "^1.14.2",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "babel-eslint": "^8.2.6"
+    "nwb": "^0.18.10",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
-  "author": "Samrith Shankar",
-  "homepage": "https://samrith-s.github.io/react-select-input",
+  "author": "Samrith Shankar (modified by you)",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/samrith-s/react-select-input.git"
-  },
-  "keywords": [
-    "react-component",
-    "input",
-    "select",
-    "input select combo",
-    "select dropdown",
-    "custom select",
-    "searchable",
-    "searchable select",
-    "free input",
-    "free select"
-  ],
-  "sideEffects": false,
-  "bugs": {
-    "url": "https://github.com/samrith-s/react-select-input/issues"
-  },
-  "directories": {
-    "lib": "lib",
-    "test": "tests"
+    "url": "local"
   }
 }

package/src/index.js

@@ -0,0 +1,270 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Textarea from 'react-autosize-textarea';
+
+function escapeRegExp(string) {
+  const reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+  const reHasRegExpChar = RegExp(reRegExpChar.source);
+  return string && reHasRegExpChar.test(string) ? string.replace(reRegExpChar, '\\$&') : string || '';
+}
+
+export default class SelectInput extends Component {
+  constructor() {
+    super();
+    this.state = {
+      isOpen: false,
+      value: null,
+      currentOption: -1,
+      selectedOption: null,
+      searchMatchOptions: []
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  componentDidUpdate() {
+    if (
+      this.props.openUp &&
+      this.state.currentOption === -1 &&
+      this.state.isOpen &&
+      !this.state.selectedOption
+    ) {
+      if (this.options) this.options.scrollTop = this.options.scrollHeight;
+    } else if (
+      this.props.openUp &&
+      this.state.selectedOption &&
+      this.state.isOpen
+    ) {
+      const ref = this['option-' + this.state.selectedOption];
+      if (ref && ref.scrollIntoViewIfNeeded) ref.scrollIntoViewIfNeeded(true);
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  // ======= 渲染选项 =======
+  renderOptions = options => {
+    return options && options.length > 0
+      ? options.map((option, index) => {
+          return (
+            <div
+              className={
+                'ris-option' +
+                (this.state.selectedOption === option[this.props.valueKey] ? ' selected' : '') +
+                (this.state.currentOption === index ? ' current' : '')
+              }
+              key={`${this.props.uniqueKey}-option-${index}`}
+              onClick={this.handleClick.bind(this, index)}
+              ref={ref => (this['option-' + option[this.props.valueKey]] = ref)}
+            >
+              {option[this.props.labelKey]}
+            </div>
+          );
+        })
+      : null;
+  };
+
+  // ======= 事件处理 =======
+  handleSelect = (option, index) => {
+    let state = this.manipState(this.state, 'value', option[this.props.labelKey]);
+    state = this.manipState(state, 'selectedOption', option[this.props.valueKey]);
+    state = this.manipState(state, 'currentOption', -1);
+    if (this.props.collapseOnSelect) state = this.setIsOpen(state, false);
+    state = this.manipState(state, 'searchMatchOptions', this.matchingOptions(this.props.options, state.value));
+    this.setState(state);
+    if (this.isFunction(this.props.onSelect)) this.props.onSelect(option);
+  };
+
+  handleClick = (index, event) => {
+    const option = this.pickOption(index);
+    this.handleSelect(option, index);
+  };
+
+  handleChange = event => {
+    let state = this.manipState(this.state, 'value', event.target.value);
+    state = this.manipState(state, 'searchMatchOptions', this.matchingOptions(this.props.options, event.target.value));
+    state = this.setIsOpen(state, true);
+    if (!state.value) {
+      state = this.manipState(state, 'currentOption', -1);
+      state = this.manipState(state, 'selectedOption', null);
+    }
+    if (this.isFunction(this.props.onChange)) this.props.onChange(event);
+    this.setState(state);
+  };
+
+  handleFocus = event => {
+    let state = this.setIsOpen(this.state, true);
+    state = this.manipState(state, 'searchMatchOptions', this.matchingOptions(this.props.options, event.target.value));
+    this.setState(state);
+    if (this.isFunction(this.props.onFocus)) this.props.onFocus(event);
+  };
+
+  handleClear = () => {
+    let value = '';
+    let state = this.manipState(this.state, 'value', value);
+    state = this.manipState(state, 'searchMatchOptions', this.matchingOptions(this.props.options, state.value));
+    state = this.manipState(state, 'currentOption', -1);
+    state = this.manipState(state, 'selectedOption', null);
+    this.setState(state);
+    if (this.isFunction(this.props.onClear)) this.props.onClear();
+  };
+
+  handleBlur = event => {
+    if (this.props.collapseOnBlur) {
+      this.setState(this.setIsOpen(this.state, false));
+    }
+    if (this.isFunction(this.props.onBlur)) this.props.onBlur(event);
+  };
+
+  handleKeyUp = event => {
+    if (event.key === 'Enter' && this.state.currentOption > -1) this.handleSelect(this.pickOption());
+    if (event.key === 'Escape' && this.props.collapseOnEscape) this.setState(this.setIsOpen(this.state, false));
+    if (this.isFunction(this.props.onKeyUp)) this.props.onKeyUp(event);
+  };
+
+  handleKeyDown = event => {
+    if (event.key === 'Enter' && this.props.disableEnter) event.preventDefault();
+    if (event.key === 'Escape' && this.props.collapseOnEscape) this.setState(this.setIsOpen(this.state, false));
+    if (this.isFunction(this.props.onKeyDown)) this.props.onKeyDown(event);
+    this.handleOptionNavigation(event);
+  };
+
+  handleOptionNavigation = event => {
+    let state = {};
+    let currentOption = this.state.currentOption;
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') event.preventDefault();
+
+    if (event.key === 'ArrowUp' && currentOption === -1 && this.props.openUp) currentOption = this.state.searchMatchOptions.length;
+
+    if (this.props.openUp) {
+      if (event.key === 'ArrowDown') currentOption = currentOption > -1 ? currentOption + 1 : -1;
+      else if (event.key === 'ArrowUp') currentOption--;
+    } else {
+      if (event.key === 'ArrowDown') currentOption++;
+      else if (event.key === 'ArrowUp') currentOption--;
+    }
+
+    if (currentOption < -1) currentOption = -1;
+    else if (currentOption > this.state.searchMatchOptions.length - 1) currentOption = this.state.searchMatchOptions.length - 1;
+
+    state = this.manipState(this.state, 'currentOption', currentOption);
+
+    const optionRef = currentOption > -1 ? this['option-' + this.state.searchMatchOptions[currentOption][this.props.valueKey]] : null;
+    if (optionRef) optionRef.scrollIntoViewIfNeeded(false);
+
+    this.setState(state);
+  };
+
+  matchingOptions = (options, value) => {
+    value = escapeRegExp(value);
+    let searchValue = value.replace(/\s/g, '');
+    let searchOptions = [];
+
+    if (options && options.length > 0 && value)
+      searchOptions = options.filter(option => {
+        let val = option[this.props.valueKey] || '';
+        let label = option[this.props.labelKey] || '';
+        let regexp = new RegExp(searchValue, 'gi');
+        return regexp.test(label.replace(/\s/g, '')) || regexp.test(val.replace(/\s/g, ''));
+      });
+    else searchOptions = options.slice();
+
+    if (this.props.openUp) searchOptions.reverse();
+
+    return searchOptions;
+  };
+
+  pickOption = index => {
+    index = index !== null && index !== undefined ? index : this.state.currentOption;
+    if (index > -1) return this.state.searchMatchOptions[index];
+    else return { [this.props.labelKey]: this.input.value.trim(), [this.props.valueKey]: this.input.value.trim() };
+  };
+
+  setIsOpen = (state, show) => ({ ...state, isOpen: show || false });
+  manipState = (state, key, value) => ({ ...state, [key]: value });
+  isFunction = obj => typeof obj === 'function';
+
+  handleOutsideClick = event => {
+    if (this.ris && !this.ris.contains(event.target) && this.props.collapseOnBlur) this.setState({ isOpen: false });
+  };
+
+  render() {
+    return (
+      <div
+        className={
+          'ris' +
+          (this.props.openUp ? ' ris-open-up' : '') +
+          (this.props.clearable ? ' ris-is-clearable' : '') +
+          (this.props.className ? ' ' + this.props.className : '')
+        }
+        key={'ris-' + this.props.uniqueKey}
+        ref={ref => (this.ris = ref)}
+        style={this.props.style}
+      >
+        <Textarea
+          className="ris-input"
+          value={this.state.value !== null ? this.state.value : this.props.value}
+          placeholder={this.props.placeholder}
+          onChange={this.handleChange}
+          onFocus={this.handleFocus}
+          onBlur={this.props.onBlur}
+          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
+          autoFocus={this.props.autoFocus}
+          innerRef={ref => (this.input = ref)}
+        />
+        {this.props.clearable && <div className="ris-clearable" onClick={this.handleClear}>x</div>}
+        {this.state.isOpen && this.state.searchMatchOptions.length > 0 && (
+          <div className="ris-options" ref={ref => (this.options = ref)}>
+            {this.renderOptions(this.state.searchMatchOptions)}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+SelectInput.defaultProps = {
+  uniqueKey: 'react-select-input',
+  value: '',
+  valueKey: 'value',
+  labelKey: 'label',
+  placeholder: 'Enter text',
+  openUp: false,
+  disableEnter: true,
+  collapseOnBlur: true,
+  collapseOnEscape: true,
+  collapseOnSelect: true,
+  autoFocus: true,
+  clearable: true,
+  options: []
+};
+
+SelectInput.propTypes = {
+  uniqueKey: PropTypes.string,
+  value: PropTypes.string,
+  valueKey: PropTypes.string,
+  labelKey: PropTypes.string,
+  placeholder: PropTypes.string,
+  openUp: PropTypes.bool,
+  disableEnter: PropTypes.bool,
+  collapseOnBlur: PropTypes.bool,
+  collapseOnEscape: PropTypes.bool,
+  collapseOnSelect: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  clearable: PropTypes.bool,
+  options: PropTypes.array,
+  onChange: PropTypes.func,
+  onSelect: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onClear: PropTypes.func,
+  noOptions: PropTypes.node
+};

package/src/react-select-input.css

@@ -0,0 +1,92 @@
+
+
+.ris {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  font-size:12px;
+}
+
+.ris * {
+  box-sizing: border-box;
+}
+
+.ris.ris-is-clearable .ris-clearable {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  font-size:1.1em;
+  margin-top:-1px;
+  transform: translate(0, -50%);
+  padding:5px;
+  color: #555;
+  cursor:pointer;
+}
+
+.ris.ris-is-creatable .ris-input {
+  padding-right:15px;
+}
+
+.ris .ris-input {
+  display: block;
+  resize: none;
+  width: 100%;
+  padding: 5px;
+  border: 5px solid #eee;
+  border-radius: 5px;
+  font-size:inherit;
+}
+
+.ris .ris-input:active, .ris .ris-input:focus {
+  outline: 0;
+  border: 5px solid #1e88e5; 
+}
+
+.ris.ris-open-up .ris-options {
+  top:0;
+  transform:translate(-50%,-100%);
+}
+
+.ris .ris-options {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin:0;
+  width: calc(100% - 10px);
+  background: #fff;
+  transform:translate(-50%, 0);
+  border: 1px solid #eee;
+  overflow: auto;
+  box-shadow: 0 2px 3px 1px #eee;
+  max-height:245px;
+  font-size:inherit;
+}
+
+.ris .ris-options .ris-option {
+  padding: 5px;
+  cursor: pointer;
+  border-bottom: 1px solid #efefef;
+}
+
+.ris .ris-options .ris-option:last-child {
+  border-bottom: 0;
+}
+
+.ris .ris-options .ris-option:hover {
+  background: #bbdefb;
+}
+
+.ris .ris-options .ris-option.current {
+  background:#bbdefb;
+}
+
+.ris .ris-options .ris-option.selected {
+  background:#1e88e5;
+  color: #fff;
+}
+
+.ris .ris-options.ris-no-options {
+  padding:5px;
+  text-align:center;
+  color:#ccc;
+}