@npm.tangocode/tc_ui_components
Version:
[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #
134 lines (101 loc) • 3.83 kB
Markdown
## Input Pill List ##
### Description ###
It's a Tagging component.
### Props ###
1. __items__ (string[]) : It receives an array of items that are presented as pills.
2. __onClick__ (`(name: string) => void` ) : Function that controls the action of the click when the user hits the button inside the pill.
3. __updateItems__ (`(items: string[]) => void` ) : Function to add more .
4. __disable ?__ (`(newPage: number) => void` ) : This callback sends back the currentPageNumber. Since the totalItems and itemsPerPage were provided by the parent, the parent should be able to decide what items are to be displayed with the current page number. Simple math.
5. __styles ?__ (InputPillList.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.
```ts
interface Styles {
PillListStyles?: Object {
ListContainer: <styled component>
PillContainer: <styled component>
PillButtonStyles: Object {
- Pill: <styled component>
- PillWrapper: <styled component>
- PillText: <styled component>
- DeleteIcon: <styled component>
- DeleteContainer: <styled component>
}
};
TextInputStyles?: Object {
Input: <styled component>
Button: <styled component>
EnterInfoText: <styled component>
ReturnArrow: <styled component>
};
}
```
6. __placeholder ?__ (string) : This property allows to set a placeholder text in the input.
7. __id ?__ (string): A prefix id for all the html elements of the component
8. __name ?__ (string): A prefix name for all the html elements of the component
### Usage ###
The following pager was created with the props:
```tsx
<InputPillList
onClick={(value) => this.onDelete(value)}
items={this.state.items}
updateItems={(items) => this.setState({items})}
>
<TextInput />
<PillList />
</InputPillList>
```
Using this component:
```tsx
import * as React from 'react';
import InputPillList from "./index";
import PillList from "../PillList";
import TextInput from "../TextInput";
class Example extends React.Component {
state = { items: ['one', 'second large item', 'third item'] }
onDelete = (value: string) => {
const items = this.state.items.filter(item => item !== value)
this.setState({ items});
}
render() {
return (
<InputPillList
onClick={(value) => this.onDelete(value)}
items={this.state.items}
updateItems={(items) => this.setState({items})}
>
<TextInput />
<PillList />
</InputPillList>
);
}
}
export default Example;
```
### Styling ###
```jsx
const style = {
//This will style the Checkbox border
ListContainer: styles.pilllist.ListContainer.extend`
width: 50%;
border-radius: 8px;
`
};
state = { items: ['one', 'second large item', 'third item'] }
onDelete = (value: string) => {
const items = this.state.items.filter(item => item !== value)
this.setState({ items});
}
render() {
return (
<InputPillList
onClick={(value) => this.onDelete(value)}
items={this.state.items}
updateItems={(items) => this.setState({items})}
styles={style}
>
<TextInput />
<PillList />
</InputPillList>
);
}
```