Show Posts
|
Pages: 1 ... 5 6 [7] 8 9 ... 15
|
92
|
General Category / EasyUI for React / ComboBox ref not working?
|
on: March 03, 2020, 10:51:56 AM
|
I've got a functional component wrapped around a formfield+tooltip+combobox like so: export const ComboField = ({ label, name, hidden, invisible, tooltip, labelWidth, style, cboStyle, ...rest }) => { const cboBox = useRef(null);
if (!style) style = {}; if (hidden === true) { style["display"] = "none"; } if (invisible === true) { style["visibility"] = "hidden"; }
return ( <FormField name={name} label={label} labelWidth={labelWidth || "unset"} style={{ ...{ marginBottom: "5px", marginRight: "10px" }, ...style }}> <Tooltip position="left" content={tooltip}><i className={tooltip ? "fas fa-question-circle" : ""} style={{ fontSize: "14px" }} /></Tooltip> <ComboBox ref={cboBox} {...rest} style={cboStyle} panelStyle={{ height: 'auto', maxHeight: "200px" }} onFocus={() => { if(!rest.editable) { console.log("cboBox", cboBox) cboBox.openPanel() } } } /> </FormField> ); }
I'm trying to make it so when you tab into any non-editable combobox that it auto opens the panel. my console log is "cboBox {current: null}". what should I be doing different? the main reason I want to do this is because there's no focus indication on the box when the form validation has an error state, and the only keyboard input that show any response are the up and down arrow. the standard html select will select an item when its first letter is pressed. it would be great if this behavior could be added as users are familiar with it.
|
|
|
97
|
General Category / EasyUI for React / Re: methods for displaying and converting with Form and FormField
|
on: February 10, 2020, 01:38:44 PM
|
it's doing it every time now. maybe it was before and I scrolled past, I had a lot of console logging at the time. I tried adding key to the props that get copied, no effect, which isn't surprising since I'm not passing a key. I'm calling my component like: <FormField name="fieldname" style={{ marginBottom: "5px", marginRight: "10px" }} label="Field Name"> <MeasureBox value=5 units="si" /> </FormField>
the error points to the span that InputBase generates, I'm not sure what clue that holds.
|
|
|
101
|
General Category / EasyUI for React / Form.validate() performance
|
on: February 04, 2020, 02:50:13 PM
|
I have a complex form with about 50 fields, but only 20 of them have rules, though I'll likely expand that.
when i call validate(), whether or not there are any rule errors, I'm seeing a fairly consistent 4.5 second delay on an N3350 Chromebook and 1.2 second delay on an i5-8400. latest Chrome browser versions. my timing is logging `Date().getTime()` on the line before calling validate and again on the first line in the callback. 1 second I can deal with, 4 seconds I cannot.
I do have a custom validateRules and most of the 20 fields do have more than one.
in testing, I've changed it to "rules={{}}" and the delay remains, so I don't see how it could be my rules, which aren't very complex. I've also removed "rules={myModelrules}" and the callback is never called, which I guess is expected, but it is very fast.
|
|
|
103
|
General Category / EasyUI for React / Re: methods for displaying and converting with Form and FormField
|
on: January 29, 2020, 03:21:41 PM
|
one issue: index.js:1437 Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information. in span in MeasureBox ...
in the generated html, the TextBox formfields and my new MeasureBox formfields have all the same properties, but TextBox does not give this warning. do I just need to suppress it somehow, or did I do something incorrectly?
|
|
|
104
|
General Category / EasyUI for React / Re: methods for displaying and converting with Form and FormField
|
on: January 29, 2020, 03:07:25 PM
|
this seems to work class MeasureBox extends InputBase { constructor(props) { super(props); }
handleInputChange(e) { if (this.props.units === "met") this.setState({ valueMet: e.target.value }); if(e.target.value === "" || isNaN(e.target.value)) { this.setValue(e.target.value); } else { this.setValue(parseFloat(util.toStore(e.target.value, this.props.units))); } }
text() { return this.props.textFormatter(this.state.valueMet === undefined ? isNaN(this.state.text) ? this.state.text : util.toDisp(this.state.text, this.props.units) : this.state.valueMet); }
renderInput() { const props = { autoComplete: "off", className: this.inputClasses(), id: this.props.inputId, style: this.props.inputStyle, value: this.text(), onFocus: this.focus.bind(this), onBlur: this.blur.bind(this), onChange: this.handleInputChange.bind(this), tabIndex: this.props.tabIndex }
return ( <input {...props}></input> ) } }
had to add the extra value to preserve whatever the user types in from being re-converted. suggestions on improvements?
|
|
|
105
|
General Category / EasyUI for React / methods for displaying and converting with Form and FormField
|
on: January 28, 2020, 03:33:15 PM
|
I would like to use Form and FormField, but I'd like some of my fields to displayed and edited in metric or Si units based on a user preference, while always being stored in Si units in the model.
I was thinking of making my own function component that wraps the typical form field and hides it while instead displaying a TextBox with the users preferred units, but i can't work out a manageable way to get the changes back into the formfield since none of these components seem to have a method for setting the value.
one thing that comes to mind is passing a function to change the original model in the parent state. Form and FormField seems to be able to affect the model without these special function, but i can't quite work out how.
the other is to keep a metric and si copy of each value in the model, but that seem messy and error prone.
is there some way to trigger a formfield, or the textbox inside it, to update the model programatically that I've overlooked?
|
|
|
|