Skip to content

P
paragon
Commit b9b49d3c by Ari Rizzitano
Options

deployable docs!!! + lintfixes

parent f171a162
Showing with 109 additions and 49 deletions
package.json
......@@ -8,6 +8,7 @@
"scripts": {
"build": "NODE_ENV=production webpack",
"build-storybook": "build-storybook",
"deploy-storybook": "storybook-to-ghpages",
"lint": "eslint .",
"prestart": "install-self-peers",
"poststop": "yarn install",
......@@ -20,6 +21,7 @@
},
"devDependencies": {
"@kadira/storybook": "^2.21.0",
"@kadira/storybook-deployer": "^1.2.0",
"@team-griffin/install-self-peers": "^1.0.0",
"babel-cli": "^6.24.1",
"babel-loader": "^7.0.0",
......
src/SelectInput.js
......@@ -2,14 +2,15 @@ import React from 'react';
import { Input } from 'reactstrap';
import PropTypes from 'prop-types';
import asInput from './utils/asInput';
import asInput, { inputProps } from './utils/asInput';
class Select extends React.Component {
getOption(option, i) {
static getOption(option, i) {
let { label, value } = option;
if (typeof option === 'string') {
label = value = option;
label = option;
value = option;
}
return (
......@@ -21,29 +22,29 @@ class Select extends React.Component {
return this.props.options.map((option, i) => {
let section;
if (option.options) {
const groupOpts = option.options.map((opt, j) => this.getOption(opt, j));
const groupOpts = option.options.map((opt, j) => Select.getOption(opt, j));
section = (
<optgroup label={option.label} key={`group-${i}`}>
<optgroup label={option.label} key={option.label}>
{groupOpts}
</optgroup>
);
} else {
section = this.getOption(option, i);
section = Select.getOption(option, i);
}
return section;
});
}
render() {
const props = { ...this.props },
options = this.getOptions();
const props = { ...this.props };
const options = this.getOptions();
return (
<Input
id={this.props.id}
id={props.id}
type="select"
name={this.props.name}
value={this.props.value}
name={props.name}
value={props.value}
aria-describedby={props.describedBy}
onChange={props.onChange}
onBlur={props.onBlur}
......@@ -54,11 +55,19 @@ class Select extends React.Component {
}
}
Select.propTypes = {
...inputProps,
options: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.string),
PropTypes.arrayOf(PropTypes.object),
]).isRequired,
};
const SelectInput = asInput(Select);
SelectInput.propTypes = {
...SelectInput.propTypes,
options: PropTypes.array.isRequired
...Select.propTypes,
};
export default SelectInput;
src/TabInterface.js
import React, { Component } from 'react';
import React from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { newId } from './utils';
import { newId } from './utils/newId';
class TabInterface extends React.Component {
constructor(props) {
......@@ -35,13 +35,14 @@ class TabInterface extends React.Component {
buildLabels() {
return this.props.tabLabels.map((label, i) => {
const selected = this.state.activeTab === i;
const labelId = this.genLabelId(i);
return (
<NavItem
aria-selected={selected}
aria-controls={this.genPanelId(i)}
id={this.genLabelId(i)}
key={i}
id={labelId}
key={labelId}
role="tab"
tabIndex={selected ? 0 : -1}
>
......@@ -59,13 +60,14 @@ class TabInterface extends React.Component {
buildPanels() {
return this.props.panels.map((panel, i) => {
const selected = this.state.activeTab === i;
const panelId = this.genPanelId(i);
return (
<TabPane
aria-hidden={!selected}
aria-labelledby={this.genLabelId(i)}
id={this.genPanelId(i)}
key={i}
id={panelId}
key={panelId}
role="tabpanel"
tabId={i}
>
......@@ -76,11 +78,11 @@ class TabInterface extends React.Component {
}
render() {
const labels = this.buildLabels(),
panels = this.buildPanels();
const labels = this.buildLabels();
const panels = this.buildPanels();
return (
<div className={this.props.className}>
<div>
<Nav tabs role="tablist">
{labels}
</Nav>
......
src/TextInput.js
import React from 'react';
import { Input } from 'reactstrap';
import asInput from './utils/asInput';
import asInput, { inputProps } from './utils/asInput';
function TextField(props) {
return (
......@@ -15,12 +15,15 @@ function TextField(props) {
onChange={props.onChange}
onBlur={props.onBlur}
aria-invalid={!props.isValid}
disabled={props.disabled}
required={props.required}
state={props.inputState}
/>
);
}
TextField.propTypes = inputProps;
const TextInput = asInput(TextField);
export default TextInput;
src/utils/asInput.js
......@@ -6,6 +6,20 @@ import newId from './newId';
const getDisplayName = WrappedComponent => WrappedComponent.displayName || WrappedComponent.name || 'Component';
export const inputProps = {
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string,
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]),
disabled: PropTypes.bool,
required: PropTypes.bool,
onChange: PropTypes.func,
validator: PropTypes.func,
};
const asInput = (WrappedComponent) => {
class NewComponent extends React.Component {
constructor(props) {
......@@ -24,22 +38,10 @@ const asInput = (WrappedComponent) => {
};
}
handleChange(event) {
this.setState({ value: event.target.value });
this.props.onChange(event.target.value, this.props.name);
}
handleBlur(event) {
if (this.props.validator) {
this.setState(this.props.validator);
}
}
getDescriptions() {
// possible future work: multiple feedback msgs?
const errorId = `error-${this.state.id}`,
descriptionId = `description-${this.state.id}`;
const errorId = `error-${this.state.id}`;
const descriptionId = `description-${this.state.id}`;
const desc = {};
if (!this.state.isValid) {
......@@ -63,6 +65,18 @@ const asInput = (WrappedComponent) => {
return desc;
}
handleBlur(event) {
if (this.props.validator) {
this.setState(this.props.validator);
}
this.props.onBlur(event.target.value, this.props.name);
}
handleChange(event) {
this.setState({ value: event.target.value });
this.props.onChange(event.target.value, this.props.name);
}
render() {
const { description, error, describedBy } = this.getDescriptions();
......@@ -85,22 +99,15 @@ const asInput = (WrappedComponent) => {
NewComponent.displayName = `asInput(${getDisplayName(WrappedComponent)})`;
NewComponent.propTypes = {
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string,
description: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
]),
disabled: PropTypes.bool,
required: PropTypes.bool,
onChange: PropTypes.func,
};
NewComponent.propTypes = inputProps;
NewComponent.defaultProps = {
onChange: () => {},
value: '',
description: undefined,
disabled: false,
required: false,
validator: () => {},
};
return NewComponent;
......
yarn.lock
......@@ -33,6 +33,13 @@
version "1.1.0"
resolved "https://registry.yarnpkg.com/@kadira/storybook-channel/-/storybook-channel-1.1.0.tgz#806d1cdf2498d11cce09871a6fd27bbb41ed3564"
"@kadira/storybook-deployer@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@kadira/storybook-deployer/-/storybook-deployer-1.2.0.tgz#1708f5cb37fa08ab4173b1bd99df6f4717dfae12"
dependencies:
git-url-parse "^6.0.2"
shelljs "^0.7.0"
"@kadira/storybook-ui@^3.10.1":
version "3.11.0"
resolved "https://registry.yarnpkg.com/@kadira/storybook-ui/-/storybook-ui-3.11.0.tgz#a5ccdcc479aa5e08465c58e7df493e37e4b2a14a"
......@@ -2768,6 +2775,19 @@ getpass@^0.1.1:
dependencies:
assert-plus "^1.0.0"
git-up@^2.0.0:
version "2.0.8"
resolved "https://registry.yarnpkg.com/git-up/-/git-up-2.0.8.tgz#24be049c9f0b193481d2df4e016a16530a5f4ef4"
dependencies:
is-ssh "^1.3.0"
parse-url "^1.3.0"
git-url-parse@^6.0.2:
version "6.2.2"
resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-6.2.2.tgz#be49024e14b8487553436b4572b8b439532fa871"
dependencies:
git-up "^2.0.0"
glob-base@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
......@@ -3223,6 +3243,12 @@ is-resolvable@^1.0.0:
dependencies:
tryit "^1.0.1"
is-ssh@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.0.tgz#ebea1169a2614da392a63740366c3ce049d8dff6"
dependencies:
protocols "^1.1.0"
is-stream@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
......@@ -4008,6 +4034,13 @@ parse-json@^2.2.0:
dependencies:
error-ex "^1.2.0"
parse-url@^1.3.0:
version "1.3.7"
resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-1.3.7.tgz#636cb6e32b88255c704e30ab4349676703267af8"
dependencies:
is-ssh "^1.3.0"
protocols "^1.4.0"
parseurl@~1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
......@@ -4421,6 +4454,10 @@ prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
dependencies:
fbjs "^0.8.9"
protocols@^1.1.0, protocols@^1.4.0:
version "1.4.5"
resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.5.tgz#21de1f441c4ef7094408ed9f1c94f7a114b87557"
proxy-addr@~1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
......@@ -5001,7 +5038,7 @@ shallowequal@0.2.x, shallowequal@^0.2.2:
dependencies:
lodash.keys "^3.1.2"
shelljs@^0.7.4, shelljs@^0.7.5:
shelljs@^0.7.0, shelljs@^0.7.4, shelljs@^0.7.5:
version "0.7.7"
resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1"
dependencies:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment