Skip to content

Commit d696afa

Browse files
author
Dustyn Blackmore
committed
Refactor CSS Class Selectors and Examples
Template strings were becoming rather nested, and woeful to maintain. Not that this new solution is any more so pretty. Updated Input.js Now has hasFocus default false. Implemented CSS Selector Changes selectorClassNames starts as an empty string and is constructed. Updated validation to only appear if there's actually a validation property. Updated tests for new CSS Selectors Updated examples/* Now properly return the page they are designed to show.
1 parent ca7c931 commit d696afa

17 files changed

Lines changed: 880 additions & 532 deletions

File tree

‎examples/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ <h2>An input component to serve the common good</h2>
1212
</header>
1313
<div id="example" class="padbox">
1414
<a class="btn btn-primary" href="/basic/">basic</a>
15+
<a class="btn btn-primary" href="/validation/">validation</a>
16+
<a class="btn btn-primary" href="/validationcss/">validation (With recommended min css)</a>
1517
</div>
1618
<a target="_top" href="https://github.com/dmblack/react-component_input.js">react-component_input</a>
1719
</body>

‎examples/validation/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/validation/app.js‎

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

‎examples/validation/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
</head>
9+
<body>
10+
<header class="branding padbox">
11+
<h1>react-component_input</h1>
12+
<h2>An input component to serve the common good</h2>
13+
</header>
14+
<div id="example" class="padbox"></div>
15+
<a target="_top" href="https://github.com/dmblack/react-component_input.js">react-component_input</a>
16+
<script src="../__build__/shared.js"></script>
17+
<script src="../__build__/validation.js"></script>
18+
</body>
19+
</html>

‎examples/validation/text/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
let validMaxLength = (length = 0) => ({
5+
errorMessage:
6+
'The length of your input must be less than ' + parseInt(length),
7+
callback: value => value.length <= parseInt(length)
8+
});
9+
10+
let validMinLength = (length = 0) => ({
11+
errorMessage:
12+
'The length of your input must be more than ' + parseInt(length),
13+
callback: value => value.length >= parseInt(length)
14+
});
15+
16+
class TextExample extends Component {
17+
render() {
18+
return (
19+
<div>
20+
<Input
21+
identifier="textInput"
22+
labelContent="Text Input"
23+
type="text"
24+
validation={[validMaxLength(10), validMinLength(1)]}
25+
/>
26+
</div>
27+
);
28+
}
29+
}
30+
31+
export default {
32+
label: "Input - Text",
33+
app: TextExample
34+
};

‎examples/validation/textarea/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
let validMaxLength = (length = 0) => ({
5+
errorMessage:
6+
'The length of your input must be less than ' + parseInt(length),
7+
callback: value => value.length <= parseInt(length)
8+
});
9+
10+
let validMinLength = (length = 0) => ({
11+
errorMessage:
12+
'The length of your input must be more than ' + parseInt(length),
13+
callback: value => value.length >= parseInt(length)
14+
});
15+
16+
class TextExample extends Component {
17+
render() {
18+
return (
19+
<div>
20+
<Input
21+
identifier="textInput"
22+
labelContent="Text Input"
23+
type="textarea"
24+
validation={[validMaxLength(10), validMinLength(1)]}
25+
/>
26+
</div>
27+
);
28+
}
29+
}
30+
31+
export default {
32+
label: "Input - Text",
33+
app: TextExample
34+
};

‎examples/validationcss/app.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* Ensures validation messages are not rendered if that input has not yet been modified */
2+
.validation-untouched {
3+
display: none;
4+
}
5+
6+
/* Ensures validation messages are not rendered if the input is actually valid */
7+
.validation-valid {
8+
display: none;
9+
}
10+
11+
/* Hides validation messages whilst the Input has cursor focus */
12+
.container-focus .validation-invalid {
13+
display: none;
14+
}

‎examples/validationcss/app.js‎

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

‎examples/validationcss/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
</head>
9+
<body>
10+
<header class="branding padbox">
11+
<h1>react-component_input</h1>
12+
<h2>An input component to serve the common good</h2>
13+
</header>
14+
<div id="example" class="padbox"></div>
15+
<a target="_top" href="https://github.com/dmblack/react-component_input.js">react-component_input</a>
16+
<script src="../__build__/shared.js"></script>
17+
<script src="../__build__/validationcss.js"></script>
18+
</body>
19+
</html>

‎examples/validationcss/text/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { Component } from 'react';
2+
import Input from 'react-component_input';
3+
4+
let validMaxLength = (length = 0) => ({
5+
errorMessage:
6+
'The length of your input must be less than ' + parseInt(length),
7+
callback: value => value.length <= parseInt(length)
8+
});
9+
10+
let validMinLength = (length = 0) => ({
11+
errorMessage:
12+
'The length of your input must be more than ' + parseInt(length),
13+
callback: value => value.length >= parseInt(length)
14+
});
15+
16+
class TextExample extends Component {
17+
render() {
18+
return (
19+
<div>
20+
<Input
21+
identifier="textInput"
22+
labelContent="Text Input"
23+
type="text"
24+
validation={[validMaxLength(10), validMinLength(1)]}
25+
/>
26+
</div>
27+
);
28+
}
29+
}
30+
31+
export default {
32+
label: "Input - Text",
33+
app: TextExample
34+
};

0 commit comments

Comments
 (0)