Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// will save as chart.png
const fileName = 'chart.png';
switch (snapshot.browser) {
case 'IE11':
return navigator.msSaveBlob(snapshot.blobOrDataUrl, fileName);
default:
const link = document.createElement('a');
link.download = fileName;
link.href = snapshot.blobOrDataUrl;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
const groupId = '';
button(label, handler, groupId);
return (
const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
const otherStyles = object('Styles', {
border: '3px solid #ff00ff',
padding: '10px',
});
const nice = boolean('Nice', true);
// NOTE: put this last because it currently breaks everything after it :D
const birthday = date('Birthday', new Date('Jan 20 2017'));
const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
const style = { backgroundColor, ...otherStyles };
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
button('Arbitrary action', action('You clicked it!'));
return (
<div style="{style}">
<p>{intro}</p>
<p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
<p>My wallet contains: ${dollars.toFixed(2)}</p>
<p>In my backpack, I have:</p>
<ul>{items.map(item => <li>{item}</li>)}</ul>
<p>{salutation}</p>
</div>
);
})
.addWithInfo(
function createButtons(grid) {
button('enable', () => grid.enable());
button('disable', () => grid.disable());
button('enableRow(1)', () => grid.enableRow(1));
button('disableRow(1)', () => grid.disableRow(1));
button('enableRow(3, true)', () => grid.enableRow(3, true));
button('disableRow(3, true)', () => grid.disableRow(3, true));
button('enableRow(4, false)', () => grid.enableRow(4, false));
button('disableRow(4, false)', () => grid.disableRow(4, false));
}
function createButtons(grid) {
button('enable', () => grid.enable());
button('disable', () => grid.disable());
button('enableRow(1)', () => grid.enableRow(1));
button('disableRow(1)', () => grid.disableRow(1));
button('enableRow(3, true)', () => grid.enableRow(3, true));
button('disableRow(3, true)', () => grid.disableRow(3, true));
button('enableRow(4, false)', () => grid.enableRow(4, false));
button('disableRow(4, false)', () => grid.disableRow(4, false));
}
() => {
const options = createDefaultOptions();
const { el, grid } = createGrid(options);
button('setSummaryColumnContent -> price(static)', () =>
grid.setSummaryColumnContent('price', 'this is static')
);
button('setSummaryColumnContent -> price(auto calculate)', () =>
grid.setSummaryColumnContent('price', {
template(valueMap: OptSummaryValueMap) {
return `auto calculate: ${valueMap.sum}`;
}
})
);
button('setSummaryColumnContent -> price(no auto calculate)', () =>
grid.setSummaryColumnContent('price', {
template(valueMap: OptSummaryValueMap) {
return `auto calculate: ${valueMap.sum}`;
},
useAutoSummary: false
})
);
button('setSummaryColumnContent -> name(static)', () =>
grid.setSummaryColumnContent('name', 'this is new static')
}
.column-test-b {
color: green;
}
.tui-grid-cell-test {
color: blue;
background-color: #ff6666;
}
.tui-grid-row-test {
color: red;
background-color: #666666;
}
`;
rootEl.appendChild(styleElement);
button("addCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
grid.addCellClassName(2, 'artist', 'tui-grid-cell-test')
);
button("removeCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
grid.removeCellClassName(2, 'artist', 'tui-grid-cell-test')
);
button("addRowClassName(1, 'tui-grid-row-test')", () =>
grid.addRowClassName(3, 'tui-grid-row-test')
);
button("removeRowClassName(1, 'tui-grid-row-test')", () =>
grid.removeRowClassName(3, 'tui-grid-row-test')
);
(window as Window & { grid: Grid }).grid = grid;
return rootEl;
},
}
.tui-grid-cell-test {
color: blue;
background-color: #ff6666;
}
.tui-grid-row-test {
color: red;
background-color: #666666;
}
`;
rootEl.appendChild(styleElement);
button("addCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
grid.addCellClassName(2, 'artist', 'tui-grid-cell-test')
);
button("removeCellClassName(2, 'name', 'tui-grid-cell-test')", () =>
grid.removeCellClassName(2, 'artist', 'tui-grid-cell-test')
);
button("addRowClassName(1, 'tui-grid-row-test')", () =>
grid.addRowClassName(3, 'tui-grid-row-test')
);
button("removeRowClassName(1, 'tui-grid-row-test')", () =>
grid.removeRowClassName(3, 'tui-grid-row-test')
);
(window as Window & { grid: Grid }).grid = grid;
return rootEl;
},
{ html: { preventForcedRender: true } }
minWidth: 150
}
});
const rootEl = document.createElement('div');
rootEl.appendChild(el);
rootEl.style.height = '400px';
button('getFocusedCell()', () => {
alert(`
${grid.getFocusedCell().columnName},
${grid.getFocusedCell().rowKey},
${grid.getFocusedCell().value}
`);
});
button('activateFocus()', () => grid.activateFocus());
button('blur()', () => grid.blur());
button(`focus(1, 'type')`, () => grid.focus(1, 'type'));
button(`focus(2, 'release')`, () => grid.focus(2, 'release'));
button(`focusAt(0, 0)`, () => grid.focusAt(0, 0));
button(`focusAt(1, 1)`, () => grid.focusAt(1, 1));
return rootEl;
},
{ html: { preventForcedRender: true } }