@slickgrid-universal/row-detail-view-plugin 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.1.0](https://github.com/ghiscoding/slickgrid-universal/compare/v0.19.2...v1.1.0) (2021-12-11)
+
+
+### Features
+
+* **plugins:** add Row Detail plugin final code & tests ([045ea6d](https://github.com/ghiscoding/slickgrid-universal/commit/045ea6d0e49e55163edcbe1ec6e796f51349667b))
+* **plugins:** move Row Detail View plugin to universal ([9700ff4](https://github.com/ghiscoding/slickgrid-universal/commit/9700ff49132e9408b808f916f634976d80e12579))
+* **plugins:** move Row Detail View plugin to universal ([fb327a6](https://github.com/ghiscoding/slickgrid-universal/commit/fb327a6abe85b86683572cde2a550de43a01f9e1))

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2020-2021, Ghislain B. - Slickgrid-Universal
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+[![npm](https://img.shields.io/npm/v/@slickgrid-universal/row-detail-view-plugin.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/row-detail-view-plugin)
+[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/row-detail-view-plugin?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/row-detail-view-plugin)
+
+[![Actions Status](https://github.com/ghiscoding/slickgrid-universal/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)
+
+## Slick Row Detail View (plugin)
+#### @slickgrid-universal/row-detail-view-plugin
+
+A plugin to add Row Detail View Panel that can be expanded/collapsed, the plugin was created from an idea that came out of this Original StackOverflow question & article making this possible (thanks to violet313).
+ * [Can SlickGrid's row height be dynamically altered? - on Stack Overflow](https://stackoverflow.com/questions/10535164/can-slickgrids-row-height-be-dynamically-altered#29399927)
+ * [a responsive slickgrid with dynamic row-heights by violet313](https://violet313.github.io)
+
+### Internal Dependencies
+- [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common)
+
+
+### Installation
+Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

package/dist/commonjs/index.d.ts

@@ -0,0 +1 @@
+export * from './slickRowDetailView';

package/dist/commonjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./slickRowDetailView"), exports);
+//# sourceMappingURL=index.js.map

package/dist/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,uDAAqC"}

package/dist/commonjs/slickRowDetailView.d.ts

@@ -0,0 +1,129 @@
+import { Column, DOMMouseEvent, ExternalResource, FormatterResultObject, GridOption, PubSubService, RowDetailView, RowDetailViewOption, SlickDataView, SlickEventHandler, SlickGrid, SlickRowDetailView as UniversalRowDetailView, UsabilityOverrideFn } from '@slickgrid-universal/common';
+/***
+ * A plugin to add Row Detail Panel View (for example providing order detail info when clicking on the order row in the grid)
+ * Original StackOverflow question & article making this possible (thanks to violet313)
+ * https://stackoverflow.com/questions/10535164/can-slickgrids-row-height-be-dynamically-altered#29399927
+ * http://violet313.org/slickgrids/#intro
+ */
+export declare class SlickRowDetailView implements ExternalResource, UniversalRowDetailView {
+    protected _addonOptions: RowDetailView;
+    protected _dataViewIdProperty: string;
+    protected _eventHandler: SlickEventHandler;
+    protected _expandableOverride: UsabilityOverrideFn | null;
+    protected _expandedRows: any[];
+    protected _grid: SlickGrid;
+    protected _gridRowBuffer: number;
+    protected _gridUid: string;
+    protected _keyPrefix: string;
+    protected _lastRange: {
+        bottom: number;
+        top: number;
+    } | null;
+    protected _outsideRange: number;
+    protected _pubSubService: PubSubService | null;
+    protected _rowIdsOutOfViewport: Array<number | string>;
+    protected _visibleRenderedCellCount: number;
+    protected _defaults: RowDetailView;
+    pluginName: 'RowDetailView';
+    /** Fired when the async response finished */
+    onAsyncEndUpdate: import("@slickgrid-universal/common").SlickEvent<any>;
+    /** This event must be used with the "notify" by the end user once the Asynchronous Server call returns the item detail */
+    onAsyncResponse: import("@slickgrid-universal/common").SlickEvent<any>;
+    /** Fired after the row detail gets toggled */
+    onAfterRowDetailToggle: import("@slickgrid-universal/common").SlickEvent<any>;
+    /** Fired before the row detail gets toggled */
+    onBeforeRowDetailToggle: import("@slickgrid-universal/common").SlickEvent<any>;
+    /** Fired after the row detail gets toggled */
+    onRowBackToViewportRange: import("@slickgrid-universal/common").SlickEvent<any>;
+    /** Fired after a row becomes out of viewport range (when user can't see the row anymore) */
+    onRowOutOfViewportRange: import("@slickgrid-universal/common").SlickEvent<any>;
+    /** Constructor of the SlickGrid 3rd party plugin, it can optionally receive options */
+    constructor();
+    get addonOptions(): RowDetailView;
+    /** Getter of SlickGrid DataView object */
+    get dataView(): SlickDataView;
+    get dataViewIdProperty(): string;
+    get eventHandler(): SlickEventHandler;
+    /** Getter for the Grid Options pulled through the Grid Object */
+    get gridOptions(): GridOption;
+    get gridUid(): string;
+    set lastRange(range: {
+        bottom: number;
+        top: number;
+    });
+    set rowIdsOutOfViewport(rowIds: Array<string | number>);
+    get visibleRenderedCellCount(): number;
+    /**
+     * Initialize the Export Service
+     * @param _grid
+     * @param _containerService
+     */
+    init(grid: SlickGrid): void;
+    /** Dispose of the Slick Row Detail View */
+    dispose(): void;
+    create(columnDefinitions: Column[], gridOptions: GridOption): UniversalRowDetailView | null;
+    /** Get current plugin options */
+    getOptions(): RowDetailViewOption;
+    /** set or change some of the plugin options */
+    setOptions(options: Partial<RowDetailViewOption>): void;
+    /** Collapse all of the open items */
+    collapseAll(): void;
+    /** Colapse an Item so it is not longer seen */
+    collapseDetailView(item: any, isMultipleCollapsing?: boolean): void;
+    /** Expand a row given the dataview item that is to be expanded */
+    expandDetailView(item: any): void;
+    /** Saves the current state of the detail view */
+    saveDetailView(item: any): void;
+    /**
+     * subscribe to the onAsyncResponse so that the plugin knows when the user server side calls finished
+     * the response has to be as "args.item" (or "args.itemDetail") with it's data back
+     */
+    handleOnAsyncResponse(_e: Event, args: {
+        item: any;
+        itemDetail: any;
+        detailView?: any;
+    }): void;
+    /**
+     * TODO interface only has a GETTER not a SETTER..why?
+     * Override the logic for showing (or not) the expand icon (use case example: only every 2nd row is expandable)
+     * Method that user can pass to override the default behavior or making every row an expandable row.
+     * In order word, user can choose which rows to be an available row detail (or not) by providing his own logic.
+     * @param overrideFn: override function callback
+     */
+    expandableOverride(overrideFn: UsabilityOverrideFn): void;
+    getExpandableOverride(): UsabilityOverrideFn | null;
+    /** Get the Column Definition of the first column dedicated to toggling the Row Detail View */
+    getColumnDefinition(): Column;
+    /** return the currently expanded rows */
+    getExpandedRows(): Array<number | string>;
+    /** return the rows that are out of the viewport */
+    getOutOfViewportRows(): Array<number | string>;
+    /** Takes in the item we are filtering and if it is an expanded row returns it's parents row to filter on */
+    getFilterItem(item: any): any;
+    /** Resize the Row Detail View */
+    resizeDetailView(item: any): void;
+    /**
+     * create the detail ctr node. this belongs to the dev & can be custom-styled as per
+     */
+    protected applyTemplateNewLineHeight(item: any): void;
+    protected calculateOutOfRangeViews(): void;
+    protected calculateOutOfRangeViewsSimplerVersion(): void;
+    protected checkExpandableOverride(row: number, dataContext: any, grid: SlickGrid): boolean;
+    protected checkIsRowOutOfViewportRange(rowIndex: number, renderedRange: any): boolean;
+    /** Get the Row Detail padding (which are the rows dedicated to the detail panel) */
+    protected getPaddingItem(parent: any, offset: any): any;
+    /** The Formatter of the toggling icon of the Row Detail */
+    protected detailSelectionFormatter(row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid): FormatterResultObject | string;
+    /** When row is getting toggled, we will handle the action of collapsing/expanding */
+    protected handleAccordionShowHide(item: any): void;
+    /** Handle mouse click event */
+    protected handleClick(e: DOMMouseEvent<HTMLDivElement>, args: {
+        row: number;
+        cell: number;
+    }): void;
+    protected handleScroll(): void;
+    protected notifyOutOfViewport(item: any, rowId: number | string): void;
+    protected notifyBackToViewportWhenDomExist(item: any, rowId: number | string): void;
+    protected syncOutOfViewportArray(rowId: number | string, isAdding: boolean): (string | number)[];
+    protected toggleRowSelection(rowNumber: number, dataContext: any): void;
+}