Skip to content

Commit

Permalink
Merge pull request #25 from flickerleap/feature-add-select-input
Browse files Browse the repository at this point in the history
Input and Field Updates
  • Loading branch information
mtdalton authored May 10, 2018
2 parents 93ab309 + 085402c commit 8c0cef5
Show file tree
Hide file tree
Showing 20 changed files with 5,567 additions and 5,043 deletions.
2 changes: 1 addition & 1 deletion dist/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/bundle.js.map

Large diffs are not rendered by default.

9,896 changes: 5,067 additions & 4,829 deletions dist/styles.css

Large diffs are not rendered by default.

340 changes: 191 additions & 149 deletions package-lock.json

Large diffs are not rendered by default.

29 changes: 15 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-admin-template",
"version": "1.1.14",
"version": "1.1.15",
"description": "",
"main": "dist/bundle.js",
"style": "dist/styles.css",
Expand All @@ -22,25 +22,26 @@
"author": "Flicker Leap",
"license": "MIT",
"dependencies": {
"@fortawesome/fontawesome": "^1.1.5",
"@fortawesome/fontawesome": "^1.1.7",
"@fortawesome/fontawesome-free-brands": "^5.0.9",
"@fortawesome/fontawesome-free-solid": "^5.0.9",
"bootstrap": "^4.0.0",
"bootstrap": "^4.1.1",
"classnames": "^2.2.5",
"clean-webpack-plugin": "^0.1.19",
"file-loader": "^1.1.11",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^3.2.0",
"moment": "^2.22.0",
"moment": "^2.22.1",
"normalize.css": "^7.0.0",
"query-string": "^6.0.0",
"react": "^16.3.1",
"query-string": "^6.1.0",
"react": "^16.3.2",
"react-datepicker": "^1.4.1",
"react-dom": "^16.3.1",
"react-modal": "^3.3.2",
"react-dom": "^16.3.2",
"react-modal": "^3.4.4",
"react-popup": "^0.9.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-select": "^1.2.1",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-auth-wrapper": "^2.0.2",
Expand All @@ -54,7 +55,7 @@
},
"devDependencies": {
"babel-cli": "6.24.1",
"babel-core": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
Expand All @@ -67,17 +68,17 @@
"enzyme-adapter-react-16": "^1.1.1",
"install": "^0.10.4",
"jest": "^22.4.3",
"node-sass": "^4.8.3",
"node-sass": "^4.9.0",
"npm": "^5.8.0",
"postcss-modules": "^1.1.0",
"rollup": "^0.57.1",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-babel": "^3.0.4",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-postcss": "^1.5.1",
"rollup-plugin-postcss": "^1.6.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"tailwindcss": "^0.5.2",
"tailwindcss": "^0.5.3",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2",
"webpack-merge": "^4.1.2",
Expand Down
5 changes: 3 additions & 2 deletions src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ export {ActionColumn, DataTable, Pagination, AddButton} from "./components/data/
export {Card, List, ListItem, Modal, InfoCard} from "./components/display/display";

/** FORM */
export {Field, DynamicForm, Input, DropDown} from './components/form/form';
export {Field, DynamicForm} from './components/form/form';
export {Input, DropDown, Date, DateTime, CheckboxList, Time, TextArea} from './components/form/inputs/inputs';

/** LAYOUT */
export {Header, Sidebar, HeaderDropdown} from "./components/layout/layout";
Expand All @@ -28,7 +29,7 @@ export {getUserFromStore} from './helpers/auth';
export {userNeedsAuthentication, userDoesNotNeedAuthentication} from './helpers/authGuard';
export {createFSAConverter} from './helpers/createFSAConverter';
export {get, set} from './helpers/storage';
export {contains} from './helpers/string';
export {contains, capitalizeFirstLetter} from './helpers/string';
export {now, timestamp} from './helpers/time';
export {hasErrors, getErrors} from './helpers/validate';
export {getSelectors, updateParams} from './helpers/selectors';
Expand Down
4 changes: 3 additions & 1 deletion src/components/form/DynamicForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,11 +165,13 @@ export class DynamicForm extends React.Component {
<div className="row">
{
this.state.fields.map((field, index) => {
field.onChange = field.onChange === undefined
? this.onFieldChange : field.onChange;
return field.show &&
(
<div key={index} className={columnClass}>
<div className="form-group">
<Field {...field} onChange={this.onFieldChange}/>
<Field {...field}/>
</div>
</div>
);
Expand Down
24 changes: 13 additions & 11 deletions src/components/form/Field.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
import React from "react";
import {Input} from './inputs/Input';
import {DropDown} from "./inputs/DropDown";
import {Date} from "./inputs/Date";
import {TextArea} from "./inputs/TextArea";
import {Time} from "./inputs/Time";
import {CheckboxList, Date, DateTime, DropDown, Input, TextArea, Time} from './inputs/inputs';
import {ErrorBlock} from "../utility/ErrorBlock";
import {DateTime} from "./inputs/DateTime";

export class Field extends React.Component {
constructor(props) {
super(props);
}

render() {
getElement() {
const {
custom = (props) => {
}
}, type
} = this.props;
let element = undefined;
switch (this.props.type) {
switch (type) {
case 'dropdown':
element = <DropDown {...this.props} />;
break;
case 'checkboxlist':
element = <CheckboxList {...this.props} />;
break;
case 'date':
element = <Date {...this.props} />;
break;
Expand All @@ -42,10 +40,14 @@ export class Field extends React.Component {
break;
}

return element;
}

render() {
return (
<div>
{element}
{this.props.error && <ErrorBlock error={this.props.error} classes={"error"} />}
{this.getElement()}
{this.props.error && <ErrorBlock error={this.props.error}/>}
</div>
);
}
Expand Down
5 changes: 1 addition & 4 deletions src/components/form/form.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
export {Field} from './Field';
export {DynamicForm} from './DynamicForm';

export {Input} from './inputs/Input';
export {DropDown} from './inputs/DropDown';
export {DynamicForm} from './DynamicForm';
73 changes: 73 additions & 0 deletions src/components/form/inputs/CheckboxList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react';

export class CheckboxList extends React.Component {
constructor(props) {
super(props);

this.state = {
values: props.value || []
};
}

componentDidMount() {
this.props.onChange(this.getEventObject(this.state.values));
}

getEventObject = (value) => {
return {
target: {
name: this.props.name,
value: value
}
};
};

onChange = (event) => {
const index = parseInt(event.target.id.replace(this.props.name, ''));
const value = event.target.value;

const values = this.state.values;

if(values.indexOf(value) > -1) {
delete values[index];
} else {
values.splice(index, 0, value);
}

this.props.onChange(this.getEventObject(values));

this.setState(() => ({
values
}));
};

isSelected = (index) => {
return this.state.values[index] !== undefined;
};

render() {
const {
name, label, className = "form-control col-md-4", items = []
} = this.props;

return (
<div>
<label htmlFor={name}>{label}</label>
<div className="row">
{
items.map((item, index) => (
<div key={index} className={className}>
<input
onChange={this.onChange}
id={name+index} name={name}
type="checkbox" value={item.value}
checked={this.isSelected(index)} />
<span> {item.label}</span>
</div>
))
}
</div>
</div>
);
}
}
2 changes: 1 addition & 1 deletion src/components/form/inputs/DropDown.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export class DropDown extends React.Component {

render() {
const {
name, label, onChange, className="form-control", items = [], nameField='name'
name, label, className="form-control", items = [], nameField='name'
} = this.props;

return (
Expand Down
34 changes: 22 additions & 12 deletions src/components/form/inputs/TextArea.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
import React from 'react';

export const TextArea = ({name, label, value, onChange, className="form-control"}) => (
<div>
<label htmlFor={name}>{label}</label>
<textarea
name={name}
className={className}
value={value}
onChange={onChange}
>
</textarea>
</div>
);
export class TextArea extends React.Component {
constructor(props) {
super(props);
}

render() {
const {name, label, value, onChange, className = "form-control"} = this.props;

return (
<div>
<label htmlFor={name}>{label}</label>
<textarea
name={name}
className={className}
value={value}
onChange={onChange}
>
</textarea>
</div>
);
}
}
7 changes: 7 additions & 0 deletions src/components/form/inputs/inputs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export {Input} from './Input';
export {DropDown} from "./DropDown";
export {Date} from "./Date";
export {TextArea} from "./TextArea";
export {Time} from "./Time";
export {DateTime} from "./DateTime";
export {CheckboxList} from "./CheckboxList";
33 changes: 25 additions & 8 deletions src/components/utility/ErrorBlock.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
import React from 'react';
import {Alert} from "reactstrap";

/**
*
* @param errors
* @returns {*}
* @constructor
*/
export const ErrorBlock = ({error, classes = 'alert alert-danger error'}) => (
<div className={classes} role="alert">
{error}
</div>
);
export class ErrorBlock extends React.Component {
constructor(props) {
super(props);

this.state = {
open: true
};
}

onDismiss = () => {
this.setState(() => ({
open: false
}));
};

render() {
const {error} = this.props;
return (
<Alert color="info" isOpen={this.state.open} toggle={this.onDismiss}>
{error}
</Alert>
);
}
}
4 changes: 4 additions & 0 deletions src/helpers/string.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@

export const contains = (haystack, needle) => {
return haystack.indexOf(needle) > -1;
};

export const capitalizeFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
};
Loading

0 comments on commit 8c0cef5

Please sign in to comment.