haya-select 1.0.23 → 1.0.25

package/package.json

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

@@ -220,6 +220,9 @@ export default class HayaSelect extends React.PureComponent {
               )}
             </>
           }
+          <div className="haya-select-chevron-down-container">
+            <i className="fa fa-chevron-down" />
+          </div>
         </div>
         <div ref={endOfSelectRef} />
       </div>
@@ -485,6 +488,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

@@ -2,6 +2,7 @@
   .haya-select-current-selected {
     display: flex;
     flex-wrap: wrap;
+    position: relative;
     background-color: #fff;
     border: 1px solid #999;
     color: #000;
@@ -26,6 +27,16 @@
       margin-right: 6px;
     }
   }
+
+  .haya-select-chevron-down-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: absolute;
+    right: 20px;
+    height: calc(100% - 33px);
+  }
 }
 
 .haya-select-search-text-input {
@@ -46,6 +57,15 @@
     padding: 4px 8px;
     color: #000;
 
+    &[data-disabled="true"] {
+      cursor: default;
+      opacity: .6;
+    }
+
+    &[data-disabled="false"] {
+      cursor: pointer;
+    }
+
     &[data-selected="true"] {
       background-color: #80b2ff;
     }