@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

package/src/elements/Layout/_layout.scss

@@ -1,82 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-layout__header {
-    .mdl-navigation__link {
-        color: rgba(to_color($layout-header-text-color), .61);
-        border-bottom: 2px solid transparent;
-
-        &:focus, &:hover {
-            color: $layout-header-text-color;
-            border-color: inherit;
-        }
-
-        &.active {
-            color: rgba(to_color($layout-header-text-color), 1);
-            border-color: $color-primary;
-        }
-    }
-
-    .mdl-layout-title {
-        padding: $ecc-size-inline-whitespace 0;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-
-        img {
-            max-height: 100%;
-            width: auto;
-            margin-right: $ecc-size-inline-whitespace;
-        }
-    }
-}
-
-.mdl-layout__drawer-button {
-    .material-icons {
-        vertical-align: middle;
-    }
-}
-
-hr.mdl-layout-spacer {
-    padding: 0;
-    margin: 0.5rem 0;
-    border: none;
-}
-
-.mdl-layout--hide-on-phone {
-
-    @media screen and (max-width: $grid-tablet-breakpoint - 1) {
-        position: absolute;
-        left: -5000em;
-    }
-}
-
-.mdl-layout--hide-on-tablet {
-
-    @media screen and (max-width: $grid-desktop-breakpoint - 1) {
-        position: absolute;
-        left: -5000em;
-    }
-}
-
-.mdl-layout--hide-on-desktop {
-
-    @media screen and (min-width: $grid-desktop-breakpoint) {
-        position: absolute;
-        left: -5000em;
-    }
-}
-
-.mdl-layout--hide-on-screen,
-.mdl-layout--hide-for-eyes {
-    position: absolute;
-    left: -5000em;
-}
-
-.mdl-layout--hide-always {
-    display: none;
-}

package/src/elements/NotAvailable/NotAvailable.jsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from '../Tooltip/Tooltip';
-
-/**
-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 used as tooltip addition.
-
-```js
-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
-            />
-        )
-    },
-    // ....
-});
-
-```
-*/
-
-
-const Button = props => {
-    const {
-        className, description, inline, label,
-    } = props;
-
-    const classes = classNames(
-        {
-            'ecc-gui-elements__notavailable': true,
-            'ecc-gui-elements__notavailable--inline': inline,
-        },
-        className
-    );
-
-    const visibleLabel = <span className="ecc-gui-elements__notavailable-label">{label}</span>;
-    const addedTooltip = description || (label !== 'n/a' ? '' : 'not available');
-
-    return (
-        <span className={classes}>
-            { addedTooltip ? <Tooltip label={addedTooltip}>{visibleLabel}</Tooltip> : visibleLabel}
-        </span>
-    );
-};
-
-// define property types
-Button.propTypes = {
-    /**
-        string (optional): additional CSS class name
-    */
-    className: PropTypes.string,
-    /**
-        string (optional): long description that is only shown on hover, default: empty string when label is given,
-        otherwise "not available"
-    */
-    description: PropTypes.string,
-    /* TODO *
-        string (optional): name of icon that is used instead of label string
-    */
-    // iconName: PropTypes.string,
-    /**
-        boolean (default: false): show it as inline text element, default: false
-    */
-    inline: PropTypes.bool,
-    /**
-        string (optional): short label that is shown, default: 'n/a'
-    */
-    label: PropTypes.string, // short description
-};
-
-Button.defaultProps = {
-    className: '',
-    description: '',
-    inline: false,
-    label: 'n/a',
-};
-
-Button.displayName = 'NotAvailable';
-export default Button;

package/src/elements/NotAvailable/_notavailable.scss

@@ -1,18 +0,0 @@
-/**
- * Copyright 2017 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.ecc-gui-elements__notavailable {
-    display: block;
-    white-space: nowrap;
-}
-
-.ecc-gui-elements__notavailable-label {
-    opacity: 0.61;
-}
-
-.ecc-gui-elements__notavailable--inline {
-    display: inline;
-}

package/src/elements/Pagination/Pagination.jsx

@@ -1,414 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import classNames from 'classnames';
-import Button from '../Button/Button';
-import SelectBox from '../SelectBox/SelectBox';
-import TextField from '../TextField/TextField';
-import Spinner from '../Spinner/Spinner';
-import Tooltip from '../Tooltip/Tooltip';
-
-/**
- * This component provides a pagination for switching through lists of results
- */
-class Pagination extends Component {
-    // define property types
-    static propTypes = {
-        /**
-         * contains actual start value which is shown
-         */
-        offset: PropTypes.number.isRequired,
-        /**
-         * contains number of max shown elements per page
-         */
-        limit: PropTypes.number.isRequired,
-        /**
-         * contains total number of results. The value must be positive or undefined.
-         */
-        totalResults: PropTypes.number,
-        /**
-         * contains method which is called if offset have to change by user
-         */
-        onChange: PropTypes.func.isRequired,
-        /**
-         * show element offset numbers as pagination information
-         */
-        showElementOffsetPagination: PropTypes.bool,
-        /**
-         * define position of page change dropdown/dropup
-         */
-        isTopPagination: PropTypes.bool,
-        /**
-         * text displayed next to limit changer selectbox
-         */
-        newLimitText: PropTypes.string,
-        /**
-         * possible page sizes
-         */
-        limitRange: PropTypes.array,
-        /**
-         * if true all buttons and inputs fields are disabled and visibility is decreased
-         */
-        disabled: PropTypes.bool,
-        /**
-         * the current page number can be edited to jump directly there, works only with
-         * `showElementOffsetPagination===false`
-         */
-        showPageInput: PropTypes.bool,
-        /**
-         * hide info about number of total results
-         */
-        hideTotalResults: PropTypes.bool,
-        /**
-         * show a spinner if true and totalResults is not set
-         */
-        pendingTotal: PropTypes.bool,
-        /**
-         * additional class names
-         */
-        className: PropTypes.string,
-
-        foundResultsText: PropTypes.string,
-
-        pageWithLimitText: PropTypes.string,
-
-        pageWithoutLimitText: PropTypes.string,
-    };
-
-    static defaultProps = {
-        /**
-         * sets site information as "numbers of elements" as default
-         */
-        showElementOffsetPagination: false,
-        /**
-         * predefined available range steps
-         */
-        limitRange: [5, 10, 25, 50, 100, 200],
-        disabled: false,
-        hideTotalResults: false,
-        showPageInput: false,
-        isTopPagination: false,
-        pendingTotal: false,
-        totalResults: undefined,
-        className: '',
-        newLimitText: '',
-        foundResultsText: 'Found ::total:: results',
-        pageWithLimitText: 'Page ::current:: of ::total::',
-        pageWithoutLimitText: 'Page ::current::',
-    };
-
-    constructor(props) {
-        super(props);
-        this.displayName = 'Pagination';
-        this.onClickFirst = this.onClickFirst.bind(this);
-        this.onClickBack = this.onClickBack.bind(this);
-        this.onClickForward = this.onClickForward.bind(this);
-        this.onClickLast = this.onClickLast.bind(this);
-        this.onNewLimit = this.onNewLimit.bind(this);
-        this.onChangePage = this.onChangePage.bind(this);
-        this.handleKeyPress = this.handleKeyPress.bind(this);
-
-        this.state = {
-            customPage: undefined,
-        };
-    }
-
-    // trigger event to show first results
-    onClickFirst() {
-        const { limit, totalResults, onChange } = this.props;
-
-        onChange(
-            this.calculatePagination({
-                limit,
-                offset: 0,
-                totalResults,
-            })
-        );
-    }
-
-    // trigger event to show previous results (regarding to limit)
-    onClickBack() {
-        const {
-            limit,
-            totalResults,
-            offset,
-            onChange,
-        } = this.props;
-
-        onChange(
-            this.calculatePagination({
-                limit,
-                offset: offset < limit ? 0 : offset - limit,
-                totalResults,
-            })
-        );
-    }
-
-    // trigger event to show next results (regarding to limit)
-    onClickForward() {
-        const {
-            limit,
-            totalResults,
-            offset,
-            onChange,
-        } = this.props;
-
-        onChange(
-            this.calculatePagination({
-                limit,
-                offset: offset + limit,
-                totalResults,
-            })
-        );
-    }
-
-    // trigger event to show last results (regarding to limit)
-    onClickLast() {
-        const { limit, totalResults, onChange } = this.props;
-
-        onChange(
-            this.calculatePagination({
-                limit,
-                offset: (_.ceil(totalResults / limit) - 1) * limit,
-                totalResults,
-            })
-        );
-    }
-
-    onNewLimit(limit) {
-        const { offset, totalResults, onChange } = this.props;
-
-        onChange(
-            this.calculatePagination({
-                limit,
-                offset: _.floor(offset / limit) * limit,
-                totalResults,
-            })
-        );
-    }
-
-    onChangePage(newPage) {
-        this.setState({
-            customPage: parseInt(newPage, 10),
-        });
-    }
-
-    calculatePagination = ({ limit, offset, totalResults }) => {
-        const onLastPage = offset + limit >= totalResults;
-
-        return {
-            limit,
-            offset,
-            totalResults,
-            onFirstPage: offset === 0 || totalResults === 0,
-            onLastPage,
-            currentPage:
-                totalResults === undefined
-                    ? _.floor(1 + offset / limit)
-                    : Math.min(
-                        _.ceil(totalResults / limit),
-                        _.floor(1 + offset / limit)
-                    ),
-            totalPages: _.ceil(totalResults / limit),
-            lastItemOnPage: onLastPage ? totalResults : offset + limit,
-        };
-    }
-
-    handleKeyPress(e) {
-        const newPage = parseInt(e.target.value, 10);
-        if (e.charCode === 13) {
-            const { limit, totalResults, onChange } = this.props;
-            const { totalPages } = this.calculatePagination(this.props);
-
-            if (newPage < 1 || newPage > totalPages) {
-                return;
-            }
-
-            onChange(
-                this.calculatePagination({
-                    limit,
-                    offset: limit * (newPage - 1),
-                    totalResults,
-                })
-            );
-            this.setState({ customPage: undefined });
-        }
-    }
-
-    // template rendering
-    render() {
-        const {
-            showElementOffsetPagination,
-            offset,
-            limit,
-            limitRange,
-            totalResults,
-            newLimitText,
-            isTopPagination,
-            disabled,
-            className,
-            pendingTotal,
-            showPageInput,
-            hideTotalResults,
-            pageWithoutLimitText,
-            pageWithLimitText,
-            foundResultsText,
-
-        } = this.props;
-
-        const { customPage } = this.state;
-
-        const limitRangeSorted = _.chain(limitRange)
-            .push(limit)
-            .filter(_.isNumber)
-            .sortBy()
-            .sortedUniq()
-            .value();
-
-        const {
-            currentPage,
-            totalPages,
-            lastItemOnPage,
-            onLastPage,
-            onFirstPage,
-        } = this.calculatePagination(this.props);
-
-        const pageField = !_.isUndefined(customPage)
-            ? (isNaN(customPage) ? 0 : customPage)
-            : currentPage;
-
-        const valid = pageField > 0 && pageField <= totalPages;
-
-        let pageInfo = '';
-
-        if (showElementOffsetPagination === false && showPageInput && !_.isUndefined(totalResults)) {
-            pageInfo = [
-                <span key="PageText">Page</span>,
-                <TextField
-                    key="PageNumber"
-                    reducedSize
-                    className="ecc-gui-elements__pagination__pagenumber"
-                    onKeyPress={this.handleKeyPress}
-                    disabled={disabled === true}
-                    stretch={false}
-                    style={{
-                        // the calculation can be improved
-                        width: `calc(${Math.max(1, pageField.toString().length)}ex + 1rem)`,
-                    }}
-                    min={1}
-                    max={totalPages}
-                    type="number"
-                    value={pageField > 0 ? pageField : ''}
-                    error={valid ? '' : 'Invalid page'}
-                    onChange={e => {
-                        this.onChangePage(e.value);
-                    }}
-                />,
-                <span key="PageText2">
-                    {'of '}
-                    {totalPages.toLocaleString()}
-                </span>,
-            ];
-        } else if (showElementOffsetPagination === false && !showPageInput && !_.isUndefined(totalResults)) {
-            pageInfo = pageWithLimitText
-                .replace('::current::', currentPage.toLocaleString())
-                .replace('::total::', totalPages.toLocaleString())
-        } else if (showElementOffsetPagination === false && _.isUndefined(totalResults)) {
-            pageInfo = pageWithoutLimitText
-                .replace('::current::', currentPage.toLocaleString());
-        } else if (showElementOffsetPagination === true) {
-            const firstItem = Math.min(totalResults, offset + 1);
-            const lastItem = lastItemOnPage;
-            const start = firstItem === lastItem
-                ? lastItem.toLocaleString()
-                : `${firstItem.toLocaleString()} - ${lastItem.toLocaleString()}`;
-            pageInfo = `${start} of ${totalResults.toLocaleString()}`;
-        }
-
-        // render actual site information
-        const pageInformation = (
-            <div className="ecc-gui-elements__pagination-pageInfo">
-                {pageInfo}
-            </div>
-        );
-        const paginationClassNames = classNames(
-            'ecc-gui-elements__pagination',
-            {
-                'ecc-gui-elements__pagination--disabled': disabled === true,
-            },
-            className
-        );
-        return (
-            <div className={paginationClassNames}>
-                {(
-                    hideTotalResults === false
-                    && !_.isUndefined(totalResults)
-
-                ) && (
-                    <span className="ecc-gui-elements__pagination-summary">
-                        {foundResultsText.replace('::total::', totalResults.toLocaleString())}
-                    </span>
-                )}
-                {newLimitText && !_.isEmpty(limitRangeSorted) ? (
-                    <div className="ecc-gui-elements__pagination-limit">
-                        <span className="ecc-gui-elements__pagination-limit_text">
-                            {newLimitText}
-                        </span>
-                        <div className="ecc-gui-elements__pagination-limit_size">
-                            <SelectBox
-                                reducedSize
-                                value={limit}
-                                options={limitRangeSorted}
-                                clearable={false}
-                                searchable={false}
-                                onChange={this.onNewLimit}
-                                optionsOnTop={isTopPagination !== true}
-                                disabled={disabled === true}
-                            />
-                        </div>
-                    </div>
-                ) : (
-                    ''
-                )}
-                <div className="ecc-gui-elements__pagination-actions">
-                    <Button
-                        className="ecc-gui-elements__pagination-actions__first-page-button"
-                        onClick={this.onClickFirst}
-                        disabled={onFirstPage || disabled === true}
-                        iconName="arrow_firstpage"
-                    />
-                    <Button
-                        className="ecc-gui-elements__pagination-actions__prev-page-button"
-                        onClick={this.onClickBack}
-                        disabled={onFirstPage || disabled === true}
-                        iconName="arrow_prevpage"
-                    />
-                    {pageInformation}
-                    <Button
-                        className="ecc-gui-elements__pagination-actions__next-page-button"
-                        onClick={this.onClickForward}
-                        disabled={onLastPage || disabled === true}
-                        iconName="arrow_nextpage"
-                    />
-                    <Button
-                        className="ecc-gui-elements__pagination-actions__last-page-button"
-                        onClick={this.onClickLast}
-                        disabled={onLastPage || disabled === true || totalResults < 1 || totalResults === undefined}
-                        iconName="arrow_lastpage"
-                    />
-                </div>
-                {totalResults === undefined && pendingTotal && (
-                    <div className="ecc-gui-elements__pagination-processinfo">
-                        <Tooltip
-                            label="Fetch count of total results."
-                        >
-                            <Spinner appearInline={true} />
-                        </Tooltip>
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-export default Pagination;

package/src/elements/Pagination/_pagination.scss

@@ -1,98 +0,0 @@
-/**
- * Copyright 2016 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.ecc-gui-elements__pagination {
-    @include typo-body-1;
-    font-size: $data-table-font-size;
-    // flex-grow: 1;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    // justify-content: flex-end;
-    align-items: center;
-    padding: $ecc-size-block-whitespace/8 $ecc-size-block-whitespace/4;
-
-    .mdl-button {
-        margin: calc((#{$button-height} - #{$typo-body-1-line-height * 1rem}) / -4) calc((#{$button-height} - #{$typo-body-1-line-height * 1rem}) / -2);
-    }
-}
-
-.ecc-gui-elements__pagination--disabled {
-    opacity: 0.61;
-}
-
-.ecc-gui-elements__pagination-summary {
-    margin-right: $typo-body-1-margin-bottom / 2;
-}
-
-.ecc-gui-elements__pagination-limit {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin-right: $typo-body-1-margin-bottom / 2;
-}
-
-.ecc-gui-elements__pagination-limit_text {
-    margin-right: $typo-body-1-margin-bottom / 2;
-    white-space: nowrap;
-}
-
-.ecc-gui-elements__pagination-limit_size {
-    display: inline-block;
-    vertical-align: middle;
-
-    .Select-control {
-        height: auto;
-        width: auto;
-    }
-
-    .Select-value {
-        width: auto;
-        height: auto;
-    }
-
-    .Select-input {
-        height: auto;
-        min-width: 2.5em;
-    }
-}
-
-.ecc-gui-elements__pagination-actions {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    align-items: center;
-}
-
-.ecc-gui-elements__pagination-pageInfo {
-    white-space: nowrap;
-}
-
-.ecc-gui-elements__pagination__pagenumber {
-    min-width: 0;
-    font-size: inherit;
-    vertical-align: middle;
-    margin: 0 $typo-body-1-margin-bottom / 2;
-    padding: 0;
-    width: auto;
-
-    .mdl-textfield__input {
-        font-size: inherit;
-        width: 100%;
-        text-align: center;
-    }
-
-    .mdl-textfield__label::after {
-        bottom: 0;
-    }
-
-    .mdl-textfield__error {
-        white-space: nowrap;
-    }
-}
-
-.ecc-gui-elements__pagination-processinfo {
-    margin-left: $ecc-size-block-whitespace / 2;
-}