[incubator-superset] branch master updated: Added custom pasteSelect to handle paste events (#3562)

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 076f9cd  Added custom pasteSelect to handle paste events (#3562)
076f9cd is described below

commit 076f9cd095db95074c09ff630743c1873b15aebc
Author: Jeff Niu <je...@gmail.com>
AuthorDate: Tue Oct 3 15:58:18 2017 -0700

    Added custom pasteSelect to handle paste events (#3562)
---
 .../explore/components/controls/SelectControl.jsx  | 59 +++++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/superset/assets/javascripts/explore/components/controls/SelectControl.jsx b/superset/assets/javascripts/explore/components/controls/SelectControl.jsx
index 4c72b5d..51381d6 100644
--- a/superset/assets/javascripts/explore/components/controls/SelectControl.jsx
+++ b/superset/assets/javascripts/explore/components/controls/SelectControl.jsx
@@ -37,6 +37,55 @@ const defaultProps = {
   valueKey: 'value',
 };
 
+// Handle `onPaste` so that users may paste in
+// options as comma-delimited, slightly modified from
+// https://github.com/JedWatson/react-select/issues/1672
+function pasteSelect(props) {
+  let pasteInput;
+  return (
+    <Select
+      {...props}
+      ref={(ref) => {
+        // Creatable requires a reference to its Select child
+        if (props.ref) {
+          props.ref(ref);
+        }
+        pasteInput = ref;
+      }}
+      inputProps={{
+        onPaste: (evt) => {
+          if (!props.multi) {
+            return;
+          }
+          evt.preventDefault();
+          // pull text from the clipboard and split by comma
+          const clipboard = evt.clipboardData.getData('Text');
+          if (!clipboard) {
+            return;
+          }
+          const values = clipboard.split(/[,]+/).map(v => v.trim());
+          const options = values
+            .filter(value =>
+              // Creatable validates options
+              props.isValidNewOption ? props.isValidNewOption({ label: value }) : !!value,
+            )
+            .map(value => ({
+              [props.labelKey]: value,
+              [props.valueKey]: value,
+            }));
+          if (options.length) {
+            pasteInput.selectValue(options);
+          }
+        },
+      }}
+    />
+  );
+}
+pasteSelect.propTypes = {
+  multi: PropTypes.bool,
+  ref: PropTypes.func,
+};
+
 export default class SelectControl extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -106,6 +155,7 @@ export default class SelectControl extends React.PureComponent {
       placeholder: t('Select %s', this.state.options.length),
       options: this.state.options,
       value: this.props.value,
+      labelKey: 'label',
       valueKey: this.props.valueKey,
       autosize: false,
       clearable: this.props.clearable,
@@ -115,8 +165,13 @@ export default class SelectControl extends React.PureComponent {
       valueRenderer: this.props.valueRenderer,
     };
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
-    const selectWrap = this.props.freeForm ?
-      (<Creatable {...selectProps} />) : (<Select {...selectProps} />);
+    const selectWrap = this.props.freeForm ? (
+      <Creatable {...selectProps}>
+        {pasteSelect}
+      </Creatable>
+    ) : (
+      pasteSelect(selectProps)
+    );
     return (
       <div>
         {this.props.showHeader &&

-- 
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <co...@superset.apache.org>'].