├── .gitignore ├── LICENSE ├── readme.md ├── uipickertable-demo.gif ├── uipickertable-sample.js └── uipickertable.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Raymond Velasquez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # UIPickerTable 2 | 3 | `UIPickerTable` is a [Scriptable](https://scriptable.app) class module that extends [`UITable`](https://docs.scriptable.app/uitable/) making each row a selectable item. 4 | 5 | ![gif of running example](uipickertable-demo.gif) 6 | 7 | --- 8 | 9 | ## -new UIPickerTable 10 | 11 | Creates an intance of a picker table. 12 | 13 | ```javascript 14 | const UIPickerTable = importModule('uipickertable') 15 | const table = new UIPickerTable(options) 16 | ``` 17 | 18 | ### Parameters 19 | 20 | `options` - a JSON value specifying customizations for the table. 21 | 22 | - `multiSelect` - specifies whether the table will provide single or multiple selections. Default is `true`. 23 | - `selectedBackgroundColor` - The color to use as the background color for selected rows. Default is `#a8a8a8`. 24 | 25 | --- 26 | 27 | ## -addRow 28 | 29 | Overrides `UITable.addRow()` with an additional parameter to indicate if the row is selected. Default is `false`. the `selected` parameter is ignored if `.multiselect` is `false`. 30 | 31 | ```javascript 32 | table.addRow(row: UITableRow, selected: bool) 33 | ``` 34 | 35 | ### Parameters 36 | 37 | `row` - the row to add 38 | 39 | --- 40 | 41 | ## -selections: number[] 42 | 43 | An array containing the indices of the selected rows. The order of the indices follows the order they are selected. 44 | 45 | ```javascript 46 | table.selections: integer[] 47 | ``` 48 | 49 | --- 50 | 51 | ## Example 52 | 53 | Example basic usage below. Download [uipickertable-sample.js](uipickertable-sample.js) for another example. 54 | 55 | ```javascript 56 | const UIPickerTable = importModule('uipickertable') 57 | const table = new UIPickerTable() 58 | 59 | const row1 = new UITableRow() 60 | row1.addText('hello') 61 | row1.addText('world') 62 | table.addRow(row1, true) // selected by default 63 | 64 | const row2 = new UITableRow() 65 | row2.addText('foo') 66 | row2.addText('bar') 67 | table.addRow(row2) 68 | 69 | await table.present() 70 | 71 | log(table.selections) // [0] 72 | ``` 73 | 74 | ![tracking pixel](https://lynks.cc/uipickertable/track) -------------------------------------------------------------------------------- /uipickertable-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/supermamon/scriptable-uipickertable/5764aa8b0becf872154ac44d445be3f6f0599c64/uipickertable-demo.gif -------------------------------------------------------------------------------- /uipickertable-sample.js: -------------------------------------------------------------------------------- 1 | // Variables used by Scriptable. 2 | // These must be at the very top of the file. Do not edit. 3 | // icon-color: teal; icon-glyph: tasks; 4 | 5 | 6 | /* ---------------------------------------------- 7 | Script : uipickertable-sample.js 8 | Author : dev@supermamon.com 9 | Version : 1.0.0 10 | Description : 11 | Example script on how to use UIPickerTable 12 | ---------------------------------------------- */ 13 | 14 | const UIPickerTable = importModule('uipickertable') 15 | 16 | const data = [ 17 | {col1: "val1-1", col2: "val1-2", col3: "val1-3"}, 18 | {col1: "val2-1", col2: "val2-2", col3: "val2-3"}, 19 | {col1: "val3-1", col2: "val3-2", col3: "val3-3"}, 20 | {col1: "val4-1", col2: "val4-2", col3: "val4-3"}, 21 | ] 22 | 23 | const table = new UIPickerTable({selectedBackgroundColor: Color.blue()}) 24 | 25 | const header = new UITableRow() 26 | header.isHeader = true 27 | header.addText('Col1') 28 | header.addText('Col2') 29 | header.addText('Col3') 30 | table.addRow(header) 31 | 32 | data.forEach( (item,i) => { 33 | 34 | const row = new UITableRow() 35 | row.height = 40 36 | row.addText(item.col1) 37 | row.addText(item.col2) 38 | row.addText(item.col3) 39 | 40 | const selected = i==2 // make third item selected 41 | 42 | table.addRow(row, selected) 43 | 44 | }) 45 | 46 | await table.present() 47 | 48 | const alert = new Alert() 49 | alert.message = `[${table.selections}]` 50 | await alert.present() 51 | 52 | -------------------------------------------------------------------------------- /uipickertable.js: -------------------------------------------------------------------------------- 1 | // Variables used by Scriptable. 2 | // These must be at the very top of the file. Do not edit. 3 | // icon-color: purple; icon-glyph: table; 4 | 5 | /* ---------------------------------------------- 6 | Script : uipickertable.js 7 | Author : dev@supermamon.com 8 | Version : 1.0.0 9 | Description : 10 | UIPickerTable is a class that extends UITable 11 | making each row a selectable item. 12 | Docs : github.com/supermamon/scriptable-uipickertable 13 | ---------------------------------------------- */ 14 | 15 | // private variables 16 | const _private = { 17 | rows: [] 18 | } 19 | 20 | class UIPickerTable extends UITable { 21 | 22 | constructor({multiselect=true, selectedBackgroundColor=(new Color('#a8a8a8'))}={}) { 23 | super() 24 | this.multiselect = multiselect 25 | this.selectedBackgroundColor = selectedBackgroundColor 26 | this.selections = [] 27 | } 28 | 29 | addRow(uitablerow, isSelected=false) { 30 | 31 | var table = this 32 | 33 | // if header, just add the row. 34 | if (uitablerow.isHeader) { 35 | _private.rows.push(uitablerow) 36 | super.addRow(uitablerow) 37 | return table 38 | } 39 | 40 | // save attributes 41 | uitablerow['selected'] = isSelected && table.multiselect 42 | // save the original properties 43 | uitablerow['originalBackgroundColor'] = uitablerow.backgroundColor 44 | uitablerow['originalOnSelect'] = uitablerow.onSelect 45 | 46 | _private.rows.push(uitablerow) 47 | 48 | // highlight if selected 49 | if (uitablerow['selected']) { 50 | uitablerow.backgroundColor = table.selectedBackgroundColor 51 | table.selections.push(_private.rows.length-1) 52 | } 53 | 54 | // toggle selection and background color it tapped 55 | uitablerow.onSelect = (i) => { 56 | if (table.multiselect) { 57 | // toggle 58 | _private.rows[i]['selected'] = !_private.rows[i]['selected'] 59 | 60 | // set background color and update selections property 61 | if (_private.rows[i]['selected']) { 62 | table.selections.push(i) 63 | uitablerow.backgroundColor = table.selectedBackgroundColor 64 | } else { 65 | var idx = table.selections.indexOf(i) 66 | table.selections.splice(idx, 1); 67 | uitablerow.backgroundColor = uitablerow.originalBackgroundColor 68 | } 69 | table.reload() 70 | } else { // single select 71 | table.selections = [i] 72 | uitablerow.backgroundColor = table.selectedBackgroundColor 73 | table.reload() 74 | } 75 | 76 | if (uitablerow.originalOnSelect) { 77 | uitablerow.originalOnSelect(i) 78 | } 79 | 80 | } 81 | 82 | // prevent dismissing table view 83 | uitablerow.dismissOnSelect = !this.multiselect 84 | 85 | // insert the row 86 | super.addRow(uitablerow) 87 | 88 | // return table for chaining 89 | return table 90 | 91 | } 92 | } 93 | 94 | module.exports = UIPickerTable 95 | --------------------------------------------------------------------------------