haya-select 1.0.0 → 1.0.3

package/package.json

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

package/src/config.js

@@ -0,0 +1,15 @@
+class HayaSelectConfiguration {
+  getBodyPortal() {
+    if (!this._bodyPortal) throw new Error("bodyPortal wasn't set")
+
+    return this._bodyPortal
+  }
+
+  setBodyPortal(newBodyPortal) {
+    this._bodyPortal = newBodyPortal
+  }
+}
+
+const configuration = new HayaSelectConfiguration()
+
+export default configuration

package/src/{index.jsx → select/index.jsx}

@@ -1,6 +1,6 @@
 import "./style"
-import BodyPortal from "components/layout/body-portal"
 import classNames from "classnames"
+import config from "../config.js"
 import {digg, digs} from "diggerize"
 import debounce from "debounce"
 import {idForComponent, nameForComponent} from "@kaspernj/api-maker-inputs"
@@ -33,7 +33,7 @@ const LoadedOption = class LoadedOption extends BaseComponent {
 
     return (
       <div
-        className="custom-select-option"
+        className="haya-select-option"
         data-selected={selected}
         data-value={digg(loadedOption, "value")}
         onClick={this.onOptionClicked}
@@ -56,6 +56,7 @@ export default class CustomSelect extends React.PureComponent {
   static propTypes = {
     attribute: PropTypes.string,
     className: PropTypes.string,
+    defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     defaultValues: PropTypes.array,
     defaultValuesFromOptions: PropTypes.array,
     model: PropTypes.object,
@@ -70,7 +71,7 @@ export default class CustomSelect extends React.PureComponent {
   searchTextInputRef = React.createRef()
 
   state = {
-    currentOptions: [],
+    currentOptions: this.defaultCurrentOptions(),
     loadedOptions: this.defaultLoadedOptions(),
     opened: false,
     optionsLeft: undefined,
@@ -80,12 +81,28 @@ export default class CustomSelect extends React.PureComponent {
     scrollTop: undefined
   }
 
+  defaultCurrentOptions() {
+    const {defaultValue, defaultValues} = this.props
+    const {options} = digs(this.props, "options")
+
+    if (!Array.isArray(options)) return []
+
+    return options.filter(({value}) =>
+      (defaultValue && value == defaultValue) ||
+        (defaultValues && defaultValues.includes(value))
+    )
+  }
+
   defaultLoadedOptions() {
     const {options} = digs(this.props, "options")
 
-    if (typeof options == "function") return undefined
+    if (typeof options == "function") {
+      return undefined
+    } else if (Array.isArray(options)) {
+      return options
+    }
 
-    return options
+    throw new Error(`Unknown type of options: ${typeof options}`)
   }
 
   componentDidMount() {
@@ -98,12 +115,13 @@ export default class CustomSelect extends React.PureComponent {
 
   render() {
     const {endOfSelectRef} = digs(this, "endOfSelectRef")
-    const {attribute, className, defaultValues, model, multiple, onChange, options, search, ...restProps} = this.props
+    const {attribute, className, defaultValue, defaultValues, model, multiple, onChange, options, search, ...restProps} = this.props
     const {currentOptions, opened} = digs(this.state, "currentOptions", "opened")
+    const BodyPortal = config.getBodyPortal()
 
     return (
       <div
-        className={classNames("components-custom-select", className)}
+        className={classNames("haya-select", className)}
         data-id={idForComponent(this)}
         {...restProps}
       >
@@ -113,15 +131,15 @@ export default class CustomSelect extends React.PureComponent {
           </BodyPortal>
         }
         <div
-          className="custom-select-current-selected"
+          className="haya-select-current-selected"
           data-opened={opened}
           onClick={this.onSelectClicked}
         >
           {opened &&
             <input
-              className="custom-select-search-text-input"
+              className="haya-select-search-text-input"
               onChange={digg(this, "onSearchTextInputChangedDebounced")}
-              placeholder={I18n.t("js.components.custom_select.search_dot_dot_dot")} type="text"
+              placeholder={I18n.t("haya_select.search_dot_dot_dot")} type="text"
               ref={digg(this, "searchTextInputRef")}
             />
           }
@@ -129,7 +147,7 @@ export default class CustomSelect extends React.PureComponent {
             <>
               {currentOptions.length == 0 &&
                 <div style={{color: "grey"}}>
-                  {I18n.t("js.components.custom_select.nothing_selected")}
+                  {I18n.t("haya_select.nothing_selected")}
                 </div>
               }
               {currentOptions.map((currentOption) =>
@@ -154,11 +172,15 @@ export default class CustomSelect extends React.PureComponent {
   defaultValues () {
     const {attribute, defaultValuesFromOptions, model} = this.props
 
+    console.log("defaultValues")
+
     if (defaultValuesFromOptions) return defaultValuesFromOptions
 
     if (attribute && model) {
       if (!(attribute in model)) throw new Error(`No such attribute on ${model.modelClassData().name}: ${attribute}`)
 
+      console.log(`Default value from ${attribute}: ${model[attribute]()}`)
+
       return model[attribute]()
     }
   }
@@ -180,9 +202,20 @@ export default class CustomSelect extends React.PureComponent {
 
   loadOptions = async () => {
     const {options} = digs(this.props, "options")
-    const loadedOptions = await options({
-      searchValue: digg(this, "searchTextInputRef", "current")?.value
-    })
+    const searchValue = digg(this, "searchTextInputRef", "current")?.value
+
+    if (Array.isArray(options)) {
+      return this.loadOptionsFromArray(options, searchValue)
+    }
+
+    const loadedOptions = await options({searchValue})
+
+    this.setState({loadedOptions})
+  }
+
+  loadOptionsFromArray(options, searchValue) {
+    const lowerSearchValue = searchValue?.toLowerCase()
+    const loadedOptions = options.filter(({text}) => !lowerSearchValue || text.toLowerCase().includes(lowerSearchValue))
 
     this.setState({loadedOptions})
   }
@@ -266,7 +299,7 @@ export default class CustomSelect extends React.PureComponent {
 
     return (
       <div
-        className="custom-select-options-container"
+        className="haya-select-options-container"
         data-id={idForComponent(this)}
         ref={optionsContainerRef}
         style={{
@@ -285,8 +318,8 @@ export default class CustomSelect extends React.PureComponent {
           />
         )}
         {loadedOptions?.length === 0 &&
-          <div className="custom-select-no-options-container">
-            {I18n.t("js.components.custom_select.no_options_found")}
+          <div className="haya-select-no-options-container">
+            {I18n.t("haya_select.no_options_found")}
           </div>
         }
       </div>

package/src/{style.scss → select/style.scss}

@@ -1,4 +1,4 @@
-.custom-select-current-selected {
+.haya-select-current-selected {
   background-color: #fff;
   border: 1px solid #999;
   cursor: pointer;
@@ -13,13 +13,13 @@
   }
 }
 
-.custom-select-search-text-input {
+.haya-select-search-text-input {
   border: 0;
   outline: none;
   padding: 0;
 }
 
-.custom-select-options-container {
+.haya-select-options-container {
   background-color: #fff;
   border: 1px solid #999;
   max-height: 300px;
@@ -27,8 +27,9 @@
   position: absolute;
   z-index: 99999;
 
-  .custom-select-option {
+  .haya-select-option {
     padding: 4px 8px;
+    color: #000;
 
     &[data-selected="true"] {
       background-color: #80b2ff;