diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..4ac39db --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: './tools/.eslintrc.js' +}; diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..04d38ab --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: [farfromrefug] diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..cbe2ab9 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,112 @@ +name: 'release' + +on: + workflow_dispatch: + inputs: + release_type: + type: choice + default: auto + description: What kind of version upgrade + options: + - auto + - patch + - minor + - major + +jobs: + release: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: "0" + submodules: true + + - name: setup node + uses: actions/setup-node@v4 + with: + node-version: lts/* + registry-url: 'https://registry.npmjs.org' + + + - uses: oNaiPs/secrets-to-env-action@v1 + with: + secrets: ${{ toJSON(secrets) }} + + + - uses: oleksiyrudenko/gha-git-credentials@v2-latest + with: + token: '${{ secrets.GITHUB_TOKEN }}' + name: Martin Guillon + email: dev@akylas.fr + + - name: install jq + run: sudo apt install jq + + - name: Enable CorePack + run: | + corepack enable + yarn config get globalFolder # the yarn command will ensure the correct yarn version is downloaded and installed + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn config get globalFolder)" + + - name: Remove package.json resolutions + run: echo "`jq 'delpaths([["resolutions"]])' package.json`" > package.json + + - uses: actions/cache@v4 + name: Handle node_modules Cache + id: yarn-node_modules # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: node_modules + key: ${{ runner.os }}-yarn-node_modules-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-node_modules- + + - uses: actions/cache@v4 + if: steps.yarn-node_modules.outputs.cache-hit != 'true' + name: Handle Yarn cache + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-cache-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install deps + if: steps.yarn-node_modules.outputs.cache-hit != 'true' + uses: bahmutov/npm-install@v1 + with: + install-command: yarn install --silent + env: + YARN_ENABLE_IMMUTABLE_INSTALLS: false + + - name: run setup + run: | + npm run setup + + - name: "NPM Identity" + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + run: | + echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc + + - name: publish auto + if: github.event.inputs.release_type == 'auto' + run: | + npm run publish -- --force-publish --no-verify-access --no-private --no-commit-hooks --yes + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + + - name: publish + if: github.event.inputs.release_type != 'auto' + run: | + npm run publish -- --force-publish --no-verify-access --no-private --no-commit-hooks --yes --bump ${{ github.event.inputs.release_type }} + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/.gitignore b/.gitignore index d9b61d0..ca1cd70 100644 --- a/.gitignore +++ b/.gitignore @@ -1,46 +1,63 @@ -# Demo application build files -demo/platforms/* -demo/lib/* - -*.DS_Store - -src/*.js -/*.js -demo/app/**.js -demo/node_modules/ +# NativeScript +hooks/ node_modules/ -package-lock.json +platforms -.vscode -.idea -demo/.DS_Store -demo/app/.DS_Store -.DS_Store -.npmrc -*.js +# NativeScript Template *.js.map +!ngcc.config.js +!webpack.config.js + +# Logs +logs *.log -src/*.d.ts -!src/index.d.ts -!src/references.d.ts -!src/scripts/*.js -!seed-tests/*.js -seed-tests/seed-copy/**/*.* -seed-tests/seed-copy-new-git-repo/**/*.* -!demo/karma.conf.js -!demo/app/tests/*.js -demo/*.d.ts -!demo/references.d.ts -demo/lib -demo/platforms -node_modules -publish/src -publish/package -demo/report/report.html -demo/report/stats.json -!demo/webpack.config.js -!demo-ng/webpack.config.js -*.aar -/pnpm-lock.yaml -plugin/*.d.ts -plugin/**/*.d.ts +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# General +.DS_Store +.AppleDouble +.LSOverride +.idea +.cloud +.gradle +.project +.yarn +.cxx +tmp/ + +!.eslintrc.js +!.prettierrc.js + +!e2e/*.js +!detox.config.js +devices.js + +*.framework +*.xcframework +**/*.js.map +src/**/*.js +packages/**/*.js +packages/**/*.d.ts +bin +build +Pods +!packages/*/platforms +/packages/**/*.aar +/packages/**/*.framework +/packages/**/*.xcframework +/demo-snippets/**/*.aar +*.xcuserdatad +/packages/README.md +packages/**/*js.map +packages/**/*js +packages/angular +packages/typings +packages/**/angular/*.json +packages/**/*.ngsummary.json +packages/**/*.metadata.json + +.vscode/settings.json + +/blueprint.md \ No newline at end of file diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..5c92dd5 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,6 @@ +[submodule "demo-ng"] + path = demo-ng + url = https://github.com/nativescript-community/plugin-seed-demo-ng.git +[submodule "tools"] + path = tools + url = https://github.com/nativescript-community/plugin-seed-tools.git diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..bf96d31 --- /dev/null +++ b/.npmrc @@ -0,0 +1,11 @@ +shamefully-hoist=true +public-hoist-pattern[]=*eslint* +public-hoist-pattern[]=source-map-support +public-hoist-pattern[]=ts-patch +public-hoist-pattern[]=typescript +public-hoist-pattern[]=cpy-cli +strict-peer-dependencies=false +shell-emulator=true +auto-install-peers=false +loglevel=error +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..96d64cd --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +package-lock.json +node_modules/ +plugin/ +docs/ diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..258971a --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + printWidth: 200, + semi: true, + tabWidth: 4, + trailingComma: 'none', + singleQuote: true +}; diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 0000000..b877749 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1,7 @@ +compressionLevel: mixed + +nmHoistingLimits: workspaces + +nodeLinker: node-modules + +yarnPath: tools/.yarn/releases/yarn-4.0.1.cjs diff --git a/README.md b/README.md index ea32c62..99d9bea 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,90 @@ - -

NativeScript-PullToRefresh

-
-

-NativeScript plugin to use Pull to Refresh on any view. -

+ + +

@nativescript-community/ui-pulltorefresh

+

+ Downloads per month +NPM Version +

- - npm - - - npm - + A NativeScript plugin to provide the Pull to Refresh control on any view.
+

---- +
+ + +| | | +| --- | ----------- | +| iOS Demo | Android Demo | + + +[](#table-of-contents) + + +[](#table-of-contents) + +## Table of Contents +* [Installation](#installation) + * [[Android - _SwipeRefreshLayout_](http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html)](#android---_swiperefreshlayout_httpdeveloperandroidcomreferenceandroidsupportv4widgetswiperefreshlayouthtml) + * [[iOS - _UIRefreshControl_](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIRefreshControl_class/)](#ios---_uirefreshcontrol_httpsdeveloperapplecomlibraryiosdocumentationuikitreferenceuirefreshcontrol_class) +* [Usage](#usage) + * [NativeScript (Core)](#nativescript-core) + * [XML](#xml) + * [TS](#ts) + * [NativeScript Angular](#nativescript-angular) + * [Module](#module) + * [XML](#xml-1) + * [Component](#component) +* [NativeScript Vue](#nativescript-vue) + * [Bootstrap](#bootstrap) + * [Component](#component-1) +* [Assets](#assets) + * [Android](#android) + * [iOS](#ios) +* [Properties (bindable)](#properties-bindable) +* [Properties](#properties) +* [Methods](#methods) +* [Contributors](#contributors) +* [Demos and Development](#demos-and-development) + * [Repo Setup](#repo-setup) + * [Build](#build) + * [Demos](#demos) +* [Contributing](#contributing) + * [Update repo ](#update-repo-) + * [Update readme ](#update-readme-) + * [Update doc ](#update-doc-) + * [Publish](#publish) + * [modifying submodules](#modifying-submodules) +* [Questions](#questions) + + +[](#installation) + + +[](#installation) + ## Installation +Run the following command from the root of your project: `ns plugin add @nativescript-community/ui-pulltorefresh` @@ -24,131 +92,435 @@ NativeScript plugin to use Pull to Refresh on any view. #### [iOS - _UIRefreshControl_](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIRefreshControl_class/) -### Sample Screen - -| Android | iOS | -| ---------------------------------------------- | -------------------------------------- | -| ![Android Sample](screens/android_refresh.gif) | ![iOS Sample](screens/ios_refresh.gif) | - + +[](#usage) + + +[](#usage) + ## Usage -### NativeScript Core +### NativeScript (Core) #### XML ```xml - - - - - - - - + + + + + ``` -#### JS +#### TS -```javascript -function refreshList(args) { - // Get reference to the PullToRefresh component; - var pullRefresh = args.object; - - // Do work here... and when done call set refreshing property to false to stop the refreshing - loadItems().then( - resp => { - // ONLY USING A TIMEOUT TO SIMULATE/SHOW OFF THE REFRESHING - setTimeout(() => { - pullRefresh.refreshing = false; - }, 1000); - }, - err => { - pullRefresh.refreshing = false; - } - ); +```typescript +import { LottieView } from "@nativescript-community/ui-lottie"; + +public yourLoadedEvent(args) { + this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView } -exports.refreshList = refreshList; ``` -### Angular NativeScript +--- + +### NativeScript Angular + +#### Module + +First you need to include the `NativeScriptLottieModule` in your `app.module.ts` ```typescript -import { registerElement } from '@nativescript/angular'; -import { PullToRefresh } from '@nativescript-community/ui-pulltorefresh'; -registerElement('PullToRefresh', () => PullToRefresh); +import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular'; -refreshList(args) { - const pullRefresh = args.object; - setTimeout(function () { - pullRefresh.refreshing = false; - }, 1000); - } +@NgModule({ + imports: [ + NativeScriptLottieModule + ], + ... +}) ``` -#### HTML +#### XML -```html - - - - - +```xml + + + ``` -### NativeScript Vue +#### Component + +```typescript +import { Component } from '@angular/core'; +import { LottieView } from '@nativescript-community/ui-lottie'; + +@Component({ + templateUrl: 'home.component.html', + moduleId: module.id +}) +export class HomeComponent { + public loop: boolean = true; + public src: string; + public autoPlay: boolean = true; + public animations: Array; + + private _lottieView: LottieView; + + constructor() { + this.animations = [ + 'Mobilo/A.json', + 'Mobilo/D.json', + 'Mobilo/N.json', + 'Mobilo/S.json' + ]; + this.src = this.animations[0]; + } + + lottieViewLoaded(event) { + this._lottieView = event.object; + } +} +``` + +--- + + +[](#nativescript-vue) + + +[](#nativescript-vue) + +## NativeScript Vue + +### Bootstrap + +If you want to use this plugin with Vue, do this in your `app.js` or `main.js`: ```javascript -import Vue from 'nativescript-vue'; +import LottieView from '@nativescript-community/ui-lottie/vue'; -Vue.registerElement( - 'PullToRefresh', - () => require('@nativescript-community/ui-pulltorefresh').PullToRefresh -); +Vue.use(LottieView); ``` -#### Component +This will install and register `LottieView` component to your `Vue` instance and now you can use the plugin. + +### Component -```vue +```xml