EasyUI Forum
October 03, 2022, 04:31:15 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: 1 2 [3] 4 5 ... 15
31  General Category / EasyUI for React / Re: Messager error when triggered from dialog header on: September 22, 2020, 12:09:12 PM
I'm now getting this error in other places too, but not in all places.  the dialog cannot be closed when it happens.
32  General Category / EasyUI for React / Dialog resize with minimize on: September 21, 2020, 10:15:39 AM
I have minimize/restore working (click the M and R, these will be icons eventually), but when adding resize it works until you do actually resize, then it ignores the style tag entirely.  How can I override this?  I've tried 'resizable={windowSize.current==="show"}' but it has no effect

Code:
import React, { useState } from 'react';
import './App.css';
import { Dialog, LinkButton } from 'rc-easyui';

function App() {
    const [closed, setClosed] = useState(false);
    const [windowSize, setWindowSize] = useState({
        current:"show",
        show: {
            height:315, width:285,
            icon:"M"
        },
        hide: {
            height:28, width:150,
            icon:"R"
        }
    });

    function onClose() {
        if(!closed) {
            setClosed(true);
        }
    }

    function header() {
        return (
            <div key="x">
                <div className="panel-title">Test</div>
                <LinkButton style={{ position: "absolute", right: "20px", top: "0px", height: "19px" }} plain onClick={onMinRestore}>
                    <i>{windowSize[windowSize.current].icon}</i>
                </LinkButton>
                <LinkButton style={{ position: "absolute", right: "0px", top: "0px", height: "19px" }} plain onClick={onClose}>
                    <i >X</i>
                </LinkButton>
            </div>
        )
    }

    function onResize({...size}) {
        let newState = {...{}, ...windowSize};
        newState.show.height = size.height;
        newState.show.width = size.width;
        setWindowSize(newState);
    }

    function onMinRestore() {
        let newState = {...{}, ...windowSize};
        if(newState.current==="show") {
            newState.current = "hide";
        } else {
            newState.current = "show";
        }
        setWindowSize(newState);
    }


    return (
        <div>
            <Dialog
                header={header}
                style={{ position:"fixed", top:(window.innerHeight-(windowSize[windowSize.current].height+10))+"px", left: (window.innerWidth-(windowSize[windowSize.current].width+20))+"px", height: windowSize[windowSize.current].height+"px", width: windowSize[windowSize.current].width+"px" }}
                closed={closed}
                closable={false}
                resizable={true}
                onResize={onResize}
            >
                Content
            </Dialog>
        </div>
    );
}
export default App;
33  General Category / EasyUI for React / Messager error when triggered from dialog header on: September 21, 2020, 08:45:18 AM
I'm trying to add a close confirmation prompt on a dialog, but I'm getting this error. Am i missing something?

Code:
Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at t.value (rc-easyui-min.js:15)
    at t.value (rc-easyui-min.js:15)
    at t.value (rc-easyui-min.js:15)
    at Object.onClick (rc-easyui-min.js:15)
    at t.value (rc-easyui-min.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Code:
import React, { useRef, useState } from 'react';
import './App.css';
import { Dialog, LinkButton, Messager } from 'rc-easyui';

function App() {
    const messager = useRef();
    const [closed, setClosed] = useState(false);

    function onClose() {
        if(!closed) {
            messager.current.confirm({
                title: "Confirm",
                msg: "Are you sure?",
                result: r => {
                    if (r) {
                        setClosed(true);
                    }
                }
            });
        }
    }

    function header() {
        //window-restore
        return (
            <div key="x">
                <div className="panel-title">Test</div>
                <LinkButton style={{ position: "absolute", right: "0px", top: "0px", height: "19px" }} plain onClick={onClose}>
                    <i >X</i>
                </LinkButton>
            </div>
        )
    }

    return (
        <div>
            <Dialog
                header={header}
                closed={closed}
                closable={false}
            >
                Content
            </Dialog>
            <Messager ref={messager} />
        </div>
    );
}
export default App;
34  General Category / EasyUI for React / Re: calendarOptions validator not validating? on: August 18, 2020, 07:01:36 AM
it was timezones.  javascript's date object is a real pain across timezones.
35  General Category / EasyUI for React / Re: calendarOptions validator not validating? on: August 17, 2020, 11:32:50 AM
I've found they have a SonicWall, and it isn't reporting anything being filtered.
36  General Category / EasyUI for React / calendarOptions validator not validating? on: August 17, 2020, 07:43:02 AM
I have this validator
Code:
calendarOptions={{
validator: (date) => {
let now = new Date();
let day90 = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 90);
//converted to match database
let compday = new Date(date).toISOString();
return date <= day90 && listData.dateList.indexOf(compday) >= 0;
}
}}

I have one customer that this does not work for (all dates are not valid), with no errors on the console log.  I was able to verify that the array is actually populated, I'm adding a log inside the validator next to make sure that's running.  I'm also removing the 90 day check and building that into the date list instead.

are there any known Chrome extensions that might cause these sort of problems with EasyUI?
37  General Category / EasyUI for React / Re: DateBox text not applying on: August 14, 2020, 07:21:35 AM
perfect.  thanks.
38  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.

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;
39  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.
40  General Category / EasyUI for React / Re: Nested DataGrid not updating when data changes on: July 20, 2020, 07:24:30 AM
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"
41  General Category / EasyUI for React / Re: Nested DataGrid not updating when data changes on: July 17, 2020, 08:05:03 AM
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} />
42  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?

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;
43  General Category / EasyUI for React / Re: DataGrid filter reset? on: July 13, 2020, 12:50:30 PM
that works for me as well.  the documentation says this value is the default, so are the docs wrong?
44  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.

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;
45  General Category / EasyUI for React / Checkbox issue in firefox on: July 10, 2020, 07:18:10 AM
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.
Pages: 1 2 [3] 4 5 ... 15
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!