@eccenca/gui-elements
Advanced tools
Collection of low-level GUI elements like Buttons, Icons or Alerts. Also includes core styles for those elements.
Collection of shared GUI elements and mixins.
MaterialMixin: A mixin which forces material design lite components to rerender if the React Component gets updated.PerformanceMixin: A mixin that provides default functionality for shouldComponentUpdate() to prevent unnecessary renderings.ScrollingMixin: A mixin that provides methods to scroll mounted React components into the viewport.The performance mixin provides a default process to test if a component need to be updated before it is rendered. It may be used to improve performance by preventeing unnecessary re-renderings of child components that did not changed.
Include mixin into your widget component:
import {PerformanceMixin} from '@eccenca/gui-elements';
const Widget = React.createClass({
mixins: [PerformanceMixin],
// ...
});
In GUI elments import it directly from the source file, use the include path relative to the folder of the widget:
import PerformanceMixin from '../mixins/PerformanceMixin';
Debug log: set window.enablePerformanceMixingLog = true in the ui tests script to enable the log output of the perfermance mixin to the development console.
The scrolling mixin provides methods to scroll a mounted React element or component into the visible viewport of a scrollable area:
scrollIntoView(): use this method within a component to scroll it into the visible viewportScrollingMixin.scrollElementIntoView(ReactOrDomElement): use this method from outside an element to scroll it into the visible viewportimport {ScrollingMixin} from '@eccenca/gui-elements';
const Widget = React.createClass({
mixins: [ScrollingMixin],
componentDidMount() {
const options = {
animationTime: 500, // (optional) integer, time in milliseconds
topOffset: 0, // (optional) integer, pixels to offset top alignment
callbackFinished: function(result) {}, // (optional) function, result parameter is currently 'cancelled' or 'completed',
scrollX: true // (optional) boolean, whether overflowX should be checked to decide whether an element is scrollable,
scrollY: true // (optional) boolean, whether overflowY should be checked to decide whether an element is scrollable,
}
this.scrollIntoView(
options // optional
);
},
// ...
});
It is important that the component height can be calculated correctly, scrollIntoView() should be used after all contents are loaded.
Use another method from the mixin to scroll other elements into the viewport. It's important to use references to active DOM elements or mounted React components, e.g. by using the React ref pattern.
// use it from outside of the component that needs to be scrolled into the visible viewport
import {Card, Button, ScrollingMixin} from '@eccenca/gui-elements';
const Widget = React.createClass({
handleScroll() {
const options = {
// animationTime: 500, // (optional) integer, time in milliseconds
// topOffset: 0, // (optional) integer, pixels to offset top alignment
// callbackFinished: function(result) {}, // (optional) function, result parameter is currently 'cancelled' or 'completed'
}
ScrollingMixin.scrollElementIntoView(
this.myCard,
options, // optional parameter
);
},
// ...
render() {
return <div>
<Card ref={card => this.myCard = card}>
<!-- ... -->
</Card>
<Button
onClick
>
Scroll card into viewport
</Button>
</div>
},
});
Style core for all projects. Includes libraries from:
Add this into your main scss.
@import '~@eccenca/gui-elements/src/main';
You can import the global default configuration by using it from @eccenca/gui-elements:
@import '~@eccenca/gui-elements/src/configuration.default';
/dist folder and use style-core.cssInclude helper function in your Sass files:
@import "~@eccenca/gui-elements/src/scss/helpers";
Helper automatically included if the default configuration is loaded.
to_color(): function to transform string into color value typeReturns correct Sass color value, even if $color_value parameter is a string value.
Examples:
to_color("#fff") => white
to_color("rgb(255, 255, 255)") => white
to_color("255, 255, 255") => white
Parameters:
$color_value (Sass::Script::Value::String) or (Sass::Script::Value::Color)Returns:
Alert: A message box which is optionally dismissable, includes Error, Info, Success and Warning.AutoCompleteBox: A auto-completion box (wrapper around SelectBox) which renders label, value and an optional description.BaseDialog: A custom message box with optional ButtonsButton: A simple Button which also may contain iconsBreadcrumbList: A simple element to create breadcrumb navigationCard: An application card section including title, menu, content section and button rowContent: container for all page content elements beside header, drawer and footerCheckbox: A checkbox with optional descriptionChip: A chip element for visualized statusConfirmationDialog: A message box with Buttons for confirmation and cancellationContextMenu: A context menu with menu itemsDateField: A date field input with calendar pickerDateTimeField: A date and time field input with calendar pickerFloatingActionList: provides FAB functionality for one and more actions, mainly for usage within cardsIcon: Icons with optional tooltips. Uses mdl icons which can be used with their ligature names.Layout: container of the MDL applicationNotAvailable: very simple element to use as "not available" placeholder informationNothing: Literally NothingPagination: A page control elementProgressbar: Progressbar which may be placed globally or locally in a componentRadioGroup and Radio: A radio button with optional label and groupingSelectBox: A selection box for choosing predefined valuesSpinner: Progressbar which may be placed globally or locally in a componentSwitch: A simple binary switch (a nicer checkbox)Table: A simple table which can be enriched with react elements as content.Tabs: A tabs container which manages tabbing behaviourTextField: A text field with floating label. Wrapper around React-MDL TextfieldVersion: A normalised string output of product versionUsage is as simple as importing and rendering the components.
import { Alert, Error, Info, Success, Warning } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
onDismiss(){ },
render() {
return (
<Alert
border={true} // true|false, default is false
vertSpacing={true} // true|false, default is false
handlerDismiss={this.onDismiss} // function, onClick handler, necessary if icon button should be rendered
labelDismiss="label for handler" // string, default: "Hide"
iconDismiss="expand_less" // string, default: "close"
>
<p>This is a</p>
<p>untyped message.</p>
</Alert>
<Info border={true} vertSpacing={true} >
info
</Info>
<Success border={true} vertSpacing={true} >
success
</Success>
<Warning border={true} vertSpacing={true} >
warning
</Warning>
<Error handlerDismiss={this.onDismiss} labelDismiss="remove error" vertSpacing={true} >
error with tooltip
</Error>
)
},
// ....
});
The AutoCompleteBox wraps SelectBox, it takes the same properties. The key differences are:
import { AutoCompleteBox } from '@eccenca/gui-elements';
const Page = React.createClass({
getInitialState(){
return {
value: null,
};
},
selectBoxOnChange(value){
this.setState({
value
});
},
// template rendering
render() {
return (
<AutoCompleteBox
placeholder="Label for AutoCompleteBox"
options={[{label: 'Label', description: 'This is a description', value: '5000 Examples'}]}
optionsOnTop={true} // option list opens up on top of select input (default: false)
value={this.state.value}
onChange={this.selectBoxOnChange}
creatable={true} // allow creation of new values
multi={true} // allow multi selection
clearable={false} // hide 'remove all selected values' button
handleValueChange={(value) => console.log(value)} // pass user input directly to parrent
/>
)
},
});
Read the GUI spec about button usage.
import {Button, AffirmativeButton, DismissiveButton, DisruptiveButton} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Button>
Simple flat button
</Button>
// according MDL-API, @see https://getmdl.io/components/index.html#buttons-section
<Button
raised={true} // true | false (default), use it in cases when flat buttons not exposed enough
accent={true} // true | false (default), use configured accent color
colored={true} // true | false (default), use configured primary color
ripple={false} // true | false (default), activate ripple effect on button
>
A Button
</Button>
// Icon button and Floating action button (FAB)
<Button
iconName="more_vert" // icon name, @see https://material.io/icons/
tooltip="This is a Test!" // tooltip, some icons have fallback tooltips, set it to false if you need to prevent them
fabSize="mini" // use fabSize only if it is a FAB. "mini" | "large" (default)
// you can apply all other button properties on icon buttons, too (e.g. affirmative, accent, ripple, ...)
/>
// use button elements to specify meaning of triggered action
// you can combine it with button properties like raised, iconName and ripple
<AffirmativeButton>
Affirmative action
</AffirmativeButton>
<DismissiveButton
raised={true}
>
Dismissive action
</DismissiveButton>
<DisruptiveButton
iconName="delete"
tooltip="Remove data"
/>
)
},
// ....
});
Some special class names provide extra functionality:
mdl-button--clearance: add it to buttons that clear input fields or whole input blocks, works with all button types.There is a special version of the Button element that can be used to visualize a running process. <ProgressButton/> elements are shown as raised disabled buttons but this behaviour can be overwritten.
import {ProgressButton} from '@eccenca/gui-elements';
import rxmq from 'ecc-messagebus';
// channel event which updates progressTopic
rxmq.channel('yourchannel').subject('progressNumber').onNext({
progress: 30, // integer, progress in percentage
lastUpdate: 'August 31st 2017, 9:48:24 am.', // string which should be a date, require tooltip to be set
});
const Page = React.createClass({
// template rendering
render() {
return (
<ProgressButton
progress={0..100} // integer, if not set or 0 then an infinite progress bar is used, default: 0
progressTopic={rxmq.channel('yourchannel').subject('progressNumber')} // message queue subject, if given that the button element listens to it for update objects that include `progressNumber` property with a value between 0 and 100
tooltip={'running'} // string, tooltip for progress bar, if a progress number is known (via option or message queue) then the tooltip is extenden by a colon, the value and a percent char
raised={true|false} // boolean, default: true
disabled={true|false} // boolean, default: true
>
Working!
</ProgressButton>
)
},
// ....
});
You can use progress and progressTopic options directly on <AffirmativeButton/>, <DismissiveButton/> and <DisruptiveButton/> elements.
The are two simple React elements to create breadcrumb navigation.
import {
BreadcrumbList,
BreadcrumbItem,
} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<BreadcrumbList
className={'my-own-class'} // (optional) string, element can be enhanced with additional CSS classes
>
<BreadcrumbItem
onClick={function(){}} // (optional) function, breadcrumb is rendered as HTML button element
>
Button
</BreadcrumbItem>
<BreadcrumbItem
href="#" // (optional) string, breadcrumb is rendered as HTML link anchor
>
Link
</BreadcrumbItem>
<BreadcrumbItem>
Span
</BreadcrumbItem>
</BreadcrumbList>
)
},
// ....
});
import {
Card,
CardTitle,
CardMenu,
CardContent,
CardActions
} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Card
className={'my-own-class'} // string, element can be enhanced with additional CSS classes
stretch={false|true} // boolean, should the card element use full width of available space, default: true
shadow={0..8} // integer, z-coordinate of card, amount of shadow applied to the card, 0 (off), 1 (2dp) to 8 {24dp}, default: 1
fixedActions={false|true} // boolean, if the card contains a fixed CardActions button row, default: false
reducedSize={false|true} // boolean, renders the card with reduced paddings and marging, default: false
>
<CardTitle
className="my-own-class"
border={false|true} // boolean, horizontal border under title, default: true
documentLevel={'h1'..'h6'} // string, headline level of title, parameter only used if title content is a string (not a react/dom element), default: 'h2'
>
Card title
</CardTitle>
<CardMenu
className="my-own-class"
>
<!-- use the ContextMenu element here, or simple one or more icon buttons, no restrictions here -->
<ContextMenu>
<MenuItem>Menu item 1</MenuItem>
<MenuItem>Menu item 2</MenuItem>
</ContextMenu>
</CardMenu>
<CardContent
className="my-own-class"
>
<!-- the content of the application card, no restriction here -->
</CardContent>
<CardActions
className="my-own-class"
border={false|true} // boolean, horizontal border top of button row, default: true
fixed={false|true} // boolean, if button row should be always visible sticky on botton when card is partly shown, default: false
>
<!-- no restrictions on action buttons here -->
</CardActions>
</Card>
)
},
// ....
});
import {Content} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Content
component={'main'} // string, element or function that defines the (HTML) element used for the content, default: 'div'
>
<p>Your content is here.</p>
</Content>
)
},
// ....
});
The <FloatingActionList /> element provides functionality for a quick adaption of the floating action button (FAB) pattern from Material Design.
It can be configured with a single action handler or a list of them. Then it opens a list of provided actions when activated, with a single action it will trigger the configured event handler immediately.
The position of the FAB is always the right bottom corner within the card but there is an fixed option to made it always visible in case the card is not fully shown in the viewport.
When there is already a fixed <CardActions /> element in use put the <FloatingActionList /> in it to use it fixed.
import {
Card,
CardTitle,
CardContent,
CardActions,
FloatingActionList
} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<div>
<Card>
<CardTitle>
Card title
</CardTitle>
<CardContent>
<!-- ... -->
</CardContent>
<FloatingActionList
className={'my-own-class'} // string, element can be enhanced with additional CSS classes
fabSize={'mini|large'} // string, what FAB size should be used, default: 'large'
fixed={false|true} // boolean, if FAB should be always visible sticky on botton when card is only partly shown, default: false
iconName={'add'} // string, name of icon what is used for the FAB before the list of actions is used, default: 'add', or if only one action is given the action icon is used.
actions={
[
// array of objects that define icon, label and handler method of each action
{
icon: 'info',
label: 'Open ConfirmationDialog',
handler: this.openConfirmationDialog
},
{
icon: 'info',
label: 'Open BaseDialog',
handler: this.openBaseDialog
},
]
}
/>
</Card>
<Card fixedActions={true}>
<CardTitle>
Card title
</CardTitle>
<CardContent>
<!-- ... -->
</CardContent>
<CardActions fixed={true}>
<!-- if a fixed button row is used then include the action list there if it need to be fixed, too. -->
<FloatingActionList
actions={
[
{
icon: 'info',
label: 'Open ConfirmationDialog',
handler: this.openConfirmationDialog
},
]
}
/>
</CardActions>
</Card>
</div>
)
},
// ....
});
import {Icon} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Icon
name="cloud_download" // icon name, @see https://material.io/icons/
tooltip="cloudy clouds" // tooltip, some icons have fallback tooltips, set it to false if you need to prevent them
badge="5" // Badge, as shown in https://getmdl.io/components/index.html#badges-section
/>
)
},
// ....
});
import { Checkbox, Switch} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Switch id="5" ripple={true} />
<Switch checked>
This is checked by default
</Switch>
<Checkbox id="6" ripple={true} />
<Checkbox label="Checkbox with label" />
<Checkbox disabled>
Disabled Checkbox with label
</Checkbox>
<Checkbox checked>
<div className="test">Checkbox 3 Text</div>
</Checkbox>
)
},
// ....
});
<Chip/> and <ChipVisual/> are a wrapper around react-mdl's <Chip/> and <ChipContact/>.
<Chip/> is essentially the same as in react-mdl, but does not allow of onClose.
<ChipVisual/> supports images, icons and text labels.
import { ChipVisual, Chip } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<div>
<Chip>plain chip</Chip>
<Chip
href={'http://example.com/'} // string, Chip is now rendered as HTML link anchor, can be combined with onClick
>
Chip with URI
</Chip>
<Chip
onClick={() => console.log('#1 chip clicked')} // click handler, default: false
>
<ChipVisual
image="https://placekitten.com/500/500" // image URL, default false
/>
clickable with image visual
</Chip>
<Chip
onClick={() => console.log('#2 chip clicked')}
>
<ChipVisual
label="AB" // string with max. 2 chars, default: false
bgColor="teal" // MD color names, e.g. red, red-50, ... @see https://material.io/guidelines/style/color.html
textColor="white" // MD color names, e.g. red, red-50, ... @see https://material.io/guidelines/style/color.html
/>
clickable with text visual
</Chip>
<Chip>
<ChipVisual>
<Icon name="done" tooltip="test" />
</ChipVisual>
plain chip with icon
</Chip>
</div>
)
},
// ....
});
import { Radio, RadioGroup} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<RadioGroup
onChange={this.updateRadio}
value={this.state.selectedRadio}
container="div" // default: "ul"
childContainer="div" // default "li"
ripple={true|false(default)}
>
<Radio
value={1}
label="Radio 1 Text"
/>
<Radio
disabled
value={2}
>
Radio 2 Text
</Radio>
<Radio
value={3}
>
<div className="test">Radio 3 Text <br/>Line 2</div>
</Radio>
</RadioGroup>
)
},
// ....
});
import { Button, ConfirmationDialog } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<ConfirmationDialog title="Dialog Title"
active={true}
modal={true}
size="mini"
cancelButton={<Button>Cancel</Button>}
confirmButton={<Button>Yes</Button>}
>
<p>Dialog Content</p>
</ConfirmationDialog>
)
},
// ....
});
import { Button, BaseDialog } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<BaseDialog title="Dialog Title"
active={true}
modal={true}
titleCancelButton={this.close}
size="mini"
buttonRow={[
<Button>Cancel</Button>,
<Button>Yes</Button>,
<Button>More</Button>
]}
>
<p>Dialog Content</p>
</BaseDialog>
)
},
// ....
});
import { ContextMenu, MenuItem } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<ContextMenu
align="left|right(default)"
valign="top|bottom(default)"
iconName="menu_more(default)"
tooltip="for menu button(currently not supported)"
target="idformymenu(auto generated if it is not given)"
>
<MenuItem>First Item</MenuItem>
<MenuItem>Second Item</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
<MenuItem>Another Menu Item</MenuItem>
<MenuItem>Alright</MenuItem>
</ContextMenu>
)
},
// ....
});
import { DateField } from '@eccenca/gui-elements';
const Page = React.createClass({
// value is the date shown to the user
// rawValue is the ISO 8601 representation if value is valid
// isValid indicates if given value matches the defined representation
onChange({value, rawValue, isValid, name}) {
this.setState({
[name]: value,
})
},
// template rendering
render() {
return (
<DateField
onChange={this.onChange}
name="dateValue"
value={this.state.dateValue} // Should be a moment.js value for consistent handling
placeholder="Please set a date" // optional (default: '')
dateFormat="DD-MM-YYYY" // validate date format, optional (default 'DD-MM-YYYY')
closeOnSelect={true} // auto close picker when a date is selected, optional (default: false)
input={false} // hide the input element (picker will be always displayed), optional (default: true)
disabled={true} // prevent selecting a date, optional (default: false)
inputClassName="customDateName"// extra class name on input element, optional (default: '')
/>
)
},
// ....
});
import { DateTimeField } from '@eccenca/gui-elements';
const Page = React.createClass({
// value is the date shown to the user
// rawValue is the ISO 8601 representation if value is valid
// isValid indicates if given value matches the defined representation
onChange({value, rawValue, isValid, name}) {
this.setState({
[name]: value,
})
},
// template rendering
render() {
return (
<DateTimeField
onChange={this.onChange}
name="dateTimeValue"
value={this.state.dateTimeValue} // Should be a moment.js value for consistent handling
label="Label for DateTime input" // optional
placeholder="Pls set a date" // optional (default: '') and only used if there is no label
dateFormat="DD-MM-YYYY" // validate date format, optional (default 'DD-MM-YYYY')
timeFormat="hh:mm a Z", // validate time format, optional (default 'hh:mm a')
closeOnSelect={true} // auto close picker when a date is selected, optional (default: false)
input={false} // hide the input element (picker will be always displayed), optional (default: true)
disabled={true} // prevent selecting a date, optional (default: false)
stretch={false} // use full width for input field (default: true)
error="This is a error message" // optional string
inputClassName="customDateName"// extra class name on input element, optional (default: '')
/>
)
},
// ....
});
import { Layout } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Layout
fixedDrawer={false|true} // drawer always visible and open in larger screensdrawer always visible and open in larger screens, default: false
fixedHeader={false|true} // header always visible, even in small screens, default: false
fixedTabs={false|true} // fixed tabs instead of the default scrollable tabs, default: false
>
...
</Layout>
)
},
// ....
});
Use that element as very simple "not available" placeholder information, e.g. in empty table cells or statistic overviews. It currently only supports short label strings and long descriptions using the title attribute.
import { NotAvailable } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<NotAvailable
label="N/A" // short label that is shown, default: 'n/a'
description="Not available element" // long description that is only shown on hover
inline={false|true} // show it as inline text element, default: false
/>
)
},
// ....
});
import { Nothing } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Nothing />
)
},
// ....
});
import { Pagination } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Pagination
offset={0} // initial first shown element
limit={10} // initial number of shown elements per page
totalResults={31} // max elements
showElementOffsetPagination={true} // show element offset numbers as pagination information, default: false (show page offsets)
newLimitText={'Elements per page'} // if not set number of elements selection is hidden
limitRange={[10, 25, 50, 100]} // possible number of elements selections, default: [5, 10, 25, 50, 100, 200]
isTopPagination={true} // is pagination on top of the site (pages selection opens to bottom), default is false
showPageInput={true} // the current page number can be edited to jump directly there, default: false
/>
)
},
// ....
});
import { Progressbar } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Progressbar progress={85} />
<Progressbar appearGlobal={true} indeterminate={true} progress={95} />
<Progressbar appearLocal={true} progress={15} />
)
},
// ....
});
The Spinner is global by default.
import { Spinner } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Spinner appearInline={true} />
<Spinner appearLocal={true} />
<Spinner />
)
},
// ....
});
The SelectBox wraps react-select to use mixed content of strings and numbers as well as the default object type. Please refer to all available properties in the linked documentation.
The SelectBox behaves like a controlled input
import { SelectBox } from '@eccenca/gui-elements';
const Page = React.createClass({
getInitialState(){
return {
value: 8,
};
},
selectBoxOnChange(value){
this.setState({
value
});
},
// template rendering
render() {
return (
<SelectBox
placeholder="Label for SelectBox"
options={['label1', 3]}
optionsOnTop={true} // option list opens up on top of select input (default: false)
value={this.state.value}
onChange={this.selectBoxOnChange}
creatable={true} // allow creation of new values
promptTextCreator={(newLabel) => ('New stuff: ' + newLabel)} // change default "Create option 'newLabel'" to "New stuff: 'newLabel'"
multi={true} // allow multi selection
clearable={false} // hide 'remove all selected values' button
searchable={true} // whether to behave like a type-ahead or not
/>
)
},
});
Note:
if objects are used in multi selectable options you can add {"clearableValue": false} to it to hide delete button for this specifc object
if "creatable" is set new values will be applied on Enter, Tab and Comma (",")
placeholder label is used within MDL floating label layout
Provides a simple table which can be enriched with react elements as content.
import {Table} from '@eccenca/gui-elements';
class Page extends React.Component {
// ....
// template rendering
render() {
return (
<Table
multiline={true} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
fullWidth={true} // boolean true or false, table uses full width even if it could be smaller (optional, default: false)
className="my-table-class" // string, additional CSS classes (optional, default: "")
>
<!-- your table content (optional) -->
</table>
)
},
// ....
};
Provides table body element that can be enriched by sub elements.
import {TableBody} from '@eccenca/gui-elements';
class Page extends React.Component {
// ....
// template rendering
render() {
return (
<TableBody
multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
className="my-own-class" // string, used for CSS class descriptions
>
<!-- table rows -->
</TableBody>
)
},
// ....
};
Provides table cell element that can be enriched by sub elements.
import {TableCell} from '@eccenca/gui-elements';
class Page extends React.Component {
// ...
// template rendering
// use it inside the correct Table elements
render() {
return (
<TableCell
isHead={true} // boolean, if the table cell contains a table head for the column or row (optional, default: false)
likeHead={true} // boolean, if a normal table cell should be look like a head element (optional, default: false)
multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
className="my-own-class" // string, used for additional CSS class descriptions
>
<!-- content -->
</TableCell>
)
},
// ...
};
Provides table head element that can be enriched sub elements.
import {TableHead} from '@eccenca/gui-elements';
class Page extends React.Component {
// ....
// template rendering
render() {
return (
<TableHead
multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
className="my-own-class" // string, used for CSS class descriptions
>
<!-- head row -->
</TableHead>
)
},
// ....
};
Provides table row element that can be enriched by sub elements.
import {TableRow} from '@eccenca/gui-elements';
class Page extends React.Component {
// ...
// template rendering
// use it inside the correct Table elements
render() {
return (
<TableRow
multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)
className="my-own-class" // string, used for additional CSS class descriptions
>
<!-- content -->
</TableRow>
)
},
// ...
};
import { Tabs } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Tabs
prefixTabNames={'ecc-view-resource-panel-tab'}
activeTab={'historyview'}
tabs={[{tabTitle: 'name', tabContent: value}]}
onTabClick={this.TabClick}
/>
)
},
// ....
});
import { TextField } from '@eccenca/gui-elements';
const Page = React.createClass({
// event is the original react onChange event
// value is event.target.value (a shortcut for convienience)
onChange({value, event, value}) {
this.setState({
[name]: value,
})
},
// template rendering
render() {
return (
<TextField
onChange={this.onChange}
name="textfield"
value={this.state.textfield} // Should be a moment.js value for consistent handling
label="Textfield"
error="Please correct your input" // optional, error message
stretch={false} // do not use full width (default: true)
multiline={true} // use a text area (default: false)
/>
)
},
// ....
});
You need to add wrapper to some elements, e.g. icons or checkboxes, to prevent unexepected behaviour. Use <span> for inline elements and <div> for block elments. If you have tooltip options, e.g. on icons, then use that parameter instead of the <Tooltip/> element.
import {Tooltip} from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Tooltip
label="This is the tooltip text." // content used for tooltip, string or dom/react element
position="bottom" // string: top|left|bottom|right, default: bottom
large={false} // true or false, default: false
>
<p>I have a tooltip.</p>
</Tooltip>
)
},
// ....
});
import { Version } from '@eccenca/gui-elements';
const Page = React.createClass({
// template rendering
render() {
return (
<Version
version={'v1.1.0'}
/>
)
},
// ....
});
[23.4.1] - 2024-02-08
FAQs
GUI elements based on other libraries, usable in React application, written in Typescript.
The npm package @eccenca/gui-elements receives a total of 14 weekly downloads. As such, @eccenca/gui-elements popularity was classified as not popular.
We found that @eccenca/gui-elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.