'use strict';
import React, { useCallback, useMemo, useRef, useState, memo } from 'react';
import { createRoot } from 'react-dom/client';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import NumberFloatingFilterComponent from './numberFloatingFilterComponent.jsx';
import CustomDateFloatingFilter from './CustomDateFloatingFilter.jsx';
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
const [rowData, setRowData] = useState();
const [columnDefs, setColumnDefs] = useState([
{ field: 'athlete', filter: false },
{
field: 'gold',
filter: 'agNumberColumnFilter',
suppressMenu: true,
floatingFilterComponent: NumberFloatingFilterComponent,
floatingFilterComponentParams: {
suppressFilterButton: true,
color: 'red',
},
},
{
field: 'date',
filter: 'agDateColumnFilter',
suppressMenu: true,
filterParams: {
filterOptions: [
'none',
{
displayKey: 'today',
displayName: 'TODAY',
numberOfInputs: 0,
predicate: (_, cellValue) => {
const todayDate = new Date();
return cellValue != null &&
cellValue === `${todayDate.getDate().toString().padStart(2, 0)}/${(todayDate.getMonth + 1).toString().padStart(2, 0)}/${todayDate.getFullYear()}`
}
},
'inRange',
],
maxNumConditions: 1, // Important, otherwise it will add more conditions on each selection
},
// has the issue:
//floatingFilterComponent: memo(CustomDateFloatingFilter),
// Doesn't have the issue:
floatingFilterComponent: CustomDateFloatingFilter,
},
]);
const defaultColDef = useMemo(() => {
return {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
floatingFilter: true,
resizable: true,
};
}, []);
const onGridReady = useCallback((params) => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => {
setRowData(data);
});
}, []);
return (
<div style={containerStyle}>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
></AgGridReact>
</div>
</div>
);
};
const root = createRoot(document.getElementById('root'));
root.render(<GridExample />);
import React, {
Fragment,
forwardRef,
useImperativeHandle,
useRef,
useState,
} from 'react';
export default forwardRef((props, ref) => {
const [currentValue, setCurrentValue] = useState(null);
const inputRef = useRef(null);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
onParentModelChanged(parentModel) {
// When the filter is empty we will receive a null value here
if (!parentModel) {
inputRef.current.value = '';
setCurrentValue(null);
} else {
inputRef.current.value = parentModel.filter + '';
setCurrentValue(parentModel.filter);
}
},
};
});
const onInputBoxChanged = (input) => {
if (input.target.value === '') {
// Remove the filter
props.parentFilterInstance((instance) => {
instance.onFloatingFilterChanged(null, null);
});
return;
}
setCurrentValue(Number(input.target.value));
props.parentFilterInstance((instance) => {
instance.onFloatingFilterChanged('greaterThan', input.target.value);
});
};
const style = {
color: props.color,
width: '30px',
};
return (
<Fragment>
>{' '}
<input
ref={inputRef}
style={style}
type="number"
min="0"
onInput={onInputBoxChanged}
/>
</Fragment>
);
});
(function (global) {
System.config({
transpiler: 'plugin-babel',
defaultExtension: 'js',
paths:
{
// paths serve as alias
"npm:": "https://cdn.jsdelivr.net/npm/",
...systemJsPaths
},
map: {
css: boilerplatePath + "css.js",
// babel transpiler
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// react
react: 'npm:react@18.2.0',
'react-dom': 'npm:react-dom@18.2.0',
'react-dom/client': 'npm:react-dom@18.2.0',
redux: 'npm:redux@4.2.1',
'react-redux': 'npm:react-redux@8.0.5',
'prop-types': 'npm:prop-types@15.8.1',
app: appLocation + 'app',
// systemJsMap comes from index.html
...systemJsMap
},
packages: {
react: {
main: './umd/react.profiling.min.js'
},
'react-dom': {
main: './umd/react-dom.profiling.min.js'
},
'react-dom/server': {
main: '../umd/react-dom-server.browser.production.min.js'
},
redux: {
main: './dist/redux.min.js',
defaultExtension: 'js'
},
'react-redux': {
main: './dist/react-redux.min.js',
defaultExtension: 'js'
},
'prop-types': {
main: './prop-types.min.js',
defaultExtension: 'js',
},
app: {
defaultExtension: 'jsx'
},
'ag-grid-react': {
main: './main.js',
defaultExtension: 'js'
},
'ag-grid-community': {
main: './dist/ag-grid-community.cjs.min.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.min.js',
defaultExtension: 'js'
},
'@ag-grid-community/react': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.jsx': {
babelOptions: {
react: true
}
},
'*.css': { loader: 'css' }
}
});
})(this);
window.addEventListener('error', e => {
console.error('ERROR', e.message, e.filename)
});
if (typeof window !== 'undefined') {
var waitSeconds = 100;
var head = document.getElementsByTagName('head')[0];
var isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
var webkitLoadCheck = function(link, callback) {
setTimeout(function() {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.href == link.href)
return callback();
}
webkitLoadCheck(link, callback);
}, 10);
};
var cssIsReloadable = function cssIsReloadable(links) {
// Css loaded on the page initially should be skipped by the first
// systemjs load, and marked for reload
var reloadable = true;
forEach(links, function(link) {
if(!link.hasAttribute('data-systemjs-css')) {
reloadable = false;
link.setAttribute('data-systemjs-css', '');
}
});
return reloadable;
}
var findExistingCSS = function findExistingCSS(url){
// Search for existing link to reload
var links = head.getElementsByTagName('link')
return filter(links, function(link){ return link.href === url; });
}
var noop = function() {};
var loadCSS = function(url, existingLinks) {
const stylesUrl = url.includes("styles.css") || url.includes("style.css");
return new Promise((outerResolve, outerReject) => {
setTimeout(() => {
new Promise(function(resolve, reject) {
var timeout = setTimeout(function() {
reject('Unable to load CSS');
}, waitSeconds * 1000);
var _callback = function(error) {
clearTimeout(timeout);
link.onload = link.onerror = noop;
setTimeout(function() {
if (error) {
reject(error);
outerReject(error)
} else {
resolve('');
outerResolve('');
}
}, 7);
};
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
link.setAttribute('data-systemjs-css', '');
if (!isWebkit) {
link.onload = function() {
_callback();
}
} else {
webkitLoadCheck(link, _callback);
}
link.onerror = function(event) {
_callback(event.error || new Error('Error loading CSS file.'));
};
if (existingLinks.length)
head.insertBefore(link, existingLinks[0]);
else
head.appendChild(link);
})
// Remove the old link regardless of loading outcome
.then(function(result){
forEach(existingLinks, function(link){link.parentElement.removeChild(link);})
return result;
}, function(err){
forEach(existingLinks, function(link){link.parentElement.removeChild(link);})
throw err;
})
}, stylesUrl ? 5 : 0)
})
};
exports.fetch = function(load) {
// dont reload styles loaded in the head
var links = findExistingCSS(load.address);
if(!cssIsReloadable(links))
return '';
return loadCSS(load.address, links);
};
}
else {
var builderPromise;
function getBuilder(loader) {
if (builderPromise)
return builderPromise;
return builderPromise = System['import']('./css-plugin-base.js', module.id)
.then(function(CSSPluginBase) {
return new CSSPluginBase(function compile(source, address) {
return {
css: source,
map: null,
moduleSource: null,
moduleFormat: null
};
});
});
}
exports.cssPlugin = true;
exports.fetch = function(load, fetch) {
if (!this.builder)
return '';
return fetch(load);
};
exports.translate = function(load, opts) {
if (!this.builder)
return '';
var loader = this;
return getBuilder(loader).then(function(builder) {
return builder.translate.call(loader, load, opts);
});
};
exports.instantiate = function(load, opts) {
if (!this.builder)
return;
var loader = this;
return getBuilder(loader).then(function(builder) {
return builder.instantiate.call(loader, load, opts);
});
};
exports.bundle = function(loads, compileOpts, outputOpts) {
var loader = this;
return getBuilder(loader).then(function(builder) {
return builder.bundle.call(loader, loads, compileOpts, outputOpts);
});
};
exports.listAssets = function(loads, opts) {
var loader = this;
return getBuilder(loader).then(function(builder) {
return builder.listAssets.call(loader, loads, opts);
});
};
}
// Because IE8?
function filter(arrayLike, func) {
var arr = []
forEach(arrayLike, function(item){
if(func(item))
arr.push(item);
});
return arr;
}
// Because IE8?
function forEach(arrayLike, func){
for (var i = 0; i < arrayLike.length; i++) {
func(arrayLike[i])
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>React example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
html, body, #root {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
</head>
<body>
<div id="root">
</div>
<svg id="loading-spinner" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(2)" class="logomark" width="64" height="48" viewBox="0 0 64 48">
<style>
.logomark .aqua {
fill: #55b4c8;
}
.logomark .orange {
fill: #ff8c00;
}
.logomark .red {
fill: #f00;
}
.logomark .grey {
fill: #b4bebe;
}
rect {
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-play-state: paused;
}
rect[class*='right'] {
animation-name: logo-mark-bounce-right;
animation-duration: 1.25s;
animation-play-state: running;
}
rect[class*='left'] {
animation-name: logo-mark-bounce-left;
animation-duration: 1.25s;
animation-play-state: running;
}
.right-2 {
animation-delay: calc(1.25s / 6);
}
.right-3 {
animation-delay: calc(1.25s / 6 * 2);
}
.left-3 {
animation-delay: calc(1.25s / 6 * 3);
}
.left-2 {
animation-delay: calc(1.25s / 6 * 4);
}
.left-1 {
animation-delay: calc(1.25s / 6 * 5);
}
@keyframes logo-mark-bounce-right {
0% {
transform: translateX(0%);
}
16.6666% {
transform: translateX(3px);
}
33.3333% {
transform: translateX(0);
}
}
@keyframes logo-mark-bounce-left {
0% {
transform: translateX(0%);
}
16.6666% {
transform: translateX(-3px);
}
33.3333% {
transform: translateX(0);
}
}
</style>
<rect class="aqua right-1" x="51" y="10" width="7" height="8">
</rect>
<path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z">
</path>
<rect class="orange right-2" x="36" y="22" width="7" height="8">
</rect>
<path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z">
</path>
<rect class="red right-3" x="24" y="34" width="7" height="8">
</rect>
<path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z">
</path>
<rect class="grey left-1" x="11" y="6" width="7" height="8">
</rect>
<path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z">
</path>
<rect class="grey left-2" x="16" y="18" width="7" height="8">
</rect>
<path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z">
</path>
<rect class="grey left-3" x="6" y="30" width="7" height="8">
</rect>
<path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z">
</path>
</svg>
<script id="loading-script">const cleanupLoading = () => {
if (document.querySelector('.ag-root-wrapper, .ag-chart-wrapper')) {
document.querySelector('#loading-spinner').remove();
document.querySelector('#loading-script').remove();
} else {
requestAnimationFrame(() => cleanupLoading());
}
};
cleanupLoading();</script>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/react": "https://cdn.jsdelivr.net/npm/@ag-grid-community/react@30.0.0/",
"@ag-grid-community/styles": "https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@30.0.0",
"ag-grid-community": "https://cdn.jsdelivr.net/npm/ag-grid-community@30.0.0",
"ag-grid-enterprise": "https://cdn.jsdelivr.net/npm/ag-grid-enterprise@30.0.0/",
"ag-grid-react": "https://cdn.jsdelivr.net/npm/ag-grid-react@30.0.0/"
};
var systemJsPaths = {
"@ag-grid-community/client-side-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/client-side-row-model@30.0.0/dist/client-side-row-model.cjs.min.js",
"@ag-grid-community/core": "https://cdn.jsdelivr.net/npm/@ag-grid-community/core@30.0.0/dist/core.cjs.min.js",
"@ag-grid-community/csv-export": "https://cdn.jsdelivr.net/npm/@ag-grid-community/csv-export@30.0.0/dist/csv-export.cjs.min.js",
"@ag-grid-community/infinite-row-model": "https://cdn.jsdelivr.net/npm/@ag-grid-community/infinite-row-model@30.0.0/dist/infinite-row-model.cjs.min.js"
};
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.19.47/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('./index.jsx').catch(function(err) { console.error(err); });</script>
</body>
</html>
import React, {
Fragment,
forwardRef,
useImperativeHandle,
useRef,
useState,
} from 'react';
export default forwardRef((props, ref) => {
const [currentValue, setCurrentValue] = useState(null);
const inputRef = useRef(null);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
onParentModelChanged(parentModel) {
// When the filter is empty we will receive a null value here
if (!parentModel) {
//inputRef.current.value = '';
setCurrentValue(null);
} else {
//inputRef.current.value = parentModel.filter + '';
setCurrentValue(parentModel.type);
}
},
};
});
/*
const onInputBoxChanged = (input) => {
if (input.target.value === '') {
// Remove the filter
props.parentFilterInstance((instance) => {
instance.onFloatingFilterChanged(null, null);
});
return;
}
setCurrentValue(Number(input.target.value));
props.parentFilterInstance((instance) => {
instance.onFloatingFilterChanged('greaterThan', input.target.value);
});
};
*/
const style = {
color: props.color,
width: '30px',
};
const todayDate = new Date();
return (
<Fragment>
{currentValue}
{currentValue === 'today' &&
`${todayDate.getDate().toString().padStart(2, 0)}/${(todayDate.getMonth() + 1).toString().padStart(2, 0)}/${todayDate.getFullYear()}`}
</Fragment>
);
});
import dayjs, { Dayjs } from 'dayjs';
import { Localization } from 'utils/i18n/i18n';
export type CustomDateFilterOption =
| 'equals'
| 'inRange'
| 'today'
| 'tomorrow'
| 'yesterday'
| 'after'
| 'after!lastMeeting'
| 'before'
| 'before!nextMeeting'
| `next${number}${OffsetType}`
| `last${number}${OffsetType}`;
enum KnownSupportingInformation {
lastMeeting = 'lastMeeting',
nextMeeting = 'nextMeeting',
}
type OffsetType = 'days' | 'weeks' | 'months' | 'years';
type RangeLimitType =
| 'equal'
| 'beforeOrEqual'
| 'afterOrEqual'
| 'betweenThenAndNow';
function compareFilterRange(
cellValue: Dayjs,
limitDate: Dayjs,
limitType: RangeLimitType,
): boolean {
const VALUE = cellValue.format('YYYY-MM-DD');
const LIMIT = limitDate.format('YYYY-MM-DD');
const TODAY = dayjs().format('YYYY-MM-DD');
switch (limitType) {
case 'equal':
return VALUE === LIMIT;
case 'beforeOrEqual':
return VALUE >= LIMIT;
case 'afterOrEqual':
return VALUE <= LIMIT;
case 'betweenThenAndNow':
if (TODAY <= LIMIT) {
return VALUE >= TODAY && VALUE <= LIMIT;
}
return VALUE <= TODAY && VALUE >= LIMIT;
}
}
function getDateRange(limitDate: Dayjs, limitType: RangeLimitType) {
const LIMIT = limitDate.format('YYYY-MM-DD');
const TODAY = dayjs().format('YYYY-MM-DD');
switch (limitType) {
case 'equal':
return { dateFrom: LIMIT, dateTo: LIMIT };
case 'beforeOrEqual':
return {
dateFrom: limitDate.add(-10, 'years').format('YYYY-MM-DD'),
dateTo: LIMIT,
};
case 'afterOrEqual':
return {
dateFrom: LIMIT,
dateTo: limitDate.add(10, 'years').format('YYYY-MM-DD'),
};
case 'betweenThenAndNow':
if (TODAY <= LIMIT) {
return { dateFrom: TODAY, dateTo: LIMIT };
}
return { dateFrom: LIMIT, dateTo: TODAY };
}
}
export type CustomFilterOptionDescription = {
displayKey: CustomDateFilterOption;
displayName: string;
numberOfInputs: number;
predicate: (
filterValues: Date[],
cellValue: Date | undefined | null,
) => boolean;
descriptor: {
type: CustomDateFilterOption;
label: string;
dateFrom?: string;
dateTo?: string;
};
};
export const getCustomDateFilterOption: Record<
string,
(
formatMessage: Localization['formatMessage'],
limitType?: RangeLimitType,
offset?: number,
offsetType?: OffsetType,
knownDate?: Date,
) => CustomFilterOptionDescription
> = {
today: (formatMessage, limitType, _offset, _offsetType) => ({
displayKey: 'today',
displayName: formatMessage('filter.date.today'),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(dayjs(cellValue), dayjs(), limitType ?? 'equal'),
descriptor: {
type: 'today',
label: formatMessage('filter.date.today'),
...getDateRange(dayjs(), limitType ?? 'equal'),
},
}),
tomorrow: (formatMessage, limitType, _offset, _offsetType) => ({
displayKey: 'tomorrow',
displayName: formatMessage('filter.date.tomorrow'),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(
dayjs(cellValue),
dayjs().add(1, 'days'),
limitType ?? 'equal',
),
descriptor: {
type: 'tomorrow',
label: formatMessage('filter.date.tomorrow'),
...getDateRange(dayjs().add(1, 'days'), limitType ?? 'equal'),
},
}),
yesterday: (formatMessage, limitType, _offset, _offsetType) => ({
displayKey: 'yesterday',
displayName: formatMessage('filter.date.yesterday'),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(
dayjs(cellValue),
dayjs().add(-1, 'days'),
limitType ?? 'equal',
),
descriptor: {
type: 'yesterday',
label: formatMessage('filter.date.yesterday'),
...getDateRange(dayjs().add(-1, 'days'), limitType ?? 'equal'),
},
}),
next: (formatMessage, limitType, offset = 0, offsetType = 'days') => ({
displayKey: `next${offset}${offsetType}`,
displayName: formatMessage(`filter.dates.future.${offsetType}`, {
count: offset,
}),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(
dayjs(cellValue),
dayjs().add(offset, offsetType),
limitType ?? 'betweenThenAndNow',
),
descriptor: {
type: `next${offset}${offsetType}`,
label: formatMessage(`filter.dates.future.${offsetType}`, {
count: offset,
}),
...getDateRange(
dayjs().add(offset, offsetType),
limitType ?? 'betweenThenAndNow',
),
},
}),
last: (formatMessage, limitType, offset = 0, offsetType = 'days') => ({
displayKey: `last${offset}${offsetType}`,
displayName: formatMessage(`filter.dates.past.${offsetType}`, {
count: offset,
}),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(
dayjs(cellValue),
dayjs().add(-offset, offsetType),
limitType ?? 'betweenThenAndNow',
),
descriptor: {
type: `last${offset}${offsetType}`,
label: formatMessage(`filter.dates.past.${offsetType}`, {
count: offset,
}),
...getDateRange(
dayjs().add(-offset, offsetType),
limitType ?? 'betweenThenAndNow',
),
},
}),
beforeNextMeeting: (
formatMessage,
limitType,
_offset,
_offsetType,
knownDate,
) => ({
displayKey: `before!nextMeeting`,
displayName: formatMessage(`filter.beforeNextMeeting`),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(
dayjs(cellValue),
dayjs(knownDate),
limitType ?? 'betweenThenAndNow',
),
descriptor: {
type: `before!nextMeeting`,
label: formatMessage(`filter.beforeNextMeeting`),
...getDateRange(dayjs(knownDate), limitType ?? 'betweenThenAndNow'),
},
}),
afterLastMeeting: (
formatMessage,
limitType,
_offset,
_offsetType,
knownDate,
) => ({
displayKey: `after!lastMeeting`,
displayName: formatMessage(`filter.afterLastMeeting`),
numberOfInputs: 0,
predicate: (_, cellValue) =>
cellValue != null &&
compareFilterRange(
dayjs(cellValue),
dayjs(knownDate),
limitType ?? 'betweenThenAndNow',
),
descriptor: {
type: `after!lastMeeting`,
label: formatMessage(`filter.afterLastMeeting`),
...getDateRange(dayjs(knownDate), limitType ?? 'betweenThenAndNow'),
},
}),
};