fix(InfiniteGrid): support type definition for Layouts and others. (#124

)

* fix(InfiniteGrid): add types

* fix(InfiniteGrid): fix types

config/webpack.config.module.js

@@ -0,0 +1,29 @@
+var merge = require("webpack-merge");
+var webpack = require("webpack");
+var path = require("path");
+var banner = require("./banner");
+var config = {
+	module: {
+		rules: [{
+			test: /(\.js)$/,
+			loader: "eslint-loader",
+			include: path.resolve(process.cwd(), "src"),
+			exclude: /(node_modules)/,
+			enforce: "pre"
+		}]
+	},
+	plugins: [
+		new webpack.BannerPlugin(banner.common)
+	]
+};
+
+module.exports = function(common, name, localpath) {
+	config.entry = {
+		[`${name}.module`]: localpath,
+	};
+	return merge.strategy({
+		entry: "replace",
+		module: "append",
+		plugins: "append",
+	})(common, config);
+};

declaration/AutoSizer.d.ts

@@ -0,0 +1,8 @@
+declare class AutoSizer {
+	static add(element: Element, prefix?: string): void;
+	static resize(element: Element, prefix?: boolean): void;
+	static remove(element: Element, isFixed?: boolean): void;
+	static resizeAll(): void;
+}
+
+export default AutoSizer;

declaration/DOMRenderer.d.ts

@@ -0,0 +1,17 @@
+export interface DOMRendererStatus {
+	cssText: string;
+	options: {
+		isEqualSize: boolean;
+		isOverflowScroll: boolean;
+		horizontal: boolean;
+	}
+	_size: {
+		container: number;
+		view: number;
+		viewport: number;
+		item?: {
+			width: number;
+			height: number;
+		}
+	}
+}

declaration/ImageLoaded.d.ts

@@ -0,0 +1,20 @@
+declare class ImageLoaded {
+	static waitImageLoaded(needCheck: Element[], options: {
+		prefix?: string,
+		type: number,
+		length: number,
+		complete?: () => {},
+		error?: (parameter?: {target?: Element, itemIndex?:number}) => {},
+		end?: () => {},
+	});
+	static checkImageLoaded(el: Element);
+	static check(elements: Element[], options: {
+		prefix?: string,
+		type: number,
+		complete?: () => {},
+		error?: (parameter?: {target?: Element, itemIndex?:number}) => {},
+		end?: () => {}
+	});
+}
+
+export default ImageLoaded;

declaration/Infinite.d.ts

@@ -0,0 +1,37 @@
+import ItemManager from "./ItemManager";
+
+export interface InfiniteStatus {
+	startCursor: number;
+	endCursor: number;
+	size: number;
+}
+
+export interface InfiniteOption {
+	useRecycle?: boolean;
+	threshold?: number;
+	append?: (event?: {cache: any}) => any;
+	prepend?: (event?: {cache: any}) => any;
+	recycle?: (event?: {cache: any}) => any;
+}
+declare class Infinite {
+	constructor(itemManager: ItemManager, options?: InfiniteOption);
+	setSize(size: number): this;
+	recycle(scrollPos: number, isForward: boolean): this;
+	scroll(scrollPos: number, isForward: boolean): this;
+	setCursor(cursor: string, index: number): this;
+	updateCursor(cursor: string): this;
+	setData(item: object, isAppend?: boolean): this;
+	append(item: object): this;
+	prepend(item: object): this;
+	setStatus(status: InfiniteStatus);
+	getStatus(): InfiniteStatus;
+	getCursor(cursor: string): number;
+	getEdgeOutline(cursor: string): any[];
+	getEdgeValue(cursor: string): number;
+	getVisibleData(): any[];
+	getVisibleItems(): any[];
+	remove(element: Element): any[];
+	clear(): void;
+}
+
+export default Infinite;

declaration/InfiniteGrid.d.ts

@@ -0,0 +1,48 @@
+import * as Component from "@egjs/component";
+import {InfiniteStatus} from "./Infinite";
+import {DOMRendererStatus} from "./DOMRenderer";
+import {WatcherStatus} from "./Watcher";
+import {Item, ItemStatus} from "./ItemManager";
+
+export interface InfiniteGridOption {
+	itemSelector?: string;
+	isEqualSize?: boolean;
+	isOverflowScroll?: boolean;
+	threshold?: number;
+	useRecycle?: boolean;
+	horizontal?: boolean;
+	useFit?: boolean;
+}
+
+export interface InfiniteGridStatus {
+	options: InfiniteGridOption;
+	_items: ItemStatus;
+	_infinite: InfiniteStatus;
+	_renderer: DOMRendererStatus;
+	_watcher: WatcherStatus;
+	_status: {
+		loadingSize?: number;
+		loadingStyle?: object;
+		processingStatus: number;
+	},
+}
+
+
+declare class InfiniteGrid extends Component {
+	constructor(el: string | HTMLElement, options?: InfiniteGridOption);
+	append(elements: (string|HTMLElement)[]| string, groupKey?: string|number): this;
+	prepend(elements: (string|HTMLElement)[]| string, groupKey?: string|number): this;
+	moveTo(index: number, itemIndex?: number): this;
+	clear(): this;
+	destroy();
+	getGroupKeys(includeCached?: boolean): (string|number)[];
+	getStatus(): InfiniteGridStatus;
+	isProcessing(): boolean;
+	layout(isRelayout?: boolean): this;
+	remove(item: HTMLElement): (object|null);
+	setLayout(LayoutKlass, options?): this;
+	getItems(includeCached?: boolean): Item[];
+	setStatus(status: InfiniteGridStatus, applyScrollPos?: boolean): this;
+}
+
+export default InfiniteGrid;

declaration/ItemManager.d.ts

@@ -0,0 +1,31 @@
+
+export interface Item {
+	el?: HTMLElement;
+	content: string;
+	groupKey?: number|string;
+	orgSize?: {
+		width: number,
+		height: number;
+	},
+	rect?: {
+		top: number,
+		left: number;
+		width?: number;
+		height?: number;
+	} 
+	size?: {
+		width: number,
+		height: number;
+	},
+	column? : number
+}
+
+
+export interface ItemStatus  {
+	_data: Item[];
+}
+
+declare class ItemManager {
+}
+
+export default ItemManager;

declaration/Watcher.d.ts

@@ -0,0 +1,4 @@
+export interface WatcherStatus {
+	scrollPos: number;
+	_prevPos: number;
+}

declaration/index.d.ts

@@ -0,0 +1,21 @@
+import InfiniteGrid from "./InfiniteGrid";
+import GridLayout from "./layouts/GridLayout";
+import FrameLayout from "./layouts/FrameLayout";
+import SquareLayout from "./layouts/SquareLayout";
+import PackingLayout from "./layouts/PackingLayout";
+import JustifiedLayout from "./layouts/JustifiedLayout";
+import ImageLoaded from "./ImageLoaded";
+import AutoSizer from "./AutoSizer";
+import Infinite from "./Infinite";
+
+export {
+	Infinite,
+	GridLayout,
+	FrameLayout,
+	SquareLayout,
+	PackingLayout,
+	JustifiedLayout,
+	ImageLoaded,
+	AutoSizer,
+};
+export default InfiniteGrid;

declaration/layouts/FrameLayout.d.ts

@@ -0,0 +1,17 @@
+import {Group} from "./Layout";
+
+declare class FrameLayout {
+	constructor(options?: {
+		margin?: number,
+		horizontal?: boolean,
+		itemSize?: number,
+		frame?: any[],
+		frameFill?: boolean,
+	});
+	setSize(size: number): this;
+	append(items: any[], outline?: number[]): Group;
+	prepend(items: any[], outline?: number[]): Group;
+	layout(groups: any[], outline?: number[]): this;
+}
+
+export default FrameLayout;

declaration/layouts/GridLayout.d.ts

@@ -0,0 +1,16 @@
+import {Group} from "./Layout";
+
+declare class GridLayout {
+	constructor(options?: {
+		margin?: number,
+		horizontal?: boolean,
+		align?: string,
+		itemSize?: number,
+	});
+	setSize(size: number): this;
+	append(items: any[], outline?: number[]): Group;
+	prepend(items: any[], outline?: number[]): Group;
+	layout(groups: any[], outline?: number[]): this;
+}
+
+export default GridLayout;

declaration/layouts/JustifiedLayout.d.ts

@@ -0,0 +1,17 @@
+import {Group} from "./Layout";
+
+declare class JustifiedLayout {
+	constructor(options?: {
+		margin?: number,
+		horizontal?: boolean,
+		minSize?: number,
+		maxSize?: number,
+		column?: number[] | number,
+	});
+	setSize(size: number): this;
+	append(items: any[], outline?: number[]): Group;
+	prepend(items: any[], outline?: number[]): Group;
+	layout(groups: any[], outline?: number[]): this;
+}
+
+export default JustifiedLayout;

declaration/layouts/Layout.d.ts

@@ -0,0 +1,19 @@
+export interface Group {
+	items: any[];
+	outlines: {
+		start: number[],
+		end: number[],
+		startIndex?: number,
+		endIndex?: number,
+	};
+}
+
+
+interface Layout {
+	setSize(size: number): this;
+	append(items: any[], outline?: number[]): Group;
+	prepend(items: any[], outline?: number[]): Group;
+	layout(groups: any[], outline?: number[]): this;
+}
+
+export default Layout;

declaration/layouts/PackingLayout.d.ts

@@ -0,0 +1,17 @@
+import {Group} from "./Layout";
+
+declare class PackingLayout {
+	constructor(options?: {
+		margin?: number,
+		horizontal?: boolean,
+		aspectRatio?: number,
+		sizeWeight?: number,
+		ratioWeight?: number,
+	});
+	setSize(size: number): this;
+	append(items: any[], outline?: number[]): Group;
+	prepend(items: any[], outline?: number[]): Group;
+	layout(groups: any[], outline?: number[]): this;
+}
+
+export default PackingLayout;

declaration/layouts/SquareLayout.d.ts

@@ -0,0 +1,16 @@
+import FrameLayout from "./FrameLayout";
+import {Group} from "./Layout";
+
+declare class SquareLayout extends FrameLayout {
+	constructor(options?: {
+		margin?: number,
+		horizontal?: boolean,
+		itemSize?: number,
+	});
+	setSize(size: number): this;
+	append(items: any[], outline?: number[]): Group;
+	prepend(items: any[], outline?: number[]): Group;
+	layout(groups: any[], outline?: number[]): this;
+}
+
+export default FrameLayout;

package.json

@@ -3,11 +3,12 @@
 	"version": "3.2.4-snapshot",
 	"description": "A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance",
 	"main": "dist/infinitegrid.js",
-	"module": "src/index.js",
-	"types": "src/infinitegrid.d.ts",
+	"module": "dist/infinitegrid.module.js",
+	"types": "declaration/index.d.ts",
 	"scripts": {
 		"start": "concurrently 'webpack-dev-server --host=0.0.0.0 --env.name=InfiniteGrid --env.path=./src/index.umd.js' 'webpack --watch --env.name=Parallax --env.path=./src/Parallax.js'",
-		"build": "rm -rf ./dist && concurrently 'npm run build:infinitegrid' 'npm run build:parallax'",
+		"build": "rm -rf ./dist && concurrently 'npm run build:infinitegrid' 'npm run build:module' 'npm run build:parallax'",
+		"build:module": "webpack --env.type=module --env.path=./src/index.js",
 		"build:infinitegrid": "webpack --env.type=production --env.name=InfiniteGrid --env.path=./src/index.umd.js && webpack --env.type=packaged --env.name=InfiniteGrid --env.path=./src/index.umd.js",
 		"build:parallax": "webpack --env.type=production --env.name=Parallax --env.path=./src/Parallax.js",
 		"test": "karma start",

src/ImageLoaded.js

@@ -14,7 +14,7 @@ function isDataAttribute(target, prefix) {
 }
 
 class ImageLoaded {
-	static waitImageLoaded(needCheck, {prefix, length, type, complete, error, end}) {
+	static waitImageLoaded(needCheck, {prefix = "", length, type, complete, error, end}) {
 		let checkCount = 0;
 		let endCount = length || needCheck.reduce((sum, element) => sum + element.length, 0);
 

src/ItemManager.js

@@ -136,7 +136,7 @@ export default class ItemManager {
 		this._data = [];
 	}
 	remove(element, start, end) {
-		let items = null;
+		let items = [];
 		const key = element.getAttribute(GROUPKEY_ATT);
 		let data = this.get(start, end)
 			.filter(v => String(v.groupKey) === key);