-
Notifications
You must be signed in to change notification settings - Fork 717
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
47 changed files
with
786 additions
and
317 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,9 @@ | ||
| require('./demo/src/index'); | ||
| require('./demo/src/demoApp'); // this is separated from demo/src/index by purpose | ||
|
|
||
| // comment out when measuring performance | ||
| // if (process.env.NODE_ENV !== 'production') { | ||
| // const whyDidYouRender = require('@welldone-software/why-did-you-render'); | ||
| // const React = require('react'); | ||
| // whyDidYouRender(React); | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from 'react'; | ||
| import {View, Text, Checkbox, RadioGroup, RadioButton, ColorPalette, Colors, Slider} from 'react-native-ui-lib'; | ||
| import _ from 'lodash'; | ||
|
|
||
| export function renderBooleanOption(title, key) { | ||
| const value = this.state[key]; | ||
| return ( | ||
| <View row centerV spread marginB-s4> | ||
| <Text text70M style={{flex: 1}}> | ||
| {title} | ||
| </Text> | ||
| <Checkbox useCustomTheme textID={key} value={value} onValueChange={value => this.setState({[key]: value})}/> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export function renderRadioGroup(title, key, options) { | ||
| const value = this.state[key]; | ||
| return ( | ||
| <View marginB-s2> | ||
| <Text text70M marginB-s2> | ||
| {title} | ||
| </Text> | ||
| <RadioGroup initialValue={value} onValueChange={value => this.setState({[key]: value})}> | ||
| {_.map(options, (value, key) => { | ||
| return <RadioButton useCustomTheme testID={key} key={key} marginB-s2 label={value} value={options[key]}/>; | ||
| })} | ||
| </RadioGroup> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export function renderColorOption(title, | ||
| key, | ||
| colors = ['transparent', Colors.blue30, Colors.grey10, Colors.yellow30, Colors.green30, Colors.purple30]) { | ||
| const value = this.state[key]; | ||
| return ( | ||
| <View marginV-s2> | ||
| <Text text70M>{title}</Text> | ||
| <ColorPalette | ||
| value={value} | ||
| colors={colors} | ||
| onValueChange={value => this.setState({[key]: value === 'transparent' ? undefined : value})} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0}) { | ||
| const value = this.state[key]; | ||
| return ( | ||
| <View marginV-s2> | ||
| <Text marginB-s1 text70M> | ||
| {title} | ||
| </Text> | ||
| <View row centerV> | ||
| <Slider | ||
| testID={key} | ||
| value={initial} | ||
| containerStyle={{flex: 1}} | ||
| minimumValue={min} | ||
| maximumValue={max} | ||
| step={step} | ||
| onValueChange={value => this.setState({[key]: value})} | ||
| /> | ||
| <Text marginL-s4 text70> | ||
| text{value} | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,6 @@ | ||
| import {Navigation} from 'react-native-navigation'; | ||
| import CardScannerScreen from './CardScannerScreen'; | ||
| import ProgressBarScreen from './ProgressBarScreen'; | ||
| import CardAnimationsScreen from './CardAnimationsScreen'; | ||
| import ListAnimationsScreen from './ListAnimationsScreen'; | ||
|
|
||
| Navigation.registerComponent('unicorn.animations.CardScannerScreen', () => CardScannerScreen); | ||
| Navigation.registerComponent('unicorn.animations.CardAnimationsScreen', () => CardAnimationsScreen); | ||
| Navigation.registerComponent('unicorn.animations.ListAnimationsScreen', () => ListAnimationsScreen); | ||
| Navigation.registerComponent('unicorn.animations.ProgressBarScreen', () => ProgressBarScreen); | ||
| Navigation.registerComponent('unicorn.animations.CardScannerScreen', () => require('./CardScannerScreen').default); | ||
| Navigation.registerComponent('unicorn.animations.CardAnimationsScreen', () => require('./CardAnimationsScreen').default); | ||
| Navigation.registerComponent('unicorn.animations.ListAnimationsScreen', () => require('./ListAnimationsScreen').default); | ||
| Navigation.registerComponent('unicorn.animations.ProgressBarScreen', () => require('./ProgressBarScreen').default); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,5 @@ | ||
| import {Navigation} from 'react-native-navigation'; | ||
| import EmptyStateScreen from './EmptyStateScreen'; | ||
| import LoadingScreen from './LoadingScreen'; | ||
| import ModalScreen from './ModalScreen'; | ||
|
|
||
| Navigation.registerComponent('unicorn.screens.EmptyStateScreen', () => EmptyStateScreen); | ||
| Navigation.registerComponent('unicorn.screens.LoadingScreen', () => LoadingScreen); | ||
| Navigation.registerComponent('unicorn.screens.ModalScreen', () => ModalScreen); | ||
| Navigation.registerComponent('unicorn.screens.EmptyStateScreen', () => require('./EmptyStateScreen').default); | ||
| Navigation.registerComponent('unicorn.screens.LoadingScreen', () => require('./LoadingScreen').default); | ||
| Navigation.registerComponent('unicorn.screens.ModalScreen', () => require('./ModalScreen').default); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React, {Component} from 'react'; | ||
| import {View, Text, Image, Colors} from 'react-native-ui-lib'; | ||
| import {renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter'; | ||
|
|
||
| import cameraIcon from '../../assets/icons/cameraSelected.png'; | ||
|
|
||
| const IMAGE_URL = | ||
| 'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'; | ||
|
|
||
| const DEFAULT_SIZE = 100; | ||
| class ImageScreen extends Component { | ||
| state = { | ||
| cover: true, | ||
| showOverlayContent: false, | ||
| overlayType: 'none' | ||
| }; | ||
|
|
||
| renderOverlayContent() { | ||
| const {cover, overlayType, showOverlayContent} = this.state; | ||
| if (showOverlayContent) { | ||
| if (cover) { | ||
| return ( | ||
| <View padding-20 flex bottom={overlayType === Image.overlayTypes.BOTTOM}> | ||
| <View row centerV> | ||
| <Image | ||
| style={{margin: 5, marginRight: 10}} | ||
| source={cameraIcon} | ||
| tintColor={overlayType !== 'none' ? Colors.white : undefined} | ||
| /> | ||
| <Text text30 white={overlayType !== 'none'}> | ||
| Overlay Content | ||
| </Text> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } else { | ||
| return <Image style={{margin: 5}} source={cameraIcon}/>; | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| const {cover, overlayType} = this.state; | ||
|
|
||
| return ( | ||
| <View flex> | ||
| <View centerH height={250}> | ||
| <Image | ||
| source={{uri: IMAGE_URL}} | ||
| cover={cover} | ||
| overlayType={overlayType !== 'none' ? overlayType : undefined} | ||
| style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}} | ||
| customOverlayContent={this.renderOverlayContent()} | ||
| /> | ||
| </View> | ||
| <View height={2} bg-grey60/> | ||
| <View useSafeArea flex> | ||
| <View padding-20 bottom flex> | ||
| <View flex> | ||
| {renderBooleanOption.call(this, 'Show as Cover Image', 'cover')} | ||
| {renderBooleanOption.call(this, 'Show Overlay Content', 'showOverlayContent')} | ||
| {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})} | ||
| </View> | ||
| <Text text40>Image Screen</Text> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ImageScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
112 changes: 112 additions & 0 deletions
112
demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import React, {Component} from 'react'; | ||
| import {ScrollView} from 'react-native'; | ||
| import {Colors, View, Text, TextField, Slider, ColorPalette} from 'react-native-ui-lib'; //eslint-disable-line | ||
| import {Navigation} from 'react-native-navigation'; | ||
|
|
||
| import { | ||
| renderBooleanOption, | ||
| renderRadioGroup, | ||
| renderSliderOption, | ||
| renderColorOption | ||
| } from '../../ExampleScreenPresenter'; | ||
|
|
||
| const ERROR_STATES = { | ||
| noError: 'No Error', | ||
| bottomError: 'Bottom Error', | ||
| topError: 'Top Error' | ||
| }; | ||
|
|
||
| const GUIDING_TEXTS = { | ||
| none: 'None', | ||
| useTitle: 'Title', | ||
| floatingPlaceholder: 'Floating Placeholder' | ||
| }; | ||
|
|
||
| export default class BasicTextFieldScreen extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| hideUnderline: false, | ||
| underlineColor: undefined, | ||
| guidingText: GUIDING_TEXTS.none, | ||
| disabled: false, | ||
| centered: false, | ||
| useHelperText: false, | ||
| titleColor: undefined, | ||
| error: ERROR_STATES.noError, | ||
| multiline: false, | ||
| typography: 70, | ||
| charCount: 0 | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| hideUnderline, | ||
| underlineColor, | ||
| guidingText, | ||
| titleColor, | ||
| disabled, | ||
| centered, | ||
| useHelperText, | ||
| multiline, | ||
| charCount, | ||
| typography, | ||
| error | ||
| } = this.state; | ||
|
|
||
| return ( | ||
| <View flex> | ||
| <View padding-20> | ||
| <Text marginB-20 text40> | ||
| TextField | ||
| </Text> | ||
| <TextField | ||
| key={centered ? 'centered' : 'not-centered'} | ||
| {...{[`text${typography}`]: true}} | ||
| placeholder={disabled ? 'Disabled' : 'Placeholder'} | ||
| hideUnderline={hideUnderline} | ||
| underlineColor={underlineColor} | ||
| title={guidingText === GUIDING_TEXTS.useTitle ? 'Title' : undefined} | ||
| titleColor={titleColor} | ||
| floatingPlaceholder={guidingText === GUIDING_TEXTS.floatingPlaceholder} | ||
| helperText={useHelperText ? 'Helper Text' : undefined} | ||
| editable={!disabled} | ||
| centered={centered} | ||
| multiline={multiline} | ||
| maxLength={charCount > 0 ? charCount : undefined} | ||
| showCharacterCounter={charCount > 0} | ||
| error={error !== ERROR_STATES.noError ? 'Custom error message' : undefined} | ||
| useTopErrors={error === ERROR_STATES.topError} | ||
| /> | ||
| </View> | ||
| <View paddingT-s1 bg-grey50/> | ||
| <ScrollView keyboardShouldPersistTaps="always"> | ||
| <View padding-20> | ||
| <Text text50M marginB-s4> | ||
| Options | ||
| </Text> | ||
| {renderSliderOption.call(this, 'Typography (modifier)', 'typography', { | ||
| min: 30, | ||
| max: 100, | ||
| step: 10, | ||
| initial: 70 | ||
| })} | ||
| {renderBooleanOption.call(this, 'Multiline', 'multiline')} | ||
| {renderBooleanOption.call(this, 'Disabled', 'disabled')} | ||
| {renderBooleanOption.call(this, 'Centered', 'centered')} | ||
| {renderBooleanOption.call(this, 'Hide Underline', 'hideUnderline')} | ||
| {renderColorOption.call(this, 'Underline Color', 'underlineColor')} | ||
| {renderRadioGroup.call(this, 'Guiding Text', 'guidingText', GUIDING_TEXTS)} | ||
| {renderColorOption.call(this, 'Title Color', 'titleColor')} | ||
| {renderSliderOption.call(this, 'Character Counter', 'charCount', {min: 0, max: 150, step: 3})} | ||
| {renderRadioGroup.call(this, 'Errors', 'error', ERROR_STATES)} | ||
| </View> | ||
| </ScrollView> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| Navigation.registerComponent('unicorn.components.BasicTextFieldScreen', () => BasicTextFieldScreen); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.