haya-select 1.0.45 → 1.0.47

package/package.json

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

package/src/select/index.jsx

@@ -1,14 +1,16 @@
 import {anythingDifferent} from "set-state-compare/src/diff-utils"
-import config from "../config.js"
-import {dig, digg, digs} from "diggerize"
+import {dig, digg} from "diggerize"
 import debounce from "debounce"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 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 propTypesExact from "prop-types-exact"
-import {memo, useRef} from "react"
+import RenderHtml from "react-native-render-html"
+import {Portal} from "react-native-portalize"
+import {memo, useEffect, useRef} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import {Platform, Pressable, Text, TextInput, View} from "react-native"
 import useEventListener from "@kaspernj/api-maker/src/use-event-listener"
@@ -24,6 +26,8 @@ const nameForComponentWithMultiple = (component) => {
 export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
   static defaultProps = {
     multiple: false,
+    optionsAbsolute: true,
+    optionsWidth: null,
     search: false
   }
 
@@ -42,6 +46,8 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     onChangeValue: PropTypes.func,
     onOptionsClosed: PropTypes.func,
     options: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
+    optionsAbsolute: PropTypes.bool.isRequired,
+    optionsWidth: PropTypes.number,
     placeholder: PropTypes.node,
     search: PropTypes.bool.isRequired,
     selectContainerStyle: PropTypes.object,
@@ -55,6 +61,7 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     values: PropTypes.array
   })
 
+  callOptionsPositionAboveIfOutsideScreen = false
   p = fetchingObject(() => this.props)
   s = fetchingObject(() => this.state)
   tt = fetchingObject(this)
@@ -73,27 +80,39 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     this.setInstance({
       endOfSelectRef: useRef(),
       optionsContainerRef: useRef(),
-      currentSelectedRef: useRef(),
       searchTextInputRef: useRef(),
+      selectContainerRef: useRef(),
       t
     })
     this.useStates({
       currentOptions: () => this.defaultCurrentOptions(),
+      selectContainerLayout: null,
+      endOfSelectLayout: null,
       loadedOptions: () => this.defaultLoadedOptions(),
       opened: false,
-      optionsLeft: undefined,
+      optionsContainerLayout: null,
       optionsPlacement: undefined,
       optionsTop: undefined,
       optionsVisibility: undefined,
       optionsWidth: undefined,
+      scrollLeft: document.documentElement.scrollLeft,
+      scrollTop: document.documentElement.scrollTop,
       searchText: "",
-      scrollLeft: undefined,
-      scrollTop: undefined,
       toggled: () => this.defaultToggled()
     })
-    useEventListener(window, "click", this.onWindowClicked)
-    useEventListener(window, "resize", this.tt.onAnythingResizedDebounced)
-    useEventListener(window, "scroll", this.tt.onAnythingScrolledDebounced)
+
+    if (Platform.OS == "web") {
+      useEventListener(window, "click", this.tt.onWindowClicked)
+      useEventListener(window, "resize", this.tt.onAnythingResizedDebounced)
+      useEventListener(window, "scroll", this.tt.onAnythingScrolledDebounced)
+    }
+
+    useEffect(() => {
+      if (this.tt.callOptionsPositionAboveIfOutsideScreen && this.s.optionsContainerLayout) {
+        this.callOptionsPositionAboveIfOutsideScreen = false
+        this.setOptionsPositionAboveIfOutsideScreen()
+      }
+    }, [this.tt.callOptionsPositionAboveIfOutsideScreen, this.s.optionsContainerLayout])
   }
 
   defaultCurrentOptions() {
@@ -126,7 +145,7 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
   getValues = () => ("values" in this.props) ? this.p.values : this.s.currentOptions.map((currentOption) => currentOption.value)
   getCurrentOptions = () => {
     if ("values" in this.props && typeof this.props.values != "undefined") {
-      if (Array.isArray(this.props.options)) {
+      if (Array.isArray(this.props.options) && this.props.values) {
         return this.p.values.map((value) => this.p.options.find((option) => option.value == value))
       } else if (this.s.loadedOptions || typeof this.props.options == "function" && this.props.values) {
         if (this.s.loadedOptions) {
@@ -151,7 +170,7 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
         } else {
           this.setCurrentFromGivenValues()
         }
-      } else {
+      } else if (this.props.values) {
         return this.p.values.map((value) => ({value}))
       }
     }
@@ -192,12 +211,10 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
   }
 
   render() {
-    const {currentSelectedRef, endOfSelectRef} = this.tt
+    const {endOfSelectRef} = this.tt
     const {className, placeholder, toggleOptions} = this.props
     const {opened, optionsPlacement} = this.s
     const currentOptions = this.getCurrentOptions()
-    const BodyPortal = config.getBodyPortal()
-
     const selectContainerStyleActual = this.stylingFor("selectContainer", {
       display: "flex",
       flexDirection: "row",
@@ -250,19 +267,15 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
         }}
         style={this.stylingFor("main")}
       >
-        {opened &&
-          <BodyPortal>
-            {this.optionsContainer()}
-          </BodyPortal>
-        }
         <Pressable
           dataSet={{class: "select-container"}}
+          onLayout={this.tt.onSelectContainerLayout}
           onPress={this.tt.onSelectClicked}
+          ref={this.tt.selectContainerRef}
           style={selectContainerStyleActual}
         >
           <View
             dataSet={{class: "current-selected"}}
-            ref={currentSelectedRef}
             style={this.stylingFor("currentSelected", {width: "calc(100% - 27px)", flexWrap: "wrap"})}
           >
             {opened &&
@@ -284,7 +297,7 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
             {!opened &&
               <>
                 {currentOptions.length == 0 &&
-                  <Text style={this.stylingFor("nothingSelected", {color: "grey"})}>
+                  <Text numberOfLines={1} style={this.stylingFor("nothingSelected", {color: "grey"})}>
                     {placeholder || this.t(".nothing_selected")}
                   </Text>
                 }
@@ -348,7 +361,12 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
             </Text>
           </View>
         </Pressable>
-        <View ref={endOfSelectRef} />
+        <View dataSet={{class: "end-of-select"}} onLayout={this.tt.onEndOfSelectLayout} ref={endOfSelectRef} />
+        {opened &&
+          <Portal dataSet={{class: "haya-select-portal"}}>
+            {this.optionsContainer()}
+          </Portal>
+        }
       </View>
     )
   }
@@ -425,6 +443,10 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     this.setState({loadedOptions})
   }
 
+  onSelectContainerLayout = (e) => this.setState({selectContainerLayout: Object.assign({}, digg(e, "nativeEvent", "layout"))})
+  onEndOfSelectLayout = (e) => this.setState({endOfSelectLayout: Object.assign({}, digg(e, "nativeEvent", "layout"))})
+  onOptionsContainerLayout = (e) => this.setState({optionsContainerLayout: Object.assign({}, digg(e, "nativeEvent", "layout"))})
+
   onSelectClicked = (e) => {
     e.preventDefault()
     e.stopPropagation()
@@ -443,7 +465,8 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
   closeOptions() {
     this.setState({
       loadedOptions: undefined,
-      opened: false
+      opened: false,
+      optionsContainerLayout: null
     })
 
     if (this.props.onOptionsClosed) {
@@ -456,11 +479,16 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
   openOptions() {
     this.setOptionsPositionBelow()
     this.loadOptions()
+    this.callOptionsPositionAboveIfOutsideScreen = true
     this.setState(
-      {opened: true, searchText: ""},
+      {
+        opened: true,
+        scrollLeft: Platform.OS == "web" ? document.documentElement.scrollLeft : null,
+        scrollTop: Platform.OS == "web" ? document.documentElement.scrollTop : null,
+        searchText: ""
+      },
       () => {
         this.focusTextInput()
-        this.setOptionsPositionAboveIfOutsideScreen()
       }
     )
   }
@@ -472,19 +500,17 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
       return // Debounce after un-mount handeling.
     }
 
+    this.callOptionsPositionAboveIfOutsideScreen = true
     this.setOptionsPositionBelow()
-    this.setOptionsPositionAboveIfOutsideScreen()
   }
 
   setOptionsPositionAboveIfOutsideScreen() {
-    const {optionsContainerRef} = this.tt
-    const {optionsTop} = this.s
-    const optionsHeight = digg(optionsContainerRef, "current", "offsetHeight")
-    const scrollTop = document.documentElement.scrollTop
-    const optionsTotalHeight = optionsHeight + optionsTop + scrollTop
-    const windowHeightWithScroll = window.innerHeight + scrollTop
+    const {optionsContainerLayout} = this.s
+    const optionsTop = this.s.endOfSelectLayout.top
+    const optionsTotalBottomPosition = optionsContainerLayout.height + optionsTop
+    const windowHeightWithScroll = document.body.clientHeight + this.s.scrollTop
 
-    if (windowHeightWithScroll < optionsTotalHeight) {
+    if (windowHeightWithScroll < optionsTotalBottomPosition) {
       this.setOptionsPositionAbove()
     } else {
       this.setState({optionsVisibility: "visible"})
@@ -492,49 +518,32 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
   }
 
   setOptionsPositionAbove() {
-    const {optionsContainerRef, currentSelectedRef, endOfSelectRef} = this.tt
-    const optionsHeight = digg(optionsContainerRef, "current", "offsetHeight")
-    const position = currentSelectedRef.current.getBoundingClientRect()
-    const {top} = digs(position, "top")
-    const optionsTop = top - optionsHeight + 2
-    const {left, width} = digs(endOfSelectRef.current.getBoundingClientRect(), "left", "width")
+    const {endOfSelectLayout} = this.s
 
     this.setState(
       {
         opened: true,
-        optionsLeft: left,
         optionsPlacement: "above",
-        optionsTop,
         optionsVisibility: "visible",
-        optionsWidth: width,
-        scrollLeft: document.documentElement.scrollLeft,
-        scrollTop: document.documentElement.scrollTop
+        optionsWidth: endOfSelectLayout.width
       },
       () => this.focusTextInput()
     )
   }
 
   setOptionsPositionBelow() {
-    const {endOfSelectRef} = this.tt
-    const position = endOfSelectRef.current.getBoundingClientRect()
-    const {left, top, width} = digs(position, "left", "top", "width")
-
     this.setState(
       {
         opened: true,
-        optionsLeft: left,
         optionsPlacement: "below",
-        optionsTop: top,
         optionsVisibility: "hidden",
-        optionsWidth: width,
-        scrollLeft: document.documentElement.scrollLeft,
-        scrollTop: document.documentElement.scrollTop
+        optionsWidth: this.s.endOfSelectLayout.width
       },
       () => this.focusTextInput()
     )
   }
 
-  onAnythingResized = (e) => {
+  onAnythingResized = () => {
     if (this.s.opened) {
       this.setOptionsPosition()
     }
@@ -542,8 +551,12 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
 
   onAnythingResizedDebounced = debounce(this.tt.onAnythingResized, 25)
 
-  onAnythingScrolled = (e) => {
+  onAnythingScrolled = () => {
     if (this.s.opened) {
+      this.setState({
+        scrollLeft: document.documentElement.scrollLeft,
+        scrollTop: document.documentElement.scrollTop
+      })
       this.setOptionsPosition()
     }
   }
@@ -562,26 +575,55 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
 
   optionsContainer() {
     const {optionsContainerRef} = this.tt
-    const {loadedOptions, optionsLeft, optionsTop, optionsVisibility, optionsWidth, scrollLeft, scrollTop} = this.s
+    const {optionsAbsolute} = this.p
+    const {selectContainerLayout, loadedOptions, endOfSelectLayout, optionsContainerLayout, optionsPlacement, optionsVisibility} = this.s
+    let top
+
+    const style = this.stylingFor("optionsContainer", {
+      position: "absolute",
+      zIndex: 99999,
+      elevation: 99999,
+      visibility: optionsVisibility,
+      width: this.p.optionsWidth || this.s.optionsWidth,
+      backgroundColor: "#fff",
+      border: "1px solid #999",
+      maxHeight: 300,
+      overflowY: "auto"
+    })
+
+    if (!optionsAbsolute) {
+      style.left = 0
+      style.bottom = 0
+    } else if (optionsPlacement == "below") {
+      if (Platform.OS == "web") {
+        // onLayout top value is sometimes negative so use browser JS to get it instead
+        top = digg(this.tt.endOfSelectRef.current.getBoundingClientRect(), "top")
+      } else {
+        top = selectContainerLayout.top
+      }
+
+      style.left = this.s.endOfSelectLayout.left
+      style.top = top - 2
+    } else if (optionsPlacement == "above") {
+      if (Platform.OS == "web") {
+        // onLayout top value is sometimes negative so use browser JS to get it instead
+        top = digg(this.tt.selectContainerRef.current.getBoundingClientRect(), "top")
+      } else {
+        top = selectContainerLayout.top
+      }
+
+      style.left = endOfSelectLayout.left
+      style.top = top - optionsContainerLayout.height + 1
+    } else {
+      throw new Error(`Unkonwn options placement: ${optionsPlacement}`)
+    }
 
     return (
       <View
         dataSet={{class: "options-container", id: idForComponent(this)}}
+        onLayout={this.tt.onOptionsContainerLayout}
         ref={optionsContainerRef}
-        style={
-          this.stylingFor("optionsContainer", {
-            position: "absolute",
-            left: optionsLeft + scrollLeft,
-            top: optionsTop + scrollTop - 1,
-            zIndex: 99999,
-            visibility: optionsVisibility,
-            width: optionsWidth,
-            backgroundColor: "#fff",
-            border: "1px solid #999",
-            maxHeight: 300,
-            overflowY: "auto"
-          })
-        }
+        style={style}
       >
         {loadedOptions?.map((loadedOption) =>
           this.hayaSelectOption({
@@ -720,18 +762,21 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
         }}
       >
         {toggleOptions && !(currentValue.value in toggled) &&
-          <i className="fa fa-fw" />
+          <View dataSet={{class: "toggle-icon-placeholder"}} style={{width: 25}} />
         }
         {toggleOptions && (currentValue.value in toggled) &&
-          <i className={`fa fa-fw fa-${icon}`} />
+          <FontAwesomeIcon dataSet={{class: "toggle-icon"}} name={icon} style={{width: 25}} />
         }
         {currentValue.content}
         {!currentValue.content &&
-          <Text className="option-presentation-text" style={this.stylingFor("optionPresentationText", {whiteSpace: "nowrap"})}>
+          <Text dataSet={{class: "option-presentation-text"}} style={this.stylingFor("optionPresentationText", {whiteSpace: "nowrap"})}>
             {currentValue.text}
           </Text>
         }
-        {("html" in currentValue) &&
+        {("html" in currentValue) && Platform.OS != "web" &&
+          <RenderHtml source={{html: digg(currentValue, "html")}} />
+        }
+        {("html" in currentValue) && Platform.OS == "web" &&
           <div dangerouslySetInnerHTML={{__html: digg(currentValue, "html")}} />
         }
       </View>