haya-select 1.0.15 → 1.0.17

package/package.json

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

@@ -6,7 +6,10 @@ import debounce from "debounce"
 import EventListener from "@kaspernj/api-maker/src/event-listener"
 import idForComponent from "@kaspernj/api-maker/src/inputs/id-for-component.mjs"
 import nameForComponent from "@kaspernj/api-maker/src/inputs/name-for-component.mjs"
+import Option from "./option"
+import OptionGroup from "./option-group"
 import PropTypes from "prop-types"
+import React from "react"
 
 const nameForComponentWithMultiple = (component) => {
   let name = nameForComponent(component)
@@ -44,6 +47,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()
@@ -62,7 +69,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 []
 
@@ -73,7 +80,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
@@ -93,7 +100,7 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   render() {
-    const {endOfSelectRef} = digs(this, "endOfSelectRef")
+    const {endOfSelectRef} = this.t
     const {
       attribute,
       className,
@@ -110,13 +117,14 @@ export default class HayaSelect extends React.PureComponent {
       toggleOptions,
       ...restProps
     } = this.props
-    const {currentOptions, opened} = digs(this.state, "currentOptions", "opened")
+    const {currentOptions, opened} = this.s
     const BodyPortal = config.getBodyPortal()
 
     return (
       <div
         className={classNames("haya-select", className)}
         data-id={idForComponent(this)}
+        data-toggles={Boolean(toggleOptions)}
         {...restProps}
       >
         {opened &&
@@ -145,16 +153,25 @@ export default class HayaSelect extends React.PureComponent {
                 </div>
               }
               {currentOptions.map((currentOption) =>
-                <div className="current-option" key={`current-value-${digg(currentOption, "value")}`}>
-                  {nameForComponentWithMultiple(this) &&
-                    <input
-                      id={idForComponent(this)}
-                      name={nameForComponentWithMultiple(this)}
-                      type="hidden"
-                      value={digg(currentOption, "value")}
-                    />
+                <div className="current-option" key={currentOption.key || `current-value-${currentOption.value}`}>
+                  {currentOption.type == "group" &&
+                    <div style={{fontWeight: "bold"}}>
+                      {currentOption.text}
+                    </div>
+                  }
+                  {currentOption.type != "group" &&
+                    <>
+                      {nameForComponentWithMultiple(this) &&
+                        <input
+                          id={idForComponent(this)}
+                          name={nameForComponentWithMultiple(this)}
+                          type="hidden"
+                          value={digg(currentOption, "value")}
+                        />
+                      }
+                      {this.presentOption(currentOption)}
+                    </>
                   }
-                  {this.presentOption(currentOption)}
                 </div>
               )}
             </>
@@ -195,7 +212,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)) {
@@ -208,21 +225,18 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   hayaSelectOption({key, loadedOption}) {
-    const {currentOptions} = digs(this.state, "currentOptions")
-    const selected = Boolean(currentOptions.find((currentOption) => currentOption.value == loadedOption.value))
+    if (loadedOption.type == "group") {
+      return <OptionGroup key={key} option={loadedOption} />
+    }
 
-    return (
-      <div
-        className="haya-select-option"
-        data-selected={selected}
-        data-value={digg(loadedOption, "value")}
-        key={key}
-        onClick={(e) => this.onOptionClicked(e, loadedOption)}
-        style={{cursor: "pointer"}}
-      >
-        {this.presentOption(loadedOption)}
-      </div>
-    )
+    return <Option
+      currentOptions={this.state.currentOptions}
+      icon={this.iconForOption(loadedOption)}
+      key={key}
+      option={loadedOption}
+      onOptionClicked={this.onOptionClicked}
+      presentOption={this.presentOption}
+    />
   }
 
   loadOptionsFromArray(options, searchValue) {
@@ -236,7 +250,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,7 +269,7 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   openOptions() {
-    const {endOfSelectRef} = digs(this, "endOfSelectRef")
+    const {endOfSelectRef} = this.t
     const position = endOfSelectRef.current.getBoundingClientRect()
     const {left, top, width} = digs(position, "left", "top", "width")
 
@@ -270,15 +284,13 @@ export default class HayaSelect extends React.PureComponent {
         scrollLeft: document.documentElement.scrollLeft,
         scrollTop: document.documentElement.scrollTop
       },
-      () => {
-        digg(this, "searchTextInputRef", "current").focus()
-      }
+      () => digg(this, "searchTextInputRef", "current").focus()
     )
   }
 
   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)) {
@@ -287,25 +299,8 @@ export default class HayaSelect extends React.PureComponent {
   }
 
   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
@@ -321,7 +316,7 @@ export default class HayaSelect extends React.PureComponent {
         <EventListener event="click" onCalled={this.onWindowClicked} target={window} />
         {loadedOptions?.map((loadedOption) =>
           this.hayaSelectOption({
-            key: `loaded-option-${digg(loadedOption.value)}`,
+            key: loadedOption.key || `loaded-option-${loadedOption.value}`,
             loadedOption
           })
         )}
@@ -339,7 +334,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) => {
@@ -401,9 +396,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
@@ -416,7 +423,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-group.jsx

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

package/src/select/option.jsx

@@ -0,0 +1,34 @@
+import {digs} from "diggerize"
+import PropTypes from "prop-types"
+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))
+
+    return (
+      <div
+        className="haya-select-option"
+        data-selected={selected}
+        data-value={option.value}
+        onClick={this.onClick}
+        style={this.style}
+      >
+        {this.props.presentOption(option)}
+      </div>
+    )
+  }
+
+  onClick = (e) => this.props.onOptionClicked(e, this.props.option)
+}

package/src/select/style.scss

@@ -1,15 +1,25 @@
-.haya-select-current-selected {
-  background-color: #fff;
-  border: 1px solid #999;
-  cursor: pointer;
-  padding: 5px;
+.haya-select {
+  .haya-select-current-selected {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #fff;
+    border: 1px solid #999;
+    cursor: pointer;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 5px;
 
-  &[data-opened="false"] {
-    border-radius: 4px;
-  }
+    &[data-opened="false"] {
+      border-radius: 4px;
+    }
+
+    &[data-opened="true"] {
+      border-radius: 4px 4px 0 0;
+    }
 
-  &[data-opened="true"] {
-    border-radius: 4px 4px 0 0;
+    .current-option {
+      margin-right: 6px;
+    }
   }
 }
 
@@ -39,4 +49,10 @@
       background-color: steelblue;
     }
   }
+
+  .haya-select--option-group {
+    padding: 4px 8px;
+    color: #000;
+    font-weight: bold;
+  }
 }