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)
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`.
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.
18 {View} = require 'space-pen'
19 {TextEditorView} = require 'atom-space-pen-views'
21 class MyView extends View
24 @div "Type your answer:"
25 @subview 'answer', new TextEditorView(mini: true)
28 ### Constructor Params
30 Pass an optional params object to the constructor with the following keys:
32 * `mini` If `true`, will construct a single-line editor for use as an input
34 * `placeholderText` A string of placeholder text to appear in the editor when
41 Returns the underlying `TextEditor` model instance.
45 Handles several core events to update scroll position:
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
54 Subclasses must call `super` if overriding the `initialize` method.
59 {ScrollView} = require 'atom-space-pen-views'
61 class MyView extends ScrollView
67 @text('super long content that will scroll')
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.
80 {SelectListView} = require 'atom-space-pen-views'
82 class MySelectListView extends SelectListView
85 @addClass('overlay from-top')
86 @setItems(['Hello', 'World'])
87 atom.workspaceView.append(this)
90 viewForItem: (item) ->
94 console.log("#{item} was selected")
99 ### Subclasses Must Implement
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.
106 * `item` The model item being rendered. This will always be one of the items
107 previously passed to `::setItems`.
109 Returns a String of HTML, DOM element, jQuery object, or View.
113 Callback function for when an item is selected. This method must
114 be overridden by subclasses.
116 * `item` The selected model item. This will always be one of the items
117 previously passed to `::setItems`.
119 Returns a DOM element, jQuery object, or {View}.
121 ### Managing the list of items
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.
129 * `items` The array of model items to display in the list (default: []).
131 #### `::getSelectedItem`
133 Get the model item that is currently selected in the list view.
135 #### `::getFilterKey`
137 Get the property name to use when filtering items.
139 This method may be overridden by classes to allow fuzzy filtering based
140 on a specific property of the item objects.
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
148 #### `::getFilterQuery`
150 Get the filter query to use when fuzzy filtering the visible elements.
152 By default this method returns the text in the mini editor but it can be
153 overridden by subclasses if needed.
155 Returns a {String} to use when fuzzy filtering the elements to display.
160 Set the maximum numbers of items to display in the list.
162 This should be called before `setItems` is called or else the first time the
163 list displays it will include all the items.
165 * `maxItems` The maximum {Number} of items to display.
167 #### `::populateList`
169 Extended: Populate the list view with the model items previously set by calling
172 Subclasses may override this method but should always call `super`.
178 Set the error message to display.
180 * `message` A string with an error message (default: '').
184 Set the loading message to display.
186 * `message` A string with a loading message (default: '').
188 #### `::getEmptyMessage`
190 Get the message to display when there are no items.
192 Subclasses may override this method to customize the message.
194 * `itemCount` The {Number} of items in the array specified to {::setItems}
195 * `filteredItemCount` The {Number} of items that pass the fuzzy filter test.
197 Returns a {String} message (default: 'No matches found').
203 Cancel and close this select list view.
205 This restores focus to the previously focused element if `::storeFocusedElement`
206 was called prior to this view being attached.
208 #### `::focusFilterEditor`
210 Focus the fuzzy filter editor view.
212 #### `::storeFocusedElement`
214 Store the currently focused element. This element will be given back focus when
215 `::cancel` is called.