@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/elements/Table/_datatable.scss

@@ -1,78 +0,0 @@
-/**
- * We fully duplicate the MDL rules here to have our own simplified definitions!
- *
- * @see https://github.com/eccenca/material-design-lite/blob/master/src/data-table/_data-table.scss
- */
-
-.mdl-data-table {
-    position: relative;
-    border-collapse: collapse;
-    font-size: $data-table-font-size;
-    line-height: $typo-body-1-line-height;
-    text-align: left;
-    background-color: $card-background-color;
-    table-layout: fixed;
-
-    thead {
-        .mdl-data-table__select {}
-    }
-
-    tbody {
-        tr {
-            @include material-animation-default(0.28s);
-            transition-property: background-color;
-
-            &.is-selected {
-                background-color: $data-table-selection-color;
-            }
-
-            &:hover {
-                background-color: $data-table-hover-color;
-            }
-        }
-    }
-
-    tr {
-        position: relative;
-    }
-
-    td,
-    th {
-        position: relative;
-        padding: $data-table-column-padding $ecc-size-block-whitespace / 2;
-        vertical-align: middle;
-        height: $data-table-row-height;
-        box-sizing: content-box;
-        border-top: $data-table-dividers;
-        border-bottom: $data-table-dividers;
-        white-space: nowrap;
-    }
-
-    td {
-        max-width: 39vw;
-
-        @media (min-width: $ecc-size-maxwidth-workview) {
-            max-width: 0.39 * $ecc-size-maxwidth-workview;
-        }
-    }
-
-    th,
-    .mdl-data-table__header {
-        color: $data-table-header-color;
-        font-weight: bold;
-    }
-
-    br {
-        content: ' ';
-        display: inline;
-
-        &:before, &:after {
-            content: ' ';
-        }
-    }
-}
-
-.mdl-data-table--full-width,
-.mdl-data-table--stretch {
-    min-width: 100%;
-}

package/src/elements/Table/_table.scss

@@ -1,143 +0,0 @@
-/**
- * Copyright 2018 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-// we use MDL data table rules as basic styles
-@import "datatable";
-
-.ecc-table__wrapper--autoscroll {
-    // only necessary for scrolling issues, e.g. when table is too wide for viewport
-    overflow: auto;
-}
-
-.mdl-data-table {
-    // we do not use onw class here but extend already existing data table className
-
-    tr {
-        &.is-clickable {
-            cursor: pointer;
-            cursor: hand;
-        }
-    }
-
-    // Justify Chip: alter size of mdl chip inside a cell, otherwise they lead to increased table cells
-    .mdl-chip__text,
-    .mdl-chip {
-        font-size: inherit;
-    }
-    td, th {
-        & > .mdl-chip,
-        & > div[class] .mdl-chip {
-            height: calc(#{$chip-height} - #{$data-table-column-padding});
-            line-height: calc(#{$chip-height} - #{$data-table-column-padding});
-            margin-top: -1 * $data-table-column-padding / 2;
-        }
-    }
-    &:not(.mdl-data-table--multiline) {
-        tbody:not(.mdl-data-table--multiline),
-        tbody:not(.mdl-data-table--multiline) {
-            tr:not(.mdl-data-table--multiline) {
-                th:not(.mdl-data-table--multiline),
-                td:not(.mdl-data-table--multiline) {
-                    & > .mdl-chip,
-                    & > div[class] .mdl-chip {
-                        margin-bottom: -1 * $data-table-column-padding / 2;
-                    }
-                }
-            }
-        }
-    }
-    thead {
-        .mdl-chip {
-            margin-right: 0;
-            margin-bottom: -1 * $data-table-column-padding / 2;
-        }
-    }
-
-    // Justify Buttons
-    td, th {
-        & > .mdl-button,
-        & > div[style] > .mdl-button,
-        & > .contextmenu-container > .mdl-button {
-            height: calc(#{$button-height} - #{$data-table-column-padding});
-            line-height: calc(#{$button-height} - #{$data-table-column-padding});
-            margin-top: -1 * $data-table-column-padding / 2;
-            margin-bottom: -1 * $data-table-column-padding / 2;
-            white-space: nowrap;
-        }
-        & > .mdl-button--icon,
-        & > div[style] > .mdl-button--icon,
-        & > .contextmenu-container > .mdl-button--icon {
-            min-width: calc(#{$button-height} - #{$data-table-column-padding});
-            width: calc(#{$button-height} - #{$data-table-column-padding});
-        }
-
-        .material-icons {
-            vertical-align: middle;
-        }
-    }
-    thead th {
-        & > .mdl-button--icon,
-        & > div[style] > .mdl-button--icon,
-        & > .contextmenu-container > .mdl-button--icon {
-            min-width: calc(#{$button-height/$ecc-size-type-levelratio} - #{$data-table-column-padding});
-            width: calc(#{$button-height/$ecc-size-type-levelratio} - #{$data-table-column-padding});
-            height: calc(#{$button-height/$ecc-size-type-levelratio} - #{$data-table-column-padding});
-            line-height: calc(#{$button-height/$ecc-size-type-levelratio} - #{$data-table-column-padding});
-            margin-top: -1 * $data-table-column-padding / 2;
-            margin-bottom: -1 * $data-table-column-padding / 2;
-        }
-
-        .material-icons {
-            font-size: $typo-body-1-font-size;
-        }
-    }
-}
-
-// multiline: allow linebreaks and multilined content in table cells
-.mdl-data-table--multiline > thead > tr > td, // class on table
-.mdl-data-table--multiline > tbody > tr > td,
-.mdl-data-table--multiline > thead > tr > th,
-.mdl-data-table--multiline > tbody > tr > th,
-table > .mdl-data-table--multiline > tr > td, // class on thead or tbody
-table > .mdl-data-table--multiline > tr > th,
-table > thead > .mdl-data-table--multiline > td, // class on row
-table > tbody > .mdl-data-table--multiline > td,
-table > thead > .mdl-data-table--multiline > th,
-table > tbody > .mdl-data-table--multiline > th,
-table > thead > tr > td.mdl-data-table--multiline, // class on cell
-table > tbody > tr > td.mdl-data-table--multiline,
-table > thead > tr > th.mdl-data-table--multiline,
-table > tbody > tr > th.mdl-data-table--multiline {
-    white-space: normal;
-    vertical-align: top;
-    overflow: unset;
-
-    br {
-        content: normal;
-        display: block;
-
-        &:before, &:after {
-            content: normal;
-        }
-    }
-}
-
-// preventCellOverflow: prevent overlowing content in table cells
-.mdl-data-table--preventoverflow > thead > tr > td, // class on table
-.mdl-data-table--preventoverflow > tbody > tr > td,
-.mdl-data-table--preventoverflow > thead > tr > th,
-.mdl-data-table--preventoverflow > tbody > tr > th,
-table > thead > .mdl-data-table--preventoverflow > td, // class on row
-table > tbody > .mdl-data-table--preventoverflow > td,
-table > thead > .mdl-data-table--preventoverflow > th,
-table > tbody > .mdl-data-table--preventoverflow > th,
-table > thead > tr > td.mdl-data-table--preventoverflow, // class on cell
-table > tbody > tr > td.mdl-data-table--preventoverflow,
-table > thead > tr > th.mdl-data-table--preventoverflow,
-table > tbody > tr > th.mdl-data-table--preventoverflow {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

package/src/elements/Tabs/Tabs.jsx

@@ -1,116 +0,0 @@
-import React, { Component } from 'react';
-// import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import ReactMDLTabs from 'react-mdl/lib/Tabs/Tabs';
-import ReactMDLTab from 'react-mdl/lib/Tabs/Tab';
-// import ReactMDLTabBar from 'react-mdl/lib/Tabs/TabBar';
-import _ from 'lodash';
-import { Info } from '../Alert';
-
-// get pure title names from i18n format
-const clearTabTitles = tabs =>
-    _.map(tabs, it => {
-        const tab = it;
-        tab.tabTitle = _.has(tab, 'tabTitle.props.message')
-            ? tab.tabTitle.props.message
-            : tab.tabTitle;
-        return tab;
-    });
-
-class Tabs extends Component {
-    static displayName = 'Tabs';
-
-    static propTypes = {
-        prefixTabNames: PropTypes.string, // html class prefix
-        activeTab: PropTypes.string, // set default active tab
-        tabs: PropTypes.array, // tab content [{tabTitle: 'name', tabContent: value}]
-        onTabClick: PropTypes.func, // handle tab header click
-    };
-
-    static defaultProps = {
-        prefixTabNames: 'tabBar',
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            ...props,
-            // remove entries with empty tabContent and get clear names from i18n
-            tabs: clearTabTitles(
-                _.reject(this.props.tabs, ({ tabContent }) =>
-                    _.isEmpty(tabContent))
-            ),
-
-        };
-        this.handleSelect = this.handleSelect.bind(this);
-    }
-
-    componentWillReceiveProps(props) {
-        const newProps = _.cloneDeep(props);
-        // remove entries with empty tabContent and get clear names from i18n
-        newProps.tabs = clearTabTitles(
-            _.reject(props.tabs, ({ tabContent }) => _.isEmpty(tabContent))
-        );
-        this.setState(newProps);
-    }
-
-    handleSelect(selected) {
-        const activeTab = this.state.tabs[selected].tabId;
-        // do nothing if tab not changed
-        if (_.isEqual(activeTab, this.state.activeTab)) {
-            return;
-        }
-        this.setState({ activeTab });
-        if (_.isFunction(this.state.onTabClick)) {
-            this.state.onTabClick(activeTab);
-        }
-    }
-
-    render() {
-        /* eslint no-script-url: 0 */
-        let content = false;
-
-        const { tabs, prefixTabNames } = this.state;
-
-        if (!_.isEmpty(tabs)) {
-            // set active tab if given and matches // else take first tab
-            let activeTab = _.findIndex(tabs, {
-                tabId: this.state.activeTab,
-            });
-            activeTab = activeTab === -1 ? 0 : activeTab;
-            // create tab header
-            const tabPanel = _.map(tabs, tab => {
-                const key = _.kebabCase(tab.tabId);
-
-                return (
-                    <ReactMDLTab
-                        className={`${prefixTabNames}-header-${key}`}
-                        key={key}
-                        href="javascript:void(0)"
-                    >
-                        {tab.tabTitle}
-                    </ReactMDLTab>
-                );
-            });
-            // create tab content
-            const { tabContent } = tabs[activeTab];
-            content = (
-                <div className="mdl-tabs">
-                    <ReactMDLTabs
-                        activeTab={activeTab}
-                        onChange={this.handleSelect}
-                    >
-                        {tabPanel}
-                    </ReactMDLTabs>
-                    <section className="mdl-tabs__panel">{tabContent}</section>
-                </div>
-            );
-        } else {
-            content = <Info>No tab content</Info>;
-        }
-
-        return <div className="ecc-tab-container">{content}</div>;
-    }
-}
-
-export default Tabs;

package/src/elements/TextField/TextField.jsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import Proptypes from 'prop-types';
-import classNames from 'classnames';
-import ReactMDLTextField from 'react-mdl/lib/Textfield';
-import _ from 'lodash';
-import Button from '../Button/Button';
-import uniqueId from '../../utils/uniqueId';
-
-const extendedOnChange = (onChangeFn, event) => {
-    if (_.isFunction(onChangeFn)) {
-        onChangeFn({
-            event,
-            name: event.target.name,
-            value: event.target.value,
-            rawValue: event.target.value,
-        });
-    }
-};
-
-/**
-
-Provides a input field or area to insert text or numbers.
-
-```js
-import { TextField } from '@eccenca/gui-elements';
-
-class Page extends React.Component {
-    // event is the original react onChange event
-    // value is event.target.value (a shortcut for convienience)
-    onChange({event, value}) {
-        this.setState({
-            varname: value,
-        })
-    },
-    // template rendering
-    render() {
-        return (
-            <TextField
-                name="varname"
-                value={this.state.varname}
-                label="Textfield"
-                onChange={this.onChange}
-                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)
-            />
-        )
-    },
-    // ....
-};
-
-```
- */
-
-const TextField = props => {
-    const {
-        children,
-        className,
-        label,
-        multiline,
-        onChange,
-        onClearValue,
-        reducedSize,
-        stretch,
-        value,
-        ...otherProps
-    } = props;
-
-    const classes = classNames(className, {
-        'mdl-textfield--full-width': stretch === true,
-        'mdl-textfield--clearable': _.isFunction(onClearValue),
-        'mdl-textfield--reduced': reducedSize === true,
-        'mdl-textfield--multiline': multiline === true,
-        'mdl-textfield--missinglabel': !label,
-    });
-
-    // provides clearance button
-    const clearButton = _.isFunction(onClearValue) && value ? (
-        <div className="mdl-input__clearable-holder">
-            <Button
-                disabled={!!otherProps.disabled}
-                type="button"
-                iconName="clear"
-                onClick={onClearValue}
-                className="mdl-button--clearance"
-            />
-        </div>
-    ) : (
-        false
-    );
-    return (
-        <ReactMDLTextField
-            className={classes}
-            floatingLabel
-            value={value}
-            label={label}
-            onChange={extendedOnChange.bind(null, onChange)}
-            rows={multiline === true ? 3 : 0}
-            {...otherProps}
-        >
-            {clearButton}
-            {children}
-        </ReactMDLTextField>
-    );
-};
-
-TextField.propTypes = {
-    /**
-        additional class names for element
-    */
-    className: Proptypes.string,
-    /**
-        inout element is disabled and not useable
-    */
-    disabled: Proptypes.bool,
-    /**
-        error message regarding the value of input
-    */
-    error: Proptypes.node,
-    /**
-        additional class names for the native HTML input element that is used
-    */
-    inputClassName: Proptypes.string,
-    /**
-        label for input field
-    */
-    label: Proptypes.oneOfType([Proptypes.string, Proptypes.element])
-        .isRequired,
-    /**
-        use a multilined textarea inout
-    */
-    multiline: Proptypes.bool,
-    /**
-        event handler when the inout value is changed, gets event object as input
-    */
-    onChange: Proptypes.func.isRequired,
-    /**
-        button to clear value is added when the event handler is given
-    */
-    onClearValue: Proptypes.func,
-    /**
-        reduce whitespace around the element
-    */
-    reducedSize: Proptypes.bool,
-    /**
-        value is required
-    */
-    required: Proptypes.bool,
-    /**
-        use full width that is available
-    */
-    stretch: Proptypes.bool,
-    /**
-        initial value of the input field
-    */
-    value: Proptypes.oneOfType([Proptypes.string, Proptypes.number]).isRequired,
-};
-
-TextField.defaultProps = {
-    disabled: false,
-    error: false,
-    label: '',
-    multiline: false,
-    onClearValue: undefined,
-    reducedSize: false,
-    required: false,
-    stretch: true,
-};
-
-TextField.displayName = 'TextField';
-
-export default uniqueId(TextField, { prefix: 'textField', targetProp: 'id' });

package/src/elements/TextField/_textfield.scss

@@ -1,80 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-textfield--reduced {
-    padding-bottom: 0;
-
-    &.mdl-textfield--missinglabel {
-        padding-top: 0;
-    }
-
-    .mdl-textfield__label:after {
-        bottom: 0;
-    }
-}
-
-.mdl-textfield--clearable {
-    position: relative;
-
-    .mdl-textfield__input {
-        box-sizing: border-box;
-        padding-right: $button-height;
-    }
-}
-
-.mdl-input__clearable-holder {
-    position: absolute;
-    width: $button-height;
-    height: $button-height;
-    right: 0;
-    top: $input-text-vertical-spacing;
-
-    .mdl-button {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    & > div[style] {
-        display: block !important;
-    }
-
-    .mdl-textfield--reduced.mdl-textfield--missinglabel & {
-        top: 0;
-    }
-}
-
-textarea.mdl-textfield__input {
-    margin-top: $input-text-padding;
-    padding-top: 0;
-}
-
-.mdl-textfield__input[readonly] {
-
-    cursor: normal;
-    color: rgba(0, 0, 0, 0.54);
-
-    & + .mdl-textfield__label {
-        color: rgba(0, 0, 0, 0.26);
-
-        &:after {
-            display: none;
-        }
-    }
-}
-
-.mdl-textfield__label {
-    .mdl-textfield--floating-label.is-focused &,
-    .mdl-textfield--floating-label.is-dirty &,
-    .mdl-textfield--floating-label.has-placeholder & {
-        top: $input-text-vertical-spacing - $input-text-floating-label-fontsize;
-    }
-
-    .material-icons {
-        font-size: 1.25em;
-        vertical-align: text-bottom;
-    }
-}

package/src/elements/Tooltip/Tooltip.jsx

@@ -1,3 +0,0 @@
-import Tooltip from 'react-mdl/lib/Tooltip';
-
-export default Tooltip;

package/src/elements/Tooltip/_tooltip.scss

@@ -1,21 +0,0 @@
-/**
- * Copyright 2016 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-tooltip.is-active {
-
-    button[disabled] + & {
-        /*
-            Workaround to prevent mouseleave problem with disabled form elements
-            @see https://openproject.brox.de/work_packages/11918
-            drawback: tooltips never shown on disabled buttons
-        */
-        display: none;
-    }
-
-    th &, td & {
-        white-space: normal;
-    }
-}

package/src/elements/Version/Version.jsx

@@ -1,19 +0,0 @@
-// react
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Version = props => {
-    const { version } = props;
-    return (
-        <span>
-            {version}
-        </span>
-    );
-};
-Version.propTypes = {
-    version: PropTypes.string.isRequired,
-};
-
-Version.displayName = 'Version';
-
-export default Version;