feat(Button): add Button Component

README.md

@@ -11,7 +11,7 @@ npm install react-native-ui-xg --save
 ## Usage
 
 ```js
-import {DatePicker} from 'react-native-ui-xg';
+import {Button, DatePicker, Drawer, Grading, LabelSelect} from 'react-native-ui-xg';
 ```
 
 ## Components
@@ -20,6 +20,8 @@ import {DatePicker} from 'react-native-ui-xg';
 * [Drawer](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Drawer/README.md)
 * [Grading](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Grading/README.md)
 * [LabelSelect](https://github.com/xgfe/react-native-ui-xg/blob/master/components/LabelSelect/README.md)
+* [Button](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Button/README.md)
+* [StyleSheet](https://github.com/xgfe/react-native-ui-xg/blob/master/components/StyleSheet/README.md)
 
 ## Example
 

components/Button/.npmignore

@@ -0,0 +1,3 @@
+example
+__tests__
+.*

components/Button/Button.js

@@ -0,0 +1,128 @@
+import React, {Component} from 'react';
+import {
+  Text,
+  TouchableHighlight,
+  ActivityIndicator,
+  TouchableNativeFeedback,
+  View
+} from 'react-native';
+import {
+  ButtonType,
+  ButtonOuter,
+  BasicColor
+} from './ButtonStyle';
+
+import {judgePlatformLevel} from './judge';
+
+class Button extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.renderChildren = this._renderChildren.bind(this);
+  }
+
+  _renderChildren(size, color) {
+    const {
+      children = '',
+      isLoading = false,
+      disabled = false,
+      loadingTitle = 'Loading',
+      active = false
+    } = this.props;
+    let childrenNode = [];
+    if (isLoading) {
+      let loadingSize = size;
+      if (loadingSize === 'default') {loadingSize = 'small';}
+      return <View style={[{'flexDirection': 'row'}, this.props.innerStyle]}>
+        <ActivityIndicator
+          animating={true}
+          color={color.loadColor}
+          size={loadingSize}/>
+        <Text style={[color.textColor,
+          {marginLeft: 5},
+          (active && color.activeTextColorCSS),
+          (disabled || isLoading) && color.disableTextColorCSS]}>
+          {loadingTitle}
+        </Text>
+      </View>;
+    } else {
+      React.Children.forEach(children, function (item) {
+        if (React.isValidElement(item)) {
+          childrenNode.push(item);
+        } else if (typeof item === 'string' || item === 'number') {
+          const node = (<Text
+            style={[ButtonType[size],
+              color.textColor,
+              (active && color.activeTextColorCSS),
+              (disabled || isLoading) && color.disableTextColorCSS]}
+            key={item}>
+            {item}
+          </Text>);
+          childrenNode.push(node);
+        }
+      });
+      return <View style={[{'flexDirection': 'row'}, this.props.innerStyle]}>{childrenNode}</View>;
+    }
+  }
+
+  render() {
+    const {
+      theme = 'default',
+      type = 'surface',
+      size = 'default',
+      disabled = false,
+      isLoading = false,
+      disableColor = '',
+      activeColor = '',
+      loadingColor = '',
+      active = false
+    } = this.props;
+    let colorConfig = new BasicColor(theme, type, disableColor, activeColor, loadingColor);
+    let handleProps = (!disabled && !isLoading) ? this.props : null;
+
+    if (!judgePlatformLevel('TouchableNativeFeedback') || disabled || isLoading) {
+      return (
+        <TouchableHighlight
+          style={[ButtonOuter.btn,
+            ButtonOuter[size],
+            colorConfig.themeColor,
+            this.props.selfStyle,
+            active && colorConfig.activeColorCSS,
+            (disabled || isLoading) && colorConfig.disableColorCSS]}
+          underlayColor={type === 'surface' ? colorConfig.activeColor : '#EEE'}
+          {...this.props}
+          disabled={disabled || isLoading}
+        >
+          {this._renderChildren(size, colorConfig)}
+        </TouchableHighlight>
+      );
+    }
+    return (
+      <TouchableNativeFeedback
+        background={TouchableNativeFeedback.Ripple(colorConfig.disableColor)}
+        {...handleProps}
+      >
+        <View
+          style={[ButtonOuter.btn,
+            ButtonOuter[size],
+            colorConfig.themeColor,
+            this.props.selfStyle,
+            active && colorConfig.activeColorCSS,
+            (disabled || isLoading) && colorConfig.disableColorCSS]}>
+          {this._renderChildren(size, colorConfig)}
+        </View>
+      </TouchableNativeFeedback>
+    );
+  }
+}
+
+Button.propTypes = {
+  onPress: React.PropTypes.func.isRequired,
+  disabled: React.PropTypes.bool,
+  theme: React.PropTypes.string.isRequired,
+  size: React.PropTypes.oneOf(['default', 'small', 'large']),
+  type: React.PropTypes.oneOf(['ghost', 'surface'])
+};
+
+export default Button;

components/Button/ButtonInfo.js

@@ -0,0 +1,52 @@
+const BackgroundColors = {
+
+  //背景颜色
+  default: '#06C1AE',
+  orange: '#FF9900',
+  blue: '#06C1AE',
+  red: '#EC5330',
+  gray: '#D2D2D2'
+};
+
+const ActiveColor = {
+  orangeActive: '#D66500',
+  defaultActive: '#049387',
+  blueActive: '#049387',
+  redActive: '#C23E1A',
+  grayActive: '#8E8E8E'
+};
+
+const DisableColor = {
+  orangeDisable: '#FFD084',
+  blueDisable: '#96E4DA',
+  defaultDisable: '#96E4DA',
+  redDisable: '#FDC1B5',
+  grayDisable: '#E5E5E5'
+};
+
+const FontColors = {
+  //字体颜色
+  fontWhite: '#FFFFFF',
+  fontBlue: BackgroundColors.blue, //价格，文字链接
+  fontGreen: '#6CDB03', //提示信息
+  fontOrange: BackgroundColors.orange, //强提示，标签内容
+  fontRed: BackgroundColors.red, //警示信息
+  fontGraylevel1: '#CCCCCC', //内容不可用，文本框内引导文字
+  fontGraylevel2: '#999999', //次要辅助信息
+  fontGraylevel3: '#666666', //次要信息
+  fontGraylevel4: '#333333' //列表，正文标题
+};
+
+//react中的单位是pt pt=px*(3/4) 四舍五入
+const FontSize = {
+  fontlevel1: 13,
+  fontlevel2: 17
+};
+
+export {
+  BackgroundColors as BackgroundColors,
+  FontColors as FontColors,
+  FontSize as FontSize,
+  ActiveColor as ActiveColor,
+  DisableColor as DisableColor
+};

components/Button/ButtonStyle.js

@@ -0,0 +1,144 @@
+import StyleSheet from 'react-native-stylesheet-xg';
+import {BackgroundColors, FontColors, FontSize, ActiveColor, DisableColor} from './ButtonInfo';
+import {Color, RGB, HSL} from 'react-native-colortool';
+
+// set The style base
+StyleSheet.setBase(360);
+
+export class BasicColor {
+  constructor (theme, type, initDisableColor, initActiveColor, initLoadingColor) {
+    this.theme = theme || '';
+    this.type = type || '';
+    this._initActiveColor = initActiveColor || '';
+    this._initDisableColor = initDisableColor || '';
+    this._initLoadingColor = initLoadingColor || '';
+    this._themeColor = this.getBasicColor();
+    this._typeColor = this.getTypeColor();
+    this.themeColor = this._typeColor.themeColor;
+    this.textColor = this._typeColor.textColor;
+  }
+
+  colorJoint (color) {
+    return 'hsla(' + color.h + ', ' + color.s + '%, ' + color.l + '%, ' + color.a + ')';
+  }
+  colorResolve (color) {
+    let newHSL = HSL.rgbToHsl(Color.format(color));
+    return newHSL;
+  }
+  getBasicColor () {
+    let themeMap = ['orange', 'blue', 'red', 'gray', 'default'];
+    let themeColor;
+    if (themeMap.indexOf(this.theme) === -1) {
+      let newColor = HSL.rgbToHsl(Color.format(this.theme));
+      let newColorDisable = this.colorJoint(newColor.lighten(0.3));
+      let newColorActive = this.colorJoint(newColor.darken(0.3));
+      themeColor = this.colorJoint(newColor);
+      this.getActiveColor(newColorActive);
+      this.getDisableColor(newColorDisable);
+    } else {
+      themeColor = BackgroundColors[this.theme];
+      this.getActiveColor(ActiveColor[this.theme + 'Active']);
+      this.getDisableColor(DisableColor[this.theme + 'Disable']);
+    }
+    return themeColor;
+  }
+  getActiveColor (color) {
+    if (this._initActiveColor) {
+      this.activeColor = this._initActiveColor;
+    } else {this.activeColor = color;}
+    if (this.type === 'surface') {
+      this.activeColorCSS = {backgroundColor: this.activeColor, borderColor: this.activeColor};
+    } else if (this.type === 'ghost') {
+      this.activeColorCSS = {borderColor: this.activeColor};
+      this.activeTextColorCSS = {color: this.activeColor};
+    }
+  }
+  getLoadingColor (color) {
+    if (this._initLoadingColor) {
+      this.loadColor = this._initLoadingColor;
+    } else {
+      let beforeHSL = this.colorResolve(color);
+      this.loadColor = this.colorJoint(beforeHSL.darken(0.4));
+    }
+  }
+  getDisableColor (color) {
+    if (this._initDisableColor) {
+      this.disableColor = this._initDisableColor;
+    } else {this.disableColor = color;}
+    this.getLoadingColor(this.disableColor);
+    if (this.type === 'surface') {
+      this.disableColorCSS = {backgroundColor: this.disableColor, borderColor: this.disableColor};
+    } else if (this.type === 'ghost') {
+      this.disableColorCSS = {borderColor: this.disableColor};
+      this.disableTextColorCSS = {color: this.disableColor};
+    }
+  }
+  getTypeColor () {
+    let ButtonThemeType;
+    switch (this.type) {
+      case 'surface':
+        ButtonThemeType = StyleSheet.create({
+          themeColor: {
+            backgroundColor: this._themeColor,
+            borderColor: this._themeColor
+          },
+          textColor: {
+            color: FontColors.fontWhite
+          }
+        });
+        return ButtonThemeType;
+      default:
+        ButtonThemeType = StyleSheet.create({
+          themeColor: {
+            borderColor: this._themeColor
+          },
+          textColor: {
+            color: this._themeColor
+          }
+        });
+        return ButtonThemeType;
+    }
+  }
+}
+
+
+export let ButtonType = StyleSheet.create({
+  default: {
+    fontSize: FontSize.fontlevel1
+  },
+  small: {
+    fontSize: FontSize.fontlevel1
+  },
+  large: {
+    fontSize: FontSize.fontlevel2
+  }
+});
+
+export let ButtonOuter = StyleSheet.create({
+  btn: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  small: {
+    borderRadius: 3,
+    borderWidth: 1,
+    height: 25,
+    paddingRight: 12,
+    paddingLeft: 12
+  },
+  default: {
+    borderRadius: 3,
+    borderWidth: 1,
+    height: 30,
+    paddingRight: 12,
+    paddingLeft: 12
+  },
+  large: {
+    borderRadius: 4,
+    borderWidth: 1,
+    height: 40,
+    paddingRight: 20,
+    paddingLeft: 20
+  }
+});

components/Button/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 鲜果FE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.