Custom Inline Editor

This example shows how you can implement custom editors in a data view.

<p>This example shows how you can implement custom editors in a data view. The built-in editors you see in the previous example only appear for basic data types. Sometimes you may need to handle complex data types or edit the logic.</p> <p>In this example, three editor types are created in the source code:</p> <ul> <li><strong>NameEditor</strong>: Presents fields for first, middle, and last name and then saves them to a single name field.</li> <li><strong>RadioButtonEditor</strong>: Presents a radio button control that gives the users two choices, Male or Female for the Gender field.</li> <li><strong>TextAreaEditor</strong>: Presents a large text area with Save and Cancel buttons so users can enter long text strings.</li> </ul> <p>Try double-clicking on the different columns to see the different types of editor types that were created for this example.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Editing/CustomInlineEditor/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="editing, editor, data editor, data editing" /> <meta name="description" content="This example shows how you can implement custom editors in a data view." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Custom Inline Editor | Features | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/node_modules/imask/dist/imask.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script> <script src="systemjs.config.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="grid" class="grid"></div> <script type="text/javascript"> System.import('./app.js'); </script> </body> </html>
import { data } from './data'; import { NameEditor, RadioButtonEditor, TextAreaEditor } from './editor'; export const cols = [ { id: 'id', caption: 'Id', dataField: 'id', width: 80, allowEditing: false, }, { id: 'name', caption: 'Name', dataField: 'name', width: 128, editor: NameEditor, }, { id: 'gender', caption: 'Gender', dataField: 'gender', width: 90, editor: RadioButtonEditor, }, { id: 'phone', caption: 'Phone', dataField: 'phone', width: 140, format: ({ value }) => { let i = 0; return '+#(###)###-##-##'.replace(/#/g, () => value.charAt(i++)); }, // sample of masked input editor: { type: 'text', create(input) { const mask = IMask(input, { mask: '+{7}(000)000-00-00', }); return { destroy() { mask.destroy(); }, serialize(value) { return value.replace(/[+\-()]/g, ''); }, }; }, }, }, { id: 'remark', caption: 'Remark', dataField: 'remark', width: '*', editor: TextAreaEditor, }, ]; const layout = new GC.DataViews.GridLayout({ allowEditing: true }); new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
const names = ['Alice Wang', 'Michael Zhang', 'Andrew Li', 'Tyler W. Stone', 'Daniel Qian', 'William B. Hans']; const remarks = 'This text area is used to write the evaluation for the student, about the learning achievement, general performance, and effort.'; const genders = ['male', 'female']; const phones = ['79031231200', '79137894512', '79033214599', '79039991122', '79037775500', '79033332222']; export const data = []; for (let i = 0; i < 100; i++) { data.push({ id: i, name: names[i % names.length], gender: genders[i % genders.length], phone: phones[i % phones.length], remark: remarks, }); }
export class NameEditor { constructor(options) { this.options = options; } init() { const options = this.options; const container = options.container; const rawValue = options.value; const rawNames = rawValue.split(' '); let firstName = ''; let lastName = ''; let middleName = ''; let hasMiddleName = false; switch (rawNames.length) { case 0: firstName = ''; lastName = ''; break; case 1: firstName = rawNames[0]; lastName = ''; break; case 2: firstName = rawNames[0]; lastName = rawNames[1]; break; default: firstName = rawNames[0]; lastName = rawNames[rawNames.length - 1]; middleName = rawNames.slice(1, rawNames.length - 1).join(' '); hasMiddleName = true; } this.defaultValue = rawValue; const input = ({ label, className, value }) => ` <div style="margin-bottom:6px"> <div><i>${label}:</i></div> <input type="text" class="${className}" style="width:120px" value="${value}"> </div>`; container.innerHTML = [ input({ label: 'First Name', className: 'firstname', value: firstName }), hasMiddleName ? input({ label: 'Middle Name', className: 'middlename', value: middleName }) : '', input({ label: 'Last Name', className: 'lastname', value: lastName }), ].join(''); this.firstNameInput = container.querySelector('input.firstname'); this.middleNameInput = container.querySelector('input.middlename'); this.lastNameInput = container.querySelector('input.lastname'); this.focus(); } focus() { this.firstNameInput.focus(); } serialize() { return this.middleNameInput ? `${this.firstNameInput.value} ${this.middleNameInput.value} ${this.lastNameInput.value}` : `${this.firstNameInput.value} ${this.lastNameInput.value}`; } } export class RadioButtonEditor { constructor(options) { this.options = options; } init() { const options = this.options; const value = options.value; const container = options.container; const list = ['male', 'female']; const html = list .map((val) => { const checked = val === value ? 'checked' : ''; return `<div class="flex"> <input type="radio" name="radioeditor" id="${val}" value="${val}"${checked}> <label style="font-weight:normal;padding: 4px;" for="${val}">${val}</label> </div>`; }) .join(''); container.innerHTML = html; } focus() { this.options.container.querySelector('input:checked').focus(); } serialize() { return this.options.container.querySelector('input:checked').value; } } export class TextAreaEditor { constructor(options) { this.options = options; } init() { const options = this.options; const container = options.container; container.innerHTML = `<textarea style="outline:0;width:100%;height:100%;border:0px;"></textarea> <div style="width:100%"> <button class="cancel">Cancel</button> <button class="save">Save</button> </div>`; this.textArea = container.children[0]; this.textArea.value = options.value; this.textArea.focus(); this.handleClick = this.handleClick.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); container.addEventListener('click', this.handleClick); container.addEventListener('keydown', this.handleKeyDown); } destroy() { const container = this.options.container; container.removeEventListener('click', this.handleClick); container.removeEventListener('keydown', this.handleKeyDown); } focus() { this.textArea.focus(); } serialize() { return this.textArea.value; } handleClick(event) { event.stopPropagation(); if (event.target && event.target.tagName.toLowerCase() === 'button') { if (event.target.className === 'save') { this.options.dataview.stopEditing(); } else if (event.target.className === 'cancel') { this.options.dataview.cancelEditing(); } } } handleKeyDown(event) { if (event.defaultPrevented || !document.activeElement) { return; } const key = event.key || event.keyCode; if (key === 'Enter' || key === 13) { if (document.activeElement.className === 'save') { event.stopPropagation(); this.options.dataview.stopEditing(); } else if (document.activeElement.className === 'cancel') { event.stopPropagation(); this.options.dataview.cancelEditing(); } } } }
.flex { display: flex; align-items: center; } .gc-grid .gc-inline-editing-area .gc-inline-editor-container[data-column=name] { padding: 3px; border-radius: 2px; border: 1px solid #0066ff; background-color: white; } .gc-grid .gc-inline-editing-area .gc-inline-editor-container[data-column=gender] { min-width: 90px; padding: 6px; border-radius: 2px; border: 1px solid #0066ff; } .gc-grid .gc-inline-editing-area .gc-inline-editor-container[data-column=phone] input { border-radius: 2px; border: 1px solid #0066ff; transition: none; } .gc-grid .gc-inline-editing-area .gc-inline-editor-container[data-column=phone] input:focus { border-color: #3385ff; border-width: 1px; box-shadow: none; } .gc-grid .gc-inline-editing-area .gc-inline-editor-container[data-column=remark] { padding: 3px; border-radius: 2px; border: 1px solid #0066ff; } .gc-grid .gc-inline-editing-area .gc-inline-editor-container[data-column=remark] button { float: right; width: 60px; margin-right: 0.4em; background: #f1f1f1; border: solid 1px #e0e0e0; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0VkaXRpbmcvQ3VzdG9tSW5saW5lRWRpdG9yL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0VkaXRpbmcvQ3VzdG9tSW5saW5lRWRpdG9yL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0FDREY7O0FET007RUFDRSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSx5QkFBQTtFQUNBLHVCQUFBO0FDSlI7QURPTTtFQUNFLGVBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSx5QkFBQTtBQ0xSO0FEU1E7RUFDRSxrQkFBQTtFQUNBLHlCQUFBO0VBQ0EsZ0JBQUE7QUNQVjtBRFNVO0VBQ0UscUJBQUE7RUFDQSxpQkFBQTtFQUNBLGdCQUFBO0FDUFo7QURZTTtFQUNFLFlBQUE7RUFDQSxrQkFBQTtFQUNBLHlCQUFBO0FDVlI7QURZUTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0EsbUJBQUE7RUFDQSxtQkFBQTtFQUNBLHlCQUFBO0FDVlYiLCJmaWxlIjoiRmVhdHVyZXMvRWRpdGluZy9DdXN0b21JbmxpbmVFZGl0b3IvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIkYm9yZGVyLWNvbG9yOiAjMDA2NmZmO1xuXG4uZmxleCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG5cbi5nYy1ncmlkIHtcbiAgLmdjLWlubGluZS1lZGl0aW5nLWFyZWEge1xuICAgIC5nYy1pbmxpbmUtZWRpdG9yLWNvbnRhaW5lciB7XG4gICAgICAmW2RhdGEtY29sdW1uPSduYW1lJ10ge1xuICAgICAgICBwYWRkaW5nOiAzcHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJGJvcmRlci1jb2xvcjtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgICB9XG5cbiAgICAgICZbZGF0YS1jb2x1bW49J2dlbmRlciddIHtcbiAgICAgICAgbWluLXdpZHRoOiA5MHB4O1xuICAgICAgICBwYWRkaW5nOiA2cHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJGJvcmRlci1jb2xvcjtcbiAgICAgIH1cblxuICAgICAgJltkYXRhLWNvbHVtbj0ncGhvbmUnXSB7XG4gICAgICAgIGlucHV0IHtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7XG4gICAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJGJvcmRlci1jb2xvcjtcbiAgICAgICAgICB0cmFuc2l0aW9uOiBub25lO1xuXG4gICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBib3JkZXItY29sb3I6IGxpZ2h0ZW4oJGJvcmRlci1jb2xvciwgMTAlKTtcbiAgICAgICAgICAgIGJvcmRlci13aWR0aDogMXB4O1xuICAgICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJltkYXRhLWNvbHVtbj0ncmVtYXJrJ10ge1xuICAgICAgICBwYWRkaW5nOiAzcHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJGJvcmRlci1jb2xvcjtcblxuICAgICAgICBidXR0b24ge1xuICAgICAgICAgIGZsb2F0OiByaWdodDtcbiAgICAgICAgICB3aWR0aDogNjBweDtcbiAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDAuNGVtO1xuICAgICAgICAgIGJhY2tncm91bmQ6ICNmMWYxZjE7XG4gICAgICAgICAgYm9yZGVyOiBzb2xpZCAxcHggI2UwZTBlMDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIiwiLmZsZXgge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4uZ2MtZ3JpZCAuZ2MtaW5saW5lLWVkaXRpbmctYXJlYSAuZ2MtaW5saW5lLWVkaXRvci1jb250YWluZXJbZGF0YS1jb2x1bW49bmFtZV0ge1xuICBwYWRkaW5nOiAzcHg7XG4gIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgYm9yZGVyOiAxcHggc29saWQgIzAwNjZmZjtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG59XG4uZ2MtZ3JpZCAuZ2MtaW5saW5lLWVkaXRpbmctYXJlYSAuZ2MtaW5saW5lLWVkaXRvci1jb250YWluZXJbZGF0YS1jb2x1bW49Z2VuZGVyXSB7XG4gIG1pbi13aWR0aDogOTBweDtcbiAgcGFkZGluZzogNnB4O1xuICBib3JkZXItcmFkaXVzOiAycHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkICMwMDY2ZmY7XG59XG4uZ2MtZ3JpZCAuZ2MtaW5saW5lLWVkaXRpbmctYXJlYSAuZ2MtaW5saW5lLWVkaXRvci1jb250YWluZXJbZGF0YS1jb2x1bW49cGhvbmVdIGlucHV0IHtcbiAgYm9yZGVyLXJhZGl1czogMnB4O1xuICBib3JkZXI6IDFweCBzb2xpZCAjMDA2NmZmO1xuICB0cmFuc2l0aW9uOiBub25lO1xufVxuLmdjLWdyaWQgLmdjLWlubGluZS1lZGl0aW5nLWFyZWEgLmdjLWlubGluZS1lZGl0b3ItY29udGFpbmVyW2RhdGEtY29sdW1uPXBob25lXSBpbnB1dDpmb2N1cyB7XG4gIGJvcmRlci1jb2xvcjogIzMzODVmZjtcbiAgYm9yZGVyLXdpZHRoOiAxcHg7XG4gIGJveC1zaGFkb3c6IG5vbmU7XG59XG4uZ2MtZ3JpZCAuZ2MtaW5saW5lLWVkaXRpbmctYXJlYSAuZ2MtaW5saW5lLWVkaXRvci1jb250YWluZXJbZGF0YS1jb2x1bW49cmVtYXJrXSB7XG4gIHBhZGRpbmc6IDNweDtcbiAgYm9yZGVyLXJhZGl1czogMnB4O1xuICBib3JkZXI6IDFweCBzb2xpZCAjMDA2NmZmO1xufVxuLmdjLWdyaWQgLmdjLWlubGluZS1lZGl0aW5nLWFyZWEgLmdjLWlubGluZS1lZGl0b3ItY29udGFpbmVyW2RhdGEtY29sdW1uPXJlbWFya10gYnV0dG9uIHtcbiAgZmxvYXQ6IHJpZ2h0O1xuICB3aWR0aDogNjBweDtcbiAgbWFyZ2luLXJpZ2h0OiAwLjRlbTtcbiAgYmFja2dyb3VuZDogI2YxZjFmMTtcbiAgYm9yZGVyOiBzb2xpZCAxcHggI2UwZTBlMDtcbn0iXX0= */
(function () { const IS_PROD = window.process.env.NODE_ENV === 'production'; const USE_NPM = window.process.env.USE_NPM; const USE_CDN = window.process.env.USE_CDN; const SITE_ROOT = window.process.env.SITE_ROOT; const FRAMEWORK = window.process.env.FRAMEWORK; const ext = IS_PROD ? '.min.js' : '.js'; function js(name) { return name + ext; } function npm(t) { if (!t.file) { t.file = IS_PROD ? t.prod : t.dev; } const version = USE_CDN && t.version ? '@' + t.version : ''; const path = t.pkg + version + '/' + t.file; if (USE_CDN) { return 'https://unpkg.com/' + path; } return 'npm:' + path; } function dv(t) { if (USE_CDN || USE_NPM) { t.file = 'dist/' + t.file + '.min.js'; return npm(t); } return SITE_ROOT + '/static/dataviews/' + js(t.file); } const isTypeScript = FRAMEWORK === 'angular'; const babelConfig = { es2015: true, react: true, }; const meta = { js: { babelOptions: babelConfig, }, ts: { typescriptOptions: { tsconfig: true }, }, }; const map = { // gc.dataviews packages '@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.7.5'}), '@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.7.5'}), '@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.7.5'}), '@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.7.5'}), '@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.7.5'}), '@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.7.5'}), '@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.7.5'}), '@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.7.5'}), '@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.7.5'}), '@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.7.5'}), '@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.7.5'}), '@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.7.5'}), '@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.7.5'}), '@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.7.5'}), // third-party libs react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}), 'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}), 'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.1.2'}), 'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.11'}), 'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.1.6'}), 'lodash': npm({pkg: 'lodash', file: js('lodash')}), 'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}), 'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}), 'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}), '@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}), '@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}), '@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}), '@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}), '@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}), '@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}), '@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}), '@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}), '@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}), // systemjs plugins 'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}), 'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}), 'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}), 'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}), 'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}), 'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'3.8.3'}), 'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}), }; const config = { defaultJSExtensions: true, transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel', typescriptOptions: { tsconfig: true }, meta: { '*.json': {loader: 'systemjs-plugin-json'}, '*.css': {loader: 'systemjs-plugin-css'}, '*.vue': {loader: 'systemjs-vue-browser'}, '*.js': meta.js, '*.ts': meta.ts, 'app.js': { format: 'esm', babelOptions: babelConfig, }, 'typescript': { exports: 'ts', }, '@grapecity/dataviews.common': { format: 'amd', }, '@grapecity/dataviews.core': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.grid': { format: 'amd', deps: [ '@grapecity/dataviews.common', '@grapecity/dataviews.core', ], }, '@grapecity/dataviews.cardlayout': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.masonry': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.calendar': { format: 'amd', deps: [ '@grapecity/dataviews.common', '@grapecity/dataviews.core', ], }, '@grapecity/dataviews.timeline': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.trellis': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.gantt': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.searchbox': { format: 'amd', deps: [ '@grapecity/dataviews.common', ], }, '@grapecity/dataviews.react': { format: 'amd', deps: [ 'react', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.vue': { format: 'amd', deps: [ 'vue', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.angular': { format: 'amd', deps: [ '@angular/core', '@grapecity/dataviews.common', '@grapecity/dataviews.core' ], }, '@grapecity/dataviews.csvexport': { format: 'amd', deps: [ '@grapecity/dataviews.common' ], }, }, paths: { // paths serve as alias 'npm:': SITE_ROOT + '/node_modules/', }, // map tells the System loader where to look for things map: map, // packages tells the System loader how to load when no filename and/or no extension packages: { '.': { defaultExtension: isTypeScript ? 'ts' : 'js' }, node_modules: { defaultExtension: 'js' }, } }; // fast format detection to avoid detection by source code using regexp Object.keys(map).filter(function (key) { return !config.meta[key]; }).forEach(function (key) { const path = map[key]; if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) { config.meta[key] = { format: 'amd' }; } if (path.indexOf('/cjs') >= 0) { config.meta[key] = { format: 'cjs' }; } }); System.config(config); })(this);