haya-select 1.0.1 → 1.0.4

package/package.json

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

package/src/select/index.jsx

@@ -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,13 +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}
       >
@@ -114,13 +131,13 @@ 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("haya_select.search_dot_dot_dot")} type="text"
               ref={digg(this, "searchTextInputRef")}
@@ -181,9 +198,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})
   }
@@ -267,7 +295,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={{
@@ -286,7 +314,7 @@ export default class CustomSelect extends React.PureComponent {
           />
         )}
         {loadedOptions?.length === 0 &&
-          <div className="custom-select-no-options-container">
+          <div className="haya-select-no-options-container">
             {I18n.t("haya_select.no_options_found")}
           </div>
         }

package/src/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,7 +27,7 @@
   position: absolute;
   z-index: 99999;
 
-  .custom-select-option {
+  .haya-select-option {
     padding: 4px 8px;
     color: #000;