12 | ```
13 |
--------------------------------------------------------------------------------
/src_docs/markdown/js/properties/customTagClass.json:
--------------------------------------------------------------------------------
1 | {"body":"\n(String ) optional
\n(Used in conjunction with the tags option)
\nThis value will be added as a css class to the wrapper of user-selected options display element when it is displayed as a tag.
\nYou should be able to overide all tag styling by leading your css rules with
\n.r-ss-tag.{customTagClass}\n(Function ) optional
\nThis function provides custom templating capability for how the selected items will display inside the control trigger. It will be used to render the display of selected values.
\nThe function should accept one parameter,
\n\nthe current state value of the control \n \nIt should return your desired markup based on that value
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/js/properties/forceDefaultBrowserScrolling.json:
--------------------------------------------------------------------------------
1 | {"body":"\n(Boolean ) (Default: false) optional
\nWhether or not the control allows browser default onWheel scroll handling in an open dropdown.
\nBy default, mousewheel events are arrested so that the control will not scroll out of view as the end of its results set is reached. When this prop is set to true, the handler that stops the page scrolling will be bypassed.
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/tasks/dev.js:
--------------------------------------------------------------------------------
1 | var connect = require('gulp-connect'),
2 | path = require('path'),
3 | runSequence = require('run-sequence');
4 |
5 | module.exports = function(gulp, config) {
6 |
7 | gulp.task('dev:server', function() {
8 | connect.server({
9 | root: config.documentation.example.dist,
10 | fallback: path.join(config.documentation.example.dist, 'index.html'),
11 | port: 8000,
12 | livereload: true
13 | });
14 | });
15 |
16 | gulp.task('dev', function() {
17 | runSequence('dev:server',
18 | 'watch');
19 | });
20 |
21 | };
22 |
--------------------------------------------------------------------------------
/src_docs/super-selects/support/test-page-example-option-template.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var TestPageExampleOptionTemplate = React.createClass({
4 |
5 | propTypes: {
6 | option: React.PropTypes.object
7 | },
8 |
9 | render: function() {
10 | var name = this.props.option.name;
11 |
12 | return (
13 |
14 |
15 |
{name}
16 |
(Function ) optional
\n(Used in conjunction with the groupBy option)
\nThis function provides custom templating capability for your dropdown heading options.
\nThe function will be called with the value returned as each group’s object key as its first argument. (This is the value returned by Lodash’s groupBy when passed the value of your groupBy option). It should return your desired group heading markup
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/src_docs/scale.fix.js:
--------------------------------------------------------------------------------
1 | window.fixScale = function(doc) {
2 |
3 | var addEvent = 'addEventListener',
4 | type = 'gesturestart',
5 | qsa = 'querySelectorAll',
6 | scales = [1, 1],
7 | meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
8 |
9 | function fix() {
10 | meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
11 | doc.removeEventListener(type, fix, true);
12 | }
13 |
14 | if ((meta = meta[meta.length - 1]) && addEvent in doc) {
15 | fix();
16 | scales = [0.25, 1.6];
17 | doc[addEvent](type, fix, true);
18 | }
19 |
20 | };
--------------------------------------------------------------------------------
/src_docs/markdown/js/properties/optionValueKey.json:
--------------------------------------------------------------------------------
1 | {"body":"\n (String ) optional
\n (defaults to using ‘id’ as the key if left undefined)
\n This value represents the key in each option object (from the dataSource collection), which represents the value that uniquely identifies that option across the dataSource collection.
\n Think of it in terms of the value attribute of the html option tag (inside a select)
\n <select>\n <option value="?">\n(Function ) optional
\n(Used in conjunction with the searchable option)
\nThe function provided will serve as a replacement of the default search filter function.
\n(If left undefined the default filter function will be used)
\nThe Default Filtering function is a lowercase string comparison for text. It matches the optionLabelKey value to the text entered into the dropdown’s search field). The function leverages Lodash’s filter function with your dataSource collection as its first argument
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var _ = require('lodash'),
2 | config = require('./gulpconfig'),
3 | exec = require('child_process').exec,
4 | fs = require('fs'),
5 | gulp = require('gulp'),
6 | taskListing = require('gulp-task-listing');
7 |
8 | function initRssGulp() {
9 | var externalTasks = fs.readdirSync('./tasks');
10 | _.each(externalTasks, function(task) {
11 | require('./tasks/' + task)(gulp, config);
12 | });
13 | }
14 |
15 | gulp.task('compile:js', function(cb) {
16 | exec('npm run npm:babel:js', function (err, stdout, stderr) {
17 | console.info(stdout);
18 | console.info(stderr);
19 | cb(err);
20 | });
21 | });
22 |
23 | initRssGulp();
24 | gulp.task('help', taskListing);
25 |
--------------------------------------------------------------------------------
/src_docs/markdown/keys/tab.md:
--------------------------------------------------------------------------------
1 | #### (Closed Control State)
2 | - **tab away from the control**
3 |
4 | Pressing enter when the the control has focus will open the dropdown.
5 |
6 | #### (Closed Control State - when tag removal button focused)
7 | - **move focus to the next avaliable tag removal button** (only applicable to controls with the **tags** property set to true)
8 |
9 | Pressing tab when a tag removal button has focus will move focus to the next available tag removal button. If the focused-tag removal button is the last one available, focus will move away from the control.
10 |
11 | #### (Opened Control State)
12 | In an open control, the tab key mimics the behavior of the [enter](#enter) key
13 |
14 |
--------------------------------------------------------------------------------
/src_docs/markdown/js/properties/customOptionTemplateFunction.json:
--------------------------------------------------------------------------------
1 | {"body":"\n(Function ) optional
\nThis function provides custom templating capability for your dropdown options. It will be used to render the display of selected values in the case of a multiple select control which does not have tags set to true.
\nThe function should accept two parameters,
\n\na single option object from your dataSource collection \nthe current searchString (for searchable controls) \n \nIt should return your desired markup based on that single option object's properties and the search term
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/js/properties/ajaxDataFetch.json:
--------------------------------------------------------------------------------
1 | {"body":"\n(Function ) optional
\n(dataSource must be supplied if left undefined)
\nYour select dropdown’s data may be fetched via ajax if you provide a function as the value for this option.
\nThe function will be passed one argument, the dataSource that was provided to\nthe dataSource prop
\nThe return value of the function must be a promise object. (i.e. an object with a then function). The promise must resolve with a value meeting the description of the dataSource option documentation.
\nThe dataSource option should be left undefined when using this option.
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/keys/up.md:
--------------------------------------------------------------------------------
1 | #### (Closed Control State)
2 | - *no effect*
3 |
4 | #### (Opened Control State)
5 | - **navigation of options**
6 |
7 | Pressing the up-arrow key when the dropdown is open will move focus up to the next selectable option. If the focus reaches the first option, or the search input field in a **searchable** control, no action will occur.
8 |
9 | #### (With alt-key held down)
10 | - **close the drop down**
11 | An alt-key press of the up-arrow will close the dropdown
12 |
13 | #### Multiselect Specific Behaviors
14 |
15 | #### (With shift-key held down)
16 | - **select focused option and move focus up**
17 |
18 | If the up arrow is pressed with the shift-key in a **multiselect** or **tags** control, the focused option will be selected (or deselected if alreadySelected), and the focus will move up to the next available option.
19 |
20 |
--------------------------------------------------------------------------------
/src_docs/markdown/examples/basic-example.md:
--------------------------------------------------------------------------------
1 | ### JSX Markup
2 | ```html
3 | (Closed Control State) \n\ntab away from the control \nPressing enter when the the control has focus will open the dropdown.
\n\n\nmove focus to the next avaliable tag removal button (only applicable to controls with the tags property set to true) \nPressing tab when a tag removal button has focus will move focus to the next available tag removal button. If the focused-tag removal button is the last one available, focus will move away from the control.
\n(Opened Control State) \nIn an open control, the tab key mimics the behavior of the enter key
\n","updatedAt":"2017-08-07T19:42:41.000Z"}
--------------------------------------------------------------------------------
/src_docs/super-selects/basic-example.js:
--------------------------------------------------------------------------------
1 | var testData = require('./support/test-data.js'),
2 | exampleOutput = require('./support/example-output.js'),
3 | basicExampleMarkdown = require('../markdown/js/examples/basic-example').body;
4 |
5 | var handlerExample = function(option) {
6 | if (!option) {
7 | exampleOutput('basic_example_output', "no option chosen");
8 | return;
9 | }
10 |
11 | var output = [
12 | 'Option Item Chosen = {\n',
13 | '\tid: ', option.id, '\n',
14 | '\tname: ', option.name, '\n',
15 | '\tsize: ', option.size, '\n\t};'];
16 | exampleOutput('basic_example_output', output.join(''));
17 | };
18 |
19 | var basicExample = {
20 |
21 | nameAttr: "basic_example",
22 | displayName: "Basic Example",
23 |
24 | props: {
25 | placeholder: "Make a Selection",
26 | dataSource: testData,
27 | onChange: handlerExample
28 | },
29 |
30 | renderString: basicExampleMarkdown
31 |
32 | };
33 |
34 | module.exports = basicExample;
35 |
--------------------------------------------------------------------------------
/src_docs/super-selects/disabled.js:
--------------------------------------------------------------------------------
1 | var testData = require('./support/test-data.js'),
2 | exampleOutput = require('./support/example-output.js'),
3 | disabledExampleMarkdown = require('../markdown/js/examples/disabled-example').body;
4 |
5 | var handlerExample = function(option) {
6 | if (!option) {
7 | exampleOutput('disabled_example_output', "no option chosen");
8 | return;
9 | }
10 |
11 | var output = [
12 | 'Option Item Chosen = {\n',
13 | '\tid: ', option.id, '\n',
14 | '\tname: ', option.name, '\n',
15 | '\tsize: ', option.size, '\n\t};'];
16 | exampleOutput('disabled_example_output', output.join(''));
17 | };
18 |
19 | var disabledExample = {
20 |
21 | nameAttr: "disabled_example",
22 | displayName: "Disabled Example",
23 |
24 | props: {
25 | disabled: true,
26 | placeholder: "Make a Selection",
27 | dataSource: testData,
28 | onChange: handlerExample
29 | },
30 |
31 | renderString: disabledExampleMarkdown
32 |
33 | };
34 |
35 | module.exports = disabledExample;
36 |
--------------------------------------------------------------------------------
/src_docs/markdown/examples/basic-searchable.md:
--------------------------------------------------------------------------------
1 | ### JSX Markup
2 | ```html
3 | (Function ) optional
\n(A hasMorePages function should be provided when using this option)
\nAdditional pages of data can be fetched via ajax if you provide a function as the value for this option.
\nThe function takes one argument, the value provided as the dataSource (or the return value of the ajaxDataSource function).
\nIt must return a promise object. (i.e. an object with a then function). The promise must resolve with a value meeting the description of the dataSource option documentation.
\nThe pageDataFetch function will be called based upon the user’s scroll position in the dropdown (reaching a threshold close enough to the end of the dropdown's results list).
\nIt will not be called when loading ajax data, or when filtering results in a searchable dropdown, or when hasMorePages evaluates to false
\n","updatedAt":"2017-08-07T19:42:41.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/examples/tags-example.md:
--------------------------------------------------------------------------------
1 | ### JSX Markup
2 | ```html
3 | JSX Markup \n<ReactSuperSelect placeholder=\\"Make a Selection\\" \n dataSource={testData} \n onChange={handlerExample} />\nProperties \nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\n(Closed Control State) \n\n(Opened Control State) \n\nnavigation of options \nPressing the up-arrow key when the dropdown is open will move focus up to the next selectable option. If the focus reaches the first option, or the search input field in a searchable control, no action will occur.
\n(With alt-key held down) \n\nclose the drop down \nAn alt-key press of the up-arrow will close the dropdown \nMultiselect Specific Behaviors \n(With shift-key held down) \n\nselect focused option and move focus up \nIf the up arrow is pressed with the shift-key in a multiselect or tags control, the focused option will be selected (or deselected if alreadySelected), and the focus will move up to the next available option.
\n","updatedAt":"2017-08-07T19:42:41.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/js/keys/down.json:
--------------------------------------------------------------------------------
1 | {"body":"(Closed Control State) \n\nopen the option dropdown \nWhen the control's main element is focused. Pressing the down arrow key will open the dropdown. (It can also be pressed with the alt-key with the same result)
\n(Opened Control State) \n\nnavigation of options \nPressing the down-arrow key when the dropdown is open will move focus down to the next selectable option. If the searchable prop is true, The first keypress of the down arrow will focus the search input field.
\nMultiselect Specific Behaviors \n(With shift-key held down) \n\nselect focused option and move focus down \nIf the down arrow is pressed with the shift-key in a multiselect or tags control, the focused option will be selected (or deselected if alreadySelected), and the focus will move down to the next available option.
\n","updatedAt":"2017-08-07T19:42:41.000Z"}
--------------------------------------------------------------------------------
/src_docs/super-selects/tags-example.js:
--------------------------------------------------------------------------------
1 | var React = require('react'),
2 | _ = require('lodash'),
3 | testData = require('./support/test-data.js'),
4 | exampleOutput = require('./support/example-output.js'),
5 | tagsMarkdown = require('../markdown/js/examples/tags-example').body;
6 |
7 | var handlerExample = function(options) {
8 | if (!options) {
9 | exampleOutput('tags_example_output', "no option chosen");
10 | return;
11 | }
12 |
13 | var output = [];
14 | _.map(options, function(option){
15 | output = output.concat([
16 | 'Tags Chosen Option = {\n',
17 | '\tid: ', option.id, '\n',
18 | '\tname: ', option.name, '\n',
19 | '\tsize: ', option.size, '\n\t};\n']);
20 | });
21 |
22 | exampleOutput('tags_example_output', output.join(''));
23 | };
24 |
25 | var tagsExample = {
26 |
27 | nameAttr: "tags_example",
28 | displayName: "Tags",
29 |
30 | props: {
31 | placeholder: "Make Your Selections",
32 | dataSource: testData,
33 | initialValue: [testData[0], testData[1]],
34 | onChange: handlerExample,
35 | tags: true
36 | },
37 |
38 | renderString: tagsMarkdown
39 |
40 | };
41 |
42 | module.exports = tagsExample;
43 |
--------------------------------------------------------------------------------
/src_docs/markdown/js/examples/disabled-example.json:
--------------------------------------------------------------------------------
1 | {"body":"JSX Markup \n<ReactSuperSelect disabled={true}\n placeholder=\\"Make a Selection\\" \n dataSource={testData} \n onChange={handlerExample} />\nProperties \nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\nJSX Markup \n<ReactSuperSelect placeholder="Make a Selection" \n clearSearchOnSelection={true}\n deselectOnSelectedOptionClick={false}\n dataSource={testData} \n onChange={handlerExample} \n searchable={true} />\nProperties \nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Searchable Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\n(Array |Object |Collection Object ) optional
\n(ajaxDataFetch must be supplied if left undefined)
\nThe dataSource option provides the data for your options dropdown. The value provided will be passed to an internal parser (_configureDataSource), which will return a collection (array of option objects) found based on argument type
\nThe parsing method supports dataSource values as:
\n\nan array of option objects (will be directly assigned to state.data) \nan object with a collection property (object.collection will be assigned to state.data) \nan object with a get function (the return value of object.get(‘collection’) will be assigned to state.data) \n \nEach option in the resulting collection must have the following properties:
\n\na unique value corresponding to the key set by the optionValueKey or the default optionValueKey of 'id' \na defined value corresponding to the key set by the optionLabelKey or the default optionLabelKey of 'name' \n \nEach Option may be disabled for selection by adding an optional boolean property "disabled" i.e. disabled: true
\n","updatedAt":"2017-08-24T03:18:18.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/examples/basic-ajax.md:
--------------------------------------------------------------------------------
1 | ### JSX Markup
2 | ```html
3 |
29 | {controlSelectedValue.length} item(s) selected
30 |
);
31 | };
32 | ```
33 |
34 |
35 | #### dataSource (sample)
36 | ```js
37 | var groceries = [
38 | {
39 | id: 1,
40 | attributeName: "apple",
41 | label: "Apple",
42 | iconClass: "rss-grocery rss-grocery-apple",
43 | group: "Fruit",
44 | price: 0.79
45 | },{
46 | id: 2,
47 | attributeName: "carrot",
48 | label: "Carrot",
49 | iconClass: "rss-grocery rss-grocery-carrot",
50 | group: "Vegetable",
51 | price: 0.21
52 | }, ...
53 | ];
54 | ```
55 |
--------------------------------------------------------------------------------
/src_docs/super-selects/on-open-callback.js:
--------------------------------------------------------------------------------
1 | var testData = require('./support/test-data.js'),
2 | exampleOutput = require('./support/example-output.js'),
3 | onOpenExampleMarkdown = require('../markdown/js/examples/on-open-example').body;
4 |
5 | var handlerExample = function(option) {
6 | if (!option) {
7 | exampleOutput('on_open_callback_example_output', "no option chosen");
8 | return;
9 | }
10 |
11 | var output = [
12 | 'Option Item Chosen = {\n',
13 | '\tid: ', option.id, '\n',
14 | '\tname: ', option.name, '\n',
15 | '\tsize: ', option.size, '\n\t};'];
16 | exampleOutput('basic_example_output', output.join(''));
17 | };
18 |
19 | var onCloseDropdownHandler = function() {
20 | alert('React Super Select dropdown closed');
21 | };
22 |
23 | var onOpenDropdownHandler = function() {
24 | alert('React Super Select dropdown opened');
25 | };
26 |
27 | var onOpenCallbackExample = {
28 |
29 | nameAttr: "on_open_callback_example_output",
30 | displayName: "On Open Callback Example",
31 |
32 | props: {
33 | forceDefaultBrowserScrolling: true,
34 | onCloseDropdown: onCloseDropdownHandler,
35 | onOpenDropdown: onOpenDropdownHandler,
36 | placeholder: "Make a Selection",
37 | dataSource: testData,
38 | onChange: handlerExample
39 | },
40 |
41 | renderString: onOpenExampleMarkdown
42 |
43 | };
44 |
45 | module.exports = onOpenCallbackExample;
46 |
--------------------------------------------------------------------------------
/src_docs/markdown/js/examples/multiselect.json:
--------------------------------------------------------------------------------
1 | {"body":"JSX Markup \n<ReactSuperSelect placeholder="Make Your Selections" \n dataSource={testData} \n onChange={handlerExample} \n multiple={true}\n keepOpenOnSelection={true} />\nProperties \nmultiple \nmultiple={true}\nonChange \nvar handlerExample = function(options) {\n var output = [];\n _.map(options, function(option){\n output = output.concat([\n 'Multiselect Chosen Option = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};']);\n });\n\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\nJSX Markup \n<ReactSuperSelect placeholder="Make Your Selections" \n dataSource={testData} \n onChange={handlerExample}\n initialValue={[testData[0], testData[1]]}\n tags={true} />\nProperties \n\ntags={true}\nonChange \nvar handlerExample = function(options) {\n var output = [];\n _.map(options, function(option){\n output = output.concat([\n 'Multiselect Chosen Option = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};']);\n });\n\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\nJSX Markup \n<ReactSuperSelect customFilterFunction: customFilterExample,\n placeholder="Pick an Item" \n searchPlaceholder="filter shop by category"\n onChange={this.handlerExample}\n customOptionTemplateFunction={groceryCartItemTemplate} \n dataSource={groceries} />\nProperties \nonChange \nvar groceryCartHandler = function(item) {\n console.log('Add To Cart: ', item.label, ' ', 'Price: ', item.price);\n};\ncustomFilterFunction \nvar customFilterExample = function (option, index, collection, searchTerm) {\n return option.group.toLowerCase().indexOf(searchTerm) > -1;\n};\ndataSource (sample) \nvar groceries = [\n{\n id: 1,\n attributeName: "apple",\n label: "Apple",\n iconClass: "rss-grocery rss-grocery-apple",\n group: "Fruit",\n price: 0.79\n},{\n id: 2,\n attributeName: "carrot",\n label: "Carrot",\n iconClass: "rss-grocery rss-grocery-carrot",\n group: "Vegetable",\n price: 0.21\n}, ...\n];\nreact-super-select Live Examples
7 |
8 |
16 |
17 |
18 |
19 |
24 |
25 |
26 |
27 |
32 |
35 |
JSX Markup \n<ReactSuperSelect onCloseDropdown={onCloseHandler}\n onOpenDropdown={onOpenHandler}\n placeholder=\\"Make a Selection\\" \n dataSource={testData} \n onChange={handlerExample} />\nProperties \nonCloseDropdown \nvar onCloseHandler = function() {\n alert('react super select closed');\n}\nonOpenDropdown \nvar onOpenHandler = function() {\n alert('react super select opened');\n}\nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\nJSX Markup \n<ReactSuperSelect placeholder="Pick an Item" \n searchPlaceholder="Search shop"\n multiple={true}\n onChange={this.handlerExample}\n customOptionTemplateFunction={selectedItemsTemplate} \n dataSource={groceries} />\nProperties \nonChange \nvar groceryCartHandler = function(item) {\n console.log('Add To Cart: ', item.label, ' ', 'Price: ', item.price);\n};\ncustomOptionTemplateFunction \nvar selectedItemsTemplate = function(controlSelectedValue) {\n if (console && console.info) {\n console.info('selected value: (%s)', controlSelectedValue);\n }\n\n return(\n <div>\n {controlSelectedValue.length} item(s) selected\n </div>);\n};\ndataSource (sample) \nvar groceries = [\n{\n id: 1,\n attributeName: "apple",\n label: "Apple",\n iconClass: "rss-grocery rss-grocery-apple",\n group: "Fruit",\n price: 0.79\n},{\n id: 2,\n attributeName: "carrot",\n label: "Carrot",\n iconClass: "rss-grocery rss-grocery-carrot",\n group: "Vegetable",\n price: 0.21\n}, ...\n];\n
29 | {controlSelectedValue.length} item(s) selected
30 |
);
31 | };
32 |
33 | var customSelectedValueTemplateExample = {
34 |
35 | nameAttr: "custom_selected_value_template",
36 | displayName: "Custom Selected Value Template Example",
37 |
38 | props: {
39 | customSelectedValueTemplateFunction: selectedItemsTemplate,
40 | dataSource: groceries,
41 | multiple: true,
42 | onChange: handlerExample,
43 | optionLabelKey: 'label',
44 | placeholder: "Pick an Item",
45 | searchable: true,
46 | searchPlaceholder: "Search Shop"
47 | },
48 |
49 | renderString: customSelectedValueTemplateMarkdown
50 |
51 | };
52 |
53 | module.exports = customSelectedValueTemplateExample;
54 |
--------------------------------------------------------------------------------
/src_docs/markdown/js/examples/basic-ajax.json:
--------------------------------------------------------------------------------
1 | {"body":"JSX Markup \n<ReactSuperSelect placeholder="Make Your Selections" \n ajaxDataFetch={simulatedAjaxFetch} \n onChange={handlerExample} \n searchable={true} />\nProperties \najaxDataFetch \nnote this is a function that simulates an ajax-call delay. In an actual use-case you would use a real XHR function which returns a promise object
\nvar simulatedAjaxFetch= function() {\n // simulate a 2 second ajax fetch for collection data\n return {\n then: function(callback) {\n setTimeout(function() {\n callback(testData);\n }, 2000);\n }\n };\n};\nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\n
29 |
30 |
{item.label} - {'$' + item.price.toFixed(2)}
31 |
JSX Markup \n<ReactSuperSelect placeholder="Make Your Selections" \n ajaxDataFetch={simulatedAjaxFetch} \n onChange={handlerExample} \n openOnMount={true}\n searchable={true} />\nProperties \najaxDataFetch \nnote this is a function that simulates an ajax-call delay. In an actual use-case you would use a real XHR function which returns a promise object
\nvar simulatedAjaxFetch= function() {\n // simulate a 2 second ajax fetch for collection data\n return {\n then: function(callback) {\n setTimeout(function() {\n callback(testData);\n }, 2000);\n }\n };\n};\nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\n
33 |
34 |
{item.label} - {'$' + item.price.toFixed(2)}
35 |
35 |
36 |
{item.label} - {'$' + item.price.toFixed(2)}
37 |
19 |
20 | Keyboard Navigation:
21 |
22 | Keyboard Navigation Links By Key:
23 |
24 |
25 | {this._renderKeysLinks()}
26 |
27 |
28 | {this._renderKeys()}
29 | );
30 | }
31 |
32 | _renderKeysLinks() {
33 | const propsLinks = _.map(allKeys, function(key, index) {
34 | const href = '#' + key.nameAttr,
35 | reactKey = 'key_link_' + index;
36 | return ( {key.nameAttr}
46 |
49 |
50 | Back to Top
51 | Back to Keys Links
52 | );
53 | });
54 |
55 | return articles;
56 | }
57 | }
58 |
59 | module.exports = KeyboardNavigationApp;
60 | ReactDOM.render(' + search + ' ');
23 |
24 | return React.DOM.span({ dangerouslySetInnerHTML: { __html: labelMarkup } });
25 | }
26 |
27 | var groceryCartItemTemplate = function(item, search) {
28 | if (console && console.info) {
29 | console.info('search term (%s) is provided for highlighting/modifying template output', search);
30 | }
31 |
32 | var itemClasses = classNames('grocery-item',
33 | 'example-' + item.group.toLowerCase()),
34 | iconClasses = classNames('grocery-icon',
35 | 'rss-grocery',
36 | 'rss-grocery-' + item.attributeName),
37 | labelMarkup = search ? _getHighlightedSearchLabel(item, search, new RegExp( search, 'i')) : item.label;
38 |
39 | return(
40 |
41 |
42 |
{labelMarkup} - {'$' + item.price.toFixed(2)}
43 |
18 |
19 | API documentation
20 | you can also view the
21 | Annotated Source Code
22 |
23 | Component Property API Documentation Links:
24 |
25 |
26 | {this._renderPropsLinks()}
27 |
28 |
29 |
30 | {this._renderProps()}
31 | );
32 | }
33 |
34 | _renderPropsLinks() {
35 | const sortedProps = allProps.sort(function(propA, propB) {
36 | return (propA.nameAttr >= propB.nameAttr) ? 1 : -1;
37 | });
38 | const propsLinks = _.map(sortedProps, function(prop, index) {
39 | const href = '#' + prop.nameAttr,
40 | key = 'prop_link_' + index;
41 | return ( {prop.nameAttr}
52 |
55 |
56 | Back to Top
57 | Back to API Documentation Links
58 | );
59 | });
60 |
61 | return articles;
62 | }
63 | }
64 |
65 | module.exports = PropsApp;
66 | ReactDOM.render((Closed Control State) \n\nPressing enter when the the control has focus will open the dropdown.
\n\n\nremove the focused tag (only applicable to controls with the tags property set to true) \nPressing enter when a tag removal button has focus will remove the tag from the selected values. After the tag has been removed, focus is moved to the first-available tag removal button.
\n(Opened Control State) \n\nSelect the currently focused option \nPressing the enter key selects the option that currently has focus. In a non-multiselect control, the dropdown will close after the selection is made.
\nMultiselect Specific Behaviors \n\n\ntoggle selection state of the currently focused option \nWhen the enter key is pressed along with the ctrl-key or meta-key. The currently focused option will be selected, or deselected if it was already selected when clicked
\n(With shift-key held down) \n\nselect a range of options from last selected to currently focused option \nWhen the enter key is pressed along with the shift-key while a option has focus, All values in the range from the last selected option to the currently focused option will be selected.
\nIf no option was previously selected, all options from the first option to the focused option will be selected.
\n\ndeselect a range up to but not including the focused option \nIf the focused option has already been selected when the user clicks enter along with the shift-key, any selected options in the range between the last selected option and the focused option will be deselected. The focused option will remain selected in this case.
\n","updatedAt":"2017-08-07T19:42:41.000Z"}
--------------------------------------------------------------------------------
/src_docs/markdown/js/examples/group-by.json:
--------------------------------------------------------------------------------
1 | {"body":"JSX Markup \n<ReactSuperSelect customOptionTemplateFunction: groceryCartItemTemplate,\n dataSource={groceries}\n onChange={this.groceryCartHandler}\n optionLabelKey="label"\n placeholder="Pick an Item"\n searchable={true}\n searchPlaceholder="Search shop"\n groupBy="group" />\nProperties \ngroupBy \nUsing the simplest form of lodash's groupBy, we pass the key name for the option data object. The options will be sorted by the values found for that \nkey across the dataSource collection.
\ngroupBy="group"\ncustomOptionTemplateFunction \nvar groceryCartItemTemplate = function(item) {\n var itemClasses = classNames('grocery-item',\n 'example-' + item.group.toLowerCase()),\n iconClasses = classNames('grocery-icon',\n 'rss-grocery',\n 'rss-grocery-' + item.attributeName);\n\n return(\n <div className={itemClasses}>\n <span className={iconClasses}></span>\n <p>{item.label} - {'$' + item.price.toFixed(2)}</p>\n </div>);\n};\nonChange \nvar groceryCartHandler = function(item) {\n console.log('Add To Cart: ', item.label, ' ', 'Price: ', item.price);\n};\ndataSource (sample) \nvar groceries = [\n{\n id: 1,\n attributeName: "apple",\n label: "Apple",\n iconClass: "rss-grocery rss-grocery-apple",\n group: "Fruits",\n price: 0.79\n},{\n id: 2,\n attributeName: "carrot",\n label: "Carrot",\n iconClass: "rss-grocery rss-grocery-carrot",\n group: "Vegetables",\n price: 0.21\n}, ...\n];\n' + search + ' ');
24 |
25 | return React.DOM.span({ dangerouslySetInnerHTML: { __html: labelMarkup } });
26 | };
27 |
28 | var groceryCartItemTemplate = function(item, search) {
29 | if (console && console.info) {
30 | console.info('search term (%s) is provided for highlighting/modifying template output', search);
31 | }
32 |
33 | var itemClasses = classNames('grocery-item',
34 | 'example-' + item.group.toLowerCase()),
35 | iconClasses = classNames('grocery-icon',
36 | 'rss-grocery',
37 | 'rss-grocery-' + item.attributeName),
38 | labelMarkup = search ? _getHighlightedSearchLabel(item, search, new RegExp( search, 'i')) : item.label;
39 |
40 | return(
41 |
42 |
43 |
{labelMarkup} - {'$' + item.price.toFixed(2)}
44 |
JSX Markup \n<ReactSuperSelect placeholder="Pick an Item" \n searchPlaceholder="Search shop"\n onChange={this.handlerExample}\n customOptionTemplateFunction={groceryCartItemTemplate} \n dataSource={groceries} />\nProperties \nonChange \nvar groceryCartHandler = function(item) {\n console.log('Add To Cart: ', item.label, ' ', 'Price: ', item.price);\n};\ncustomOptionTemplateFunction \nvar _getHighlightedSearchLabel = function(item, search, searchRegex) {\n var labelMarkup = item.label.replace(searchRegex, '<span style="background-color: #f90;">' + search + '</span>');\n\n return React.DOM.span({ dangerouslySetInnerHTML: { __html: labelMarkup } });\n}\n\nvar groceryCartItemTemplate = function(item, search) {\n if (console && console.info) {\n console.info('search term (%s) is provided for highlighting/modifying template output', search);\n }\n\n var itemClasses = classNames('grocery-item',\n 'example-' + item.group.toLowerCase()),\n iconClasses = classNames('grocery-icon',\n 'rss-grocery',\n 'rss-grocery-' + item.attributeName),\n labelMarkup = search ? _getHighlightedSearchLabel(item, search, new RegExp( search, 'i')) : item.label;\n\n return(\n <div className={itemClasses}>\n <span className={iconClasses}></span>\n <p>{labelMarkup} - {'$' + item.price.toFixed(2)}</p>\n </div>);\n};\ndataSource (sample) \nvar groceries = [\n{\n id: 1,\n attributeName: "apple",\n label: "Apple",\n iconClass: "rss-grocery rss-grocery-apple",\n group: "Fruit",\n price: 0.79\n},{\n id: 2,\n attributeName: "carrot",\n label: "Carrot",\n iconClass: "rss-grocery rss-grocery-carrot",\n group: "Vegetable",\n price: 0.21\n}, ...\n];\n
19 |
20 | {this._renderExampleLinks()}
21 | {this._renderExampleSections()}
22 |
{example.displayName}
32 |
React-Super-Select Live Examples
33 |
Quick Links:
34 |
35 |
38 |
39 |
48 |
49 |
52 |
53 | {superSelect}
54 |
55 | onChange Output
56 |
57 |
58 |
61 | Back to Top
62 |
63 | );
64 | });
65 |
66 | return(
67 | {exampleSections}
68 | );
69 | }
70 | }
71 |
72 | ReactDOM.render(JSX Markup \n<ReactSuperSelect ajaxDataFetch={simulatedAjaxFetch}\n hasMorePages={hasMorePagesExample}\n onChange={handlerExample}\n pageDataFetch={simulatedPageFetch}\n placeholder="Make Your Selections" \n searchable={true} />\nProperties \npageDataFetch \nnote this is a function that simulates an ajax-call delay. In an actual use-case you would use a real XHR function which returns a promise object
\nvar previousPage = 0;\n\nvar simulatedPageFetch = function(collection) {\n var MOCK_AJAX_PER_PAGE = 10;\n previousPage = previousPage + 1;\n var sliceLocation = previousPage * MOCK_AJAX_PER_PAGE,\n data;\n if (sliceLocation < testData.length) {\n data = [];\n\n for (var i = sliceLocation; i < (sliceLocation + MOCK_AJAX_PER_PAGE); i++) {\n if (testData[i]) {\n data.push(testData[i]);\n }\n }\n } else {\n data = testData;\n }\n\n return {\n then: function(callback) {\n setTimeout(function() {\n callback(collection.concat(data));\n }, 1500);\n }\n };\n};\nhasMorePages \nvar hasMorePagesExample = function(collection) {\n return collection.length < testData.length;\n};\najaxDataFetch \nnote this is a function that simulates an ajax-call delay. In an actual use-case you would use a real XHR function which returns a promise object
\nvar simulatedAjaxFetch= function() {\n var MOCK_AJAX_PER_PAGE = 10;\n var data = _.take(testData, MOCK_AJAX_PER_PAGE);\n // simulate a 2 second ajax fetch for collection data\n return {\n then: function(callback) {\n setTimeout(function() {\n callback(data);\n }, 2000);\n }\n };\n};\nonChange \nvar handlerExample = function(option) {\n var output = [\n 'Option Item Chosen = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};'];\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\n
27 |
28 | Basic Example
29 |
31 |
32 | Custom Template Example
33 |
35 |
36 | Ajax Example
37 |
39 |
40 | );
41 | }
42 |
43 | handlerExample(newValue) {
44 | console.info(newValue);
45 | }
46 |
47 | _customMarkupMapper(item) {
48 | return(
49 | JSX Markup \n<ReactSuperSelect ajaxDataFetch={simulatedAjaxFetch}\n hasMorePages={hasMorePagesExample}\n onChange={handlerExample}\n pageDataFetch={simulatedPageFetch}\n searchable={true}\n tags={true}\n placeholder="选择"\n ajaxErrorString="错误"\n noResultsString="无结果"\n searchPlaceholder="搜索"\n tagRemoveLabelString="删除标记" />\nProperties \n####localization properties
\nplaceholder="选择"\najaxErrorString="错误"\nnoResultsString="无结果"\nsearchPlaceholder="搜索"\ntagRemoveLabelString="删除标记"\npageDataFetch \nnote this is a function that simulates an ajax-call delay. In an actual use-case you would use a real XHR function which returns a promise object
\nvar previousPage = 0;\n\nvar simulatedPageFetch = function(collection) {\n var MOCK_AJAX_PER_PAGE = 10;\n previousPage = previousPage + 1;\n var sliceLocation = previousPage * MOCK_AJAX_PER_PAGE,\n data;\n if (sliceLocation < testData.length) {\n data = [];\n\n for (var i = sliceLocation; i < (sliceLocation + MOCK_AJAX_PER_PAGE); i++) {\n if (testData[i]) {\n data.push(testData[i]);\n }\n }\n } else {\n data = testData;\n }\n\n return {\n then: function(callback) {\n setTimeout(function() {\n callback(collection.concat(data));\n }, 1500);\n }\n };\n};\nhasMorePages \nvar hasMorePagesExample = function(collection) {\n return collection.length < testData.length;\n};\najaxDataFetch \nnote this is a function that simulates an ajax-call delay. In an actual use-case you would use a real XHR function which returns a promise object
\nvar simulatedAjaxFetch= function() {\n var MOCK_AJAX_PER_PAGE = 10;\n var data = _.take(testData, MOCK_AJAX_PER_PAGE);\n // simulate a 2 second ajax fetch for collection data\n return {\n then: function(callback) {\n setTimeout(function() {\n callback(data);\n }, 2000);\n }\n };\n};\nonChange \nvar handlerExample = function(option) {\n var output = [];\n _.map(options, function(option){\n output = output.concat([\n 'Localized Tags Chosen Option = {\\n',\n '\\tid: ', option.id, '\\n',\n '\\tname: ', option.name, '\\n',\n '\\tsize: ', option.size, '\\n\\t};\\n']);\n });\n console.log(output.join(''));\n};\ndataSource (sample) \nvar testData = [\n{\n "id": "5507c0528152e61f3c348d56",\n "name": "elit laborum et",\n "size": "Large"\n},\n{\n "id": "5507c0526305bceb0c0e2c7a",\n "name": "dolor nulla velit",\n "size": "Medium"\n}, ...\n];\nreact-super-select
5 |
9 |
react-super-select
10 |
11 |
12 |
15 |
16 |
17 |
18 |
21 |
69 |
React-super-select by alsoscotland
7 |
8 |
9 |
18 |
19 |
20 |
21 |
28 |
29 |
30 |
31 |
32 |
33 | react-super-select
34 | version:
35 | A flexible replacement for the html select control built with React
36 | Features:
37 |
38 | template capability for options
39 | aria-compliant keyboard navigation
40 | multiselect & tags
41 | ajax support
42 | ajax paging/load-more support
43 | grouped options under headings
44 | easy style customization
45 | localization support
46 |
47 |
48 | Dependencies:
49 | All dependencies are globally shimmed. They will need to be available in global scope as React , classNames , and _ respectively
50 |
55 |
56 | install from npm
57 | $ npm install react-super-select
58 | API Docs
63 |
64 | View API Documentation
65 |
66 |
67 | Live Examples Page
68 |
69 | View Live Examples Page
70 |
71 |
72 | Keyboard Navigation
73 |
74 | View Keyboard Navigation Docs
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
87 |