bayst/source/examples/Icon.js

React Native UI Library

/**
Square:
octicon
material
entypo

Not Square:
zocial
ionicon
foundation
evilicon
font-awesome
*/

import React from 'react'
import { View } from 'react-native'
import {
  Icon,
  IconButton,
  SocialIcon,
  SocialIconButton,
  Box
} from '../collator'

/**___________________________________________________________________________*/


/**
icon type defaults to "material",
*/
const example_basic_Icon = (
  <Icon
    name={"home"}
    />
)


/**
specify other icon sources with "type"
*/
const example_differentType_Icon = (
  <Icon
    name={"keyboard"}
    type={"octicon"}
    />
)

/**
All props available to TextBase are available to Icon
*/
const example_styled_Icon = (
  <Icon
    name={"pets"}
    color={"blue"}
    fontSizeRank={1}
    marginRank={2}
    paddingRank={1}
    />
)

/**
restrict to width of content by wrapping in View with flexDirection: "row"
*/
const example_wrappedContent_Icon = (
  <View style={{flexDirection: "row"}}>
    <Icon
      fontSizeRank={1}
      paddingRank={1}
      marginRank={2}
      color={"blue"}
      backgroundColor={"yellow"}
      name={"child-care"}
      />
  </View>
)

/**
Icons from some sources aren't always square. IconBox is a comp
that scales the icons by 0.78 (small enough to fit most dimension
differences) and then wraps and centers them in a box the
same height and width as the fontSize or fontSizeRank.
This is incorporated in Icon, so just specify useIconBox
should you need to square an icon.
*/
const example_basic_IconBox = (
  <View style={{flexDirection: "row"}}>
    <Icon
      useIconBox
      fontSizeRank={1}
      paddingRank={1}
      marginRank={2}
      color={"orange"}
      backgroundColor={"black"}
      name={"soundcloud"}
      type={"zocial"}
      />
  </View>
)

/**
IconButton
*/
const example_basic_IconButton = (
  <View style={{flexDirection: "row"}}>
    <IconButton
      onPress={() => console.log("Icon button pressed")}
      fontSizeRank={1}
      marginRank={2}
      paddingRank={1}
      backgroundColor={"blue"}
      color={"white"}
      name={"cloud-queue"}
      />
  </View>
)

const example_basic2_IconButton = (
  <View style={{flexDirection: "row"}}>
    <IconButton
      onPress={() => console.log("Icon button pressed")}
      fontSizeRank={1}
      marginRank={2}
      paddingRank={2}
      elevationRank={2}
      backgroundColor={"red"}
      radiusType={"circle"}
      name={"star"}
      />
  </View>
)

/**
Specify useIconBox to maintain equal dimension in case
  the icon supplied is not square.
*/

const example_useIconBox_IconButton = (
  <View style={{flexDirection: "row"}}>
    <IconButton
      useIconBox
      onPress={() => console.log("Icon button pressed")}
      fontSizeRank={1}
      marginRank={2}
      paddingRank={2}
      elevationRank={2}
      color={"red"}
      backgroundColor={"white"}
      radiusType={"circle"}
      name={"reddit"}
      type={"zocial"}
      />
  </View>
)


/**___________________________________________________________________________*/

const example_basic_SocialIcon = [
  "angellist",
  "codepen",
  "facebook",
  "foursquare",
  "github",
].map((iconName) => {
  return (
    <SocialIcon
      fontSizeRank={1}
      marginRank={2}
      paddingRank={2}
      radiusType={"circle"}
      name={iconName}
      />
  )
})

const example_background_SocialIcon = [
  "gitlab",
  "instagram",
  "linkedin",
  "medium",
  "pinterest",
].map((iconName, i) => {
  return (
    <SocialIcon
      isInverted
      fontSizeRank={1}
      marginRank={2}
      paddingRank={2}
      radiusType={ (i%2===0) ? "large" : "circle"}
      name={iconName}
      />
  )
})


const example_basic_SocialIconButton = [
  'github-alt',
  'google-plus-official',
  'soundcloud',
  'stumbleupon',
  'tumblr',
].map((iconName) => {
  return (
    <SocialIconButton
      onPress={() => console.log("Social Icon Button Pressed")}
      fontSizeRank={1}
      marginRank={2}
      paddingRank={2}
      name={iconName}
      />
  )
})

const example_background_SocialIconButton = [
  "twitch",
  "twitter",
  "vimeo",
  "wordpress",
  "youtube",
].map((iconName, i) => {
  return (
    <SocialIconButton
      onPress={() => console.log("Social Icon Button Pressed")}
      isInverted
      fontSizeRank={1}
      marginRank={2}
      paddingRank={2}
      elevationRank={2}
      radiusType={ (i%2!==0) ? "small" : "circle"}
      name={iconName}
      />
  )
})

/**___________________________________________________________________________*/

const IconRow = ({
  iconArray
}) => {
  const resultComp = (
    <View style={{flexDirection: "row"}}>
      {iconArray.map((e,i) => <View style={{height: 64}} key={i}>{e}</View>)}
    </View>
  )
  return resultComp
}


/**___________________________________________________________________________*/

/**
Your basic Icon comp, with different icon sources available,
IconBox to square un-square Icons, IconButton
when you need to press it, and SocialIcon and SocialIconButton with
icon names tied to company colors.
*/


const example_Icon = {
  header: "Icon, IconButton, SocialIcon, & SocialIconButton",
  examples: (
    <Box>
      <Box style={{flexDirection: "row"}}>
        {example_basic_Icon}
        {example_differentType_Icon}
        {example_styled_Icon}
        {example_wrappedContent_Icon}
        {example_basic_IconBox}
      </Box>
      <Box style={{flexDirection: "row"}}>
        {example_basic_IconButton}
        {example_basic2_IconButton}
        {example_useIconBox_IconButton}
      </Box>
      <Box>
        <IconRow iconArray={example_basic_SocialIcon} />
        <IconRow iconArray={example_background_SocialIcon} />
      </Box>
      <Box>
        <IconRow iconArray={example_basic_SocialIconButton} />
        <IconRow iconArray={example_background_SocialIconButton} />
      </Box>
    </Box>
  )
}

/**___________________________________________________________________________*/

export default example_Icon