1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 09:50:31 +01:00
onion/js/components/ascribe_forms/property.js

270 lines
8.2 KiB
JavaScript
Raw Normal View History

2015-06-18 19:03:03 +02:00
'use strict';
import React from 'react';
import ReactAddons from 'react/addons';
2015-06-20 16:43:18 +02:00
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import AppConstants from '../../constants/application_constants';
import { mergeOptions } from '../../utils/general_utils';
2015-06-18 19:03:03 +02:00
let Property = React.createClass({
propTypes: {
2015-06-22 23:32:41 +02:00
hidden: React.PropTypes.bool,
2015-08-20 11:03:00 +02:00
2015-06-18 19:03:03 +02:00
editable: React.PropTypes.bool,
2015-08-20 11:03:00 +02:00
// If we want Form to have a different value for disabled as Property has one for
// editable, we need to set overrideForm to true, as it will then override Form's
// disabled value for individual Properties
overrideForm: React.PropTypes.bool,
2015-06-22 23:32:41 +02:00
tooltip: React.PropTypes.element,
2015-06-18 19:03:03 +02:00
label: React.PropTypes.string,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
2015-06-30 10:42:58 +02:00
footer: React.PropTypes.element,
2015-07-07 18:07:12 +02:00
handleChange: React.PropTypes.func,
2015-07-10 15:56:54 +02:00
ignoreFocus: React.PropTypes.bool,
name: React.PropTypes.string.isRequired,
2015-07-10 15:56:54 +02:00
className: React.PropTypes.string,
2015-07-10 15:56:54 +02:00
onClick: React.PropTypes.func,
onChange: React.PropTypes.func,
onBlur: React.PropTypes.func,
2015-07-10 15:56:54 +02:00
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
2015-07-10 16:04:57 +02:00
]),
style: React.PropTypes.object
2015-06-18 19:03:03 +02:00
},
getDefaultProps() {
return {
2015-06-22 23:32:41 +02:00
editable: true,
2015-07-10 15:56:54 +02:00
hidden: false,
className: ''
2015-06-18 19:03:03 +02:00
};
},
getInitialState() {
return {
2015-07-28 12:03:45 +02:00
// Please don't confuse initialValue with react's defaultValue.
// initialValue is set by us to ensure that a user can reset a specific
// property (after editing) to its initial value
2015-06-18 19:03:03 +02:00
initialValue: null,
value: null,
isFocused: false,
errors: null
2015-06-18 19:03:03 +02:00
};
},
2015-07-10 15:56:54 +02:00
2015-07-14 20:35:16 +02:00
componentWillReceiveProps() {
2015-07-28 15:33:47 +02:00
let childInput = this.refs.input;
2015-07-14 20:35:16 +02:00
// In order to set this.state.value from another component
// the state of value should only be set if its not undefined and
// actually references something
if(childInput && typeof childInput.getDOMNode().value !== 'undefined') {
2015-07-14 20:35:16 +02:00
this.setState({
value: childInput.getDOMNode().value
2015-07-28 15:33:47 +02:00
});
// When implementing custom input components, their value isn't exposed like the one
// from native HTML elements.
// 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
2015-07-14 20:35:16 +02:00
});
}
2015-08-05 09:52:17 +02:00
if(!this.state.initialValue && childInput.props.defaultValue) {
this.setState({
2015-08-05 09:52:17 +02:00
initialValue: childInput.props.defaultValue
});
}
2015-06-18 19:03:03 +02:00
},
2015-07-10 15:56:54 +02:00
2015-08-05 09:52:17 +02:00
reset() {
let input = this.refs.input;
// maybe do reset by reload instead of front end state?
2015-06-18 19:03:03 +02:00
this.setState({value: this.state.initialValue});
2015-08-05 09:52:17 +02:00
if(input.state && input.state.value) {
// resets the value of a custom react component input
input.state.value = this.state.initialValue;
}
2015-08-05 09:52:17 +02:00
// For some reason, if we set the value of a non HTML element (but a custom input),
// after a reset, the value will be be propagated to this component.
//
// Therefore we have to make sure only to reset the initial value
// of HTML inputs (which we determine by checking if there 'type' attribute matches
// the ones included in AppConstants.possibleInputTypes).
let inputDOMNode = input.getDOMNode();
if(inputDOMNode.type && typeof inputDOMNode.type === 'string' &&
AppConstants.possibleInputTypes.indexOf(inputDOMNode.type.toLowerCase()) > -1) {
inputDOMNode.value = this.state.initialValue;
}
2015-06-22 23:32:41 +02:00
2015-09-10 11:22:42 +02:00
// For some inputs, reseting state.value is not enough to visually reset the
// component.
//
// So if the input actually needs a visual reset, it needs to implement
// a dedicated reset method.
if(typeof input.reset === 'function') {
input.reset();
2015-09-10 11:22:42 +02:00
}
2015-06-18 19:03:03 +02:00
},
handleChange(event) {
this.props.handleChange(event);
if (typeof this.props.onChange === 'function') {
2015-06-30 10:42:58 +02:00
this.props.onChange(event);
}
2015-07-14 20:35:16 +02:00
this.setState({value: event.target.value});
2015-06-18 19:03:03 +02:00
},
2015-07-10 15:56:54 +02:00
2015-06-18 19:03:03 +02:00
handleFocus() {
2015-07-10 15:56:54 +02:00
// if ignoreFocus (bool) is defined, then just ignore focusing on
// the property and input
2015-07-07 18:07:12 +02:00
if(this.props.ignoreFocus) {
return;
}
2015-07-10 15:56:54 +02:00
// if onClick is defined from the outside,
// just call it
if(typeof this.props.onClick === 'function') {
2015-07-10 15:56:54 +02:00
this.props.onClick();
}
// skip the focus of non-input elements
let nonInputHTMLElements = ['pre', 'div'];
if (this.refs.input &&
nonInputHTMLElements.indexOf(this.refs.input.getDOMNode().nodeName.toLowerCase()) > -1 ) {
return;
}
2015-06-18 19:03:03 +02:00
this.refs.input.getDOMNode().focus();
this.setState({
isFocused: true
});
},
2015-07-10 15:56:54 +02:00
handleBlur(event) {
2015-06-20 16:43:18 +02:00
this.setState({
isFocused: false
});
if(typeof this.props.onBlur === 'function') {
this.props.onBlur(event);
}
2015-06-20 16:43:18 +02:00
},
2015-07-10 15:56:54 +02:00
2015-06-18 19:03:03 +02:00
handleSuccess(){
this.setState({
isFocused: false,
errors: null,
// also update initialValue in case of the user updating and canceling its actions again
initialValue: this.refs.input.getDOMNode().value
2015-06-18 19:03:03 +02:00
});
},
2015-07-10 15:56:54 +02:00
2015-06-18 19:03:03 +02:00
setErrors(errors){
this.setState({
2015-11-13 09:48:22 +01:00
errors: errors.pop()
2015-06-18 19:03:03 +02:00
});
},
2015-07-10 15:56:54 +02:00
2015-06-18 19:03:03 +02:00
clearErrors(){
this.setState({errors: null});
},
2015-07-10 15:56:54 +02:00
2015-06-18 19:03:03 +02:00
getClassName() {
2015-06-22 23:32:41 +02:00
if(this.props.hidden){
return 'is-hidden';
}
2015-06-18 19:03:03 +02:00
if(!this.props.editable){
return 'is-fixed';
}
if (this.state.errors){
return 'is-error';
}
if(this.state.isFocused) {
return 'is-focused';
} else {
return '';
}
},
2015-07-10 15:56:54 +02:00
renderChildren(style) {
2015-06-18 19:03:03 +02:00
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
style,
2015-06-18 19:03:03 +02:00
onChange: this.handleChange,
2015-06-20 16:43:18 +02:00
onFocus: this.handleFocus,
onBlur: this.handleBlur,
2015-06-18 19:03:03 +02:00
disabled: !this.props.editable,
ref: 'input',
name: this.props.name
2015-06-18 19:03:03 +02:00
});
});
},
2015-07-10 15:56:54 +02:00
2015-06-18 19:03:03 +02:00
render() {
let footer = null;
2015-06-20 16:43:18 +02:00
let tooltip = <span/>;
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
if(this.props.tooltip){
2015-06-20 16:43:18 +02:00
tooltip = (
<Tooltip>
{this.props.tooltip}
</Tooltip>);
}
if(this.props.footer){
2015-06-30 10:42:58 +02:00
footer = (
<div className="ascribe-property-footer">
{this.props.footer}
</div>);
}
if(!this.props.editable) {
style.cursor = 'not-allowed';
}
2015-06-18 19:03:03 +02:00
return (
<div
className={'ascribe-property-wrapper ' + this.getClassName()}
2015-07-07 18:07:12 +02:00
onClick={this.handleFocus}
style={style}>
2015-06-20 16:43:18 +02:00
<OverlayTrigger
delay={500}
placement="top"
overlay={tooltip}>
<div className={'ascribe-property ' + this.props.className}>
<p>
<span className="pull-left">{this.props.label}</span>
<span className="pull-right">{this.state.errors}</span>
</p>
{this.renderChildren(style)}
2015-06-30 10:42:58 +02:00
{footer}
2015-06-20 16:43:18 +02:00
</div>
</OverlayTrigger>
2015-06-18 19:03:03 +02:00
</div>
);
}
});
export default Property;