haya-select 1.0.5 → 1.0.8

package/.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: weekly
+    time: "01:00"
+    timezone: Europe/Copenhagen
+  open-pull-requests-limit: 99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,5 +12,9 @@
     "classnames": "^2.3.1",
     "debounce": "^1.2.1",
     "diggerize": "^1.0.4"
+  },
+  "peerDependencies": {
+    "prop-types": ">= 15.7.2",
+    "react": ">= 16.0.0"
   }
 }

package/src/select/index.jsx

@@ -14,39 +14,6 @@ const nameForComponentWithMultiple = (component) => {
   return name
 }
 
-const presentOption = (currentValue) => {
-  if (currentValue.text) return currentValue.text
-
-  if (currentValue.html) {
-    return (
-      <div dangerouslySetInnerHTML={{__html: digg(currentValue, "html")}} />
-    )
-  }
-
-  throw new Error(`Couldn't figure out how to present option from the given keys: ${Object.keys(currentValue, ", ")}`)
-}
-
-const LoadedOption = class LoadedOption extends BaseComponent {
-  render() {
-    const {currentOptions, loadedOption} = digs(this.props, "currentOptions", "loadedOption")
-    const selected = Boolean(currentOptions.find((currentOption) => currentOption.value == loadedOption.value))
-
-    return (
-      <div
-        className="haya-select-option"
-        data-selected={selected}
-        data-value={digg(loadedOption, "value")}
-        onClick={this.onOptionClicked}
-        style={{cursor: "pointer"}}
-      >
-        {presentOption(loadedOption)}
-      </div>
-    )
-  }
-
-  onOptionClicked = (e) => this.props.onClick(e, this.props.loadedOption)
-}
-
 export default class CustomSelect extends React.PureComponent {
   static defaultProps = {
     multiple: false,
@@ -63,7 +30,12 @@ export default class CustomSelect extends React.PureComponent {
     multiple: PropTypes.bool.isRequired,
     onChange: PropTypes.func,
     options: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
-    search: PropTypes.bool.isRequired
+    search: PropTypes.bool.isRequired,
+    toggleOptions: PropTypes.arrayOf(PropTypes.shape({
+      icon: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired
+    }))
   }
 
   endOfSelectRef = React.createRef()
@@ -78,7 +50,8 @@ export default class CustomSelect extends React.PureComponent {
     optionsTop: undefined,
     optionsWidth: undefined,
     scrollLeft: undefined,
-    scrollTop: undefined
+    scrollTop: undefined,
+    toggled: {}
   }
 
   defaultCurrentOptions() {
@@ -106,16 +79,16 @@ export default class CustomSelect extends React.PureComponent {
   }
 
   componentDidMount() {
-    const {attribute, defaultValuesFromOptions, model, options} = this.props
+    const {attribute, defaultValue, defaultValuesFromOptions, model, options} = this.props
 
-    if ((defaultValuesFromOptions || (attribute && model)) && typeof options == "function") {
+    if (((defaultValue || defaultValuesFromOptions) || (attribute && model)) && typeof options == "function") {
       this.loadDefaultValuesFromOptionsCallback()
     }
   }
 
   render() {
     const {endOfSelectRef} = digs(this, "endOfSelectRef")
-    const {attribute, className, defaultValue, defaultValues, model, multiple, onChange, options, search, ...restProps} = this.props
+    const {attribute, className, defaultValue, defaultValues, model, multiple, onChange, options, search, toggleOptions, ...restProps} = this.props
     const {currentOptions, opened} = digs(this.state, "currentOptions", "opened")
     const BodyPortal = config.getBodyPortal()
 
@@ -158,7 +131,7 @@ export default class CustomSelect extends React.PureComponent {
                     type="hidden"
                     value={digg(currentOption, "value")}
                   />
-                  {presentOption(currentOption)}
+                  {this.presentOption(currentOption)}
                 </div>
               )}
             </>
@@ -170,9 +143,10 @@ export default class CustomSelect extends React.PureComponent {
   }
 
   defaultValues () {
-    const {attribute, defaultValuesFromOptions, model} = this.props
+    const {attribute, defaultValue, defaultValuesFromOptions, model} = this.props
 
     if (defaultValuesFromOptions) return defaultValuesFromOptions
+    if (defaultValue) return defaultValue
 
     if (attribute && model) {
       if (!(attribute in model)) throw new Error(`No such attribute on ${model.modelClassData().name}: ${attribute}`)
@@ -209,6 +183,24 @@ export default class CustomSelect extends React.PureComponent {
     this.setState({loadedOptions})
   }
 
+  hayaSelectOption({key, loadedOption}) {
+    const {currentOptions} = digs(this.state, "currentOptions")
+    const selected = Boolean(currentOptions.find((currentOption) => currentOption.value == loadedOption.value))
+
+    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>
+    )
+  }
+
   loadOptionsFromArray(options, searchValue) {
     const lowerSearchValue = searchValue?.toLowerCase()
     const loadedOptions = options.filter(({text}) => !lowerSearchValue || text.toLowerCase().includes(lowerSearchValue))
@@ -273,7 +265,6 @@ export default class CustomSelect extends React.PureComponent {
   optionsContainer() {
     const {optionsContainerRef} = digs(this, "endOfSelectRef", "optionsContainerRef")
     const {
-      currentOptions,
       loadedOptions,
       optionsLeft,
       optionsTop,
@@ -282,7 +273,6 @@ export default class CustomSelect extends React.PureComponent {
       scrollTop
     } = digs(
       this.state,
-      "currentOptions",
       "loadedOptions",
       "currentOptions",
       "opened",
@@ -306,12 +296,10 @@ export default class CustomSelect extends React.PureComponent {
       >
         <EventListener event="click" onCalled={this.onWindowClicked} target={window} />
         {loadedOptions?.map((loadedOption) =>
-          <LoadedOption
-            currentOptions={currentOptions}
-            key={`loaded-option-${digg(loadedOption.value)}`}
-            loadedOption={loadedOption}
-            onClick={this.onOptionClicked}
-          />
+          this.hayaSelectOption({
+            key: `loaded-option-${digg(loadedOption.value)}`,
+            loadedOption
+          })
         )}
         {loadedOptions?.length === 0 &&
           <div className="haya-select-no-options-container">
@@ -326,26 +314,87 @@ export default class CustomSelect extends React.PureComponent {
     e.preventDefault()
     e.stopPropagation()
 
-    const {onChange} = this.props
+    const {onChange, toggleOptions} = this.props
     const {multiple} = digs(this.props, "multiple")
 
-    this.setState((prevState) => {
-      const existingOption = prevState.currentOptions.find((currentOption) => currentOption.value == loadedOption.value)
+    this.setState(
+      (prevState) => {
+        const existingOption = prevState.currentOptions.find((currentOption) => currentOption.value == loadedOption.value)
+        const newState = {}
+        const {toggled} = digs(prevState, "toggled")
+        const newToggled = {...toggled}
+
+        if (existingOption) {
+          if (toggleOptions) {
+            const currentIndex = digg(toggled, loadedOption.value)
+
+            if (currentIndex >= (toggleOptions.length - 1)) {
+              delete newToggled[loadedOption.value]
+
+              newState.currentOptions = prevState.currentOptions.filter((currentOption) => currentOption.value != loadedOption.value)
+            } else {
+              newToggled[loadedOption.value] = toggled[loadedOption.value] + 1
+            }
+
+            newState.toggled = newToggled
+          } else {
+            newState.currentOptions = prevState.currentOptions.filter((currentOption) => currentOption.value != loadedOption.value)
+          }
+        } else {
+          if (toggleOptions) {
+            newToggled[loadedOption.value] = 0
+            newState.toggled = newToggled
+          }
 
-      if (existingOption) {
-        return {
-          currentOptions: prevState.currentOptions.filter((currentOption) => currentOption.value != loadedOption.value)
+          if (multiple || toggleOptions) {
+            newState.currentOptions = prevState.currentOptions.concat([loadedOption])
+          } else {
+            newState.currentOptions = [loadedOption]
+          }
         }
-      } else {
-        if (multiple) {
-          return {currentOptions: prevState.currentOptions.concat([loadedOption])}
-        } else {
-          return {currentOptions: [loadedOption]}
+
+        return newState
+      },
+      () => {
+        if (onChange) {
+          const toggles = {}
+
+          for(const toggleKey in this.state.toggled) {
+            const toggleValue = digg(this, "state", "toggled", toggleKey)
+            const toggleOption = digg(this, "props", "toggleOptions", toggleValue)
+
+            toggles[toggleKey] = toggleOption
+          }
+
+          onChange({
+            options: this.state.currentOptions,
+            toggles
+          })
         }
       }
-    })
+    )
 
     if (!multiple) this.closeOptions()
-    if (onChange) onChange(loadedOption)
+
+  }
+
+  presentOption = (currentValue) => {
+    const {toggleOptions} = this.props
+    const {toggled} = digs(this.state, "toggled")
+
+    return (
+      <div>
+        {toggleOptions && !(currentValue.value in toggled) &&
+          <i className="fa fa-fw" />
+        }
+        {toggleOptions && (currentValue.value in toggled) &&
+          <i className={`fa fa-fw fa-${toggleOptions[toggled[currentValue.value]].icon}`} />
+        }
+        {currentValue.text}
+        {("html" in currentValue) &&
+          <div dangerouslySetInnerHTML={{__html: digg(currentValue, "html")}} />
+        }
+      </div>
+    )
   }
 }