Skip to content

Commit ed31d3c

Browse files
author
Dustyn Blackmore
committed
Updated Examples
Now includes a boostrapped version (casual css) Updated basic, and bootstrap, examples to include button and radio. Removed some naughty debugging text from validation/app.js in validation testing.
1 parent db148ff commit ed31d3c

12 files changed

Lines changed: 232 additions & 10 deletions

File tree

‎examples/basic/app.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import React, { Component } from 'react';
22
import ReactDOM from 'react-dom';
33
import Input from 'react-component_input';
4+
import Button from './button';
5+
import Radio from './radio';
46
import TextExample from './text';
57
import Textarea from './textarea';
6-
// import Forms from './forms';
7-
// import ReactRouter from './react-router';
8-
// import NestedInputs from './nested_inputs';
98

109
const appElement = document.getElementById('example');
1110

1211
const examples = [
12+
Button,
13+
Radio,
1314
TextExample,
1415
Textarea
15-
// MultipleInputs,
16-
// NestedInputs,
17-
// ReactRouter
1816
];
1917

2018
class App extends Component {

‎examples/basic/button/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
class Button extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Input
9+
identifier="buttonInput"
10+
labelContent="Button Input"
11+
type="button"
12+
value="button"
13+
/>
14+
</div>
15+
);
16+
}
17+
}
18+
19+
export default {
20+
label: "Input - Button",
21+
app: Button
22+
};

‎examples/basic/radio/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
class Radio extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Input
9+
identifier="radioInput"
10+
labelContent="Radio Input"
11+
type="radio"
12+
/>
13+
</div>
14+
);
15+
}
16+
}
17+
18+
export default {
19+
label: "Input - Radio",
20+
app: Radio
21+
};

‎examples/bootstrapped/app.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.ReactInput__Overlay {
2+
-webkit-perspective: 600;
3+
perspective: 600;
4+
opacity: 0;
5+
}
6+
7+
.ReactInput__Overlay--after-open {
8+
opacity: 1;
9+
transition: opacity 150ms ease-out;
10+
}
11+
12+
.ReactInput__Content {
13+
-webkit-transform: scale(0.5) rotateX(-30deg);
14+
transform: scale(0.5) rotateX(-30deg);
15+
}
16+
17+
.ReactInput__Content--after-open {
18+
-webkit-transform: scale(1) rotateX(0deg);
19+
transform: scale(1) rotateX(0deg);
20+
transition: all 150ms ease-in;
21+
}
22+
23+
.ReactInput__Overlay--before-close {
24+
opacity: 0;
25+
}
26+
27+
.ReactInput__Content--before-close {
28+
-webkit-transform: scale(0.5) rotateX(30deg);
29+
transform: scale(0.5) rotateX(30deg);
30+
transition: all 150ms ease-in;
31+
}

‎examples/bootstrapped/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import Input from 'react-component_input';
4+
import Button from './button';
5+
import Radio from './radio';
6+
import TextExample from './text';
7+
import Textarea from './textarea';
8+
9+
const appElement = document.getElementById('example');
10+
11+
const examples = [
12+
Button,
13+
Radio,
14+
TextExample,
15+
Textarea
16+
];
17+
18+
class App extends Component {
19+
render() {
20+
return (
21+
<div class="form-group">
22+
{examples.map((example, key) => {
23+
const ExampleApp = example.app;
24+
return (
25+
<div key={key + 1} className="example">
26+
<h3>{`#${key + 1}. ${example.label}`}</h3>
27+
<ExampleApp />
28+
</div>
29+
);
30+
})}
31+
</div>
32+
);
33+
}
34+
}
35+
36+
ReactDOM.render(<App />, appElement);

‎examples/bootstrapped/button/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
class Button extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Input
9+
containerClassNames="form-group"
10+
identifier="buttonInput"
11+
inputClassNames={["btn", "btn-primary", "form-control"]}
12+
labelContent="Button Input"
13+
type="button"
14+
value="button"
15+
/>
16+
</div>
17+
);
18+
}
19+
}
20+
21+
export default {
22+
label: "Input - Button",
23+
app: Button
24+
};

‎examples/bootstrapped/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html public "embarassment">
2+
<html>
3+
<head>
4+
<title>Basic Example</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6+
<link rel="stylesheet" href="/base.css"/>
7+
<link rel="stylesheet" href="app.css"/>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" type="text/css" crossorigin="anonymous" />
9+
</head>
10+
<body>
11+
<header class="branding padbox">
12+
<h1>react-component_input</h1>
13+
<h2>An input component to serve the common good</h2>
14+
</header>
15+
<div id="example" class="padbox"></div>
16+
<a target="_top" href="https://github.com/dmblack/react-component_input.js">react-component_input</a>
17+
<script src="../__build__/shared.js"></script>
18+
<script src="../__build__/bootstrapped.js"></script>
19+
</body>
20+
</html>

‎examples/bootstrapped/radio/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
class Radio extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Input
9+
containerClassNames="form-group"
10+
identifier="radioInput"
11+
labelContent="Radio Input"
12+
type="radio"
13+
inputClassNames="form-control"
14+
/>
15+
</div>
16+
);
17+
}
18+
}
19+
20+
export default {
21+
label: "Input - Radio",
22+
app: Radio
23+
};

‎examples/bootstrapped/text/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
class TextExample extends Component {
5+
render() {
6+
return (
7+
<div>
8+
<Input
9+
containerClassNames="form-group"
10+
identifier="textInput"
11+
labelContent="Text Input"
12+
type="text"
13+
inputClassNames="form-control"
14+
/>
15+
</div>
16+
);
17+
}
18+
}
19+
20+
export default {
21+
label: "Input - Text",
22+
app: TextExample
23+
};

‎examples/bootstrapped/textarea/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
class Textarea extends Component {
5+
6+
render() {
7+
return (
8+
<div>
9+
<Input
10+
containerClassNames="form-group"
11+
type="textarea"
12+
identifier="textarea"
13+
labelContent="Text Area"
14+
inputClassNames="form-control"
15+
/>
16+
</div>
17+
);
18+
}
19+
}
20+
21+
export default {
22+
label: "Input - Textarea",
23+
app: Textarea
24+
};

0 commit comments

Comments
 (0)