From adcf903feeae3fa95935f4825b95cc4023cb4ae9 Mon Sep 17 00:00:00 2001 From: dabit3 Date: Sat, 10 Sep 2016 00:06:38 -0500 Subject: [PATCH] added checkboxes, added new styling options to social buttons --- Readme.MD | 172 +++++++++++++++++++++++++++------------ package.json | 2 +- src/checkbox/CheckBox.js | 131 +++++++++++++++++++++++++++++ src/index.js | 50 ++++++------ src/social/SocialIcon.js | 53 ++++++++---- 5 files changed, 313 insertions(+), 95 deletions(-) create mode 100644 src/checkbox/CheckBox.js diff --git a/Readme.MD b/Readme.MD index 3ff45bd50c..9feb0551a9 100644 --- a/Readme.MD +++ b/Readme.MD @@ -1,7 +1,7 @@ ![React Native Elements](http://i.imgur.com/HU4S78V.png) ## React Native UI Toolkit -![React Native UI Toolkit](http://i.imgur.com/ZyNsBmM.png) +![React Native UI Toolkit](http://i.imgur.com/g5fM8vL.png) ## Get Started @@ -29,19 +29,19 @@ Start using components ``` import { - RNEButton, - RNECard, - RNEFormInput, - RNEFormLabel, - RNEList, - RNEListItem, - RNEPricingCard, - RNESocialIcon, - RNEText, - RNEDivider + Button, + Card, + FormInput, + FormLabel, + List, + ListItem, + PricingCard, + SocialIcon, + Text, + Divider } from 'react-native-elements' - @@ -59,7 +59,6 @@ import { - [x] HTML style headings (h1, h2, etc...) ## Roadmap -- [ ] Add light options for social icons - [ ] Add divider with inset - [ ] Add radio buttons - [ ] Add icons to TextInputs @@ -67,6 +66,7 @@ import { - [ ] Custom Picker - [ ] Search Bar - [ ] Side Menu Improvements +- [ ] Button Group - [ ] Cross Platform Tab Bar - [ ] Something you's like to see? Submit an [issue](https://github.com/dabit3/React-Native-Elements/issues) or a [pull request](https://github.com/dabit3/React-Native-Elements/pulls) @@ -81,17 +81,17 @@ Check out the pre built and configured [React Native Hackathon Starter Project]( ![Buttons](http://i.imgur.com/jeXZSMC.png) ``` -import { RNEButton } from 'react-native-elements' +import { Button } from 'react-native-elements' - - - // Button - ``` -#### RNESocialIcon props +#### SocialIcon props | prop | default | type | description | | ---- | ---- | ----| ---- | | component | TouchableHighlight | React Native Component | type of button (optional) | | type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon) | social media type (required) | +| raised | true | boolean | raised adds a drop shadow, set to false to remove | | button | false | boolean | creates button (optional) | | onPress | none | funciton | onPress method (optional) | -| iconStyle | none | object (style) | extra styling for icon component ([React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)) (optional) | +| light | false | boolean | reverses icon color scheme, setting background to white and icon to primary color | +| iconStyle | none | object (style) | extra styling for icon component (optional) | | style | none | object (style) | button styling (optional) | | iconColor | white | string | icon color (optional) | | title | none | string | title if made into a button (optional) | @@ -158,7 +160,7 @@ import { RNESocialIcon } from 'react-native-elements' #### Using Map Function. Implemented with icons. ``` -import { RNEList, RNEListItem } from 'react-native-elements' +import { List, ListItem } from 'react-native-elements' const list = [ { @@ -171,23 +173,23 @@ const list = [ } ] - + { list.map((item, i) => ( - )) } - + ``` #### Using RN ListView. Implemented with avatars. ``` -import { RNEList, RNEListItem } from 'react-native-elements' +import { List, ListItem } from 'react-native-elements' const list = [ { @@ -204,7 +206,7 @@ const list = [ renderRow (rowData, sectionID) { return ( - + - + ) } ``` -#### RNEList Props +#### List Props | prop | default | type | description | | ---- | ---- | ----| ---- | | containerStyle | none | object (style) | style the list container | -#### RNEListItem props +#### ListItem props | prop | default | type | description | | ---- | ---- | ----| ---- | @@ -261,7 +263,7 @@ render () { ![Side Menu](http://i.imgur.com/cjIcRl6.gif) ``` -import { RNESideMenu, RNEListItem } from 'react-native-elements' +import { SideMenu, ListItem } from 'react-native-elements' constructor () { super() @@ -275,13 +277,13 @@ toggleSideMenu () { } render () { - // RNESideMenu takes a React Native element as a prop for the actual Side Menu + // SideMenu takes a React Native element as a prop for the actual Side Menu const MenuComponent = ( - + { list.map((item, i) => ( - console.log('something')} avatar={item.avatar_url} @@ -290,21 +292,21 @@ render () { subtitle={item.subtitle} /> )) } - + ) return ( - - + ) } ``` -#### RNESideMenu props +#### SideMenu props | prop | default | type | description | | ---- | ---- | ----| ---- | @@ -315,19 +317,81 @@ render () { | MenuComponent | none | React Native Component | the actual side menu component you would like to use (required) | | children | none | React Native Component | wrap RNSideMenu around the component you would like to animate (required) | +## Checkboxes + +![Checkboxes](http://i.imgur.com/91EFqjY.png) + +``` + +import { CheckBox } from 'react-native-elements' + + + + + + + + + +``` + +#### Checkbox props + +> This component uses FontAwesome icons out of the box. You can also specify one of the following types of icons by specifying a iconType prop: Zocial, Octicons, MaterialIcons, Ionicons, Foundation, EvilIcons, or Entypo + +| prop | default | type | description | +| ---- | ---- | ----| ---- | +| iconType | fontawesome | string | icon family, can be one of the following: zocial, octicon, material, ionicon, foundation, evilicon, entypo (required only if specifying an icon that is not from font-awesome) | +| component | TouchableOpacity | React Native Component | specify React Native component for main button (optional) | +| checked | false | boolean | flag for checking the icon (required) | +| iconRight | false | boolean | moves icon to right of text (optional) | +| right | false | boolean | aligns checkbox to right (optional) | +| center | false | boolean | aligns checkbox to center (optional) | +| title | none | string | title of checkbox (required) | +| containerStyle | none | object (style) | style of main container (optional) | +| textStyle | none | object (style) | style of text (optional) | +| onPress | none | function | onPress function for checkbox (required) | +| checkedIcon | check-square-o | string | default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/)) (optional) | +| uncheckedIcon | square-o | string | default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/)) (optional) | +| checkedColor | green | string | default checked color (optional) | +| uncheckedColor | #bfbfbf | string | default unchecked color (optional) | +| checkedTitle | none | string | specify a custom checked message (optional) | + ## Forms ![Forms](http://i.imgur.com/9idGiXr.png) ``` -import { RNEFormLabel, RNEFormInput } from 'react-native-elements' +import { FormLabel, FormInput } from 'react-native-elements' -Name - +Name + ``` -#### RNEFormInput props +#### FormInput props ##### This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following: @@ -336,7 +400,7 @@ import { RNEFormLabel, RNEFormInput } from 'react-native-elements' | containerStyle | none | object (style) | TextInput container styling (optional) | | inputStyle | none | object (style) | TextInput styling (optional) | -#### RNEFormLabel props +#### FormLabel props | prop | default | type | description | | ---- | ---- | ----| ---- | @@ -349,17 +413,17 @@ import { RNEFormLabel, RNEFormInput } from 'react-native-elements' ![Card Component](http://i.imgur.com/eRaY7Ok.png) ``` -import { RNECard } from 'react-native-elements' +import { Card } from 'react-native-elements' - { users.map((u, i) => {} } - + ``` -#### RNECard props +#### Card props | prop | default | type | description | | ---- | ---- | ----| ---- | @@ -376,9 +440,9 @@ import { RNECard } from 'react-native-elements' ![Pricing Component](http://i.imgur.com/EMMDZwo.png) ``` -import { RNEPricingCard } from 'react-native-elements' +import { PricingCard } from 'react-native-elements' - { + switch (type) { + case 'zocial': + return ZocialIcon + case 'octicon': + return OcticonIcon + case 'material': + return MaterialIcon + case 'ionicon': + return Ionicon + case 'foundation': + return FoundationIcon + case 'evilicon': + return EvilIcon + case 'entypo': + return EntypoIcon + } +} + +const CheckBox = ({component, checked, iconRight, title, center, right, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle}) => { + let Icon = FAIcon + if (iconType) { + Icon = getIconType(iconType) + } + const Component = component || TouchableOpacity + let iconName = uncheckedIcon + if (checked) { + iconName = checkedIcon + } + return ( + + + { + !iconRight && ( + + ) + } + + {checked ? checkedTitle || title : title} + + { + iconRight && ( + + ) + } + + + ) +} + +CheckBox.defaultProps = { + checked: false, + iconRight: false, + right: false, + center: false, + checkedColor: 'green', + uncheckedColor: '#bfbfbf', + checkedIcon: 'check-square-o', + uncheckedIcon: 'square-o' +} + +// CheckBox.propTypes = { +// component, checked, iconRight, title, center, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle +// } + +styles = StyleSheet.create({ + wrapper: { + flexDirection: 'row', + alignItems: 'center' + }, + container: { + margin: 5, + marginLeft: 10, + marginRight: 10, + backgroundColor: '#fafafa', + borderColor: '#ededed', + borderWidth: 1, + padding: 10, + borderRadius: 3 + }, + text: { + marginLeft: 10, + marginRight: 10, + color: colors.grey1, + ...Platform.select({ + ios: { + fontFamily: fonts.ios.bold + }, + android: { + fontFamily: fonts.android.bold + } + }) + } +}) + +export default CheckBox diff --git a/src/index.js b/src/index.js index 3a19844f26..e9fb51e31e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,27 +1,29 @@ -import RNEButton from './buttons/Button' -import RNECard from './containers/Card' -import RNEFormInput from './form/FormInput' -import RNEFormLabel from './form/FormLabel' -import RNEList from './list/List' -import RNEListItem from './list/ListItem' -import RNEPricingCard from './pricing/PricingCard' -import RNESocialIcon from './social/SocialIcon' -import RNEText from './text/Text' -import RNEDivider from './Divider' -import RNESideMenu from './sidemenu/SideMenu' +import Button from './buttons/Button' +import Card from './containers/Card' +import FormInput from './form/FormInput' +import FormLabel from './form/FormLabel' +import List from './list/List' +import ListItem from './list/ListItem' +import PricingCard from './pricing/PricingCard' +import SocialIcon from './social/SocialIcon' +import Text from './text/Text' +import Divider from './Divider' +import SideMenu from './sidemenu/SideMenu' +import CheckBox from './checkbox/CheckBox' -const RNElements = { - RNEButton, - RNECard, - RNEFormInput, - RNEFormLabel, - RNEList, - RNEListItem, - RNEPricingCard, - RNESocialIcon, - RNEText, - RNEDivider, - RNESideMenu +const Elements = { + Button, + Card, + FormInput, + FormLabel, + List, + ListItem, + PricingCard, + SocialIcon, + Text, + Divider, + SideMenu, + CheckBox } -module.exports = RNElements +module.exports = Elements diff --git a/src/social/SocialIcon.js b/src/social/SocialIcon.js index 8f585d0b7b..cbe4f0559d 100644 --- a/src/social/SocialIcon.js +++ b/src/social/SocialIcon.js @@ -18,28 +18,41 @@ const colors = { quora: '#a82400', foursquare: '#0072b1', wordpress: '#21759b', - stumbleupon: '#EB4823' + stumbleupon: '#EB4823', + github: '#000000', + ['github-alt']: '#000000', + twitch: '#6441A5', + medium: '#02b875', + soundcloud: '#f50', + gitlab: '#e14329', + angellist: '#1c4082', + codepen: '#000000' } -const onTouch = () => console.log('please attach a click handler...') - -const SocialIcon = ({component, type, button, onPress, iconStyle, style, iconColor, title}) => { - const onClick = onPress || onTouch - const Component = component || TouchableHighlight +const SocialIcon = ({component, type, button, onPress, iconStyle, style, iconColor, title, raised, light}) => { + const Component = !onPress ? View : component || TouchableHighlight return ( + underlayColor={light ? 'white' : colors[type]} + onPress={onPress} + style={[ + raised && styles.raised, + styles.container, + button ? styles.button : styles.icon, + {backgroundColor: colors[type]}, + light && {backgroundColor: 'white'}, + light && !raised && {marginLeft: 2, marginRight: 2}, + style && style + ]}> { button && title && ( - {title} + {title} ) } @@ -55,14 +68,22 @@ SocialIcon.propTypes = { iconStyle: PropTypes.any, style: PropTypes.any, iconColor: PropTypes.string, - title: PropTypes.string + title: PropTypes.string, + raised: PropTypes.bool +} + +SocialIcon.defaultProps = { + raised: true, + iconColor: 'white' } styles = StyleSheet.create({ container: { margin: 7, padding: 15, - borderRadius: 30, + borderRadius: 30 + }, + raised: { ...Platform.select({ ios: { shadowColor: 'rgba(0,0,0, .4)', @@ -78,14 +99,14 @@ styles = StyleSheet.create({ wrapper: { flexDirection: 'row', justifyContent: 'center', - alignItems: 'center', + alignItems: 'center' }, title: { color: 'white', marginLeft: 15, ...Platform.select({ ios: { - fontFamily: fonts.ios.black, + fontFamily: fonts.ios.black }, android: { fontFamily: fonts.android.black @@ -94,7 +115,7 @@ styles = StyleSheet.create({ }, icon: { height: 52, - width: 52, + width: 52 } })