EasyUI Forum
October 03, 2022, 04:56:26 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 ... 15
16  General Category / EasyUI for React / Re: Checkbox issue in firefox on: February 25, 2021, 02:27:35 PM
finally got around to this one, tabIndex has no affect.

the checkbox receives focus fine either way, just that pressing space bar once you see a check and an uncheck, there's no way to leave it checked without grabbing the mouse.

actually it seems to only be happening on one form, I'll try to make a test case.
17  General Category / EasyUI for React / Re: Error after build that I don't know how to proceed on: February 05, 2021, 02:43:17 PM
finally got it, it was my form dynamic rules.

I was ending up with a form rule like ["required", "length[5,undefined]"].  entirely my fault, but very hard to debug.
18  General Category / EasyUI for React / Error after build that I don't know how to proceed on: February 03, 2021, 11:44:22 AM
I'm using create-react-app if that matters.

I'm only getting this error after I build the project

Code:
react_devtools_backend.js:2430 SyntaxError: Unexpected token u in JSON at position 3
    at JSON.parse (<anonymous>)
    at c (rc-easyui-min.js:10)
    at t.value (rc-easyui-min.js:10)
    at rc-easyui-min.js:10
    at Array.forEach (<anonymous>)
    at t.value (rc-easyui-min.js:10)
    at t.value (rc-easyui-min.js:10)
    at os (react-dom.production.min.js:212)
    at du (react-dom.production.min.js:255)
    at t.unstable_runWithPriority (scheduler.production.min.js:19)

I assume it's something in my data from my api server, but I'm just not finding anything.  Pointing a dev instance at the production api server does not give any errors.

how can figure out exactly what it's having an issue with?
19  General Category / EasyUI for React / Re: Nested datagrid expanding oddities on: January 26, 2021, 03:31:33 PM
perfect and easy, thanks.
20  General Category / EasyUI for React / Nested datagrid expanding oddities on: January 22, 2021, 02:52:18 PM
trying to make a nested data grid expanded always.  would be nice to have that as an option.  in this example, gridata is a useState() array and mygrid is a useRef().

this expands the first row as expected
Code:
useEffect(() => {
  if (mygrid.current) {
    mygrid.current.expandRow(gridata[0]);
  }
}, [gridata])

but this only expands the last row.
Code:
useEffect(() => {
  if (mygrid.current) {
    gridata.forEach(p => {
      mygrid.current.expandRow(p);
    });
  }
}, [gridata])

but this expands all rows.  
Code:
useEffect(() => {
  if (mygrid.current) {
    gridata.forEach(p => {
      setTimeout(() => {
        mygrid.current.expandRow(p);
      }, 1);
    });
  }
}, [gridata])

not sure I understand why, but if you have this issue, this is your workaround.

Additionally, updating the gridata causes the grid to collapse all rows automatically.  Would be handy to have a parameter that could default a row expanded or not based on the row data, that way we could flag the new data for which rows should be expanded after the refresh.
21  General Category / EasyUI for jQuery / editable combo's onchange not firing when typing into box on: December 29, 2020, 07:31:06 AM

Code:
$("#test").combo({
required:true,
label: "test",
onChange: function(n,o) {
console.log(n, o)
}
});

onChange never fires, and getValue returns empty string.
22  General Category / EasyUI for React / Re: Checkbox issue in firefox on: December 11, 2020, 07:29:11 AM
space still doesn't toggle in firefox
23  General Category / EasyUI for React / Re: Tooltip issue on: December 11, 2020, 07:26:07 AM
Still an issue, only happens in create-react-app's "npm react-scripts start", it's fine when deployed.  this is making testing very tedious.
24  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.

Code:
(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);
25  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.

Code:
(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);
26  General Category / EasyUI for React / Re: Tooltip issue on: September 29, 2020, 11:27:21 AM
Might be related, <SideMenu collapsed={true}> is also not poping the menu out in dev but is once built.
27  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.

Code:
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;
28  General Category / EasyUI for React / Re: Messager error when triggered from dialog header on: September 29, 2020, 10:57:58 AM
seems to work, thanks
29  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:
Code:
                    s.a.createElement("div", {
                        className: "dialog-inline",
                        ref: function(t) {
                            return e.dialogContainer = t
                        }
                    }, i)

1.1.28
Code:
                    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
30  General Category / EasyUI for React / Re: Messager error when triggered from dialog header on: September 23, 2020, 06:57:07 AM
Messager works fine in 1.1.27, 1.1.28's have broken it
Pages: 1 [2] 3 4 ... 15
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!