Refactor code

Author: arniu

README.md

@@ -38,7 +38,6 @@ const IconBar = () => (
 |    name | `IconName` | -       | Name of the icon                     |
 | android | `IconName` | -       | Name of the icon for Android devices |
 |     ios | `IconName` | -       | Name of the icon for iOS devices     |
-|  active | `?boolean` | false   | Render filled icons, **iOS only**    |
 |   color | `?string`  | -       | Color of the icon                    |
 |    size | `?number`  | 30      | Size of the icon, namely `fontSize`  |
 |     ... | -          | -       | Other props of `Text` component      |

glyph/index.js

@@ -4,29 +4,12 @@ import glyphs from './map.json'
  * Get glyph
  *
  * @param {Array.<?string>} iconNames
- * @param {string} currentOS
- * @param {boolean} [active]
+ * @param {string} prefix
  * @return {string}
  */
-export default function getGlyph (iconNames, currentOS, active) {
+export default function (iconNames, prefix) {
   const code = iconNames.reduce((prev, name) => {
-    if (prev) return prev
-
-    if (name in glyphs) {
-      return glyphs[name]
-    }
-
-    const xs = []
-    if (currentOS === 'ios') {
-      xs.push('ios', name)
-      if (!active) {
-        xs.push('outline')
-      }
-    } else {
-      xs.push('md', name)
-    }
-
-    return glyphs[xs.join('-')]
+    return prev || glyphs[name in glyphs ? name : `${prefix}-${name}`]
   }, undefined)
 
   return code ? String.fromCharCode(code) : ''

index.d.ts

@@ -4,7 +4,6 @@ export interface Icon {
   ios?: string
   size?: number
   color?: string
-  active?: boolean
   children?: any
   style?: any
 }

index.js

@@ -1,53 +1,73 @@
 import * as React from 'react'
-import { Platform, Text } from 'react-native'
-import getGlyph from './glyph'
+import { StyleSheet, Text, Platform } from 'react-native'
+import tryGlyph from './glyph'
 
-export default class Icon extends React.PureComponent {
+/**
+ * (string, string, string) => string
+ */
+const getGlyph = Platform.select({
+  ios: (_android, ios, name) => tryGlyph([ios, name], 'ios'),
+  default: (android, _ios, name) => tryGlyph([android, name], 'md')
+})
+
+class Icon extends React.PureComponent {
   constructor (props) {
     super(props)
 
-    this.setRef = function (node) {
-      this._ref = node
-    }.bind(this)
+    this._setRef = ref => {
+      this._text = ref
+    }
   }
 
   setNativeProps (props) {
-    if (this._ref) {
-      this._ref.setNativeProps(props)
+    if (this._text) {
+      this._text.setNativeProps(props)
     }
   }
 
   render () {
-    const { name, android, ios, active, size, color, ...props } = this.props
-
-    const glyph = getGlyph(
-      [Platform.select({ android, ios }), name],
-      Platform.OS,
-      active
-    )
+    const {
+      name,
+      android,
+      ios,
+      size,
+      color,
+      style,
+      children,
+      ...textProps
+    } = this.props
 
-    const textStyle = {
-      fontFamily: 'Ionicons',
-      fontWeight: 'normal',
-      fontStyle: 'normal',
+    const fontStyle = {
       fontSize: size,
       color
     }
 
-    props.style = [textStyle, props.style]
-    props.ref = this.setRef
+    const glyph = getGlyph(android, ios, name)
 
     return (
-      <Text {...props}>
+      <Text
+        {...textProps}
+        style={[styles.default, fontStyle, style]}
+        ref={this._setRef}
+      >
         {glyph}
-        {props.children}
+        {children}
       </Text>
     )
   }
 }
 
+export default Icon
+
+const styles = StyleSheet.create({
+  default: {
+    fontFamily: 'Ionicons',
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  }
+})
+
 Icon.defaultProps = {
-  active: false,
   allowFontScaling: false,
   size: 30
 }