diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000000..887e04243d --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,25 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000000..79ee123c2b --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000000..c6cc8c8196 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000000..24eb271ab3 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000000..b5a69e057e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/payload.iml b/.idea/payload.iml new file mode 100644 index 0000000000..24643cc374 --- /dev/null +++ b/.idea/payload.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000000..94a25f7f4c --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/components.js b/components.js index d6ccdf3f19..f7eedd2906 100644 --- a/components.js +++ b/components.js @@ -18,6 +18,8 @@ import EditView from './src/client/components/views/collections/Edit'; import StickOnScroll from './src/client/components/layout/StickOnScroll'; import APIUrl from './src/client/components/modules/APIUrl'; import Form from './src/client/components/forms/Form'; +import { FormConsumer } from './src/client/components/forms/Form'; +import FormSubmit from './src/client/components/forms/Submit'; import PayloadIcon from './src/client/components/graphics/PayloadIcon'; import PayloadLogo from './src/client/components/graphics/PayloadLogo'; import Tooltip from './src/client/components/modules/Tooltip'; @@ -49,6 +51,8 @@ export { StickOnScroll, APIUrl, Form, + FormConsumer, + FormSubmit, PayloadIcon, PayloadLogo, Tooltip, diff --git a/demo/client/components/collections/Orders/Add/index.js b/demo/client/components/collections/Orders/Add/index.js index 56ca9b909e..3e38babb50 100644 --- a/demo/client/components/collections/Orders/Add/index.js +++ b/demo/client/components/collections/Orders/Add/index.js @@ -1,7 +1,15 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; - -import { AddView } from 'payload/components'; +import { + AddView, + StickOnScroll, + APIUrl, + Button, + Form, + Input, + Textarea, + Group +} from 'payload/components'; const mapStateToProps = state => ({ collections: state.collections.all @@ -14,12 +22,40 @@ class Add extends Component { this.collection = this.props.collections.find(collection => { return collection.slug === this.slug; }); + this.state = { + apiUrl: 'https://site.com/order?slug=test' + }; } render() { return ( -

Add New Order

+
+

Add New Order

+
+ + +
+ + +
+ +
+ + + - + + {context => { + return ( +
+ +
+ ) + }} + ); } } diff --git a/src/client/components/forms/Form/index.js b/src/client/components/forms/Form/index.js index cd1bd5b8af..58ec081924 100644 --- a/src/client/components/forms/Form/index.js +++ b/src/client/components/forms/Form/index.js @@ -1,70 +1,48 @@ -import React, { Component } from 'react'; -import { withRouter } from 'react-router-dom'; - +import React, { Component, createContext } from 'react'; import { ajax } from 'payload'; import './index.css'; +const FormContext = createContext({}); + class Form extends Component { constructor(props) { super(props); this.state = { - fields: this.buildFields(), + fields: {}, status: undefined, processing: false }; - // Fill from renderChildren - this.childRefs = {}; - - this.buildFields = this.buildFields.bind(this); - this.handleChange = this.handleChange.bind(this); this.submit = this.submit.bind(this); - this.renderChildren = this.renderChildren.bind(this); } - buildFields() { - let fields = {}; + handleChange(e, validate) { + let valid = validate(e.target.value); - React.Children.map(this.props.children, (child) => { - if (child.props.name) { - fields[child.props.name] = { - value: child.props.value ? child.props.value : '', - required: child.props.required - }; - } - }); - - return fields; - } - - handleChange(e) { - let newState = { ...this.state }; - newState.fields[e.target.name].value = e.target.value; - this.setState(newState); - } - - submit(e) { - let isValid = true; - let newState = { ...this.state }; - - Object.keys(this.childRefs).forEach((field) => { - if (this.childRefs[field].props.required) { - let current = this.childRefs[field]; - - let validated = current.validate(); - - newState.fields[field].valid = validated; - - if (!validated) { - isValid = false; + this.setState({ + fields: { + ...this.state.fields, + [e.target.name]: { + value: e.target.value, + valid: valid } } }); + } - // Update validated fields - this.setState(newState); + submit(e) { + + e.preventDefault(); + + let isValid = true; + + Object.keys(this.state.fields).forEach((field) => { + if (!this.state.fields[field].valid) { + isValid = false; + } + }); // If not valid, prevent submission if (!isValid) { @@ -76,7 +54,7 @@ class Form extends Component { this.props.onSubmit(this.state.fields); // If form is AJAX, fetch data - } else if (this.props.ajax) { + } else if (this.props.ajax !== false) { e.preventDefault(); let data = {}; @@ -118,52 +96,10 @@ class Form extends Component { ); } - if (this.props.clearAfterSubmit && isValid) { - // Loop through fields - if not valid, set to invalid, rerender with error - Object.keys(this.state.fields).forEach((field) => { - newState.fields[field].value = ''; - }); - } - // If valid and not AJAX submit as usual return; } - renderChildren() { - let children = React.Children.map(this.props.children, (child) => { - if (child.props.name) { - // Initialize validation as true - only show error class if error after blur - let valid = true; - - // If a valid value has been passed from field, set valid equal to that - if (typeof this.state.fields[child.props.name].valid !== 'undefined') { - valid = this.state.fields[child.props.name].valid; - } - - return React.cloneElement(child, { - ref: (el) => { - this.childRefs[child.props.name] = el; - }, - change: this.handleChange, - validate: this.validate, - valid: valid, - value: this.state.fields[child.props.name].value - }); - } - - if (child.props.type === 'submit') { - return React.cloneElement(child, { - disabled: this.state.processing || child.props.disabled === 'disabled' ? 'disabled' : false, - children: this.state.processing ? 'Processing...' : child.props.children - }); - } - - return child; - }); - - return children; - } - render() { let Status = () => { return null; @@ -186,10 +122,24 @@ class Form extends Component { action={this.props.action} className={this.props.className}> - {this.renderChildren()} + + {this.props.children} + ); } } -export default withRouter(Form); +export const FormConsumer = (props => { + return ( + + {props.children} + + ); +}); + +export default Form; diff --git a/src/client/components/forms/Submit/index.js b/src/client/components/forms/Submit/index.js new file mode 100644 index 0000000000..47528231fd --- /dev/null +++ b/src/client/components/forms/Submit/index.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import { FormConsumer, Button } from 'payload/components'; + +class FormSubmit extends Component { + render() { + return ( + + {context => { + return ( + + ) + }} + + ); + } +} + +export default FormSubmit;