UNPKG

@syncfusion/ej2-react-navigations

Version:

A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for React

476 lines (456 loc) 15.8 kB
import { ComplexBase, applyMixins, ComponentBase } from '@syncfusion/ej2-react-base'; export { Inject } from '@syncfusion/ej2-react-base'; import { createElement, Component } from 'react'; import { Accordion, Toolbar, ContextMenu, Breadcrumb, Carousel, Tab, TreeView, Sidebar, Menu, AppBar, Stepper } from '@syncfusion/ej2-navigations'; export * from '@syncfusion/ej2-navigations'; /** * `AccordionItemDirective` represent a item of the React Accordion. * It must be contained in a Accordion component(`AccordionComponent`). * ```tsx * <AccordionComponent> * <AccordionItemsDirective> * <AccordionItemDirective header='Header1'></AccordionItemDirective> * <AccordionItemDirective header='Header2' content='Content2'></AccordionItemDirective> * <AccordionItemsDirective> * </AccordionComponent> * ``` */ class AccordionItemDirective extends ComplexBase { } AccordionItemDirective.moduleName = 'accordionItem'; class AccordionItemsDirective extends ComplexBase { } AccordionItemsDirective.propertyName = 'items'; AccordionItemsDirective.moduleName = 'accordionItems'; /** * Represents the React Accordion Component. * ```html * <AccordionComponent></AccordionComponent * ``` */ class AccordionComponent extends Accordion { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'accordionItems': 'accordionItem' }; this.statelessTemplateProps = ["itemTemplate", "headerTemplate"]; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(AccordionComponent, [ComponentBase, Component]); /** * `ItemDirective` directive represent a item of the React Toolbar. * It must be contained in a Toolbar component(`ToolbarComponent`). * ```tsx * <ToolbarComponent> * <ItemsDirective> * <ItemDirective text='Cut'></ItemDirective> * <ItemDirective text='Copy'></ItemDirective> * <ItemsDirective> * </ToolbarComponent> * ``` */ class ItemDirective extends ComplexBase { } ItemDirective.moduleName = 'item'; class ItemsDirective extends ComplexBase { } ItemsDirective.propertyName = 'items'; ItemsDirective.moduleName = 'items'; /** * Represents the React Toolbar Component. * ```html * <ToolbarComponent></ToolbarComponent * ``` */ class ToolbarComponent extends Toolbar { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'items': 'item' }; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(ToolbarComponent, [ComponentBase, Component]); /** * `ContextMenuComponent` represents the react ContextMenu Component. * ```ts * <div id='target'>Right click / Touch hold to open the ContextMenu</div> * <ContextMenuComponent target='#target' items={menuItems} /> * ``` */ class ContextMenuComponent extends ContextMenu { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = true; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('ul', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(ContextMenuComponent, [ComponentBase, Component]); /** * `BreadcrumbItemDirective` represent a item of the React Breadcrumb. * It must be contained in a Breadcrumb component(`BreadcrumbComponent`). * ```tsx * <BreadcrumbComponent> * <BreadcrumbItemsDirective> * <BreadcrumbItemDirective text='Home' url='/'></BreadcrumbItemDirective> * <BreadcrumbItemDirective text='Index' url='./index'></BreadcrumbItemDirective> * </BreadcrumbItemsDirective> * </BreadcrumbComponent> * ``` */ class BreadcrumbItemDirective extends ComplexBase { } BreadcrumbItemDirective.moduleName = 'breadcrumbItem'; class BreadcrumbItemsDirective extends ComplexBase { } BreadcrumbItemsDirective.propertyName = 'items'; BreadcrumbItemsDirective.moduleName = 'breadcrumbItems'; /** * `BreadcrumbComponent` represents the react Breadcrumb Component. * ```ts * <BreadcrumbComponent items={breadcrumbItems} /> * ``` */ class BreadcrumbComponent extends Breadcrumb { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'breadcrumbItems': 'breadcrumbItem' }; this.statelessTemplateProps = ["itemTemplate"]; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('nav', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(BreadcrumbComponent, [ComponentBase, Component]); /** * `CarouselItemDirective` represent a item of the React Carousel. * It must be contained in a Carousel component(`CarouselComponent`). * ```tsx * <CarouselComponent> * <CarouselItemsDirective> * <CarouselItemDirective template='#item1'></CarouselItemDirective> * <CarouselItemDirective template='#item2'></CarouselItemDirective> * </CarouselItemsDirective> * </CarouselComponent> * ``` */ class CarouselItemDirective extends ComplexBase { } CarouselItemDirective.moduleName = 'carouselItem'; class CarouselItemsDirective extends ComplexBase { } CarouselItemsDirective.propertyName = 'items'; CarouselItemsDirective.moduleName = 'carouselItems'; /** * `CarouselComponent` represents the react Carousel Component. * ```ts * <CarouselComponent items={carouselItems} /> * ``` */ class CarouselComponent extends Carousel { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'carouselItems': 'carouselItem' }; this.statelessTemplateProps = ["itemTemplate"]; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(CarouselComponent, [ComponentBase, Component]); /** * `TabItemDirective` represent a item of the React Tab. * It must be contained in a Tab component(`Tab`). * ```tsx * <TabComponent> * <TabItemsDirective> * <TabItemDirective header= { 'Header 1' } content= { 'Content 1' } /> * <TabItemDirective header= { 'Header 2' } content= { 'Content 2' } /> * <TabItemsDirective> * </TabComponent> * ``` */ class TabItemDirective extends ComplexBase { } TabItemDirective.moduleName = 'tabItem'; TabItemDirective.complexTemplate = { 'header.text': 'header.text' }; class TabItemsDirective extends ComplexBase { } TabItemsDirective.propertyName = 'items'; TabItemsDirective.moduleName = 'tabItems'; /** * Represents the React Tab Component. * ```html * <TabComponent></TabComponent> * ``` */ class TabComponent extends Tab { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'tabItems': 'tabItem' }; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(TabComponent, [ComponentBase, Component]); /** * `TreeViewComponent` represents the react TreeView Component. * ```ts * <TreeViewComponent allowDragAndDrop={true}></TreeViewComponent> * ``` */ class TreeViewComponent extends TreeView { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = true; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(TreeViewComponent, [ComponentBase, Component]); /** * `SidebarComponent` represents the Essential JS 2 React Sidebar Component. * ```ts * <SidebarComponent></SidebarComponent> * ``` */ class SidebarComponent extends Sidebar { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = true; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = true; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(SidebarComponent, [ComponentBase, Component]); class MenuItemDirective extends ComplexBase { } MenuItemDirective.moduleName = 'menuItem'; class MenuItemsDirective extends ComplexBase { } MenuItemsDirective.propertyName = 'items'; MenuItemsDirective.moduleName = 'menuItems'; /** * `MenuComponent` represents the react Menu Component. * ```ts * <MenuComponent items={menuItems} /> * ``` */ class MenuComponent extends Menu { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'menuItems': 'menuItem' }; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('ul', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(MenuComponent, [ComponentBase, Component]); /** * `AppBarComponent` represents the Essential JS 2 React AppBar Component. * ```ts * <AppBarComponent></AppBarComponent> * ``` */ class AppBarComponent extends AppBar { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = true; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = true; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('header', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(AppBarComponent, [ComponentBase, Component]); /** * `StepDirective` represents a step of the React Stepper. * It must be contained in a Stepper component(`StepperComponent`). * ```tsx * <StepperComponent> * <StepsDirective> * <StepDirective iconCss= { 'e-icons e-folder' } text= { 'Step 1' } /> * <StepDirective iconCss= { 'e-icons e-folder' } text= { 'Step 2' } /> * </StepsDirective> * </StepperComponent> * ``` */ class StepDirective extends ComplexBase { } StepDirective.moduleName = 'step'; class StepsDirective extends ComplexBase { } StepsDirective.propertyName = 'steps'; StepsDirective.moduleName = 'steps'; /** * `StepperComponent` represents the react Stepper Component. * ```ts * <StepperComponent steps={stepItems} /> * ``` */ class StepperComponent extends Stepper { constructor(props) { super(props); this.initRenderCalled = false; this.checkInjectedModules = false; this.directivekeys = { 'steps': 'step' }; this.statelessTemplateProps = null; this.templateProps = null; this.immediateRender = false; this.isReactMock = true; this.portals = []; } render() { this.isReactMock = false; if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) { super.render(); this.initRenderCalled = true; } else { return createElement('nav', this.getDefaultAttributes(), [].concat(this.props.children, this.portals)); } } } applyMixins(StepperComponent, [ComponentBase, Component]); export { AccordionComponent, AccordionItemDirective, AccordionItemsDirective, AppBarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective, CarouselComponent, CarouselItemDirective, CarouselItemsDirective, ContextMenuComponent, ItemDirective, ItemsDirective, MenuComponent, MenuItemDirective, MenuItemsDirective, SidebarComponent, StepDirective, StepperComponent, StepsDirective, TabComponent, TabItemDirective, TabItemsDirective, ToolbarComponent, TreeViewComponent }; //# sourceMappingURL=ej2-react-navigations.es2015.js.map