@azrico/reactgrid 1.2.19 → 1.2.20

package/dist/src/themes/base_styles.css

@@ -0,0 +1,30 @@
+.azgrid-container {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-borderbox {
+	box-sizing: border-box;
+}
+.azgrid-filler {
+	height: 100%;
+	width: 100%;
+}
+.azgrid-nooverflow {
+	overflow: hidden;
+}
+.azgrid-testborder {
+	border: 3px solid red;
+}
+.azgrid-pad50px {
+	padding: 50px;
+}
+.azgrid-nopad {
+	padding: 0;
+}
+.azgrid-nomargin {
+	margin: 0;
+}
+.azgrid-delayedresize {
+	transition-property: 'width,height';
+	transition-delay: 200ms;
+}

package/dist/src/themes/grid.css

@@ -0,0 +1,20 @@
+/* .InovuaReactDataGrid {
+	--grid-bg: '#fff';
+}
+.InovuaReactDataGrid {
+	background: var(--grid-bg) !important;
+}
+.InovuaReactDataGrid__header {
+	background: var(--grid-bg) !important;
+}
+.InovuaReactDataGrid__row {
+	background: var(--grid-bg) !important;
+}
+.InovuaReactDataGrid__cell {
+	background: var(--grid-bg) !important;
+} */
+.InovuaReactDataGrid__cell .InovuaReactDataGrid__cell__content {
+	height: 100%;
+	display: flex;
+	align-items: center;
+}

package/dist/src/views/DataGrid.js

@@ -1,227 +1,274 @@
-import '@inovua/reactdatagrid-enterprise/index.css';
-import '@inovua/reactdatagrid-enterprise/theme/default-dark.css';
-import '@inovua/reactdatagrid-enterprise/theme/amber-dark.css';
-import '../themes/base_styles.css';
-import '../themes/grid.css';
-import { ApplyColumnData, ApplyDataSource, _get_default_key, get_row_id, } from '../func/func_grid';
-import { ContextMenu } from '@azrico/controls';
-import React from 'react';
-import { func_selection } from '../func/func_child';
-import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
-import clsx from 'clsx';
-import { useComponentSize } from 'react-use-size';
-/* -------------------------------------------------------------------------- */
-const defaultOptions = {
-    //filterTypes: defaultfilterTypes,
-    remoteFilter: false,
-    remoteSort: false,
-    editStartEvent: 'click',
-    rowReorderColumn: false,
-    resizable: true,
-    columnUserSelect: true,
-    rowIndexColumn: true,
-    rowHeight: 35,
-};
-const forcedOptions = {
-    idProperty: '__table_id',
-    nodesProperty: '__children',
-};
-const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
-/* -------------------------------------------------------------------------- */
-export function AzGrid(props) {
-    const gridRefBackup = React.useRef(null);
-    const gridRef = props.gridRef || gridRefBackup;
-    /* -------------------------------------------------------------------------- */
-    /*                                   Columns                                  */
-    /* -------------------------------------------------------------------------- */
-    const cached_columns = React.useMemo(() => {
-        return ApplyColumnData(props);
-    }, [
-        props.columns,
-        props.leftColumns,
-        props.rightColumns,
-        props.editableColumns,
-        props.columnExtensions,
-        props.customColumns,
-    ]);
-    /* -------------------------------------------------------------------------- */
-    /*                                 Row changes                                */
-    /* -------------------------------------------------------------------------- */
-    const cached_data = React.useRef();
-    const last_cache_info = React.useRef();
-    const dataSource = React.useCallback(async (dt) => {
-        return await ApplyDataSource(props.dataSource, {
-            skip: dt.skip,
-            limit: dt.limit,
-            cached_data: cached_data,
-            last_cache_info: last_cache_info,
-        });
-    }, [props.dataSource]);
-    const base_gridOptions = React.useMemo(() => {
-        const firstcolumn = cached_columns[0];
-        const licenseKey = props.licenseKey || _get_default_key();
-        const events = {
-            onSkipChange: props.onSkipChange,
-            onLimitChange: props.onLimitChange,
-            onEditComplete: props.onEditComplete,
-        };
-        const extra_ops = {
-            onSelectionChange: props.onSelectionChange,
-            onCellSelectionChange: props.onCellSelectionChange,
-            licenseKey: licenseKey,
-            editable: props.editable,
-            treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
-            renderRowDetails: props.RowDetail,
-            theme: props.dark ? 'amber-dark' : 'default-light',
-        };
-        return { ...defaultOptions, ...events, ...extra_ops };
-    }, [
-        cached_columns,
-        props.allowChildRows,
-        props.editable,
-        props.RowDetail,
-        props.onEditComplete,
-    ]);
-    const static_gridOptions = React.useMemo(() => {
-        return { ...base_gridOptions, ...props.gridOptions, ...forcedOptions };
-    }, [props.gridOptions, base_gridOptions, forcedOptions]);
-    const dynamic_gridOptions = React.useMemo(() => {
-        const res = {};
-        dynamic_option_names.map((r) => {
-            res[r] = props[r];
-        });
-        return res;
-    }, dynamic_option_names.map((r) => props[r]));
-    return (React.createElement(DataGridEventsWrapper, { ...props, gridRef: gridRef, static_gridOptions: static_gridOptions, dynamic_gridOptions: dynamic_gridOptions, columns: cached_columns, dataSource: dataSource, highlightedRow: props.highlightedRow }));
-}
-/* -------------------------------------------------------------------------- */
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AzGrid = AzGrid;
+exports.default = void 0;
+require("@inovua/reactdatagrid-enterprise/index.css");
+require("@inovua/reactdatagrid-enterprise/theme/default-dark.css");
+require("@inovua/reactdatagrid-enterprise/theme/amber-dark.css");
+require("../themes/base_styles.css");
+require("../themes/grid.css");
+var _func_grid = require("../func/func_grid");
+var _controls = require("@azrico/controls");
+var _react = _interopRequireDefault(require("react"));
+var _func_child = require("../func/func_child");
+var _reactdatagridEnterprise = _interopRequireDefault(require("@inovua/reactdatagrid-enterprise"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactUseSize = require("react-use-size");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* -------------------------------------------------------------------------- */
+const defaultOptions = {
+  //filterTypes: defaultfilterTypes,
+  remoteFilter: false,
+  remoteSort: false,
+  editStartEvent: 'click',
+  rowReorderColumn: false,
+  resizable: true,
+  columnUserSelect: true,
+  rowIndexColumn: true,
+  rowHeight: 35
+};
+const forcedOptions = {
+  idProperty: '__table_id',
+  nodesProperty: '__children'
+};
+const dynamic_option_names = ['selected', 'cellSelection', 'loading', 'limit', 'skip'];
+/* -------------------------------------------------------------------------- */
+function AzGrid(props) {
+  const gridRefBackup = _react.default.useRef(null);
+  const gridRef = props.gridRef || gridRefBackup;
+  /* -------------------------------------------------------------------------- */
+  /*                                   Columns                                  */
+  /* -------------------------------------------------------------------------- */
+  const cached_columns = _react.default.useMemo(() => {
+    return (0, _func_grid.ApplyColumnData)(props);
+  }, [props.columns, props.leftColumns, props.rightColumns, props.editableColumns, props.columnExtensions, props.customColumns]);
+  /* -------------------------------------------------------------------------- */
+  /*                                 Row changes                                */
+  /* -------------------------------------------------------------------------- */
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
+  const dataSource = _react.default.useCallback(async dt => {
+    return await (0, _func_grid.ApplyDataSource)(props.dataSource, {
+      skip: dt.skip,
+      limit: dt.limit,
+      cached_data: cached_data,
+      last_cache_info: last_cache_info
+    });
+  }, [props.dataSource]);
+  const base_gridOptions = _react.default.useMemo(() => {
+    const firstcolumn = cached_columns[0];
+    const licenseKey = props.licenseKey || (0, _func_grid.get_default_key)();
+    const events = {
+      onSkipChange: props.onSkipChange,
+      onLimitChange: props.onLimitChange,
+      onEditComplete: props.onEditComplete
+    };
+    const extra_ops = {
+      onSelectionChange: props.onSelectionChange,
+      onCellSelectionChange: props.onCellSelectionChange,
+      licenseKey: licenseKey,
+      editable: props.editable,
+      treeColumn: props.allowChildRows ? firstcolumn.name : undefined,
+      renderRowDetails: props.RowDetail,
+      theme: props.dark ? 'amber-dark' : 'default-light'
+    };
+    return {
+      ...defaultOptions,
+      ...events,
+      ...extra_ops
+    };
+  }, [cached_columns, props.allowChildRows, props.editable, props.RowDetail, props.onEditComplete]);
+  const static_gridOptions = _react.default.useMemo(() => {
+    return {
+      ...base_gridOptions,
+      ...props.gridOptions,
+      ...forcedOptions
+    };
+  }, [props.gridOptions, base_gridOptions, forcedOptions]);
+  const dynamic_gridOptions = _react.default.useMemo(() => {
+    const res = {};
+    dynamic_option_names.map(r => {
+      res[r] = props[r];
+    });
+    return res;
+  }, dynamic_option_names.map(r => props[r]));
+  return _react.default.createElement(DataGridEventsWrapper, {
+    ...props,
+    gridRef: gridRef,
+    static_gridOptions: static_gridOptions,
+    dynamic_gridOptions: dynamic_gridOptions,
+    columns: cached_columns,
+    dataSource: dataSource,
+    highlightedRow: props.highlightedRow
+  });
+}
+/* -------------------------------------------------------------------------- */
 /**
  * Wrapper for menu events
  * @param props
  * @returns
- */
-function DataGridEventsWrapper(props) {
-    /* -------------------------------------------------------------------------- */
-    const click_data = React.useRef(null);
-    const [menuAnchorEl, set_menuAnchorEl] = React.useState(null);
-    const [menuRow, set_menuRow] = React.useState(null);
-    /* --------------------------------- events --------------------------------- */
-    const onRowContextMenu = React.useCallback((rowProps, event) => {
-        if (func_selection.has_selection())
-            return;
-        update_menuRow(rowProps.data);
-        update_menuAnchorEl(func_selection.getVirtualElement(event.clientX, event.clientY));
-        event.preventDefault();
-    }, []);
-    const onRowClick = React.useCallback((rowProps, event) => {
-        const nowDate = Date.now();
-        const lastclick = click_data.current[get_row_id(rowProps)];
-        if (lastclick) {
-            const diffTime = Math.abs(nowDate - lastclick);
-            if (diffTime < 400) {
-                click_data.current[get_row_id(rowProps)] = null;
-                return (props.onRowDoubleClick &&
-                    props.onRowDoubleClick(rowProps.rowIndex, rowProps.data));
-            }
-        }
-        click_data.current[get_row_id(rowProps)] = nowDate;
-        return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
-    }, [props.onRowClick, props.onRowDoubleClick]);
-    React.useEffect(() => {
-        click_data.current = {};
-    }, [props.dataSource]);
-    /* ------------------------------- ContextMenu ------------------------------ */
-    const update_menuAnchorEl = React.useCallback((el) => {
-        if (el) {
-            set_menuAnchorEl(el);
-        }
-        else
-            set_menuAnchorEl(null);
-    }, []);
-    const update_menuRow = React.useCallback((r) => {
-        if (r) {
-            set_menuRow(r);
-        }
-        else
-            set_menuRow(null);
-    }, []);
-    /**
-     * Merge click events into grid options
-     */
-    const static_gridOptions = React.useMemo(() => {
-        const events = {
-            onRowClick: onRowClick,
-            onRowContextMenu: onRowContextMenu,
-        };
-        return { ...props.static_gridOptions, ...events };
-    }, [props.static_gridOptions, onRowClick]);
-    const contextMenu = (React.createElement(ContextMenu, { menuAnchorEl: menuAnchorEl, set_menuAnchorEl: update_menuAnchorEl, menuRow: menuRow, items: props.contextMenuItems }));
-    if (props.details_dataSource) {
-        return (React.createElement(DataGridDetailsWrapper, { ...props, static_gridOptions: static_gridOptions },
-            contextMenu,
-            props.children));
-    }
-    else {
-        return (React.createElement(DataGridSizeWrapper, { ...props, static_gridOptions: static_gridOptions },
-            contextMenu,
-            props.children));
-    }
-}
-function DataGridDetailsWrapper(props) {
-    const cached_details_columns = React.useMemo(() => {
-        return ApplyColumnData(props.details_columns);
-    }, [props.details_columns]);
-    const cached_data = React.useRef();
-    const last_cache_info = React.useRef();
-    const dataSource = React.useCallback(async (dt) => {
-        const res = await ApplyDataSource(props.details_dataSource, {
-            skip: dt.skip,
-            limit: dt.limit,
-            cached_data: cached_data,
-            last_cache_info: last_cache_info,
-        });
-        console.log('ds', res);
-        return res;
-    }, [props.dataSource]);
-    const renderDetailsGrid = ({ data }) => {
-        return (React.createElement(ReactDataGrid, { defaultFilterValue: props.details_filter, dataSource: dataSource, columns: cached_details_columns }));
-    };
-    /**
-     * Merge details into grid
-     */
-    const static_gridOptions = React.useMemo(() => {
-        const finalresult = props.static_gridOptions || {};
-        finalresult['renderDetailsGrid'] = renderDetailsGrid;
-        return finalresult;
-    }, [props.static_gridOptions]);
-    return (React.createElement(DataGridSizeWrapper, { ...props, static_gridOptions: static_gridOptions }, props.children));
-}
-function DataGridSizeWrapper(props) {
-    if (props.delayedSize) {
-        return React.createElement(DataGridDelayedSize, { ...props });
-    }
-    else {
-        return React.createElement(DataGridFlexSize, { ...props });
-    }
-}
-/* -------------------------------------------------------------------------- */
-function DataGridDelayedSize(props) {
-    const { ref, height, width } = useComponentSize();
-    return (React.createElement("div", { ref: ref, className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
-        React.createElement(ReactDataGrid, { ...props.static_gridOptions, ...props.dynamic_gridOptions, handle: (ref) => (props.gridRef.current = ref ? ref.current : null), className: 'azgrid-delayedresize', style: {
-                height: height,
-                width: width,
-            }, columns: props.columns, dataSource: props.dataSource }),
-        props.children));
-}
-function DataGridFlexSize(props) {
-    return (React.createElement("div", { className: clsx(props.className, 'azgrid-nooverflow', 'azgrid-filler') },
-        React.createElement(ReactDataGrid, { ...props.static_gridOptions, ...props.dynamic_gridOptions, handle: (ref) => (props.gridRef.current = ref ? ref.current : null), className: 'azgrid-filler', columns: props.columns, dataSource: props.dataSource }),
-        props.children));
-}
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-export default AzGrid;
+ */
+function DataGridEventsWrapper(props) {
+  /* -------------------------------------------------------------------------- */
+  const click_data = _react.default.useRef(null);
+  const [menuAnchorEl, set_menuAnchorEl] = _react.default.useState(null);
+  const [menuRow, set_menuRow] = _react.default.useState(null);
+  /* --------------------------------- events --------------------------------- */
+  const onRowContextMenu = _react.default.useCallback((rowProps, event) => {
+    if (_func_child.func_selection.has_selection()) return;
+    update_menuRow(rowProps.data);
+    update_menuAnchorEl(_func_child.func_selection.getVirtualElement(event.clientX, event.clientY));
+    event.preventDefault();
+  }, []);
+  const onRowClick = _react.default.useCallback((rowProps, event) => {
+    const nowDate = Date.now();
+    const lastclick = click_data.current[(0, _func_grid.get_row_id)(rowProps)];
+    if (lastclick) {
+      const diffTime = Math.abs(nowDate - lastclick);
+      if (diffTime < 400) {
+        click_data.current[(0, _func_grid.get_row_id)(rowProps)] = null;
+        return props.onRowDoubleClick && props.onRowDoubleClick(rowProps.rowIndex, rowProps.data);
+      }
+    }
+    click_data.current[(0, _func_grid.get_row_id)(rowProps)] = nowDate;
+    return props.onRowClick && props.onRowClick(rowProps.rowIndex, rowProps.data);
+  }, [props.onRowClick, props.onRowDoubleClick]);
+  _react.default.useEffect(() => {
+    click_data.current = {};
+  }, [props.dataSource]);
+  /* ------------------------------- ContextMenu ------------------------------ */
+  const update_menuAnchorEl = _react.default.useCallback(el => {
+    if (el) {
+      set_menuAnchorEl(el);
+    } else set_menuAnchorEl(null);
+  }, []);
+  const update_menuRow = _react.default.useCallback(r => {
+    if (r) {
+      set_menuRow(r);
+    } else set_menuRow(null);
+  }, []);
+  /**
+   * Merge click events into grid options
+   */
+  const static_gridOptions = _react.default.useMemo(() => {
+    const events = {
+      onRowClick: onRowClick,
+      onRowContextMenu: onRowContextMenu
+    };
+    return {
+      ...props.static_gridOptions,
+      ...events
+    };
+  }, [props.static_gridOptions, onRowClick]);
+  const contextMenu = _react.default.createElement(_controls.ContextMenu, {
+    menuAnchorEl: menuAnchorEl,
+    set_menuAnchorEl: update_menuAnchorEl,
+    menuRow: menuRow,
+    items: props.contextMenuItems
+  });
+  if (props.details_dataSource) {
+    return _react.default.createElement(DataGridDetailsWrapper, {
+      ...props,
+      static_gridOptions: static_gridOptions
+    }, contextMenu, props.children);
+  } else {
+    return _react.default.createElement(DataGridSizeWrapper, {
+      ...props,
+      static_gridOptions: static_gridOptions
+    }, contextMenu, props.children);
+  }
+}
+function DataGridDetailsWrapper(props) {
+  const cached_details_columns = _react.default.useMemo(() => {
+    return (0, _func_grid.ApplyColumnData)(props.details_columns);
+  }, [props.details_columns]);
+  const cached_data = _react.default.useRef();
+  const last_cache_info = _react.default.useRef();
+  const dataSource = _react.default.useCallback(async dt => {
+    const res = await (0, _func_grid.ApplyDataSource)(props.details_dataSource, {
+      skip: dt.skip,
+      limit: dt.limit,
+      cached_data: cached_data,
+      last_cache_info: last_cache_info
+    });
+    console.log('ds', res);
+    return res;
+  }, [props.dataSource]);
+  const renderDetailsGrid = ({
+    data
+  }) => {
+    return _react.default.createElement(_reactdatagridEnterprise.default, {
+      defaultFilterValue: props.details_filter,
+      dataSource: dataSource,
+      columns: cached_details_columns
+    });
+  };
+  /**
+   * Merge details into grid
+   */
+  const static_gridOptions = _react.default.useMemo(() => {
+    const finalresult = props.static_gridOptions || {};
+    finalresult['renderDetailsGrid'] = renderDetailsGrid;
+    return finalresult;
+  }, [props.static_gridOptions]);
+  return _react.default.createElement(DataGridSizeWrapper, {
+    ...props,
+    static_gridOptions: static_gridOptions
+  }, props.children);
+}
+function DataGridSizeWrapper(props) {
+  if (props.delayedSize) {
+    return _react.default.createElement(DataGridDelayedSize, {
+      ...props
+    });
+  } else {
+    return _react.default.createElement(DataGridFlexSize, {
+      ...props
+    });
+  }
+}
+/* -------------------------------------------------------------------------- */
+function DataGridDelayedSize(props) {
+  const {
+    ref,
+    height,
+    width
+  } = (0, _reactUseSize.useComponentSize)();
+  return _react.default.createElement("div", {
+    ref: ref,
+    className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
+    handle: ref => props.gridRef.current = ref ? ref.current : null,
+    className: 'azgrid-delayedresize',
+    style: {
+      height: height,
+      width: width
+    },
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
+}
+function DataGridFlexSize(props) {
+  return _react.default.createElement("div", {
+    className: (0, _clsx.default)(props.className, 'azgrid-nooverflow', 'azgrid-filler')
+  }, _react.default.createElement(_reactdatagridEnterprise.default, {
+    ...props.static_gridOptions,
+    ...props.dynamic_gridOptions,
+    handle: ref => props.gridRef.current = ref ? ref.current : null,
+    className: 'azgrid-filler',
+    columns: props.columns,
+    dataSource: props.dataSource
+  }), props.children);
+}
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+/* -------------------------------------------------------------------------- */
+var _default = AzGrid;
+exports.default = _default;

package/dist/src/views/index.js

@@ -1,3 +1,23 @@
-export * from './DataGrid';
-import AzGrid from './DataGrid';
-export default AzGrid;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _DataGrid = _interopRequireWildcard(require("./DataGrid"));
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = _DataGrid.default;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@azrico/reactgrid",
-	"version": "1.2.19",
+	"version": "1.2.20",
 	"main": "dist/index.js",
 	"description": "React Datagrid",
 	"author": "Azrideus <MehrdadTavangar@gmail.com>",

package/src/views/DataGrid.tsx

@@ -8,7 +8,7 @@ import {
 	ApplyColumnData,
 	ApplyDataSource,
 	ModifyFields,
-	_get_default_key,
+	get_default_key,
 	get_row_id,
 	validateCache,
 } from '../func/func_grid';
@@ -194,7 +194,7 @@ export function AzGrid(props: AzGridProps) {
 
 	const base_gridOptions = React.useMemo<AzGridOptions>(() => {
 		const firstcolumn = cached_columns[0];
-		const licenseKey = props.licenseKey || _get_default_key();
+		const licenseKey = props.licenseKey || get_default_key();
 		const events: AzGridOptions = {
 			onSkipChange: props.onSkipChange,
 			onLimitChange: props.onLimitChange,