superdesk-ui-framework 2.4.10 → 2.4.15

package/examples/pages/components/modals.html

@@ -20,6 +20,7 @@
                     <div class="modal__body">
                         <p>This is sample message inside modal!</p>
                         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
+                        <button class="btn" ng-click="openModal('modalActive6')">Open modal inside modal</button>
                     </div>
                     <div class="modal__footer">
                         <button class="btn" ng-click="closeModal('modalActive')">Cancel</button>

package/examples/pages/react/IconFont.tsx

@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
 
 import { Icon, Prop, PropsList } from '../../../app-typescript';
 
+//@ts-ignore
 import * as iconFont from '../../../app/styles/_icon-font.scss';
 
-export default class IconFontDoc extends React.PureComponent{
-    render(){
+export default class IconFontDoc extends React.PureComponent {
+    render() {
         const array = iconFont.icon.split(', ');
         const icons = array.map((icon, index) =>
             <li key={index}>
-                <Icon name={icon}/>
+                <Icon name={icon} />
                 <span>{icon}</span>
             </li>
-            );
-        return(
-            <section className="docs-page__container"> 
+        );
+        return (
+            <section className="docs-page__container">
                 <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <Icon name="photo" />

package/examples/pages/react/IconPicker.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { IconPicker, PropsList, Prop } from "../../../app-typescript";
+
+const IconPickerDocs = () => {
+
+    const [value, setValue] = React.useState('amp');
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Icon Picker</h2>
+            <Markup.ReactMarkupCodePreview>{`
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}     
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    
+                    const [value, setValue] = React.useState("amp");
+                    ...
+                    <IconPicker
+                        label="Icon"
+                        filterPlaceholder="Search..."
+                        translateFunction={(text: string): string => text}
+                        value={value}
+                        onChange={(value) => {
+                            setValue(value);
+                        }}
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
+                <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
+                <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
+            </PropsList>
+
+        </section>
+    )
+}
+
+export default IconPickerDocs;

package/examples/pages/react/Index.tsx

@@ -41,6 +41,9 @@ import GridItemDoc from './GridItem';
 import ModalDoc from './Modal';
 import CarouselDoc from './Carousel';
 import ToggleboxDocs from './Togglebox';
+import ListItemsDoc from './ListItems';
+import SelectGridDocs from './SelectGrid';
+import IconPickerDocs from "./IconPicker";
 
 import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
@@ -137,7 +140,10 @@ const pages = {
             },
             "togglebox": {
                 name: "Togglebox"
-            }
+            },
+            'list-items': {
+                name: 'List items'
+            },
         }
     },
     formComponents: {
@@ -155,6 +161,9 @@ const pages = {
             'select': {
                 name: 'Select',
             },
+            'select-grid': {
+                name: 'Select Grid',
+            },
             'select-with-template': {
                 name: 'Select with template',
             },
@@ -164,6 +173,9 @@ const pages = {
             'time-picker': {
                 name: 'Time Picker',
             },
+            'icon-picker': {
+                name: 'Icon Picker',
+            },
             'switch': {
                 name: 'Switch'
             },
@@ -231,6 +243,9 @@ class ReactDoc extends React.Component {
                         <Route path="/react/carousel" component={CarouselDoc} />
                         <Route path="/react/menu" component={MenuDocs} />
                         <Route path="/react/togglebox" component={ToggleboxDocs} />
+                        <Route path="/react/list-items" component={ListItemsDoc} />
+                        <Route path="/react/select-grid" component={SelectGridDocs} />
+                        <Route path="/react/icon-picker" component={IconPickerDocs} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/examples/pages/react/ListItems.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { ListItemLoader, PropsList } from "../../../app-typescript";
+
+export default class ListItemsDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">List Items</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <ListItemLoader />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <h3 className="docs-page__h3 docs-page__h3--small-top-m">Loader type of list items</h3>
+                <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <ListItemLoader />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ListItemLoader />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+
+                </PropsList>
+            </section>
+        )
+    }
+}

package/examples/pages/react/SelectGrid.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as Markup from "../../js/react";
+import { SelectGrid, Alert, PropsList, Prop } from "../../../app-typescript";
+
+const SelectGridDocs = () => {
+    const letters = [
+        { value: 'A', label: 'A' },
+        { value: 'B', label: 'B' },
+        { value: 'C', label: 'C' },
+        { value: 'D', label: 'D' },
+        { value: 'E', label: 'E' },
+        { value: 'F', label: 'F' },
+        { value: 'G', label: 'G' },
+        { value: 'H', label: 'H' },
+        { value: 'K', label: 'K' },
+        { value: 'L', label: 'L' },
+        { value: 'M', label: 'M' },
+        { value: 'N', label: 'N' },
+        { value: 'O', label: 'O' },
+        { value: 'P', label: 'P' },
+        { value: 'R', label: 'R' },
+        { value: 'S', label: 'S' },
+        { value: 'T', label: 'T' },
+        { value: 'U', label: 'U' }
+    ];
+
+    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
+
+    return (
+        <section className="docs-page__container">
+            <h2 className="docs-page__h2">Select Grid</h2>
+            <p className="docs-page__paragraph">Universal select component with grid display of items. You can define your own trigger and item template.</p>
+            <p className="docs-page__paragraph">IconPicker is built on top of it.</p>
+            <Markup.ReactMarkupCodePreview>{`
+                    <SelectGrid
+                        label="Label"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                resolve([{ value: 'value', label: 'Label' }]);
+                            });
+                        }}
+                        onChange={(value) => { }}
+                        itemTemplate={({ item }) => <div />}
+                        triggerTemplate={() => <button />}
+                    />
+                `}
+            </Markup.ReactMarkupCodePreview>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <SelectGrid
+                        label="Letter"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                if (searchString == null) {
+                                    resolve(letters);
+                                } else {
+                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                }
+                            });
+                        }}
+                        onChange={(value) => {
+                            setSelectedItem(value);
+                        }}
+                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
+                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
+
+                    />
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    const letters = [
+                        { value: 'A', label: 'A' },
+                        { value: 'B', label: 'B' },
+                        { value: 'C', label: 'C' },
+                        ...
+                    ];
+
+                    const [selectedItem, setSelectedItem] = React.useState(letters[0]);
+                    ...
+                    <SelectGrid
+                        label="Letter"
+                        filterPlaceholder="Search..."
+                        getItems={(searchString) => {
+                            return new Promise((resolve) => {
+                                if (searchString == null) {
+                                    resolve(letters);
+                                } else {
+                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                }
+                            });
+                        }}
+                        onChange={(value) => {
+                            setSelectedItem(value);
+                        }}
+                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
+                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
+
+                    />
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='label' isRequired={true} type='string' default='null' description='Select label' />
+                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
+                <Prop name='getItems' isRequired={true} type='function' default='false' description='Callback function that should return promise which resolves with array of items' />
+                <Prop name='onChange' isRequired={true} type='function' default='false' description='Callback on change event' />
+                <Prop name='itemTemplate' isRequired={true} type='Component' default='null' description='item renderer' />
+                <Prop name='triggerTemplate' isRequired={true} type='Component' default='null' description='trigger button renderer' />
+            </PropsList>
+            <Alert style='hollow' size='normal' type='alert' restoreIcon='info'>
+                1. triggerTemplate should include &#x3C;button /&#x3E; with onClick event. Otherwise keyboard controls won't work. <br />
+                2. Item should be an object with at least label and value.
+            </Alert>
+        </section>
+    )
+}
+
+
+export default SelectGridDocs;

package/examples/pages/react/Tags.tsx

@@ -10,7 +10,13 @@ export default class TagDoc extends React.Component<{}, ITag> {
     constructor(props){
         super(props);
         this.state = {
-            tags: [{text: 'This is a tag'},{text: 'This is another tag', shade:'darker'},{text: 'Lorem ipsum', shade:'highlight1'}, {text: 'Dolor amet', shade:'highlight2', shape:'square'}],
+            tags: [
+                {text: 'This is a tag'},
+                {text: 'This is another tag', shade:'darker'},
+                {text: 'Lorem ipsum', shade:'highlight1'},
+                {text: 'Dolor amet', shade:'highlight2', shape:'square'},
+                {text: 'Read only tag', readOnly: true}
+            ],
         }
         this.handleClick=this.handleClick.bind(this);
     }
@@ -37,7 +43,12 @@ export default class TagDoc extends React.Component<{}, ITag> {
                     {this.state.tags.map((tag,index)=>{
                             return (
                                 <React.Fragment key={index}>
-                                    <Tag keyValue={index} text={tag.text} shade={tag.shade} shape={tag.shape} onClick={()=>this.handleClick(index)}/>
+                                    <Tag keyValue={index}
+                                        text={tag.text}
+                                        shade={tag.shade}
+                                        shape={tag.shape}
+                                        readOnly={tag.readOnly}
+                                        onClick={()=>this.handleClick(index)}/>
                                 </React.Fragment>
                         )
                         })}
@@ -63,4 +74,4 @@ export default class TagDoc extends React.Component<{}, ITag> {
         </section>
         )
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "2.4.10",
+  "version": "2.4.15",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/IconPicker.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { IItem } from "./SelectGrid";
+interface IProps {
+    label?: string;
+    filterPlaceholder?: string;
+    translateFunction?: (text: string) => string;
+    value: string;
+    onChange(icon: string): void;
+}
+interface IState {
+    icons: Array<IItem>;
+}
+export declare class IconPicker extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    componentDidMount(): void;
+    getItems: (searchString: string | null) => Promise<Array<IItem>>;
+    onChange: (item: IItem) => void;
+    triggerTemplate: (props: any) => JSX.Element;
+    itemTemplate: ({ item }: {
+        item: IItem | null;
+    }) => JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};

package/react/components/IconPicker.js

@@ -0,0 +1,283 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconPicker = void 0;
+var React = __importStar(require("react"));
+// @ts-ignore
+var iconFont = __importStar(require("../../app/styles/_icon-font.scss"));
+var Button_1 = require("./Button");
+var Icon_1 = require("./Icon");
+var SelectGrid_1 = require("./SelectGrid");
+var IconPicker = /** @class */ (function (_super) {
+    __extends(IconPicker, _super);
+    function IconPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getItems = function (searchString) {
+            return new Promise(function (resolve) {
+                var icons = __spreadArrays(_this.state.icons);
+                if (searchString) {
+                    icons = icons.filter(function (icon) { return (icon.value.toLowerCase().includes(searchString) ||
+                        icon.label.toLowerCase().includes(searchString)); });
+                }
+                resolve(icons);
+            });
+        };
+        _this.onChange = function (item) {
+            _this.props.onChange(item.value);
+        };
+        _this.triggerTemplate = function (props) { return React.createElement(Button_1.Button, { icon: _this.props.value, text: _this.props.value, onClick: function (e) { props.onClick(e); }, iconOnly: true }); };
+        _this.itemTemplate = function (_a) {
+            var item = _a.item;
+            return item ?
+                (React.createElement(React.Fragment, null,
+                    React.createElement(Icon_1.Icon, { name: item.value }),
+                    React.createElement("span", { className: "sd-text__normal sd-padding-t--1" }, item.label))) : null;
+        };
+        _this.state = { icons: [] };
+        return _this;
+    }
+    IconPicker.prototype.componentDidMount = function () {
+        var translateFunction = this.props.translateFunction ?
+            this.props.translateFunction : function (text) { return text; };
+        this.setState({
+            icons: getIcons(translateFunction),
+        });
+    };
+    IconPicker.prototype.render = function () {
+        return (React.createElement(SelectGrid_1.SelectGrid, { label: this.props.label || "Icon", filterPlaceholder: this.props.filterPlaceholder || "Search...", getItems: this.getItems, onChange: this.onChange, itemTemplate: this.itemTemplate, triggerTemplate: this.triggerTemplate }));
+    };
+    return IconPicker;
+}(React.PureComponent));
+exports.IconPicker = IconPicker;
+var getIcons = function (translateFunction) {
+    var translatedIconNameMap = {
+        'add-gallery': 'Add Gallery',
+        'add-image': 'Add Image',
+        'adjust': 'Adjust',
+        'align-center': 'Align Center',
+        'align-justify': 'Align Justify',
+        'align-left': 'Align Left',
+        'align-right': 'Align Right',
+        'amp': 'AMP',
+        'analytics': 'Analytics',
+        'archive': 'Archive',
+        'arrow-left': 'Arrow Left',
+        'arrow-right': 'Arrow Right',
+        'arrow-small': 'Arrow Small',
+        'ascending': 'Ascending',
+        'assign': 'Assign',
+        'attachment': 'Attachment',
+        'attachment-large': 'Attachment Large',
+        'audio': 'Audio',
+        'backward-thin': 'Backward Thin',
+        'ban-circle': 'Ban Circle',
+        'bell': 'Bell',
+        'bold': 'Bold',
+        'broadcast': 'Broadcast',
+        'broadcast-create': 'Broadcast Create',
+        'business': 'Business',
+        'calendar': 'Calendar',
+        'calendar-list': 'Calendar List',
+        'chevron-down-thin': 'Chevron Down Thin',
+        'chevron-left-thin': 'Chevron Left Thin',
+        'chevron-right-thin': 'Chevron Right Thin',
+        'chevron-up-thin': 'Chevron Up Thin',
+        'clear-all': 'Clear All',
+        'clear-format': 'Clear Format',
+        'close-small': 'Close Small',
+        'close-thick': 'Close Thick',
+        'code': 'Code',
+        'collapse': 'Collapse',
+        'comment': 'Comment',
+        'composite': 'Composite',
+        'copy': 'Copy',
+        'crop': 'Crop',
+        'cut': 'Cut',
+        'descending': 'Descending',
+        'dots': 'Dots',
+        'dots-vertical': 'Dots Vertical',
+        'download': 'Download',
+        'download-alt': 'Download Alternate',
+        'edit-line': 'Edit Line',
+        'envelope': 'Envelope',
+        'event': 'Event',
+        'exclamation-sign': 'Exclamation Sign',
+        'expand': 'Expand',
+        'expand-thin': 'Expand Thin',
+        'external': 'External',
+        'eye-open': 'Eye Open',
+        'facebook': 'Facebook',
+        'facebook-circle': 'Facebook Circle',
+        'fast_forward': 'Fast Forward',
+        'fast_rewind': 'Fast Rewind',
+        'fetch-as': 'Fetch As',
+        'file': 'File',
+        'filter-large': 'Filter Large',
+        'flip-horizontal': 'Flip Horizontal',
+        'flip-vertical': 'Flip Vertical',
+        'folder-close': 'Folder Close',
+        'folder-open': 'Folder Open',
+        'font': 'Font',
+        'forward-thin': 'Forward Thin',
+        'fullscreen': 'Fullscreen',
+        'globe': 'Globe',
+        'graphic': 'Graphic',
+        'grid-view': 'Grid View',
+        'grid-view-large': 'Grid View Large',
+        'heading-1': 'Heading 1',
+        'heading-2': 'Heading 2',
+        'heading-3': 'Heading 3',
+        'heading-4': 'Heading 4',
+        'heading-5': 'Heading 5',
+        'heading-6': 'Heading 6',
+        'heart': 'Heart',
+        'help-large': 'Help Large',
+        'highlight-package': 'Highlight Package',
+        'home': 'Home',
+        'indent-left': 'Indent Left',
+        'indent-right': 'Indent Right',
+        'info-large': 'Info Large',
+        'info-sign': 'Info Sign',
+        'ingest': 'Ingest',
+        'instagram': 'Instagram',
+        'italic': 'Italic',
+        'kanban-view': 'Kanban View',
+        'kill': 'Kill',
+        'link': 'Link',
+        'linked-in': 'LinkedIn',
+        'linked-in-circle': 'LinkedIn Circle',
+        'list-alt': 'List Alternate',
+        'list-menu': 'List Menu',
+        'list-plus': 'List Plus',
+        'list-view': 'List View',
+        'lock': 'Lock',
+        'map-marker': 'Map Marker',
+        'minus-sign': 'Minus Sign',
+        'minus-small': 'Minus Small',
+        'mobile': 'Mobile',
+        'move': 'Move',
+        'multi-star': 'Multi Start',
+        'multiedit': 'Multi Edit',
+        'new-doc': 'New Document',
+        'ok': 'Okay',
+        'ordered-list': 'Ordered List',
+        'package-create': 'Package Create',
+        'package-plus': 'Package Plus',
+        'paragraph': 'Paragraph',
+        'paste': 'Paste',
+        'pause': 'Pause',
+        'paywall': 'Paywall',
+        'pencil': 'Pencil',
+        'phone': 'Phone',
+        'photo': 'Photo',
+        'pick': 'Pick',
+        'picture': 'Picture',
+        'pin': 'Pin',
+        'play': 'Play',
+        'plus-large': 'Plus Large',
+        'plus-sign': 'Plus Sign',
+        'plus-small': 'Plus Small',
+        'post': 'Post',
+        'preformatted': 'Preformatted',
+        'preview-mode': 'Preview Mode',
+        'print': 'Print',
+        'question-sign': 'Question Sign',
+        'quote': 'Quote',
+        'random': 'Random',
+        'recurring': 'Recurring',
+        'redo': 'Redo',
+        'refresh': 'Refresh',
+        'remove-sign': 'Remove Sign',
+        'repeat': 'Repeat',
+        'retweet': 'Retweet',
+        'revert': 'Revert',
+        'rotate-left': 'Rotate Left',
+        'rotate-right': 'Rotate Right',
+        'search': 'Search',
+        'settings': 'Settings',
+        'share-alt': 'Share Alternate',
+        'signal': 'Signal',
+        'skip_next': 'Skip Next',
+        'skip_previous': 'Skip Previous',
+        'slideshow': 'Slideshow',
+        'star': 'Star',
+        'star-empty': 'Star Empty',
+        'stop': 'Stop',
+        'stream': 'Stream',
+        'strikethrough': 'Strikethrough',
+        'subscript': 'Subscript',
+        'suggestion': 'Suggestion',
+        'superscript': 'Superscript',
+        'switches': 'Switches',
+        'table': 'Table',
+        'takes-package': 'Takes Package',
+        'tasks': 'Tasks',
+        'text': 'Text',
+        'text-format': 'Text Format',
+        'th': 'Table Header',
+        'th-large': 'Table Header Large',
+        'th-list': 'Table Header List',
+        'time': 'Time',
+        'to-lowercase': 'To Lowercase',
+        'to-uppercase': 'To Uppercase',
+        'trash': 'Trash',
+        'twitter': 'Twitter',
+        'twitter-circle': 'Twitter Circle',
+        'underline': 'Underline',
+        'undo': 'Undo',
+        'unlocked': 'Unlocked',
+        'unordered-list': 'Unordered List',
+        'unspike': 'Unspike',
+        'upload': 'Upload',
+        'user': 'User',
+        'video': 'Video',
+        'warning-sign': 'Warning Sign',
+        'zoom-in': 'Zoom In',
+        'zoom-out': 'Zoom Out',
+    };
+    return iconFont.icon
+        .split(', ')
+        .sort()
+        .map(function (icon) { return ({
+        value: icon,
+        label: translatedIconNameMap[icon] ? translateFunction(translatedIconNameMap[icon]) : icon,
+    }); });
+};

package/react/components/ListItemLoader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare class ListItemLoader extends React.Component<{}> {
+    render(): JSX.Element;
+}