haya-select 1.0.8 → 1.0.11

package/package.json

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

package/src/select/index.jsx

@@ -3,6 +3,7 @@ import classNames from "classnames"
 import config from "../config.js"
 import {digg, digs} from "diggerize"
 import debounce from "debounce"
+import EventListener from "@kaspernj/api-maker/src/event-listener"
 import {idForComponent, nameForComponent} from "@kaspernj/api-maker-inputs"
 import PropTypes from "prop-types"
 
@@ -14,8 +15,9 @@ const nameForComponentWithMultiple = (component) => {
   return name
 }
 
-export default class CustomSelect extends React.PureComponent {
+export default class HayaSelect extends React.PureComponent {
   static defaultProps = {
+    defaultToggled: {},
     multiple: false,
     search: false
   }
@@ -23,13 +25,16 @@ export default class CustomSelect extends React.PureComponent {
   static propTypes = {
     attribute: PropTypes.string,
     className: PropTypes.string,
+    defaultToggled: PropTypes.object,
     defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     defaultValues: PropTypes.array,
     defaultValuesFromOptions: PropTypes.array,
+    id: PropTypes.node,
     model: PropTypes.object,
     multiple: PropTypes.bool.isRequired,
     onChange: PropTypes.func,
     options: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
+    placeholder: PropTypes.node,
     search: PropTypes.bool.isRequired,
     toggleOptions: PropTypes.arrayOf(PropTypes.shape({
       icon: PropTypes.string.isRequired,
@@ -51,7 +56,7 @@ export default class CustomSelect extends React.PureComponent {
     optionsWidth: undefined,
     scrollLeft: undefined,
     scrollTop: undefined,
-    toggled: {}
+    toggled: digg(this, "props", "defaultToggled")
   }
 
   defaultCurrentOptions() {
@@ -88,7 +93,22 @@ export default class CustomSelect extends React.PureComponent {
 
   render() {
     const {endOfSelectRef} = digs(this, "endOfSelectRef")
-    const {attribute, className, defaultValue, defaultValues, model, multiple, onChange, options, search, toggleOptions, ...restProps} = this.props
+    const {
+      attribute,
+      className,
+      defaultToggled,
+      defaultValue,
+      defaultValues,
+      id,
+      model,
+      multiple,
+      onChange,
+      options,
+      placeholder,
+      search,
+      toggleOptions,
+      ...restProps
+    } = this.props
     const {currentOptions, opened} = digs(this.state, "currentOptions", "opened")
     const BodyPortal = config.getBodyPortal()
 
@@ -120,17 +140,19 @@ export default class CustomSelect extends React.PureComponent {
             <>
               {currentOptions.length == 0 &&
                 <div style={{color: "grey"}}>
-                  {I18n.t("haya_select.nothing_selected")}
+                  {placeholder || I18n.t("haya_select.nothing_selected")}
                 </div>
               }
               {currentOptions.map((currentOption) =>
                 <div className="current-option" key={`current-value-${digg(currentOption, "value")}`}>
-                  <input
-                    id={idForComponent(this)}
-                    name={nameForComponentWithMultiple(this)}
-                    type="hidden"
-                    value={digg(currentOption, "value")}
-                  />
+                  {nameForComponentWithMultiple(this) &&
+                    <input
+                      id={idForComponent(this)}
+                      name={nameForComponentWithMultiple(this)}
+                      type="hidden"
+                      value={digg(currentOption, "value")}
+                    />
+                  }
                   {this.presentOption(currentOption)}
                 </div>
               )}
@@ -375,15 +397,19 @@ export default class CustomSelect extends React.PureComponent {
     )
 
     if (!multiple) this.closeOptions()
-
   }
 
   presentOption = (currentValue) => {
-    const {toggleOptions} = this.props
+    const {toggleOptions} = this.props || {}
     const {toggled} = digs(this.state, "toggled")
 
     return (
-      <div>
+      <div
+        className="haya-select-option-presentation"
+        data-toggle-icon={toggleOptions && toggled && toggleOptions[toggled[currentValue.value]]?.icon}
+        data-toggle-value={toggleOptions && toggled && toggleOptions[toggled[currentValue.value]]?.value}
+        data-value={currentValue.value}
+      >
         {toggleOptions && !(currentValue.value in toggled) &&
           <i className="fa fa-fw" />
         }