Skip to content

Commit 056fb03

Browse files
author
Ivan Uzun
committed
Initial Setup, MultiSelect, Catalog
0 parents  commit 056fb03

24 files changed

+1746
-0
lines changed

‎.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
"react",
4+
"env",
5+
"stage-0"
6+
]
7+
}

‎.gitignore

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
dist
6+
es
7+
out
8+
9+
# misc
10+
catalog/build
11+
.DS_Store
12+
13+
npm-debug.log*
14+
yarn-debug.log*
15+
yarn-error.log*
16+
17+
# IDEs
18+
.idea
19+
.vscode

‎.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
catalog
2+
out
3+
.babelrc
4+
.gitignore
5+
webpack.config.js

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Darian
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
> Single/Multi Select React Component
2+
3+
[Demo](https://darianstlex.github.io/react-sm-select) inspired by [React MultiSelect](https://github.com/Khan/react-multi-select)
4+
5+
### Props
6+
7+
- **`id: string`** ID attribute of the container
8+
- **`options: array`** Array of options to select from in format: **Required**
9+
10+
```code
11+
lang: js
12+
---
13+
[
14+
{ value: 'red', label: 'Red' },
15+
{ value: 'blue', label: 'Blue' }
16+
]
17+
```
18+
19+
- **`value: array: []`** Array of preselected options in format:
20+
21+
```code
22+
lang: js
23+
---
24+
[ 'red', 'blue' ]
25+
```
26+
27+
- **`onSelectedChanged: function`** Function to be executed on select: **Required**
28+
29+
```code
30+
lang: js
31+
---
32+
onSelectedChanged(value) {
33+
// value - see 'value' property
34+
}
35+
```
36+
37+
- **`enableSearch: boolean: false`** Enables search field
38+
- **`isLoading: boolean: false`** Shows loading indicator
39+
- **`disabled: boolean: false`** Disable component
40+
- **`hasSelectAll: boolean: true`** Shows 'Select All' options
41+
- **`selectAllLabel: boolean: Select All`** Provides custom label for 'Select All'
42+
- **`shouldToggleOnHover: boolean: false`** Toggle select drop-down on hover
43+
- **`singleSelect: boolean: false`** Set component to behave as a single select
44+
- **`filterOptions: function`** Custom filter function:
45+
46+
```code
47+
lang: js
48+
---
49+
filterOptions(options, text) {
50+
// options - see 'options' property
51+
// text - search string
52+
53+
return - array of filtered options
54+
}
55+
```
56+
57+
- **`ValueRenderer: function`** Render custom Value:
58+
59+
```code
60+
lang: js
61+
---
62+
ValueRenderer({value, options}) {
63+
// options: array - see 'options' property
64+
// value: array - see 'value' property
65+
66+
return - component to render custom value
67+
}
68+
```
69+
70+
- **`OptionRenderer: function`** Render custom Option
71+
72+
```code
73+
lang: js
74+
---
75+
OptionRenderer({option, checked, disabled, onClick}) {
76+
// option: object - from options props: { value, label }
77+
// checked: boolean - define if option is checked
78+
// disabled: boolean - disable option if component is disabled
79+
// onClick: function - notifies component about option click
80+
81+
return - component to render custom Option
82+
}
83+
```
84+
85+
- **`ArrowRenderer: function`** Render custom DropDown Arrow
86+
87+
```code
88+
lang: js
89+
---
90+
ArrowRenderer({options, value, expanded, hasFocus}) {
91+
// options: array - see 'options' prop
92+
// value: array - see 'value' property
93+
// expanded: boolean - expanded component status
94+
// hasFocus: boolean - hasFocus component status
95+
96+
return - component to render custom Arrow
97+
}
98+
```
99+
100+
- **`LoadingRenderer: function`** Render custom Loading Indicator
101+
102+
```code
103+
lang: js
104+
---
105+
LoadingRenderer() {
106+
return - component to render custom Loading Indicator
107+
}
108+
```

‎catalog/catalog.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body {
2+
font-family: 'Roboto', sans-serif;
3+
font-size: 1rem;
4+
}
5+
6+
input, textarea, select {
7+
font-size: 1rem;
8+
}

‎catalog/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
8+
<title>Catalog</title>
9+
</head>
10+
<body>
11+
<div id="catalog"></div>
12+
</body>
13+
</html>

‎catalog/index.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import {Catalog, pageLoader, ReactSpecimen} from 'catalog';
4+
import logo from "./static/r-logo.svg";
5+
import {MultiSelect} from '../src';
6+
import './catalog.css';
7+
import '../src/styles.css';
8+
9+
const markdownLoader = page => pageLoader(() => import(`./${page}.md`));
10+
11+
const pages = [
12+
{
13+
path: '/',
14+
title: 'Info',
15+
content: markdownLoader('info'),
16+
},
17+
// {
18+
// title: 'Installation',
19+
// path: 'installation/create-catalog',
20+
// content: markdownLoader('installation'),
21+
// },
22+
{
23+
imports: {MultiSelect},
24+
path: 'specimens',
25+
title: 'Specimens',
26+
content: markdownLoader('specimens'),
27+
},
28+
];
29+
30+
ReactDOM.render(
31+
<Catalog
32+
title="SM Select"
33+
logoSrc={logo}
34+
pages={pages}
35+
specimens={{
36+
'js': props => <ReactSpecimen {...props} lang="javascript" />,
37+
}}
38+
/>,
39+
document.getElementById("catalog")
40+
);

‎catalog/info.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
> Single/Multi Select React Component
2+
3+
Inspired by [React MultiSelect](https://github.com/Khan/react-multi-select)
4+
5+
### Props
6+
7+
- **`id: string`** ID attribute of the container
8+
- **`options: array`** Array of options to select from in format: **Required**
9+
10+
```code
11+
lang: js
12+
---
13+
[
14+
{ value: 'red', label: 'Red' },
15+
{ value: 'blue', label: 'Blue' }
16+
]
17+
```
18+
19+
- **`value: array: []`** Array of preselected options in format:
20+
21+
```code
22+
lang: js
23+
---
24+
[ 'red', 'blue' ]
25+
```
26+
27+
- **`onSelectedChanged: function`** Function to be executed on select: **Required**
28+
29+
```code
30+
lang: js
31+
---
32+
onSelectedChanged(value) {
33+
// value - see 'value' property
34+
}
35+
```
36+
37+
- **`enableSearch: boolean: false`** Enables search field
38+
- **`isLoading: boolean: false`** Shows loading indicator
39+
- **`disabled: boolean: false`** Disable component
40+
- **`hasSelectAll: boolean: true`** Shows 'Select All' options
41+
- **`selectAllLabel: boolean: Select All`** Provides custom label for 'Select All'
42+
- **`shouldToggleOnHover: boolean: false`** Toggle select drop-down on hover
43+
- **`singleSelect: boolean: false`** Set component to behave as a single select
44+
- **`filterOptions: function`** Custom filter function:
45+
46+
```code
47+
lang: js
48+
---
49+
filterOptions(options, text) {
50+
// options - see 'options' property
51+
// text - search string
52+
53+
return - array of filtered options
54+
}
55+
```
56+
57+
- **`ValueRenderer: function`** Render custom Value:
58+
59+
```code
60+
lang: js
61+
---
62+
ValueRenderer({value, options}) {
63+
// options: array - see 'options' property
64+
// value: array - see 'value' property
65+
66+
return - component to render custom value
67+
}
68+
```
69+
70+
- **`OptionRenderer: function`** Render custom Option
71+
72+
```code
73+
lang: js
74+
---
75+
OptionRenderer({option, checked, disabled, onClick}) {
76+
// option: object - from options props: { value, label }
77+
// checked: boolean - define if option is checked
78+
// disabled: boolean - disable option if component is disabled
79+
// onClick: function - notifies component about option click
80+
81+
return - component to render custom Option
82+
}
83+
```
84+
85+
- **`ArrowRenderer: function`** Render custom DropDown Arrow
86+
87+
```code
88+
lang: js
89+
---
90+
ArrowRenderer({options, value, expanded, hasFocus}) {
91+
// options: array - see 'options' prop
92+
// value: array - see 'value' property
93+
// expanded: boolean - expanded component status
94+
// hasFocus: boolean - hasFocus component status
95+
96+
return - component to render custom Arrow
97+
}
98+
```
99+
100+
- **`LoadingRenderer: function`** Render custom Loading Indicator
101+
102+
```code
103+
lang: js
104+
---
105+
LoadingRenderer() {
106+
return - component to render custom Loading Indicator
107+
}
108+
```

0 commit comments

Comments
 (0)