@react-native-hero/picker 0.0.5 → 0.0.9

package/HeroPicker.podspec

@@ -3,17 +3,18 @@ require 'json'
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 Pod::Spec.new do |s|
-  s.name         = "HeroPicker"
-  s.version      = package['version']
-  s.summary      = package['description']
-  s.license      = package['license']
+  s.name          = "HeroPicker"
+  s.version       = package['version']
+  s.summary       = package['description']
+  s.license       = package['license']
 
-  s.authors      = package['author']
-  s.homepage     = package['homepage']
-  s.platform     = :ios, "9.0"
+  s.authors       = package['author']
+  s.homepage      = package['homepage']
+  s.platform      = :ios, "9.0"
 
-  s.source       = { :git => "https://github.com/react-native-hero/picker.git", :tag => "v#{s.version}" }
-  s.source_files = "ios/**/*.{h,m,swift}"
+  s.source        = { :git => "https://github.com/react-native-hero/picker.git", :tag => "v#{s.version}" }
+  s.source_files  = "ios/**/*.{h,m,swift}"
+  s.swift_version = '5.0'
 
   s.dependency 'React'
 end

package/README.md

@@ -45,9 +45,9 @@ import {
 
 <Picker
   options={[
-    { text: '1', value: '1' },
-    { text: '2', value: '2' },
-    { text: '3', value: '3' },
+    { text: 'displayed text', value: 'support string or number' },
+    { text: '2', value: 'string' },
+    { text: '3', value: 3 },
   ]}
   onChange={data => {
     data.index

package/android/src/main/java/com/github/reactnativehero/picker/PickerView.kt

@@ -0,0 +1,124 @@
+package com.github.reactnativehero.picker
+
+import android.graphics.Color
+import com.contrarywind.adapter.WheelAdapter
+import com.contrarywind.view.WheelView
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class PickerView(private val reactContext: ThemedReactContext) : WheelView(reactContext) {
+
+    companion object {
+        private val dividerColor = Color.parseColor("#33000000")
+    }
+
+    var options: ReadableArray = Arguments.createArray()
+
+        set(value) {
+            field = value
+
+            val count = value.size()
+            val stringList = arrayListOf<String>()
+
+            for (i in 0 until value.size()) {
+                val map = value.getMap(i)!!
+                var text = "undefined"
+                if (map.hasKey("text")) {
+                    text = map.getString("text") as String
+                }
+                stringList.add(text)
+            }
+
+            adapter = object: WheelAdapter<String> {
+                override fun indexOf(o: String?): Int {
+                    return stringList.indexOf(o)
+                }
+
+                override fun getItemsCount(): Int {
+                    return count
+                }
+
+                override fun getItem(index: Int): String {
+                    return stringList[index]
+                }
+            }
+
+            if (tempIndex >= 0) {
+                selectedIndex = tempIndex
+                tempIndex = -1
+            }
+
+        }
+
+    var tempIndex = -1
+
+    var selectedIndex = -1
+
+        set(value) {
+            field = value
+
+            val optionsSize = options.size()
+
+            if (value < 0 || value >= optionsSize) {
+                if (optionsSize == 0) {
+                    tempIndex = value
+                }
+                return
+            }
+
+            currentItem = value
+
+            val map = Arguments.createMap()
+            map.putInt("index", value)
+
+            // putMap 必须传入 WritableMap
+            // 如果直接传 ReadableMap 会报错
+            val option = Arguments.createMap()
+            option.merge(options.getMap(value))
+
+            map.putMap("option", option)
+            sendEvent("onChange", map)
+        }
+
+    var color = Color.BLACK
+
+        set(value) {
+            field = value
+
+            setTextColorOut(value)
+            setTextColorCenter(value)
+        }
+
+    var fontSize = 16f
+
+        set(value) {
+            field = value
+
+            setTextSize(value)
+        }
+
+    var rowHeight = 44
+
+        set(value) {
+            field = value
+
+            setLineSpacingMultiplier(rowHeight / fontSize)
+        }
+
+    init {
+        setCyclic(false)
+        setDividerColor(dividerColor)
+        setOnItemSelectedListener {
+            selectedIndex = it
+        }
+    }
+
+    private fun sendEvent(eventName: String, params: WritableMap) {
+        reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(id, eventName, params)
+    }
+
+}

package/android/src/main/java/com/github/reactnativehero/picker/RNTPickerManager.kt

@@ -1,104 +1,45 @@
 package com.github.reactnativehero.picker
 
-import android.graphics.Color
-import com.contrarywind.adapter.WheelAdapter
-import com.contrarywind.view.WheelView
 import com.facebook.react.bridge.*
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewProps
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.uimanager.events.RCTEventEmitter
-import kotlin.collections.HashMap
 
-class RNTPickerManager(private val reactAppContext: ReactApplicationContext) : SimpleViewManager<WheelView>() {
-
-    companion object {
-        private val dividerColor = Color.parseColor("#CCCCCC")
-        private var fontSizes = HashMap<Int, Float>()
-    }
+class RNTPickerManager(private val reactAppContext: ReactApplicationContext) : SimpleViewManager<PickerView>() {
 
     override fun getName(): String {
         return "RNTPicker"
     }
 
-    override fun createViewInstance(reactContext: ThemedReactContext): WheelView {
-
-        val view = WheelView(reactContext)
-
-        view.setCyclic(false)
-        view.setDividerColor(dividerColor)
-
-        return view
+    override fun createViewInstance(reactContext: ThemedReactContext): PickerView {
+        return PickerView(reactContext)
     }
 
     @ReactProp(name = "options")
-    fun setOptions(view: WheelView, options: ReadableArray) {
-
-        val count = options.size()
-        val mapList = arrayListOf<HashMap<String, String>>()
-        val stringList = arrayListOf<String>()
-
-        for (item in options.toArrayList()) {
-            val map = item as HashMap<String, String>
-            var text = "undefined"
-            if (map.contains("text")) {
-                text = map["text"].toString()
-            }
-            mapList.add(map)
-            stringList.add(text)
-        }
-
-        view.adapter = object: WheelAdapter<String> {
-            override fun indexOf(o: String?): Int {
-                return stringList.indexOf(o)
-            }
-
-            override fun getItemsCount(): Int {
-                return count
-            }
-
-            override fun getItem(index: Int): String {
-                return stringList[index]
-            }
-        }
-
-        view.setOnItemSelectedListener {
-            val map = Arguments.createMap()
-            val option = Arguments.createMap()
-            for ((key, value) in mapList[it]) {
-                option.putString(key, value)
-            }
-            map.putInt("index", it)
-            map.putMap("option", option)
-            sendEvent(view.id, "onChange", map)
-        }
-
+    fun setOptions(view: PickerView, options: ReadableArray) {
+        view.options = options
     }
 
     @ReactProp(name = "selectedIndex")
-    fun setSelectedIndex(view: WheelView, selectedIndex: Int) {
-        view.currentItem = selectedIndex
+    fun setSelectedIndex(view: PickerView, selectedIndex: Int) {
+        view.selectedIndex = selectedIndex
     }
 
     @ReactProp(name = ViewProps.COLOR, customType = "Color")
-    fun setColor(view: WheelView, color: Int) {
-        view.setTextColorOut(color)
-        view.setTextColorCenter(color)
+    fun setColor(view: PickerView, color: Int) {
+        view.color = color
     }
 
     @ReactProp(name = "fontSize")
-    fun setFontSize(view: WheelView, fontSize: Float) {
-        fontSizes[view.id] = fontSize
-        view.setTextSize(fontSize)
+    fun setFontSize(view: PickerView, fontSize: Float) {
+        view.fontSize = fontSize
     }
 
     @ReactProp(name = "rowHeight")
-    fun setRowHeight(view: WheelView, rowHeight: Int) {
-        fontSizes[view.id]?.let {
-            view.setLineSpacingMultiplier(rowHeight / it)
-        }
+    fun setRowHeight(view: PickerView, rowHeight: Int) {
+        view.rowHeight = rowHeight
     }
 
     override fun getExportedCustomBubblingEventTypeConstants(): MutableMap<String, Any> {
@@ -107,15 +48,4 @@ class RNTPickerManager(private val reactAppContext: ReactApplicationContext) : S
                 .build()
     }
 
-    override fun onDropViewInstance(view: WheelView) {
-        super.onDropViewInstance(view)
-        if (fontSizes.contains(view.id)) {
-            fontSizes.remove(view.id)
-        }
-    }
-
-    private fun sendEvent(id: Int, eventName: String, params: WritableMap) {
-        reactAppContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(id, eventName, params)
-    }
-
 }

package/index.js

@@ -14,8 +14,7 @@ class PickerComponent extends PureComponent {
   static propTypes = {
     options: PropTypes.arrayOf(
       PropTypes.shape({
-        text: PropTypes.string,
-        value: PropTypes.string,
+        text: PropTypes.string.isRequired,
       })
     ).isRequired,
     selectedIndex: PropTypes.number,

package/ios/RNTPicker/Picker/PickerView.swift

@@ -7,26 +7,31 @@ public class PickerView : UIView {
     
     @objc public var options = [NSDictionary]() {
         didSet {
-            DispatchQueue.main.async {
-                self.pickerView.reloadAllComponents()
-            }
+            refresh()
         }
     }
     
     @objc public var selectedIndex = -1 {
         didSet {
+
+            guard selectedIndex >= 0, selectedIndex < options.count else {
+                return
+            }
+            
+            if let onChange = onChange {
+                let dict = NSMutableDictionary()
+                dict["index"] = selectedIndex
+                dict["option"] = options[selectedIndex]
+                onChange(dict)
+            }
             
             DispatchQueue.main.async {
                 
-                let selectedIndex = self.selectedIndex
-                
-                guard selectedIndex != self.pickerView.selectedRow(inComponent: 0) else {
+                guard self.selectedIndex != self.pickerView.selectedRow(inComponent: 0) else {
                     return
                 }
                 
-                if selectedIndex >= 0 && selectedIndex < self.options.count {
-                    self.pickerView.selectRow(selectedIndex, inComponent: 0, animated: true)
-                }
+                self.pickerView.selectRow(self.selectedIndex, inComponent: 0, animated: true)
                 
             }
             
@@ -35,7 +40,9 @@ public class PickerView : UIView {
 
     @objc public var color = UIColor.black {
         didSet {
-            refreshIfNeeded()
+            if options.count > 0 {
+                refresh()
+            }
         }
     }
     
@@ -47,13 +54,17 @@ public class PickerView : UIView {
     
     @objc public var rowHeight = 44 {
         didSet {
-            refreshIfNeeded()
+            if options.count > 0 {
+                refresh()
+            }
         }
     }
     
     private var font = UIFont.systemFont(ofSize: 16) {
         didSet {
-            refreshIfNeeded()
+            if options.count > 0 {
+                refresh()
+            }
         }
     }
     
@@ -82,12 +93,21 @@ public class PickerView : UIView {
         
     }()
     
-    private func refreshIfNeeded() {
-        if options.count > 0 {
-            DispatchQueue.main.async {
-                self.pickerView.reloadAllComponents()
+    private func refresh() {
+
+        DispatchQueue.main.async {
+            
+            self.pickerView.reloadComponent(0)
+            
+            if self.selectedIndex >= 0 && self.selectedIndex < self.options.count {
+                self.pickerView.selectRow(self.selectedIndex, inComponent: 0, animated: true)
             }
+            else {
+                self.selectedIndex = 0
+            }
+            
         }
+        
     }
     
 }
@@ -133,12 +153,6 @@ extension PickerView : UIPickerViewDelegate {
 
     public func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
         selectedIndex = row
-        if let onChange = onChange, options.count > row {
-            let dict = NSMutableDictionary()
-            dict["index"] = row
-            dict["option"] = options[row]
-            onChange(dict)
-        }
     }
     
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-hero/picker",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "description": "react native picker",
   "main": "index.js",
   "scripts": {