Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

<Search /> #10

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,95 @@ Default themes: **primary**, **success**, **warning**, **alert**
![rangeslider_ios](https://cloud.githubusercontent.com/assets/1177226/22095658/437ef7d6-de49-11e6-8fdc-c83154033438.gif)
![rangeslider_android](https://cloud.githubusercontent.com/assets/1177226/22095661/459f58c6-de49-11e6-9f74-b013ac5a6315.gif)

### `<Expand />`
Expand component

#### Expand Props
| Name | Desc | Type | Default
| --- | --- | --- | --- |
| `title` | Always visible. | String | `-`
| `description` | In close state cropped to one line. | String | `-`
| `defaultExpanded` | Default state of component. If it true component will be rendered in open state | Bool | `false`
| `icon` | Disclosure indicator for close state \n `name` - icon name for [FontAwesome](http://fontawesome.io/icons/) | Object | `{ name: 'chevron-down', color: ThemeConstants.LIGHT_GRAY, size: 12 }`
| `expandedIcon` | Disclosure indicator for close state \n `name` - icon name for [FontAwesome](http://fontawesome.io/icons/) | Object | `{ name: 'chevron-up', color: ThemeConstants.LIGHT_GRAY, size: 12 }`
| `children` | Child element will be shown only in open state | Node | `-`

#### Example
```js
import { Expand } from 'tipsi-ui-kit'

<Expand
title="Winemakers Notes:"
description="The 2012 vintage in Napa Valley was about as close to ‘normal’ as it gets! "
/>
```
Theme structure:

```js
{
container: <View />,
titleWrapper: <View />,
descriptionWrapper: <View />,
childrenWrapper: <View />,
titleText: <Text />,
descriptionText: <Text />,
}
```
#### Preview

![expand_ios](https://cloud.githubusercontent.com/assets/1177226/22414883/ce4aa522-e6f5-11e6-9da7-57dcece51376.gif)
![expand_android](https://cloud.githubusercontent.com/assets/1177226/22414884/d052c7f0-e6f5-11e6-8d36-ca210932b683.gif)

### `<Search />`
Search component

#### Search Props
| Name | Desc | Type | Default
| --- | --- | --- | --- |
| `value`| Text input value | String | - |
| `suggestions`| Array of suggestions. If not empty will be render as list | Array | [] |
| `beforeSuggestionsRenderer`| Child element will be shown before suggestions | Node | - |
| `afterSuggestionsRenderer`| Child element will be shown after suggestions | Node | - |
| `onClear`| Call when tap on clear button | Function | - |
| `onRowClick`| Call when select suggestion | Function | - |
| `endEditing`| Call when end editing TextInput | Function | - |
| `clearButtonMode`| When show clean button. Can be one of `'never', 'while-editing', 'unless-editing', 'always'` | String | `always` |
| `highlightColor`| Suggestion row highlighting color | String | `ThemeConstants.LIGHT_GRAY` |
| `clearButtonStyle`| Style for clean button, should contain size and color | Object | `{ size: 20, color: ThemeConstants.LIGHT_GRAY }`|
| `...rest` | All other props for `TextInput` component | - | - | - |


#### Example
```js
import { Search } from 'tipsi-ui-kit'

<Search
value={this.state.value}
placeholder='Search wine'
onChangeText={(text) => {setState({ value: text })}}
onClear={() => {setState({ value: '' })}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please, provide the more complex example, that anyone can copy-paste and it will simply work: with parent component, it state, etc...

clearButtonMode='while-editing'
/>
```
Theme structure:

```js
{
container: <View />,
textIputWrapper: <View />,
textInput: <TextInput />,
clearButtonWrapper: <View />,
separator: <View />,
scrollView: <ScrollView />,
row: <View />,
suggestionText: <Text />,
}
```
#### Preview
![search_ios](https://cloud.githubusercontent.com/assets/370694/22469461/c7a7db9c-e7d4-11e6-8c1e-281fd274afa7.gif)
![search_android](https://cloud.githubusercontent.com/assets/370694/22469459/c706e110-e7d4-11e6-911a-dcdf8ad8fcef.gif)


## Utils

### ThemeRegister
Expand Down
47 changes: 47 additions & 0 deletions __tests__/e2e/09_Expand.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import test from 'tape-async'
import helper from 'tipsi-appium-helper'

const { driver, select, idFromXPath } = helper

test('<Expand />', async (t) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you need to rebase this branch against master

const expandGroupId = select({
ios: idFromXPath(`//
XCUIElementTypeApplication/XCUIElementTypeWindow/XCUIElementTypeOther/
XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther[2]/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeScrollView/XCUIElementTypeOther
`),
android: idFromXPath(`//
android.widget.LinearLayout[1]/android.widget.FrameLayout[1]/
android.widget.FrameLayout[1]/android.view.ViewGroup[1]/
android.view.ViewGroup[2]/android.view.ViewGroup[1]/android.widget.ScrollView[1]
`),
})
const expandItemId = select({
ios: idFromXPath(`${expandGroupId}/XCUIElementTypeOther[2]/XCUIElementTypeOther`),
android: idFromXPath(`
${expandGroupId}/android.view.ViewGroup[1]/android.view.ViewGroup[1]/android.view.ViewGroup[2]
`),
})

try {
await helper.openExampleFor('<Expand />', 60000)
await driver.waitForVisible(expandItemId, 10000)
t.pass('<Expand /> example should be visible')

const height = await driver.getElementSize(expandItemId, 'height')
await driver.click(expandItemId)
t.pass('Can click on first expand item')
const expandedHeight = await driver.getElementSize(expandItemId, 'height')
t.notEqual(
height,
expandedHeight,
'Height of the element should be changed after the click'
)
} catch (error) {
await helper.screenshot()
await helper.source()

throw error
}
})
57 changes: 57 additions & 0 deletions __tests__/e2e/12_Search.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import test from 'tape-async'
import helper from 'tipsi-appium-helper'

const { driver, select, idFromXPath } = helper

test('<Search />', async (t) => {
const textInputId = select({
ios: idFromXPath(`//
XCUIElementTypeApplication/XCUIElementTypeWindow/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther[2]
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther
/XCUIElementTypeScrollView/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther[2]
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeTextField
`),
android: idFromXPath(`//
android.widget.LinearLayout[1]/android.widget.FrameLayout[1]
/android.widget.FrameLayout[1]/android.view.ViewGroup[1]
/android.view.ViewGroup[2]/android.view.ViewGroup[1]
/android.widget.ScrollView[1]/android.view.ViewGroup[1]
/android.view.ViewGroup[1]/android.widget.EditText[1]
`),
})
const suggestionsId = select({
ios: idFromXPath(`//
XCUIElementTypeApplication/XCUIElementTypeWindow/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther[2]
/XCUIElementTypeOther/XCUIElementTypeOther/XCUIElementTypeOther
/XCUIElementTypeScrollView/XCUIElementTypeOther/XCUIElementTypeOther
/XCUIElementTypeOther[2]/XCUIElementTypeOther/XCUIElementTypeOther[3]`),
android: idFromXPath(`//
android.widget.LinearLayout[1]/android.widget.FrameLayout[1]
/android.widget.FrameLayout[1]/android.view.ViewGroup[1]
/android.view.ViewGroup[2]/android.view.ViewGroup[1]
/android.widget.ScrollView[1]/android.view.ViewGroup[1]
/android.view.ViewGroup[1]/android.view.ViewGroup[7]/android.widget.ScrollView[1]
`),
})

try {
await helper.openExampleFor('<Search />', 60000)
await driver.waitForVisible(textInputId, 30000)
t.pass('<Search /> example should be visible')
await driver.click(textInputId)
t.pass('Search field should be editable')
await driver.keys('Bl')
await driver.waitForVisible(suggestionsId, 30000)
t.pass('User should see suggestions')
} catch (error) {
await helper.screenshot()
await helper.source()

throw error
}
})
Loading