@gusmano/reext
Advanced tools
@gusmano/reext - npm Package Compare versions
Comparing version 0.0.21 to 0.0.22
| { | ||
| "name": "@gusmano/reext", | ||
| "version": "0.0.21", | ||
| "version": "0.0.22", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "./dist/reext.umd.js", |
119
README.md
@@ -62,69 +62,56 @@ # React ReExt - A React Component for ExtJS | ||
| const App=()=>{ | ||
| const [labelcmp, setLabelCmp] = useState(null); | ||
| const labelcmpRef = useRef(); | ||
| labelcmpRef.current = labelcmp; | ||
| const [labeltext, setLabelText] = useState('initial text'); | ||
| const [row, setRow] = useState(null); | ||
| const [labelcmp, setLabelCmp] = useState(null); | ||
| const labelcmpRef = useRef(); | ||
| labelcmpRef.current = labelcmp; | ||
| const [labeltext, setLabelText] = useState('initial text'); | ||
| return ( | ||
| <div style={{ | ||
| boxSizing:'border-box',height:'100%', | ||
| display:'flex',flexDirection:'column' | ||
| }}> | ||
| <ReExt xtype='logo'/> | ||
| <div style={{display:'flex'}}> | ||
| <ReExt xtype='button' | ||
| config={{text:'click me',width:100}} | ||
| onTap={() => { | ||
| labelcmpRef.current.setHtml('set using method call') | ||
| setLabelText('set using state') | ||
| }} | ||
| /> | ||
| </div> | ||
| <ReExt xtype='grid' | ||
| style={{height:300}} | ||
| config={{ | ||
| title: 'grid', | ||
| columns: [ | ||
| {text:'Name',dataIndex:'name',width:200}, | ||
| {text:'Email',dataIndex:'email',flex:1}, | ||
| {text:'Phone',dataIndex:'phone',width:200} | ||
| ], | ||
| data: [ | ||
| {name:'Lisa',email:'lisa@simpsons.com',phone:'555-111-1224'}, | ||
| {name:'Bart',email:'bart@simpsons.com',phone:'555-222-1234'}, | ||
| {name:'Homer',email:'homer@simpsons.com',phone:'555-333-1244'}, | ||
| {name:'Marge',email:'marge@simpsons.com',phone:'555-444-1254'} | ||
| ] | ||
| }} | ||
| onSelect={(grid, selected)=>{ | ||
| var row = selected[0].data; | ||
| setRow(row); | ||
| var rowString = JSON.stringify(row); | ||
| labelcmpRef.current.setHtml(rowString); | ||
| setLabelText(rowString); | ||
| }} | ||
| /> | ||
| <div style={{flex:1,padding:20,border:'1px solid gray'}}> | ||
| {row !== null && | ||
| <> | ||
| <ReExt xtype='label' config={{html: `name: ${row.name}`}}/> | ||
| <ReExt xtype='label' config={{html: `email: ${row.email}`}}/> | ||
| <ReExt xtype='label' config={{html: `phone: ${row.phone}`}}/> | ||
| </> | ||
| } | ||
| </div> | ||
| <div style={{flex:1,padding:20,border:'1px solid gray'}}> | ||
| <ReExt xtype='label' | ||
| config={{html: 'initial text'}} | ||
| ready={(cmp) => { | ||
| setLabelCmp(cmp); | ||
| }} | ||
| /> | ||
| <ReExt xtype='label' | ||
| config={{html:labeltext}} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| return ( | ||
| <div style={{ | ||
| boxSizing:'border-box',height:'100%', | ||
| display:'flex',flexDirection:'column' | ||
| }}> | ||
| <ReExt xtype='logo'/> | ||
| <div style={{display:'flex',border:'1px solid red'}}> | ||
| <ReExt xtype='button' | ||
| config={{text:'click me',width:100}} | ||
| onTap={()=>{ | ||
| labelcmpRef.current.setHtml('set using method call'); | ||
| setLabelText('set using state'); | ||
| }} | ||
| /> | ||
| </div> | ||
| <ReExt xtype='grid' | ||
| style={{height:300}} | ||
| config={{ | ||
| title: 'grid', | ||
| columns: [ | ||
| {text:'Name',dataIndex:'name',width:200}, | ||
| {text:'Email',dataIndex:'email',flex:1}, | ||
| {text:'Phone',dataIndex:'phone',width:200} | ||
| ], | ||
| data: [ | ||
| {name:'Lisa',email:'lisa@simpsons.com',phone:'555-111-1224'}, | ||
| {name:'Bart',email:'bart@simpsons.com',phone:'555-222-1234'}, | ||
| {name:'Homer',email:'homer@simpsons.com',phone:'555-333-1244'}, | ||
| {name:'Marge',email:'marge@simpsons.com',phone:'555-444-1254'} | ||
| ] | ||
| }} | ||
| onSelect={(grid, selected)=>{ | ||
| var row = selected[0].data | ||
| var rowString = JSON.stringify(row) | ||
| labelcmpRef.current.setHtml(rowString) | ||
| setLabelText(rowString) | ||
| }} | ||
| /> | ||
| <ReExt xtype='label' | ||
| config={{html: 'initial text'}} | ||
| ready={(cmp)=>{ | ||
| setLabelCmp(cmp) | ||
| }} | ||
| /> | ||
| <ReExt xtype='label' | ||
| config={{html:labeltext}} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
@@ -131,0 +118,0 @@ export default App |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.02%
3414753
- Number of lines in readme file
- decreased by-9.63%
122
No dependency changes