haya-select 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,8 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "debounce": "^1.2.1",
-    "diggerize": "^1.0.4"
+    "diggerize": "^1.0.4",
+    "fetching-object": "^1.0.1"
   },
   "peerDependencies": {
     "prop-types": ">= 15.7.2",

package/src/select/index.jsx

@@ -37,6 +37,7 @@ export default class HayaSelect extends React.PureComponent {
     model: PropTypes.object,
     multiple: PropTypes.bool.isRequired,
     onChange: PropTypes.func,
+    onOptionsClosed: PropTypes.func,
     options: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
     placeholder: PropTypes.node,
     search: PropTypes.bool.isRequired,
@@ -47,6 +48,10 @@ export default class HayaSelect extends React.PureComponent {
     }))
   }
 
+  p = fetchingObject(() => this.props)
+  s = fetchingObject(() => this.state)
+  t = fetchingObject(this)
+
   endOfSelectRef = React.createRef()
   optionsContainerRef = React.createRef()
   searchTextInputRef = React.createRef()
@@ -65,7 +70,7 @@ export default class HayaSelect extends React.PureComponent {
 
   defaultCurrentOptions() {
     const {defaultValue, defaultValues} = this.props
-    const {options} = digs(this.props, "options")
+    const {options} = this.p
 
     if (!Array.isArray(options)) return []
 
@@ -76,7 +81,7 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   defaultLoadedOptions() {
-    const {options} = digs(this.props, "options")
+    const {options} = this.p
 
     if (typeof options == "function") {
       return undefined
@@ -96,7 +101,7 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   render() {
-    const {endOfSelectRef} = digs(this, "endOfSelectRef")
+    const {endOfSelectRef} = this.t
     const {
       attribute,
       className,
@@ -107,13 +112,14 @@ export default class HayaSelect extends React.PureComponent {
       model,
       multiple,
       onChange,
+      onOptionsClosed,
       options,
       placeholder,
       search,
       toggleOptions,
       ...restProps
     } = this.props
-    const {currentOptions, opened} = digs(this.state, "currentOptions", "opened")
+    const {currentOptions, opened} = this.s
     const BodyPortal = config.getBodyPortal()
 
     return (
@@ -208,7 +214,7 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   loadOptions = async () => {
-    const {options} = digs(this.props, "options")
+    const {options} = this.p
     const searchValue = digg(this, "searchTextInputRef", "current")?.value
 
     if (Array.isArray(options)) {
@@ -225,7 +231,14 @@ export default class HayaSelect extends React.PureComponent {
       return <OptionGroup key={key} option={loadedOption} />
     }
 
-    return <Option currentOptions={this.state.currentOptions} key={key} option={loadedOption} onOptionClicked={this.onOptionClicked} presentOption={this.presentOption} />
+    return <Option
+      currentOptions={this.state.currentOptions}
+      icon={this.iconForOption(loadedOption)}
+      key={key}
+      option={loadedOption}
+      onOptionClicked={this.onOptionClicked}
+      presentOption={this.presentOption}
+    />
   }
 
   loadOptionsFromArray(options, searchValue) {
@@ -239,7 +252,7 @@ export default class HayaSelect extends React.PureComponent {
     e.preventDefault()
     e.stopPropagation()
 
-    const {opened} = digs(this.state, "opened")
+    const {opened} = this.s
 
     if (opened) {
       this.closeOptions()
@@ -255,10 +268,12 @@ export default class HayaSelect extends React.PureComponent {
       loadedOptions: undefined,
       opened: false
     })
+
+    if (this.props.onOptionsClosed) this.props.onOptionsClosed()
   }
 
   openOptions() {
-    const {endOfSelectRef} = digs(this, "endOfSelectRef")
+    const {endOfSelectRef} = this.t
     const position = endOfSelectRef.current.getBoundingClientRect()
     const {left, top, width} = digs(position, "left", "top", "width")
 
@@ -278,35 +293,18 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   onWindowClicked = (e) => {
-    const {optionsContainerRef} = digs(this, "optionsContainerRef")
-    const {opened} = digs(this.state, "opened")
+    const {optionsContainerRef} = this.t
+    const {opened} = this.s
 
     // If options are open and a click is made outside of the options container
     if (opened && optionsContainerRef.current && !optionsContainerRef.current?.contains(e.target)) {
-      this.setState({opened: false})
+      this.closeOptions()
     }
   }
 
   optionsContainer() {
-    const {optionsContainerRef} = digs(this, "endOfSelectRef", "optionsContainerRef")
-    const {
-      loadedOptions,
-      optionsLeft,
-      optionsTop,
-      optionsWidth,
-      scrollLeft,
-      scrollTop
-    } = digs(
-      this.state,
-      "loadedOptions",
-      "currentOptions",
-      "opened",
-      "optionsLeft",
-      "optionsTop",
-      "optionsWidth",
-      "scrollLeft",
-      "scrollTop"
-    )
+    const {optionsContainerRef} = this.t
+    const {loadedOptions, optionsLeft, optionsTop, optionsWidth, scrollLeft, scrollTop} = this.s
 
     return (
       <div
@@ -340,7 +338,7 @@ export default class HayaSelect extends React.PureComponent {
     e.stopPropagation()
 
     const {onChange, toggleOptions} = this.props
-    const {multiple} = digs(this.props, "multiple")
+    const {multiple} = this.p
 
     this.setState(
       (prevState) => {
@@ -402,9 +400,21 @@ export default class HayaSelect extends React.PureComponent {
     if (!multiple) this.closeOptions()
   }
 
+  iconForOption(option) {
+    const {toggleOptions} = this.props || {}
+    const {toggled} = this.s
+
+    if (toggleOptions && (option.value in toggled)) {
+      const icon = toggleOptions[toggled[option.value]].icon
+
+      return icon
+    }
+  }
+
   presentOption = (currentValue) => {
     const {toggleOptions} = this.props || {}
-    const {toggled} = digs(this.state, "toggled")
+    const {toggled} = this.s
+    const icon = this.iconForOption(currentValue)
 
     return (
       <div
@@ -417,7 +427,7 @@ export default class HayaSelect extends React.PureComponent {
           <i className="fa fa-fw" />
         }
         {toggleOptions && (currentValue.value in toggled) &&
-          <i className={`fa fa-fw fa-${toggleOptions[toggled[currentValue.value]].icon}`} />
+          <i className={`fa fa-fw fa-${icon}`} />
         }
         {currentValue.text}
         {("html" in currentValue) &&

package/src/select/option.jsx

@@ -5,11 +5,14 @@ import React from "react"
 export default class Option extends React.PureComponent {
   static propTypes = {
     currentOptions: PropTypes.array.isRequired,
+    icon: PropTypes.string,
     onOptionClicked: PropTypes.func.isRequired,
     option: PropTypes.object.isRequired,
     presentOption: PropTypes.func.isRequired
   }
 
+  style = {cursor: "pointer"}
+
   render() {
     const {currentOptions, option} = digs(this.props, "currentOptions", "option")
     const selected = Boolean(currentOptions.find((currentOption) => currentOption.value == option.value))
@@ -20,7 +23,7 @@ export default class Option extends React.PureComponent {
         data-selected={selected}
         data-value={option.value}
         onClick={this.onClick}
-        style={{cursor: "pointer"}}
+        style={this.style}
       >
         {this.props.presentOption(option)}
       </div>

package/src/select/style.scss

@@ -1,10 +1,13 @@
 .haya-select {
   .haya-select-current-selected {
     display: flex;
+    flex-wrap: wrap;
     background-color: #fff;
     border: 1px solid #999;
     cursor: pointer;
-    padding: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 5px;
 
     &[data-opened="false"] {
       border-radius: 4px;
@@ -14,8 +17,8 @@
       border-radius: 4px 4px 0 0;
     }
 
-    .current-option + .current-option {
-      margin-left: 6px;
+    .current-option {
+      margin-right: 6px;
     }
   }
 }