This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathapi-plnkr.json
More file actions
1 lines (1 loc) · 33.9 KB
/
api-plnkr.json
File metadata and controls
1 lines (1 loc) · 33.9 KB
1
{"index.css":" .toast-api-section {\r\n padding-top: 0;\r\n }\r\n .toast-api-section .input-form {\r\n margin: 33px 0;\r\n }\r\n\r\n .toast-api-section .group-form {\r\n margin: 25px 0;\r\n }\r\n\r\n .toast-api-section .group-form.e-group {\r\n margin-top: 35px;\r\n }\r\n .toast-api-section .row .padding {\r\n padding: 0 15px;\r\n }\r\n .toast-api-section .row.center {\r\n text-align: center;\r\n }\r\n .toast-api-section .row {\r\n padding: 0 15px;\r\n }","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Toast · Api · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/toast\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/toast/default.html\"><span>Toast</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Api</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>This sample demonstrates all the API functionalities available in <code>Toast.</code></p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>In this sample, with help of text inputs toast header <code>title</code> and <code>content</code> text can be provided.</p>\n <ul>\n <li><code>Action Buttons</code> – Provide support to add a button inside toast to interact with it.</li>\n <li><code>Prevent Duplicates</code> – Disable the user to create same toast message multiple times.</li>\n <li><code>TimeOut</code> – Allows to set time in millisecond to close toast.</li>\n <li><code>Progress Bar</code> – Visualizes the time out of toast as an indicator.</li>\n <li><code>Animation</code> – Enables to define the toast show and hide animation.</li>\n <li><code>Close button</code> – Show close button to hide toast irrespective of time out.</li>\n </ul>\n <p>More information about Toast can be found in this <a target=\"_blank\" href=\"http://ej2.syncfusion.com/react/documentation/toast/getting-started.html\">\n documentation section</a>.</p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { SampleBase } from './sample-base';\r\nimport { ToastComponent, ToastBeforeOpenArgs } from '@syncfusion/ej2-react-notifications';\r\nimport { Effect, isNullOrUndefined } from '@syncfusion/ej2-base';\r\nimport { DropDownListComponent, ChangeEventArgs as dropdownsChange } from '@syncfusion/ej2-react-dropdowns';\r\nimport { CheckBoxComponent, ChangeEventArgs, ButtonComponent } from '@syncfusion/ej2-react-buttons';\r\n\r\n\r\nexport class Api extends SampleBase<{}, {}> {\r\n \r\n private toastObj: ToastComponent;\r\n private dropDownListShowEase: DropDownListComponent;\r\n private dropDownListHideEase: DropDownListComponent;\r\n private dropDownListShow: DropDownListComponent;\r\n private dropDownListHide: DropDownListComponent;\r\n private position: Object = { X: 'Right', Y :'Bottom' }; \r\n private prevDuplicates: boolean = false;\r\n private showData: { [key: string]: Object }[] = [\r\n { Id: 'ease', Text: 'Ease' },\r\n { Id: 'linear', Text: 'Linear' }\r\n ];\r\n private animationData: { [key: string]: Object }[] = [\r\n { Id: 'SlideBottomIn', Effect: 'Slide Bottom In' },\r\n { Id: 'FadeIn', Effect: 'Fade In' },\r\n { Id: 'FadeZoomIn', Effect: 'Fade Zoom In' },\r\n { Id: 'FadeZoomOut', Effect: 'Fade Zoom Out' },\r\n { Id: 'FlipLeftDownIn', Effect: 'Flip Left Down In' },\r\n { Id: 'FlipLeftDownOut', Effect: 'Flip Left Down Out' },\r\n { Id: 'FlipLeftUpIn', Effect: 'Flip Left Up In' },\r\n { Id: 'FlipLeftUpOut', Effect: 'Flip Left Up Out' },\r\n { Id: 'FlipRightDownIn', Effect: 'Flip Right Down In' },\r\n { Id: 'FlipRightDownOut', Effect: 'Flip Right Down Out' },\r\n { Id: 'FlipRightUpIn', Effect: 'Flip Right Up In' },\r\n { Id: 'FlipRightUpOut', Effect: 'Flip Right Up Out' },\r\n { Id: 'SlideBottomOut', Effect: 'Slide Bottom Out' },\r\n { Id: 'SlideLeftIn', Effect: 'Slide Left In' },\r\n { Id: 'SlideLeftOut', Effect: 'Slide Left Out' },\r\n { Id: 'SlideRightIn', Effect: 'Slide Right In' },\r\n { Id: 'SlideRightOut', Effect: 'Slide Right Out' },\r\n { Id: 'SlideTopIn', Effect: 'Slide Top In' },\r\n { Id: 'SlideTopOut', Effect: 'Slide Top Out' },\r\n { Id: 'ZoomIn', Effect: 'Zoom In' },\r\n { Id: 'ZoomOut', Effect: 'Zoom Out' }\r\n ];\r\n private animationData1: { [key: string]: Object }[] = [\r\n { Id: 'SlideBottomOut', Effect: 'Slide Bottom Out' },\r\n { Id: 'FadeIn', Effect: 'Fade In' },\r\n { Id: 'FadeZoomIn', Effect: 'Fade Zoom In' },\r\n { Id: 'FadeZoomOut', Effect: 'Fade Zoom Out' },\r\n { Id: 'FlipLeftDownIn', Effect: 'Flip Left Down In' },\r\n { Id: 'FlipLeftDownOut', Effect: 'Flip Left Down Out' },\r\n { Id: 'FlipLeftUpIn', Effect: 'Flip Left Up In' },\r\n { Id: 'FlipLeftUpOut', Effect: 'Flip Left Up Out' },\r\n { Id: 'FlipRightDownIn', Effect: 'Flip Right Down In' },\r\n { Id: 'FlipRightDownOut', Effect: 'Flip Right Down Out' },\r\n { Id: 'FlipRightUpIn', Effect: 'Flip Right Up In' },\r\n { Id: 'FlipRightUpOut', Effect: 'Flip Right Up Out' },\r\n { Id: 'SlideBottomIn', Effect: 'Slide Bottom In' },\r\n { Id: 'SlideLeftIn', Effect: 'Slide Left In' },\r\n { Id: 'SlideLeftOut', Effect: 'Slide Left Out' },\r\n { Id: 'SlideRightIn', Effect: 'Slide Right In' },\r\n { Id: 'SlideRightOut', Effect: 'Slide Right Out' },\r\n { Id: 'SlideTopIn', Effect: 'Slide Top In' },\r\n { Id: 'SlideTopOut', Effect: 'Slide Top Out' },\r\n { Id: 'ZoomIn', Effect: 'Zoom In' },\r\n { Id: 'ZoomOut', Effect: 'Zoom Out' }\r\n ];\r\n private showFields: Object = { text: 'Text', value: 'Id' };\r\n private animationFields: Object = { text: 'Effect', value: 'Id' };\r\n private easeValue: string = 'ease';\r\n private animationValue: string = 'SlideBottomIn';\r\n private animationHideValue: string = 'SlideBottomOut';\r\n public closeOnChange(e: ChangeEventArgs): void {\r\n e.checked ? this.toastObj.showCloseButton = true : this.toastObj.showCloseButton = false;\r\n }\r\n public OnProgressChange (e: ChangeEventArgs): void {\r\n e.checked ? this.toastObj.showProgressBar = true : this.toastObj.showProgressBar = false;\r\n }\r\n public closeNewestOnChange (e: ChangeEventArgs): void {\r\n e.checked ? this.toastObj.newestOnTop = true : this.toastObj.newestOnTop = false;\r\n }\r\n public OnPrevDubChange(e: ChangeEventArgs): void {\r\n this.prevDuplicates = e.checked;\r\n }\r\n public OnactionBtnChange(e: ChangeEventArgs): void {\r\n if (e.checked) {\r\n this.toastObj.buttons = [{ model: { content: '<div class=\"e-toast-btn\"> Click Here </div>' }, click: this.onActionBtnClick }];\r\n } else { this.toastObj.buttons = []; }\r\n }\r\n public onActionBtnClick(e: Event): void {\r\n alert('Action button is clicked');\r\n }\r\n public showToast(): void {\r\n let title: string = (document.getElementById('toast_input_title') as HTMLInputElement).value;\r\n let content: string = (document.getElementById('toast_input_content') as HTMLInputElement).value;\r\n if (title === '' && content === '') {\r\n content = 'You have created a Toast message';\r\n }\r\n let showDuration: number = parseInt((document.getElementById('showDuration') as HTMLInputElement).value, 10);\r\n let hideDuration: number = parseInt((document.getElementById('hideDuration') as HTMLInputElement).value, 10);\r\n let timeOut: number = parseInt((document.getElementById('timeOut') as HTMLInputElement).value, 10);\r\n this.toastObj.show(\r\n {\r\n title: title, content: content, timeOut: timeOut,\r\n animation: {\r\n show: { duration: showDuration },\r\n hide: { duration: hideDuration }\r\n }\r\n });\r\n }\r\n public onShowEase(): void {\r\n this.toastObj.animation.show.easing = this.dropDownListShowEase.value.toString();\r\n }\r\n public showChange(): void {\r\n this.toastObj.animation.show.effect = this.dropDownListShow.value as Effect;\r\n }\r\n public hideChange(): void {\r\n this.toastObj.animation.hide.effect = this.dropDownListHide.value as Effect;\r\n }\r\n public onHideEase(): void {\r\n this.toastObj.animation.hide.easing = this.dropDownListHideEase.value.toString();\r\n }\r\n public showBtnClick(): void {\r\n this.showToast();\r\n }\r\n public hideBtnClick(): void {\r\n this.toastObj.hide('All');\r\n }\r\n public onbeforeOpen(e: ToastBeforeOpenArgs): void {\r\n let btnEleHide: HTMLElement = document.getElementById('toastBtnHide');\r\n btnEleHide.style.display = 'inline-block';\r\n if (this.prevDuplicates) {\r\n e.cancel = this.preventDuplicate(e);\r\n }\r\n }\r\n public onclose(e): void {\r\n let btnEleHide: HTMLElement = document.getElementById('toastBtnHide');\r\n if (e.toastContainer.childElementCount === 0 ) {\r\n btnEleHide.style.display = 'none';\r\n }\r\n \r\n }\r\n\r\n public preventDuplicate(e: ToastBeforeOpenArgs): boolean {\r\n let toastEle: HTMLElement = e.element;\r\n let toasts: NodeList = e.toastObj.element.children;\r\n for (let i: number = 0; i < toasts.length; i++) {\r\n let toastTitle: HTMLElement = (toasts[i] as HTMLElement).querySelector('.e-toast-title') ;\r\n let toastMessage: HTMLElement = (toasts[i] as HTMLElement).querySelector('.e-toast-message') ;\r\n if (toastTitle && toastTitle.isEqualNode(toastEle.querySelector('.e-toast-title'))) {\r\n return true;\r\n }\r\n if (!toastTitle && toastMessage && toastMessage.isEqualNode(toastEle.querySelector('.e-toast-message'))) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\nrender() {\r\n \r\n document.addEventListener('click', function(e: Event) : void { \r\n let btnEleShow: HTMLElement = document.getElementById('toastBtnShow'); \r\n if (!isNullOrUndefined(this.toastObj) && e.target !== btnEleShow) {\r\n this.toastObj.hide('All');\r\n }\r\n }.bind(this)); \r\n return ( \r\n <div className='control-pane'>\r\n <div className=\"col-lg-12 control-section toast-api-section\">\r\n <div className=\"e-sample-resize-container\">\r\n <ToastComponent ref={(toast) => { this.toastObj = toast }} id='toastApi' position={this.position} close={this.onclose.bind(this)} beforeOpen={this.onbeforeOpen.bind(this)} newestOnTop={true}></ToastComponent>\r\n <div className=\"row\">\r\n <div className=\"col-lg-6 padding\">\r\n <div className=\"input-form\">\r\n <div className=\"e-float-input\">\r\n <input id=\"toast_input_title\" className='e-input' required/>\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\">Enter the title</label>\r\n </div>\r\n </div>\r\n <div className=\"input-form\">\r\n <div className=\"e-float-input\">\r\n <textarea className='e-input' id='toast_input_content' rows={3} required></textarea>\r\n <label className=\"e-float-text\">Enter the content</label>\r\n </div>\r\n </div>\r\n <div className=\"group-form e-group\">\r\n <CheckBoxComponent id='closeButton' label='Show Close Button' change={this.closeOnChange.bind(this) }></CheckBoxComponent>\r\n </div>\r\n <div className=\"group-form e-group\">\r\n <CheckBoxComponent id='progressBar' label='Show Progress Bar' change={this.OnProgressChange.bind(this) }></CheckBoxComponent>\r\n </div>\r\n <div className=\"group-form e-group\">\r\n <CheckBoxComponent id='newestOnTop' checked={true} label='Newest On Top' change={this.closeNewestOnChange.bind(this) }></CheckBoxComponent>\r\n </div>\r\n <div className=\"group-form e-group\">\r\n <CheckBoxComponent id='prevDuplicates' label='Prevent Duplicates' change={this.OnPrevDubChange.bind(this) }></CheckBoxComponent>\r\n </div>\r\n <div className=\"group-form e-group\">\r\n <CheckBoxComponent id='actionButtons' label='Action Buttons' change={this.OnactionBtnChange.bind(this) }></CheckBoxComponent>\r\n </div>\r\n <div className=\"input-form\">\r\n <div className=\"e-float-input e-input-group\">\r\n <input className=\"e-input\" id=\"timeOut\" name=\"Digits\" value=\"5000\" required/>\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\">TimeOut</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"col-lg-6 padding\">\r\n <div className=\"input-form\">\r\n <h4> Show Animation</h4>\r\n <div className=\"e-float-input\">\r\n <input className=\"e-input\" id=\"showDuration\" defaultValue=\"400\" required/>\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\">Duration</label>\r\n </div>\r\n </div>\r\n <div className=\"input-form\">\r\n <DropDownListComponent ref={(dropdownlist) => { this.dropDownListShowEase = dropdownlist }} id=\"ShowEasing\" dataSource={this.showData} fields={this.showFields} placeholder=\"Select an Easing\" change={this.onShowEase.bind(this)} value={this.easeValue}/>\r\n </div>\r\n <div className=\"input-form\">\r\n <DropDownListComponent ref={(dropdownlist) => { this.dropDownListShow = dropdownlist }} id=\"ShowAnimation\" dataSource={this.animationData} fields={this.animationFields} placeholder=\"Select an Animation\" change={this.showChange.bind(this)} value={this.animationValue}/>\r\n </div>\r\n <div className=\"input-form e-group\">\r\n <h4> Hide Animation</h4>\r\n <div className=\"e-float-input\">\r\n <input className=\"e-input\" id=\"hideDuration\" defaultValue=\"400\" required/>\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\">Duration</label>\r\n </div>\r\n </div>\r\n <div className=\"input-form\">\r\n <DropDownListComponent ref={(dropdownlist) => { this.dropDownListHideEase = dropdownlist }} id=\"HideEasing\" dataSource={this.showData} fields={this.showFields} placeholder=\"Select an Easing\" change={this.onHideEase.bind(this)} value={this.easeValue}/>\r\n </div>\r\n <div className=\"input-form\">\r\n <DropDownListComponent ref={(dropdownlist) => { this.dropDownListHide = dropdownlist }} id=\"HideAnimation\" dataSource={this.animationData1} fields={this.animationFields} placeholder=\"Select an Animation\" change={this.hideChange.bind(this)} value={this.animationHideValue}/>\r\n </div>\r\n </div>\r\n </div>\r\n <div className=\"row center\">\r\n <ButtonComponent id='toastBtnShow' className='e-btn e-primary' onClick={ this.showBtnClick.bind(this) } style={{'margin-right': '15px'}}>Show Toasts</ButtonComponent>\r\n <ButtonComponent id='toastBtnHide' className='e-btn e-primary' onClick={ this.hideBtnClick.bind(this) }style={{'display': 'none'}}> Hide All</ButtonComponent>\r\n </div>\r\n </div>\r\n</div>\r\n<br/>\r\n </div>\r\n )\r\n }\r\n}\nReactDOM.render(<Api />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}