From e09ba544d2ac12db66f050db426e1722aae825f7 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Wed, 25 Jan 2017 08:44:59 +0530 Subject: [PATCH 1/6] multipleComponent --- App.jsx | 6 +++++- Components/header.jsx | 18 ++++++++++++++++++ index.html | 1 + style/style.css | 3 +++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 Components/header.jsx create mode 100644 style/style.css diff --git a/App.jsx b/App.jsx index c7d8037..7dbff38 100644 --- a/App.jsx +++ b/App.jsx @@ -1,10 +1,14 @@ import React from "react";// var React =require("react") +import Header from "./Components/header.jsx"; class App extends React.Component{ render(){ return (
- Hello World +
+
+ Hello World +
) } diff --git a/Components/header.jsx b/Components/header.jsx new file mode 100644 index 0000000..7110982 --- /dev/null +++ b/Components/header.jsx @@ -0,0 +1,18 @@ +import React from "react";// var React =require("react") + +class Header extends React.Component{ + render(){ + let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; + return ( +
+
+ I m logo + I m magic button + +
+
+ ) + } +} + +export default Header; \ No newline at end of file diff --git a/index.html b/index.html index fa83aac..4e06ed3 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ My first React +
diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..3831b1c --- /dev/null +++ b/style/style.css @@ -0,0 +1,3 @@ +.pull-right{ + float: right; +} \ No newline at end of file From 70ae96c563964b7ec55a810f3786bd3f53dd17d6 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Wed, 25 Jan 2017 08:46:15 +0530 Subject: [PATCH 2/6] readme updated --- readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.md b/readme.md index b71fcd3..834ab13 100644 --- a/readme.md +++ b/readme.md @@ -2,6 +2,8 @@ **Master:**_Hello World_ +**multipleComponent:**_Demo fo multiple component_ + ##How to run > Run following command >> `npm i` From 08b6ca4775b28d1a5eef11b4b437a8c11cb3cd7f Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Fri, 27 Jan 2017 07:38:49 +0530 Subject: [PATCH 3/6] state data --- App.jsx | 54 +++++++++++++++++++++++++++++++++++++--- Components/footer.jsx | 16 ++++++++++++ Components/header.jsx | 2 +- Components/myContent.jsx | 20 +++++++++++++++ 4 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 Components/footer.jsx create mode 100644 Components/myContent.jsx diff --git a/App.jsx b/App.jsx index 7dbff38..0733a15 100644 --- a/App.jsx +++ b/App.jsx @@ -1,14 +1,62 @@ import React from "react";// var React =require("react") import Header from "./Components/header.jsx"; +import Footer from "./Components/footer.jsx"; +import MyContent from "./Components/myContent.jsx"; class App extends React.Component{ + constructor(){ + super(); + this.state ={ + myData:[ + { + name:"Alice", + age:"25 Yrs", + education:"B. Tech." + }, + { + name:"Bob", + age:"26 Yrs", + education:"M.A." + },{ + name:"Riya", + age:"29 Yrs", + education:"chjjj" + } + ] + }; + + setTimeout(() =>{ + let data = [{p:8,p1:8},{p:7,p1:8}]; + this.setState({ + myData:[ + { + name:"Alice1", + age:"25 Yrs", + education:"B. Tech." + }, + { + name:"Bob1", + age:"26 Yrs", + education:"M.A." + },{ + name:"Riya1", + age:"29 Yrs", + education:"chjjj" + } + ] + }) + },3000); + } render(){ return (
-
- Hello World -
+ { + this.state.myData.map((e,i)=>{ + return + }) + } +
) } diff --git a/Components/footer.jsx b/Components/footer.jsx new file mode 100644 index 0000000..839c75c --- /dev/null +++ b/Components/footer.jsx @@ -0,0 +1,16 @@ +import React from "react";// var React =require("react") + +class Footer extends React.Component{ + render(){ + let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"}; + return ( +
+
+ Hi M footer +
+
+ ) + } +} + +export default Footer; \ No newline at end of file diff --git a/Components/header.jsx b/Components/header.jsx index 7110982..7294c16 100644 --- a/Components/header.jsx +++ b/Components/header.jsx @@ -7,8 +7,8 @@ class Header extends React.Component{
I m logo + I m magic button -
) diff --git a/Components/myContent.jsx b/Components/myContent.jsx new file mode 100644 index 0000000..9e9fb72 --- /dev/null +++ b/Components/myContent.jsx @@ -0,0 +1,20 @@ +import React from "react";// var React =require("react") + +class MyContent extends React.Component{ + constructor(){ + super(); + } + render(){ + let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; + return ( +

+ Data from parent
+ name:{this.props.myData.name},
+ age:{this.props.myData.age},
+ education:{this.props.myData.education} +

+ ) + } +} + +export default MyContent; \ No newline at end of file From 6b667c362ab56859714e18145110effd1f833169 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Sat, 28 Jan 2017 08:26:15 +0530 Subject: [PATCH 4/6] clickHandlerAndDataPassing --- App.jsx | 34 ++++++++++++---------------------- Components/custFilter.jsx | 16 ++++++++++++++++ Components/myContent.jsx | 27 +++++++++++++++++++++++++-- 3 files changed, 53 insertions(+), 24 deletions(-) create mode 100644 Components/custFilter.jsx diff --git a/App.jsx b/App.jsx index 0733a15..b6dbda9 100644 --- a/App.jsx +++ b/App.jsx @@ -24,36 +24,26 @@ class App extends React.Component{ } ] }; + this.myContentClickListner= this.myContentClickListner.bind(this); + } - setTimeout(() =>{ - let data = [{p:8,p1:8},{p:7,p1:8}]; - this.setState({ - myData:[ - { - name:"Alice1", - age:"25 Yrs", - education:"B. Tech." - }, - { - name:"Bob1", - age:"26 Yrs", - education:"M.A." - },{ - name:"Riya1", - age:"29 Yrs", - education:"chjjj" - } - ] - }) - },3000); + myContentClickListner(){ + console.log("this.arguments: ",arguments,arguments[1].target); + let data=this.state.myData; + data[arguments[2]].name +="_1"; + this.setState({ + myData:data + }) } + + render(){ return (
{ this.state.myData.map((e,i)=>{ - return + return }) }
diff --git a/Components/custFilter.jsx b/Components/custFilter.jsx new file mode 100644 index 0000000..febbecf --- /dev/null +++ b/Components/custFilter.jsx @@ -0,0 +1,16 @@ +import React from "react";// var React =require("react") + +class CustFilter extends React.Component{ + render(){ + let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"}; + return ( +
+
+ Hi M footer +
+
+ ) + } +} + +export default CustFilter; \ No newline at end of file diff --git a/Components/myContent.jsx b/Components/myContent.jsx index 9e9fb72..a0865c9 100644 --- a/Components/myContent.jsx +++ b/Components/myContent.jsx @@ -7,14 +7,37 @@ class MyContent extends React.Component{ render(){ let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; return ( -

+

{this.props.myFunc.myContentClickListner(this,evnt,this.props.myFunc.i)}}> Data from parent
name:{this.props.myData.name},
age:{this.props.myData.age},
education:{this.props.myData.education} -

+

) } } +/*MyContent.prototype={ + myData:React.PropTypes.object + //myData:React.PropTypes.number + //myData:React.PropTypes.bool + //myData:React.PropTypes.string.isRequired + //myData:React.PropTypes.func + //myData:React.PropTypes.array + }; + + + MyContent.defaultProps={ + myData:{ + name:"ydytdty", + age:"25 Yrs", + education:"B. Tech." + } + //myData:React.propTypes.number + //myData:React.propTypes.bool + //myData:React.propTypes.string.isRequired + //myData:React.propTypes.func + //myData:React.propTypes.array + };*/ + export default MyContent; \ No newline at end of file From 4850d56c19e8eb23efc323bbd4097b9d07029ca0 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Mon, 30 Jan 2017 13:04:00 +0530 Subject: [PATCH 5/6] filter data --- App.jsx | 83 ++++++++++++++++++++++++++++++++------- Components/custFilter.jsx | 15 ++++++- Components/header.jsx | 1 + Components/myContent.jsx | 14 ++++--- Components/myRouteNav.jsx | 18 +++++++++ index.html | 7 ++-- package.json | 1 + style/style.css | 3 -- 8 files changed, 113 insertions(+), 29 deletions(-) create mode 100644 Components/myRouteNav.jsx diff --git a/App.jsx b/App.jsx index b6dbda9..f9613ec 100644 --- a/App.jsx +++ b/App.jsx @@ -2,6 +2,8 @@ import React from "react";// var React =require("react") import Header from "./Components/header.jsx"; import Footer from "./Components/footer.jsx"; import MyContent from "./Components/myContent.jsx"; +import MyRouteNav from "./Components/myRouteNav.jsx"; +import CustFilter from "./Components/custFilter.jsx"; class App extends React.Component{ constructor(){ @@ -10,27 +12,67 @@ class App extends React.Component{ myData:[ { name:"Alice", - age:"25 Yrs", - education:"B. Tech." + age:25, + education:"B. Tech.", + location:"Delhi" }, { name:"Bob", - age:"26 Yrs", - education:"M.A." - },{ + age:26, + education:"M.A.", + location:"Bangalore" + }, + { name:"Riya", - age:"29 Yrs", - education:"chjjj" + age:29, + education:"M. Sc.", + location:"pune" + }, + { + name:"Abhishek", + age:25, + education:"B. Tech.", + location:"Delhi" + }, + { + name:"Akhilesh", + age:26, + education:"M.A.", + location:"Bangalore" + }, + { + name:"Neha", + age:29, + education:"M. Sc.", + location:"pune" } - ] + ], + myFiltr:{} }; - this.myContentClickListner= this.myContentClickListner.bind(this); + this.state.myDataCopy=JSON.parse(JSON.stringify(this.state.myData)); + this.myDropDownListner= this.myDropDownListner.bind(this); + this.resetAllData= this.resetAllData.bind(this); + this.resetAllData(); } - - myContentClickListner(){ - console.log("this.arguments: ",arguments,arguments[1].target); + resetAllData(){ + this.state.myFiltr={}; + this.state.myData.forEach(e=>{ + Object.keys(e).forEach(itm=>{ + if(this.state.myFiltr[itm]){ + this.state.myFiltr[itm].push(e[itm]) + }else { + this.state.myFiltr[itm]=[e[itm]]; + } + }) + }); + this.setState({ + myData:JSON.parse(JSON.stringify(this.state.myDataCopy)) + }) + } + myDropDownListner(){ + //console.log("this.arguments: ",arguments,arguments[1].target.innerText); let data=this.state.myData; - data[arguments[2]].name +="_1"; + data[arguments[2]][arguments[1].target.innerText] +="_1"; this.setState({ myData:data }) @@ -41,12 +83,23 @@ class App extends React.Component{ return (
+ { + Object.keys(this.state.myFiltr).map((e,i)=>{ + return + }) + } + +
{ this.state.myData.map((e,i)=>{ - return + return }) } -
) } diff --git a/Components/custFilter.jsx b/Components/custFilter.jsx index febbecf..5b5fc56 100644 --- a/Components/custFilter.jsx +++ b/Components/custFilter.jsx @@ -5,8 +5,19 @@ class CustFilter extends React.Component{ let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"}; return (
-
- Hi M footer +
+ +
    + {this.props.myprop.key.map((e,i)=>{ + return
  • {this.props.myFunc.myDropDownListner(this,evnt,this.props.myFunc.i)}} + >{e}
    • + })} +
) diff --git a/Components/header.jsx b/Components/header.jsx index 7294c16..c5dfbd9 100644 --- a/Components/header.jsx +++ b/Components/header.jsx @@ -9,6 +9,7 @@ class Header extends React.Component{ I m logo I m magic button +
) diff --git a/Components/myContent.jsx b/Components/myContent.jsx index a0865c9..6afe4e5 100644 --- a/Components/myContent.jsx +++ b/Components/myContent.jsx @@ -7,12 +7,14 @@ class MyContent extends React.Component{ render(){ let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; return ( -

{this.props.myFunc.myContentClickListner(this,evnt,this.props.myFunc.i)}}> - Data from parent
- name:{this.props.myData.name},
- age:{this.props.myData.age},
- education:{this.props.myData.education} -

+
+

Data from parent

+ { + Object.keys(this.props.myData).map(e=>{ + return
{e}:{this.props.myData[e]},
+ }) + } +
) } } diff --git a/Components/myRouteNav.jsx b/Components/myRouteNav.jsx new file mode 100644 index 0000000..6b17260 --- /dev/null +++ b/Components/myRouteNav.jsx @@ -0,0 +1,18 @@ +import React from "react";// var React =require("react") + +class MyRouteNav extends React.Component{ + render(){ + let myStyle={padding:"5px", borderBottom:"1px solid",marginBottom:"15px"}; + return ( +
+ +
+ ) + } +} + +export default MyRouteNav; \ No newline at end of file diff --git a/index.html b/index.html index 4e06ed3..99b9b94 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,11 @@ My first React +
- - - \ No newline at end of file + + + \ No newline at end of file diff --git a/package.json b/package.json index 2266822..60ef3b7 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "babel-preset-react": "^6.22.0", "json3": "^3.3.2", "react": "^15.4.2", + "react-bootstrap": "^0.30.7", "react-dom": "^15.4.2", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" diff --git a/style/style.css b/style/style.css index 3831b1c..e69de29 100644 --- a/style/style.css +++ b/style/style.css @@ -1,3 +0,0 @@ -.pull-right{ - float: right; -} \ No newline at end of file From 14dd60cc9cf02d417498c261f62063cf2f7e0ae7 Mon Sep 17 00:00:00 2001 From: akhilesh Kumar Date: Mon, 30 Jan 2017 18:02:50 +0530 Subject: [PATCH 6/6] filter data --- App.jsx | 113 +++++++++---------------- Components/{ => filter}/custFilter.jsx | 2 +- Components/filter/custFilterGroup.jsx | 25 ++++++ myStateData.js | 42 +++++++++ 4 files changed, 110 insertions(+), 72 deletions(-) rename Components/{ => filter}/custFilter.jsx (94%) create mode 100644 Components/filter/custFilterGroup.jsx create mode 100644 myStateData.js diff --git a/App.jsx b/App.jsx index f9613ec..448082d 100644 --- a/App.jsx +++ b/App.jsx @@ -3,79 +3,56 @@ import Header from "./Components/header.jsx"; import Footer from "./Components/footer.jsx"; import MyContent from "./Components/myContent.jsx"; import MyRouteNav from "./Components/myRouteNav.jsx"; -import CustFilter from "./Components/custFilter.jsx"; +import CustFilterGroup from "./Components/filter/custFilterGroup.jsx"; +import myJsn from "./myStateData.js"; class App extends React.Component{ constructor(){ super(); - this.state ={ - myData:[ - { - name:"Alice", - age:25, - education:"B. Tech.", - location:"Delhi" - }, - { - name:"Bob", - age:26, - education:"M.A.", - location:"Bangalore" - }, - { - name:"Riya", - age:29, - education:"M. Sc.", - location:"pune" - }, - { - name:"Abhishek", - age:25, - education:"B. Tech.", - location:"Delhi" - }, - { - name:"Akhilesh", - age:26, - education:"M.A.", - location:"Bangalore" - }, - { - name:"Neha", - age:29, - education:"M. Sc.", - location:"pune" - } - ], - myFiltr:{} - }; + this.state =myJsn; this.state.myDataCopy=JSON.parse(JSON.stringify(this.state.myData)); this.myDropDownListner= this.myDropDownListner.bind(this); - this.resetAllData= this.resetAllData.bind(this); - this.resetAllData(); + this.resetAllFilter= this.resetAllFilter.bind(this); + this.updateFiltr= this.updateFiltr.bind(this); + this.state.myFiltr=this.resetAllFilter(); } - resetAllData(){ - this.state.myFiltr={}; + updateFiltr(typ,val){ + console.log("typ,val: ",typ,val); + let data; + if(typ){ + data = this.state.myData.filter(e=>{ + return e[typ]==val; + }); + }else{ + data=JSON.parse(JSON.stringify(this.state.myDataCopy)); + } + this.setState({ + myData:data + }); + setTimeout(()=> { + let currFltr=this.resetAllFilter(); + console.log("currFltr:",currFltr,this.state); + this.setState({ + myFiltr:currFltr + }); + },0) + + } + resetAllFilter(){ + let myFiltr={}; this.state.myData.forEach(e=>{ Object.keys(e).forEach(itm=>{ - if(this.state.myFiltr[itm]){ - this.state.myFiltr[itm].push(e[itm]) + if(myFiltr[itm] && myFiltr[itm].indexOf(e[itm])==-1){ + myFiltr[itm].push(e[itm]) }else { - this.state.myFiltr[itm]=[e[itm]]; + myFiltr[itm]=[e[itm]]; } - }) + }); }); - this.setState({ - myData:JSON.parse(JSON.stringify(this.state.myDataCopy)) - }) + return myFiltr; } - myDropDownListner(){ - //console.log("this.arguments: ",arguments,arguments[1].target.innerText); - let data=this.state.myData; - data[arguments[2]][arguments[1].target.innerText] +="_1"; - this.setState({ - myData:data - }) + myDropDownListner(vl,typ){ + this.updateFiltr(typ,vl) } @@ -83,17 +60,11 @@ class App extends React.Component{ return (
- { - Object.keys(this.state.myFiltr).map((e,i)=>{ - return - }) - } - + +
{ this.state.myData.map((e,i)=>{ diff --git a/Components/custFilter.jsx b/Components/filter/custFilter.jsx similarity index 94% rename from Components/custFilter.jsx rename to Components/filter/custFilter.jsx index 5b5fc56..3a8d701 100644 --- a/Components/custFilter.jsx +++ b/Components/filter/custFilter.jsx @@ -14,7 +14,7 @@ class CustFilter extends React.Component{ {this.props.myprop.key.map((e,i)=>{ return
  • {this.props.myFunc.myDropDownListner(this,evnt,this.props.myFunc.i)}} + onClick={(evnt)=>{this.props.myFunc.myDropDownListner(evnt.target.innerText,this.props.myprop.name)}} >{e}
    • })} diff --git a/Components/filter/custFilterGroup.jsx b/Components/filter/custFilterGroup.jsx new file mode 100644 index 0000000..f62dd6e --- /dev/null +++ b/Components/filter/custFilterGroup.jsx @@ -0,0 +1,25 @@ +import React from "react";// var React =require("react") +import CustFilter from "./custFilter.jsx"; + +class CustFilterGroup extends React.Component{ + render(){ + let myStyle={position:"fixed",bottom:"0",width:"calc(100% - 45px)",padding:"5px", borderTop:"1px solid",marginTop:"15px"}; + return ( +
    + { + Object.keys(this.props.filter_data).map((e,i)=>{ + return + }) + } + +
    + ) + } +} + +export default CustFilterGroup; \ No newline at end of file diff --git a/myStateData.js b/myStateData.js new file mode 100644 index 0000000..e50ab87 --- /dev/null +++ b/myStateData.js @@ -0,0 +1,42 @@ +let myDta={ + "myData":[ + { + "name":"Alice", + "age":25, + "education":"B. Tech.", + "location":"Delhi" + }, + { + "name":"Bob", + "age":26, + "education":"M.A.", + "location":"Bangalore" + }, + { + "name":"Riya", + "age":29, + "education":"M. Sc.", + "location":"pune" + }, + { + "name":"Abhishek", + "age":25, + "education":"B. Tech.", + "location":"Delhi" + }, + { + "name":"Akhilesh", + "age":26, + "education":"M.A.", + "location":"Bangalore" + }, + { + "name":"Neha", + "age":29, + "education":"M. Sc.", + "location":"pune" + } + ], + "myFiltr":{} +}; +export default myDta; \ No newline at end of file