Show Posts
|
Pages: 1 2 3 [4] 5 6 ... 15
|
46
|
General Category / EasyUI for React / DateBox text not applying
|
on: August 10, 2020, 09:38:23 AM
|
currentText and closeText mentioned in the documentation have no effect. import React from 'react'; import './App.css'; import { DateBox } from 'rc-easyui';
function App() { return ( <div className="App"> <DateBox editable={false} format="yyyy/MM/dd" currentText="El Hoy" closeText="Cerrar" /> </div> ); } export default App;
|
|
|
47
|
General Category / EasyUI for React / DateBox Today button and the validator
|
on: August 10, 2020, 07:19:13 AM
|
When using the calendarOptions validator, if today's date isn't valid, the Today button still lets you select today.
in date components in other UI tookits, the today button only takes you to today in the calendar component, it does not select the date and populate the field. this change would also fix this issue.
|
|
|
50
|
General Category / EasyUI for React / Nested DataGrid not updating when data changes
|
on: July 17, 2020, 07:12:33 AM
|
the nested grid only redraws when you close and open the expander. is it because I'm using a reducer? or something else? import React, { useReducer } from 'react'; import './App.css'; import { DataGrid, GridColumn, LinkButton } from 'rc-easyui';
function App() { const [data, setData] = useReducer(dataReducer, null, () => ( [ { a1:"a", a2:"A", c:[{ b1:"x", b2:"X" }] }, { a1:"b", a2:"B", c:[] }, { a1:"c", a2:"C", c:[] }, ]));
return ( <div className="App"> <DataGrid data={data} renderDetail={({row}) => { return ( <div style={{ marginLeft: 30 }}> <DataGrid data={row.c} > <GridColumn field="b1" title="Col1" width={110} /> <GridColumn field="b2" title="Col2" width={110} /> </DataGrid> </div> ); }} > <GridColumn key="e" field="e" expander width={30}></GridColumn> <GridColumn field="a1" title="Col1" width={110} /> <GridColumn field="a2" title="Col2" width={110} /> </DataGrid> <LinkButton onClick={()=>setData({a1:"a", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to a-A</LinkButton> <LinkButton onClick={()=>setData({a1:"a", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to a-A</LinkButton> <LinkButton onClick={()=>setData({a1:"b", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to b-B</LinkButton> <LinkButton onClick={()=>setData({a1:"b", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to b-B</LinkButton> </div> ); }
const dataReducer = (data, item) => { let newData = [ ...[], ...data]; newData.find(s=>s.a1===item.a1).c.push(item.c);
return newData; }
export default App;
|
|
|
52
|
General Category / EasyUI for React / DataGrid filter reset?
|
on: July 10, 2020, 10:43:29 AM
|
I'm using React Router to have multiple pages. several pages have DataGrids with filters and different columns and datasets. If I add a filter on page, then go to a different page, I see no data even though there is nothing in the filters, and if I add something to the filters an onFilterChange event shows my new filter and also shows the filter from the previous page's datagrid. What do i need to do make sure the filter only applies on a specific datagrid instance? I tried adding a unique value for the key prop but that had no effect. this also affects multiple datagrids on the same page, type "a" into the first grid's col1 filter, then type "x" into the 2nd grid's col1 filter. you get no results, and the console shows the "a1" filter. import React from 'react'; import './App.css'; import { DataGrid, GridColumn } from 'rc-easyui';
function App() { const dataA = [ { a1:"a", b2:"A" }, { a1:"b", b2:"B" }, { a1:"c", b2:"C" }, ]; const dataB = [ { b1:"x", b2:"X" }, { b1:"y", b2:"Y" }, { b1:"z", b2:"Z" }, ];
return ( <div className="App"> <DataGrid filterable data={dataA} onFilterChange={filter => console.log("filter A", filter)} > <GridColumn field="a1" title="Col1" width={110} /> <GridColumn field="a2" title="Col2" width={110} /> </DataGrid>
<DataGrid filterable data={dataB} onFilterChange={filter => console.log("filter B", filter)} > <GridColumn field="b1" title="Col1" width={110} /> <GridColumn field="b2" title="Col2" width={110} /> </DataGrid> </div> ); }
export default App;
|
|
|
54
|
General Category / EasyUI for React / Re: Messager position
|
on: July 07, 2020, 12:09:29 PM
|
workaround with this, but it does some odd scrolling things if the parent panel's length changes between dialogs. at least the dialog is always visible. export class MyMessager extends Messager { onOpen() { let iv = setInterval(() => { if(this.dialog) { clearInterval(iv); this.dialog.vcenter(); } }, 50); }
render() { return ( <MessagerDialog ref={ref => this.dialog = ref} onOpen={this.onOpen.bind(this)} {...this.props} {...this.state} /> ) } }
|
|
|
55
|
General Category / EasyUI for React / Re: Messager formating
|
on: July 07, 2020, 07:10:12 AM
|
added the ability to provide a default value to the prompt(). export class MyMessagerDialog extends MessagerDialog { renderPrompt() { return this.props.messagerType!=="prompt" ? null : ( <input ref={ref => {this.input = ref} } className="messager-input" value={this.state.inputValue || this.props.defaultValue} onChange={(e)=> { this.setState({ inputValue: e.target.value }) }} /> ); } ...
called like msg.prompt({ title: "title", msg: "change?", defaultValue: itemSelected.name, result: r => { if (r) { renameItem(itemSelected.id, r) } } });
|
|
|
58
|
General Category / EasyUI for React / Messager formating
|
on: June 29, 2020, 12:09:52 PM
|
Since react encodes any html in content, how can I add formatting to the Messager content, especially with prompt()?
I've making a class that extends it, but my renderContent() methods doesn't get called.
|
|
|
59
|
General Category / EasyUI for React / Enhancement: LayoutPanel expander
|
on: June 18, 2020, 09:12:14 AM
|
When the expander in on the west panel collapsed or not the expander is in the same location relative to center, but on the east panel when not collapsed the expander is on the right, which isn't very clear what the action is. having it on left so it's in the same location as when collapsed would be better usability
|
|
|
60
|
General Category / EasyUI for React / Issues making themes
|
on: June 10, 2020, 02:18:18 PM
|
Trying to customize colors without breaking npm use, I copied rc-easyui/dist/themes/material to scr/css and changed my index.css /*@import '~rc-easyui/dist/themes/material/easyui.css';*/ @import 'css/easyui.css';
this works when I run it (react-scripts start) but when I build and deploy most UI elements are not visible, but if I inspect that page I see they are there. switching back to @import '~rc-easyui/dist/themes/material/easyui.css'; and build again restores everything. I haven't even edited any files yet, this is just copying the folder. what am I missing?
|
|
|
|