Skip to content

Commit

Permalink
Merge branch 'master' of github.com:micromedio/herz-ui into DEV-203
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsweliton
itsweliton committed Jun 23, 2021
2 parents 1f3c1f5 + 44af3fb commit 126cd73
Show file tree
Hide file tree
Showing 16 changed files with 1,059 additions and 92 deletions.
277 changes: 272 additions & 5 deletions src/components/Autocomplete/Autocomplete.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
Autocomplete example:

### Single Select

#### Default

```js
Expand Down Expand Up @@ -41,7 +43,7 @@ const [value, setValue] = React.useState(null)
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 2,
padding: 8,
}}
>
{option.label}
Expand Down Expand Up @@ -100,7 +102,7 @@ const [value, setValue] = React.useState(null)
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 2,
padding: 8,
}}
>
{option.label}
Expand Down Expand Up @@ -179,7 +181,7 @@ const [value, setValue] = React.useState(mockedOptions[0])
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 2,
padding: 8,
}}
>
{option.label}
Expand Down Expand Up @@ -257,7 +259,7 @@ const [value, setValue] = React.useState(mockedOptions[5])
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 2,
padding: 8,
}}
>
{option.label}
Expand Down Expand Up @@ -357,7 +359,7 @@ const [value, setValue] = React.useState(null)
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 2,
padding: 8,
}}
>
<Highlight search={inputValue} text={option.label} />
Expand Down Expand Up @@ -392,3 +394,268 @@ const [value, setValue] = React.useState(null)
/>
)
```

### Multi Select

#### With Tags

```js
import Highlight from "../Highlight/Highlight"
const mockedOptions = [
{ value: 1, label: "Neptunium", symbol: "Np", A: 237, Z: 93 },
{ value: 2, label: "Plutonium", symbol: "Pu", A: 244, Z: 94 },
{ value: 3, label: "Americium Darmstad", symbol: "Am", A: 243, Z: 95 },
{ value: 4, label: "Curium", symbol: "Cm", A: 247, Z: 96 },
{ value: 5, label: "Berkelium Flerovios", symbol: "Bk", A: 247, Z: 97 },
{ value: 6, label: "Californium Copernicus", symbol: "Cf", A: 251, Z: 98 },
{ value: 7, label: "Einsteinium", symbol: "Es", A: 252, Z: 99 },
{ value: 8, label: "Fermium", symbol: "Fm", A: 257, Z: 100 },
{ value: 9, label: "Mendelevium", symbol: "Md", A: 258, Z: 101 },
{ value: 10, label: "Nobelium", symbol: "No", A: 259, Z: 102 },
]
const [items, setItems] = React.useState(mockedOptions)
const [value, setValue] = React.useState([])
;(
<Autocomplete
getOptionLabel={(option) => option.label}
multiSelect
onInputValueChange={({ inputValue }) => {
setItems(
mockedOptions.filter((option) =>
inputValue
? option.label
.toLocaleLowerCase()
.startsWith(inputValue.toLocaleLowerCase())
: true
)
)
}}
options={items.slice(0, 5)}
placeholder="Search by organization's name or handle"
renderOption={({ defaultStyles, option, inputValue }) => (
<div
style={{
...defaultStyles,
alignContent: "center",
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 8,
}}
>
<Highlight search={inputValue} text={option.label} />
</div>
)}
onSelectedItemsChange={(selectedOptions) => {
setValue(selectedOptions)
}}
selectedOption={value}
totalCount={items.length}
/>
)
```

#### With Remove

```js
import Highlight from "../Highlight/Highlight"
const mockedOptions = [
{ value: 1, label: "Neptunium", symbol: "Np", A: 237, Z: 93 },
{ value: 2, label: "Plutonium", symbol: "Pu", A: 244, Z: 94 },
{ value: 3, label: "Americium Darmstad", symbol: "Am", A: 243, Z: 95 },
{ value: 4, label: "Curium", symbol: "Cm", A: 247, Z: 96 },
{ value: 5, label: "Berkelium Flerovios", symbol: "Bk", A: 247, Z: 97 },
{ value: 6, label: "Californium Copernicus", symbol: "Cf", A: 251, Z: 98 },
{ value: 7, label: "Einsteinium", symbol: "Es", A: 252, Z: 99 },
{ value: 8, label: "Fermium", symbol: "Fm", A: 257, Z: 100 },
{ value: 9, label: "Mendelevium", symbol: "Md", A: 258, Z: 101 },
{ value: 10, label: "Nobelium", symbol: "No", A: 259, Z: 102 },
]
const [items, setItems] = React.useState(mockedOptions)
const [value, setValue] = React.useState([mockedOptions[0], mockedOptions[1]])
;(
<Autocomplete
getOptionLabel={(option) => option.label}
multiSelect
onInputValueChange={({ inputValue }) => {
setItems(
mockedOptions.filter((option) =>
inputValue
? option.label
.toLocaleLowerCase()
.startsWith(inputValue.toLocaleLowerCase())
: true
)
)
}}
onRemove={(option) => {
setValue(value.filter((selected) => selected.value !== option.value))
}}
options={items.slice(0, 5)}
placeholder="Search by organization's name or handle"
renderOption={({ defaultStyles, option, inputValue }) => (
<div
style={{
...defaultStyles,
alignContent: "center",
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 8,
}}
>
<Highlight search={inputValue} text={option.label} />
</div>
)}
onSelectedItemsChange={(selectedOptions) => {
setValue(selectedOptions)
}}
selectedOption={value}
totalCount={items.length}
/>
)
```

#### With Custom Render

```js
import Highlight from "../Highlight/Highlight"
const mockedOptions = [
{ value: 1, label: "Neptunium", symbol: "Np", A: 237, Z: 93 },
{ value: 2, label: "Plutonium", symbol: "Pu", A: 244, Z: 94 },
{ value: 3, label: "Americium Darmstad", symbol: "Am", A: 243, Z: 95 },
{ value: 4, label: "Curium", symbol: "Cm", A: 247, Z: 96 },
{ value: 5, label: "Berkelium Flerovios", symbol: "Bk", A: 247, Z: 97 },
{ value: 6, label: "Californium Copernicus", symbol: "Cf", A: 251, Z: 98 },
{ value: 7, label: "Einsteinium", symbol: "Es", A: 252, Z: 99 },
{ value: 8, label: "Fermium", symbol: "Fm", A: 257, Z: 100 },
{ value: 9, label: "Mendelevium", symbol: "Md", A: 258, Z: 101 },
{ value: 10, label: "Nobelium", symbol: "No", A: 259, Z: 102 },
]
const [items, setItems] = React.useState(mockedOptions)
const [value, setValue] = React.useState([mockedOptions[0]])
;(
<Autocomplete
getOptionLabel={(option) => option.label}
multiSelect
onInputValueChange={({ inputValue }) => {
setItems(
mockedOptions.filter((option) =>
inputValue
? option.label
.toLocaleLowerCase()
.startsWith(inputValue.toLocaleLowerCase())
: true
)
)
}}
onRemove={(option) => {
setValue(value.filter((selected) => selected.value !== option.value))
}}
options={items.slice(0, 5)}
placeholder="Search by organization's name or handle"
renderOption={({ defaultStyles, option, inputValue }) => (
<div
style={{
...defaultStyles,
alignContent: "center",
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 8,
}}
>
<Highlight search={inputValue} text={option.label} />
</div>
)}
renderSelectedItems={(options) => {
return options.map((option) => (
<span key={option.value}>
{option.label}{" "}
<strong>
<sup sx={{ position: "relative", left: 3, top: "-5px" }}>
{option.A}
</sup>
<sub
sx={{
position: "relative",
top: "5px",
}}
>
{option.Z}
</sub>
{option.symbol}
</strong>
</span>
))
}}
onSelectedItemsChange={(selectedOptions) => {
setValue(selectedOptions)
}}
selectedOption={value}
totalCount={items.length}
/>
)
```

#### Keep Search After Select

```js
import Highlight from "../Highlight/Highlight"
const mockedOptions = [
{ value: 1, label: "Neptunium", symbol: "Np", A: 237, Z: 93 },
{ value: 2, label: "Plutonium", symbol: "Pu", A: 244, Z: 94 },
{ value: 3, label: "Americium Darmstad", symbol: "Am", A: 243, Z: 95 },
{ value: 4, label: "Curium", symbol: "Cm", A: 247, Z: 96 },
{ value: 5, label: "Berkelium Flerovios", symbol: "Bk", A: 247, Z: 97 },
{ value: 6, label: "Californium Copernicus", symbol: "Cf", A: 251, Z: 98 },
{ value: 7, label: "Einsteinium", symbol: "Es", A: 252, Z: 99 },
{ value: 8, label: "Fermium", symbol: "Fm", A: 257, Z: 100 },
{ value: 9, label: "Mendelevium", symbol: "Md", A: 258, Z: 101 },
{ value: 10, label: "Nobelium", symbol: "No", A: 259, Z: 102 },
]
const [items, setItems] = React.useState(mockedOptions)
const [value, setValue] = React.useState([mockedOptions[0], mockedOptions[1]])
;(
<Autocomplete
getOptionLabel={(option) => option.label}
keepSearchAfterSelect
multiSelect
onInputValueChange={({ inputValue }) => {
setItems(
mockedOptions.filter((option) =>
inputValue
? option.label
.toLocaleLowerCase()
.startsWith(inputValue.toLocaleLowerCase())
: true
)
)
}}
onRemove={(option) => {
setValue(value.filter((selected) => selected.value !== option.value))
}}
options={items.slice(0, 5)}
placeholder="Search by organization's name or handle"
renderOption={({ defaultStyles, option, inputValue }) => (
<div
style={{
...defaultStyles,
alignContent: "center",
alignItems: "center",
backgroundColor: defaultStyles.backgroundColor && "rgba(0,130,252,0.05)",
display: "flex",
padding: 8,
}}
>
<Highlight search={inputValue} text={option.label} />
</div>
)}
onSelectedItemsChange={(selectedOptions) => {
setValue(selectedOptions)
}}
selectedOption={value}
totalCount={items.length}
/>
)
```
Loading

0 comments on commit 126cd73

Please sign in to comment.