currentText and closeText mentioned in the documentation have no effect.

Code:

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;

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.

ah, needed to replace the array, not modify in place, but needed row.c = [...row.c, ...[item.c]]; because it's a string value

the .length field still doesn't update though. I also tried replacing the "x" with "c"

adding this column to the top grid also does not update when new items are added

Code:

<GridColumn field="x" render={({row})=>"Entries " + row.c.length} />

the nested grid only redraws when you close and open the expander.  is it because I'm using a reducer?  or something else?

Code:

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;

that works for me as well.  the documentation says this value is the default, so are the docs wrong?

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.

Code:

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;

when the checkbox has focus, pressing the spacebar toggles it in Chrome and Edge.  in Firefox it double presses or something and flashes back to the starting state.  you can see this in your demo

 https://www.jeasyui.com/demo-react/main/index.php?plugin=CheckBox&theme=material-teal&dir=ltr&pitem=&sort=asc

click a box and press tab to get it to have focus, then press space.

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.

Code:

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}
            />
        )
    }
}

added the ability to provide a default value to the prompt().

Code:

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

Code:

msg.prompt({
    title: "title",
    msg: "change?",
    defaultValue: itemSelected.name,
    result: r => {
        if (r) {
            renameItem(itemSelected.id, r)
        }
    }
});

worked on a minimal test, thanks.

MessagerDialog doesn't seem to exist.

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.

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

Trying to customize colors without breaking npm use, I copied rc-easyui/dist/themes/material to scr/css and changed my index.css

Code:

/*@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?