@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/elements/SelectBox/_selectbox.scss

@@ -1,144 +0,0 @@
-/**
- * Copyright 2016 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-// react-select styles
-@import "~react-select/dist/react-select.css";
-
-$input-height: $input-text-font-size + 2 * $input-text-padding;
-
-.Select-control {
-    border-style: none none solid none;
-    border-radius: 0;
-    border-color: $input-text-bottom-border-color;
-    height: $input-height;
-
-    .Select.is-focused > & {
-        outline: none;
-        border-color: $input-text-highlight-color;
-        border-bottom-width: 2px;
-    }
-
-    .Select.is-focused:not(.is-open) > &,
-    .Select.is-open > & {
-        border-color: $input-text-bottom-border-color;
-        box-shadow: none;
-    }
-
-    .Select.is-disabled > & {
-        cursor: not-allowed;
-
-        .Select-value-label {
-            cursor: not-allowed;
-        }
-    }
-}
-
-.Select-arrow-zone {
-    height: $input-height;
-}
-
-.Select--multi {
-    .Select-multi-value-wrapper {
-        white-space: normal;
-        max-width: calc(100% - 25px);
-        overflow: hidden;
-    }
-
-    .Select-value-label {
-        padding-left: 0;
-    }
-}
-
-.Select-value {
-    line-height: $input-height;
-
-    .Select--multi & {
-        margin-left: 0;
-        margin-right: $ecc-size-block-whitespace / 4;
-        margin-top: ($input-height - $typo-body-1-font-size) / 2;
-        //display: inline-flex;
-        //flex-direction: row-reverse;
-        border-color: darken($chip-bg-color, 5%);
-        background: $chip-bg-color;
-        border-radius: $button-border-radius;
-        color: $text-color-primary;
-        // white-space: nowrap;
-        max-width: 100%;
-        font-size: $typo-caption-font-size;
-    }
-
-    .Select--single > .Select-control & {
-        padding-left: 0;
-        line-height: $input-height;
-    }
-
-    .Select--single.is-focused:not(.is-pseudo-focused) & {
-        opacity: 0.39;
-    }
-}
-
-.Select-value-icon {
-    .Select--multi & {
-        border: none;
-        display: inline-block;
-        padding: 0;
-        width: 1.5rem;
-        text-align: center;
-        vertical-align: middle;
-
-        &:hover {
-            background-color: transparent;
-        }
-    }
-}
-
-.Select-value-label {
-    .Select--multi & {
-        padding-left: 0;
-    }
-    .Select-value-icon + & {
-        max-width: calc(100% - 1.5rem);
-    }
-}
-
-.Select-clear-zone .mdl-button.mdl-button--clearance {
-    bottom: auto;
-    position: relative;
-    color: $text-color-primary;
-}
-
-.Select-input {
-    padding-left: 0;
-    padding-right: 35px;
-    height: $input-height;
-
-    .Select.is-clearable & {
-        padding-right: 55px;
-    }
-
-    .Select--multi & {
-        margin-left: 0;
-    }
-
-    .Select.is-pseudo-focused & {
-        caret-color: transparent;
-    }
-}
-
-.Select-menu-outer {
-    margin-top: 0;
-    z-index: 9999;
-
-    .Select--optionsontop & {
-        top: auto;
-        bottom: 100%;
-        margin-bottom: -1px;
-    }
-}
-
-.Select-option {
-    @include typo-body-1();
-}

package/src/elements/Spinner/Spinner.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ReactMDLSpinner from 'react-mdl/lib/Spinner';
-
-const Spinner = props => {
-    const {
-        className,
-        appearGlobal,
-        appearInline,
-        appearLocal,
-        ...otherProps
-    } = props;
-    const classes = classNames(
-        {
-            'mdl-spinner--global':
-                    appearGlobal === true
-                    && appearInline === false
-                    && appearLocal === false,
-            'mdl-spinner--inline': appearInline === true,
-            'mdl-spinner--local': appearLocal === true,
-        },
-        className
-    );
-    return (
-        <ReactMDLSpinner singleColor className={classes} {...otherProps} />
-    );
-};
-Spinner.displayName = 'Spinner';
-
-// define property types
-Spinner.propTypes = {
-    appearGlobal: PropTypes.bool,
-    appearInline: PropTypes.bool,
-    appearLocal: PropTypes.bool,
-    className: PropTypes.string,
-};
-Spinner.defaultProps = {
-    appearGlobal: true,
-    appearInline: false,
-    appearLocal: false,
-};
-
-export default Spinner;

package/src/elements/Spinner/_spinner.scss

@@ -1,20 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-spinner--global,
-.mdl-spinner--local {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-top: -1/2 * $typo-icon-font-size;
-    margin-left: -1/2 * $typo-icon-font-size;
-    z-index: 32000;
-}
-
-.mdl-spinner--local {
-    position: absolute;
-    top: 25%;
-}

package/src/elements/Switch/Switch.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactMDLSwitch from 'react-mdl/lib/Switch';
-import extendedOnChangeBoolean from '../../utils/extendedOnChangeBoolean';
-
-const Switch = props => {
-    const {
-        label,
-        children,
-        checked,
-        ripple = false,
-        onChange,
-        ...otherProperties
-    } = props;
-
-    let checkboxlabel = label || false;
-    if (!checkboxlabel && children) {
-        checkboxlabel = children;
-    }
-
-    return (
-        <ReactMDLSwitch
-            checked={!!checked}
-            ripple={ripple}
-            onChange={extendedOnChangeBoolean.bind(null, onChange)}
-            {...otherProperties}
-        >
-            {checkboxlabel}
-        </ReactMDLSwitch>
-    );
-};
-
-Switch.propTypes = {
-    checked: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-};
-
-export default Switch;

package/src/elements/Table/Table.jsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import Proptypes from 'prop-types';
-import classNames from 'classnames';
-
-/**
-
- Provides a simple table which can be enriched with react elements as content.
-
- ```js
- 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)
-                scrollTableOverflow={true} // boolean true or false, add scrollbars to table when it overflows available space (optional, default: false)
-                preventCellOverflow={true} // boolean true or false, prevent overflowing content in table cells (optional, default: false)
-                className="my-table-class" // string, additional CSS classes (optional, default: "")
-            >
-                <!-- your table content (optional) -->
-            </table>
-        )
-    },
-    // ....
-};
- ```
- */
-
-const Table = props => {
-    const {
-        fullWidth,
-        className,
-        multiline,
-        children,
-        scrollTableOverflow,
-        preventCellOverflow,
-        ...otherProps
-    } = props;
-
-    // set classname
-    const tableClassNames = classNames(
-        'mdl-data-table',
-        {
-            'mdl-data-table--full-width': fullWidth === true,
-            'mdl-data-table--multiline': multiline === true,
-            'mdl-data-table--preventoverflow': preventCellOverflow === true,
-        },
-        className
-    );
-    const wrapperClassNames = classNames('ecc-table__wrapper', {
-        'ecc-table__wrapper--autoscroll': scrollTableOverflow === true,
-    });
-
-    return (
-        <div className={wrapperClassNames}>
-            <table className={tableClassNames} {...otherProps}>
-                {children}
-            </table>
-        </div>
-    );
-};
-
-Table.propTypes = {
-    children: Proptypes.oneOfType([Proptypes.node]),
-    /**
-        string (optional): additional CSS class name
-    */
-    className: Proptypes.string,
-    /**
-     * use full width even for smaller tables
-     */
-    fullWidth: Proptypes.bool,
-    /**
-     * allow linebreaks and multilined content in table cells
-     */
-    multiline: Proptypes.bool,
-    /**
-     * add scrollbars to table when it overflows available space
-     */
-    scrollTableOverflow: Proptypes.bool,
-    /**
-     * prevent overflowing content in table cells
-     */
-    preventCellOverflow: Proptypes.bool,
-};
-
-Table.defaultProps = {
-    fullWidth: false,
-    multiline: false,
-    scrollTableOverflow: false,
-    preventCellOverflow: false,
-};
-
-Table.displayName = 'Table';
-
-export default Table;

package/src/elements/Table/TableBody.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import Proptypes from 'prop-types';
-import classNames from 'classnames';
-
-/**
-
- Provides table body element that can be enriched by sub elements.
-
- ```js
- 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>
-        )
-    },
-    // ....
-};
- ```
- */
-
-const TableBody = props => {
-    const {
-        children, className, multiline, ...otherProps
-    } = props;
-    // set classname
-    const bodyClassNames = classNames(
-        {
-            'mdl-data-table--multiline': multiline === true,
-        },
-        className
-    );
-    return (
-        <tbody className={bodyClassNames} {...otherProps}>
-            {children}
-        </tbody>
-    );
-};
-
-TableBody.propTypes = {
-    children: Proptypes.oneOfType([Proptypes.node]),
-    /**
-        string (optional): additional CSS class name
-    */
-    className: Proptypes.string,
-    /**
-     * allow linebreaks and multilined content in table cells
-     */
-    multiline: Proptypes.bool,
-};
-
-TableBody.defaultProps = {
-    multiline: false,
-};
-
-TableBody.displayName = 'Table body';
-
-export default TableBody;

package/src/elements/Table/TableCell.jsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import Proptypes from 'prop-types';
-import classNames from 'classnames';
-
-/**
-
- Provides table cell element that can be enriched by sub elements.
-
- ```js
- 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)
-                preventCellOverflow={true} // boolean true or false, prevent overflowing content in table cells (optional, default: false)
-                className="my-own-class" // string, used for additional CSS class descriptions
-            >
-                <!-- content -->
-            </TableCell>
-        )
-    },
-    // ...
-};
- ```
- */
-
-const TableCell = props => {
-    const {
-        isHead,
-        likeHead,
-        className,
-        children,
-        multiline,
-        preventCellOverflow,
-        ...otherProps
-    } = props;
-    const TableCellType = isHead === true ? 'th' : 'td';
-    const cellClassNames = classNames(
-        {
-            'mdl-data-table__header': isHead === false && likeHead === true,
-            'mdl-data-table--multiline': multiline === true,
-            'mdl-data-table--preventoverflow': preventCellOverflow === true,
-        },
-        className
-    );
-    return (
-        <TableCellType className={cellClassNames} {...otherProps}>
-            {children}
-        </TableCellType>
-    );
-};
-
-TableCell.propTypes = {
-    children: Proptypes.oneOfType([Proptypes.node]),
-    /**
-     * optional CSS class
-     */
-    className: Proptypes.string,
-    /**
-     * table cell is head for column or row
-     */
-    isHead: Proptypes.bool,
-    /**
-     * table cell looks like header cell
-     */
-    likeHead: Proptypes.bool,
-    /**
-     * allow linebreaks and multilined content in table cells
-     */
-    multiline: Proptypes.bool,
-    /**
-     * prevent overflowing content in table cells
-     */
-    preventCellOverflow: Proptypes.bool,
-};
-
-TableCell.defaultProps = {
-    isHead: false,
-    likeHead: false,
-    className: '',
-    multiline: false,
-    preventCellOverflow: false,
-};
-
-TableCell.displayName = 'Table cell';
-
-export default TableCell;

package/src/elements/Table/TableHead.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import Proptypes from 'prop-types';
-import classNames from 'classnames';
-
-/**
-
- Provides table head element that can be enriched sub elements.
-
- ```js
- 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>
-        )
-    },
-    // ....
-};
- ```
- */
-
-const TableHead = props => {
-    const {
-        children, className, multiline, ...otherProps
-    } = props;
-    // set classname
-    const headClassNames = classNames(
-        {
-            'mdl-data-table--multiline': multiline === true,
-        },
-        className
-    );
-    return (
-        <thead className={headClassNames} {...otherProps}>
-            {children}
-        </thead>
-    );
-};
-
-TableHead.propTypes = {
-    children: Proptypes.oneOfType([Proptypes.node]),
-    /**
-        string (optional): additional CSS class name
-    */
-    className: Proptypes.string,
-    /**
-     * allow linebreaks and multilined content in table cells
-     */
-    multiline: Proptypes.bool,
-};
-
-TableHead.defaultProps = {
-    multiline: false,
-};
-
-TableHead.displayName = 'Table head';
-
-export default TableHead;

package/src/elements/Table/TableRow.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import Proptypes from 'prop-types';
-import classNames from 'classnames';
-
-/**
-
- Provides table row element that can be enriched by sub elements.
-
- ```js
- 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)
-                preventCellOverflow={true} // boolean true or false, prevent overflowing content in table cells (optional, default: false)
-                className="my-own-class" // string, used for additional CSS class descriptions
-            >
-                <!-- content -->
-            </TableRow>
-        )
-    },
-    // ...
-};
- ```
- */
-
-const TableRow = props => {
-    const {
-        className,
-        children,
-        multiline,
-        preventCellOverflow,
-        ...otherProps
-    } = props;
-    const rowClassNames = classNames(
-        {
-            'mdl-data-table--multiline': multiline === true,
-            'mdl-data-table--preventoverflow': preventCellOverflow === true,
-        },
-        className
-    );
-    return (
-        <tr className={rowClassNames} {...otherProps}>
-            {children}
-        </tr>
-    );
-};
-
-TableRow.propTypes = {
-    children: Proptypes.oneOfType([Proptypes.node]),
-    /**
-     * optional CSS class
-     */
-    className: Proptypes.string,
-    /**
-     * allow linebreaks and multilined content in table cells
-     */
-    multiline: Proptypes.bool,
-    /**
-     * prevent overflowing content in table cells
-     */
-    preventCellOverflow: Proptypes.bool,
-};
-
-TableRow.defaultProps = {
-    className: '',
-    multiline: false,
-    preventCellOverflow: false,
-};
-
-TableRow.displayName = 'Table row';
-
-export default TableRow;