haya-select 1.0.23 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.23",
+  "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

@@ -485,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

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