haya-select 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "",
   "main": "index.js",
   "scripts": {

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)
@@ -117,6 +120,7 @@ export default class HayaSelect extends React.PureComponent {
       <div
         className={classNames("haya-select", className)}
         data-id={idForComponent(this)}
+        data-toggles={Boolean(toggleOptions)}
         {...restProps}
       >
         {opened &&
@@ -145,16 +149,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>
               )}
             </>
@@ -208,21 +221,11 @@ 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} key={key} option={loadedOption} onOptionClicked={this.onOptionClicked} presentOption={this.presentOption} />
   }
 
   loadOptionsFromArray(options, searchValue) {
@@ -270,9 +273,7 @@ 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()
     )
   }
 
@@ -321,7 +322,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
           })
         )}

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,31 @@
+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,
+    onOptionClicked: PropTypes.func.isRequired,
+    option: PropTypes.object.isRequired,
+    presentOption: PropTypes.func.isRequired
+  }
+
+  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={{cursor: "pointer"}}
+      >
+        {this.props.presentOption(option)}
+      </div>
+    )
+  }
+
+  onClick = (e) => this.props.onOptionClicked(e, this.props.option)
+}

package/src/select/style.scss

@@ -1,15 +1,22 @@
-.haya-select-current-selected {
-  background-color: #fff;
-  border: 1px solid #999;
-  cursor: pointer;
-  padding: 5px;
+.haya-select {
+  .haya-select-current-selected {
+    display: flex;
+    background-color: #fff;
+    border: 1px solid #999;
+    cursor: pointer;
+    padding: 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 + .current-option {
+      margin-left: 6px;
+    }
   }
 }
 
@@ -39,4 +46,10 @@
       background-color: steelblue;
     }
   }
+
+  .haya-select--option-group {
+    padding: 4px 8px;
+    color: #000;
+    font-weight: bold;
+  }
 }