From 2094fcf94d5e23b8e17a4c0363f80422019b78dc Mon Sep 17 00:00:00 2001
From: Love-YGX-and-D <1578236889@qq.com>
Date: Thu, 30 Jul 2020 18:28:07 +0800
Subject: [PATCH] Feat: update select ui

---
 plugin-config/info.json                       |  2 +-
 src/app.js                                    |  3 +-
 .../local-settings-widgets/dtable-select.js   | 76 ----------------
 .../location-settings-item.js                 | 11 +--
 src/components/location-settings.js           | 10 ++-
 src/components/select/index.js                |  3 +
 src/components/select/option-group.js         | 32 +++++++
 src/components/select/option.js               | 25 ++++++
 src/components/select/select.js               | 74 +++++++++++++++
 src/css/select.css                            | 90 +++++++++++++++++++
 10 files changed, 241 insertions(+), 85 deletions(-)
 delete mode 100644 src/components/local-settings-widgets/dtable-select.js
 create mode 100644 src/components/select/index.js
 create mode 100644 src/components/select/option-group.js
 create mode 100644 src/components/select/option.js
 create mode 100644 src/components/select/select.js
 create mode 100644 src/css/select.css

diff --git a/plugin-config/info.json b/plugin-config/info.json
index dc193d9..ea4fc72 100644
--- a/plugin-config/info.json
+++ b/plugin-config/info.json
@@ -1,6 +1,6 @@
 {
   "name": "map-en",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "display_name": {
     "cs": "Mapy",
     "de": "Karten",
diff --git a/src/app.js b/src/app.js
index f6d0d9f..a15b577 100644
--- a/src/app.js
+++ b/src/app.js
@@ -462,7 +462,8 @@ class App extends React.Component  {
               {showSettingDialog && (
                 <LocationSettings 
                   configSettings={configSettings} 
-                  onSelectChange={this.onSelectChange} 
+                  onSelectChange={this.onSelectChange}
+                  toggleSettingDialog={this.toggleSettingDialog}
                 /> 
               )}
             </div>
diff --git a/src/components/local-settings-widgets/dtable-select.js b/src/components/local-settings-widgets/dtable-select.js
deleted file mode 100644
index fd007ce..0000000
--- a/src/components/local-settings-widgets/dtable-select.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Select, { components } from 'react-select';
-
-const DropdownIndicator = props => {
-  return (
-    components.DropdownIndicator && (
-      <components.DropdownIndicator {...props}>
-        <span className="dtable-font dtable-icon-drop-down parameter-icon" style={{fontSize: '12px'}}></span>
-      </components.DropdownIndicator>
-    )
-  );
-};
-
-const Option = props => {
-  return (
-    <div style={props.data.style}>
-      <components.Option {...props} />
-    </div>
-  );
-};
-
-Option.propTypes = {
-  data: PropTypes.shape({
-    style: PropTypes.object,
-  }),
-};
-
-const DTableSelectStyle = {
-  control: styles => ({ ...styles, fontSize: '14px', cursor: 'pointer', lineHeight: '1.5'}),
-  indicatorSeparator: () => {},
-};
-
-class DTableSelect extends React.Component {
-
-  static propTypes = {
-    options: PropTypes.array.isRequired,
-    value: PropTypes.object,
-    isSearchable: PropTypes.bool,
-    placeholder: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    options: [],
-    value: {},
-    isSearchable: false,
-    placeholder: '',
-  };
-
-  getMenuPortalTarget = () => {
-    return document.querySelector('.modal');
-  }
-
-  render() {
-    const { options, onChange, value, isSearchable, placeholder } = this.props;
-
-    return(
-      <Select 
-        value={value}
-        onChange={onChange}
-        options={options}
-        styles = {DTableSelectStyle}
-        components={{ Option, DropdownIndicator }}
-        placeholder={placeholder}
-        isSearchable={isSearchable}
-        menuPosition={'fixed'}
-        menuShouldBlockScroll={true}
-        menuShouldScrollIntoView
-        menuPortalTarget={this.getMenuPortalTarget()}
-      />
-    ); 
-  }
-}
-
-export default DTableSelect;
diff --git a/src/components/local-settings-widgets/location-settings-item.js b/src/components/local-settings-widgets/location-settings-item.js
index b2f61b7..a5a11bc 100644
--- a/src/components/local-settings-widgets/location-settings-item.js
+++ b/src/components/local-settings-widgets/location-settings-item.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import DTableSelect from './dtable-select';
+import Select from '../select';
 
 const propTypes = {
   configSetting: PropTypes.object,
@@ -27,8 +27,8 @@ class LocationSettingsItem extends Component {
     let { configSetting } = this.props;
     let { active, settings } = configSetting;
     let activeOption = settings.find(setting => setting.name === active);
-    if (activeOption.name === option.value.name) return;
-    this.props.onSelectChange(option.value, configSetting.type);
+    if (activeOption.name === option.name) return;
+    this.props.onSelectChange(option, configSetting.type);
   }
 
   render() {
@@ -38,9 +38,10 @@ class LocationSettingsItem extends Component {
     return (
       <div className={'dtable-plugin-location-settings-item'}>
         <div className="dtable-plugin-location-settings-title">{name}</div>
-        <DTableSelect
+        <Select
+          className="dtable-plugin-location-select"
           value={this.createOption(activeOption)}
-          onChange={this.onSelectChange}
+          onSelectOption={this.onSelectChange}
           options={this.createOptions()}
         />
       </div>
diff --git a/src/components/location-settings.js b/src/components/location-settings.js
index c962e87..29860b4 100644
--- a/src/components/location-settings.js
+++ b/src/components/location-settings.js
@@ -7,6 +7,7 @@ import '../locale/index.js';
 const propTypes = {
   configSettings: PropTypes.array,
   onSelectChange: PropTypes.func,
+  toggleSettingDialog: PropTypes.func,
 };
 
 class LocationSettings extends Component {
@@ -16,10 +17,15 @@ class LocationSettings extends Component {
   }
 
   render() {
-    const { configSettings } = this.props;
+    const { configSettings, toggleSettingDialog } = this.props;
     return (
       <div className="dtable-plugin-location-settings">
-        <div className="dtable-plugin-location-settings-header">{intl.get('Settings')}</div>
+        <div className="dtable-plugin-location-settings-header">
+          <span>{intl.get('Settings')}</span>
+          <button onClick={toggleSettingDialog} className="close">
+            <i className="dtable-font dtable-icon-x"></i>
+          </button>
+        </div>
         <div className="dtable-plugin-location-settings-parameter">
           {configSettings && configSettings.map(configSetting => {
             return (
diff --git a/src/components/select/index.js b/src/components/select/index.js
new file mode 100644
index 0000000..632be60
--- /dev/null
+++ b/src/components/select/index.js
@@ -0,0 +1,3 @@
+import Select from './select';
+
+export default Select;
\ No newline at end of file
diff --git a/src/components/select/option-group.js b/src/components/select/option-group.js
new file mode 100644
index 0000000..d9ed3bf
--- /dev/null
+++ b/src/components/select/option-group.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import Option from './option';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  options: PropTypes.array,
+  onSelectOption: PropTypes.func
+};
+
+class OptGroup extends Component {
+
+  renderOptGroup = () => {
+    let { options } = this.props;
+    return options && options.map((opt, i) => {
+      return (
+        <Option key={i} value={opt.value} onSelectOption={this.props.onSelectOption}>{opt.label}</Option>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div className="option-group">
+        {this.renderOptGroup()}
+      </div>
+    );
+  }
+}
+
+OptGroup.propTypes = propTypes;
+
+export default OptGroup;
\ No newline at end of file
diff --git a/src/components/select/option.js b/src/components/select/option.js
new file mode 100644
index 0000000..7bd611c
--- /dev/null
+++ b/src/components/select/option.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  value: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  onSelectOption: PropTypes.func,
+};
+
+class Option extends Component {
+  
+  onSelectOption = (value) => {
+    this.props.onSelectOption(value);
+  }
+
+  render() {
+    return(
+      <div className="option" onClick={this.onSelectOption.bind(this, this.props.value)}>{this.props.children}</div>
+    );
+  }
+}
+
+Option.propTypes = propTypes;
+
+export default Option;
\ No newline at end of file
diff --git a/src/components/select/select.js b/src/components/select/select.js
new file mode 100644
index 0000000..ea64fdc
--- /dev/null
+++ b/src/components/select/select.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import OptGroup from './option-group';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import '../../css/select.css';
+
+const propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.object,
+  options: PropTypes.array,
+  placeholder: PropTypes.string,
+  onSelectOption: PropTypes.func,
+  isLocked: PropTypes.bool
+};
+
+class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowSelectOptions: false
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.hideSelect);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.hideSelect);
+  }
+
+  onSelectToggle = () => {
+    if (this.props.isLocked) return;
+    this.setState({
+      isShowSelectOptions: !this.state.isShowSelectOptions
+    });
+  }
+
+  hideSelect = (event) => {
+    if (!this.selector.contains(event.target)) {
+      this.setState({isShowSelectOptions: false});
+    }
+  }
+
+  render() {
+    let { className, value, options, placeholder } = this.props;
+    return(
+      <div 
+        ref={(node) => this.selector = node}
+        className={classnames('dtable-select', 'custom-select', {'focus': this.state.isShowSelectOptions}, className)} 
+        onClick={this.onSelectToggle}>
+        <div className="selected-option">
+          {value.label ? (
+            <span className="selected-option-show">{value.label}</span>
+          ) : (
+            <span className="select-placeholder">{placeholder}</span>
+          )}
+          {!this.props.isLocked && <i className="dtable-font dtable-icon-drop-down"></i>}
+        </div>
+        {this.state.isShowSelectOptions && (
+          <OptGroup 
+            options={options}
+            onSelectOption={this.props.onSelectOption}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+Select.propTypes = propTypes;
+
+export default Select;
\ No newline at end of file
diff --git a/src/css/select.css b/src/css/select.css
new file mode 100644
index 0000000..beae7b3
--- /dev/null
+++ b/src/css/select.css
@@ -0,0 +1,90 @@
+.dtable-select {
+  position: relative;
+}
+
+.dtable-select.custom-select {
+  display: flex;
+  padding: 0 10px;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dtable-select.custom-select.focus {
+  border-color: #1991eb;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.dtable-select.custom-select:hover {
+  cursor: pointer;
+}
+
+.dtable-select .dtable-icon-drop-down {
+  display: inline-block;
+  font-size: 12px;
+  color: rgba(116, 116, 116, 1);
+  transform: scale(.8) translateY(2px);
+  transition: all .1s;
+}
+
+.dtable-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.dtable-select .option-group {
+  position: absolute;
+  top: 38px;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: .5rem 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  overflow-y: auto;
+  z-index: 10001;
+}
+
+.dtable-select .option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: .25rem 10px;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select .option:hover {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.dtable-select .selected-option-show {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  color: #949494;
+}
\ No newline at end of file