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 pathpositions-plnkr.json
More file actions
1 lines (1 loc) · 31.3 KB
/
positions-plnkr.json
File metadata and controls
1 lines (1 loc) · 31.3 KB
1
{"index.css":".toast-pos-section #toast_pos_property {\r\n height: 500px;\r\n border: none;\r\n margin: auto;\r\n }\r\n\r\n #toast_pos_property td {\r\n width: 50%;\r\n }\r\n\r\n .e-toast-icon.e-laura.e-icons {\r\n border-radius: 50%;\r\n background-image: url('http://ej2.syncfusion.com/react/demos/src/toast/resource/laura.png');\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n height: 50px !important;\r\n width: 100px !important;\r\n background-size: 50px 50px;\r\n margin: 0;\r\n }\r\n\r\n\r\n @media (min-width: 740px) {\r\n #toast_pos_property {\r\n width: 450px;\r\n }\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 · Positions · 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\">Positions</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 the different positioning of the <code>Toast</code> based on the target given.</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>Based on the use case toast can take the body element or any specific element as target. In this sample, with help of custom inputs toast can be positioned based on the target.</p>\n <ul>\n <li>Toast can be positioned in the 8 pre-defined places.</li>\n <li>Custom option will enable to give X and Y values to align the toast based on the given inputs.</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 { isNullOrUndefined } from '@syncfusion/ej2-base';\r\nimport { ButtonComponent, RadioButtonComponent, CheckBoxComponent, ChangeEventArgs as CheckBoxChange } from '@syncfusion/ej2-react-buttons';\r\nimport { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';\r\nimport { ToastComponent, ToastCloseArgs } from '@syncfusion/ej2-react-notifications';\r\n\r\n\r\nexport class Positions extends SampleBase<{}, {}> {\r\n \r\n private toastObj: ToastComponent;\r\n private dropDownObj: DropDownListComponent;\r\n private dropRadioObj: RadioButtonComponent;\r\n private customRadioObj: RadioButtonComponent;\r\n private radio1: RadioButtonComponent;\r\n private radio2: RadioButtonComponent;\r\n private position: Object = { X: 'Right', Y: 'Bottom' };\r\n private target: HTMLElement = document.body;\r\n private initialWid: string = '';\r\n private customFlag: boolean = false;\r\n private dropData: { [key: string]: Object }[] = [\r\n { Id: 'topleft', Text: 'Top Left' },\r\n { Id: 'topright', Text: 'Top Right' },\r\n { Id: 'topcenter', Text: 'Top Center' },\r\n { Id: 'topfullwidth', Text: 'Top Full Width' },\r\n { Id: 'bottomleft', Text: 'Bottom Left' },\r\n { Id: 'bottomright', Text: 'Bottom Right' },\r\n { Id: 'bottomcenter', Text: 'Bottom Center' },\r\n { Id: 'bottomfullwidth', Text: 'Bottom Full Width' },\r\n ];\r\n private dropFields: Object = { text: 'Text', value: 'Id' };\r\n private value: string = 'bottomright';\r\n public checkboxChange(e: ChangeEventArgs): void {\r\n if (this.radio1.checked) {\r\n this.toastObj.hide('All');\r\n this.toastObj.target = '#toast_pos_target';\r\n this.toastShow(1000);\r\n }\r\n }\r\n public toastShow(timeOutDelay: number): void {\r\n setTimeout(function(){\r\n this.toastObj.show();\r\n }.bind(this),timeOutDelay);\r\n }\r\n public checkboxChange1(e: CheckBoxChange): void {\r\n if (this.radio2.checked) {\r\n this.toastObj.hide('All');\r\n this.toastObj.target = document.body;\r\n this.toastShow(1000);\r\n }\r\n }\r\n public checkboxChange2(e: CheckBoxChange): void { \r\n if (this.dropRadioObj.checked) {\r\n this.toastObj.hide('All');\r\n document.getElementById('dropdown').style.display = 'table-cell';\r\n document.getElementById('customChoose').style.display = 'none';\r\n this.setToastPosValue(this.dropDownObj.value.toString()); this.customFlag = false; this.toastShow(1000);\r\n }\r\n }\r\n public checkboxChange3(e: CheckBoxChange): void {\r\n if (this.customRadioObj.checked) {\r\n this.toastObj.hide('All');\r\n document.getElementById('dropdown').style.display = 'none';\r\n document.getElementById('customChoose').style.display = 'table-cell';\r\n this.setcustomPosValue(); this.customFlag = true; this.toastShow(1000);\r\n }\r\n }\r\n public valueChange(e: ChangeEventArgs): void {\r\n this.toastObj.hide('All'); this.setToastPosValue(e.value.toString()); this.toastShow(1000);\r\n }\r\n public setcustomPosValue(): void {\r\n this.toastObj.width = this.initialWid;\r\n this.toastObj.position.X = parseInt((document.getElementById('xPos') as HTMLInputElement).value, 10);\r\n this.toastObj.position.Y = parseInt((document.getElementById('yPos') as HTMLInputElement).value, 10);\r\n }\r\n public showBtnClick(): void {\r\n if (this.customFlag) {\r\n this.setcustomPosValue();\r\n }\r\n this.toastObj.show();\r\n }\r\n public setToastPosValue(value: string): void {\r\n this.toastObj.width = this.initialWid;\r\n switch (value) {\r\n case 'topleft':\r\n this.toastObj.position.X = 'Left'; this.toastObj.position.Y = 'Top'; break;\r\n case 'topright':\r\n this.toastObj.position.X = 'Right'; this.toastObj.position.Y = 'Top'; break;\r\n case 'topcenter':\r\n this.toastObj.position.X = 'Center'; this.toastObj.position.Y = 'Top'; break;\r\n case 'topfullwidth':\r\n this.toastObj.width = '100%'; this.toastObj.position.X = 'Center'; this.toastObj.position.Y = 'Top'; break;\r\n case 'bottomleft':\r\n this.toastObj.position.X = 'Left'; this.toastObj.position.Y = 'Bottom'; break;\r\n case 'bottomright':\r\n this.toastObj.position.X = 'Right'; this.toastObj.position.Y = 'Bottom'; break;\r\n case 'bottomcenter':\r\n this.toastObj.position.X = 'Center'; this.toastObj.position.Y = 'Bottom'; break;\r\n case 'bottomfullwidth':\r\n this.toastObj.width = '100%'; this.toastObj.position.X = 'Center'; this.toastObj.position.Y = 'Bottom'; break;\r\n }\r\n }\r\n public hideBtnClick(): void {\r\n this.toastObj.hide('All');\r\n }\r\n public created(): void {\r\n setTimeout(function(){\r\n this.toastShow(200);\r\n this.initialWid = this.toastObj.width.toString();\r\n }.bind(this),200);\r\n }\r\n public onclose(e): void {\r\n let btnEleHide: HTMLElement = document.getElementById('hideTosat');\r\n if (e.toastContainer.childElementCount === 0 ) {\r\n btnEleHide.style.display = 'none';\r\n }\r\n \r\n }\r\n\r\n public onbeforeOpen(): void {\r\n let btnEleHide: HTMLElement = document.getElementById('hideTosat');\r\n btnEleHide.style.display = 'inline-block';\r\n }\r\n\r\n render() {\r\n document.addEventListener('click', function(e: Event) : void {\r\n let btnEle: HTMLElement = document.getElementById('show_Toast');\r\n if (!isNullOrUndefined(this.toastObj) && e.target !== btnEle && this.toastObj.target === document.body) {\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-pos-section'>\r\n <div className=\"e-sample-resize-container\" id=\"toast_pos_target\">\r\n <ToastComponent ref={(toast) => { this.toastObj = toast }} id='toast_pos' title='Matt sent you a friend request' content='You have a friend request yet to accept.' icon='e-laura' position={this.position} target={this.target} created={this.created.bind(this)} close={this.onclose.bind(this)} beforeOpen={this.onbeforeOpen.bind(this)}></ToastComponent>\r\n <div id=\"toast_pos_property\">\r\n <table style={{'width': '100%'}}>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div style={{'padding':'25px 0 0 0'}}>\r\n <RadioButtonComponent ref={(scope) => { this.dropRadioObj = scope }} id='dropdownRadio' checked={true} label='Position' name='toastPos' value=\"Position\" change={this.checkboxChange2.bind(this)}></RadioButtonComponent>\r\n </div>\r\n </td>\r\n <td>\r\n <div style={{'padding':'25px 0 0 0'}}>\r\n <RadioButtonComponent ref={(scope) => { this.customRadioObj = scope }} id='customRedio' label='Custom' name='toastPos' value=\"Custom\" change={this.checkboxChange3.bind(this)}></RadioButtonComponent>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div id=\"dropdownChoose\">\r\n <div id=\"dropdown\" style={{'padding-top':'25px'}}>\r\n <DropDownListComponent ref={(dropdownlist) => { this.dropDownObj = dropdownlist }} id=\"position\" dataSource={this.dropData} fields={this.dropFields} placeholder=\"Select a position\" change={this.valueChange.bind(this)} value={this.value} index={5} popupHeight='200px'/>\r\n </div>\r\n </div>\r\n <table style={{'width': '100%'}}>\r\n <tbody>\r\n <tr>\r\n <td id=\"customChoose\" style={{'display': 'none'}}>\r\n <form id=\"formId\" className=\"form-horizontal\">\r\n <div className=\"e-row\">\r\n <div className=\"e-float-input\">\r\n <input className=\"e-input\" id=\"xPos\" name=\"Digits\" defaultValue=\"50\" required/>\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\">X Position</label>\r\n </div>\r\n </div>\r\n <div className=\"e-row\">\r\n <div className=\"e-float-input\">\r\n <input className=\"e-input\" id=\"yPos\" name=\"Digits\" defaultValue=\"50\" required/>\r\n <span className=\"e-float-line\"></span>\r\n <label className=\"e-float-text\">Y Position</label>\r\n </div>\r\n </div>\r\n </form>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div style={{'padding':'25px 0 0 0'}}>\r\n <RadioButtonComponent ref={(scope) => { this.radio1 = scope }} id='radio1' label='Target' name='toast' value='Target' change={this.checkboxChange.bind(this)}></RadioButtonComponent>\r\n </div>\r\n </td>\r\n <td>\r\n <div style={{'padding':'25px 0 0 0'}}>\r\n <RadioButtonComponent ref={(scope) => { this.radio2 = scope }} id='radio2' checked={true} label='Global' name='toast' value='Global' change={this.checkboxChange1.bind(this)}></RadioButtonComponent>\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <div id=\"toast_btn\" style={{'padding-top': '25px'}}>\r\n <ButtonComponent className=\"e-btn e-control\" id='show_Toast' style={{'margin-right': '15px'}} onClick={ this.showBtnClick.bind(this) }>Show Toasts</ButtonComponent>\r\n <ButtonComponent className=\"e-btn e-control\" id='hideTosat' onClick={ this.hideBtnClick.bind(this) }>Hide All</ButtonComponent>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\nReactDOM.render(<Positions />, 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}"}