ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-28 00:28:00 +02:00
Code Issues Releases Wiki Activity

Revert "form validation first cut"

Browse Source 
This reverts commit 8a814c287c.
This commit is contained in:
diminator 2015-08-19 09:41:28 +02:00
parent 8a814c287c
commit bc63899350
5 changed files with 41 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js/components/ascribe_forms/form.js
View File

@ -23,8 +23,8 @@ let Form = React.createClass({
handleSuccess: React.PropTypes.func,
getFormData: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
React.PropTypes.object,
React.PropTypes.array
]),
className: React.PropTypes.string,
spinner: React.PropTypes.element,
@ -165,43 +165,14 @@ let Form = React.createClass({
this.setState({errors: []});
},
checkFormValidity() {
let requiredProps = [];
Object
.keys(this.refs)
.forEach((refName) => {
if(this.refs[refName].props.required) {
requiredProps.push(this.refs[refName]);
}
});
let validProps = requiredProps.filter((property) => property.state.isValid);
if(requiredProps.length === validProps.length) {
return true;
} else {
return false;
}
},
getButtons() {
let buttons = null;
let isFormValid = this.checkFormValidity();
if(this.state.submitted) {
if (this.state.submitted){
return this.props.spinner;
}
if(this.props.buttons) {
buttons = React.cloneElement(this.props.buttons, {
disabled: !isFormValid
});
return buttons;
if (this.props.buttons){
return this.props.buttons;
}
let buttons = null;
if (this.state.edited){
buttons = (

58
js/components/ascribe_forms/form_register_piece.js
View File

@ -27,10 +27,7 @@ let RegisterPieceForm = React.createClass({
isFineUploaderActive: React.PropTypes.bool,
isFineUploaderEditable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
]),
children: React.PropTypes.element,
onLoggedOut: React.PropTypes.func
},
@ -77,11 +74,16 @@ let RegisterPieceForm = React.createClass({
});
},
setIsUploadReady(isReady) {
this.setState({
isUploadReady: isReady
});
},
render() {
let currentUser = this.state.currentUser;
let enableLocalHashing = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false;
enableLocalHashing = enableLocalHashing && this.props.enableLocalHashing;
return (
<Form
className="ascribe-form-bordered"
@ -104,11 +106,11 @@ let RegisterPieceForm = React.createClass({
<h3>{this.props.headerMessage}</h3>
</div>
<Property
name="digital_work_key"
ignoreFocus={true}
required={true}>
ignoreFocus={true}>
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
isFineUploaderActive={this.props.isFineUploaderActive}
onLoggedOut={this.props.onLoggedOut}
editable={this.props.isFineUploaderEditable}
@ -116,8 +118,7 @@ let RegisterPieceForm = React.createClass({
</Property>
<Property
name='artist_name'
label={getLangText('Artist Name')}
required={true}>
label={getLangText('Artist Name')}>
<input
type="text"
placeholder="(e.g. Andy Warhol)"
@ -125,8 +126,7 @@ let RegisterPieceForm = React.createClass({
</Property>
<Property
name='title'
label={getLangText('Title')}
required={true}>
label={getLangText('Title')}>
<input
type="text"
placeholder="(e.g. 32 Campbell's Soup Cans)"
@ -134,8 +134,7 @@ let RegisterPieceForm = React.createClass({
</Property>
<Property
name='date_created'
label={getLangText('Year Created')}
required={true}>
label={getLangText('Year Created')}>
<input
type="number"
placeholder="(e.g. 1962)"
@ -150,6 +149,7 @@ let RegisterPieceForm = React.createClass({
let FileUploader = React.createClass({
propTypes: {
setIsUploadReady: React.PropTypes.func,
submitKey: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func,
onClick: React.PropTypes.func,
@ -160,31 +160,7 @@ let FileUploader = React.createClass({
isFineUploaderActive: React.PropTypes.bool,
onLoggedOut: React.PropTypes.func,
editable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool,
// is provided by Property
onChange: React.PropTypes.func
},
getInitialState() {
return {
value: false
};
},
setIsUploadReady(isReady) {
this.setState({
value: isReady
});
// Property is listening to this.state.value to determine
// if the form is ready. As it will access this.state.value directly
// we need to call onChange after the state submission has been done.
this.props.onChange({
target: {
value: isReady
}
});
enableLocalHashing: React.PropTypes.bool
},
render() {
@ -203,8 +179,8 @@ let FileUploader = React.createClass({
itemLimit: 100000,
sizeLimit: '25000000000'
}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
areAssetsDownloadable={false}
areAssetsEditable={this.props.isFineUploaderActive}
signature={{

27
js/components/ascribe_forms/input_checkbox.js
View File

@ -21,8 +21,7 @@ let InputCheckbox = React.createClass({
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
]),
onChange: React.PropTypes.bool
])
},
// As HTML inputs, we're setting the default value for an input to checked === false
@ -56,21 +55,6 @@ let InputCheckbox = React.createClass({
}
},
// after the component was updated and the state value changed,
// we need to call onChange from property to refresh the state.value of property
componentDidUpdate(prevProps, prevState) {
if(prevState.value !== this.state.value) {
// and also call Property's onChange method
// (in this case we're mocking event.target.value, since we can not use the event
// coming from onChange. Its coming from the span (user is clicking on the span) and not the input)
this.props.onChange({
target: {
value: this.state.value
}
});
}
},
onChange() {
// On every change, we're inversing the input's value
let inverseValue = !this.refs.checkbox.getDOMNode().checked;
@ -78,6 +62,15 @@ let InputCheckbox = React.createClass({
// pass it to the state
this.setState({value: inverseValue});
// and also call Property's onChange method
// (in this case we're mocking event.target.value, since we can not use the event
// coming from onChange. Its coming from the span (user is clicking on the span) and not the input)
this.props.onChange({
target: {
value: inverseValue
}
});
},
render() {

43
js/components/ascribe_forms/property.js
View File

@ -26,19 +26,14 @@ let Property = React.createClass({
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
]),
style: React.PropTypes.object,
required: React.PropTypes.bool,
// is a std reg exp as seen from HTML inputs
pattern: React.PropTypes.string
style: React.PropTypes.object
},
getDefaultProps() {
return {
editable: true,
hidden: false,
className: '',
required: false
className: ''
};
},
@ -50,8 +45,7 @@ let Property = React.createClass({
initialValue: null,
value: null,
isFocused: false,
errors: null,
isValid: false
errors: null
};
},
@ -62,10 +56,8 @@ let Property = React.createClass({
// the state of value should only be set if its not undefined and
// actually references something
if(typeof childInput.getDOMNode().value !== 'undefined') {
this.setState({
value: childInput.getDOMNode().value,
isValid: this.checkValidity(childInput.getDOMNode().value)
value: childInput.getDOMNode().value
});
// When implementing custom input components, their value isn't exposed like the one
@ -73,10 +65,8 @@ let Property = React.createClass({
// To enable developers to create input elements, they can expose a property called value
// in their state that will be picked up by property.js
} else if(childInput.state && typeof childInput.state.value !== 'undefined') {
this.setState({
value: childInput.state.value,
isValid: this.checkValidity(childInput.state.value)
value: childInput.state.value
});
}
@ -85,24 +75,6 @@ let Property = React.createClass({
initialValue: childInput.props.defaultValue
});
}
},
checkValidity(value) {
if(this.props.required && value) {
if(this.props.pattern && value && value.match(this.props.pattern)) {
// if the value is matching the provided pattern
return true;
} else if(!this.props.pattern) {
// if no pattern was provided, everything is evaluated to true
return true;
} else {
// if the pattern was provided but the input didn't match it
return false;
}
} else {
return false;
}
},
reset() {
@ -118,14 +90,13 @@ let Property = React.createClass({
},
handleChange(event) {
this.props.handleChange(event);
if ('onChange' in this.props) {
this.props.onChange(event);
}
this.setState({
value: event.target.value
});
this.setState({value: event.target.value});
},
handleFocus() {

3
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -153,8 +153,7 @@ let CylandRegisterPiece = React.createClass({
<Property
name="terms"
className="ascribe-settings-property-collapsible-toggle"
style={{paddingBottom: 0}}
required={true}>
style={{paddingBottom: 0}}>
<InputCheckbox>
<span>
{' ' + getLangText('I agree to the Terms of Service of Cyland Archive') + ' '}