{"id":21296700,"url":"https://github.com/eccenca/ecc-gui-elements","last_synced_at":"2025-03-15T17:26:23.345Z","repository":{"id":28575917,"uuid":"118760277","full_name":"eccenca/ecc-gui-elements","owner":"eccenca","description":"Collection of low-level GUI elements like Buttons, Icons or Alerts.","archived":false,"fork":false,"pushed_at":"2022-12-10T16:55:58.000Z","size":8595,"stargazers_count":2,"open_issues_count":9,"forks_count":0,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-01-22T07:20:21.576Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eccenca.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-24T12:06:56.000Z","updated_at":"2021-06-03T12:19:12.000Z","dependencies_parsed_at":"2023-01-14T09:05:35.077Z","dependency_job_id":null,"html_url":"https://github.com/eccenca/ecc-gui-elements","commit_stats":null,"previous_names":[],"tags_count":173,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eccenca%2Fecc-gui-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eccenca%2Fecc-gui-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eccenca%2Fecc-gui-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eccenca%2Fecc-gui-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eccenca","download_url":"https://codeload.github.com/eccenca/ecc-gui-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243764650,"owners_count":20344459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T14:29:07.129Z","updated_at":"2025-03-15T17:26:23.313Z","avatar_url":"https://github.com/eccenca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Low-Level GUI Components (@eccenca/gui-elements)\n\nCollection of shared GUI elements and hocs.\n\n## Mixins\n- `ScrollingHOC`: It provides methods to scroll mounted React components into the viewport.\n\n### ScrollingHOC\n\nThe scrolling mixin provides methods to scroll a mounted React element or component into the visible viewport of a scrollable area:\n\n* `scrollIntoView()`: use this method within a component to scroll it into the visible viewport\n* `ScrollingMixin.scrollElementIntoView(ReactOrDomElement)`: use this method from outside an element to scroll it into the visible viewport\n\n```js\nimport { ScrollingHOC } from '@eccenca/gui-elements';\nconst Widget = React.createClass({\n\n    componentDidMount() {\n        const options = {\n            animationTime: 500, // (optional) integer, time in milliseconds\n            topOffset: 0, // (optional) integer, pixels to offset top alignment\n            callbackFinished: function(result) {}, // (optional) function, result parameter is currently 'cancelled' or 'completed',\n            scrollX: true // (optional) boolean, whether overflowX should be checked to decide whether an element is scrollable,\n            scrollY: true // (optional) boolean, whether overflowY should be checked to decide whether an element is scrollable,\n        }\n        this.scrollIntoView(\n            options // optional\n        );\n    },\n    // ...\n});\nexport default ScrollingHOC(Widget)\n```\n\nIt is important that the component height can be calculated correctly, `scrollIntoView()` should be used after all contents are loaded.\n\nUse another method from the mixin to scroll other elements into the viewport.\nIt's important to use references to active DOM elements or mounted React components, e.g. by using the React ref pattern.\n\n```js\n// use it from outside of the component that needs to be scrolled into the visible viewport\nimport {Card, Button, ScrollingHOC} from '@eccenca/gui-elements';\nconst Widget = React.createClass({\n    handleScroll() {\n        const options = {\n            // animationTime: 500, // (optional) integer, time in milliseconds\n            // topOffset: 0, // (optional) integer, pixels to offset top alignment\n            // callbackFinished: function(result) {}, // (optional) function, result parameter is currently 'cancelled' or 'completed'\n        }\n        this.props.scrollElementIntoView(\n            this.myCard,\n            options, // optional parameter\n        );\n    },\n    // ...\n    render() {\n        return \u003cdiv\u003e\n            \u003cCard ref={card =\u003e this.myCard = card}\u003e\n                \u003c!-- ... --\u003e\n            \u003c/Card\u003e\n            \u003cButton\n                onClick\n            \u003e\n                Scroll card into viewport\n            \u003c/Button\u003e\n        \u003c/div\u003e\n    },\n});\n```\n\n## Core styles\n\nStyle core for all projects.\nIncludes libraries from:\n\n- [Material Lite One](https://github.com/eccenca/material-lite-one)\n- [Material Design icons](http://google.github.io/material-design-icons)\n- [Roboto Font](https://github.com/FontFaceKit/roboto)\n\n### Include full SCSS into application\n\nAdd this into your main scss.\n\n```scss\n@import '~@eccenca/gui-elements/src/main';\n```\n\n### Use configuration in SCSS\n\nYou can import the global default configuration by using it from `@eccenca/gui-elements`:\n\n```scss\n@import '~@eccenca/gui-elements/src/configuration.default';\n```\n\n#### Justify default configuration\n\nBase configuration can be defined by only 7 variables, they need to be set before importing `~@eccenca/gui-elements/src/configuration.default`.\n\n- Colors:\n    - `$ecc-color-primary`:\n    - `$ecc-color-primary-contrast`:\n    - `$ecc-color-accent`:\n    - `$ecc-color-accent-contrast`:\n- Sizes:\n    - `$ecc-size-typo-base`:\n    - `$ecc-size-typo-base-lineheight`:\n    - `$ecc-size-type-levelratio`:\n\nIf necessary you can pre-define all SCSS variables with your own values, please have a look into `src/onfiguration.default` and `src/configuration.mdl` in `@eccenca/gui-elements` for a full list, otherwise they are set by default to base colors (e.g. for alerts) or calculated based on the mentioned variables above.\n\n### Include ready to use CSS\n\n- Copy `/dist` folder and use `style-core.css`\n\n\n## Helpers\n\nInclude helper function in your Sass files:\n\n```scss\n@import \"~@eccenca/gui-elements/src/scss/helpers\";\n```\n\nHelper automatically included if the default configuration is loaded.\n\n- `to_color()`: function to transform string into color value type\n\n### to_color($color_value)\n\nReturns correct Sass color value, even if `$color_value` parameter is a string value.\n\nExamples:\n\n```\nto_color(\"#fff\") =\u003e white\nto_color(\"rgb(255, 255, 255)\") =\u003e white\nto_color(\"255, 255, 255\") =\u003e white\n```\n\nParameters:\n\n* `$color_value` (Sass::Script::Value::String) or (Sass::Script::Value::Color)\n\nReturns:\n\n* (Sass::Script::Value::Color)\n\n\n## GUI elements\n\n- `Alert`: A message box which is optionally dismissable, includes `Error`, `Info`, `Success` and `Warning`.\n- `AutoCompleteBox`: A auto-completion box (wrapper around `SelectBox`) which renders label, value and an optional description.\n- `BaseDialog`: A custom message box with optional Buttons\n- `Button`: A simple Button which also may contain icons\n- `BreadcrumbList`: A simple element to create breadcrumb navigation\n- `Card`: An application card section including title, menu, content section and button row\n- `Content`: container for all page content elements beside header, drawer and footer\n- `Checkbox`: A checkbox with optional description\n- `Chip`: A chip element for visualized status\n- `ConfirmationDialog`: A message box with Buttons for confirmation and cancellation\n- `ContextMenu`: A context menu with menu items\n- `DateField`: A date field input with calendar picker\n- `DateTimeField`: A date and time field input with calendar picker\n- `FloatingActionList`: provides FAB functionality for one and more actions, mainly for usage within cards\n- `Icon`: Icons with optional tooltips. Uses [mdl icons](https://design.google.com/icons/) which can be used with their ligature names.\n- `Layout`: container of the MDL application\n- `NotAvailable`: very simple element to use as \"not available\" placeholder information\n- `Nothing`: Literally Nothing\n- `Pagination`: A page control element\n- `Progressbar`: Progressbar which may be placed globally or locally in a component\n- `RadioGroup` and `Radio`: A radio button with optional label and grouping\n- `SelectBox`: A selection box for choosing predefined values\n- `Spinner`: Progressbar which may be placed globally or locally in a component\n- `Switch`: A simple binary switch (a nicer checkbox)\n- `Table`: A simple table which can be enriched with react elements as content.\n- `Tabs`: A tabs container which manages tabbing behaviour\n- `TextField`: A text field with floating label. Wrapper around [React-MDL Textfield]()\n- `Version`: A normalised string output of product version\n\nUsage is as simple as importing and rendering the components.\n\n### Alert (Error, Info, Success and Warning)\n\n```js\nimport { Alert, Error, Info, Success, Warning } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    onDismiss(){ },\n    render() {\n        return (\n            \u003cAlert\n                border={true} // true|false, default is false\n                vertSpacing={true} // true|false, default is false\n                handlerDismiss={this.onDismiss} // function, onClick handler, necessary if icon button should be rendered\n                labelDismiss=\"label for handler\" // string, default: \"Hide\"\n                iconDismiss=\"expand_less\" // string, default: \"close\"\n            \u003e\n                \u003cp\u003eThis is a\u003c/p\u003e\n                \u003cp\u003euntyped message.\u003c/p\u003e\n            \u003c/Alert\u003e\n            \u003cInfo border={true} vertSpacing={true} \u003e\n                info\n            \u003c/Info\u003e\n            \u003cSuccess border={true} vertSpacing={true} \u003e\n               success\n            \u003c/Success\u003e\n            \u003cWarning border={true} vertSpacing={true} \u003e\n                warning\n            \u003c/Warning\u003e\n            \u003cError handlerDismiss={this.onDismiss} labelDismiss=\"remove error\" vertSpacing={true} \u003e\n                error with tooltip\n            \u003c/Error\u003e\n        )\n    },\n    // ....\n});\n```\n\n### AutoCompleteBox\n\nThe AutoCompleteBox wraps `SelectBox`, it takes the same properties. The key differences are:\n\n- rendering of multi-line options with label, value and description.\n    - If value and label are the same, only one is rendered\n    - descriptions are optional\n- the options have to be an array of objects\n- it is always searchable, while a SelectBox can be de-activated\n\n```js\nimport { AutoCompleteBox } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    getInitialState(){\n      return {\n          value: null,\n      };\n    },\n    selectBoxOnChange(value){\n       this.setState({\n           value\n       });\n    },\n    // template rendering\n    render() {\n        return (\n            \u003cAutoCompleteBox\n                placeholder=\"Label for AutoCompleteBox\"\n                options={[{label: 'Label', description: 'This is a description', value: '5000 Examples'}]}\n                optionsOnTop={true} // option list opens up on top of select input (default: false)\n                value={this.state.value}\n                onChange={this.selectBoxOnChange}\n                creatable={true} // allow creation of new values\n                multi={true} // allow multi selection\n                clearable={false} // hide 'remove all selected values' button\n                handleValueChange={(value) =\u003e console.log(value)} // pass user input directly to parrent\n                showLabel={true} // define if label in options should be shown (default: true)\n                showValue={true} // define if value in options should be shown (default: true)\n                showDescription={true} // define if description in options should be shown (default: true)\n            /\u003e\n        )\n    },\n});\n\n```\n\n### Button\n\nRead the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons).\n\n```js\nimport {Button, AffirmativeButton, DismissiveButton, DisruptiveButton} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cButton\u003e\n                Simple flat button\n            \u003c/Button\u003e\n\n            // according MDL-API, @see https://getmdl.io/components/index.html#buttons-section\n            \u003cButton\n                raised={true} // true | false (default), use it in cases when flat buttons not exposed enough\n                accent={true} // true | false (default), use configured accent color\n                colored={true} // true | false (default), use configured primary color\n                ripple={false} // true | false (default), activate ripple effect on button\n            \u003e\n                A Button\n            \u003c/Button\u003e\n\n            // Icon button and Floating action button (FAB)\n            \u003cButton\n                iconName=\"more_vert\" // icon name, @see https://material.io/icons/\n                tooltip=\"This is a Test!\" // tooltip, some icons have fallback tooltips, set it to false if you need to prevent them\n                fabSize=\"mini\" // use fabSize only if it is a FAB. \"mini\" | \"large\" (default)\n                // you can apply all other button properties on icon buttons, too (e.g. affirmative, accent, ripple, ...)\n            /\u003e\n\n            // use button elements to specify meaning of triggered action\n            // you can combine it with button properties like raised, iconName and ripple\n            \u003cAffirmativeButton\u003e\n                Affirmative action\n            \u003c/AffirmativeButton\u003e\n            \u003cDismissiveButton\n                raised={true}\n            \u003e\n                Dismissive action\n            \u003c/DismissiveButton\u003e\n            \u003cDisruptiveButton\n                iconName=\"delete\"\n                tooltip=\"Remove data\"\n            /\u003e\n        )\n    },\n    // ....\n});\n```\n\nSome special class names provide extra functionality:\n\n* `mdl-button--clearance`: add it to buttons that clear input fields or whole input blocks, works with all button types.\n\n#### ProgressButton\n\nThere is a special version of the Button element that can be used to visualize a running process. `\u003cProgressButton/\u003e` elements are shown as raised disabled buttons but this behaviour can be overwritten.\n\n```js\nimport {ProgressButton} from '@eccenca/gui-elements';\nimport rxmq from 'ecc-messagebus';\n\n// channel event which updates progressTopic\nrxmq.channel('yourchannel').subject('progressNumber').onNext({\n    progress: 30, // integer, progress in percentage\n    lastUpdate: 'August 31st 2017, 9:48:24 am.', // string which should be a date, require tooltip to be set\n});\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cProgressButton\n                progress={0..100} // integer, if not set or 0 then an infinite progress bar is used, default: 0\n                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\n                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\n                raised={true|false} // boolean, default: true\n                disabled={true|false} // boolean, default: true\n            \u003e\n                Working!\n            \u003c/ProgressButton\u003e\n        )\n    },\n    // ....\n});\n```\n\nYou can use `progress` and `progressTopic` options directly on `\u003cAffirmativeButton/\u003e`, `\u003cDismissiveButton/\u003e` and `\u003cDisruptiveButton/\u003e` elements.\n\n### Breadcrumb\n\nThe are two simple React elements to create breadcrumb navigation.\n\n```js\nimport {\n    BreadcrumbList,\n    BreadcrumbItem,\n} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cBreadcrumbList\n                className={'my-own-class'} // (optional) string, element can be enhanced with additional CSS classes\n            \u003e\n                \u003cBreadcrumbItem\n                    onClick={function(){}} // (optional) function, breadcrumb is rendered as HTML button element\n                \u003e\n                    Button\n                \u003c/BreadcrumbItem\u003e\n                \u003cBreadcrumbItem\n                    href=\"#\" // (optional) string, breadcrumb is rendered as HTML link anchor\n                \u003e\n                    Link\n                \u003c/BreadcrumbItem\u003e\n                \u003cBreadcrumbItem\u003e\n                    Span\n                \u003c/BreadcrumbItem\u003e\n            \u003c/BreadcrumbList\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Card\n\n```js\nimport {\n    Card,\n    CardTitle,\n    CardMenu,\n    CardContent,\n    CardActions\n} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cCard\n                className={'my-own-class'} // string, element can be enhanced with additional CSS classes\n                stretch={false|true} // boolean, should the card element use full width of available space, default: true\n                shadow={0..8} // integer, z-coordinate of card, amount of shadow applied to the card, 0 (off), 1 (2dp) to 8 {24dp}, default: 1\n                fixedActions={false|true} // boolean, if the card contains a fixed CardActions button row, default: false\n                reducedSize={false|true} // boolean, renders the card with reduced paddings and marging, default: false\n            \u003e\n                \u003cCardTitle\n                    className=\"my-own-class\"\n                    border={false|true} // boolean, horizontal border under title, default: true\n                    documentLevel={'h1'..'h6'} // string, headline level of title, parameter only used if title content is a string (not a react/dom element), default: 'h2'\n                \u003e\n                    Card title\n                \u003c/CardTitle\u003e\n                \u003cCardMenu\n                    className=\"my-own-class\"\n                \u003e\n                    \u003c!-- use the ContextMenu element here, or simple one or more icon buttons, no restrictions here --\u003e\n                    \u003cContextMenu\u003e\n                        \u003cMenuItem\u003eMenu item 1\u003c/MenuItem\u003e\n                        \u003cMenuItem\u003eMenu item 2\u003c/MenuItem\u003e\n                    \u003c/ContextMenu\u003e\n                \u003c/CardMenu\u003e\n                \u003cCardContent\n                    className=\"my-own-class\"\n                \u003e\n                    \u003c!-- the content of the application card, no restriction here --\u003e\n                \u003c/CardContent\u003e\n                \u003cCardActions\n                    className=\"my-own-class\"\n                    border={false|true} // boolean, horizontal border top of button row, default: true\n                    fixed={false|true} // boolean, if button row should be always visible sticky on botton when card is partly shown, default: false\n                \u003e\n                    \u003c!-- no restrictions on action buttons here --\u003e\n                \u003c/CardActions\u003e\n            \u003c/Card\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Content\n\n```js\nimport {Content} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cContent\n                component={'main'} // string, element or function that defines the (HTML) element used for the content, default: 'div'\n            \u003e\n                \u003cp\u003eYour content is here.\u003c/p\u003e\n            \u003c/Content\u003e\n        )\n    },\n    // ....\n});\n```\n\n### FloatingActionList\n\nThe `\u003cFloatingActionList /\u003e` element provides functionality for a quick adaption of the floating action button (FAB) pattern from Material Design.\nIt 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.\nThe 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.\nWhen there is already a fixed `\u003cCardActions /\u003e` element in use put the `\u003cFloatingActionList /\u003e` in it to use it fixed.\n\n```js\nimport {\n    Card,\n    CardTitle,\n    CardContent,\n    CardActions,\n    FloatingActionList\n} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cCard\u003e\n                    \u003cCardTitle\u003e\n                        Card title\n                    \u003c/CardTitle\u003e\n                    \u003cCardContent\u003e\n                        \u003c!-- ... --\u003e\n                    \u003c/CardContent\u003e\n                    \u003cFloatingActionList\n                        className={'my-own-class'} // string, element can be enhanced with additional CSS classes\n                        openToBottom={boolReturningFunction} // Function returning a bool value, action menu list is shown at the bottom of the FAB for boolean true, default: function that always returns false\n                        allowSingleItemList={false|true} // boolean, opens a menu after click on FAB even if there is onle one action in the list, otherwise the FAB directly triggers that action, default: false\n                        fabSize={'mini|large'} // string, what FAB size should be used, default: 'large'\n                        fixed={false|true} // boolean, if FAB should be always visible sticky on botton when card is only partly shown, default: false\n                        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 and `allowSingleItemList` is false then the action icon is used.\n                        actions={\n                            [\n                                // array of objects that define icon, label and handler method of each action\n                                {\n                                    icon: 'info',\n                                    label: 'Open ConfirmationDialog',\n                                    handler: this.openConfirmationDialog\n                                },\n                                {\n                                    icon: 'info',\n                                    label: 'Open BaseDialog',\n                                    handler: this.openBaseDialog,\n                                    disabled: true\n                                },\n                            ]\n                        }\n                    /\u003e\n                \u003c/Card\u003e\n                \u003cCard fixedActions={true}\u003e\n                    \u003cCardTitle\u003e\n                        Card title\n                    \u003c/CardTitle\u003e\n                    \u003cCardContent\u003e\n                        \u003c!-- ... --\u003e\n                    \u003c/CardContent\u003e\n                    \u003cCardActions fixed={true}\u003e\n                        \u003c!-- if a fixed button row is used then include the action list there if it need to be fixed, too. --\u003e\n                        \u003cFloatingActionList\n                            actions={\n                                [\n                                    {\n                                        icon: 'info',\n                                        label: 'Open ConfirmationDialog',\n                                        handler: this.openConfirmationDialog\n                                    },\n                                ]\n                            }\n                        /\u003e\n                    \u003c/CardActions\u003e\n                \u003c/Card\u003e\n            \u003c/div\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Icon\n\n```js\nimport {Icon} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cIcon\n                name=\"cloud_download\" // icon name, @see https://material.io/icons/\n                tooltip=\"cloudy clouds\" // tooltip, some icons have fallback tooltips, set it to false if you need to prevent them\n                badge=\"5\" // Badge, as shown in https://getmdl.io/components/index.html#badges-section\n            /\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Checkbox and Switch\n\n```js\nimport { Checkbox, Switch} from '@eccenca/gui-elements';\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cSwitch id=\"5\" ripple={true} /\u003e\n            \u003cSwitch checked\u003e\n                This is checked by default\n            \u003c/Switch\u003e\n            \u003cCheckbox id=\"6\" ripple={true} /\u003e\n            \u003cCheckbox label=\"Checkbox with label\" /\u003e\n            \u003cCheckbox disabled\u003e\n                Disabled Checkbox with label\n            \u003c/Checkbox\u003e\n            \u003cCheckbox checked\u003e\n                \u003cdiv className=\"test\"\u003eCheckbox 3 Text\u003c/div\u003e\n            \u003c/Checkbox\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Chip and ChipVisual\n\n`\u003cChip/\u003e` and `\u003cChipVisual/\u003e` are a wrapper around react-mdl's `\u003cChip/\u003e` and `\u003cChipContact/\u003e`.\n\n`\u003cChip/\u003e` is essentially the same as in react-mdl, but does not allow of `onClose`.\n\n`\u003cChipVisual/\u003e` supports images, icons and text labels.\n\n```js\nimport { ChipVisual, Chip } from '@eccenca/gui-elements';\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cChip\u003eplain chip\u003c/Chip\u003e\n                \u003cChip\n                    href={'http://example.com/'} // string, Chip is now rendered as HTML link anchor, can be combined with onClick\n                \u003e\n                    Chip with URI\n                \u003c/Chip\u003e\n                \u003cChip\n                    onClick={() =\u003e console.log('#1 chip clicked')} // click handler, default: false\n                \u003e\n                    \u003cChipVisual\n                        image=\"https://placekitten.com/500/500\" // image URL, default false\n                    /\u003e\n                    clickable with image visual\n                \u003c/Chip\u003e\n                \u003cChip\n                    onClick={() =\u003e console.log('#2 chip clicked')}\n                \u003e\n                    \u003cChipVisual\n                        label=\"AB\" // string with max. 2 chars, default: false\n                        bgColor=\"teal\" // MD color names, e.g. red, red-50, ... @see https://material.io/guidelines/style/color.html\n                        textColor=\"white\" // MD color names, e.g. red, red-50, ... @see https://material.io/guidelines/style/color.html\n                    /\u003e\n                    clickable with text visual\n                \u003c/Chip\u003e\n                \u003cChip\u003e\n                    \u003cChipVisual\u003e\n                        \u003cIcon name=\"done\" tooltip=\"test\" /\u003e\n                    \u003c/ChipVisual\u003e\n                    plain chip with icon\n                \u003c/Chip\u003e\n            \u003c/div\u003e\n        )\n    },\n    // ....\n});\n```\n\n### RadioGroup and Radio\n\n```js\nimport { Radio, RadioGroup} from '@eccenca/gui-elements';\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cRadioGroup\n                onChange={this.updateRadio}\n                value={this.state.selectedRadio}\n                container=\"div\" // default: \"ul\"\n                childContainer=\"div\" // default \"li\"\n                ripple={true|false(default)}\n            \u003e\n                \u003cRadio\n                    value={1}\n                    label=\"Radio 1 Text\"\n                /\u003e\n                \u003cRadio\n                    disabled\n                    value={2}\n                \u003e\n                    Radio 2 Text\n                \u003c/Radio\u003e\n                \u003cRadio\n                    value={3}\n                \u003e\n                    \u003cdiv className=\"test\"\u003eRadio 3 Text \u003cbr/\u003eLine 2\u003c/div\u003e\n                \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n        )\n    },\n    // ....\n});\n```\n\n### ConfirmationDialog\n\n```js\nimport { Button, ConfirmationDialog } from '@eccenca/gui-elements';\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cConfirmationDialog title=\"Dialog Title\"\n                    active={true}\n                    modal={true}\n                    size=\"mini\"\n                    cancelButton={\u003cButton\u003eCancel\u003c/Button\u003e}\n                    confirmButton={\u003cButton\u003eYes\u003c/Button\u003e}\n            \u003e\n                \u003cp\u003eDialog Content\u003c/p\u003e\n            \u003c/ConfirmationDialog\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### BaseDialog\n\n```js\nimport { Button, BaseDialog } from '@eccenca/gui-elements';\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cBaseDialog title=\"Dialog Title\"\n                    active={true}\n                    modal={true}\n                    titleCancelButton={this.close}\n                    size=\"mini\"\n                    buttonRow={[\n                        \u003cButton\u003eCancel\u003c/Button\u003e,\n                        \u003cButton\u003eYes\u003c/Button\u003e,\n                        \u003cButton\u003eMore\u003c/Button\u003e\n                    ]}\n            \u003e\n                \u003cp\u003eDialog Content\u003c/p\u003e\n            \u003c/BaseDialog\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### ContextMenu\n\n```js\nimport { ContextMenu, MenuItem } from '@eccenca/gui-elements';\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cContextMenu\n                align=\"left|right(default)\"\n                valign=\"top|bottom(default)\"\n                iconName=\"menu_more(default)\"\n                tooltip=\"for menu button(currently not supported)\"\n                target=\"idformymenu(auto generated if it is not given)\"\n            \u003e\n                \u003cMenuItem\u003eFirst Item\u003c/MenuItem\u003e\n                \u003cMenuItem\u003eSecond Item\u003c/MenuItem\u003e\n                \u003cMenuItem\u003eMenu Item 3\u003c/MenuItem\u003e\n                \u003cMenuItem\u003eAnother Menu Item\u003c/MenuItem\u003e\n                \u003cMenuItem\u003eAlright\u003c/MenuItem\u003e\n            \u003c/ContextMenu\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### DateField\n\n```js\nimport { DateField } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // value is the date shown to the user\n    // rawValue is the ISO 8601 representation if value is valid\n    // isValid indicates if given value matches the defined representation\n    onChange({value, rawValue, isValid, name}) {\n        this.setState({\n            [name]: value,\n        })\n    },\n    // template rendering\n    render() {\n        return (\n            \u003cDateField\n                onChange={this.onChange}\n                name=\"dateValue\"\n                value={this.state.dateValue} // Should be a moment.js value for consistent handling\n                placeholder=\"Please set a date\" // optional (default: '')\n                dateFormat=\"DD-MM-YYYY\" // validate date format, optional (default 'DD-MM-YYYY')\n                closeOnSelect={true} // auto close picker when a date is selected, optional (default: false)\n                input={false} // hide the input element (picker will be always displayed), optional (default: true)\n                disabled={true} // prevent selecting a date, optional (default: false)\n                inputClassName=\"customDateName\"// extra class name on input element, optional (default: '')\n            /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### DateTimeField\n\n```js\nimport { DateTimeField } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // value is the date shown to the user\n    // rawValue is the ISO 8601 representation if value is valid\n    // isValid indicates if given value matches the defined representation\n    onChange({value, rawValue, isValid, name}) {\n        this.setState({\n            [name]: value,\n        })\n    },\n    // template rendering\n    render() {\n        return (\n            \u003cDateTimeField\n                onChange={this.onChange}\n                name=\"dateTimeValue\"\n                value={this.state.dateTimeValue} // Should be a moment.js value for consistent handling\n                label=\"Label for DateTime input\" // optional\n                placeholder=\"Pls set a date\" // optional (default: '') and only used if there is no label\n                dateFormat=\"DD-MM-YYYY\" // validate date format, optional (default 'DD-MM-YYYY')\n                timeFormat=\"hh:mm a Z\", // validate time format, optional (default 'hh:mm a')\n                closeOnSelect={true} // auto close picker when a date is selected, optional (default: false)\n                input={false} // hide the input element (picker will be always displayed), optional (default: true)\n                disabled={true} // prevent selecting a date, optional (default: false)\n                stretch={false} // use full width for input field (default: true)\n                error=\"This is a error message\" // optional string\n                inputClassName=\"customDateName\"// extra class name on input element, optional (default: '')\n            /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### Layout\n\n```js\nimport { Layout } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cLayout\n                fixedDrawer={false|true} // drawer always visible and open in larger screensdrawer always visible and open in larger screens, default: false\n                fixedHeader={false|true} // header always visible, even in small screens, default: false\n                fixedTabs={false|true} // fixed tabs instead of the default scrollable tabs, default: false\n            \u003e\n                ...\n            \u003c/Layout\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### NotAvailable\n\nUse that element as very simple \"not available\" placeholder information, e.g. in empty table cells or statistic overviews.\nIt currently only supports short label strings and long descriptions used as tooltip addition.\n\n```js\nimport { NotAvailable } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cNotAvailable\n                label=\"N/A\" // short label that is shown, default: 'n/a'\n                description=\"Not available element\" // long description that is only shown on hover\n                inline={false|true} // show it as inline text element, default: false\n            /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### Nothing\n\n```js\nimport { Nothing } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cNothing /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### Pagination\n\n```js\nimport { Pagination } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cPagination\n                offset={0} // initial first shown element\n                limit={10} // initial number of shown elements per page\n                totalResults={31} // max elements\n                showElementOffsetPagination={true} // show element offset numbers as pagination information, default: false (show page offsets)\n                newLimitText={'Elements per page'} // if not set number of elements selection is hidden\n                limitRange={[10, 25, 50, 100]} // possible number of elements selections, default: [5, 10, 25, 50, 100, 200]\n                isTopPagination={true} // is pagination on top of the site (pages selection opens to bottom), default is false\n                showPageInput={true} // the current page number can be edited to jump directly there, default: false\n            /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### Progressbar\n\n```js\nimport { Progressbar } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n                \u003cProgressbar progress={85} /\u003e\n                \u003cProgressbar appearGlobal={true} indeterminate={true} progress={95} /\u003e\n                \u003cProgressbar appearLocal={true} progress={15} /\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Spinner\n\nThe Spinner is global by default.\n\n```js\nimport { Spinner } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cSpinner appearInline={true} /\u003e\n            \u003cSpinner appearLocal={true} /\u003e\n            \u003cSpinner /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### SelectBox\n\nThe SelectBox wraps [react-select](https://github.com/JedWatson/react-select) to use mixed content of strings and numbers as well as the default object type.\nPlease refer to all available properties in the linked documentation.\n\nThe SelectBox behaves like a [controlled input](https://facebook.github.io/react/docs/forms.html#controlled-components)\n\n```js\nimport { SelectBox } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    getInitialState(){\n      return {\n          value: 8,\n      };\n    },\n    selectBoxOnChange(value){\n       this.setState({\n           value\n       });\n    },\n    // template rendering\n    render() {\n        return (\n            \u003cSelectBox\n                placeholder=\"Label for SelectBox\"\n                options={['label1', 3]}\n                optionsOnTop={true} // option list opens up on top of select input (default: false)\n                value={this.state.value}\n                onChange={this.selectBoxOnChange}\n                creatable={true} // allow creation of new values\n                promptTextCreator={(newLabel) =\u003e ('New stuff: ' + newLabel)} // change default \"Create option 'newLabel'\" to \"New stuff: 'newLabel'\"\n                multi={true} // allow multi selection\n                clearable={false} // hide 'remove all selected values' button\n                searchable={true} // whether to behave like a type-ahead or not\n            /\u003e\n        )\n    },\n});\n\n```\nNote:\n\n- if objects are used in multi selectable options you can add {\"clearableValue\": false} to it to hide delete button for this specifc object\n\n- if \"creatable\" is set new values will be applied on Enter, Tab and Comma (\",\")\n\n- ``placeholder`` label is used within MDL floating label layout\n\n### Table\n\nProvides a simple table which can be enriched with react elements as content.\n\n ```js\n import {Table} from '@eccenca/gui-elements';\n\n class Page extends React.Component {\n    // ....\n    // template rendering\n    render() {\n        return (\n            \u003cTable\n                multiline={true} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)\n                fullWidth={true} // boolean true or false, table uses full width even if it could be smaller (optional, default: false)\n                className=\"my-table-class\" // string, additional CSS classes (optional, default: \"\")\n            \u003e\n                \u003c!-- your table content (optional) --\u003e\n            \u003c/table\u003e\n        )\n    },\n    // ....\n};\n ```\n\n#### Properties\n- **children** (node) -\n- **className** (string) - string (optional): additional CSS class name\n- **fullWidth** (bool, default: false) - use full width even for smaller tables\n- **multiline** (bool, default: false) - allow linebreaks and multilined content in table cells\n\n### Table body\n\nProvides table body element that can be enriched by sub elements.\n\n ```js\n import {TableBody} from '@eccenca/gui-elements';\n\n class Page extends React.Component {\n    // ....\n    // template rendering\n    render() {\n        return (\n            \u003cTableBody\n                multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)\n                className=\"my-own-class\" // string, used for CSS class descriptions\n            \u003e\n                \u003c!-- table rows --\u003e\n            \u003c/TableBody\u003e\n        )\n    },\n    // ....\n};\n ```\n\n#### Properties\n- **children** (node) -\n- **className** (string) - string (optional): additional CSS class name\n- **multiline** (bool, default: false) - allow linebreaks and multilined content in table cells\n\n### Table cell\n\nProvides table cell element that can be enriched by sub elements.\n\n ```js\n import {TableCell} from '@eccenca/gui-elements';\n\n class Page extends React.Component {\n    // ...\n    // template rendering\n    // use it inside the correct Table elements\n    render() {\n        return (\n            \u003cTableCell\n                isHead={true} // boolean, if the table cell contains a table head for the column or row (optional, default: false)\n                likeHead={true} // boolean, if a normal table cell should be look like a head element (optional, default: false)\n                multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)\n                className=\"my-own-class\" // string, used for additional CSS class descriptions\n            \u003e\n                \u003c!-- content --\u003e\n            \u003c/TableCell\u003e\n        )\n    },\n    // ...\n};\n ```\n\n#### Properties\n- **children** (node) -\n- **className** (string, default: '') - optional CSS class\n- **isHead** (bool, default: false) - table cell is head for column or row\n- **likeHead** (bool, default: false) - table cell looks like header cell\n- **multiline** (bool, default: false) - allow linebreaks and multilined content in table cells\n\n### Table head\n\nProvides table head element that can be enriched sub elements.\n\n ```js\n import {TableHead} from '@eccenca/gui-elements';\n\n class Page extends React.Component {\n    // ....\n    // template rendering\n    render() {\n        return (\n            \u003cTableHead\n                multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)\n                className=\"my-own-class\" // string, used for CSS class descriptions\n            \u003e\n                \u003c!-- head row --\u003e\n            \u003c/TableHead\u003e\n        )\n    },\n    // ....\n};\n ```\n\n#### Properties\n- **children** (node) -\n- **className** (string) - string (optional): additional CSS class name\n- **multiline** (bool, default: false) - allow linebreaks and multilined content in table cells\n\n### Table row\n\nProvides table row element that can be enriched by sub elements.\n\n ```js\n import {TableRow} from '@eccenca/gui-elements';\n\n class Page extends React.Component {\n    // ...\n    // template rendering\n    // use it inside the correct Table elements\n    render() {\n        return (\n            \u003cTableRow\n                multiline={false} // boolean true or false, allow linebreaks and multilined content in table cells (optional, default: false)\n                className=\"my-own-class\" // string, used for additional CSS class descriptions\n            \u003e\n                \u003c!-- content --\u003e\n            \u003c/TableRow\u003e\n        )\n    },\n    // ...\n};\n ```\n\n#### Properties\n- **children** (node) -\n- **className** (string, default: '') - optional CSS class\n- **multiline** (bool, default: false) - allow linebreaks and multilined content in table cells\n\n### Tabs\n\n```js\nimport { Tabs } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cTabs\n                prefixTabNames={'ecc-view-resource-panel-tab'}\n                activeTab={'historyview'}\n                tabs={[{tabId: 'name', tabTitle: 'Name', tabContent: value}]}\n                onTabClick={this.TabClick}\n            /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### TextField\n\n```js\nimport { TextField } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // event is the original react onChange event\n    // value is event.target.value (a shortcut for convienience)\n    onChange({value, event, value}) {\n        this.setState({\n            [name]: value,\n        })\n    },\n    // template rendering\n    render() {\n        return (\n            \u003cTextField\n                onChange={this.onChange}\n                name=\"textfield\"\n                value={this.state.textfield} // Should be a moment.js value for consistent handling\n                label=\"Textfield\"\n                error=\"Please correct your input\" // optional, error message\n                stretch={false} // do not use full width (default: true)\n                multiline={true} // use a text area (default: false)\n            /\u003e\n        )\n    },\n    // ....\n});\n\n```\n\n### Tooltip\n\nYou need to add wrapper to some elements, e.g. icons or checkboxes, to prevent unexepected behaviour. Use `\u003cspan\u003e` for inline elements and `\u003cdiv\u003e` for block elments. If you have `tooltip` options, e.g. on icons, then use that parameter instead of the `\u003cTooltip/\u003e` element.\n\n```js\nimport {Tooltip} from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cTooltip\n                label=\"This is the tooltip text.\" // content used for tooltip, string or dom/react element\n                position=\"bottom\" // string: top|left|bottom|right, default: bottom\n                large={false} // true or false, default: false\n            \u003e\n                \u003cp\u003eI have a tooltip.\u003c/p\u003e\n            \u003c/Tooltip\u003e\n        )\n    },\n    // ....\n});\n```\n\n### Version\n\n```js\nimport { Version } from '@eccenca/gui-elements';\n\nconst Page = React.createClass({\n    // template rendering\n    render() {\n        return (\n            \u003cVersion\n                version={'v1.1.0'}\n            /\u003e\n        )\n    },\n    // ....\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feccenca%2Fecc-gui-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feccenca%2Fecc-gui-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feccenca%2Fecc-gui-elements/lists"}