// tslint:disable:jsx-no-lambda jsx-alignment import * as CSS from 'csstype'; import * as React from 'react'; import { Button, Col, FormControl, FormGroup, Grid, InputGroup, Label, ListGroup, ListGroupItem, MenuItem, OverlayTrigger, Panel, Popover, Row, Tab, Table, Tooltip, Well, } from 'react-bootstrap'; import { Icon } from 'react-fa'; import { Observable } from 'rxjs'; import { ViewMap as AppViewMap } from '../../Routing'; import { Alert } from '../../Utils'; import { Command, Property } from '../../WebRx'; import * as Components from '../Common'; import { wxr } from '../React'; import { ComponentDemoView, ViewActivatorMap } from './ComponentDemoView'; import { ComponentDemoViewModel } from './ComponentDemoViewModel'; import { SampleData, sampleListData, SampleTreeData, sampleTreeData, } from './RoutingMap'; import { TodoListView } from './TodoList/TodoListView'; import { TodoListViewModel } from './TodoList/TodoListViewModel'; const sampleDataTemplate = (x: SampleData) => { return (
Name: {x.name}
Required By: {x.requiredBy}
); }; const sampleDataCmdTemplate = (x: SampleData) => { return ( Alert.create(JSON.stringify(x, undefined, 2), 'Element Clicked') } > {sampleDataTemplate(x)} ); }; export const demoViewMap: ViewActivatorMap = { Loading: () => , SizedLoading: (c, cr) => Components.Loading.renderSizedLoadable(true, '50px Loader...', 50), Splash: () => ( ), CommandButton: () => ( ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value } command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'), )} tooltip="Embedded Command Tooltips!!!" > Execute Command ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value } command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'), )} tooltip={ Custom Tooltip } > Same Command ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value } command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'), )} tooltip={ Custom Overlay Tooltip } /> } > Same Again ), CommandButtonCondition: (data: { condition: Observable; cmd: Command; }) => { return ( Number(x)} > ); }, Alert: () => (
), ObservableWrapper: () => (
Current Value is {x}
} /> ), TimeSpanInput: () => (
), SearchViewModel: (viewModel: Components.SearchViewModel) => ( ), ContextMenu: () => (
{ const content = String.isNullOrEmpty(item.eventKey) ? item.href : `eventKey = ${String.stringify(item.eventKey)}`; Alert.create(content, 'Context Menu Item Clicked'); }} >
Right Click Here for the Context Menu
Section Header Item 1 Item 2 Disabled Items Item 3
), ProfilePicture: () => { const style = { margin: '5px' }; const imageData = // tslint:disable-next-line:max-line-length 'iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAYAAADWibxkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+5JREFUeNrkm0tIVFEYx8+dhzajNGZqOjqZj9TULJkwe1CL0DQpI4yoaBVCQbZw06IHTLSqoNrMoiKIQiNqyLAs2gypEBUY0cwqe4gERkHhlJTp9P/yDIQ6mcw513vn/uGHgnruPf8533e+81Bxu91sDmQF28FmUAlc4Bu4A06Bz6IeNDo6ylwuF+vs7Jz25xaVO54GtoG9oBzMA4n8PRaAZrAYnAGvQEj2C6llgAJ2AA8om+F96Pe2gucgCLpBF/go48VMKnSePuHz4OYMnZ8cImvAfnAF9ICdejTABi6BwzE8i/5uKWgDLXoz4CTYJzBcKTfU6MWAWnBIQji16MEAiuFWnuVFaz3I0roBy/kcLyuppmvdgAaJoWXiyVXTBpRLriksWjcgi8mVpg1I5iWvYUeAQ2SM6jEHUJY2Sx7+2Vo2QOHIVCM3WpMGhFVYYOWKqgVkGDAGxiUbQPsEw1o1gHZ2fko24DX4qlUDPnFk6oHWC6EuiZ1/J7J9WQZcAH2S2j4rcoTJMoDi87SEdm+Bi3rYDyDdBfcEtvcFnAOjejHgOzjCxO3xvwFPZdTVMhUAzwS19Qj80psBJL+ANkbANVkrK9nqFtDGE1786NKAPgHzNp0S/dCrATR8fTG28Vbm5oIa+hDjJ5iqdwPyY1y/14ha/6ttAJ3pednEqXAs2giOgxQ9GUAHIw/BQUFD+CigWw6FejBgN7gB8gS3uw60A6dWDSgFl8FVGcOVaxV/RpoWDKDd3xw2caujjRcsdKnBKjm31PNwqI81vGZ7wEC7vYvACkC3q+gQlG5y5DL1tRrcBy95uU3fP+Z1hzADaOqhY65qUMG/0pSWweQefsxGFZwD4AW4zemPxYCVoAls4nE9n2lfCaCKc4zvRfj4Evp91Bh2Oqck1EK+mdHI4zuR6U/0znRC3aQoSmMoFMrNzMwMlJSUDP9PEqTEUsDiQ4rJZMofGxtr9Xg8PXV1dbuCweA/DaCQaGBxJovlT6QvGRgYuN7c3LwnEAhENSCHFxtxJ4wElpSUZBkcHDzh9/vToxlA01syi1OFw2FmtVpdNputMpoBFSz+ZWcT95KnNWBtvPfe4XAwr9e7ob+/f4oBjjmq6NSdFhSFjYyMNHV0dBRNNoBKW5cBQoDyQIbP56udbEB1PCfAyaMACXELTYemv+Z/NzOIzGYzGxoaKm5vb7dFDFgIljEDCXVBBqbDvIgBaRJ2b/QwHRZHDIj8/46hBgHIjhhQZLDO00zAUBY7IwaUGs0Au93Oent7C0w8AZYZzQBaFyQkJKSSASVM3g6u5itjMqDKgAkwohQLXwHSbi/dvRk3UOep77bfAgwAst2xTAPm/mIAAAAASUVORK5CYII='; return (
); }, ItemsPanel: () => ( ), ItemsPanelBound: () => ( x.name} /> ), ListGroupPanel: () => (
), ListGroupPanelBound: () => ( ), GridPanel: () => ( `Col-${ctx.column}`} itemStyle={{ verticalAlign: 'middle' }} >
(0, 0): [ 200px width, 100px height ]
(1, 0): [ 2x stretch width, 100px height ]
(2, 0): [ 1x stretch width, 100px height ]
(0, 1): [ 200px width, 200px height ]
(1, 1): [ 2x stretch width, 200px height ]
(2, 1): [ 1x stretch width, 200px height ]
(0, 2): [ 200px width, 1x stretch height ]
(1, 2): [ 2x stretch width, 1x stretch height ]
(2, 2): [ 1x stretch width, 1x stretch height ]
), StackPanel: () => (
), UniformGridPanel: () => ( ), WrapPanel: () => ( ), ContentTooltip: () => { return ( text content tooltip text content tooltip with className, placement text content tooltip as popover text content tooltip as popover with title } > Tooltip content tooltip } placement="top" > Tooltip content tooltip with className, placement } popover > Tooltip content tooltip as popover } title="Popover Mode" > Tooltip content tooltip as popover with title } > Popover content tooltip } placement="top" > Popover content tooltip with className, placement } popover > Popover content tooltip as popover } title="Popover Mode" > Popover content tooltip as popover with title } placement="bottom" > Tooltip content tooltip with overrides } placement="bottom" > Popover content tooltip with overrides } placement="left" /> } placement="bottom" > OverlayTrigger content tooltip with overrides ); }, NavButton: () => { return (
testing
); }, TreeItem: () => ( x.items} itemTemplate={(x: SampleTreeData) => x.name} startExpanded /> ), TreeItemPresenter: () => ( ( x.items} itemTemplate={(x: SampleTreeData) => x.name} startExpanded /> )} /> ), HorizontalTreeItemPresenter: () => ( ( {x} )} itemTemplate={(item: SampleTreeData, i) => ( x.items} itemsPanelTemplate={x => ( {x} )} itemTemplate={(x: SampleTreeData) => x.name} /> )} /> ), HorizontalItemsTreeItemPresenter: () => ( ( x.items} itemsPanelTemplate={x => ( {x} )} itemTemplate={(x: SampleTreeData) => x.name} /> )} /> ), HorizontalRootTreeItemPresenter: () => ( ( {x} )} itemTemplate={(item: SampleTreeData, i) => ( x.items} itemTemplate={(x: SampleTreeData) => x.name} /> )} /> ), ItemsViewModel: ( viewModel: Components.ItemsViewModel<{}>, componentRoute: string, ) => { switch (componentRoute) { case 'ItemsList': return ( sampleDataTemplate(x)} itemStyle={{ textAlign: 'left' }} /> ); case 'ItemsWrap': return ( ( )} > ); case 'ItemsUGrid': return ( ); case 'ItemsHStack': return ( ( )} > ); case 'ItemsGrid': return ( { const row = Math.floor(i / 3) % 3; const col = (row + i) % 3; return (
{x.name}
); }} compact > ); case 'ItemsTree': return ( x.items} itemTemplate={(x: SampleTreeData) => sampleDataTemplate(x)} expandedIconName="caret-down" collapsedIconName="caret-right" /> ); default: return null; } }, ListItemsViewModel: ( viewModel: Components.ListItemsViewModel<{}>, componentRoute: string, ) => { const a: React.ReactElement = ( ); switch (componentRoute) { case 'ListItemsDefault': return ; case 'ListItemsListGroup': return ( {x}} > ); case 'ListItemsPanel': return ( ); case 'ListItemsUGrid': return ( ); case 'ListItemsGrid': return ( x.id} /> x.cat} /> x.name} />
{x.requiredBy}
} /> ); case 'ListItemsGridAuto': return ( } /> ); default: return null; } }, TreeListItemsViewModel: ( viewModel: Components.TreeListItemsViewModel<{}>, componentRoute: string, ) => { return ( x.items} clickToExpand /> ); }, ModalDialogViewModel: (data: { viewModel: Components.ModalDialogViewModel; createContext: Command; accept: Command; reject: Command; }) => (
( )} acceptCommand={data.viewModel.hideOnExecute(data.accept)} acceptCommandParameter={(x: string) => `something else with ${x}`} > data.viewModel.context.value} > Accept data.viewModel.context.value} > Reject Cancel
), TabsViewModel: ( viewModel: Components.TabsViewModel, componentRoute: string, ) => { if (componentRoute === 'StaticTabs') { return ( Content 1 Content 2 ); } else { let c = 0; const template = new Components.TabRenderTemplate( (x, i) => `Tab ${x}`, (x, i, vm) => ( ), ); return (
); } }, CommonPanel: () => ( ), CommonPanelList: () => ( } footerActions={