diff --git a/examples/App.jsx b/examples/App.jsx index 449a7a7..1cbddba 100644 --- a/examples/App.jsx +++ b/examples/App.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import {Label} from 'react-bootstrap'; +import {Label, Panel, Button} from 'react-bootstrap'; import Editable from '../libs/js/Editable'; import CustomComponent from './CustomComponent'; import './styles/plugin.css'; @@ -7,215 +7,493 @@ import './styles/demo.css'; import '../libs/css/editable.css'; export default class App extends Component { - render(){ - return( -
-

React X-editable Demo

-
-

Example

- Popup Mode: (click to edit) - - - - - - - - - + +
Simple text field - -
Empty text field, required - +

React X-editable Demo

+
+

Example

+ Popup Mode: (click to edit) + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + - - - - - - - - + + + + + - - - - - - -
TypeExample + +
Simple text field + { - if(!value){ - return 'Required'; - } - }} /> -
Simple textarea - -
Simple select with customizable display - + 
 {``}
+ + + 		+ +
Empty text field, required + { + if(!value){ + return 'Required'; + } + }} + /> + + 
 {` {
+      if(!value){
+        return 'Required';
+      }
+    }}
+/>`}
- dataType="select" - name={"city"} + + 		+ +
Simple textarea +  {value}); - }} - /> -
Simple checkbox list - -
Custom component - { - return( ); - }} + + 
 {``}
+ + + 		+ +
Simple select with customizable display +  {value}); + }} /> -
Simple text field with disable - -
-
- Inline mode: - - - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - + + + +
Simple text field - -
Empty text field, required with no buttons + + 
 {` {value});
+    }}
+/>`}
+ + + 		+ +
Simple checkbox list + + + 
 {``}
+ + + 		+ +
Custom component + { + return( ); + }} + /> + + 
 {`{
+      return(  );
+    }}
+/>`}
+ + + 		+ +
Simple text field with disable { - if(!value){ - return 'Required'; - } - }} + placement="right" + value="ni3galave" + showButtons={true} + disabled={false} /> -
Simple textarea - -
Simple select with customizable display + + 
 {``}
+ + + 		+ + +
+
+ Inline mode: + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - -
Simple text field City: {value}); - }} - /> + name="usernameDD" + dataType="text" + mode={"inline"} + title="Enter username" + value="ni3galave" + /> + + 
 {``}
+ + + 		+ +
Empty text field, required with no buttons + { + if(!value){ + return 'Required'; + } + }} + /> + + 
 {` {
+      if(!value){
+        return 'Required';
+      }
+    }}
+/>`}
+ + + 		+ +
Simple textarea + + + 
 {``}
+ + + 		+ +
Simple select with customizable display + City: {value}); + }} + /> + + 
 {`City: {value});
+    }}
+/>`}
+ + + 		+ +
Custom component + { + return( ); + }} + display={function(value){ + return ({value.city}, {value.street}, {value.building}); + }} + /> + + 
 {`{
+      return(  );
+    }}
+    display={function(value){
+      return ({value.city}, {value.street}, {value.building});
+    }}
+/>`}
+ +
Custom component - { - return( ); - }} - display={function(value){ - return ({value.city}, {value.street}, {value.building}); - }} - /> +
- - ) - } +
+
+ ) + } } diff --git a/examples/index.jsx b/examples/index.jsx index 586d55f..c81329b 100644 --- a/examples/index.jsx +++ b/examples/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { render } from 'react-dom'; -import App from './App' +import App from './App'; +import Dummy from './dummy' -render(, document.getElementById('app')); +render(, document.getElementById('app')); diff --git a/examples/styles/demo.css b/examples/styles/demo.css index 1f3bb82..74afe04 100644 --- a/examples/styles/demo.css +++ b/examples/styles/demo.css @@ -5,3 +5,8 @@ .demo table { clear: both; } + +.panel.panel-default { + margin-bottom: 0px !important; + border: white !important; +} diff --git a/libs/js/Checklist.jsx b/libs/js/Checklist.jsx index 8081e8a..88f7a9c 100644 --- a/libs/js/Checklist.jsx +++ b/libs/js/Checklist.jsx @@ -35,7 +35,7 @@ export default class Checklist extends Component { } this.setState({ value : values}); const texts = _.map(values, (val) => { return val.text}) - this.props.setValueToAnchor(texts); + this.props.setValueToAnchor(texts, e); } onBlur(e){ diff --git a/libs/js/Editable.jsx b/libs/js/Editable.jsx index 39212c7..d681a6a 100644 --- a/libs/js/Editable.jsx +++ b/libs/js/Editable.jsx @@ -42,6 +42,7 @@ export default class Editable extends Component { optionsInline : props.inline ? props.inline : false, //Required for customize input customComponent :props.customComponent ? props.customComponent : null, + onChange : props.onChange ? props.onChange : null, //for internal use editable: false, valueUpdated : false, @@ -55,6 +56,8 @@ export default class Editable extends Component { this.value = nextProps.value; } } + componentDidMount() { + } setInitialValue = () => { const { dataType, options, value } = this.props; if(dataType == "select" || dataType == "checklist"){ @@ -99,8 +102,12 @@ export default class Editable extends Component { //reset validation this.validation = {}; } - setValueToAnchor(value){ + setValueToAnchor(value, event){ this.newValue = value; + //To trigger onChange event:user defined + if(this.props.onChange){ + this.props.onChange(event); + } } getValueForAnchor(){ if(this.value){ @@ -188,7 +195,15 @@ export default class Editable extends Component { rootClose={true} onHide={() => { this.setEditable(false) } } show={editable} - target={() => ReactDOM.findDOMNode(this.editableAnchor)} + shouldUpdatePosition={true} + target={() => { + console.log("ReactDOM.findDOMNode(this.refs.target)"); + console.log(ReactDOM.findDOMNode(this.refs.target)); + return ReactDOM.findDOMNode(this.refs[this.props.name]) + }} + arrowOffsetTop="-6px;" + arrowOffsetLeft="79%;" + container={this} {...this.props}> {content} @@ -206,9 +221,10 @@ export default class Editable extends Component { defaultValue, dataType, mode, disabled } = this.state; const editableContainerClass = (disabled) ? "editable-disabled" : "editable-container"; return ( -
+
+ + {this.getContent()}
); } diff --git a/libs/js/Select.jsx b/libs/js/Select.jsx index 09a9c6d..d4d7356 100644 --- a/libs/js/Select.jsx +++ b/libs/js/Select.jsx @@ -27,10 +27,10 @@ export default class Select extends Component { }); this.setState({ value: option.text }); if( e.target.value == "select"){ - this.props.setValueToAnchor(undefined); + this.props.setValueToAnchor(undefined, e); return; } - this.props.setValueToAnchor(option.text); + this.props.setValueToAnchor(option.text, e); } onBlur(e){ if( !this.props.showButtons ){ @@ -63,7 +63,7 @@ export default class Select extends Component { componentClass="select" placeholder="select" bsSize="small" - key={this.props.name} + key={"FormControl"+this.props.name} value={ this.getValue() } onChange={this.setValue.bind(this)} onBlur={this.onBlur.bind(this)} diff --git a/libs/js/Text.jsx b/libs/js/Text.jsx index 51f1885..212e102 100644 --- a/libs/js/Text.jsx +++ b/libs/js/Text.jsx @@ -16,7 +16,7 @@ export default class Text extends Component { } setValue = (e) =>{ this.setState({ value: e.target.value }); - this.props.setValueToAnchor(e.target.value); + this.props.setValueToAnchor(e.target.value, e); } onBlur(e){ if( !this.props.showButtons ){ diff --git a/libs/js/Textarea.jsx b/libs/js/Textarea.jsx index ef3086c..699ca0b 100644 --- a/libs/js/Textarea.jsx +++ b/libs/js/Textarea.jsx @@ -17,7 +17,7 @@ export default class Textarea extends Component { } setValue = (e) =>{ this.setState({ value: e.target.value }); - this.props.setValueToAnchor(e.target.value); + this.props.setValueToAnchor(e.target.value, e); } onBlur(e){ if( !this.props.showButtons ){ diff --git a/package.json b/package.json index beac29c..0a0d1f7 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "dist/editable", "repository": { "type": "git", - "url": "git+https://github.com/ni3galave/react-x-editable.git" + "url": "git+https://github.com/ni3galave/react-x-editable.git" }, "keywords": [ "react", @@ -26,8 +26,10 @@ "prop-types": "^15.5.10", "react": "^15.4.2", "react-bootstrap": "^0.31.0", + "react-bootstrap-xeditable": "^0.2.10", "react-css-modules": "^4.3.0", - "react-dom": "^15.4.2" + "react-dom": "^15.4.2", + "react-xeditable": "^0.1.3" }, "devDependencies": { "babel-core": "^6.23.1",