mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 01:39:36 +01:00
parent
8a814c287c
commit
bc63899350
@ -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){
|
||||
return this.props.spinner;
|
||||
}
|
||||
if (this.props.buttons){
|
||||
|
||||
buttons = React.cloneElement(this.props.buttons, {
|
||||
disabled: !isFormValid
|
||||
});
|
||||
|
||||
return buttons;
|
||||
return this.props.buttons;
|
||||
}
|
||||
|
||||
let buttons = null;
|
||||
|
||||
if (this.state.edited){
|
||||
buttons = (
|
||||
|
@ -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={{
|
||||
|
@ -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() {
|
||||
|
@ -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() {
|
||||
|
@ -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') + ' '}
|
||||
|
Loading…
Reference in New Issue
Block a user