Encore Components

React Components for Encore sites and widgets

Install

$ npm install encore-components

Usage

1. Import component
2. Render component using ReactDOM

Documentation

Spinner

Render spinner with overlay. Can be used to show loader when application is loading. #####Props | Prop | Type | Description | Is required? | |:-------------:|:-------:|:----------------------------------------------------:|:------------:| | classModifier | string | External CSS class that will be added to the spinner | no | | message | string | Text message shown above spinner | no | | withOverlay | boolean | Define overlay visibility | no | | stylesConfig | object | Configuration of spinner styles | no |

Popup

Render popup. Can be used to show content in popup modal. #####Props | Prop | Type | Description | Is required? | |:-------------:|:-------:|:----------------------------------------------------:|:------------:| | hasHeader | boolean | Toggle header (default true) | no | | hasOverlay | boolean | Toggle overlay (default true) | no | | title | string | Header title | no | | theme | string | Define theme. ( default || theme="o-white-theme") | no | | onClose | func | Callback function to close. | no |

Calendar

Render calendar to page. #####Props | Prop | Type | Description | Is required? | |:------------------:|:-------:|:------------------------------------------------:|:------------:| | options | object | Options object | no | | isLoading | boolean | Toggle spinner appearance | no | | spinnerMessage | string | Attach msg to loading spinner | no | | disabledSelect | boolean | | no | | cssClassName | string | Classname of calendar | no | | themeConfiguration | object | | no | | parentTemplate | string | | no | | isError | boolean | | no | | onMonthSelector... | boolean | "onMonthSelectorChange" | no | | | | (date: string) | | | onValueUpdate | func | (selectedDates: Date[], selectedDay: string) | no | | onReady | func | (args: CalendarCallbackArguments) | no | | onMonthChange | func | (instance: Instance) | no | | shouldCalendarR... | boolean | "shouldCalendarRemainOpenOnFormClick" | no | | spinnerStylesConfig| object | Configuration of spinner styles | no |

Error message

Render error message popup #####Props | Prop | Type | Description | Is required? | |:------------------:|:-------:|:------------------------------------------------:|:------------:| | message | string | Text inside the error component | yes | | onClick | func | CB when popup is clicked | yes |

Carousel

Render carousel according to passed data. #####Props | Prop | Type | Description | Is required? | |:------------------:|:-----------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------:|:------------:| | widgetName | string | To understand from what widget click has fired. | yes | | slidesToShow | number | Amount of slides to show. Otherwise will be set 1 | no | | slideWidth | number | Width of each item in carousel. Otherwise will be set 250 | no | | carouselList | {id: string; name: string; imageUrl: string;}[] | Array of carousel items data. Otherwise will be used mocked data | no | | customContent | JSX.Elements[] | Array of elements with injected data which are going to be rendered as items. Otherwise will be used default JSX template | no |