EasyUI Forum
August 08, 2022, 12:20:25 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 ... 14
1  General Category / EasyUI for React / DataList doens't seem to have a double click event? on: June 23, 2022, 01:57:13 PM
How might I implement this?
2  General Category / EasyUI for React / DataGrid/ListBase filterDelay not behaving in the expected way on: June 17, 2022, 10:41:17 AM
this might only apply when remote filtering
as a test, I set filterDelay={5000}

I would expect that each new keystroke would reset the delay, and as long as I press any kind of key, including arrows, the actual filtering would not happen.

what happens is that every 5 seconds as long as I'm typing a another filter request is done.

My requests take a bit to process, and since it's all async it's not only causing extra server load, but also the requests don't come back in the same order, especially since a more specific filter will return faster, so sometimes the final search will return before the previous one completes, resulting in the desired data being replaced by the previous!

I think the below test case based on your remote filter example should show the issue, though I can't test it because your server doesn't allow CORS from http://localhost:3000/.  The console should show the requests with a timestamp

Code:
import React from 'react';
import { DataGrid, GridColumn, NumberBox } from 'rc-easyui';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      data: [],
      pageNumber: 1,
      loading: false,
      filterRules: null,
      operators: ["nofilter", "less", "greater"]
    }
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    const { pageNumber, filterRules } = this.state;
    const config = {
      credentials: 'include',
      method: 'post',
      mode: 'cors',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      body: `page=${pageNumber}&rows=10&filterRules=${filterRules}`
    };
    const url = 'https://www.jeasyui.com/demo/main/datagrid33_getdata.php';
    this.setState({ loading: true })
    fetch(url, config).then(res => {
      return res.json();
    }).then(data => {
      this.setState({
        total: parseInt(data.total, 10),
        data: data.rows,
        loading: false
      })
    })
  }
  handlePageChange({ pageNumber, refresh }) {
    if (refresh) {
      this.fetchData();
    } else {
      this.setState({ pageNumber: pageNumber }, () => {
        this.fetchData();
      })
    }
  }
  handleFilterChange(filterRules) {
    console.log(new Date().getTime(), JSON.stringify(filterRules))
    this.setState({ filterRules: JSON.stringify(filterRules) }, () => {
      this.fetchData()
    })
  }
  render() {
    return (
      <div>
        <h2>Remote Filtering</h2>
        <DataGrid
          style={{ height: 250 }}
          total={this.state.total}
          data={this.state.data}
          pageSize={10}
          pageNumber={this.state.pageNumber}
          loading={this.state.loading}
          pagination
          lazy
          filterable
  filterDelay={5000}
          onPageChange={this.handlePageChange.bind(this)}
          onFilterChange={this.handleFilterChange.bind(this)}
        >
          <GridColumn field="itemid" title="Item ID"></GridColumn>
          <GridColumn field="productid" title="Product"></GridColumn>
          <GridColumn field="listprice" title="List Price" align="right"
            filterOperators={this.state.operators}
            defaultFilterOperator="nofilter"
            filter={() => <NumberBox></NumberBox>}
          />
          <GridColumn field="unitcost" title="Unit Cost" align="right"
            filterOperators={this.state.operators}
            defaultFilterOperator="nofilter"
            filter={() => <NumberBox></NumberBox>}
          />
          <GridColumn field="attr1" title="Attribute" width="30%"></GridColumn>
        </DataGrid>
      </div>
    );
  }
}
 
export default App;
3  General Category / EasyUI for React / Re: error: null is not an object (evaluating 'this.view2.body') on: June 10, 2022, 06:23:58 AM
think i found the issue.  In the GridColumn's render I'm using a lazy load, that component has to separately be wrapped in a Suspense to avoid the error.  I do have my <App /> wrapped in a Suspense, but it seems GridColumn is breaking out of that somehow
4  General Category / EasyUI for React / Re: error: null is not an object (evaluating 'this.view2.body') on: May 27, 2022, 11:29:13 AM
another from user agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Cannot read property 'body' of null


I'm pretty sure these are all the same error, I do see some null check on view2, but not everywhere.  I still can't figure why it's null, or at what point.  I'm also not sure how view2 relates to my data or code.
5  General Category / EasyUI for React / Re: EasyUI React Dialog on: May 27, 2022, 10:00:21 AM
I have seen then on various UI kits when the mouse is released outside the browser viewport.  I don't think it's a jeasyui issue so much that the browser isn't raising the proper events
6  General Category / EasyUI for React / Re: error: null is not an object (evaluating 'this.view2.body') on: May 27, 2022, 09:58:36 AM
oddly, if I tell the ErrorBoundery to not treat these as error, everything renders fine anyway.

I'm using @apollo/client 3.6.5 to provide the grid "data".  I was using 3.3.14 before. maybe related. looking at the network tab in devtools everything seems to be as I'd expect, no null results
7  General Category / EasyUI for React / Re: error: null is not an object (evaluating 'this.view2.body') on: May 27, 2022, 09:46:24 AM
more errors logged as i posted this

one from another mac user, same user agent

several other users, slightly different error, all firefox

"error: this.view2 is null "
user agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

8  General Category / EasyUI for React / error: null is not an object (evaluating 'this.view2.body') on: May 27, 2022, 09:32:31 AM
recently upgraded to react 18.1.0 and rc-easyui 1.2.6 and got this error in my log. I have an ErrorBoundary setup that captures errors and send them to my sever.

I have not been able to reproduce it, but I think the user has a mac and I don't have access to one at the moment. user agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

maybe relayed, I'm also getting "Cannot read properties of null (reading 'body')" that I can reproduce, but as far as I can tell that one isn't coming from jeasyui.  "this.view2.body" is pretty clearly from your datagrid.  I'm seeing it on only 2 of my pages, and both use groupField/renderGroup.  I have not seen it on pages that have datagrids that aren't grouped.
9  General Category / EasyUI for React / Re: Radio button in forms on: April 28, 2021, 08:23:45 AM
I thought I had tried that... it works.

However, this is not needed on other components extended from FieldBase.
10  General Category / EasyUI for React / Re: Radio button in forms on: April 27, 2021, 10:03:10 AM
I'll add that adding the hack still results in a null key in the form model.  not the end of the world, but it's not right.
11  General Category / EasyUI for React / Radio button in forms on: April 27, 2021, 10:01:28 AM
Trying to figure out how to use a RadioButton on a form, and it seems to be having an internal battle.  Code below is my test case that shows the issue, I consider it incomplete, but other than adding hacks I'm not sure how to complete it.

To test, click "A option 1", then click "A option 2".  On the console you'll see:
Code:
optA 1 true
handleFormChange null 1
optA 2 true
handleFormChange null 2

The battle is that is radio change AND the form change are both firing, except the form change has a NULL field name, which is a problem.  The easy hack is to ignore null field names in the form change, but it just doesn't seem right.


Code:
import React, { useState } from 'react';
import './App.css';
import { Form, FormField, Label, RadioButton, } from 'rc-easyui';

function App() {
  const [model, setModel] = useState({});
  const opts = {
    optA: [
      { value: 1, text: "A option 1" },
      { value: 2, text: "A option 2" },
    ],
    optB: [
      { value: 1, text: "B option 1" },
      { value: 2, text: "B option 2" },
    ],
  }

  function handleOpt(name, value, checked) {
    console.log(name, value, checked)
    if (checked) {
      const newData = { ...{}, ...model };
      newData[name] = value;
      //setModel(newData);
    }
  }

  function handleFormChange(name, val) {
    console.log("handleFormChange", name, val)
  }

  return (
    <Form
      model={model}
      onChange={handleFormChange}
    >
      <FormField name="optA" value={model.optA}>
        <label>A Option:</label>
        {opts.optA.map(opt => {
          return (<div key={opt.value}>
            <RadioButton
              inputId={"optA" + opt.value}
              value={opt.value}
              groupValue={model.optA}
              onChange={(checked) => handleOpt("optA", opt.value, checked)}
            />
            <Label htmlFor={"optA" + opt.value} style={{ margin: '0 5px' }}>{opt.text}</Label>
          </div>)
        })}
      </FormField>
      <FormField name="optB" value={model.optB}>
        <label>B Option:</label>
        {opts.optB.map(opt => {
          return (<div key={opt.value}>
            <RadioButton
              inputId={"optB" + opt.value}
              value={opt.value}
              groupValue={model.optB}
              onChange={(checked) => handleOpt("optB", opt.value, checked)}
            />
            <Label htmlFor={"optB" + opt.value} style={{ margin: '0 5px' }}>{opt.text}</Label>
          </div>)
        })}
      </FormField>
      <div>
        {JSON.stringify(model)}
      </div>

    </Form>
  );
}
export default App;
12  General Category / EasyUI for React / Re: Tooltip issue on: March 26, 2021, 11:12:30 AM
it's from the bootstrap 4.0.0 cdn, shown via sourcemap, so I'm not 100% sure where it actually comes from.  bootstrap.min.css is imported via the react-chatbox-component package. 

Is there a way I can control the order things are imported and evaluated without ejecting and doing it manually?  Or is my work-around my most maintainable option?
13  General Category / EasyUI for React / Re: Tooltip issue on: March 25, 2021, 02:53:15 PM
it's not anything I made, I assumed webpack generates it from your css. 

due to the nature of the tooltips I can't click around to find out what it is, moving the mouse removes it from the DOM.  any tips on tracking it down?
14  General Category / EasyUI for React / Re: Tooltip issue on: March 24, 2021, 11:32:51 AM
I found the cause, I don't know how to fix it correctly.

Attached a screen shot comparing the rendered styles of a build vs a start.  you can see the order the styles is applied is different causing the opacity to override differently.

My current workaround for the tooltip is to add this to my index.css

Code:
.tooltip {
  opacity: 1;
}
15  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.
Pages: [1] 2 3 ... 14
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!