110 | The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
111 |
129 |
130 |
131 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | );
147 | }
148 | }
149 | ```
150 |
151 | Also important notice from authors of react-toolbox:
152 | "Take into account that any required style will be included in the final CSS so your final would include `Button` styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it."
153 |
154 | ## Importing components
155 |
156 | The project inherits the same style of component structures that is in react-toolbox project, what makes it easy to use for everybody who is familiar with react-toolbox components structure.
157 | ```
158 | |- /pager
159 | |---- pager.js
160 | |---- _config.scss
161 | |---- index.js
162 | |---- readme.md
163 | |---- theme.scss
164 | ```
165 |
166 | ### Bundled component
167 |
168 | ```js
169 | import { Pager } from 'react-toolbox-additions/lib/pager';
170 | import { Accordion, Chord } from 'react-toolbox-additions/lib/accordion';
171 | import { FilePicker } from 'react-toolbox-additions/lib/filepicker';
172 | ```
173 |
174 | ## Screenshots
175 |
176 |
177 |
178 |
179 |
180 | ## Authors and Contributors
181 |
182 | The project is being initially developed and maintained by [Max Komlev](https://github.com/MaximKomlev).
183 |
184 | Steps to build project and run example locally.
185 |
186 | ```
187 | $ git clone https://github.com/MaximKomlev/react-toolbox-additions.git
188 | $ npm install
189 | $ npm run build
190 | $ npm start
191 | ```
192 |
193 | Local example will be available at `http://localhost:8000/`.
194 |
195 | ## Components in bundle
196 |
197 | Currently the library implements Pager, FilePicker and Accordion components.
198 |
199 | ## Changes
200 |
201 | [The log of changes](https://github.com/MaximKomlev/react-toolbox-additions/blob/master/changelog.md).
202 |
203 | ## License
204 |
205 | This project is licensed under the terms of the [MIT license](https://github.com/MaximKomlev/react-toolbox-additions/blob/master/LICENSE).
206 |
--------------------------------------------------------------------------------
/changelog.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | All notable changes to this project will be documented in this file.
3 |
4 | ## [Release 1.3.9] - 01/05/2016
5 | ### Updated
6 | - Fixed typing at readme.
7 |
8 | ## [Release 1.3.8] - 01/04/2016
9 | ### Updated
10 | - Fixed misversioning.
11 |
12 | ## [Release 1.3.7] - 02/04/2016
13 | ### Updated
14 | - To follow base project (react-toolbox).
15 |
16 | ## [Release 1.3.6] - 12/14/2016
17 | ### Updated
18 | - Exported components.
19 |
20 | ## [Release 1.3.5] - 12/14/2016
21 | ### Updated
22 | - Dependencies.
23 |
24 | ## [Release 1.3.4] - 12/14/2016
25 | ### Added
26 | - Chord icon and postIcon customization.
27 |
28 | ## [Release 1.3.3] - 12/06/2016
29 | ### Fixed
30 | - Chord resizing and content growing.
31 |
32 | ## [Release 1.3.2] - 12/05/2016
33 | ### Fixed
34 | - Chord icon styling.
35 |
36 | ## [Release 1.3.1] - 12/05/2016
37 | ### Fixed
38 | - Component resizing.
39 |
40 | ### Updated
41 | - Sample.
42 |
43 | ### Changed
44 | - labelIcon and labelPostIcon properties to take value as component or string.
45 |
46 | ## [Release 1.3.0] - 12/05/2016
47 | ### Added
48 | - Initial version of Accordion component.
49 |
50 | ## [Release 1.2.4] - 11/29/2016
51 | ### Added
52 | - Change log at readme.
53 |
54 | ## [Release 1.2.3] - 11/29/2016
55 | ### Added
56 | - Styling for first and last pages buttons.
57 |
58 | ### Fixed
59 | - Adjasment of buttons number according to visibleBlockSize.
60 |
61 | ## [Release 1.2.2] - 11/28/2016
62 | ### Added
63 | - Missed file.
64 |
65 | ## [Release 1.2.1] - 11/28/2016
66 | ### Added
67 | - More examples of pager to use.
68 |
69 | ### Fixed
70 | - Fixed runtime react warning on filepicker component.
71 | - Fixed ripple appearing on page button click.
72 |
73 | ### Changed
74 | - Updated default layout of Pager component from flex to inline-block.
75 | - Updated default layout of FilePicker component from flex to inline-block.
76 |
77 | ## [Release 1.1.2] - 11/16/2016
78 | ### Changed
79 | - Changed FilePicker Public Interface to provide more flexible way to customize/change behaviour or view of component.
80 | - Updated Sample of use.
81 |
82 | ## [Release 1.0.1] - 10/30/2016
83 | ### Added
84 | - Initial Version.
85 |
--------------------------------------------------------------------------------
/example/components/accordion.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import FontIcon from 'react-toolbox/lib/font_icon';
3 | import Input from 'react-toolbox/lib/input';
4 | import {Button} from 'react-toolbox/lib/button';
5 | import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from 'react-toolbox/lib/list';
6 |
7 | import {Accordion, Chord} from '../../lib/accordion';
8 | import style from '../style';
9 |
10 | class AccordionTest extends React.Component {
11 |
12 | static propTypes = {
13 | };
14 |
15 | static defaultProps = {
16 | }
17 |
18 | state = {
19 | index1: 0,
20 | index2: 0
21 | }
22 |
23 | onChange1 = (idx) => {
24 | this.setState({
25 | index1: idx
26 | });
27 | }
28 |
29 | onChange2 = (idx) => {
30 | this.setState({
31 | index2: idx
32 | });
33 | }
34 |
35 | onActive1 = () => {
36 | console.info('Selected chord: ' + this.state.index1);
37 | }
38 |
39 | onActive2 = () => {
40 | console.info('Selected chord: ' + this.state.index1);
41 | }
42 |
43 | onActive3 = () => {
44 | console.info('Selected chord: ' + this.state.index1);
45 | }
46 |
47 | render () {
48 |
49 | return (
50 |
51 |
Accordion
52 |
Accordion component.
53 |
54 |
55 |
60 |
64 |
65 | The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
66 |
117 | The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
118 |
181 | );
182 | }
183 | }
184 |
185 | export default themr(CHORD)(Chord);
186 | export { Chord };
187 |
--------------------------------------------------------------------------------
/src/accordion/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import ReactToolbox from "../index";
3 |
4 | export interface AccordionTheme {
5 | /**
6 | * Used for the root element.
7 | */
8 | accordion?: string;
9 | }
10 |
11 | interface AccordionProps extends ReactToolbox.Props {
12 | /**
13 | * The class(s) will be applied to the root elemt.
14 | */
15 | className
16 | /**
17 | * Children to pass through the component.
18 | */
19 | children?: React.ReactNode;
20 | /**
21 | * Disable the animation on children expanding/collapsing.
22 | * @default false
23 | */
24 | disableAnimation?: boolean;
25 | /**
26 | * Expanded element
27 | * @default 0
28 | */
29 | index?: number;
30 | /**
31 | * Callback function that is fired when the Chord changes.
32 | */
33 | onChange?: Function;
34 | /**
35 | * Classnames object defining the component style.
36 | */
37 | theme?: AccordionTheme;
38 | }
39 |
40 | export class Accordion extends React.Component { }
41 |
42 | export interface ChordTheme {
43 | /**
44 | * Added to the chord element (label and content) in case it's active.
45 | */
46 | active?: string;
47 | /**
48 | * Added to the chord element in case it's disabled.
49 | */
50 | disabled?: string;
51 | /**
52 | * Added to the chord element in case it's hidden.
53 | */
54 | hidden?: string;
55 | /**
56 | * Base style of header of chord element.
57 | */
58 | label?: string;
59 | /**
60 | * Base style of content of chord element.
61 | */
62 | content?: string;
63 | }
64 |
65 | interface ChordProps extends ReactToolbox.Props {
66 | /**
67 | * If true, the current component is visible.
68 | */
69 | active?: boolean;
70 | /**
71 | * Additional class name to provide custom styling for the active Chord.
72 | */
73 | activeClassName?: string;
74 | /**
75 | * If true, the current component is not clickable.
76 | * @default false
77 | */
78 | disabled?: boolean;
79 | /**
80 | * If true, the current component is not visible.
81 | * @default false
82 | */
83 | hidden?: boolean;
84 | /**
85 | * Label text for the chord header. Required.
86 | */
87 | label: string;
88 | /**
89 | * Icon for chord header. Required.
90 | */
91 | labelIcon: string;
92 | /**
93 | * Icon behind of the label for chord header.
94 | */
95 | labelPostIcon: string;
96 | /**
97 | * Callback function that is fired when the Chord is activated.
98 | */
99 | onActive?: Function;
100 | /**
101 | * Callback function that is fired when the chord label is clicked.
102 | */
103 | onClick?: Function;
104 | /**
105 | * Classnames object defining the component style.
106 | */
107 | theme?: ChordTheme;
108 | }
109 |
110 | export class Chord extends React.Component { }
111 |
--------------------------------------------------------------------------------
/src/accordion/index.js:
--------------------------------------------------------------------------------
1 | import { themr } from 'react-css-themr';
2 | import { ACCORDION } from '../identifiers.js';
3 | import { accordionFactory } from './accordion.js';
4 | import { Chord } from './chord.js';
5 | import theme from './theme.scss';
6 |
7 | const applyTheme = (Component) => themr(ACCORDION, theme)(Component);
8 | const ThemedChord = applyTheme(Chord);
9 | const ThemedAccordion = applyTheme(accordionFactory(ThemedChord));
10 |
11 | export { ThemedChord as Chord };
12 | export { ThemedAccordion as Accordion };
13 |
--------------------------------------------------------------------------------
/src/accordion/readme.md:
--------------------------------------------------------------------------------
1 | # Accordion
2 |
3 | Provides functionality of Accordion control, actually the component is not defined at(https://www.google.com/design/spec/components),
4 | but designed by using standard components from material design utilizing react-toolbox components library (http://react-toolbox.com/).
5 | It is easy to use and configure, also it is highly customizable.
6 |
7 |
8 | ```jsx
9 | import React, { PropTypes } from 'react';
10 | import FontIcon from 'react-toolbox/lib/font_icon';
11 | import Input from 'react-toolbox/lib/input';
12 | import {Button} from 'react-toolbox/lib/button';
13 | import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from 'react-toolbox/lib/list';
14 |
15 | import {Accordion, Chord} from '../../lib/accordion';
16 | import style from '../style';
17 |
18 | class AccordionTest extends React.Component {
19 |
20 | static propTypes = {
21 | };
22 |
23 | static defaultProps = {
24 | }
25 |
26 | state = {
27 | index: 0
28 | }
29 |
30 | onChange = (idx) => {
31 | this.setState({
32 | index: idx
33 | });
34 | }
35 |
36 | onActive1 = () => {
37 | console.info('Selected chord: ' + this.state.index);
38 | }
39 |
40 | onActive2 = () => {
41 | console.info('Selected chord: ' + this.state.index);
42 | }
43 |
44 | onActive3 = () => {
45 | console.info('Selected chord: ' + this.state.index);
46 | }
47 |
48 | render () {
49 |
50 | return (
51 |
52 |
Accordion
53 |
Accordion component.
54 |
55 |
56 |
61 |
65 |
66 | The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
67 |
178 |