Feat: update select ui

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",

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>

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>

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 (

src/components/select/index.js

@@ -0,0 +1,3 @@
+import Select from './select';
+
+export default Select;

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;

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;

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;

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;
+}