Show Posts
|
Pages: 1 2 [3] 4 5 ... 15
|
32
|
General Category / EasyUI for jQuery / ComboBox and DateBox keyboard nav
|
on: December 09, 2020, 09:13:53 AM
|
I've worked out how to add this on my own by using $.extend, but it requires that I maintain a copy of part of the core code, and is heavily based on that code so the license doesn't allow sharing or distributing it. (I don't distribute it, it's for my own use) ComboBox has up and down handlers for keyboard nav, but it only works when the drop down is open. I expect it to work when the drop down is closed too, since the basic HTML <select> and desktop apps all do it. For the Datebox, when the calendar box is open, it navigates by day for left/right and week for up/down. I also have it have it nav by day when the calendar is closed, but I understand not everyone would want this. Please add these additional keyboard nav features. Since my datebox code isn't based on your code, I'll provide that here. it's simple and somewhat obvious, so use it as you wish. (function($){ $.extend($.fn.datebox.defaults.keyHandler, { up: function (e) { var v = new Date(); if($(e.data.target).datebox('getValue') != "") { v = new Date(Date.parse($(e.data.target).datebox('getValue'))); } if ($(e.data.target).datebox('panel').parent().css('display') == "none") { v.setDate(v.getDate() + 1); } else { v.setDate(v.getDate() - 7); } $(e.data.target).datebox('setValue', v.format("shortDate")); }, down: function (e) { var v = new Date(); if($(e.data.target).datebox('getValue') != "") { v = new Date(Date.parse($(e.data.target).datebox('getValue'))); } if ($(e.data.target).datebox('panel').parent().css('display') == "none") { v.setDate(v.getDate() - 1); } else { v.setDate(v.getDate() + 7); } $(e.data.target).datebox('setValue', v.format("shortDate")); }, left: function (e) { var v = new Date(); if($(e.data.target).datebox('getValue') != "") { v = new Date(Date.parse($(e.data.target).datebox('getValue'))); } v.setDate(v.getDate() - 1); $(e.data.target).datebox('setValue', v.format("shortDate")); }, right: function (e) { var v = new Date(); if($(e.data.target).datebox('getValue') != "") { v = new Date(Date.parse($(e.data.target).datebox('getValue'))); } v.setDate(v.getDate() + 1); $(e.data.target).datebox('setValue', v.format("shortDate")); } }); })(jQuery);
|
|
|
33
|
General Category / EasyUI for jQuery / Messager Extensions
|
on: December 09, 2020, 08:48:51 AM
|
I'm sharing some Messager extensions I made, use it as you see fit, it's more of an example. The docs mention that you can provide a options object, but there's no detail on what that object should look like. This shows some things you can do. We mostly use Yes/No instead of OK/Cancel, so I added a yesno() for easy use, and also a yesnocancel() which shows how to do additional buttons and custom callback values. password() shows how to customize the prompt prompt2() adds an option to supply a default value, would be great if this were just built in login() shows a more complex multi-input dialog as a simple messager, with a callback object instead of just a simple value. the bindHotkeys() wrapper adds support for a hotkey, so on the yesno the user can just press y or n to answer the prompt. it can be added no matter what buttons you provide, it'll hotkey the first unique character of each button, or you can add your own <u> tag to specify it yourself in the button label. a built in way to do this would be great too. I know escape closes the dialog but does nor call your callback which does not help in handling "user canceled the event" process, and enter will click the focused button, which is great. hotkeys add better support for custom buttons. (function($){ function bindHotkeys(msgr) { var win = $("body").children("div.messager-window"); if (!win.length) { return msgr; } var buttonwrapper = win.find(".messager-button"); var buttons = {}; buttonwrapper.find(".l-btn-text").each(function() { var c = this.innerHTML.match(/<u>(.)<\/u>/);//do we already have a single char underline if(c) { buttons[c[1].toUpperCase()] = this; //keep it } else { var i = 0; //find first unique char c = this.innerHTML.substr(i,1).toUpperCase(); while(buttons[c]) { i++; c = this.innerHTML.substr(i,1).toUpperCase(); } buttons[c] = this; this.innerHTML = this.innerHTML.substr(0,i) + "<u>" + this.innerHTML.substr(i,1) + "</u>" + this.innerHTML.substring(i+1); //add the underline } });
buttonwrapper.on("keypress", function(event) { for(var btn in buttons){ if (String.fromCharCode(event.which).toUpperCase() == btn) { $(buttons[btn]).click(); event.preventDefault(); } } }); return msgr; } function closeDialog(dlg, retval) { var opts = dlg.dialog("options"); dlg.dialog("close"); opts.fn(retval); };
$.extend($.messager, { //$.messager supports a config object that allows overriding the content prompt2: function(title, msg, value, fn) { var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"text\" value=\"" + value + "\"/></div>"; return bindHotkeys($.messager.prompt({ title: title, msg: msg, fn: fn, content: content })); }, password:function(title,msg,fn){ var content="<div class=\"messager-icon messager-question\"></div>"+"<div>"+msg+"</div>"+"<br/>"+"<div style=\"clear:both;\"/>"+"<div><input class=\"messager-input\" type=\"password\"/></div>"; return bindHotkeys($.messager.prompt({ title: title, msg: msg, fn: fn, content: content })); }, login:function(title,msg,fn){ var content="<div class=\"messager-icon messager-question\"></div>"+"<div>"+msg+"</div>"+"<br/>"+"<div style=\"clear:both;\"/>" +"<div class=\"righttext\">Login ID: <input class=\"messager-input messager-id\" type=\"text\" style=\"width:auto;\"/></div>" +"<div class=\"righttext\">Password: <input class=\"messager-input messager-pass\" type=\"password\" style=\"width:auto;\"/></div>"; var dlg = $.messager.prompt({ title: title, msg: msg, fn: fn, content: content, buttons: [{ text: $.messager.defaults.ok, onClick: function () { closeDialog(dlg, {id:dlg.find(".messager-id").val(), pass:dlg.find(".messager-pass").val()}); } }, { text: $.messager.defaults.cancel, onClick: function () { closeDialog(dlg, false); } }] }); dlg.find(".messager-input:first").focus(); return bindHotkeys(dlg); }, yesnocancel: function(title, msg, fn) { //$.messager supports a button array in the options, so this is for backwards compat var dlg = $.messager.confirm({ title: title, msg: msg, fn: fn, buttons: [{ text: $.messager.defaults.yes, onClick: function () { closeDialog(dlg, "y"); } }, { text: $.messager.defaults.no, onClick: function () { closeDialog(dlg, "n"); } }, { text: $.messager.defaults.cancel, onClick: function () { closeDialog(dlg, "c"); } }] }); return bindHotkeys(dlg); }, yesno: function(title, msg, fn, buttontitles) { //$.messager supports a button names in the options, so this is for backwards compat return bindHotkeys($.messager.confirm({ title: title, msg: msg, fn: fn, ok: (buttontitles?buttontitles.yes:$.messager.defaults.yes), cancel: (buttontitles?buttontitles.no:$.messager.defaults.no), })); }, }); $.extend($.messager.defaults, { yes: "Yes", no: "No" }); })(jQuery);
|
|
|
35
|
General Category / EasyUI for React / Tooltip issue
|
on: September 29, 2020, 11:07:24 AM
|
I made a simple test that works just fine, code is below. Using the same pattern this has been working for months. recently it has stopped working in development (create-react-app's "react-scripts start"), but works fine after "react-scripts build". it's the same in Firefox, Chrome, and Edge-Legacy. I can open the devtools and I see the div created in the DOM on hover, and keyboard navigating to the node does cause the browser to highlight where it should be. Editing the style to change the z-order has no effect, even with 10x changes. Editing display and position does cause the text to display below all other elements or affect the page layout. What might cause the code below to work in one project in dev but not another? I'm concerned the issue will spread to the build at some point. import React from 'react'; import './App.css'; import { Form, FormField, TextBox, Tooltip } from 'rc-easyui';
function App() { const model ={foo:""}; return ( <Form model={model} > <FormField name="foo" style={{ ...{ marginBottom: "5px", marginRight: "10px" } }} label="Field" > <Tooltip tooltipCls="form-field-focused" tooltipStyle={{maxWidth:"300px"}} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip> <TextBox /> </FormField> <FormField name="bar" style={{ ...{ marginBottom: "5px", marginRight: "10px" } }} label="another Field" > <Tooltip tooltipCls="form-field-focused" tooltipStyle={{maxWidth:"300px"}} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip> <TextBox /> </FormField> </Form> ); } export default App;
|
|
|
37
|
General Category / EasyUI for React / Re: Messager error when triggered from dialog header
|
on: September 24, 2020, 08:13:32 AM
|
possibly related to this change? 1.1.27: s.a.createElement("div", { className: "dialog-inline", ref: function(t) { return e.dialogContainer = t } }, i)
1.1.28 u.a.createPortal(i, document.body)
the latter seems to be missing the setting of dialogContainer, which I think is the "undefined" being referenced in the error
|
|
|
40
|
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 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;
|
|
|
41
|
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? 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) 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;
|
|
|
44
|
General Category / EasyUI for React / calendarOptions validator not validating?
|
on: August 17, 2020, 07:43:02 AM
|
I have this validator 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?
|
|
|
|