Search results

Set custom animation for popup mode

In popup mode, the In-place Editor rendered with the Essential JS 2 React Tooltip component. You can use tooltip properties and events to customize the popup by configure properties into the model property inside the popupSettings API.

In the following sample, popup animation can be customized by passing animation effect using the model property and the dynamic animation effect changes configured from the Essential JS 2 React DropDownList component change event.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            display: flex;
            justify-content: center;
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .table-section {
            margin: 0 auto;
        }

        tr td:first-child {
            text-align: right;
            padding-right: 20px;
        }

        .sample-td {
            padding-top: 10px;
            min-width: 230px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
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 {
    constructor() {
        super(...arguments);
        this.openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
        this.model = { placeholder: 'Enter some text' };
        this.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;