haya-select 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,7 @@
     "debounce": "^1.2.1",
     "diggerize": "^1.0.4",
     "fetching-object": "^1.0.1",
-    "set-state-compare": "^1.0.19"
+    "set-state-compare": "^1.0.27"
   },
   "peerDependencies": {
     "prop-types": ">= 15.7.2",

package/src/select/index.jsx

@@ -240,6 +240,14 @@ export default class HayaSelect extends React.PureComponent {
     }
   }
 
+  isActive() {
+    if (this.t.endOfSelectRef.current) {
+      return true
+    }
+
+    return false
+  }
+
   async loadDefaultValuesFromOptionsCallback() {
     const defaultValues = this.defaultValues()
 
@@ -329,6 +337,8 @@ export default class HayaSelect extends React.PureComponent {
   focusTextInput = () => digg(this.t.searchTextInputRef, "current").focus()
 
   setOptionsPosition() {
+    if (!this.isActive()) return // Debounce after un-mount handeling.
+
     this.setOptionsPositionBelow()
     this.setOptionsPositionAboveIfOutsideScreen()
   }
@@ -348,7 +358,7 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   setOptionsPositionAbove() {
-    const {optionsContainerRef, currentSelectedRef} = this.t
+    const {optionsContainerRef, currentSelectedRef, searchTextInputRef} = this.t
     const optionsHeight = digg(optionsContainerRef, "current", "offsetHeight")
     const position = currentSelectedRef.current.getBoundingClientRect()
     const {left, top, width} = digs(position, "left", "top", "width")
@@ -365,7 +375,7 @@ export default class HayaSelect extends React.PureComponent {
         scrollLeft: document.documentElement.scrollLeft,
         scrollTop: document.documentElement.scrollTop
       },
-      () => digg(this.t.searchTextInputRef, "current").focus()
+      () => searchTextInputRef.current.focus()
     )
   }
 
@@ -385,7 +395,7 @@ export default class HayaSelect extends React.PureComponent {
         scrollLeft: document.documentElement.scrollLeft,
         scrollTop: document.documentElement.scrollTop
       },
-      () => digg(searchTextInputRef, "current").focus()
+      () => searchTextInputRef.current.focus()
     )
   }
 
@@ -447,9 +457,9 @@ export default class HayaSelect extends React.PureComponent {
     )
   }
 
-  onOptionClicked = (e, loadedOption) => {
-    e.preventDefault()
-    e.stopPropagation()
+  onOptionClicked = (event, loadedOption) => {
+    event.preventDefault()
+    event.stopPropagation()
 
     const {onChange, toggleOptions} = this.props
     const {multiple} = this.p
@@ -475,6 +485,9 @@ export default class HayaSelect extends React.PureComponent {
         newState.currentOptions = currentOptions.filter((currentOption) => currentOption.value != loadedOption.value)
       }
     } else {
+      // Don't do anything if the clicked option is disabled
+      if (loadedOption.disabled) return
+
       if (toggleOptions) {
         newToggled[loadedOption.value] = 0
         newState.toggled = newToggled
@@ -500,6 +513,7 @@ export default class HayaSelect extends React.PureComponent {
       }
 
       onChange({
+        event,
         options: this.shape.currentOptions,
         toggles
       })

package/src/select/option-group.jsx

@@ -1,16 +1,16 @@
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
 
-export default class OptionGroup extends React.PureComponent {
-  static propTypes = {
-    option: PropTypes.object.isRequired
-  }
+const OptionGroup = ({option}) => {
+  return (
+    <div className="haya-select--option-group">
+      {option.text}
+    </div>
+  )
+}
 
-  render() {
-    return (
-      <div className="haya-select--option-group">
-        {this.props.option.text}
-      </div>
-    )
-  }
+OptionGroup.propTypes = {
+  option: PropTypes.object.isRequired
 }
+
+export default memo(OptionGroup)

package/src/select/option.jsx

@@ -1,34 +1,32 @@
-import {digs} from "diggerize"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo, useMemo} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
 
-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
-  }
+const Option = (props) => {
+  const s = useShape(props)
+  const onClick = useCallback((e) => s.p.onOptionClicked(e, s.p.option), [])
+  const selected = Boolean(s.p.currentOptions.find((currentOption) => currentOption.value == s.p.option.value))
 
-  style = {cursor: "pointer"}
-
-  render() {
-    const {currentOptions, option} = digs(this.props, "currentOptions", "option")
-    const selected = Boolean(currentOptions.find((currentOption) => currentOption.value == option.value))
-
-    return (
-      <div
-        className="haya-select-option"
-        data-selected={selected}
-        data-value={option.value}
-        onClick={this.onClick}
-        style={this.style}
-      >
-        {this.props.presentOption(option)}
-      </div>
-    )
-  }
+  return (
+    <div
+      className="haya-select-option"
+      data-disabled={Boolean(s.p.option.disabled)}
+      data-selected={selected}
+      data-value={s.p.option.value}
+      onClick={onClick}
+    >
+      {props.presentOption(s.p.option)}
+    </div>
+  )
+}
 
-  onClick = (e) => this.props.onOptionClicked(e, this.props.option)
+Option.propTypes = {
+  currentOptions: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  onOptionClicked: PropTypes.func.isRequired,
+  option: PropTypes.object.isRequired,
+  presentOption: PropTypes.func.isRequired
 }
+
+export default memo(Option)

package/src/select/style.scss

@@ -46,6 +46,15 @@
     padding: 4px 8px;
     color: #000;
 
+    &[data-disabled="true"] {
+      cursor: default;
+      opacity: .6;
+    }
+
+    &[data-disabled="false"] {
+      cursor: pointer;
+    }
+
     &[data-selected="true"] {
       background-color: #80b2ff;
     }