This repository has been archived by the owner on Mar 4, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Summary: Created TagsInput component. Added tests and Storybook's stories for the TagsInput.
- Loading branch information
Filip Messa
committed
Jan 9, 2019
1 parent
0e448b0
commit 33c3f73
Showing
13 changed files
with
585 additions
and
2 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
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
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,160 @@ | ||
| // @flow | ||
|
|
||
| import * as React from 'react'; | ||
| import { View } from 'react-native'; | ||
| import type { ViewLayoutEvent } from 'react-native/Libraries/Components/View/ViewPropTypes'; | ||
| import { defaultTokens } from '@kiwicom/orbit-design-tokens'; | ||
|
|
||
| import IconButton from './components/IconButton'; | ||
| import TagsContainer from './components/TagsContainer'; | ||
| import InputField from './components/InputField'; | ||
| import { StyleSheet } from '../PlatformStyleSheet'; | ||
| import { Text } from '../Text'; | ||
|
|
||
| import { MIN_WIDTH } from './constants'; | ||
|
|
||
| type Props = {| | ||
| +label: string, | ||
| +onChangeText: (value: string) => void, | ||
| +placeholder: string, | ||
| +selected?: string[], | ||
| +disabled?: boolean, | ||
| +fontSize: number, | ||
| +onClickDelete?: () => void, | ||
| +value?: string, | ||
| |}; | ||
|
|
||
| type State = { | ||
| value: string, | ||
| containerWidth: ?number, | ||
| inputWidth: ?number, | ||
| }; | ||
|
|
||
| class TagInput extends React.Component<Props, State> { | ||
| inputRef: any; // @TODO find a way how to type this properly, the issue with mixing react and react-native | ||
| static defaultProps = { | ||
| fontSize: 16, | ||
| }; | ||
|
|
||
| constructor(props: Props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| value: props.value ?? '', | ||
| containerWidth: null, | ||
| inputWidth: null, | ||
| }; | ||
| } | ||
|
|
||
| componentDidUpdate = (prevProps: Props) => { | ||
| const { value } = this.props; | ||
| if (value !== prevProps.value) { | ||
| this.setState({ value }); | ||
| } | ||
| }; | ||
|
|
||
| setContainerWidth = (event: ViewLayoutEvent) => { | ||
| this.setState({ containerWidth: event.nativeEvent.layout.width }); | ||
| }; | ||
|
|
||
| setInputWidth = (event: ViewLayoutEvent) => { | ||
| this.setState({ inputWidth: event.nativeEvent.layout.width }); | ||
| }; | ||
|
|
||
| setRef = (input: React.Element<any>) => { | ||
| this.inputRef = input; | ||
| }; | ||
|
|
||
| getWidth = (width: ?number) => { | ||
| const { containerWidth } = this.state; | ||
| if (containerWidth && width) { | ||
| return containerWidth - width; | ||
| } | ||
| return undefined; | ||
| }; | ||
|
|
||
| handleChange = (value: string) => { | ||
| const { value: oldValue } = this.state; | ||
| const { onChangeText } = this.props; | ||
| if (value !== oldValue) { | ||
| this.setState({ value }); | ||
| onChangeText(value); | ||
| } | ||
| }; | ||
|
|
||
| handleClear = () => { | ||
| const { onClickDelete } = this.props; | ||
| this.setState({ value: '' }); | ||
| this.inputRef.focus(); | ||
|
|
||
| if (onClickDelete) { | ||
| onClickDelete(); | ||
| } | ||
| }; | ||
|
|
||
| renderClearButton = () => { | ||
| const { value } = this.state; | ||
| const { disabled } = this.props; | ||
|
|
||
| return ( | ||
| <IconButton | ||
| style={{ opacity: value.length > 0 ? 1 : 0 }} | ||
| onPress={this.handleClear} | ||
| disabled={!value.length ?? disabled} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| render() { | ||
| const { selected, fontSize, label, placeholder, disabled } = this.props; | ||
| const { value, inputWidth } = this.state; | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| <Text weight="bold" style={(styles.label, { fontSize })}> | ||
| {label} | ||
| </Text> | ||
| <View style={styles.fieldContainer} onLayout={this.setContainerWidth}> | ||
| <TagsContainer | ||
| maxWidth={this.getWidth(inputWidth)} | ||
| tags={selected} | ||
| fontSize={fontSize} | ||
| /> | ||
| <InputField | ||
| setRef={this.setRef} | ||
| fontSize={fontSize} | ||
| disabled={disabled} | ||
| minWidth={MIN_WIDTH} | ||
| maxWidth={this.getWidth(MIN_WIDTH)} | ||
| onLayout={this.setInputWidth} | ||
| value={value} | ||
| placeholder={ | ||
| selected?.length === 0 && placeholder ? placeholder : null | ||
| } | ||
| onChangeText={this.handleChange} | ||
| /> | ||
| </View> | ||
| {this.renderClearButton()} | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| }, | ||
| fieldContainer: { | ||
| flexDirection: 'row', | ||
| flex: 1, | ||
| marginStart: 4, | ||
| overflow: 'hidden', | ||
| }, | ||
|
|
||
| label: { | ||
| color: defaultTokens.paletteInkDark, | ||
| }, | ||
| }); | ||
|
|
||
| export default TagInput; |
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,55 @@ | ||
| // @flow | ||
|
|
||
| import React from 'react'; | ||
| import { View } from 'react-native'; | ||
| import { storiesOf } from '@storybook/react-native'; | ||
| import { text, withKnobs, array, number } from '@storybook/addon-knobs'; | ||
| import { action } from '@storybook/addon-actions'; | ||
|
|
||
| import TagsInput from './TagsInput'; | ||
|
|
||
| const selectedMock = ['Prague', 'Bratislava', 'London']; | ||
|
|
||
| storiesOf('TagsInput', module) | ||
| .addDecorator(withKnobs) | ||
| .add('Default', () => ( | ||
| <View style={{ margin: 20 }}> | ||
| <TagsInput | ||
| onChangeText={action('onChangeText')} | ||
| label="From:" | ||
| placeholder="Departure point" | ||
| /> | ||
| </View> | ||
| )) | ||
| .add('with Tags', () => ( | ||
| <View style={{ margin: 20 }}> | ||
| <TagsInput | ||
| selected={selectedMock} | ||
| onChangeText={action('onChangeText')} | ||
| label="From:" | ||
| placeholder="Departure point" | ||
| /> | ||
| </View> | ||
| )) | ||
| .add('Playground', () => { | ||
| const tags = array('Tags', ['Prague']); | ||
| const fontSize = number('fontSize', 16, { | ||
| range: true, | ||
| min: 14, | ||
| max: 25, | ||
| step: 1, | ||
| }); | ||
| const label = text('Label', 'From:'); | ||
| const placeholder = text('Placeholder', 'Departure point'); | ||
| return ( | ||
| <View style={{ margin: 20 }}> | ||
| <TagsInput | ||
| fontSize={fontSize} | ||
| selected={tags} | ||
| onChangeText={action('onChangeText')} | ||
| label={label} | ||
| placeholder={placeholder} | ||
| /> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| // @flow | ||
|
|
||
| import * as React from 'react'; | ||
| import { TextInput } from 'react-native'; | ||
| import { render, fireEvent } from 'react-native-testing-library'; | ||
| import { TagsInput } from '../index'; | ||
|
|
||
| describe('TagsInput', () => { | ||
| const fontSize = 15; | ||
| const label = 'label'; | ||
| const onChangeText = jest.fn(); | ||
| const onClickDelete = jest.fn(); | ||
| const placeholder = 'placeholder'; | ||
| const tags = ['Prague', 'London']; | ||
| const value = 'value'; | ||
|
|
||
| const { getByType, getByText, getAllByProps, getByTestId } = render( | ||
| <TagsInput | ||
| selected={tags} | ||
| onChangeText={onChangeText} | ||
| onClickDelete={onClickDelete} | ||
| label={label} | ||
| placeholder={placeholder} | ||
| fontSize={fontSize} | ||
| value={value} | ||
| /> | ||
| ); | ||
|
|
||
| it('should contain an input', () => { | ||
| expect(getByType(TextInput)).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should contain a label', () => { | ||
| expect(getByText(label)).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should have passed props', () => { | ||
| expect( | ||
| getAllByProps({ | ||
| selected: tags, | ||
| label, | ||
| placeholder, | ||
| fontSize, | ||
| onChangeText, | ||
| value, | ||
| }) | ||
| ).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should execute onChangeText method', () => { | ||
| const input = 'content'; | ||
| fireEvent.changeText(getByType(TextInput), input); | ||
| expect(onChangeText).toHaveBeenCalledWith(input); | ||
| expect(onChangeText).toHaveBeenCalledTimes(1); | ||
| expect(getByText(input)).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should execute onClickDelete method', () => { | ||
| fireEvent.press(getByTestId('clear-button')); | ||
| expect(onClickDelete).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('should render Tags', () => { | ||
| tags.map(tag => expect(getByText(tag)).toBeDefined()); | ||
| }); | ||
| }); |
Oops, something went wrong.