├── .github
└── issue_template.md
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── assets
└── filterablelist.gif
├── demo
├── .gitignore
├── app
│ ├── App_Resources
│ │ ├── Android
│ │ │ ├── app.gradle
│ │ │ └── src
│ │ │ │ └── main
│ │ │ │ ├── AndroidManifest.xml
│ │ │ │ └── res
│ │ │ │ ├── drawable-hdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-ldpi
│ │ │ │ ├── background.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-mdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-nodpi
│ │ │ │ └── splash_screen.xml
│ │ │ │ ├── drawable-xhdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-xxhdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-xxxhdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── values-v21
│ │ │ │ ├── colors.xml
│ │ │ │ └── styles.xml
│ │ │ │ └── values
│ │ │ │ ├── colors.xml
│ │ │ │ └── styles.xml
│ │ └── iOS
│ │ │ ├── Assets.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── icon-29.png
│ │ │ │ ├── icon-29@2x.png
│ │ │ │ ├── icon-29@3x.png
│ │ │ │ ├── icon-40.png
│ │ │ │ ├── icon-40@2x.png
│ │ │ │ ├── icon-40@3x.png
│ │ │ │ ├── icon-50.png
│ │ │ │ ├── icon-50@2x.png
│ │ │ │ ├── icon-57.png
│ │ │ │ ├── icon-57@2x.png
│ │ │ │ ├── icon-60@2x.png
│ │ │ │ ├── icon-60@3x.png
│ │ │ │ ├── icon-72.png
│ │ │ │ ├── icon-72@2x.png
│ │ │ │ ├── icon-76.png
│ │ │ │ ├── icon-76@2x.png
│ │ │ │ └── icon-83.5@2x.png
│ │ │ ├── Contents.json
│ │ │ ├── LaunchImage.launchimage
│ │ │ │ ├── Contents.json
│ │ │ │ ├── Default-568h@2x.png
│ │ │ │ ├── Default-667h@2x.png
│ │ │ │ ├── Default-736h@3x.png
│ │ │ │ ├── Default-Landscape.png
│ │ │ │ ├── Default-Landscape@2x.png
│ │ │ │ ├── Default-Landscape@3x.png
│ │ │ │ ├── Default-Portrait.png
│ │ │ │ ├── Default-Portrait@2x.png
│ │ │ │ ├── Default.png
│ │ │ │ └── Default@2x.png
│ │ │ ├── LaunchScreen.AspectFill.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── LaunchScreen-AspectFill.png
│ │ │ │ └── LaunchScreen-AspectFill@2x.png
│ │ │ └── LaunchScreen.Center.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── LaunchScreen-Center.png
│ │ │ │ └── LaunchScreen-Center@2x.png
│ │ │ ├── Info.plist
│ │ │ ├── LaunchScreen.storyboard
│ │ │ └── build.xcconfig
│ ├── app.css
│ ├── app.ts
│ ├── main-page.ts
│ ├── main-page.xml
│ ├── main-view-model.ts
│ └── package.json
├── nsconfig.json
├── package.json
├── references.d.ts
├── tsconfig.json
├── tsconfig.tns.json
├── tsfmt.json
└── webpack.config.js
├── publish
├── pack.sh
├── package-lock.json
├── package.json
└── publish.sh
├── schema
└── tns.xsd
├── src
├── .npmignore
├── README.md
├── assets
│ └── download.png
├── filterable-listpicker.ts
├── index.d.ts
├── nsconfig.json
├── package.json
├── platforms
│ └── android
│ │ └── nativescript_filterable_listpicker.aar
├── references.d.ts
└── tsconfig.json
└── tslint.json
/.github/issue_template.md:
--------------------------------------------------------------------------------
1 | ### Make sure to check the demo app(s) for sample usage
2 |
3 | ### Make sure to check the existing issues in this repository
4 |
5 | ### If the demo apps cannot help and there is no issue for your problem, tell us about it
6 | Please, ensure your title is less than 63 characters long and starts with a capital
7 | letter.
8 |
9 | ### Which platform(s) does your issue occur on?
10 | - iOS/Android/Both
11 | - iOS/Android versions
12 | - emulator or device. What type of device?
13 |
14 | ### Please, provide the following version numbers that your issue occurs with:
15 |
16 | - CLI: (run `tns --version` to fetch it)
17 | - Cross-platform modules: (check the 'version' attribute in the
18 | `node_modules/tns-core-modules/package.json` file in your project)
19 | - Runtime(s): (look for the `"tns-android"` and `"tns-ios"` properties in the `package.json` file of your project)
20 | - Plugin(s): (look for the version numbers in the `package.json` file of your
21 | project and paste your dependencies and devDependencies here)
22 |
23 | ### Please, tell us how to recreate the issue in as much detail as possible.
24 | Describe the steps to reproduce it.
25 |
26 | ### Is there any code involved?
27 | - provide a code example to recreate the problem
28 | - (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.
29 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .idea
3 | .DS_Store
4 | *.js
5 | *.js.map
6 | *.log
7 | src/*.d.ts
8 | !src/index.d.ts
9 | !src/references.d.ts
10 | !src/scripts/*.js
11 | !seed-tests/*.js
12 | seed-tests/seed-copy/**/*.*
13 | seed-tests/seed-copy-new-git-repo/**/*.*
14 | !demo/karma.conf.js
15 | !demo/app/tests/*.js
16 | demo/*.d.ts
17 | !demo/references.d.ts
18 | demo/lib
19 | demo/platforms
20 | node_modules
21 | publish/src
22 | publish/package
23 | demo/report/report.html
24 | demo/report/stats.json
25 | package-lock.json
26 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | matrix:
2 | include:
3 | - stage: "Lint"
4 | language: node_js
5 | os: linux
6 | node_js: "6"
7 | script: cd src && npm run ci.tslint && cd ../demo && npm run ci.tslint
8 | - stage: "WebPack"
9 | os: osx
10 | env:
11 | - Platform="iOS"
12 | osx_image: xcode8.3
13 | language: node_js
14 | node_js: "6"
15 | jdk: oraclejdk8
16 | script: cd demo && npm run build.plugin && npm i && npm run build-ios-bundle
17 | - language: android
18 | os: linux
19 | env:
20 | - Platform="Android"
21 | jdk: oraclejdk8
22 | before_install: nvm install 6.10.3
23 | script: cd demo && npm run build.plugin && npm i && npm run build-android-bundle
24 | - stage: "Build and Test"
25 | env:
26 | - BuildAndroid="25"
27 | language: android
28 | os: linux
29 | jdk: oraclejdk8
30 | before_install: nvm install stable
31 | script:
32 | - cd src && npm i && npm run tsc && cd ../demo && tns build android
33 | - os: osx
34 | env:
35 | - BuildiOS="10.3"
36 | - Xcode="8.3"
37 | osx_image: xcode8.3
38 | language: node_js
39 | node_js: "6"
40 | jdk: oraclejdk8
41 | script:
42 | - cd src && npm i && npm run tsc && cd ../demo && tns build ios
43 | - os: linux
44 | language: android
45 | dist: precise
46 | sudo: required
47 | jdk: oraclejdk8
48 | before_script:
49 | - echo no | android create avd --force -n test -t android-21 -b armeabi-v7a
50 | - emulator -avd test -no-audio -no-window &
51 | - android-wait-for-emulator
52 | before_install:
53 | - nvm install 6
54 | script: cd src && npm run test.android
55 | - os: osx
56 | language: node_js
57 | node_js: "6"
58 | jdk: oraclejdk8
59 | osx_image: xcode8.3
60 | script: cd src && npm run test.ios
61 |
62 | android:
63 | components:
64 | - tools
65 | - platform-tools
66 | - build-tools-25.0.2
67 | - android-25
68 | - extra-android-m2repository
69 | - sys-img-armeabi-v7a-android-21
70 |
71 | install:
72 | - echo no | npm install -g nativescript
73 | - tns usage-reporting disable
74 | - tns error-reporting disable
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://twitter.com/davecoffin)
2 |
3 | # nativescript-filterable-listpicker
4 |
5 | The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.
6 |
7 | 
8 |
9 |
10 | ## Installation
11 |
12 | ```
13 | tns plugin add nativescript-filterable-listpicker
14 | ```
15 |
16 | ## Usage
17 | In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:
18 |
19 | ### NativeScript Core
20 |
21 | ```xml
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | ```
39 |
40 | Then in your code...
41 | ```ts
42 | public showPicker() {
43 | page.getViewById('myfilter').show();
44 | }
45 |
46 | public itemTapped(args) {
47 | alert(args.selectedItem + ' was tapped!')
48 | }
49 |
50 | public cancelFilterableList() {
51 | // this gets called if the user cancels the modal.
52 | }
53 | ```
54 |
55 | ### Use as Autocomplte
56 | You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like `Google Place API` please see demo
57 | If you bind source before use `autocomplete` function this resources will be cloned and until the `TextField` is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.
58 | ```ts
59 | let API_KEY = "__YOUR_GOOGLE_API_KEY";
60 |
61 | private filterableListpicker: FilterableListpicker;
62 | private page: Page;
63 | constructor(page: Page) {
64 | super();
65 | this.page = page;
66 | // Get filterableListpicker instance
67 | this.filterableListpicker = (this.page.getViewById('myfilter'));
68 | MyModel = this;
69 | }
70 |
71 | public showPickerAsAutocomplete() {
72 | // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
73 | this.filterableListpicker.isAutocomplete = true;
74 | this.filterableListpicker.show(frame.topmost());
75 |
76 | this.filterableListpicker.autocomplete((data) => {
77 | let url = placesApiUrl + "?input=" + data.value + "&language=fr_FR&key=" + API_KEY;
78 | http.getJSON(url).then((res) => {
79 | //console.dir(res)
80 | const airportsCollection = res.predictions;
81 | const items = [];
82 | for (let i = 0; i < airportsCollection.length; i++) {
83 | items.push({
84 | title: airportsCollection[i].description,
85 | description: "",
86 | source: airportsCollection[i]
87 | });
88 |
89 | }
90 | this.set("listitems", items)
91 | }).catch((err) => {
92 | const message = 'Error fetching remote data from ' + url + ': ' + err.message;
93 | console.log(message);
94 | alert(message);
95 | });
96 | });
97 | }
98 | ```
99 |
100 | ### NativeScript Angular
101 | In angular, you have to register the element in your app component like so:
102 |
103 | ```ts
104 | // app.component.ts
105 | import {registerElement} from "nativescript-angular/element-registry";
106 | registerElement("FilterableListpicker", () => require("nativescript-filterable-listpicker").FilterableListpicker);
107 | ```
108 |
109 | Then use it in your templates like...
110 |
111 | ```xml
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | ```
121 |
122 | Then in your code...
123 | ```ts
124 | @ViewChild('myfilter') myfilter: ElementRef;
125 |
126 | cancelFilterableList() {
127 | console.log('canceled');
128 | }
129 |
130 | itemTapped(args) {
131 | alert(args.selectedItem)
132 | }
133 |
134 | showPicker() {
135 | this.myfilter.nativeElement.show();
136 | }
137 | ```
138 |
139 | Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to
140 | use the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:
141 |
142 | in android:
143 | ```ts
144 | @ViewChild('myContainer') myContainer: ElementRef;
145 |
146 | public function showPicker() {
147 | this.myfilter.nativeElement.show(this.myContainer.nativeElement);
148 | }
149 | ```
150 |
151 | Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.
152 |
153 | ### Source Array
154 | As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called `title`, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display
155 | if in your object are:
156 |
157 | | Property | Description|
158 | | --- | --- |
159 | | title | The title, this is what your list will be filtered on, and it will display in bold. |
160 | | image | OPTIONAL: This will display to the left of the title. |
161 | | description | OPTIONAL: This will display under the title smaller and in gray. |
162 |
163 | Here's some example code:
164 | ```ts
165 | public listitems = [
166 | {
167 | "image": "https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300",
168 | "title": "Brown Bear",
169 | "description": "Brown bear brown bear, what do you see?"
170 | },
171 | {
172 | "image": "http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png",
173 | "title": "Red Bird"
174 | },
175 | {
176 | "title": "Purple Cat",
177 | "description": "Why are we teaching kids there are purple cats?"
178 | }
179 | ];
180 |
181 | ```
182 |
183 | You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use `title`, `image` and `description` if they are present. Although `title` must be present.
184 |
185 | Here's how it will look in the picker:
186 |
187 | 
188 |
189 | ### Webpack
190 |
191 | Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the `bundle-config.js` and `require("bundle-entry-points");` parts. See more here.
192 |
193 | ## API
194 |
195 | The UI element accepts the following parameters:
196 |
197 | | Property | Default | Description |
198 | | --- | --- | --- |
199 | | source | REQUIRED | The array of strings or objects (see Source Array above) you want to display in the picker. |
200 | | hintText | Enter text to filter... | This is the text that shows up as the hint for the textfield used to filter the list. |
201 | | listWidth | 300 | The width of the modal element. |
202 | | listHeight | 300 | The height of the modal element. |
203 | | focusOnShow | false | true or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown. |
204 | | dimmerColor | rgba(0,0,0,0.8) | The color of the dimmer behind the modal. You can set it to `transparent`, or any color supported by NativeScript (ex: `rgba(255,255,255,0.5)`, `red`, `#0088CC`) |
205 | | blur | none | iOS only. Pass `dark` or `light` for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android. |
206 | | itemTapped(args) | | This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with `args.selectedItem`. |
207 | | canceled | | This is just a function to call if the user cancels, probably rarely neccessary. |
208 | | showCancel | | Show cancel button or not. |
209 | | enableSearch | | Allow searching by showing the TextField at the top. |
210 | | autocomplete(fn: Function) | | Allow binding listener `textChangeEvent` to Textfield and use the plugin as `autocomplete` eg.: Google Place API. |
211 |
212 | ## CSS Styling
213 |
214 | ```css
215 | .flp-container .flp-list-container {
216 | border-radius: 10;
217 | }
218 | .flp-container .flp-list-container .flp-listview {
219 | background-color: white;
220 | }
221 |
222 | .flp-container .flp-list-container .flp-listview .flp-row {
223 | background-color: white;
224 | }
225 | /* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
226 | padding: 10;
227 | } */
228 | .flp-container .flp-list-container .flp-listview .flp-row .flp-image {
229 | margin: 10 0 10 5;
230 | }
231 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
232 | margin: 10 10 10 5;
233 | /* margin: 0 10 0 10; */
234 | }
235 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
236 | font-weight: bold;
237 | font-size: 16;
238 | }
239 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
240 | color: gray;
241 | font-size: 13;
242 | }
243 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
244 | margin-left: 15;
245 | padding: 10 0;
246 | }
247 | .flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
248 | color: lightblue;
249 | }
250 |
251 | .flp-container .flp-hint-field {
252 | padding: 10 15;
253 | height: 40;
254 | background-color: #E0E0E0;
255 | border-radius: 10 10 0 0;
256 | }
257 |
258 | .flp-container .flp-cancel-container {
259 | background-color: #E0E0E0;
260 | height: 40;
261 | border-radius: 0 0 10 10;
262 | }
263 |
264 | .flp-container .flp-cancel-container .flp-btn-cancel {
265 | font-weight: bold;
266 | height: 40;
267 | background-color: transparent;
268 | border-color: transparent;
269 | border-width: 1;
270 | font-size: 12;
271 | }
272 | ```
273 |
274 |
275 | ## License
276 |
277 | Apache License Version 2.0, January 2004
278 |
--------------------------------------------------------------------------------
/assets/filterablelist.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/assets/filterablelist.gif
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # NativeScript
2 | hooks/
3 | node_modules/
4 | platforms/
5 |
6 | # NativeScript Template
7 | *.js.map
8 | *.js
9 | !webpack.config.js
10 |
11 | # Logs
12 | logs
13 | *.log
14 | npm-debug.log*
15 | yarn-debug.log*
16 | yarn-error.log*
17 |
18 | # General
19 | .DS_Store
20 | .AppleDouble
21 | .LSOverride
22 | .idea
23 | .cloud
24 | .project
25 | tmp/
26 | typings/
27 |
28 | # Visual Studio Code
29 | .vscode/*
30 | !.vscode/settings.json
31 | !.vscode/tasks.json
32 | !.vscode/launch.json
33 | !.vscode/extensions.json
34 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/app.gradle:
--------------------------------------------------------------------------------
1 | // Add your native dependencies here:
2 |
3 | // Uncomment to add recyclerview-v7 dependency
4 | //dependencies {
5 | // compile 'com.android.support:recyclerview-v7:+'
6 | //}
7 |
8 | android {
9 | defaultConfig {
10 | generatedDensities = []
11 | applicationId = "org.nativescript.filterablelistpicker"
12 | }
13 | aaptOptions {
14 | additionalParameters "--no-version-vectors"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
27 |
28 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml:
--------------------------------------------------------------------------------
1 |
2 | -
3 |
4 |
5 | -
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values-v21/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #3d5afe
4 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values-v21/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
10 |
11 |
14 |
15 |
16 |
19 |
20 |
23 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #F5F5F5
4 | #757575
5 | #33B5E5
6 | #272734
7 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
18 |
19 |
21 |
22 |
23 |
31 |
32 |
34 |
35 |
36 |
42 |
43 |
45 |
46 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "size" : "29x29",
5 | "idiom" : "iphone",
6 | "filename" : "icon-29.png",
7 | "scale" : "1x"
8 | },
9 | {
10 | "size" : "29x29",
11 | "idiom" : "iphone",
12 | "filename" : "icon-29@2x.png",
13 | "scale" : "2x"
14 | },
15 | {
16 | "size" : "29x29",
17 | "idiom" : "iphone",
18 | "filename" : "icon-29@3x.png",
19 | "scale" : "3x"
20 | },
21 | {
22 | "size" : "40x40",
23 | "idiom" : "iphone",
24 | "filename" : "icon-40@2x.png",
25 | "scale" : "2x"
26 | },
27 | {
28 | "size" : "40x40",
29 | "idiom" : "iphone",
30 | "filename" : "icon-40@3x.png",
31 | "scale" : "3x"
32 | },
33 | {
34 | "size" : "57x57",
35 | "idiom" : "iphone",
36 | "filename" : "icon-57.png",
37 | "scale" : "1x"
38 | },
39 | {
40 | "size" : "57x57",
41 | "idiom" : "iphone",
42 | "filename" : "icon-57@2x.png",
43 | "scale" : "2x"
44 | },
45 | {
46 | "size" : "60x60",
47 | "idiom" : "iphone",
48 | "filename" : "icon-60@2x.png",
49 | "scale" : "2x"
50 | },
51 | {
52 | "size" : "60x60",
53 | "idiom" : "iphone",
54 | "filename" : "icon-60@3x.png",
55 | "scale" : "3x"
56 | },
57 | {
58 | "size" : "29x29",
59 | "idiom" : "ipad",
60 | "filename" : "icon-29.png",
61 | "scale" : "1x"
62 | },
63 | {
64 | "size" : "29x29",
65 | "idiom" : "ipad",
66 | "filename" : "icon-29@2x.png",
67 | "scale" : "2x"
68 | },
69 | {
70 | "size" : "40x40",
71 | "idiom" : "ipad",
72 | "filename" : "icon-40.png",
73 | "scale" : "1x"
74 | },
75 | {
76 | "size" : "40x40",
77 | "idiom" : "ipad",
78 | "filename" : "icon-40@2x.png",
79 | "scale" : "2x"
80 | },
81 | {
82 | "size" : "50x50",
83 | "idiom" : "ipad",
84 | "filename" : "icon-50.png",
85 | "scale" : "1x"
86 | },
87 | {
88 | "size" : "50x50",
89 | "idiom" : "ipad",
90 | "filename" : "icon-50@2x.png",
91 | "scale" : "2x"
92 | },
93 | {
94 | "size" : "72x72",
95 | "idiom" : "ipad",
96 | "filename" : "icon-72.png",
97 | "scale" : "1x"
98 | },
99 | {
100 | "size" : "72x72",
101 | "idiom" : "ipad",
102 | "filename" : "icon-72@2x.png",
103 | "scale" : "2x"
104 | },
105 | {
106 | "size" : "76x76",
107 | "idiom" : "ipad",
108 | "filename" : "icon-76.png",
109 | "scale" : "1x"
110 | },
111 | {
112 | "size" : "76x76",
113 | "idiom" : "ipad",
114 | "filename" : "icon-76@2x.png",
115 | "scale" : "2x"
116 | },
117 | {
118 | "size" : "83.5x83.5",
119 | "idiom" : "ipad",
120 | "filename" : "icon-83.5@2x.png",
121 | "scale" : "2x"
122 | }
123 | ],
124 | "info" : {
125 | "version" : 1,
126 | "author" : "xcode"
127 | }
128 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "extent" : "full-screen",
5 | "idiom" : "iphone",
6 | "subtype" : "736h",
7 | "filename" : "Default-736h@3x.png",
8 | "minimum-system-version" : "8.0",
9 | "orientation" : "portrait",
10 | "scale" : "3x"
11 | },
12 | {
13 | "extent" : "full-screen",
14 | "idiom" : "iphone",
15 | "subtype" : "736h",
16 | "filename" : "Default-Landscape@3x.png",
17 | "minimum-system-version" : "8.0",
18 | "orientation" : "landscape",
19 | "scale" : "3x"
20 | },
21 | {
22 | "extent" : "full-screen",
23 | "idiom" : "iphone",
24 | "subtype" : "667h",
25 | "filename" : "Default-667h@2x.png",
26 | "minimum-system-version" : "8.0",
27 | "orientation" : "portrait",
28 | "scale" : "2x"
29 | },
30 | {
31 | "orientation" : "portrait",
32 | "idiom" : "iphone",
33 | "filename" : "Default@2x.png",
34 | "extent" : "full-screen",
35 | "minimum-system-version" : "7.0",
36 | "scale" : "2x"
37 | },
38 | {
39 | "extent" : "full-screen",
40 | "idiom" : "iphone",
41 | "subtype" : "retina4",
42 | "filename" : "Default-568h@2x.png",
43 | "minimum-system-version" : "7.0",
44 | "orientation" : "portrait",
45 | "scale" : "2x"
46 | },
47 | {
48 | "orientation" : "portrait",
49 | "idiom" : "ipad",
50 | "filename" : "Default-Portrait.png",
51 | "extent" : "full-screen",
52 | "minimum-system-version" : "7.0",
53 | "scale" : "1x"
54 | },
55 | {
56 | "orientation" : "landscape",
57 | "idiom" : "ipad",
58 | "filename" : "Default-Landscape.png",
59 | "extent" : "full-screen",
60 | "minimum-system-version" : "7.0",
61 | "scale" : "1x"
62 | },
63 | {
64 | "orientation" : "portrait",
65 | "idiom" : "ipad",
66 | "filename" : "Default-Portrait@2x.png",
67 | "extent" : "full-screen",
68 | "minimum-system-version" : "7.0",
69 | "scale" : "2x"
70 | },
71 | {
72 | "orientation" : "landscape",
73 | "idiom" : "ipad",
74 | "filename" : "Default-Landscape@2x.png",
75 | "extent" : "full-screen",
76 | "minimum-system-version" : "7.0",
77 | "scale" : "2x"
78 | },
79 | {
80 | "orientation" : "portrait",
81 | "idiom" : "iphone",
82 | "filename" : "Default.png",
83 | "extent" : "full-screen",
84 | "scale" : "1x"
85 | },
86 | {
87 | "orientation" : "portrait",
88 | "idiom" : "iphone",
89 | "filename" : "Default@2x.png",
90 | "extent" : "full-screen",
91 | "scale" : "2x"
92 | },
93 | {
94 | "orientation" : "portrait",
95 | "idiom" : "iphone",
96 | "filename" : "Default-568h@2x.png",
97 | "extent" : "full-screen",
98 | "subtype" : "retina4",
99 | "scale" : "2x"
100 | },
101 | {
102 | "orientation" : "portrait",
103 | "idiom" : "ipad",
104 | "extent" : "to-status-bar",
105 | "scale" : "1x"
106 | },
107 | {
108 | "orientation" : "portrait",
109 | "idiom" : "ipad",
110 | "filename" : "Default-Portrait.png",
111 | "extent" : "full-screen",
112 | "scale" : "1x"
113 | },
114 | {
115 | "orientation" : "landscape",
116 | "idiom" : "ipad",
117 | "extent" : "to-status-bar",
118 | "scale" : "1x"
119 | },
120 | {
121 | "orientation" : "landscape",
122 | "idiom" : "ipad",
123 | "filename" : "Default-Landscape.png",
124 | "extent" : "full-screen",
125 | "scale" : "1x"
126 | },
127 | {
128 | "orientation" : "portrait",
129 | "idiom" : "ipad",
130 | "extent" : "to-status-bar",
131 | "scale" : "2x"
132 | },
133 | {
134 | "orientation" : "portrait",
135 | "idiom" : "ipad",
136 | "filename" : "Default-Portrait@2x.png",
137 | "extent" : "full-screen",
138 | "scale" : "2x"
139 | },
140 | {
141 | "orientation" : "landscape",
142 | "idiom" : "ipad",
143 | "extent" : "to-status-bar",
144 | "scale" : "2x"
145 | },
146 | {
147 | "orientation" : "landscape",
148 | "idiom" : "ipad",
149 | "filename" : "Default-Landscape@2x.png",
150 | "extent" : "full-screen",
151 | "scale" : "2x"
152 | }
153 | ],
154 | "info" : {
155 | "version" : 1,
156 | "author" : "xcode"
157 | }
158 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "universal",
5 | "filename" : "LaunchScreen-AspectFill.png",
6 | "scale" : "1x"
7 | },
8 | {
9 | "idiom" : "universal",
10 | "filename" : "LaunchScreen-AspectFill@2x.png",
11 | "scale" : "2x"
12 | },
13 | {
14 | "idiom" : "universal",
15 | "scale" : "3x"
16 | }
17 | ],
18 | "info" : {
19 | "version" : 1,
20 | "author" : "xcode"
21 | }
22 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "universal",
5 | "filename" : "LaunchScreen-Center.png",
6 | "scale" : "1x"
7 | },
8 | {
9 | "idiom" : "universal",
10 | "filename" : "LaunchScreen-Center@2x.png",
11 | "scale" : "2x"
12 | },
13 | {
14 | "idiom" : "universal",
15 | "scale" : "3x"
16 | }
17 | ],
18 | "info" : {
19 | "version" : 1,
20 | "author" : "xcode"
21 | }
22 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | ${PRODUCT_NAME}
9 | CFBundleExecutable
10 | ${EXECUTABLE_NAME}
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | ${PRODUCT_NAME}
15 | CFBundlePackageType
16 | APPL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1.0
23 | LSRequiresIPhoneOS
24 |
25 | UILaunchStoryboardName
26 | LaunchScreen
27 | UIRequiresFullScreen
28 |
29 | UIRequiredDeviceCapabilities
30 |
31 | armv7
32 |
33 | UISupportedInterfaceOrientations
34 |
35 | UIInterfaceOrientationPortrait
36 | UIInterfaceOrientationLandscapeLeft
37 | UIInterfaceOrientationLandscapeRight
38 |
39 | UISupportedInterfaceOrientations~ipad
40 |
41 | UIInterfaceOrientationPortrait
42 | UIInterfaceOrientationPortraitUpsideDown
43 | UIInterfaceOrientationLandscapeLeft
44 | UIInterfaceOrientationLandscapeRight
45 |
46 | NSAppTransportSecurity
47 |
48 | NSAllowsArbitraryLoads
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/build.xcconfig:
--------------------------------------------------------------------------------
1 | // You can add custom settings here
2 | // for example you can uncomment the following line to force distribution code signing
3 | // CODE_SIGN_IDENTITY = iPhone Distribution
4 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
5 | ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
6 |
--------------------------------------------------------------------------------
/demo/app/app.css:
--------------------------------------------------------------------------------
1 | @import '~nativescript-theme-core/css/core.light.css';
2 |
3 | .flp-container {
4 | background-color: red;
5 | }
6 |
7 | .flp-container .flp-list-container {
8 | border-radius: 10;
9 | }
10 | .flp-container .flp-heading-title {
11 | font-size: 12;
12 | text-align: center;
13 | background-color: yellow;
14 | padding: 10;
15 | }
16 | .flp-container .flp-list-container .flp-listview {
17 | background-color: white;
18 | }
19 |
20 | .flp-container .flp-list-container .flp-listview .flp-row {
21 | background-color: white;
22 | }
23 | /* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
24 | padding: 10;
25 | } */
26 | .flp-container .flp-list-container .flp-listview .flp-row .flp-image {
27 | margin: 10 0 10 5;
28 | }
29 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
30 | margin: 10 10 10 5;
31 | /* margin: 0 10 0 10; */
32 | }
33 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
34 | font-weight: bold;
35 | font-size: 16;
36 | }
37 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
38 | color: gray;
39 | font-size: 13;
40 | }
41 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
42 | margin-left: 15;
43 | padding: 10 0;
44 | }
45 | .flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
46 | color: lightblue;
47 | }
48 |
49 | .flp-container .flp-hint-field {
50 | padding: 10 15;
51 | height: 40;
52 | background-color: #E0E0E0;
53 | border-radius: 10 10 0 0;
54 | }
55 |
56 | .flp-container .flp-cancel-container {
57 | background-color: #E0E0E0;
58 | height: 40;
59 | border-radius: 0 0 10 10;
60 | }
61 |
62 | .flp-container .flp-cancel-container .flp-btn-cancel {
63 | font-weight: bold;
64 | height: 40;
65 | background-color: transparent;
66 | border-color: transparent;
67 | border-width: 1;
68 | font-size: 12;
69 | }
--------------------------------------------------------------------------------
/demo/app/app.ts:
--------------------------------------------------------------------------------
1 | import * as application from 'tns-core-modules/application';
2 | application.run({ moduleName: "main-page" });
3 |
--------------------------------------------------------------------------------
/demo/app/main-page.ts:
--------------------------------------------------------------------------------
1 | import * as observable from 'tns-core-modules/data/observable';
2 | import * as pages from 'tns-core-modules/ui/page';
3 | import {HelloWorldModel} from './main-view-model';
4 |
5 | // Event handler for Page 'loaded' event attached in main-page.xml
6 | export function pageLoaded(args: observable.EventData) {
7 | // Get the event sender
8 | let page = args.object;
9 | page.bindingContext = new HelloWorldModel(page);
10 | }
11 |
--------------------------------------------------------------------------------
/demo/app/main-page.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/demo/app/main-view-model.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'tns-core-modules/data/observable';
2 | import { FilterableListpicker } from 'nativescript-filterable-listpicker';
3 | import * as frame from 'tns-core-modules/ui/frame';
4 | import { Page } from 'tns-core-modules/ui/frame';
5 | import * as http from "tns-core-modules/http";
6 |
7 | let API_KEY = "__YOUR_GOOGLE_API_KEY__";
8 | let placesApiUrl = 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
9 | let placesDetailsApiUrl = 'https://maps.googleapis.com/maps/api/place/details/json'
10 | let MyModel;
11 |
12 | export class HelloWorldModel extends Observable {
13 | public selection: string;
14 | private filterableListpicker: FilterableListpicker;
15 | private page: Page;
16 | constructor(page: Page) {
17 | super();
18 | this.page = page;
19 | this.filterableListpicker = (this.page.getViewById('myfilter'));
20 | MyModel = this;
21 | for(let i = 0; i < 300; i++) {
22 | this.objArray.push({
23 | title: "Title " + i,
24 | image: "https://picsum.photos/id/" + i +"/2024/2024",
25 | description: "descriptions " + i
26 | })
27 | }
28 |
29 | }
30 |
31 | private languages = ["A# .NET","A# (Axiom)","A-0 System","A+","A++","ABAP","ABC","ABC ALGOL","ABSET","ABSYS","ACC","Accent","Ace DASL (Distributed Application Specification Language)","ACL2","ACT-III","Action!","ActionScript","Ada","Adenine","Agda","Agilent VEE","Agora","AIMMS","Aldor","Alef","ALF","ALGOL 58","ALGOL 60","ALGOL 68","ALGOL W","Alice","Alma-0","AmbientTalk","Amiga E","AMOS","AMPL","AngelScript","APL","App Inventor for Android's visual block language","AppleScript","APT","Arc","ARexx","Argus","AspectJ","Assembly language","ATS","Ateji PX","AutoHotkey","Autocoder","AutoIt","AutoLISP / Visual LISP","Averest","AWK","Axum","Active Server Pages","B","Babbage","Bash","BASIC","bc","BCPL","BeanShell","Batch (Windows/Dos)","Bertrand","BETA","Bistro","BLISS","Blockly","BlooP","Boo","Boomerang","BPEL","Business Basic","C","C--","C/AL","Caché ObjectScript","C Shell (csh)","Caml","Cayenne","CDuce","Cecil","Cesil","Céu","Ceylon","CFEngine","CFML","Cg","Ch","Chapel","Charity","Charm","CHILL","CHIP-8","chomski","ChucK","Cilk","Citrine","Claire","Clarion","Clean","Clipper","CLIPS","CLIST","Clojure","CLU","CMS-2","Cobra","CODE","CoffeeScript","ColdFusion","COMAL","COMIT","COMPASS","Component Pascal","COMTRAN","Converge","Cool","Coq","Coral 66","CorVision","COWSEL","CPL","Cryptol","Crystal","Csound","CSP","CUDA","Curl","Curry","Cybil","Cyclone","Cython","Dart","DataFlex","Datalog","DATATRIEVE","dBase","dc","DCL","Delphi","DinkC","DIBOL","Dog","Draco","DRAKON","Dylan","DYNAMO","Ease","Easy PL/I","EASYTRIEVE PLUS","ECMAScript","Edinburgh IMP","EGL","Eiffel","ELAN","Elixir","Elm","Emacs Lisp","Emerald","Epigram","EPL (Easy Programming Language)","Erlang","es","Escher","ESPOL","Esterel","Etoys","Euclid","Euler","Euphoria","EusLisp Robot Programming Language","EXEC 2","Executable UML","F#","F*","Factor","Falcon","Fantom","FAUST","FFP","Fjölnir","FL","Flavors","Flex","FlooP","FLOW-MATIC","FOCAL","FOCUS","FOIL","FORMAC","@Formula","Forth","Fortress","FoxBase","FoxPro","FP","Franz Lisp","Frege","F-Script","Game Maker Language","GameMonkey Script","GAMS","GAP","G-code","GDScript","Genie","GDL","GJ","GEORGE","GLSL","GNU E","GM","Go","Go!","GOAL","Gödel","Golo","GOM (Good Old Mad)","Google Apps Script","Gosu","GOTRAN","GPSS","GraphTalk","GRASS","Groovy","Hack","HAGGIS","HAL/S","Halide (programming language)","Hamilton C shell","Harbour","Hartmann pipelines","Haskell","Haxe","Hermes","High Level Assembly","HLSL","Hop","Hopscotch","Hope","Hugo","Hume","HyperTalk","IBM Basic assembly language","IBM HAScript","IBM Informix-4GL","IBM RPG","ICI","Icon","Id","IDL","Idris","IMP","Inform","INTERLISP","Io","Ioke","IPL","IPTSCRAE","ISLISP","ISPF","ISWIM","J#","J++","JADE","JAL","Janus (concurrent constraint programming language)","Janus (time-reversible computing programming language)","JASS","Java","JavaScript","JCL","JEAN","Join Java","JOSS","Joule","JOVIAL","Joy","JScript","JScript .NET","JavaFX Script","Julia","Jython","Kaleidoscope","Karel","Karel++","KEE","Kixtart","Klerer-May System","KIF","Kojo","Kotlin","KRC","KRL","KRYPTON","ksh","Kodu","LabVIEW","Ladder","Lagoona","LANSA","Lasso","LaTeX","Lava","LC-3","Leda","Legoscript","LIL","LilyPond","Limbo","Limnor","LINC","Lingo","LIS","LISA","Lisaac","Lite-C","Lithe","Little b","Logo","Logtalk","LotusScript","LPC","LSE","LSL","LiveCode","LiveScript","Lua","Lucid","Lustre","LYaPAS","Lynx","M2001","M4","M#","Machine code","MAD/I","Magik","Magma","make","Maude system","Maple","Mary","MASM Microsoft Assembly x86","MATH-MATIC","Mathematica","MATLAB","Maya (MEL)","MDL","Mercury","Mesa","Metafont","MetaQuotes Language (MQL4/MQL5)","MHEG-5 (Interactive TV programming language)","Microcode","MicroScript","MIIS","Milk (programming language)","MIMIC","Mirah","Miranda","MIVA Script","ML","Model 204","Modelica","Modula","Modula-2","Modula-3","Mohol","MOO","Mortran","Mouse","MPD","Mathcad","IL","MSL","MUMPS","MuPAD","NASM","Napier88","Neko","Nemerle","nesC","NESL","Net.Data","NetLogo","NetRexx","NewLISP","NEWP","Newspeak","NewtonScript","NGL","Nial","Nice","Nim","NPL","NSIS","Nu","NWScript","NXT-G","o:XML","Oak","Oberon","OBJ2","Object Lisp","ObjectLOGO","Object REXX","Object Pascal","Objective-C","Objective-J","Obliq","OCaml","occam","occam-π","Octave","OmniMark","Onyx","Opa","Opal","OpenCL","OpenEdge ABL","OPL","OpenVera","OPS5","OptimJ","Orc","ORCA/Modula-2","Oriel","Orwell","Oxygene","Oz","P","P#","ParaSail (programming language)","PARI/GP","","PCASTL","PCF","PEARL","PeopleCode","Perl","PDL","Perl 6","Pharo","PHP","Pico","Picolisp","Pict","Pike","PIKT","PILOT","Pipelines","Pizza","PL-11","PL/0","PL/B","PL/C","PL/M","PL/P","PL/SQL","PL360","PLANC","Plankalkül","Planner","PLEX","PLEXIL","Plus","POP-11","POP-2","PostScript","PortablE","Powerhouse","PowerShell","PPL","Processing","Processing.js","Prograph","PROIV","Prolog","PROMAL","Promela","PROSE modeling language","PROTEL","ProvideX","Pro*C","Pure","Pure Data","Python","Q (equational programming language)","Q (programming language from Kx Systems)","Qalb","QBasic","QtScript","QuakeC","QPL","R++","Racket","RAPID","Rapira","Ratfiv","Ratfor","rc","REBOL","Red","Redcode","REFAL","Reia","REXX","Ring","Rlab","ROOP","RPG","RPL","RSL","RTL/2","Ruby","RuneScript","Rust","S2","S3","S-Lang","S-PLUS","SA-C","SabreTalk","SAIL","SALSA","SAM76","SAS","SASL","Sather","Sawzall","SBL","Scala","Scheme","Scilab","Scratch","Script.NET","Sed","Seed7","Self","SenseTalk","SequenceL","SETL","SIMPOL","SIGNAL","SiMPLE","SIMSCRIPT","Simula","Simulink","Singularity","SISAL","SLIP","SMALL","Smalltalk","Small Basic","SML","Strongtalk","Snap!","Snowball","SOL","Solidity","SPARK","Speedcode","SPIN","SP/k","SPS","SQR","Squeak","Squirrel","SR","S/SL","Stackless Python","Starlogo","Strand","Stata","Stateflow","Subtext","SuperCollider","SuperTalk","Swift (Apple programming language)","Swift (parallel scripting language)","SYMPL","SyncCharts","SystemVerilo","TACL","TACPOL","TADS","TAL","Tcl","Tea","TECO","TELCOMP","TeX","TEX","TIE","Timber","Tom","TOM","Toi","Topspeed","TPU","Trac","TTM","T-SQL","Transcript","TTCN","Turing","TUTOR","TXL","TypeScript","Ubercode","UCSD Pascal","Umple","Unicon","Uniface","UNITY","Unix shell","UnrealScript","Vala","Verilog","VHDL","Visual Basic","Visual Basic .NET","Visual DataFlex","Visual DialogScript","Visual Fortran","Visual FoxPro","Visual J++","Visual J#","Visual Objects","Visual Prolog","VSXu","vvvv","WATFIV, WATFOR","WebDNA","WebQL","Whiley","Windows PowerShell","Winbatch","Wolfram Language","Wyvern","X10","XBL","xHarbour","XL","Xojo","XOTcl","XPL","XPL0","XQuery","XSB","XSharp","ath","Xtend","X++","Yorick","YQL","Yoix","Z notation","Zeno","ZOPL","Zsh","ZPL"];
32 | private objArray = [
33 | {
34 | "image": "https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300",
35 | "title": "Brown Bear",
36 | "description": "Brown bear brown bear, what do you see?"
37 | },
38 | {
39 | "image": "https://www.allaboutbirds.org/guide/assets/photo/63667361-480px.jpg",
40 | "title": "Red Bird"
41 | },
42 | {
43 | "image": "https://i.pinimg.com/originals/f6/91/4d/f6914de57273472fb3abdf6556815e09.jpg",
44 | "title": "Purple Cat",
45 | "description": "Why are we teaching kids there are purple cats?"
46 | },
47 | {
48 | "image": "https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300",
49 | "title": "Blue Horse",
50 | "description": "Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it."
51 | },
52 | {
53 | "image": "https://image.shutterstock.com/image-photo/small-green-frog-isolated-on-260nw-567630652.jpg",
54 | "title": "Green Frog",
55 | "description": "Cortado, cappuccino, espresso."
56 | },
57 | {
58 | "image": "https://marketplace.canva.com/MAB60kWLDdM/1/thumbnail/canva-cute-dog-icon-MAB60kWLDdM.png",
59 | "title": "White Dog",
60 | },
61 | {
62 | "image": "https://image.shutterstock.com/image-photo/beautiful-ball-python-snake-on-260nw-690280585.jpg",
63 | "title": "Yellow Snake",
64 | },
65 | {
66 | "image": "https://www.partiesonline.com.au/images/velevet-black-witches-hat.jpg",
67 | "title": "Black Witch",
68 | "description": "Peter piper picked a peck of pickled peppers."
69 | },
70 | ];
71 | public listitems = this.objArray;
72 | public itemTapped(args) {
73 | console.dir(args.selectedItem);
74 | MyModel.set('selection', args.selectedItem);
75 | if (typeof args.selectedItem == 'string') {
76 | MyModel.set('selection', args.selectedItem);
77 | } else {
78 | MyModel.set('selection', args.selectedItem.title);
79 | }
80 | // You can use `https://maps.googleapis.com/maps/api/place/details/json?placeid=${args.selectedItem.place_id}&key=${API_KEY}` for detailed place infos
81 | }
82 |
83 | cancelFilterableList(args) {
84 | console.log('the thing was canceled');
85 | console.dir(args);
86 | }
87 |
88 | showPicker() {
89 | this.filterableListpicker.isAutocomplete = false;
90 | this.set('listitems', this.languages);
91 | this.filterableListpicker.show();
92 | }
93 |
94 | showNewThings() {
95 | this.filterableListpicker.isAutocomplete = false;
96 | console.log(this.filterableListpicker.isAutocomplete)
97 | this.set('listitems', this.objArray);
98 | (this.page.getViewById('myfilter')).show();
99 | }
100 |
101 | showPickerAsAutocomplete() {
102 | this.filterableListpicker.isAutocomplete = true;
103 | this.filterableListpicker.show();
104 |
105 | this.filterableListpicker.autocomplete((data) => {
106 | let url = `${placesApiUrl}?input=${data.value}&language=fr_FR&key=${API_KEY}`;
107 | http.getJSON(url).then((res) => {
108 | //console.dir(res)
109 | const airportsCollection = res.predictions;
110 | const items = [];
111 | for (let i = 0; i < airportsCollection.length; i++) {
112 | items.push({
113 | title: airportsCollection[i].description,
114 | description: "",
115 | source: airportsCollection[i]
116 | });
117 |
118 | }
119 | this.set("listitems", items)
120 | }).catch((err) => {
121 | const message = 'Error fetching remote data from ' + url + ': ' + err.message;
122 | console.log(message);
123 | alert(message);
124 | });
125 | });
126 | }
127 | }
128 |
129 | export interface Predictions {
130 | predictions: PredictionsItems[];
131 | }
132 |
133 | export interface PredictionsItems {
134 | id: string;
135 | description: string;
136 | place_id: string;
137 | reference: string;
138 | structured_formatting: StructuredFormattingItems[];
139 | types: itemsType[];
140 | matched_substrings: MatchedSubstring;
141 | }
142 |
143 | export interface StructuredFormattingItems {
144 | main_text: string;
145 | main_text_matched_substrings: MatchedSubstring[],
146 | secondary_text: string;
147 | }
148 |
149 | export interface itemsType {
150 | locality: string;
151 | political: string[],
152 | geocode: string;
153 | }
154 |
155 | export interface MatchedSubstring {
156 | length: number;
157 | offset: number;
158 | }
--------------------------------------------------------------------------------
/demo/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "app.js",
3 | "android": {
4 | "v8Flags": "--expose_gc",
5 | "markingMode": "none"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/demo/nsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "useLegacyWorkflow": false
3 | }
4 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "nativescript": {
3 | "id": "org.nativescript.filterablelistpicker",
4 | "tns-ios": {
5 | "version": "6.3.0"
6 | },
7 | "tns-android": {
8 | "version": "6.3.1"
9 | }
10 | },
11 | "dependencies": {
12 | "nativescript-filterable-listpicker": "file:../src",
13 | "nativescript-theme-core": "^1.0.4",
14 | "tns-core-modules": "6.3.2"
15 | },
16 | "devDependencies": {
17 | "nativescript-dev-webpack": "1.4.0",
18 | "tns-platform-declarations": "^6.0.0",
19 | "typescript": "^3.7.4"
20 | },
21 | "scripts": {
22 | "build.plugin": "cd ../src && npm run build",
23 | "ci.tslint": "npm i && tslint --config '../tslint.json' 'app/**/*.ts' --exclude '**/node_modules/**'",
24 | "ns-bundle": "ns-bundle",
25 | "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
26 | "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
27 | "start-android-bundle": "npm run ns-bundle --android --run-app",
28 | "start-ios-bundle": "npm run ns-bundle --ios --run-app",
29 | "build-android-bundle": "npm run ns-bundle --android --build-app",
30 | "build-ios-bundle": "npm run ns-bundle --ios --build-app"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/demo/references.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "target": "es5",
5 | "experimentalDecorators": true,
6 | "emitDecoratorMetadata": true,
7 | "noEmitHelpers": true,
8 | "noEmitOnError": true,
9 | "lib": [
10 | "es2017",
11 | "dom",
12 | "es6"
13 | ],
14 | "baseUrl": ".",
15 | "paths": {
16 | "~/*": [
17 | "app/*"
18 | ],
19 | "*": [
20 | "./node_modules/*"
21 | ]
22 | }
23 | },
24 | "exclude": [
25 | "node_modules",
26 | "platforms"
27 | ]
28 | }
--------------------------------------------------------------------------------
/demo/tsconfig.tns.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig",
3 | "compilerOptions": {
4 | "module": "esNext",
5 | "moduleResolution": "node"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/demo/tsfmt.json:
--------------------------------------------------------------------------------
1 | {
2 | "indentSize": 4,
3 | "tabSize": 4
4 | }
5 |
--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { join, relative, resolve, sep } = require("path");
2 |
3 | const webpack = require("webpack");
4 | const nsWebpack = require("nativescript-dev-webpack");
5 | const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
6 | const { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
7 | const CleanWebpackPlugin = require("clean-webpack-plugin");
8 | const CopyWebpackPlugin = require("copy-webpack-plugin");
9 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
10 | const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
11 | const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
12 | const TerserPlugin = require("terser-webpack-plugin");
13 | const hashSalt = Date.now().toString();
14 |
15 | module.exports = env => {
16 | // Add your custom Activities, Services and other Android app components here.
17 | const appComponents = [
18 | "tns-core-modules/ui/frame",
19 | "tns-core-modules/ui/frame/activity",
20 | ];
21 |
22 | const platform = env && (env.android && "android" || env.ios && "ios");
23 | if (!platform) {
24 | throw new Error("You need to provide a target platform!");
25 | }
26 |
27 | const platforms = ["ios", "android"];
28 | const projectRoot = __dirname;
29 |
30 | // Default destination inside platforms//...
31 | const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
32 |
33 | const {
34 | // The 'appPath' and 'appResourcesPath' values are fetched from
35 | // the nsconfig.json configuration file.
36 | appPath = "app",
37 | appResourcesPath = "app/App_Resources",
38 |
39 | // You can provide the following flags when running 'tns run android|ios'
40 | snapshot, // --env.snapshot
41 | production, // --env.production
42 | uglify, // --env.uglify
43 | report, // --env.report
44 | sourceMap, // --env.sourceMap
45 | hiddenSourceMap, // --env.hiddenSourceMap
46 | hmr, // --env.hmr,
47 | unitTesting, // --env.unitTesting,
48 | verbose, // --env.verbose
49 | snapshotInDocker, // --env.snapshotInDocker
50 | skipSnapshotTools, // --env.skipSnapshotTools
51 | compileSnapshot // --env.compileSnapshot
52 | } = env;
53 |
54 | const useLibs = compileSnapshot;
55 | const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
56 | const externals = nsWebpack.getConvertedExternals(env.externals);
57 |
58 | const appFullPath = resolve(projectRoot, appPath);
59 | const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
60 | let coreModulesPackageName = "tns-core-modules";
61 | const alias = {
62 | '~': appFullPath
63 | };
64 |
65 | if (hasRootLevelScopedModules) {
66 | coreModulesPackageName = "@nativescript/core";
67 | alias["tns-core-modules"] = coreModulesPackageName;
68 | }
69 | const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
70 |
71 | const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
72 | const entryPath = `.${sep}${entryModule}.ts`;
73 | const entries = { bundle: entryPath };
74 |
75 | const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
76 |
77 | const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
78 | if (platform === "ios" && !areCoreModulesExternal) {
79 | entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
80 | };
81 |
82 | let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
83 |
84 | const itemsToClean = [`${dist}/**/*`];
85 | if (platform === "android") {
86 | itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
87 | itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
88 | }
89 |
90 | const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath);
91 |
92 | nsWebpack.processAppComponents(appComponents, platform);
93 | const config = {
94 | mode: production ? "production" : "development",
95 | context: appFullPath,
96 | externals,
97 | watchOptions: {
98 | ignored: [
99 | appResourcesFullPath,
100 | // Don't watch hidden files
101 | "**/.*",
102 | ]
103 | },
104 | target: nativescriptTarget,
105 | entry: entries,
106 | output: {
107 | pathinfo: false,
108 | path: dist,
109 | sourceMapFilename,
110 | libraryTarget: "commonjs2",
111 | filename: "[name].js",
112 | globalObject: "global",
113 | hashSalt
114 | },
115 | resolve: {
116 | extensions: [".ts", ".js", ".scss", ".css"],
117 | // Resolve {N} system modules from tns-core-modules
118 | modules: [
119 | resolve(__dirname, `node_modules/${coreModulesPackageName}`),
120 | resolve(__dirname, "node_modules"),
121 | `node_modules/${coreModulesPackageName}`,
122 | "node_modules",
123 | ],
124 | alias,
125 | // resolve symlinks to symlinked modules
126 | symlinks: true
127 | },
128 | resolveLoader: {
129 | // don't resolve symlinks to symlinked loaders
130 | symlinks: false
131 | },
132 | node: {
133 | // Disable node shims that conflict with NativeScript
134 | "http": false,
135 | "timers": false,
136 | "setImmediate": false,
137 | "fs": "empty",
138 | "__dirname": false,
139 | },
140 | devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
141 | optimization: {
142 | runtimeChunk: "single",
143 | noEmitOnErrors: noEmitOnErrorFromTSConfig,
144 | splitChunks: {
145 | cacheGroups: {
146 | vendor: {
147 | name: "vendor",
148 | chunks: "all",
149 | test: (module, chunks) => {
150 | const moduleName = module.nameForCondition ? module.nameForCondition() : '';
151 | return /[\\/]node_modules[\\/]/.test(moduleName) ||
152 | appComponents.some(comp => comp === moduleName);
153 |
154 | },
155 | enforce: true,
156 | },
157 | }
158 | },
159 | minimize: !!uglify,
160 | minimizer: [
161 | new TerserPlugin({
162 | parallel: true,
163 | cache: true,
164 | sourceMap: isAnySourceMapEnabled,
165 | terserOptions: {
166 | output: {
167 | comments: false,
168 | semicolons: !isAnySourceMapEnabled
169 | },
170 | compress: {
171 | // The Android SBG has problems parsing the output
172 | // when these options are enabled
173 | 'collapse_vars': platform !== "android",
174 | sequences: platform !== "android",
175 | }
176 | }
177 | })
178 | ],
179 | },
180 | module: {
181 | rules: [
182 | {
183 | include: join(appFullPath, entryPath),
184 | use: [
185 | // Require all Android app components
186 | platform === "android" && {
187 | loader: "nativescript-dev-webpack/android-app-components-loader",
188 | options: { modules: appComponents }
189 | },
190 |
191 | {
192 | loader: "nativescript-dev-webpack/bundle-config-loader",
193 | options: {
194 | loadCss: !snapshot, // load the application css if in debug mode
195 | unitTesting,
196 | appFullPath,
197 | projectRoot,
198 | ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
199 | }
200 | },
201 | ].filter(loader => !!loader)
202 | },
203 |
204 | {
205 | test: /\.(ts|css|scss|html|xml)$/,
206 | use: "nativescript-dev-webpack/hmr/hot-loader"
207 | },
208 |
209 | { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
210 |
211 | {
212 | test: /\.css$/,
213 | use: "nativescript-dev-webpack/css2json-loader"
214 | },
215 |
216 | {
217 | test: /\.scss$/,
218 | use: [
219 | "nativescript-dev-webpack/css2json-loader",
220 | "sass-loader"
221 | ]
222 | },
223 |
224 | {
225 | test: /\.ts$/,
226 | use: {
227 | loader: "ts-loader",
228 | options: {
229 | configFile: tsConfigPath,
230 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
231 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
232 | transpileOnly: true,
233 | allowTsInNodeModules: true,
234 | compilerOptions: {
235 | sourceMap: isAnySourceMapEnabled,
236 | declaration: false
237 | }
238 | },
239 | }
240 | },
241 | ]
242 | },
243 | plugins: [
244 | // Define useful constants like TNS_WEBPACK
245 | new webpack.DefinePlugin({
246 | "global.TNS_WEBPACK": "true",
247 | "process": "global.process",
248 | }),
249 | // Remove all files from the out dir.
250 | new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
251 | // Copy assets to out dir. Add your own globs as needed.
252 | new CopyWebpackPlugin([
253 | { from: { glob: "fonts/**" } },
254 | { from: { glob: "**/*.jpg" } },
255 | { from: { glob: "**/*.png" } },
256 | ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
257 | new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
258 | // For instructions on how to set up workers with webpack
259 | // check out https://github.com/nativescript/worker-loader
260 | new NativeScriptWorkerPlugin(),
261 | new nsWebpack.PlatformFSPlugin({
262 | platform,
263 | platforms,
264 | }),
265 | // Does IPC communication with the {N} CLI to notify events when running in watch mode.
266 | new nsWebpack.WatchStateLoggerPlugin(),
267 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
268 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
269 | new ForkTsCheckerWebpackPlugin({
270 | tsconfig: tsConfigPath,
271 | async: false,
272 | useTypescriptIncrementalApi: true,
273 | checkSyntacticErrors: true,
274 | memoryLimit: 4096
275 | })
276 | ],
277 | };
278 |
279 | if (report) {
280 | // Generate report files for bundles content
281 | config.plugins.push(new BundleAnalyzerPlugin({
282 | analyzerMode: "static",
283 | openAnalyzer: false,
284 | generateStatsFile: true,
285 | reportFilename: resolve(projectRoot, "report", `report.html`),
286 | statsFilename: resolve(projectRoot, "report", `stats.json`),
287 | }));
288 | }
289 |
290 | if (snapshot) {
291 | config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
292 | chunk: "vendor",
293 | requireModules: [
294 | "tns-core-modules/bundle-entry-points",
295 | ],
296 | projectRoot,
297 | webpackConfig: config,
298 | snapshotInDocker,
299 | skipSnapshotTools,
300 | useLibs
301 | }));
302 | }
303 |
304 | if (hmr) {
305 | config.plugins.push(new webpack.HotModuleReplacementPlugin());
306 | }
307 |
308 |
309 | return config;
310 | };
311 |
--------------------------------------------------------------------------------
/publish/pack.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | SOURCE_DIR=../src;
4 | TO_SOURCE_DIR=src;
5 | PACK_DIR=package;
6 | ROOT_DIR=..;
7 | PUBLISH=--publish
8 |
9 | install(){
10 | npm i
11 | }
12 |
13 | pack() {
14 |
15 | echo 'Clearing /src and /package...'
16 | node_modules/.bin/rimraf "$TO_SOURCE_DIR"
17 | node_modules/.bin/rimraf "$PACK_DIR"
18 |
19 | # copy src
20 | echo 'Copying src...'
21 | node_modules/.bin/ncp "$SOURCE_DIR" "$TO_SOURCE_DIR"
22 |
23 | # copy README & LICENSE to src
24 | echo 'Copying README and LICENSE to /src...'
25 | node_modules/.bin/ncp "$ROOT_DIR"/LICENSE "$TO_SOURCE_DIR"/LICENSE
26 | node_modules/.bin/ncp "$ROOT_DIR"/README.md "$TO_SOURCE_DIR"/README.md
27 |
28 | # compile package and copy files required by npm
29 | echo 'Building /src...'
30 | cd "$TO_SOURCE_DIR"
31 | node_modules/.bin/tsc
32 | cd ..
33 |
34 | echo 'Creating package...'
35 | # create package dir
36 | mkdir "$PACK_DIR"
37 |
38 | # create the package
39 | cd "$PACK_DIR"
40 | npm pack ../"$TO_SOURCE_DIR"
41 |
42 | # delete source directory used to create the package
43 | cd ..
44 | node_modules/.bin/rimraf "$TO_SOURCE_DIR"
45 | }
46 |
47 | install && pack
--------------------------------------------------------------------------------
/publish/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nativescript-publish",
3 | "version": "1.0.0",
4 | "lockfileVersion": 1,
5 | "requires": true,
6 | "dependencies": {
7 | "balanced-match": {
8 | "version": "1.0.0",
9 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
10 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
11 | "dev": true
12 | },
13 | "brace-expansion": {
14 | "version": "1.1.11",
15 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
16 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
17 | "dev": true,
18 | "requires": {
19 | "balanced-match": "1.0.0",
20 | "concat-map": "0.0.1"
21 | }
22 | },
23 | "concat-map": {
24 | "version": "0.0.1",
25 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
26 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
27 | "dev": true
28 | },
29 | "fs.realpath": {
30 | "version": "1.0.0",
31 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
32 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
33 | "dev": true
34 | },
35 | "glob": {
36 | "version": "7.1.2",
37 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
38 | "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
39 | "dev": true,
40 | "requires": {
41 | "fs.realpath": "1.0.0",
42 | "inflight": "1.0.6",
43 | "inherits": "2.0.3",
44 | "minimatch": "3.0.4",
45 | "once": "1.4.0",
46 | "path-is-absolute": "1.0.1"
47 | }
48 | },
49 | "inflight": {
50 | "version": "1.0.6",
51 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
52 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
53 | "dev": true,
54 | "requires": {
55 | "once": "1.4.0",
56 | "wrappy": "1.0.2"
57 | }
58 | },
59 | "inherits": {
60 | "version": "2.0.3",
61 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
62 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
63 | "dev": true
64 | },
65 | "minimatch": {
66 | "version": "3.0.4",
67 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
68 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
69 | "dev": true,
70 | "requires": {
71 | "brace-expansion": "1.1.11"
72 | }
73 | },
74 | "ncp": {
75 | "version": "2.0.0",
76 | "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
77 | "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
78 | "dev": true
79 | },
80 | "once": {
81 | "version": "1.4.0",
82 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
83 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
84 | "dev": true,
85 | "requires": {
86 | "wrappy": "1.0.2"
87 | }
88 | },
89 | "path-is-absolute": {
90 | "version": "1.0.1",
91 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
92 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
93 | "dev": true
94 | },
95 | "rimraf": {
96 | "version": "2.6.2",
97 | "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
98 | "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
99 | "dev": true,
100 | "requires": {
101 | "glob": "7.1.2"
102 | }
103 | },
104 | "wrappy": {
105 | "version": "1.0.2",
106 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
107 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
108 | "dev": true
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/publish/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nativescript-publish",
3 | "version": "1.0.0",
4 | "description": "Publish helper",
5 | "devDependencies": {
6 | "ncp": "^2.0.0",
7 | "rimraf": "^2.5.0"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/publish/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | PACK_DIR=package;
4 |
5 | publish() {
6 | cd $PACK_DIR
7 | echo 'Publishing to npm...'
8 | npm publish *.tgz
9 | }
10 |
11 | ./pack.sh && publish
--------------------------------------------------------------------------------
/schema/tns.xsd:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
593 |
594 |
595 |
596 |
597 |
598 |
599 |
600 |
601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
610 |
611 |
612 |
613 |
614 |
615 |
616 |
617 |
618 |
619 |
620 |
621 |
622 |
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
635 |
636 |
637 |
638 |
639 |
640 |
641 |
642 |
643 |
644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 |
652 |
653 |
654 |
655 |
656 |
657 |
658 |
659 |
660 |
661 |
662 |
663 |
664 |
665 |
666 |
667 |
668 |
669 |
670 |
671 |
672 |
673 |
674 |
675 |
676 |
677 |
678 |
679 |
680 |
681 |
682 |
683 |
684 |
685 |
686 |
687 |
688 |
689 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
700 |
701 |
702 |
703 |
704 |
705 |
706 |
707 |
708 |
709 |
710 |
711 |
712 |
713 |
714 |
715 |
716 |
717 |
718 |
719 |
720 |
721 |
722 |
723 |
724 |
725 |
726 |
727 |
728 |
729 |
730 |
731 |
732 |
733 |
734 |
735 |
736 |
737 |
738 |
739 |
740 |
741 |
742 |
743 |
744 |
745 |
746 |
747 |
748 |
749 |
750 |
751 |
752 |
753 |
754 |
755 |
756 |
757 |
758 |
759 |
760 |
761 |
762 |
763 |
764 |
765 |
766 |
767 |
768 |
769 |
770 |
771 |
772 |
773 |
774 |
775 |
776 |
777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
788 |
789 |
790 |
791 |
792 |
793 |
794 |
795 |
796 |
797 |
798 |
799 |
800 |
801 |
802 |
803 |
804 |
805 |
806 |
807 |
808 |
809 |
810 |
811 |
812 |
813 |
814 |
815 |
816 |
817 |
818 |
819 |
820 |
821 |
822 |
823 |
824 |
825 |
826 |
827 |
828 |
829 |
830 |
831 |
832 |
833 |
834 |
835 |
836 |
837 |
838 |
839 |
840 |
841 |
842 |
843 |
844 |
845 |
846 |
847 |
848 |
849 |
850 |
851 |
852 |
853 |
854 |
855 |
856 |
857 |
858 |
859 |
860 |
861 |
862 |
863 |
864 |
865 |
866 |
867 |
868 |
869 |
870 |
871 |
872 |
873 |
874 |
875 |
876 |
877 |
878 |
879 |
880 |
881 |
882 |
883 |
884 |
885 |
886 |
887 |
888 |
889 |
890 |
891 |
892 |
893 |
894 |
895 |
896 |
897 |
898 |
899 |
900 |
901 |
902 |
903 |
904 |
905 |
906 |
907 |
908 |
909 |
910 |
911 |
912 |
913 |
914 |
915 |
916 |
1058 |
1059 |
1060 |
1061 |
1062 |
1063 |
1064 |
1065 |
1066 |
1067 |
1068 |
1069 |
1070 |
1071 |
1072 |
1073 |
1074 |
1075 |
1076 |
1077 |
1078 |
1079 |
1080 |
1081 |
1082 |
1083 |
1084 |
1085 |
1086 |
1087 |
--------------------------------------------------------------------------------
/src/.npmignore:
--------------------------------------------------------------------------------
1 | *.map
2 | *.ts
3 | !*.d.ts
4 | references.d.ts
5 | tsconfig.json
6 | package-lock.json
--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
1 | [](https://twitter.com/davecoffin)
2 |
3 | # nativescript-filterable-listpicker
4 |
5 | The native listpickers on iOS and Android are not great for huge lists that users may want to filter. This plugin is a modal that offers filtering capabilities.
6 |
7 | 
8 |
9 |
10 | ## Installation
11 |
12 | ```
13 | tns plugin add nativescript-filterable-listpicker
14 | ```
15 |
16 | ## Usage
17 | In order to use the plugin, you must place it on your page within a namespace. Wherever you place it, thats where it will display when invoked, but it will be hidden until you invoke it. The best way to use this is to place it on top of your page content like this:
18 |
19 | ### NativeScript Core
20 |
21 | ```xml
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | ```
39 |
40 | Then in your code...
41 | ```ts
42 | public showPicker() {
43 | page.getViewById('myfilter').show();
44 | }
45 |
46 | public itemTapped(args) {
47 | alert(args.selectedItem + ' was tapped!')
48 | }
49 |
50 | public cancelFilterableList() {
51 | // this gets called if the user cancels the modal.
52 | }
53 | ```
54 |
55 | ### Use as Autocomplte
56 | You can use nativescript-filterable-list-picker as autocomplete from your backend server or third party provider like `Google Place API` please see demo
57 | If you bind source before use `autocomplete` function this resources will be cloned and until the `TextField` is empty the Filterable-listpicker wil be populated with that resources, if you write then the autocomplete take the relay.
58 | ```ts
59 | let API_KEY = "__YOUR_GOOGLE_API_KEY";
60 |
61 | private filterableListpicker: FilterableListpicker;
62 | private page: Page;
63 | constructor(page: Page) {
64 | super();
65 | this.page = page;
66 | // Get filterableListpicker instance
67 | this.filterableListpicker = (this.page.getViewById('myfilter'));
68 | MyModel = this;
69 | }
70 |
71 | public showPickerAsAutocomplete() {
72 | // IMPORTANT : Set `isAutocomplete` to true to enable `textChange` listener
73 | this.filterableListpicker.isAutocomplete = true;
74 | this.filterableListpicker.show(frame.topmost());
75 |
76 | this.filterableListpicker.autocomplete((data) => {
77 | let url = placesApiUrl + "?input=" + data.value + "&language=fr_FR&key=" + API_KEY;
78 | http.getJSON(url).then((res) => {
79 | //console.dir(res)
80 | const airportsCollection = res.predictions;
81 | const items = [];
82 | for (let i = 0; i < airportsCollection.length; i++) {
83 | items.push({
84 | title: airportsCollection[i].description,
85 | description: "",
86 | source: airportsCollection[i]
87 | });
88 |
89 | }
90 | this.set("listitems", items)
91 | }).catch((err) => {
92 | const message = 'Error fetching remote data from ' + url + ': ' + err.message;
93 | console.log(message);
94 | alert(message);
95 | });
96 | });
97 | }
98 | ```
99 |
100 | ### NativeScript Angular
101 | In angular, you have to register the element in your app component like so:
102 |
103 | ```ts
104 | // app.component.ts
105 | import {registerElement} from "nativescript-angular/element-registry";
106 | registerElement("FilterableListpicker", () => require("nativescript-filterable-listpicker").FilterableListpicker);
107 | ```
108 |
109 | Then use it in your templates like...
110 |
111 | ```xml
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | ```
121 |
122 | Then in your code...
123 | ```ts
124 | @ViewChild('myfilter') myfilter: ElementRef;
125 |
126 | cancelFilterableList() {
127 | console.log('canceled');
128 | }
129 |
130 | itemTapped(args) {
131 | alert(args.selectedItem)
132 | }
133 |
134 | showPicker() {
135 | this.myfilter.nativeElement.show();
136 | }
137 | ```
138 |
139 | Note: When calling show, as of 2.1.0 you can pass in a viewContainer that the plugin will use to find the necessary elements. This allows you to
140 | use the list picker in modals now! For example, you could pass in a Page element, or a GridLayout that contains the FilterableListpicker element like this:
141 |
142 | in android:
143 | ```ts
144 | @ViewChild('myContainer') myContainer: ElementRef;
145 |
146 | public function showPicker() {
147 | this.myfilter.nativeElement.show(this.myContainer.nativeElement);
148 | }
149 | ```
150 |
151 | Note: You can change the items in the filterable list easily by just setting the source to an array in your observable, and changing then changing the array. Take a look at the demo project for an example.
152 |
153 | ### Source Array
154 | As of version 2.0, you can supply either an array of strings, or an array of objects. The object must contain a parameter called `title`, and thats what will display as the title. Check out the gif above to see what the picker looks like when supplying an object. The 3 parameters the picker will display
155 | if in your object are:
156 |
157 | | Property | Description|
158 | | --- | --- |
159 | | title | The title, this is what your list will be filtered on, and it will display in bold. |
160 | | image | OPTIONAL: This will display to the left of the title. |
161 | | description | OPTIONAL: This will display under the title smaller and in gray. |
162 |
163 | Here's some example code:
164 | ```ts
165 | public listitems = [
166 | {
167 | "image": "https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300",
168 | "title": "Brown Bear",
169 | "description": "Brown bear brown bear, what do you see?"
170 | },
171 | {
172 | "image": "http://icons.veryicon.com/png/Flag/Rounded%20World%20Flags/Indonesia%20Flag.png",
173 | "title": "Red Bird"
174 | },
175 | {
176 | "title": "Purple Cat",
177 | "description": "Why are we teaching kids there are purple cats?"
178 | }
179 | ];
180 |
181 | ```
182 |
183 | You could, for example, massage the results of an API call and use the result array of objects to display in the picker. Other parameters can be present in the objects in the array (like IDs for example), the picker will use `title`, `image` and `description` if they are present. Although `title` must be present.
184 |
185 | Here's how it will look in the picker:
186 |
187 |
188 |
189 |
190 | ### Webpack
191 | Thanks to Mike Richards, this plugin is now compatible with webpack. Just follow the webpack instructions carefully, in particular the `bundle-config.js` and `require("bundle-entry-points");` parts. See more here.
192 |
193 |
194 | ## API
195 |
196 | The UI element accepts the following parameters:
197 |
198 | | Property | Default | Description |
199 | | --- | --- | --- |
200 | | source | REQUIRED | The array of strings or objects (see Source Array above) you want to display in the picker. |
201 | | hintText | Enter text to filter... | This is the text that shows up as the hint for the textfield used to filter the list. |
202 | | listWidth | 300 | The width of the modal element. |
203 | | listHeight | 300 | The height of the modal element. |
204 | | focusOnShow | false | true or false, indicating if the textfield should be in focus (and the keyboard open) when the listpicker is shown. |
205 | | dimmerColor | rgba(0,0,0,0.8) | The color of the dimmer behind the modal. You can set it to `transparent`, or any color supported by NativeScript (ex: `rgba(255,255,255,0.5)`, `red`, `#0088CC`) |
206 | | blur | none | iOS only. Pass `dark` or `light` for a dark or light blur effect. If this is passed, dimmerColor is ignored on iOS but respected on Android. |
207 | | itemTapped(args) | | This is the function called when an item in the list is tapped. The modal is automically dismissed, and you can access to item tapped with `args.selectedItem`. |
208 | | canceled | | This is just a function to call if the user cancels, probably rarely neccessary. |
209 | | showCancel | | Show cancel button or not. |
210 | | enableSearch | | Allow searching by showing the TextField at the top. |
211 | | autocomplete(fn: Function) | | Allow binding listener `textChangeEvent` to Textfield and use the plugin as `autocomplete` eg.: Google Place API. |
212 |
213 | ## CSS Styling
214 |
215 | ```css
216 | .flp-container .flp-list-container {
217 | border-radius: 10;
218 | }
219 | .flp-container .flp-list-container .flp-listview {
220 | background-color: white;
221 | }
222 |
223 | .flp-container .flp-list-container .flp-listview .flp-row {
224 | background-color: white;
225 | }
226 | /* .flp-container .flp-list-container .flp-listview .flp-row .flp-row-container {
227 | padding: 10;
228 | } */
229 | .flp-container .flp-list-container .flp-listview .flp-row .flp-image {
230 | margin: 10 0 10 5;
231 | }
232 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container {
233 | margin: 10 10 10 5;
234 | /* margin: 0 10 0 10; */
235 | }
236 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-title {
237 | font-weight: bold;
238 | font-size: 16;
239 | }
240 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-description {
241 | color: gray;
242 | font-size: 13;
243 | }
244 | .flp-container .flp-list-container .flp-listview .flp-row .flp-title-container .flp-no-title {
245 | margin-left: 15;
246 | padding: 10 0;
247 | }
248 | .flp-container .flp-list-container .flp-listview .flp-row .flp-item-selected {
249 | color: lightblue;
250 | }
251 |
252 | .flp-container .flp-hint-field {
253 | padding: 10 15;
254 | height: 40;
255 | background-color: #E0E0E0;
256 | border-radius: 10 10 0 0;
257 | }
258 |
259 | .flp-container .flp-cancel-container {
260 | background-color: #E0E0E0;
261 | height: 40;
262 | border-radius: 0 0 10 10;
263 | }
264 |
265 | .flp-container .flp-cancel-container .flp-btn-cancel {
266 | font-weight: bold;
267 | height: 40;
268 | background-color: transparent;
269 | border-color: transparent;
270 | border-width: 1;
271 | font-size: 12;
272 | }
273 | ```
274 |
275 |
276 | ## License
277 |
278 | Apache License Version 2.0, January 2004
279 |
--------------------------------------------------------------------------------
/src/assets/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/src/assets/download.png
--------------------------------------------------------------------------------
/src/filterable-listpicker.ts:
--------------------------------------------------------------------------------
1 | import { ObservableArray } from "tns-core-modules/data/observable-array";
2 |
3 | import {
4 | View,
5 | Property,
6 | booleanConverter,
7 | PropertyChangeData
8 | } from "tns-core-modules/ui/core/view";
9 | import { AnimationCurve } from "tns-core-modules/ui/enums";
10 | import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
11 | import { TextField } from "tns-core-modules/ui/text-field";
12 | import { isIOS } from "tns-core-modules/platform";
13 | import * as enums from "tns-core-modules/ui/enums";
14 |
15 | let builder = require("tns-core-modules/ui/builder");
16 |
17 | let unfilteredSource: Array = [];
18 | let filtering: boolean = false;
19 | export const listWidthProperty = new Property({
20 | name: "listWidth",
21 | defaultValue: "300"
22 | });
23 | export const listHeightProperty = new Property({
24 | name: "listHeight",
25 | defaultValue: "300"
26 | });
27 | export const headingTitleProperty = new Property({
28 | name: "headingTitle",
29 | defaultValue: undefined
30 | });
31 | export const enableSearchProperty = new Property(
32 | {
33 | name: "enableSearch",
34 | defaultValue: true,
35 | valueConverter: booleanConverter
36 | }
37 | );
38 | export const showCancelProperty = new Property({
39 | name: "showCancel",
40 | defaultValue: true,
41 | valueConverter: booleanConverter
42 | });
43 | export const dimmerColorProperty = new Property({
44 | name: "dimmerColor",
45 | defaultValue: "rgba(0,0,0,0.8)"
46 | });
47 | export const blurProperty = new Property({
48 | name: "blur",
49 | defaultValue: "none"
50 | });
51 | export const focusOnShowProperty = new Property({
52 | name: "focusOnShow",
53 | defaultValue: false
54 | });
55 | export const hideFilterProperty = new Property({
56 | name: "hideFilter",
57 | defaultValue: false
58 | });
59 | export const hintTextProperty = new Property({
60 | name: "hintText",
61 | defaultValue: "Enter text to filter..."
62 | });
63 | export const sourceProperty = new Property<
64 | FilterableListpicker,
65 | ObservableArray
66 | >({
67 | name: "source",
68 | defaultValue: undefined,
69 | affectsLayout: true,
70 | valueChanged: (target, oldValue, newValue) => {
71 | if (!filtering) {
72 | while (unfilteredSource.length) unfilteredSource.pop();
73 | newValue.forEach(element => {
74 | unfilteredSource.push(element);
75 | });
76 | }
77 | }
78 | });
79 |
80 | export class FilterableListpicker extends GridLayout {
81 | constructor() {
82 | super();
83 | this._searchFilter = this._searchFilterFn.bind(this);
84 | }
85 |
86 | onLoaded() {
87 | super.onLoaded();
88 | //let innerComponent = builder.load(__dirname + '/filterable-listpicker.xml') as View;
89 | let innerComponent = builder.Builder.parse(`
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | `);
115 | innerComponent.bindingContext = this;
116 | this.addChild(innerComponent);
117 | }
118 | public static canceledEvent = "canceled";
119 | public static itemTappedEvent = "itemTapped";
120 | public source: any;
121 | public dimmerColor: any;
122 | public hintText: any;
123 | public hideFilter: any;
124 | public enableSearch: boolean;
125 | public blur: any;
126 | private blurView: any = false;
127 | public focusOnShow: any;
128 | private _container: GridLayout;
129 | private _picker: GridLayout;
130 | private _textField: TextField;
131 | private _searchFilter: (data: any) => void;
132 | private _isAutocomplete: boolean = false;
133 | private _suggestions: any;
134 |
135 | visibility: any = enums.Visibility.collapse;
136 |
137 | loadedContainer(args) {
138 | this._container = args.object;
139 | }
140 |
141 | loadedInnerContainer(args) {
142 | this._picker = args.object;
143 | }
144 |
145 | autocomplete(fn: Function) {
146 | if(!this.isAutocomplete)
147 | return;
148 | if(typeof fn !== "function")
149 | throw("[FilterableListPicker]: autotcomplete params must be a Function type !");
150 |
151 | /**
152 | * Populate sources with suggestions if is defined is usefull if we have a most use list
153 | * for the moment user can't search into suggestion .. writing into Textfield will active autocomplete
154 | * */
155 | if(!this.source)
156 | this.source = [];
157 |
158 | // Copy suggestion list to bind it when Textfield is empty
159 | this._suggestions = this.source;
160 |
161 | // bind custome autocomplete function
162 | this._textField.on("textChange", (data: PropertyChangeData) => {
163 | if(!data.value && this._suggestions.length > 0) {
164 | this.set("source", this._suggestions)
165 | this.notifyPropertyChange("source", this._suggestions);
166 | console.log(this._suggestions);
167 | return;
168 | }
169 | fn(data);
170 | })
171 | }
172 |
173 | loadedTextField(args) {
174 | this._textField = args.object;
175 | }
176 |
177 | public choose(args) {
178 | let item = this.source[args.index];
179 | this.hide();
180 | this.notify({
181 | eventName: "itemTapped",
182 | object: this,
183 | selectedItem: item
184 | });
185 | }
186 |
187 | public cancel() {
188 | this.notify({
189 | eventName: "canceled",
190 | object: this
191 | });
192 | this.hide();
193 | }
194 |
195 | public hide() {
196 | if (this.enableSearch) {
197 | if (this._textField.dismissSoftInput) this._textField.dismissSoftInput();
198 | this._textField.text = "";
199 | }
200 | if (this.blurView) {
201 | UIView.animateWithDurationAnimationsCompletion(
202 | 0.3,
203 | () => {
204 | this.blurView.effect = null;
205 | },
206 | () => {
207 | this.blurView.removeFromSuperview();
208 | }
209 | );
210 | } else {
211 | this._container
212 | .animate({
213 | opacity: 0,
214 | duration: 200
215 | })
216 | .then(_ => {}, err => {});
217 | }
218 |
219 | if (this.enableSearch) {
220 | // cleanup event when closing
221 | this._textField.off("textChange", this._searchFilter);
222 | }
223 |
224 | return this._picker
225 | .animate({
226 | scale: { x: 0.7, y: 0.7 },
227 | opacity: 0,
228 | duration: 400,
229 | curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
230 | })
231 | .then(
232 | () => {
233 | this.visibility = enums.Visibility.collapse;
234 | this._container.visibility = "collapse";
235 | },
236 | err => {}
237 | );
238 | }
239 |
240 | public show() {
241 | this.visibility = enums.Visibility.visible;
242 | this._container.visibility = "visible";
243 |
244 | this.source = unfilteredSource.filter(i => true);
245 | if (isIOS && this.blur && this.blur != "none") {
246 | let iosView: UIView = this._container.ios;
247 | let effectView = UIVisualEffectView.alloc().init();
248 | effectView.frame = CGRectMake(
249 | 0,
250 | 0,
251 | iosView.bounds.size.width,
252 | iosView.bounds.size.height
253 | );
254 | effectView.autoresizingMask =
255 | UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
256 | this.blurView = effectView;
257 | iosView.addSubview(effectView);
258 | iosView.sendSubviewToBack(effectView);
259 | UIView.animateWithDurationAnimationsCompletion(
260 | 0.3,
261 | () => {
262 | let theme = UIBlurEffectStyle.Dark;
263 | if (this.blur == "light") theme = UIBlurEffectStyle.Light;
264 | effectView.effect = UIBlurEffect.effectWithStyle(theme);
265 | },
266 | () => {
267 | // the animation is complete.
268 | }
269 | );
270 | } else {
271 | this._container.opacity = 0;
272 | this._container.backgroundColor = this.dimmerColor;
273 | this._container
274 | .animate({
275 | opacity: 1,
276 | duration: 200
277 | })
278 | .then(_ => {}, err => {});
279 | }
280 |
281 | this._picker.scaleX = 0.7;
282 | this._picker.scaleY = 0.7;
283 | this._picker.opacity = 0;
284 | this._picker
285 | .animate({
286 | scale: { x: 1, y: 1 },
287 | opacity: 1,
288 | duration: 400,
289 | curve: AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
290 | })
291 | .then(_ => {}, err => {});
292 |
293 | if (this.enableSearch) {
294 | if (JSON.parse(this.focusOnShow)) this._textField.focus();
295 | this._textField.on("textChange", this._searchFilter);
296 | }
297 | }
298 |
299 | get isAutocomplete(): boolean {
300 | return this._isAutocomplete;
301 | }
302 |
303 | set isAutocomplete(val: boolean) {
304 | if(val === false) {
305 | // remve listener for TextField
306 | console.log(val)
307 | this._textField.off("textChange");
308 | }
309 | this._isAutocomplete = val;
310 | }
311 |
312 | private _searchFilterFn(data: any) {
313 | filtering = true;
314 | this.source = unfilteredSource.filter(item => {
315 | if (item.title) {
316 | return (
317 | item.title.toLowerCase().indexOf(data.value.toLowerCase()) !== -1
318 | );
319 | } else {
320 | return item.toLowerCase().indexOf(data.value.toLowerCase()) !== -1;
321 | }
322 | });
323 | filtering = false;
324 | }
325 | }
326 |
327 | listWidthProperty.register(FilterableListpicker);
328 | listHeightProperty.register(FilterableListpicker);
329 | headingTitleProperty.register(FilterableListpicker);
330 | enableSearchProperty.register(FilterableListpicker);
331 | showCancelProperty.register(FilterableListpicker);
332 | dimmerColorProperty.register(FilterableListpicker);
333 | focusOnShowProperty.register(FilterableListpicker);
334 | hideFilterProperty.register(FilterableListpicker);
335 | blurProperty.register(FilterableListpicker);
336 | hintTextProperty.register(FilterableListpicker);
337 | sourceProperty.register(FilterableListpicker);
338 |
339 | export interface SourcesInterface {
340 | title: string;
341 | image?: any;
342 | description?: string;
343 | }
344 |
345 | export class SourcesDataItem implements SourcesInterface {
346 | title: string;
347 | image?: any;
348 | description?: string;
349 |
350 | constructor(title: string, image?: any, description?: string)
351 | {
352 | this.title = title;
353 | this.image = image;
354 | this.description = description;
355 | }
356 | }
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | import { ObservableArray } from "tns-core-modules/data/observable-array";
2 | import { Property } from "tns-core-modules/ui/core/view";
3 | import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
4 | export declare const listWidthProperty: Property;
5 | export declare const listHeightProperty: Property;
6 | export declare const headingTitleProperty: Property;
7 | export declare const enableSearchProperty: Property;
8 | export declare const showCancelProperty: Property;
9 | export declare const dimmerColorProperty: Property;
10 | export declare const blurProperty: Property;
11 | export declare const focusOnShowProperty: Property;
12 | export declare const hideFilterProperty: Property;
13 | export declare const hintTextProperty: Property;
14 | export declare const sourceProperty: Property>;
15 | export declare class FilterableListpicker extends GridLayout {
16 | constructor();
17 | onLoaded(): void;
18 | static canceledEvent: string;
19 | static itemTappedEvent: string;
20 | source: any;
21 | dimmerColor: any;
22 | hintText: any;
23 | hideFilter: any;
24 | enableSearch: boolean;
25 | blur: any;
26 | private blurView;
27 | focusOnShow: any;
28 | private _container;
29 | private _picker;
30 | private _textField;
31 | private _searchFilter;
32 | private _isAutocomplete;
33 | private _suggestions;
34 | visibility: any;
35 | loadedContainer(args: any): void;
36 | loadedInnerContainer(args: any): void;
37 | autocomplete(fn: Function): void;
38 | loadedTextField(args: any): void;
39 | choose(args: any): void;
40 | cancel(): void;
41 | hide(): Promise;
42 | show(): void;
43 | isAutocomplete: boolean;
44 | private _searchFilterFn;
45 | }
46 |
--------------------------------------------------------------------------------
/src/nsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "useLegacyWorkflow": true
3 | }
--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nativescript-filterable-listpicker",
3 | "version": "3.0.0",
4 | "description": "A modal list picker with filtering capabilities.",
5 | "main": "filterable-listpicker",
6 | "typings": "index.d.ts",
7 | "nativescript": {
8 | "tns-android": {
9 | "version": "6.3.0"
10 | },
11 | "tns-ios": {
12 | "version": "6.3.0"
13 | },
14 | "plugin": {
15 | "nan": "true",
16 | "pan": "true",
17 | "vue": "true",
18 | "core3": "true",
19 | "category": "Interface"
20 | }
21 | },
22 | "scripts": {
23 | "tsc": "tsc",
24 | "build": "npm i && tsc",
25 | "postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && cd ../src",
26 | "test.android": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch",
27 | "test.ios": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch",
28 | "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\"",
29 | "plugin.tscwatch": "npm run tsc -- -w",
30 | "demo.ios": "npm run tsc && cd ../demo && tns run ios --emulator",
31 | "debug.ios": "npm run tsc && cd ../demo && tns debug ios --emulator",
32 | "demo.android": "npm run tsc && cd ../demo && tns run android",
33 | "debug.android": "npm run tsc && cd ../demo && tns debug android",
34 | "demo.reset": "cd ../demo && npx rimraf -- hooks node_modules platforms package-lock.json",
35 | "plugin.prepare": "npm run tsc && cd ../demo && tns plugin remove @proplugins/nativescript-filterable-listpicker && tns plugin add ../src && npx rimraf -- package-lock.json",
36 | "clean": "cd ../demo && npx rimraf -- hooks node_modules platforms package-lock.json && cd ../src && npx rimraf -- node_modules",
37 | "ci.tslint": "npm i && tslint '**/*.ts' --config '../tslint.json' --exclude '**/node_modules/**'"
38 | },
39 | "keywords": [
40 | "NativeScript",
41 | "JavaScript",
42 | "Android",
43 | "iOS"
44 | ],
45 | "author": {
46 | "name": "Dave Coffin",
47 | "email": "dave@davecoffin.com"
48 | },
49 | "contributors": [
50 | {
51 | "name": "Nathanael Walker",
52 | "email": "walkerrunpdx@gmail.com",
53 | "url": "https://github.com/NathanWalker"
54 | },
55 | {
56 | "name": "MultiShiv19",
57 | "email": "sp@shiv19.com",
58 | "url": "https://github.com/shiv19"
59 | },
60 | {
61 | "name": "BADER ALDIN Kefah",
62 | "email": "kefah.bader@gmail.com",
63 | "url": "https://github.com/kefahB"
64 | }
65 | ],
66 | "repository": {
67 | "url": "https://git.master.technology/proplugins/nativescript-filterable-listpicker",
68 | "type": "git"
69 | },
70 | "bugs": {
71 | "url": "https://git.master.technology/proplugins/nativescript-filterable-listpicker/issues"
72 | },
73 | "license": "Apache-2.0",
74 | "homepage": "https://git.master.technology/proplugins/nativescript-filterable-listpicker",
75 | "readmeFilename": "README.md",
76 | "devDependencies": {
77 | "rimraf": "^2.5.0",
78 | "tns-core-modules": "^6.0.0",
79 | "tns-platform-declarations": "^6.0.0",
80 | "tslint": "^5.0.0",
81 | "typescript": "^3.7.4"
82 | },
83 | "dependencies": {},
84 | "bootstrapper": "nativescript-plugin-seed"
85 | }
86 |
--------------------------------------------------------------------------------
/src/platforms/android/nativescript_filterable_listpicker.aar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davecoffin/nativescript-filterable-listpicker/34cbf49b13adf2ff831f98330aa4d45fc4d0d7ee/src/platforms/android/nativescript_filterable_listpicker.aar
--------------------------------------------------------------------------------
/src/references.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "declaration": true,
6 | "removeComments": true,
7 | "noLib": false,
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "skipLibCheck": true,
11 | "lib": [
12 | "es2017",
13 | "dom",
14 | "es6"
15 | ],
16 | "sourceMap": true,
17 | "pretty": true,
18 | "allowUnreachableCode": false,
19 | "allowUnusedLabels": false,
20 | "noEmitHelpers": true,
21 | "noEmitOnError": false,
22 | "noImplicitAny": false,
23 | "noImplicitReturns": true,
24 | "noImplicitUseStrict": false,
25 | "noFallthroughCasesInSwitch": true
26 | },
27 | "exclude": [
28 | "node_modules"
29 | ],
30 | "compileOnSave": false
31 | }
32 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "class-name": true,
4 | "comment-format": [
5 | true,
6 | "check-space"
7 | ],
8 | "indent": [
9 | true,
10 | "spaces"
11 | ],
12 | "no-duplicate-variable": true,
13 | "no-eval": true,
14 | "no-internal-module": true,
15 | "no-trailing-whitespace": true,
16 | "no-var-keyword": true,
17 | "one-line": [
18 | true,
19 | "check-open-brace",
20 | "check-whitespace"
21 | ],
22 | "quotemark": [
23 | false,
24 | "double"
25 | ],
26 | "semicolon": [
27 | true,
28 | "always"
29 | ],
30 | "triple-equals": [
31 | true,
32 | "allow-null-check"
33 | ],
34 | "typedef-whitespace": [
35 | true,
36 | {
37 | "call-signature": "nospace",
38 | "index-signature": "nospace",
39 | "parameter": "nospace",
40 | "property-declaration": "nospace",
41 | "variable-declaration": "nospace"
42 | }
43 | ],
44 | "variable-name": [
45 | true,
46 | "ban-keywords"
47 | ],
48 | "whitespace": [
49 | true,
50 | "check-branch",
51 | "check-decl",
52 | "check-operator",
53 | "check-separator",
54 | "check-type"
55 | ]
56 | }
57 | }
--------------------------------------------------------------------------------