]>
Commit | Line | Data |
---|---|---|
24c7594d BB |
1 | # Atom SpacePen Views [![Build Status](https://travis-ci.org/atom/atom-space-pen-views.svg?branch=master)](https://travis-ci.org/atom/atom-space-pen-views) |
2 | ||
3 | This library contains SpacePen views that used to be provided as part of Atom | |
4 | Core. `TextEditorView`, `SelectListView`, and `ScrollView` exports from the | |
5 | `atom` module are now deprecated will soon be removed, but can still be used in | |
6 | packages by depending on this library in your `package.json`. | |
7 | ||
8 | ## TextEditorView | |
9 | ||
10 | A text editor can now be created in Atom by inserting an `<atom-text-editor>` | |
11 | tag in any location you want an editor. However, if you still want to use the | |
12 | SpacePen view in order to conveniently convert packages off the deprecated | |
13 | export, you can use this class. | |
14 | ||
15 | ### Example | |
16 | ||
17 | ```coffee | |
18 | {View} = require 'space-pen' | |
19 | {TextEditorView} = require 'atom-space-pen-views' | |
20 | ||
21 | class MyView extends View | |
22 | @content: -> | |
23 | @div => | |
24 | @div "Type your answer:" | |
25 | @subview 'answer', new TextEditorView(mini: true) | |
26 | ``` | |
27 | ||
28 | ### Constructor Params | |
29 | ||
30 | Pass an optional params object to the constructor with the following keys: | |
31 | ||
32 | * `mini` If `true`, will construct a single-line editor for use as an input | |
33 | field. | |
34 | * `placeholderText` A string of placeholder text to appear in the editor when | |
35 | empty | |
36 | ||
37 | ### Methods | |
38 | ||
39 | #### `::getModel` | |
40 | ||
41 | Returns the underlying `TextEditor` model instance. | |
42 | ||
43 | ## ScrollView | |
44 | ||
45 | Handles several core events to update scroll position: | |
46 | ||
47 | * `core:move-up` Scrolls the view up | |
48 | * `core:move-down` Scrolls the view down | |
49 | * `core:page-up` Scrolls the view up by the height of the page | |
50 | * `core:page-down` Scrolls the view down by the height of the page | |
51 | * `core:move-to-top` Scrolls the editor to the top | |
52 | * `core:move-to-bottom` Scroll the editor to the bottom | |
53 | ||
54 | Subclasses must call `super` if overriding the `initialize` method. | |
55 | ||
56 | ### Example | |
57 | ||
58 | ```coffee | |
59 | {ScrollView} = require 'atom-space-pen-views' | |
60 | ||
61 | class MyView extends ScrollView | |
62 | @content: -> | |
63 | @div() | |
64 | ||
65 | initialize: -> | |
66 | super | |
67 | @text('super long content that will scroll') | |
68 | ``` | |
69 | ||
70 | ## SelectListView | |
71 | ||
72 | Essential: Provides a view that renders a list of items with an editor that | |
73 | filters the items. Used by many packages such as the fuzzy-finder, | |
74 | command-palette, symbols-view and autocomplete. | |
75 | ||
76 | ||
77 | ### Example | |
78 | ||
79 | ```coffee | |
80 | {SelectListView} = require 'atom-space-pen-views' | |
81 | ||
82 | class MySelectListView extends SelectListView | |
83 | initialize: -> | |
84 | super | |
85 | @addClass('overlay from-top') | |
86 | @setItems(['Hello', 'World']) | |
87 | atom.workspaceView.append(this) | |
88 | @focusFilterEditor() | |
89 | ||
90 | viewForItem: (item) -> | |
91 | "<li>#{item}</li>" | |
92 | ||
93 | confirmed: (item) -> | |
94 | console.log("#{item} was selected") | |
95 | ``` | |
96 | ||
97 | ## Methods | |
98 | ||
99 | ### Subclasses Must Implement | |
100 | ||
101 | #### `::viewForItem` | |
102 | ||
103 | Create a view for the given model item. This method must be overridden by | |
104 | subclasses. Called when the item is about to appended to the list view. | |
105 | ||
106 | * `item` The model item being rendered. This will always be one of the items | |
107 | previously passed to `::setItems`. | |
108 | ||
109 | Returns a String of HTML, DOM element, jQuery object, or View. | |
110 | ||
111 | #### `::confirmed` | |
112 | ||
113 | Callback function for when an item is selected. This method must | |
114 | be overridden by subclasses. | |
115 | ||
116 | * `item` The selected model item. This will always be one of the items | |
117 | previously passed to `::setItems`. | |
118 | ||
119 | Returns a DOM element, jQuery object, or {View}. | |
120 | ||
121 | ### Managing the list of items | |
122 | ||
123 | #### `::setItems` | |
124 | ||
125 | Set the array of items to display in the list. This should be | |
126 | model items, not actual views. `::viewForItem` will be called to render the | |
127 | item when it is being appended to the list view. | |
128 | ||
129 | * `items` The array of model items to display in the list (default: []). | |
130 | ||
131 | #### `::getSelectedItem` | |
132 | ||
133 | Get the model item that is currently selected in the list view. | |
134 | ||
135 | #### `::getFilterKey` | |
136 | ||
137 | Get the property name to use when filtering items. | |
138 | ||
139 | This method may be overridden by classes to allow fuzzy filtering based | |
140 | on a specific property of the item objects. | |
141 | ||
142 | For example if the objects you pass to {::setItems} are of the type | |
143 | `{"id": 3, "name": "Atom"}` then you would return `"name"` from this method | |
144 | to fuzzy filter by that property when text is entered into this view's | |
145 | editor. | |
146 | ||
147 | ||
148 | #### `::getFilterQuery` | |
149 | ||
150 | Get the filter query to use when fuzzy filtering the visible elements. | |
151 | ||
152 | By default this method returns the text in the mini editor but it can be | |
153 | overridden by subclasses if needed. | |
154 | ||
155 | Returns a {String} to use when fuzzy filtering the elements to display. | |
156 | ||
157 | ||
158 | #### `::setMaxItems` | |
159 | ||
160 | Set the maximum numbers of items to display in the list. | |
161 | ||
162 | This should be called before `setItems` is called or else the first time the | |
163 | list displays it will include all the items. | |
164 | ||
165 | * `maxItems` The maximum {Number} of items to display. | |
166 | ||
167 | #### `::populateList` | |
168 | ||
169 | Extended: Populate the list view with the model items previously set by calling | |
170 | {::setItems}. | |
171 | ||
172 | Subclasses may override this method but should always call `super`. | |
173 | ||
174 | ### Messages | |
175 | ||
176 | #### `::setError` | |
177 | ||
178 | Set the error message to display. | |
179 | ||
180 | * `message` A string with an error message (default: ''). | |
181 | ||
182 | #### `::setLoading` | |
183 | ||
184 | Set the loading message to display. | |
185 | ||
186 | * `message` A string with a loading message (default: ''). | |
187 | ||
188 | #### `::getEmptyMessage` | |
189 | ||
190 | Get the message to display when there are no items. | |
191 | ||
192 | Subclasses may override this method to customize the message. | |
193 | ||
194 | * `itemCount` The {Number} of items in the array specified to {::setItems} | |
195 | * `filteredItemCount` The {Number} of items that pass the fuzzy filter test. | |
196 | ||
197 | Returns a {String} message (default: 'No matches found'). | |
198 | ||
199 | ### View Actions | |
200 | ||
201 | #### `::cancel` | |
202 | ||
203 | Cancel and close this select list view. | |
204 | ||
205 | This restores focus to the previously focused element if `::storeFocusedElement` | |
206 | was called prior to this view being attached. | |
207 | ||
208 | #### `::focusFilterEditor` | |
209 | ||
210 | Focus the fuzzy filter editor view. | |
211 | ||
212 | #### `::storeFocusedElement` | |
213 | ||
214 | Store the currently focused element. This element will be given back focus when | |
215 | `::cancel` is called. |