@react-native-hero/spin 0.0.1 → 0.0.3

package/README.md

@@ -1 +1,41 @@
-# testing
+# @react-native-hero/spin
+
+## Getting started
+
+Install the library using either Yarn:
+
+```
+yarn add @react-native-hero/spin
+```
+
+or npm:
+
+```
+npm install --save @react-native-hero/spin
+```
+
+## Link
+
+For android, the package will be linked automatically on build.
+
+- React Native <= 0.59
+
+run the following command to link the package:
+
+```
+$ react-native link @react-native-hero/spin
+```
+
+## Example
+
+```js
+import {
+  SIZE,
+  Spin,
+} from '@react-native-hero/spin'
+
+<Spin
+  size={SIZE.SMALL}
+  color="#999"
+/>
+```

package/android/build.gradle

@@ -3,8 +3,8 @@ buildscript {
     def kotlinVersion = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : '1.3.40'
 
     repositories {
-        jcenter()
         google()
+        mavenCentral()
     }
 
     dependencies {
@@ -39,4 +39,4 @@ dependencies {
     implementation "com.github.ybq:Android-SpinKit:${safeExtGet('spinkitVersion', '1.2.0')}"
 }
 
-apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android'

package/android/src/main/java/com/github/reactnativehero/spin/RNTSpinManager.kt

@@ -4,25 +4,25 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.github.ybq.android.spinkit.SpinKitView
+import com.github.ybq.android.spinkit.style.FadingCircle
 
-class RNTSpinManager(private val reactAppContext: ReactApplicationContext) : SimpleViewManager<SpinView>() {
+class RNTSpinManager(private val reactAppContext: ReactApplicationContext) : SimpleViewManager<SpinKitView>() {
 
     override fun getName(): String {
         return "RNTSpin"
     }
 
-    override fun createViewInstance(reactContext: ThemedReactContext): SpinView {
-        return SpinView(reactContext)
+    override fun createViewInstance(reactContext: ThemedReactContext): SpinKitView {
+        val spin = SpinKitView(reactContext)
+        val style = FadingCircle()
+        spin.setIndeterminateDrawable(style)
+        return spin
     }
 
-    @ReactProp(name = "size")
-    fun setSize(view: SpinView, size: Int) {
-        view.size = size
-    }
-    
     @ReactProp(name = "color", customType = "Color")
-    fun setColor(view: SpinView, color: Int) {
-        view.color = color
+    fun setColor(view: SpinKitView, color: Int) {
+        view.setColor(color)
     }
 
-}
+}

package/index.js

@@ -1,4 +1,10 @@
 
 import SpinComponent from './js/Spin'
+import { SMALL, LARGE } from './js/size'
+
+export const SIZE = {
+  SMALL,
+  LARGE,
+}
 
 export const Spin = SpinComponent

package/js/Spin.android.js

@@ -8,6 +8,8 @@ import {
 
 import PropTypes from 'prop-types'
 
+import { SMALL } from './size'
+
 class Spin extends PureComponent {
 
   static propTypes = {
@@ -16,7 +18,7 @@ class Spin extends PureComponent {
   }
 
   static defaultProps = {
-    size: 'small',
+    size: SMALL,
     color: '#999',
   }
 
@@ -27,10 +29,22 @@ class Spin extends PureComponent {
       color,
     } = this.props
 
+    // 尺寸和 ios 保持一致
+    let width = 20
+    let height = 20
+    if (size !== SMALL) {
+      width = height = 36
+    }
+
     return (
       <RNTSpin
-        size={size === 'small' ? 10 : 20}
         color={color}
+        style={{
+          width,
+          height,
+          // ios 是居中的表现
+          alignSelf: 'center',
+        }}
       />
     )
 

package/js/Spin.ios.js

@@ -3,11 +3,14 @@ import React, {
 } from 'react'
 
 import {
+  View,
   ActivityIndicator,
 } from 'react-native'
 
 import PropTypes from 'prop-types'
 
+import { SMALL } from './size'
+
 export default class Spin extends PureComponent {
 
   static propTypes = {
@@ -16,7 +19,7 @@ export default class Spin extends PureComponent {
   }
 
   static defaultProps = {
-    size: 'small',
+    size: SMALL,
     color: '#999',
   }
 
@@ -36,4 +39,4 @@ export default class Spin extends PureComponent {
 
   }
 
-}
+}

package/js/size.js

@@ -0,0 +1,2 @@
+export const SMALL = 'small'
+export const LARGE = 'large'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-hero/spin",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "react native spin",
   "main": "index.js",
   "scripts": {

package/android/src/main/java/com/github/reactnativehero/spin/SpinView.kt

@@ -1,33 +0,0 @@
-package com.github.reactnativehero.spin
-
-import android.graphics.Color
-import android.view.View
-import com.facebook.react.uimanager.ThemedReactContext
-
-class SpinView(private val reactContext: ThemedReactContext) : View(reactContext) {
-
-    var size = 0
-
-        set(value) {
-            if (field == value) {
-                return
-            }
-            field = value
-            applySpin()
-        }
-
-    var color = Color.TRANSPARENT
-
-        set(value) {
-            if (field == value) {
-                return
-            }
-            field = value
-            applySpin()
-        }
-
-    private fun applySpin() {
-        
-    }
-
-}