19 |
37 |
20 |
25 |
26 |
36 |
80 |
101 | );
102 | }
103 | }
104 |
105 | const mapStateToProps = state => ({
106 | autoCompleteValue: state.red.autoCompleteValue
107 | });
108 |
109 | export default connect(
110 | mapStateToProps,
111 | { autoCompleteChanged }
112 | )(Autocomplete);`} />
113 |
114 |
81 |
100 |
82 |
99 |
83 |
98 |
84 | textsms
85 | {
87 | this.Autocomplete = Autocomplete;
88 | }}
89 | type="text"
90 | id="autocomplete-input"
91 | className="autocomplete"
92 | onChange={this.onAutoCompleteChange}
93 | value={this.props.autoCompleteValue}
94 | />
95 |
96 |
97 |
10 |
25 |
44 |
52 | )
53 | }
54 |
55 | export default Store;
--------------------------------------------------------------------------------
/client/src/components/Autocomplete/autoCompleteAction.js:
--------------------------------------------------------------------------------
1 | const AUTOCOMPLETE_CHANGED = 'autocomplete_changed';
2 |
3 | export const autoCompleteChanged = autoCompleteValue => ({
4 | type: AUTOCOMPLETE_CHANGED,
5 | autoCompleteValue
6 | });
7 |
--------------------------------------------------------------------------------
/client/src/components/Autocomplete/autoCompleteReducer.js:
--------------------------------------------------------------------------------
1 | const AUTOCOMPLETE_CHANGED = 'autocomplete_changed';
2 |
3 | const initial_state = {
4 | autoCompleteValue: ""
5 | };
6 |
7 | export default (state = initial_state, action) => {
8 | switch (action.type) {
9 | case AUTOCOMPLETE_CHANGED:
10 | return { ...state, autoCompleteValue: action.autoCompleteValue };
11 | default:
12 | return { ...state };
13 | }
14 | };
--------------------------------------------------------------------------------
/client/src/components/Buttons/Navigation.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | const Navigation = ({ link, where, align }) => {
5 | return (
6 |
7 | {align === 'left' ?
8 | {where} :
9 | {where}}
10 |
11 |
12 | );
13 | }
14 |
15 | export default Navigation;
--------------------------------------------------------------------------------
/client/src/components/Carousel/Carousel.css:
--------------------------------------------------------------------------------
1 | .iframeStyle{
2 | width: 75%;
3 | height: 500px;
4 | border: 0;
5 | border-radius: 4px;
6 | overflow: hidden;
7 | margin-bottom: 3%;
8 | }
9 |
10 | .spacingLeft{
11 | padding-left: 3%;
12 | }
13 |
14 | @media (max-width: 992px){
15 | .iframeStyle{
16 | width: 100%;
17 | }
18 | .spacingLeft{
19 | padding-left: 0%;
20 | }
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/client/src/components/Carousel/Carousel.jsx:
--------------------------------------------------------------------------------
1 | import React, { lazy, Suspense } from 'react';
2 | import { Route } from 'react-router-dom';
3 | import Header from '../Headings/Header';
4 | import Loading from '../Loading';
5 | import './Carousel.css';
6 | import '../AsideStyle.css';
7 |
8 | const Aside = lazy(() => import('../Aside'));
9 | const Content = lazy(() => import('./Content'));
10 | const CarouselDemo = lazy(() => import('./CarouselDemo'));
11 |
12 | const Carousel = ({ match }) => {
13 | return (
14 |
15 |
16 |
18 |
19 |
33 |
34 | );
35 | };
36 |
37 | export default Carousel;
38 |
--------------------------------------------------------------------------------
/client/src/components/Carousel/CarouselDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import one from "../../Images/1.jpg";
4 | import two from "../../Images/2.jpg";
5 | import three from "../../Images/3.jpg";
6 | import four from "../../Images/4.jpg";
7 | import five from "../../Images/5.jpg";
8 | import SecondHeader from "../Headings/SecondHeader";
9 | import ThirdHeader from "../Headings/ThirdHeader";
10 | import Description from "../Headings/Description";
11 | import MarkupCode from '../code/MarkupCode';
12 | import Navigation from "../Buttons/Navigation";
13 | import './Carousel.css';
14 |
15 |
16 | class Carousel extends Component {
17 | componentDidMount() {
18 | const options = {
19 | duration: 300
20 | };
21 | M.Carousel.init(this.Carousel, options);
22 | }
23 |
24 | render() {
25 | return (
26 |
20 |
32 |
21 |
26 |
27 |
31 |
27 |
82 | );
83 | }
84 | }
85 |
86 | export default Carousel;
87 |
--------------------------------------------------------------------------------
/client/src/components/Carousel/CarouselSpecial.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import CarouselSpecialDemo from './CarouselSpecialDemo';
6 | import ThirdHeader from '../Headings/ThirdHeader';
7 |
8 |
9 | const CarouselSpecial = ({ prev }) => {
10 | return (
11 | {
32 | this.Carousel = Carousel;
33 | }}
34 | className="carousel"
35 | >
36 |
37 | 
38 |
39 |
40 | 
41 |
42 |
43 | 
44 |
45 |
46 | 
47 |
48 |
49 | 
50 |
51 |
52 | For more info related to Options and Methods please check Materialize 63 | 67 | {` Carousel `} 68 | docs
69 |
12 | {
32 | this.Carousel = Carousel;
33 | }}
34 | className="carousel carousel-slider center"
35 | >
36 |
58 | );
59 | }
60 | }
61 |
62 | export default CarouselSpecial;`} />
63 |
37 |
38 | button
39 |
40 |
41 |
42 |
45 | First Panel
43 |This is your first panel
44 |
46 |
49 | Second Panel
47 |This is your second panel
48 |
50 |
53 | Third Panel
51 |This is your third panel
52 |
54 |
57 | Fourth Panel
55 |This is your fourth panel
56 | {
17 | this.Carousel = Carousel;
18 | }}
19 | className="carousel carousel-slider center"
20 | >
21 |
43 | );
44 | }
45 | }
46 |
47 | export default CarouselSpecialDemo;
48 |
--------------------------------------------------------------------------------
/client/src/components/Carousel/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 | import CarouselSpecial from './CarouselSpecial';
5 |
6 | const Content = ({ match }) => {
7 | switch (match.params.id) {
8 | case 'ref_and_the_dom':
9 | return
22 |
23 | button
24 |
25 |
26 |
27 |
30 | First Panel
28 |This is your first panel
29 |
31 |
34 | Second Panel
32 |This is your second panel
33 |
35 |
38 | Third Panel
36 |This is your third panel
37 |
39 |
42 | Fourth Panel
40 |This is your fourth panel
41 |
10 | {
18 | this.Carousel = Carousel;
19 | }}
20 | className="carousel">
21 |
`
22 | } />
23 |
24 | 35 | Carousel React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 | {
80 | this.Carousel = Carousel;
81 | }}
82 | className="carousel"
83 | >
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | );
101 | }
102 | }
103 |
104 | export default Carousel;`} />
105 |
106 |
14 |
15 |
17 |
18 |
32 |
33 | );
34 | };
35 |
36 | export default Chips;
37 |
--------------------------------------------------------------------------------
/client/src/components/Chips/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'ref_and_the_dom':
8 | return
19 |
31 |
20 |
25 |
26 |
30 |
10 | {
18 | this.Chips = Chips;
19 | }}
20 | className="chips">
21 |
`
22 | } />
23 |
24 | 35 | Chips React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |
109 |
118 |
119 |
110 | 
111 | Jane Doe
112 |
113 |
114 | Tag
115 | close
116 |
117 | {
121 | this.Chips = Chips;
122 | }}
123 | className="chips"
124 | />
125 |
126 | {
64 | console.log("onOpenStart");
65 | },
66 | onOpenEnd: () => {
67 | console.log("onOpenEnd");
68 | },
69 | onCloseStart: () => {
70 | console.log("onCloseStart");
71 | },
72 | onCloseEnd: () => {
73 | console.log("onCloseEnd");
74 | },
75 | inDuration: 300,
76 | outDuration: 200
77 | };
78 | M.Collapsible.init(this.Collapsible1, options1);
79 | }
80 | render() {
81 | const { headingText, subHeading } = styles;
82 | return (
83 |
139 | )
140 | }
141 |
142 | export default RefAndDOM;
--------------------------------------------------------------------------------
/client/src/components/Datepicker/ActionReducer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SecondHeader from '../Headings/SecondHeader';
3 | import ThirdHeader from '../Headings/ThirdHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import Description from '../Headings/Description';
6 | import Navigation from '../Buttons/Navigation';
7 |
8 | const ActionReducer = ({ prev }) => {
9 | return (
10 | {
128 | this.Chips1 = Chips;
129 | }}
130 | className="chips chips-initial"
131 | />
132 |
135 |
34 |
42 | );
43 | }
44 |
45 | const styles = {
46 | headingText: {
47 | fontSize: 50,
48 | fontWeight: 300
49 | }
50 | };
51 |
52 | const rootElement = document.getElementById("root");
53 | ReactDOM.render( {
137 | this.Chips2 = Chips;
138 | }}
139 | className="chips chips-placeholder"
140 | />
141 |
142 |
163 | )
164 | }
165 |
166 | export default RefAndDOM;
--------------------------------------------------------------------------------
/client/src/components/Collapsible/Collapsible.css:
--------------------------------------------------------------------------------
1 | .iframeStyle{
2 | width: 75%;
3 | height: 500px;
4 | border: 0;
5 | border-radius: 4px;
6 | overflow: hidden;
7 | margin-bottom: 3%;
8 | }
9 |
10 | .spacingLeft{
11 | padding-left: 3%;
12 | }
13 |
14 | @media (max-width: 992px){
15 | .iframeStyle{
16 | width: 100%;
17 | }
18 | .spacingLeft{
19 | padding-left: 0%;
20 | }
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/client/src/components/Collapsible/Collapsible.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route } from 'react-router-dom';
3 | import Header from '../Headings/Header';
4 | import Aside from '../Aside';
5 | import Content from './Content';
6 | import CollapsibleDemo from './CollapsibleDemo';
7 | import './Collapsible.css';
8 |
9 | const Collapsible = ({ match }) => {
10 | return (
11 | {
144 | this.Chips3 = Chips;
145 | }}
146 | className="chips chips-autocomplete"
147 | />
148 |
149 | );
150 | }
151 | }
152 | const styles = {
153 | labelText: {
154 | fontSize: 14
155 | }
156 | };
157 |
158 | export default Chips;
159 | `} />
160 |
161 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Collapsible;
--------------------------------------------------------------------------------
/client/src/components/Collapsible/CollapsibleDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import './Collapsible.css';
9 |
10 | class CollapsibleDemo extends Component {
11 | componentDidMount() {
12 | const options1 = {
13 | inDuration: 300,
14 | outDuration: 200
15 | };
16 | M.Collapsible.init(this.Collapsible1, options1);
17 | }
18 |
19 | render() {
20 | return (
21 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
22 |
90 | );
91 | }
92 | }
93 |
94 |
95 | export default CollapsibleDemo;
96 |
--------------------------------------------------------------------------------
/client/src/components/Collapsible/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 | import PreselectedSelection from './PreselectedSelection';
5 | import Accordion from './Accordion';
6 | import Expandable from './Expandable';
7 | import Popout from './Popout';
8 |
9 | const Content = ({ match }) => {
10 | switch (match.params.id) {
11 | case 'ref_and_the_dom':
12 | return
23 |
27 |
28 | - {
30 | this.Collapsible1 = Collapsible;
31 | }}
32 | className="collapsible"
33 | >
34 |
-
35 | 36 | filter_dramaFirst 37 |38 |39 | Lorem ipsum dolor sit amet. 40 |41 |
42 |
-
43 | 44 | placeSecond 45 |46 |47 | Lorem ipsum dolor sit amet. 48 |49 |
50 |
-
51 | 52 | whatshotThird 53 |54 |55 | Lorem ipsum dolor sit amet. 56 |57 |
58 |
For more info related to Options and Methods please check Materialize 71 | 75 | {` Collapsible `} 76 | docs
77 |
19 | {
60 | console.log("onOpenStart");
61 | },
62 | onOpenEnd: () => {
63 | console.log("onOpenEnd");
64 | },
65 | onCloseStart: () => {
66 | console.log("onCloseStart");
67 | },
68 | onCloseEnd: () => {
69 | console.log("onCloseEnd");
70 | },
71 | inDuration: 300,
72 | outDuration: 200
73 | };
74 | M.Collapsible.init(this.Collapsible1, options1);
75 | }
76 |
77 | render() {
78 | const { headingText, subHeading } = styles;
79 | return (
80 |
133 | );
134 | }
135 | }
136 |
137 | export default Popout;
--------------------------------------------------------------------------------
/client/src/components/Collapsible/RefAndDOM.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import ThirdHeader from '../Headings/ThirdHeader';
5 | import JsxCode from '../code/JsxCode';
6 |
7 | const RefAndDOM = ({ next }) => {
8 | return (
9 | - {
22 | this.Collapsible = Collapsible;
23 | }}
24 | className="collapsible popout"
25 | >
26 |
-
27 | 28 | filter_dramaFirst 29 |30 |31 | Lorem ipsum dolor sit amet. 32 |33 |
34 |
-
35 | 36 | placeSecond 37 |38 |39 | Lorem ipsum dolor sit amet. 40 |41 |
42 |
-
43 | 44 | whatshotThird 45 |46 |47 | Lorem ipsum dolor sit amet. 48 |49 |
50 |
81 |
115 | );
116 | }
117 | }
118 |
119 | const styles = {
120 | headingText: {
121 | fontSize: 30,
122 | fontWeight: 300
123 | },
124 | subHeading: {
125 | fontSize: 20,
126 | fontWeight: 300
127 | }
128 | };
129 |
130 | export default Collapsible; `} />
131 |
82 |
114 | - {
84 | this.Collapsible1 = Collapsible;
85 | }}
86 | className="collapsible popout"
87 | >
88 |
-
89 | 90 | filter_dramaFirst 91 |92 |93 | Lorem ipsum dolor sit amet. 94 |95 |
96 |
-
97 | 98 | placeSecond 99 |100 |101 | Lorem ipsum dolor sit amet. 102 |103 |
104 |
-
105 | 106 | whatshotThird 107 |108 |109 | Lorem ipsum dolor sit amet. 110 |111 |
112 |
10 | {
18 | this.Collapsible = Collapsible;
19 | }}
20 | className="collapsible">
21 |
`
22 | } />
23 |
24 | 35 | Carousel React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |
84 |
119 | );
120 | }
121 | }
122 |
123 | const styles = {
124 | headingText: {
125 | fontSize: 30,
126 | fontWeight: 300
127 | },
128 | subHeading: {
129 | fontSize: 20,
130 | fontWeight: 300
131 | }
132 | };
133 |
134 | export default Collapsible;`} />
135 |
136 |
85 |
118 | 1. Collapsible with Preselected Section
86 |- {
88 | this.Collapsible1 = Collapsible;
89 | }}
90 | className="collapsible"
91 | >
92 |
-
93 | 94 | filter_dramaFirst 95 |96 |97 | Lorem ipsum dolor sit amet. 98 |99 |
100 |
-
101 | 102 | placeSecond 103 |104 |105 | Lorem ipsum dolor sit amet. 106 |107 |
108 |
-
109 | 110 | whatshotThird 111 |112 |113 | Lorem ipsum dolor sit amet. 114 |115 |
116 |
11 | ({
19 | type: DATE_CHANGED,
20 | date
21 | });`} />
22 | {
38 | switch (action.type) {
39 | case DATE_CHANGED:
40 | return { ...state, date: action.date };
41 | default:
42 | return { ...state };
43 | }
44 | };`} />
45 |
50 | );
51 | }
52 |
53 | export default ActionReducer;
--------------------------------------------------------------------------------
/client/src/components/Datepicker/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 | import Store from './Store';
5 | import ActionReducer from './ActionReducer';
6 |
7 | const Content = ({ match }) => {
8 | switch (match.params.id) {
9 | case 'ref_and_the_dom':
10 | return
12 |
13 |
15 |
16 |
27 |
28 | );
29 | }
30 |
31 | export default Datepicker;
--------------------------------------------------------------------------------
/client/src/components/Datepicker/DatepickerDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import { dateChanged } from './datepickerAction';
9 | import { connect } from 'react-redux';
10 | import './Datepicker.css';
11 |
12 | class DatepickerDemo extends Component {
13 | componentDidMount() {
14 | let context = this;
15 | const datePickerOptions = {
16 | autoClose: true,
17 | // minDate: new Date(2018, 11, 3)
18 | // defaultDate: new Date(2018, 1, 3),
19 | // setDefaultDate: true
20 | onSelect(date) {
21 | console.log(date);
22 | context.props.dateChanged(date);
23 | console.log(context.props.date);
24 | }
25 | };
26 | M.Datepicker.init(this.Datepicker, datePickerOptions);
27 |
28 | // let instance = M.Datepicker.getInstance(this.Datepicker);
29 | // instance.setDate(new Date(2018, 2, 3));
30 | }
31 |
32 | render() {
33 | return (
34 |
17 |
26 |
18 |
21 |
22 |
24 |
25 |
35 |
84 | );
85 | }
86 | }
87 |
88 | const mapStateToProps = state => ({
89 | date: state.date.date
90 | });
91 |
92 | export default connect(mapStateToProps, { dateChanged })(DatepickerDemo);
93 |
--------------------------------------------------------------------------------
/client/src/components/Datepicker/RefAndDOM.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import ThirdHeader from '../Headings/ThirdHeader';
6 |
7 | const RefAndDOM = ({ next }) => {
8 | return (
9 |
36 |
39 |
40 |
41 |
53 |
54 |
42 |
43 | {
45 | this.Datepicker = DatePicker;
46 | }}
47 | id="date-picker"
48 | type="text"
49 | className="datepicker"
50 | />
51 |
52 | For more info related to Options and Methods please check Materialize 65 | 69 | {` Datepicker `} 70 | docs
71 |
10 | {
18 | this.Datepicker = Datepicker;
19 | }}
20 | className="datepicker">
21 |
`
22 | } />
23 |
24 |
10 |
25 |
44 |
52 | )
53 | }
54 |
55 | export default Store;
--------------------------------------------------------------------------------
/client/src/components/Datepicker/datepickerAction.js:
--------------------------------------------------------------------------------
1 | const DATE_CHANGED = 'date_changed';
2 |
3 | export const dateChanged = date => ({
4 | type: DATE_CHANGED,
5 | date
6 | });
--------------------------------------------------------------------------------
/client/src/components/Datepicker/datepickerReducer.js:
--------------------------------------------------------------------------------
1 | const DATE_CHANGED = 'date_changed';
2 |
3 | const initial_state = {
4 | date: ""
5 | };
6 |
7 | export default (state = initial_state, action) => {
8 | switch (action.type) {
9 | case DATE_CHANGED:
10 | return { ...state, date: action.date };
11 | default:
12 | return { ...state };
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/client/src/components/Dropdown/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'ref_and_the_dom':
8 | return
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Dropdown;
--------------------------------------------------------------------------------
/client/src/components/Dropdown/DropdownDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import './Dropdown.css';
9 |
10 | class Collapsible extends Component {
11 | componentDidMount() {
12 | const options = {
13 | // hover: true,
14 | closeOnClick: true,
15 | alignment: "right",
16 | coverTrigger: false,
17 | inDuration: 300,
18 | outDuration: 200
19 | };
20 | M.Dropdown.init(this.Dropdown, options);
21 | }
22 |
23 | render() {
24 | return (
25 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
26 |
93 | );
94 | }
95 | }
96 |
97 |
98 | export default Collapsible;
99 |
--------------------------------------------------------------------------------
/client/src/components/Dropdown/RefAndDOM.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import ThirdHeader from '../Headings/ThirdHeader';
5 | import JsxCode from '../code/JsxCode';
6 |
7 | const RefAndDOM = () => {
8 | return (
9 |
27 |
30 |
31 | {
33 | this.Dropdown = Dropdown;
34 | }}
35 | className="dropdown-trigger btn waves-effect waves-light purple darken-4"
36 | data-target="dropdown1"
37 | >
38 | Drop Me!
39 |
40 |
41 | -
42 |
- 43 | one 44 | 45 |
- 46 | two 47 | 48 |
- 49 | three 50 | 51 |
- 52 | 53 | view_modulefour 54 | 55 | 56 |
- 57 | 58 | cloudfive 59 | 60 | 61 |
For more info related to Options and Methods please check Materialize 74 | 78 | {` Dropdown `} 79 | docs
80 |
10 | {
18 | this.Dropdown = Dropdown;
19 | }}
20 | className="dropdown">
21 |
`
22 | } />
23 |
24 | 35 | Dropdown React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |-
100 |
- 101 | one 102 | 103 |
- 104 | two 105 | 106 |
- 107 | three 108 | 109 |
- 110 | 111 | view_modulefour 112 | 113 | 114 |
- 115 | 116 | cloudfive 117 | 118 | 119 |
11 |
12 |
14 |
15 |
53 |
54 | );
55 | }
56 |
57 |
58 | const styles = {
59 | SpacingInAside: {
60 | marginTop: 120
61 | },
62 | SpacingLeft: {
63 | paddingLeft: '5%'
64 | }
65 | }
66 |
67 | export default GettingStarted;
--------------------------------------------------------------------------------
/client/src/components/Headings/Description.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Description = ({ desc }) => {
4 | const { descriptionText } = styles;
5 | return
16 |
52 |
17 | \n\n\n`}
31 | />
32 |
51 | {desc}
; 6 | }; 7 | 8 | const styles = { 9 | descriptionText: { 10 | fontSize: 16 11 | } 12 | } 13 | 14 | export default Description; -------------------------------------------------------------------------------- /client/src/components/Headings/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "materialize-css/dist/css/materialize.min.css"; 3 | import "./HeaderStyle.css"; 4 | import { withRouter, Link } from 'react-router-dom'; 5 | 6 | const Header = ({ headerText, match }) => { 7 | return ( 8 |
9 |
16 | );
17 | };
18 |
19 | export default withRouter(Header);
20 |
--------------------------------------------------------------------------------
/client/src/components/Headings/HeaderStyle.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | font-weight: 300;
3 | }
4 |
--------------------------------------------------------------------------------
/client/src/components/Headings/SecondHeader.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Description from "./Description";
3 |
4 | class SecondHeader extends Component {
5 |
6 | render() {
7 | const { secondHeader, desc } = this.props;
8 | const { headingText } = styles;
9 |
10 | return (
11 |
10 |
14 |
15 |
11 |
13 | {headerText}
12 |
12 |
23 | );
24 | }
25 | };
26 |
27 | const styles = {
28 | headingText: {
29 | fontWeight: 300
30 | }
31 | }
32 |
33 | export default SecondHeader;
--------------------------------------------------------------------------------
/client/src/components/Headings/ThirdHeader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Description from './Description';
3 |
4 | const ThirdHeader = ({ thirdHeader, desc }) => {
5 |
6 | return (
7 |
13 |
22 |
14 |
21 | 17 | {secondHeader} 18 |
19 | {desc &&
8 |
13 | );
14 | };
15 |
16 | export default ThirdHeader;
--------------------------------------------------------------------------------
/client/src/components/Loading.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Loading extends Component {
4 | render() {
5 | return (
6 |
9 |
12 | {thirdHeader}
10 | {desc &&
14 |
28 | );
29 | }
30 | }
31 |
32 | export default Loading;
33 |
--------------------------------------------------------------------------------
/client/src/components/Main.jsx:
--------------------------------------------------------------------------------
1 | import React, { lazy, Suspense } from 'react';
2 | import { Route, Switch } from 'react-router-dom';
3 |
4 | import Loading from './Loading';
5 |
6 | const GettingStarted = lazy(() => import('./GettingStarted'));
7 | const AutoComplete = lazy(() =>
8 | import('../components/Autocomplete/Autocomplete.jsx')
9 | );
10 | const Carousel = lazy(() => import('../components/Carousel/Carousel.jsx'));
11 | const Collapsible = lazy(() => import('../components/Collapsible/Collapsible'));
12 | const Dropdown = lazy(() => import('../components/Dropdown/Dropdown'));
13 | const MaterialBox = lazy(() =>
14 | import('../components//Material Box/MaterialBox')
15 | );
16 | const Slider = lazy(() => import('../components/Slider/Slider'));
17 | const Modal = lazy(() => import('../components/Modal/Modal'));
18 | const Parallax = lazy(() => import('../components/Parallax/Parallax'));
19 | const Tooltips = lazy(() => import('../components/Tooltips/Tooltips'));
20 | const Toasts = lazy(() => import('../components/Toasts/Toasts'));
21 | const Tabs = lazy(() => import('../components/Tabs/Tabs'));
22 | const Sidenav = lazy(() => import('../components/Sidenav/Sidenav'));
23 | const Scrollspy = lazy(() => import('../components/Scrollspy/Scrollspy'));
24 | const TextInput = lazy(() => import('../components/Text Input/TextInput'));
25 | const Select = lazy(() => import('../components/Select/Select'));
26 | const Datepicker = lazy(() => import('../components/Datepicker/Datepicker'));
27 | const Timepicker = lazy(() => import('../components/Timepicker/Timepicker'));
28 | const Chips = lazy(() => import('../components/Chips/Chips'));
29 |
30 | const Main = () => {
31 | return (
32 |
15 |
27 |
16 |
26 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default MaterialBox;
--------------------------------------------------------------------------------
/client/src/components/Material Box/MaterialBoxDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import image from '../../Images/aBfk-sample-1.jpg';
9 | import './MaterialBox.css';
10 |
11 | class MaterialBoxDemo extends Component {
12 | componentDidMount() {
13 | M.Materialbox.init(this.Materialbox);
14 | }
15 |
16 | render() {
17 | return (
18 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
19 | ![]()
{
28 | this.Materialbox = Materialbox;
29 | }}
30 | className="materialboxed col s12 m9"
31 | alt="1"
32 | width="650"
33 | src={image}
34 | data-caption="Sample Image"
35 | />
36 |
37 |
67 | );
68 | }
69 | }
70 |
71 |
72 | export default MaterialBoxDemo;
73 |
--------------------------------------------------------------------------------
/client/src/components/Material Box/RefAndDOM.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import ThirdHeader from '../Headings/ThirdHeader';
5 | import JsxCode from '../code/JsxCode';
6 |
7 | const RefAndDOM = () => {
8 | return (
9 |
20 |
25 |
26 | For more info related to Options and Methods please check Materialize 48 | 52 | {` Material Box `} 53 | docs
54 |
10 | {
18 | this.Materialbox = Materialbox;
19 | }}
20 | className="materialboxed">
21 |
`
22 | } />
23 |
24 | 35 | MaterialBox React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |
12 |
13 |
15 |
16 |
27 |
28 | );
29 | }
30 |
31 | export default Modal;
--------------------------------------------------------------------------------
/client/src/components/Modal/ModalDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import './Modal.css';
9 |
10 | class Modal extends Component {
11 | componentDidMount() {
12 | const options = {
13 | inDuration: 250,
14 | outDuration: 250,
15 | opacity: 0.5,
16 | dismissible: false,
17 | startingTop: "4%",
18 | endingTop: "10%"
19 | };
20 | M.Modal.init(this.Modal, options);
21 | }
22 |
23 | render() {
24 | return (
25 |
17 |
26 |
18 |
21 |
22 |
24 |
25 |
26 |
92 | );
93 | }
94 | }
95 |
96 |
97 | export default Modal;
98 |
--------------------------------------------------------------------------------
/client/src/components/Modal/RefAndDOM.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import ThirdHeader from '../Headings/ThirdHeader';
5 | import JsxCode from '../code/JsxCode';
6 |
7 | const Modal = ({ next }) => {
8 | return (
9 |
27 |
31 |
32 |
38 |
39 | {
41 | this.Modal = Modal;
42 | }}
43 | id="modal1"
44 | className="modal"
45 | >
46 |
61 |
62 |
47 |
50 | Modal Header
48 |A bunch of text
49 |
51 |
54 |
59 |
60 | For more info related to Options and Methods please check Materialize 73 | 77 | {` Modal `} 78 | docs
79 |
10 | {
18 | this.Modal = Modal;
19 | }}
20 | className="modal">
21 |
`
22 | } />
23 |
24 | 35 | Modal React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 | {
98 | this.Modal = Modal;
99 | }}
100 | id="modal1"
101 | className="modal"
102 | >
103 |
116 |
117 | );
118 | }
119 | }
120 |
121 | export default Modal;
122 |
123 | `} />
124 |
125 |
104 |
107 |
115 | Modal Header
105 |A bunch of text
106 |
13 |
14 |
16 |
17 |
27 |
28 | );
29 | }
30 | }
31 |
32 |
33 | export default Parallax;
--------------------------------------------------------------------------------
/client/src/components/Parallax/ParallaxDemo.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SecondHeader from "../Headings/SecondHeader";
3 | import ThirdHeader from "../Headings/ThirdHeader";
4 | import Description from "../Headings/Description";
5 | import MarkupCode from '../code/MarkupCode';
6 | import Navigation from '../Buttons/Navigation';
7 | import './Parallax.css';
8 |
9 | const Parallax = ({ match }) => {
10 | return (
11 |
18 |
26 |
19 |
22 |
23 |
24 |
25 |
12 |
53 | );
54 | }
55 |
56 | export default Parallax;
57 |
--------------------------------------------------------------------------------
/client/src/components/Parallax/RefAndDOM.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from '../Buttons/Navigation';
3 | import SecondHeader from '../Headings/SecondHeader';
4 | import ThirdHeader from '../Headings/ThirdHeader';
5 | import JsxCode from '../code/JsxCode';
6 |
7 | const RefAndDOM = () => {
8 | return (
9 |
13 |
18 |
19 |
20 | Open Demo
21 |
22 |
23 | For more info related to Options and Methods please check Materialize 34 | 38 | {` Parallax `} 39 | docs
40 |
10 | {
18 | this.Parallax = Parallax;
19 | }}
20 | className="parallax">
21 |
`
22 | } />
23 |
24 |
35 |
42 | 36 | Parallax React Demo 37 |
38 |39 | Learn how to use Materialize CSS framework in ReactJS 40 |
41 |
75 |
84 | {
77 | this.Parallax1 = Parallax;
78 | }}
79 | className="parallax"
80 | >
81 | 
82 |
83 |
85 |
94 |
86 |
93 | Parallax
87 |88 | Parallax is an effect where the background content or image in 89 | this case, is moved at a different speed than the foreground 90 | content while scrolling. 91 |
92 | {
96 | this.Parallax2 = Parallax;
97 | }}
98 | className="parallax-container"
99 | >
100 |
104 |
105 | );
106 | }
107 | }
108 |
109 | export default Parallax;
110 | `} />
111 |
112 |
101 | 
102 |
103 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Scrollspy;
--------------------------------------------------------------------------------
/client/src/components/Scrollspy/ScrollspyDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import './Scrollspy.css';
9 |
10 | class ScrollspyDemo extends Component {
11 | componentDidMount() {
12 | M.Materialbox.init(this.Materialbox);
13 | }
14 |
15 | render() {
16 | return (
17 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
18 |
57 | );
58 | }
59 | }
60 |
61 |
62 | export default ScrollspyDemo;
63 |
--------------------------------------------------------------------------------
/client/src/components/Select/ActionReducer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SecondHeader from '../Headings/SecondHeader';
3 | import ThirdHeader from '../Headings/ThirdHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import Description from '../Headings/Description';
6 | import Navigation from '../Buttons/Navigation';
7 |
8 | const ActionReducer = ({ prev }) => {
9 | return (
10 |
19 |
24 |
25 | Open Demo
26 |
27 | For more info related to Options and Methods please check Materialize 38 | 42 | {` Scrollspy `} 43 | docs
44 |
11 | ({
19 | type: SELECT_CHANGED,
20 | selectValue
21 | });`} />
22 | {
38 | switch (action.type) {
39 | case SELECT_CHANGED:
40 | return { ...state, selectValue: action.selectValue };
41 | default:
42 | return { ...state };
43 | }
44 | };`} />
45 |
50 | );
51 | }
52 |
53 | export default ActionReducer;
--------------------------------------------------------------------------------
/client/src/components/Select/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 | import Store from './Store';
5 | import ActionReducer from './ActionReducer';
6 |
7 | const Content = ({ match }) => {
8 | switch (match.params.id) {
9 | case 'ref_and_the_dom':
10 | return
10 | {
18 | this.FormSelect = FormSelect;
19 | }}
20 | onChange={this.handleChange}
21 | >`
22 | } />
23 |
24 | {
35 | this.props.selectChanged(event.target.value);
36 | };
37 | render() {
38 | return (
39 |
72 | )
73 | }
74 |
75 | export default RefAndDOM;
--------------------------------------------------------------------------------
/client/src/components/Select/Select.css:
--------------------------------------------------------------------------------
1 | .iframeStyle{
2 | width: 75%;
3 | height: 500px;
4 | border: 0;
5 | border-radius: 4px;
6 | overflow: hidden;
7 | }
8 |
9 | .spacingLeft{
10 | padding-left: 3%;
11 | }
12 |
13 | @media (max-width: 992px){
14 | .iframeStyle{
15 | width: 100%;
16 | }
17 | .spacingLeft{
18 | padding-left: 0%;
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/client/src/components/Select/Select.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route } from 'react-router-dom';
3 | import Header from '../Headings/Header';
4 | import Aside from '../Aside';
5 | import Content from './Content';
6 | import SelectDemo from './SelectDemo';
7 | import './Select.css';
8 |
9 | const Select = ({ match }) => {
10 | return (
11 |
40 |
53 |
54 |
55 | );
56 | }
57 | }
58 |
59 | const mapStateToProps = state => ({
60 | value: state.red.selectValue
61 | });
62 |
63 | export default connect(
64 | mapStateToProps,
65 | { selectChanged }
66 | )(Select);
67 | `} />
68 |
69 |
12 |
13 |
15 |
16 |
27 |
28 | );
29 | }
30 |
31 | export default Select;
--------------------------------------------------------------------------------
/client/src/components/Select/SelectDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import { selectChanged } from './selectAction';
9 | import { connect } from 'react-redux';
10 | import './Select.css';
11 |
12 | class SelectDemo extends Component {
13 | componentDidMount() {
14 | M.FormSelect.init(this.FormSelect);
15 | }
16 | handleChange = event => {
17 | this.props.selectChanged(event.target.value);
18 | };
19 |
20 | render() {
21 | return (
22 |
17 |
26 |
18 |
21 |
22 |
24 |
25 |
23 |
77 | );
78 | }
79 | }
80 |
81 | const mapStateToProps = state => ({
82 | value: state.select.selectValue
83 | });
84 |
85 | export default connect(mapStateToProps, { selectChanged })(SelectDemo);
86 |
--------------------------------------------------------------------------------
/client/src/components/Select/Store.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SecondHeader from '../Headings/SecondHeader';
3 | import ThirdHeader from '../Headings/ThirdHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import Navigation from '../Buttons/Navigation';
6 |
7 | const Store = ({ next, prev }) => {
8 | return (
9 |
24 |
27 |
28 |
29 |
46 |
47 |
30 |
43 |
44 |
45 | For more info related to Options and Methods please check Materialize 58 | 62 | {` Select `} 63 | docs
64 |
10 |
25 |
44 |
52 | )
53 | }
54 |
55 | export default Store;
--------------------------------------------------------------------------------
/client/src/components/Select/selectAction.js:
--------------------------------------------------------------------------------
1 | const SELECT_CHANGED = 'select_changed';
2 |
3 | export const selectChanged = selectValue => ({
4 | type: SELECT_CHANGED,
5 | selectValue
6 | });
7 |
--------------------------------------------------------------------------------
/client/src/components/Select/selectReducer.js:
--------------------------------------------------------------------------------
1 | const SELECT_CHANGED = 'select_changed';
2 |
3 | const initial_state = {
4 | selectValue: ""
5 | };
6 |
7 | export default (state = initial_state, action) => {
8 | switch (action.type) {
9 | case SELECT_CHANGED:
10 | return { ...state, selectValue: action.selectValue };
11 | default:
12 | return { ...state };
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/client/src/components/SideNav.css:
--------------------------------------------------------------------------------
1 | @media (min-width: 992px) {
2 | .sidenavOne {
3 | overflow-y: hidden !important;
4 | }
5 |
6 | .sidenavOne:hover {
7 | overflow-y: auto !important;
8 | }
9 | .sidenav {
10 | width: 250px !important;
11 | }
12 | }
13 |
14 | @media (max-width: 992px) {
15 | .sidenav {
16 | width: 200px !important;
17 | }
18 | }
19 |
20 | .buymecoffee-container {
21 | text-align: center;
22 | }
23 |
24 | .buymecoffee-style {
25 | margin: 20px 0 0 0;
26 | border: 0px none;
27 | height: 530px;
28 | width: 50%;
29 | border-radius: 3px;
30 | box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px;
31 | background: rgb(255, 255, 255)
32 | url('https://marketplace.kony.com/static/dist/images/loader.svg') no-repeat
33 | scroll center center / 64px;
34 | transition: all 0.4s ease 0s;
35 | }
36 |
--------------------------------------------------------------------------------
/client/src/components/SideNav.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import M from 'materialize-css';
3 | import 'materialize-css/dist/css/materialize.min.css';
4 | import { Link } from 'react-router-dom';
5 | import './SideNav.css';
6 |
7 | class Sidenav extends Component {
8 | componentDidMount() {
9 | M.Sidenav.init(this.Sidenav);
10 | }
11 |
12 | sideNavLinks() {
13 | const links = [
14 | '/autocomplete',
15 | '/carousel',
16 | '/chips',
17 | '/collapsible',
18 | '/datepicker',
19 | '/dropdown',
20 | '/material_box',
21 | '/modal',
22 | '/parallax',
23 | '/scrollspy',
24 | '/select',
25 | '/sidenav',
26 | '/slider',
27 | '/tabs',
28 | '/text_input',
29 | '/timepicker',
30 | '/toasts',
31 | '/tooltips'
32 | ];
33 | let linkName;
34 | return links.map((link, i) => {
35 | linkName = link
36 | .split('/')[1]
37 | .split('_')
38 | .join(' ');
39 | linkName = linkName.charAt(0).toUpperCase() + linkName.slice(1);
40 | return (
41 |
51 |
63 |
84 | );
85 | }
86 | }
87 |
88 | export default Sidenav;
89 |
--------------------------------------------------------------------------------
/client/src/components/Sidenav/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'ref_and_the_dom':
8 | return - {
65 | this.Sidenav = Sidenav;
66 | }}
67 | id="slide-out"
68 | className="sidenav sidenav-fixed sidenavOne"
69 | >
70 |
-
71 | 72 | 77 | Reactize 78 | 79 |80 |
81 | {this.sideNavLinks()}
82 |
10 | {
18 | this.Sidenav = Sidenav;
19 | }}
20 | className="sidenav">
21 |
`
22 | } />
23 |
24 | 35 | Sidenav React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |- {
80 | this.Sidenav = Sidenav;
81 | }}
82 | id="slide-out"
83 | className="sidenav"
84 | >
85 |
- 86 | 100 | 101 |
- 102 | 103 | cloudFirst Link With Icon 104 | 105 | 106 |
- 107 | Second Link 108 | 109 |
- 110 | 111 | 112 |
- 113 | Subheader 114 | 115 |
- 116 | 117 | Third Link With Waves 118 | 119 | 120 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Sidenav;
--------------------------------------------------------------------------------
/client/src/components/Sidenav/SidenavDemo.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SecondHeader from "../Headings/SecondHeader";
3 | import ThirdHeader from "../Headings/ThirdHeader";
4 | import Description from "../Headings/Description";
5 | import MarkupCode from '../code/MarkupCode';
6 | import Navigation from '../Buttons/Navigation';
7 | import './Sidenav.css';
8 |
9 | const SidenavDemo = ({ match }) => {
10 | return (
11 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
12 |
50 | );
51 | }
52 |
53 | export default SidenavDemo;
54 |
--------------------------------------------------------------------------------
/client/src/components/Slider/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'ref_and_the_dom':
8 | return
13 |
17 |
18 | Open Demo
19 |
20 | For more info related to Options and Methods please check Materialize 31 | 35 | {` Sidenav `} 36 | docs
37 |
10 | {
18 | this.Slider = Slider;
19 | }}
20 | className="slider">
21 |
`
22 | } />
23 |
24 | 35 | Slider React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |-
88 |
-
89 | 91 |96 |
This is our big Tagline!
92 |93 | Here's our small slogan. 94 |
95 |
97 | -
98 | 100 |105 |
Left Aligned Caption
101 |102 | Here's our small slogan. 103 |
104 |
106 | -
107 |
108 |
109 |114 |Right Aligned Caption
110 |111 | Here's our small slogan. 112 |
113 |
115 | -
116 |
117 |
118 |123 |This is our big Tagline!
119 |120 | Here's our small slogan. 121 |
122 |
124 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Slider;
--------------------------------------------------------------------------------
/client/src/components/Tabs/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'ref_and_the_dom':
8 | return
17 |
25 |
18 |
21 |
22 |
23 |
24 |
10 | {
18 | this.Tabs = Tabs;
19 | }}
20 | className="tabs">
21 |
`
22 | } />
23 |
24 | 35 | Tabs React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |- {
70 | this.Tabs = Tabs;
71 | }}
72 | id="tabs-swipe-demo"
73 | class="tabs"
74 | >
75 |
- 76 | Test 1 77 | 78 |
- 79 | Test 2 80 | 81 |
- 82 | Test 3 83 | 84 |
87 | Test 1
88 |
89 |
90 | Test 2
91 |
92 |
93 | Test 3
94 |
95 |
96 | );
97 | }
98 | }
99 |
100 | export default Tabs;
101 | `} />
102 |
103 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Tabs;
--------------------------------------------------------------------------------
/client/src/components/Tabs/TabsDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import './Tabs.css';
9 |
10 | class Tabs extends Component {
11 | componentDidMount() {
12 | M.Tabs.init(this.Tabs);
13 | }
14 |
15 | render() {
16 | return (
17 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
18 |
83 | );
84 | }
85 | }
86 |
87 |
88 | export default Tabs;
89 |
--------------------------------------------------------------------------------
/client/src/components/Text Input/ActionReducer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SecondHeader from '../Headings/SecondHeader';
3 | import ThirdHeader from '../Headings/ThirdHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import Description from '../Headings/Description';
6 | import Navigation from '../Buttons/Navigation';
7 |
8 | const ActionReducer = ({ prev }) => {
9 | return (
10 |
19 |
23 |
24 | - {
26 | this.Tabs = Tabs;
27 | }}
28 | id="tabs-swipe-demo"
29 | className="tabs"
30 | >
31 |
- 32 | Test 1 33 | 34 |
- 35 | Test 2 36 | 37 |
- 38 | Test 3 39 | 40 |
43 | Test 1
44 |
45 |
46 | Test 2
47 |
48 |
49 | Test 3
50 |
51 |
52 | For more info related to Options and Methods please check Materialize 63 | 67 | {` Tabs `} 68 | docs
69 |
11 | ({
20 | type: TEXT_CHANGED,
21 | text
22 | });
23 |
24 | export const textAreaChanged = textArea => ({
25 | type: TEXT_AREA_CHANGED,
26 | textArea
27 | });`} />
28 | {
46 | switch (action.type) {
47 | case TEXT_CHANGED:
48 | return { ...state, text: action.text };
49 | case TEXT_AREA_CHANGED:
50 | return { ...state, textArea: action.textArea };
51 | default:
52 | return { ...state };
53 | }
54 | };`} />
55 |
60 | );
61 | }
62 |
63 | export default ActionReducer;
--------------------------------------------------------------------------------
/client/src/components/Text Input/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 | import Store from './Store';
5 | import ActionReducer from './ActionReducer';
6 |
7 | const Content = ({ match }) => {
8 | switch (match.params.id) {
9 | case 'counter':
10 | return
10 | {
31 | this.props.textChanged(event.target.value);
32 | };
33 |
34 | onTextAreaChange = event => {
35 | this.props.textAreaChanged(event.target.value);
36 | };
37 |
38 | render() {
39 | return (
40 |
85 | )
86 | }
87 |
88 | export default RefAndDOM;
--------------------------------------------------------------------------------
/client/src/components/Text Input/Store.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SecondHeader from '../Headings/SecondHeader';
3 | import ThirdHeader from '../Headings/ThirdHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import Navigation from '../Buttons/Navigation';
6 |
7 | const Store = ({ next, prev }) => {
8 | return (
9 |
41 |
67 |
68 | );
69 | }
70 | }
71 |
72 | const mapStateToProps = state => ({
73 | text: state.red.text,
74 | textArea: state.red.textArea
75 | });
76 |
77 | export default connect(
78 | mapStateToProps,
79 | { textChanged, textAreaChanged }
80 | )(Counter);`} />
81 |
82 |
10 |
25 |
44 |
52 | )
53 | }
54 |
55 | export default Store;
--------------------------------------------------------------------------------
/client/src/components/Text Input/TextInput.css:
--------------------------------------------------------------------------------
1 | .iframeStyle{
2 | width: 75%;
3 | height: 500px;
4 | border: 0;
5 | border-radius: 4px;
6 | overflow: hidden;
7 | }
8 |
9 | .spacingLeft{
10 | padding-left: 3%;
11 | }
12 |
13 | @media (max-width: 992px){
14 | .iframeStyle{
15 | width: 100%;
16 | }
17 | .spacingLeft{
18 | padding-left: 0%;
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/client/src/components/Text Input/TextInput.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route } from 'react-router-dom';
3 | import Header from '../Headings/Header';
4 | import Aside from '../Aside';
5 | import Content from './Content';
6 | import TextInputDemo from './TextInputDemo';
7 | import './TextInput.css';
8 |
9 | const TextInput = ({ match }) => {
10 | return (
11 |
12 |
13 |
15 |
16 |
27 |
28 | );
29 | }
30 |
31 | export default TextInput;
--------------------------------------------------------------------------------
/client/src/components/Text Input/textInputAction.js:
--------------------------------------------------------------------------------
1 | const TEXT_CHANGED = 'text_changed';
2 | const TEXT_AREA_CHANGED = 'text_area_changed';
3 |
4 | export const textChanged = text => ({
5 | type: TEXT_CHANGED,
6 | text
7 | });
8 |
9 | export const textAreaChanged = textArea => ({
10 | type: TEXT_AREA_CHANGED,
11 | textArea
12 | });
13 |
--------------------------------------------------------------------------------
/client/src/components/Text Input/textInputReducer.js:
--------------------------------------------------------------------------------
1 | const TEXT_CHANGED = 'text_changed';
2 | const TEXT_AREA_CHANGED = 'text_area_changed';
3 |
4 | const initial_state = {
5 | text: "",
6 | textArea: ""
7 | };
8 |
9 | export default (state = initial_state, action) => {
10 | switch (action.type) {
11 | case TEXT_CHANGED:
12 | return { ...state, text: action.text };
13 | case TEXT_AREA_CHANGED:
14 | return { ...state, textArea: action.textArea };
15 | default:
16 | return { ...state };
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/client/src/components/Timepicker/ActionReducer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SecondHeader from '../Headings/SecondHeader';
3 | import ThirdHeader from '../Headings/ThirdHeader';
4 | import JsxCode from '../code/JsxCode';
5 | import Description from '../Headings/Description';
6 | import Navigation from '../Buttons/Navigation';
7 |
8 | const ActionReducer = ({ prev }) => {
9 | return (
10 |
17 |
26 |
18 |
21 |
22 |
24 |
25 |
11 | ({
19 | type: TIME_CHANGED,
20 | hour,
21 | minute
22 | });`} />
23 | {
40 | switch (action.type) {
41 | case TIME_CHANGED:
42 | return { ...state, hour: action.hour, minute: action.minute };
43 | default:
44 | return { ...state };
45 | }
46 | };`} />
47 |
52 | );
53 | }
54 |
55 | export default ActionReducer;
--------------------------------------------------------------------------------
/client/src/components/Timepicker/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 | import Store from './Store';
5 | import ActionReducer from './ActionReducer';
6 |
7 | const Content = ({ match }) => {
8 | switch (match.params.id) {
9 | case 'ref_and_the_dom':
10 | return
10 | {
18 | this.Timepicker = Timepicker;
19 | }}
20 | className="timepicker">
21 |
`
22 | } />
23 |
24 |
10 |
25 |
44 |
52 | )
53 | }
54 |
55 | export default Store;
--------------------------------------------------------------------------------
/client/src/components/Timepicker/Timepicker.css:
--------------------------------------------------------------------------------
1 | .iframeStyle{
2 | width: 75%;
3 | height: 500px;
4 | border: 0;
5 | border-radius: 4px;
6 | overflow: hidden;
7 | }
8 |
9 | .spacingLeft{
10 | padding-left: 3%;
11 | }
12 |
13 | @media (max-width: 992px){
14 | .iframeStyle{
15 | width: 100%;
16 | }
17 | .spacingLeft{
18 | padding-left: 0%;
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/client/src/components/Timepicker/Timepicker.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route } from 'react-router-dom';
3 | import Header from '../Headings/Header';
4 | import Aside from '../Aside';
5 | import Content from './Content';
6 | import TimepickerDemo from './TimepickerDemo';
7 | import './Timepicker.css';
8 |
9 | const Timepicker = ({ match }) => {
10 | return (
11 |
12 |
13 |
15 |
16 |
27 |
28 | );
29 | }
30 |
31 | export default Timepicker;
--------------------------------------------------------------------------------
/client/src/components/Timepicker/TimepickerDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import { timeChanged } from './timepickerAction';
9 | import { connect } from 'react-redux';
10 | import './Timepicker.css';
11 |
12 | class Timepicker extends Component {
13 | componentDidMount() {
14 | let context = this;
15 | const timePickerOptions = {
16 | duration: 350,
17 | defaultTime: "now",
18 | vibrate: true,
19 | twelveHour: false,
20 | onSelect(hour, minute) {
21 | context.props.timeChanged(hour, minute);
22 | }
23 | };
24 | M.Timepicker.init(this.Timepicker, timePickerOptions);
25 | }
26 |
27 | render() {
28 | return (
29 |
17 |
26 |
18 |
21 |
22 |
24 |
25 |
30 |
78 | );
79 | }
80 | }
81 |
82 | const mapStateToProps = state => ({
83 | hour: state.time.hour,
84 | minute: state.time.minute
85 | });
86 |
87 | export default connect(mapStateToProps, { timeChanged })(Timepicker);
88 |
--------------------------------------------------------------------------------
/client/src/components/Timepicker/timepickerAction.js:
--------------------------------------------------------------------------------
1 | const TIME_CHANGED = 'time_changed';
2 |
3 | export const timeChanged = (hour, minute) => ({
4 | type: TIME_CHANGED,
5 | hour,
6 | minute
7 | });
8 |
--------------------------------------------------------------------------------
/client/src/components/Timepicker/timepickerReducer.js:
--------------------------------------------------------------------------------
1 | const TIME_CHANGED = 'time_changed';
2 |
3 | const initial_state = {
4 | hour: "",
5 | minute: ""
6 | };
7 |
8 | export default (state = initial_state, action) => {
9 | switch (action.type) {
10 | case TIME_CHANGED:
11 | return { ...state, hour: action.hour, minute: action.minute };
12 | default:
13 | return { ...state };
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/client/src/components/Toasts/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'programatically':
8 | return
31 |
34 |
35 |
36 |
47 |
48 |
37 |
38 | {
40 | this.Timepicker = Timepicker;
41 | }}
42 | type="text"
43 | className="timepicker"
44 | />
45 |
46 | For more info related to Options and Methods please check Materialize 59 | 63 | {` Timepicker `} 64 | docs
65 |
10 | {
17 | this.Materialbox = Materialbox;
18 | }}
19 | className="materialboxed">
20 |
`
21 | } />
22 |
23 | 34 | Toasts React Demo 35 |
36 |37 | Learn how to use Materialize CSS framework in ReactJS 38 |
39 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Toasts;
--------------------------------------------------------------------------------
/client/src/components/Toasts/ToastsDemo.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import M from "materialize-css";
3 | import SecondHeader from "../Headings/SecondHeader";
4 | import ThirdHeader from "../Headings/ThirdHeader";
5 | import Description from "../Headings/Description";
6 | import MarkupCode from '../code/MarkupCode';
7 | import Navigation from '../Buttons/Navigation';
8 | import './Toasts.css';
9 |
10 | class ToastsDemo extends Component {
11 | test() {
12 | const options = {
13 | html: "I am a toast!",
14 | inDuration: 300,
15 | outDuration: 375,
16 | displyLength: 4000,
17 | classes: "rounded",
18 | completeCallback: () => {
19 | console.log("dismissed");
20 | }
21 | };
22 | M.toast(options);
23 | }
24 |
25 | dismissThem() {
26 | M.Toast.dismissAll();
27 | }
28 |
29 | render() {
30 | return (
31 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
32 |
83 | );
84 | }
85 | }
86 |
87 |
88 | export default ToastsDemo;
89 |
--------------------------------------------------------------------------------
/client/src/components/Tooltips/Content.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withRouter } from 'react-router-dom';
3 | import RefAndDOM from './RefAndDOM';
4 |
5 | const Content = ({ match }) => {
6 | switch (match.params.id) {
7 | case 'ref_and_the_dom':
8 | return
33 |
37 |
38 |
39 |
52 |
53 |
40 |
51 |
41 |
44 |
45 |
46 |
49 |
50 | For more info related to Options and Methods please check Materialize 64 | 68 | {` Toasts `} 69 | docs
70 |
10 | {
18 | this.Tooltip = Tooltip;
19 | }}
20 | className="tooltipped">
21 |
`
22 | } />
23 |
24 | 35 | Tooltips React Demo 36 |
37 |38 | Learn how to use Materialize CSS framework in ReactJS 39 |
40 |
82 |
133 |
134 | );
135 | }
136 | }
137 |
138 | export default Tooltips;
139 | `} />
140 |
141 |
83 |
95 |
107 |
119 |
131 |
132 |
12 |
13 |
15 |
16 |
26 |
27 | );
28 | }
29 |
30 | export default Tooltips;
--------------------------------------------------------------------------------
/client/src/components/code/BashCode.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
3 | import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
4 |
5 | const BashCode = ({ bashCode }) => {
6 | return (
7 |
17 |
25 |
18 |
21 |
22 |
23 |
24 |
8 |
12 | );
13 |
14 | };
15 |
16 | export default BashCode;
--------------------------------------------------------------------------------
/client/src/components/code/JsxCode.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
3 | import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
4 |
5 | const JsxCode = ({ jsxCode }) => {
6 |
7 | return (
8 |
9 | {bashCode}
10 |
11 |
9 |
13 | );
14 | };
15 |
16 | export default JsxCode;
--------------------------------------------------------------------------------
/client/src/components/code/MarkupCode.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
3 | import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
4 |
5 | const MarkupCode = ({ markupCode }) => {
6 |
7 | return (
8 |
10 | {jsxCode}
11 |
12 |
9 |
13 | );
14 | };
15 |
16 | export default MarkupCode;
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { hydrate, render } from 'react-dom';
3 | import App from '../src/components/App.jsx';
4 | import { Provider } from 'react-redux';
5 | import { createStore, applyMiddleware } from 'redux';
6 | import logger from 'redux-logger';
7 | import reducer from '../src/reducers';
8 | import registerServiceWorker from './registerServiceWorker';
9 |
10 | const store = createStore(reducer, {}, applyMiddleware(logger));
11 |
12 | const rootElement = document.getElementById('root');
13 |
14 | if (rootElement.hasChildNodes()) {
15 | hydrate(
16 |
10 | {markupCode}
11 |
12 |