haya-select 1.0.58 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haya-select",
-  "version": "1.0.58",
+  "version": "1.0.60",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,8 @@
     "debounce": "^2.1.0",
     "diggerize": "^1.0.4",
     "fetching-object": "^1.0.1",
-    "set-state-compare": "^1.0.45"
+    "react-native-render-html": "^6.3.4",
+    "set-state-compare": "^1.0.52"
   },
   "peerDependencies": {
     "conjointment": ">= 0.1.4",

package/src/select/index.jsx

@@ -427,8 +427,8 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
         icon={this.iconForOption(loadedOption)}
         key={key}
         option={loadedOption}
-        onOptionClicked={this.onOptionClicked}
-        presentOption={this.presentOption}
+        onOptionClicked={this.tt.onOptionClicked}
+        presentOption={this.tt.presentOption}
       />
     )
   }
@@ -765,16 +765,20 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
       <View
         dataSet={{
           class: "option-presentation",
+          text: option.text,
           toggleIcon: toggleOption?.icon,
           toggleValue: toggleOption?.value,
           value: option.value
         }}
+        style={{flexDirection: "row"}}
       >
         {toggleOptions && !(option.value in toggled) &&
-          <View dataSet={{class: "toggle-icon-placeholder"}} style={{width: 25}} />
+          <View dataSet={{class: "toggle-icon-placeholder"}} style={{width: 20}} />
         }
         {toggleOptions && (option.value in toggled) &&
-          <FontAwesomeIcon dataSet={{class: "toggle-icon"}} name={icon} style={{width: 25}} />
+          <View style={{alignItems: "center", justifyContent: "center", width: 20}}>
+            <FontAwesomeIcon dataSet={{class: "toggle-icon"}} name={icon} />
+          </View>
         }
         {(() => {
           if (mode == "current" && option.currentContent) {
@@ -787,7 +791,7 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
             return <div dangerouslySetInnerHTML={{__html: digg(option, "html")}} />
           } else {
             return (
-              <Text dataSet={{class: "option-presentation-text"}} style={this.stylingFor("optionPresentationText", {whiteSpace: "nowrap"})}>
+              <Text dataSet={{class: "option-presentation-text"}} style={this.stylingFor("optionPresentationText", {flex: 1, whiteSpace: "nowrap"})}>
                 {option.text}
               </Text>
             )
@@ -803,8 +807,6 @@ export default memo(shapeComponent(class HayaSelect extends ShapeComponent {
     const currentValues = currentOptions?.map((currentOption) => currentOption.value)
     const stateValues = this.s.currentOptions?.map((currentOption) => currentOption.value)
 
-    console.log("setCurrentFromGivenValues", {stateValues})
-
     if (anythingDifferent(currentValues, stateValues)) {
       this.setState({currentOptions})
     }

package/src/select/option.jsx

@@ -4,9 +4,13 @@ import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-compon
 import {View} from "react-native"
 
 export default memo(shapeComponent(class Option extends ShapeComponent {
+  static defaultProps = {
+    disabled: false
+  }
+
   static propTypes = {
     currentOptionValues: PropTypes.array.isRequired,
-    disabled: PropTypes.bool,
+    disabled: PropTypes.bool.isRequired,
     icon: PropTypes.string,
     onOptionClicked: PropTypes.func.isRequired,
     option: PropTypes.object.isRequired,
@@ -59,12 +63,12 @@ export default memo(shapeComponent(class Option extends ShapeComponent {
         onPointerOut={this.tt.onPointerOut}
         style={style}
       >
-        {this.props.presentOption(option, "option")}
+        {this.p.presentOption(option, "option")}
       </View>
     )
   }
 
-  onClick = (e) => this.props.onOptionClicked(e, this.props.option)
+  onClick = (e) => this.p.onOptionClicked(e, this.props.option)
   onPointerOver = () => this.setState({hover: true})
   onPointerOut = () => this.setState({hover: false})
 }))