Custom animation in React Inplace editor component

20 Feb 202613 minutes to read

In popup mode, the In-place Editor is rendered with the Essential^® JS 2 React Tooltip component. You can customize the popup by configuring tooltip properties and events through the model property inside the popupSettings API.

In the following sample, popup animation is customized by specifying animation effects through the model property. Dynamic animation changes are triggered from the Essential^® JS 2 React DropDownList component change event.

[Class-component]

app.jsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
    model = { placeholder: 'Enter some text' };
    popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };
    onChange(e) {
        this.inplaceEditorObj.popupSettings.model.animation.open.effect = e.value;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource={this.openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={this.onChange = this.onChange.bind(this)}/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Popup' value='Andrew' model={this.model} popupSettings={this.popupSettings}/>
                </td>
            </tr>
          </tbody>
        </table>
     </div>);
    }
}
export default App;

app.tsx

import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

class App extends React.Component<{},{}> {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
  public model = { placeholder: 'Enter some text' };
  public popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };

  public onChange(e: ChangeEventArgs): void {
    (this.inplaceEditorObj as any).popupSettings.model.animation.open.effect = e.value;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
    <div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource= {this.openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={ this.onChange=this.onChange.bind(this) } />
                </td>
            </tr>
            <tr>
                <td  className="sample-td"> Enter your name: </td>
                <td  className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Popup' value='Andrew' model={this.model} popupSettings={this.popupSettings} />
                </td>
            </tr>
          </tbody>
        </table>
     </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
function App() {
    let inplaceEditorObj;
    let dropdownObj;
    let openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
    let model = { placeholder: 'Enter some text' };
    let popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };
    function onChange(e) {
        inplaceEditorObj.popupSettings.model.animation.open.effect = e.value;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource={openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={onChange = onChange.bind(this)}/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Popup' value='Andrew' model={model} popupSettings={popupSettings}/>
                </td>
            </tr>
          </tbody>
        </table>
     </div>);
}
export default App;

app.tsx

import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

function App () {
  let inplaceEditorObj: InPlaceEditorComponent;
  let dropdownObj: DropDownListComponent;

  let openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
  let model = { placeholder: 'Enter some text' };
  let popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };

  function onChange(e: ChangeEventArgs): void {
    (inplaceEditorObj as any).popupSettings.model.animation.open.effect = e.value;
    inplaceEditorObj.dataBind();
  }

    return (
    <div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource= {openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={ onChange=onChange.bind(this) } />
                </td>
            </tr>
            <tr>
                <td  className="sample-td"> Enter your name: </td>
                <td  className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Popup' value='Andrew' model={model} popupSettings={popupSettings} />
                </td>
            </tr>
          </tbody>
        </table>
     </div>
    );

}

export default App;