Print Page - Messager formating

Title: Messager formating
Post by: chrwei on June 29, 2020, 12:09:52 PM

Since react encodes any html in content, how can I add formatting to the Messager content, especially with prompt()?

I've making a class that extends it, but my renderContent() methods doesn't get called.

Title: Re: Messager formating
Post by: jarry on June 30, 2020, 07:03:45 PM

You can extend the Messager and create your own message components.

Code:

class MyMessagerDialog extends MessagerDialog {
  renderContent() {
    const { msg, title } = this.props;
    return [
      <div key="content" className="f-column f-full">
        <div className="messager-body f-full f-column">
          <h2>{title}</h2>
          <p>{msg}</p>
          {this.renderPrompt()}
        </div>
      </div>,
      this.renderButtons()
    ]
  }
}
class MyMessager extends Messager {
  render() {
    return (
      <MyMessagerDialog
        ref={ref => this.dialog = ref}
        {...this.props}
        {...this.state}
      />
    )
  }
}

Usage example:

Code:

<MyMessager ref={ref => this.mymsg = ref}></MyMessager>

Title: Re: Messager formating
Post by: chrwei on July 01, 2020, 12:24:13 PM

MessagerDialog doesn't seem to exist.

Title: Re: Messager formating
Post by: jarry on July 02, 2020, 08:23:00 PM

Please try to update to the newest version.

Title: Re: Messager formating
Post by: chrwei on July 06, 2020, 09:54:24 AM

worked on a minimal test, thanks.

Title: Re: Messager formating
Post by: chrwei on July 07, 2020, 07:10:12 AM

added the ability to provide a default value to the prompt().

Code:

export class MyMessagerDialog extends MessagerDialog {
    renderPrompt() {
        return this.props.messagerType!=="prompt" ? null : (
            <input ref={ref => {this.input = ref} }
                className="messager-input" 
                value={this.state.inputValue || this.props.defaultValue}
                onChange={(e)=> {
                    this.setState({
                        inputValue: e.target.value
                    })					
                }}
            />
        );
    }
...

called like

Code:

msg.prompt({
    title: "title",
    msg: "change?",
    defaultValue: itemSelected.name,
    result: r => {
        if (r) {
            renameItem(itemSelected.id, r)
        }
    }
});

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on June 29, 2020, 12:09:52 PM