collectionview
-
-
+ + +|
| 
|
+| --- | ----------- |
+| iOS Demo | Android Demo |
+
+
+[](#table-of-contents)
+
## Table of Contents
-1. [Installation](#installation)
-2. [Configuration](#configuration)
-3. [API](#api)
-4. [Usage](#usage)
-5. [Usage in Angular](#usage-in-angular)
-6. [Usage in Vue](#usage-in-vue)
-7. [Usage in Svelte](#usage-in-svelte)
-8. [Usage in React](#usage-in-react)
-9. [Demos](#demos)
-
+* [Installation](#installation)
+* [API](#api)
+ * [Events](#events)
+ * [Properties](#properties)
+ * [Methods](#methods)
+* [Usage](#usage)
+ * [Simple Example:](#simple-example)
+ * [Templates Example:](#templates-example)
+* [Usage in Angular](#usage-in-angular)
+ * [Simple Example:](#simple-example-1)
+ * [Templates Example:](#templates-example-1)
+* [Usage in Vue](#usage-in-vue)
+ * [Simple Example:](#simple-example-2)
+* [Usage in Svelte](#usage-in-svelte)
+ * [Simple Example:](#simple-example-3)
+* [Usage in React](#usage-in-react)
+ * [Simple Example:](#simple-example-4)
+* [Demos](#demos)
+* [Demos and Development](#demos-and-development)
+ * [Setup](#setup)
+ * [Build](#build)
+ * [Demos](#demos-1)
+* [Questions](#questions)
+
+
+[](#installation)
+
## Installation
-
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-collectionview`
-This command automatically installs the necessary files, as well as stores @nativescript-community/ui-collectionview as a dependency in your project's package.json file.
-
-## Configuration
-
-There is no additional configuration needed!
-
+
+[](#api)
+
## API
### Events
-| Property | Description |
-| ------------------- | ---------------------------------------------------------------------------------------------------------- |
-| itemLoading | Triggered when generating an item in the CollectionView. |
-| itemTap | Triggered when the user taps on an item in the CollectionView. |
-| loadMoreItems | Triggered when the generated items reached the end of the items property. |
-| scroll | Triggered on collectionview scroll. |
-| scrollEnd | Triggered on collectionview scroll end. |
-| itemReorderStarting | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it |
-| itemReorderStarted | Triggered when a reorder started. |
-| itemReordered | Triggered when a reorder finished. |
-| dataPopulated | Triggered when a refresh has been called. |
+| Property | Description |
+| ------------------- | ---------------------------------------------------------------------------- |
+| itemLoading | Triggered when generating an item in the CollectionView. |
+| itemTap | Triggered when the user taps on an item in the CollectionView. |
+| loadMoreItems | Triggered when the generated items reached the end of the items property. |
+| scroll | Triggered on collectionview scroll. |
+| scrollEnd | Triggered on collectionview scroll end. |
+| itemReorderStarting | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it |
+| itemReorderStarted | Triggered when a reorder started. |
+| itemReordered | Triggered when a reorder finished. |
+| dataPopulated | Triggered when a refresh has been called. |
+
+
### Properties
-| Property | Type | Description |
-| ------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
-| ios | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS. |
-| android | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS. |
-| items | `array` or `ItemsSource` | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method. |
-| itemTemplate | `string` | Gets or sets the item template of the CollectionView. |
-| rowHeight | `PercentLength` | Gets or sets the height for every row in the CollectionView. |
-| colWidth | `PercentLength` | Gets or sets the width for every column in the CollectionView. |
-| spanSize | `Function` | Function to return the span of a cell. For example with `colWidth:50%` a cell with a spanSize of 2 will be `100%` in width |
-| orientation | `'horizontal' | 'vertical'` | Set the orientation for the collectionView |
-| isBounceEnabled | `boolean` | (iOS) enable/disable CollectionView bounce |
-| isScrollEnabled | `boolean` | enable/disable CollectionView scroll |
-| reverseLayout | `boolean` | enable/disable CollectionView reversed layout (for message like views) |
-| loadMoreThreshold | `number` | set the loadMore threshold (called on the `item.length - loadMoreThreshold` item appearing) |
-| reorderEnabled | `boolean` | enable/disable CollectionView reorder feature |
-| reorderLongPressEnabled | `boolean` | enable/disable CollectionView longpress to reorder |
-| scrollBarIndicatorVisible | `boolean` | enable/disable CollectionView scrollBars |
-| nestedScrollingEnabled | `boolean` | (Android) enable/disable CollectionView nested scrolling |
+| Property | Type | Description |
+| ------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| ios | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS. |
+| android | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS. |
+| items | `array` or `ItemsSource` | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method. |
+| itemTemplate | `string` | Gets or sets the item template of the CollectionView. |
+| rowHeight | `PercentLength` | Gets or sets the height for every row in the CollectionView. |
+| colWidth | `PercentLength` | Gets or sets the width for every column in the CollectionView. |
+| spanSize | `function` | Triggered when an item is loaded. Returns the number of columns that the element should occupy taking into account `colWidth` when the device is vertical and `rowHeight` when horizontal. Parameters: (item, index: number). |
+| scrollOffset | `number` | Gets the current scroll. |
### Methods
| Name | Return | Description |
| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |
| refresh() | `void` | Forces the CollectionView to reload all its items. |
+| refreshVisibleItem() | `void` | Forces CollectionView to reload visible items. |
| scrollToIndex(index: number, animated: boolean = true) | `void` | Scrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated. |
+| isItemAtIndexVisible(index: number) | `boolean` | Returns a boolean indicating whether the item is visible. |
+
+[](#usage)
+
## Usage
-
You need to add `xmlns:gv="@nativescript-community/ui-collectionview"` to your page tag, and then simply use `
-
+
-
+
@@ -117,36 +155,36 @@ const items = [
```
### Templates Example:
-
You can also have multiple templates the same way you add them in the builtin `ListView` control:
-
```xml
-
-
+
-
-
+
+
```
-
```ts
export function templateSelector(item: any, index: number, items: any) {
- return index % 2 === 0 ? 'even' : 'odd';
+ return index % 2 === 0 ? "even" : "odd";
}
```
+
+[](#usage-in-angular)
+
## Usage in Angular
Import the module into your project.
@@ -160,7 +198,6 @@ import { CollectionViewModule } from '@nativescript-community/ui-collectionview/
],
})
```
-
### Simple Example:
Create a simple array of objects in your Typescript file.
@@ -181,7 +218,6 @@ items = [
```
Add the following to your component HTML.
-
```xml
@@ -191,32 +227,30 @@ Add the following to your component HTML.
```
### Templates Example:
-
If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin `ListView` control. The only difference is that due to current limitations instead of using the `nsTemplateKey` directive you need to use the `cvTemplateKey` directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the `CollectionView` as well)
-
```html
-
+
-
+
-
+
-
+
@@ -224,6 +258,9 @@ If you want to use multiple item templates, you can do that very similarly to ho
For a more complete example, look in the `demo-ng` directory.
+
+[](#usage-in-vue)
+
## Usage in Vue
Register the plugin in your `app.ts`.
@@ -234,7 +271,6 @@ Vue.use(CollectionView);
```
### Simple Example:
-
In your component, add the following to make a simple array of objects.
```typescript
@@ -256,7 +292,7 @@ export default {
return {
itemList: items
};
- }
+ },
// ...
};
```
@@ -277,6 +313,9 @@ Then add the following XML to your component.
For a more complete example, look in the `demo-vue` directory.
+
+[](#usage-in-svelte)
+
## Usage in Svelte
Register the plugin in your `app.ts`.
@@ -310,8 +349,8 @@ const items = [
Then add the following XML to your component:
```xml
-
@@ -323,6 +362,9 @@ Then add the following XML to your component:
For a more complete example, look in the `demo-svelte` directory.
+
+[](#usage-in-react)
+
## Usage in React
Register the plugin in your `app.ts`.
@@ -358,19 +400,24 @@ interface Item {
color: string;
}
-const cellFactory = (item: Item) => ;
+const cellFactory = (item: Item) => (
+
+);
export function First() {
- return
+
+
+
+
+
+
+
+
+```
+
+### Templates Example:
+You can also have multiple templates the same way you add them in the builtin `ListView` control:
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+```ts
+export function templateSelector(item: any, index: number, items: any) {
+ return index % 2 === 0 ? "even" : "odd";
+}
+```
+
+## Usage in Angular
+
+Import the module into your project.
+
+```typescript
+import { CollectionViewModule } from '@nativescript-community/ui-collectionview/angular';
+
+@NgModule({
+ imports: [
+ CollectionViewModule,
+ ],
+})
+```
+### Simple Example:
+
+Create a simple array of objects in your Typescript file.
+
+```typescript
+items = [
+ { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+ { index: 1, name: 'EMERALD', color: '#2ecc71' },
+ { index: 2, name: 'PETER RIVER', color: '#3498db' },
+ { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+ { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+ { index: 5, name: 'GREEN SEA', color: '#16a085' },
+ { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+ { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+ { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+ { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+```
+
+Add the following to your component HTML.
+```xml
+
+
+
+
+
+```
+
+### Templates Example:
+If you want to use multiple item templates, you can do that very similarly to how you do it for the builtin `ListView` control. The only difference is that due to current limitations instead of using the `nsTemplateKey` directive you need to use the `cvTemplateKey` directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the `CollectionView` as well)
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+For a more complete example, look in the `demo-ng` directory.
+
+## Usage in Vue
+
+Register the plugin in your `app.ts`.
+
+```typescript
+import CollectionView from '@nativescript-community/ui-collectionview/vue';
+Vue.use(CollectionView);
+```
+
+### Simple Example:
+In your component, add the following to make a simple array of objects.
+
+```typescript
+export default {
+ // ...
+ data() {
+ const items = [
+ { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+ { index: 1, name: 'EMERALD', color: '#2ecc71' },
+ { index: 2, name: 'PETER RIVER', color: '#3498db' },
+ { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+ { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+ { index: 5, name: 'GREEN SEA', color: '#16a085' },
+ { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+ { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+ { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+ { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+ ];
+ return {
+ itemList: items
+ };
+ },
+ // ...
+};
+```
+
+Then add the following XML to your component.
+
+```xml
+
+
+
+
+
+```
+
+For a more complete example, look in the `demo-vue` directory.
+
+## Usage in Svelte
+
+Register the plugin in your `app.ts`.
+
+```typescript
+import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
+CollectionViewElement.register();
+```
+
+### Simple Example:
+
+In you component, add the following to import Svelte `Templates` and to create a simple array of objects.
+
+```typescript
+import { Template } from 'svelte-native/components';
+
+const items = [
+ { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+ { index: 1, name: 'EMERALD', color: '#2ecc71' },
+ { index: 2, name: 'PETER RIVER', color: '#3498db' },
+ { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+ { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+ { index: 5, name: 'GREEN SEA', color: '#16a085' },
+ { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+ { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+ { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+ { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+```
+
+Then add the following XML to your component:
+
+```xml
+
+
+
+
+
+```
+
+For a more complete example, look in the `demo-svelte` directory.
+
+## Usage in React
+
+Register the plugin in your `app.ts`.
+
+```typescript
+import { registerCollectionView } from '@nativescript-community/ui-collectionview/react';
+registerCollectionView();
+```
+
+### Simple Example:
+
+In your component, add the following code to create a simple list.
+
+```tsx
+import { CollectionView } from '@nativescript-community/ui-collectionview/react';
+
+const items = [
+ { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+ { index: 1, name: 'EMERALD', color: '#2ecc71' },
+ { index: 2, name: 'PETER RIVER', color: '#3498db' },
+ { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+ { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+ { index: 5, name: 'GREEN SEA', color: '#16a085' },
+ { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+ { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+ { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+ { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
+];
+
+interface Item {
+ index: number;
+ name: string;
+ color: string;
+}
+
+const cellFactory = (item: Item) => (
+
+);
+
+export function First() {
+ return (
+
+ + + +[](#table-of-contents) + +## Table of Contents + +* [Installation](#installation) +* [Configuration](#configuration) +* [Demos and Development](#demos-and-development) + * [Setup](#setup) + * [Build](#build) + * [Demos](#demos) +* [Questions](#questions) + + +[](#installation) + ## Installation Run the following command from the root of your project: -`tns plugin add @nativescript-community/ui-collectionview-waterfall` - -This command automatically installs the necessary files, as well as stores @nativescript-community/ui-collectionview-waterfall as a dependency in your project's package.json file. +`ns plugin add @nativescript-community/ui-collectionview-waterfall` + +[](#configuration) + ## Configuration -To install the plugin run +To install the plugin run: ```typescript import install from '@nativescript-community/ui-collectionview-waterfall'; install(); ``` then simply use the `layoutStyle="waterfall"` as a collectionview property + + +[](#demos-and-development) + +## Demos and Development + + +### Setup + +To run the demos, you must clone this repo **recursively**. + +``` +git clone https://github.com/@nativescript-community/ui-collectionview-waterfall.git --recursive +``` + +**Install Dependencies:** +```bash +npm i # or 'yarn install' or 'pnpm install' +``` + +**Interactive Menu:** + +To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts. + +### Build + +```bash +npm run build + +npm run build.angular # or for Angular +``` + +### Demos + +```bash +npm run demo.[ng|react|svelte|vue].[ios|android] + +npm run demo.svelte.ios # Example +``` + +[](#questions) + +## Questions + +If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). \ No newline at end of file diff --git a/packages/waterfall/blueprint.md b/packages/waterfall/blueprint.md index 7b5d6e84..89b371ab 100644 --- a/packages/waterfall/blueprint.md +++ b/packages/waterfall/blueprint.md @@ -14,7 +14,15 @@ Run the following command from the root of your project: `ns plugin add {{ pkg.name }}` +## Configuration +To install the plugin run: +```typescript +import install from '@nativescript-community/ui-collectionview-waterfall'; +install(); +``` + +then simply use the `layoutStyle="waterfall"` as a collectionview property {{ load:../../tools/readme/demos-and-development.md }} {{ load:../../tools/readme/questions.md }} \ No newline at end of file diff --git a/packages/waterfall/package.json b/packages/waterfall/package.json index 52db2e1c..515c3d5c 100755 --- a/packages/waterfall/package.json +++ b/packages/waterfall/package.json @@ -1,16 +1,18 @@ { "name": "@nativescript-community/ui-collectionview-waterfall", "version": "4.0.46", - "main": "./waterfall", + "description": "A NativeScript CollectionView waterfall Plugin.", + "main": "./index", "sideEffects": false, - "typings": "./waterfall.d.ts", + "typings": "./index.d.ts", "repository": { "type": "git", "url": "git+https://github.com/nativescript-community/ui-collectionview.git" }, "scripts": { - "build": "npm run tsc", + "build": "npm run tsc && npm run readme", "build.all": "npm run build", + "readme": "../../node_modules/.bin/readme generate -c ../../tools/readme/blueprint.json", "tsc": "../../node_modules/.bin/cpy '**/*.d.ts' '../../packages/waterfall' --parents --cwd=../../src/waterfall && ../../node_modules/.bin/tsc -skipLibCheck -d", "clean": "../../node_modules/.bin/rimraf ./*.d.ts ./*.js ./*.js.map" }, diff --git a/packages/waterfall/tsconfig.json b/packages/waterfall/tsconfig.json index 093e8068..04ec0049 100755 --- a/packages/waterfall/tsconfig.json +++ b/packages/waterfall/tsconfig.json @@ -3,12 +3,6 @@ "compilerOptions": { "rootDir": "../../src/waterfall", "outDir": "./", - "paths": { - "tns-core-modules": ["./node_modules/@nativescript/core"], - "tns-core-modules/*": ["./node_modules/@nativescript/core/*"], - "@nativescript-community/ui-collectionview": ["packages/collectionview/collectionview"], - "@nativescript-community/ui-collectionview/*": ["packages/collectionview/*"] - } }, "include": ["../../src/waterfall/**/*.ts", "../../references.d.ts", "../../src/references.d.ts"], "exclude": ["../../src/waterfall/angular/**"]
collectionview
- - + + + +@nativescript-community/ui-collectionview
+
+ 
+
+
+ Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more. + +
+ ++ + +|
| |
+| --- | ----------- |
+| iOS Demo | Android Demo |
+
+
+[](#table-of-contents)
+
## Table of Contents
-1. [Installation](#installation)
-2. [Configuration](#configuration)
-3. [API](#api)
-4. [Usage](#usage)
-5. [Usage in Angular](#usage-in-angular)
-6. [Usage in Vue](#usage-in-vue)
-7. [Usage in Svelte](#usage-in-svelte)
-8. [Usage in React](#usage-in-react)
-9. [Demos](#demos)
-
+* [Installation](#installation)
+* [API](#api)
+ * [Events](#events)
+ * [Properties](#properties)
+ * [Methods](#methods)
+* [Usage](#usage)
+ * [Simple Example:](#simple-example)
+ * [Templates Example:](#templates-example)
+* [Usage in Angular](#usage-in-angular)
+ * [Simple Example:](#simple-example-1)
+ * [Templates Example:](#templates-example-1)
+* [Usage in Vue](#usage-in-vue)
+ * [Simple Example:](#simple-example-2)
+* [Usage in Svelte](#usage-in-svelte)
+ * [Simple Example:](#simple-example-3)
+* [Usage in React](#usage-in-react)
+ * [Simple Example:](#simple-example-4)
+* [Demos](#demos)
+* [Demos and Development](#demos-and-development)
+ * [Setup](#setup)
+ * [Build](#build)
+ * [Demos](#demos-1)
+* [Questions](#questions)
+
+
+[](#installation)
+
## Installation
-
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-collectionview`
-This command automatically installs the necessary files, as well as stores @nativescript-community/ui-collectionview as a dependency in your project's package.json file.
-
-## Configuration
-
-There is no additional configuration needed!
-
+
+[](#api)
+
## API
### Events
-| Property | Description |
-| ------------------- | ---------------------------------------------------------------------------------------------------------- |
-| itemLoading | Triggered when generating an item in the CollectionView. |
-| itemTap | Triggered when the user taps on an item in the CollectionView. |
-| loadMoreItems | Triggered when the generated items reached the end of the items property. |
-| scroll | Triggered on collectionview scroll. |
-| scrollEnd | Triggered on collectionview scroll end. |
-| itemReorderStarting | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it |
-| itemReorderStarted | Triggered when a reorder started. |
-| itemReordered | Triggered when a reorder finished. |
-| dataPopulated | Triggered when a refresh has been called. |
+| Property | Description |
+| ------------------- | ---------------------------------------------------------------------------- |
+| itemLoading | Triggered when generating an item in the CollectionView. |
+| itemTap | Triggered when the user taps on an item in the CollectionView. |
+| loadMoreItems | Triggered when the generated items reached the end of the items property. |
+| scroll | Triggered on collectionview scroll. |
+| scrollEnd | Triggered on collectionview scroll end. |
+| itemReorderStarting | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it |
+| itemReorderStarted | Triggered when a reorder started. |
+| itemReordered | Triggered when a reorder finished. |
+| dataPopulated | Triggered when a refresh has been called. |
+
+
### Properties
-| Property | Type | Description |
-| ------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
-| ios | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS. |
-| android | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS. |
-| items | `array` or `ItemsSource` | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method. |
-| itemTemplate | `string` | Gets or sets the item template of the CollectionView. |
-| rowHeight | `PercentLength` | Gets or sets the height for every row in the CollectionView. |
-| colWidth | `PercentLength` | Gets or sets the width for every column in the CollectionView. |
-| spanSize | `Function` | Function to return the span of a cell. For example with `colWidth:50%` a cell with a spanSize of 2 will be `100%` in width |
-| orientation | `'horizontal' | 'vertical'` | Set the orientation for the collectionView |
-| isBounceEnabled | `boolean` | (iOS) enable/disable CollectionView bounce |
-| isScrollEnabled | `boolean` | enable/disable CollectionView scroll |
-| reverseLayout | `boolean` | enable/disable CollectionView reversed layout (for message like views) |
-| loadMoreThreshold | `number` | set the loadMore threshold (called on the `item.length - loadMoreThreshold` item appearing) |
-| reorderEnabled | `boolean` | enable/disable CollectionView reorder feature |
-| reorderLongPressEnabled | `boolean` | enable/disable CollectionView longpress to reorder |
-| scrollBarIndicatorVisible | `boolean` | enable/disable CollectionView scrollBars |
-| nestedScrollingEnabled | `boolean` | (Android) enable/disable CollectionView nested scrolling |
+| Property | Type | Description |
+| ------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| ios | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS. |
+| android | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS. |
+| items | `array` or `ItemsSource` | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method. |
+| itemTemplate | `string` | Gets or sets the item template of the CollectionView. |
+| rowHeight | `PercentLength` | Gets or sets the height for every row in the CollectionView. |
+| colWidth | `PercentLength` | Gets or sets the width for every column in the CollectionView. |
+| spanSize | `function` | Triggered when an item is loaded. Returns the number of columns that the element should occupy taking into account `colWidth` when the device is vertical and `rowHeight` when horizontal. Parameters: (item, index: number). |
+| scrollOffset | `number` | Gets the current scroll. |
### Methods
| Name | Return | Description |
| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |
| refresh() | `void` | Forces the CollectionView to reload all its items. |
+| refreshVisibleItem() | `void` | Forces CollectionView to reload visible items. |
| scrollToIndex(index: number, animated: boolean = true) | `void` | Scrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated. |
+| isItemAtIndexVisible(index: number) | `boolean` | Returns a boolean indicating whether the item is visible. |
+
+[](#usage)
+
## Usage
-
You need to add `xmlns:gv="@nativescript-community/ui-collectionview"` to your page tag, and then simply use ` | |
+| --- | ----------- |
+| iOS Demo | Android Demo |
+
+{{ template:toc }}
+
+## Installation
+Run the following command from the root of your project:
+
+`ns plugin add {{ pkg.name }}`
+
+## API
+
+### Events
+
+| Property | Description |
+| ------------------- | ---------------------------------------------------------------------------- |
+| itemLoading | Triggered when generating an item in the CollectionView. |
+| itemTap | Triggered when the user taps on an item in the CollectionView. |
+| loadMoreItems | Triggered when the generated items reached the end of the items property. |
+| scroll | Triggered on collectionview scroll. |
+| scrollEnd | Triggered on collectionview scroll end. |
+| itemReorderStarting | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it |
+| itemReorderStarted | Triggered when a reorder started. |
+| itemReordered | Triggered when a reorder finished. |
+| dataPopulated | Triggered when a refresh has been called. |
+
+
+
+### Properties
+
+| Property | Type | Description |
+| ------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| ios | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS. |
+| android | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS. |
+| items | `array` or `ItemsSource` | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method. |
+| itemTemplate | `string` | Gets or sets the item template of the CollectionView. |
+| rowHeight | `PercentLength` | Gets or sets the height for every row in the CollectionView. |
+| colWidth | `PercentLength` | Gets or sets the width for every column in the CollectionView. |
+| spanSize | `function` | Triggered when an item is loaded. Returns the number of columns that the element should occupy taking into account `colWidth` when the device is vertical and `rowHeight` when horizontal. Parameters: (item, index: number). |
+| scrollOffset | `number` | Gets the current scroll. |
+
+### Methods
+
+| Name | Return | Description |
+| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |
+| refresh() | `void` | Forces the CollectionView to reload all its items. |
+| refreshVisibleItem() | `void` | Forces CollectionView to reload visible items. |
+| scrollToIndex(index: number, animated: boolean = true) | `void` | Scrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated. |
+| isItemAtIndexVisible(index: number) | `boolean` | Returns a boolean indicating whether the item is visible. |
+
+## Usage
+You need to add `xmlns:gv="@nativescript-community/ui-collectionview"` to your page tag, and then simply use `@nativescript-community/ui-collectionview-waterfall
+
+ 
+
+
+ A NativeScript CollectionView waterfall Plugin. + +
++ + + +[](#table-of-contents) + +## Table of Contents + +* [Installation](#installation) +* [Configuration](#configuration) +* [Demos and Development](#demos-and-development) + * [Setup](#setup) + * [Build](#build) + * [Demos](#demos) +* [Questions](#questions) + + +[](#installation) + ## Installation Run the following command from the root of your project: -`tns plugin add @nativescript-community/ui-collectionview-waterfall` - -This command automatically installs the necessary files, as well as stores @nativescript-community/ui-collectionview-waterfall as a dependency in your project's package.json file. +`ns plugin add @nativescript-community/ui-collectionview-waterfall` + +[](#configuration) + ## Configuration -To install the plugin run +To install the plugin run: ```typescript import install from '@nativescript-community/ui-collectionview-waterfall'; install(); ``` then simply use the `layoutStyle="waterfall"` as a collectionview property + + +[](#demos-and-development) + +## Demos and Development + + +### Setup + +To run the demos, you must clone this repo **recursively**. + +``` +git clone https://github.com/@nativescript-community/ui-collectionview-waterfall.git --recursive +``` + +**Install Dependencies:** +```bash +npm i # or 'yarn install' or 'pnpm install' +``` + +**Interactive Menu:** + +To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts. + +### Build + +```bash +npm run build + +npm run build.angular # or for Angular +``` + +### Demos + +```bash +npm run demo.[ng|react|svelte|vue].[ios|android] + +npm run demo.svelte.ios # Example +``` + +[](#questions) + +## Questions + +If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). \ No newline at end of file diff --git a/packages/waterfall/blueprint.md b/packages/waterfall/blueprint.md index 7b5d6e84..89b371ab 100644 --- a/packages/waterfall/blueprint.md +++ b/packages/waterfall/blueprint.md @@ -14,7 +14,15 @@ Run the following command from the root of your project: `ns plugin add {{ pkg.name }}` +## Configuration +To install the plugin run: +```typescript +import install from '@nativescript-community/ui-collectionview-waterfall'; +install(); +``` + +then simply use the `layoutStyle="waterfall"` as a collectionview property {{ load:../../tools/readme/demos-and-development.md }} {{ load:../../tools/readme/questions.md }} \ No newline at end of file diff --git a/packages/waterfall/package.json b/packages/waterfall/package.json index 52db2e1c..515c3d5c 100755 --- a/packages/waterfall/package.json +++ b/packages/waterfall/package.json @@ -1,16 +1,18 @@ { "name": "@nativescript-community/ui-collectionview-waterfall", "version": "4.0.46", - "main": "./waterfall", + "description": "A NativeScript CollectionView waterfall Plugin.", + "main": "./index", "sideEffects": false, - "typings": "./waterfall.d.ts", + "typings": "./index.d.ts", "repository": { "type": "git", "url": "git+https://github.com/nativescript-community/ui-collectionview.git" }, "scripts": { - "build": "npm run tsc", + "build": "npm run tsc && npm run readme", "build.all": "npm run build", + "readme": "../../node_modules/.bin/readme generate -c ../../tools/readme/blueprint.json", "tsc": "../../node_modules/.bin/cpy '**/*.d.ts' '../../packages/waterfall' --parents --cwd=../../src/waterfall && ../../node_modules/.bin/tsc -skipLibCheck -d", "clean": "../../node_modules/.bin/rimraf ./*.d.ts ./*.js ./*.js.map" }, diff --git a/packages/waterfall/tsconfig.json b/packages/waterfall/tsconfig.json index 093e8068..04ec0049 100755 --- a/packages/waterfall/tsconfig.json +++ b/packages/waterfall/tsconfig.json @@ -3,12 +3,6 @@ "compilerOptions": { "rootDir": "../../src/waterfall", "outDir": "./", - "paths": { - "tns-core-modules": ["./node_modules/@nativescript/core"], - "tns-core-modules/*": ["./node_modules/@nativescript/core/*"], - "@nativescript-community/ui-collectionview": ["packages/collectionview/collectionview"], - "@nativescript-community/ui-collectionview/*": ["packages/collectionview/*"] - } }, "include": ["../../src/waterfall/**/*.ts", "../../references.d.ts", "../../src/references.d.ts"], "exclude": ["../../src/waterfall/angular/**"]