@eccenca/gui-elements 6.2.0 → 22.0.0-rc.7

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;
-}

package/src/elements/Progressbar/Progressbar.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ReactMDLProgressBar from 'react-mdl/lib/ProgressBar';
-
-const Progressbar = props => {
-    const {
-        className,
-        appearGlobal,
-        appearLocal,
-        ...otherProps
-    } = props;
-    const classes = classNames(
-        {
-            'mdl-progress--global': appearGlobal === true,
-            'mdl-progress--local': appearLocal === true,
-        },
-        className
-    );
-    return <ReactMDLProgressBar className={classes} {...otherProps} />;
-};
-// define property types
-Progressbar.propTypes = {
-    appearGlobal: PropTypes.bool,
-    appearLocal: PropTypes.bool,
-    className: PropTypes.string,
-};
-Progressbar.defaultProps = {
-    appearGlobal: false,
-    appearLocal: false,
-};
-Progressbar.displayName = 'Progressbar';
-
-export default Progressbar;

package/src/elements/Progressbar/_progressbar.scss

@@ -1,22 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-progress {
-    width: 100%;
-}
-
-.mdl-progress--global,
-.mdl-progress--local {
-    position: fixed;
-    top: $layout-desktop-header-height;
-    left: 0;
-    z-index: 32000;
-}
-
-.mdl-progress--local {
-    position: absolute;
-    top: 0;
-}

package/src/elements/Radio/RadioButton.jsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactMDLRadio from 'react-mdl/lib/Radio';
-import classNames from 'classnames';
-
-/**
-```js
-import { Radio } from '@eccenca/gui-elements';
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <Radio
-                checked={true} // Boolean (required), describes the checked state of Radio, default: false
-                className="my-radioselect-class" // String (optional), additional CSS class names
-                disabled={true} // Boolean (optional), describes if Radio is disabled, default: false
-                hideLabel{true} // Boolean (optional), describes if Radio label is not visible, default: false
-                name="optionname" // String (required), name of input that Radio select is related to
-                label={"My radio label"} // String (optional), label that describes the Radio select for the user
-                onChange={this.myRadioSelectHandlerMethod} // function (required), update handler for changes on Radio select element
-                ripple={true} // Boolean (optional), MDL ripple effect is used on Radio element, default: false
-                value={1} // String or Number (required), value for input when Radio is selected
-            />
-            <Radio>
-                <div className="my-radioselect-label"><p>Use child elements instead of a label property.</p></div>
-            </Radio>
-        )
-    },
-    // ....
-});
-```
-*/
-
-const Radio = props => {
-    const {
-        children, label, className, hideLabel, ...otherProps
-    } = props;
-
-    let radioLabel = false;
-
-    if (label && !children) {
-        radioLabel = label;
-    }
-
-    if (!label && children) {
-        radioLabel = children;
-    }
-
-    if (label && children) {
-        radioLabel = <div title={label}>{children}</div>;
-    }
-
-    if (__DEBUG__ && radioLabel === false) {
-        console.warn(
-            'Add label property or children content to <Radio /> element.'
-        );
-    }
-
-    const classes = classNames(
-        {
-            'mdl-radio--hiddenlabel': hideLabel === true,
-        },
-        className
-    );
-
-    return (
-        <ReactMDLRadio className={classes} {...otherProps}>
-            {radioLabel || <span>&nbsp;</span>}
-        </ReactMDLRadio>
-    );
-};
-
-Radio.propTypes = {
-    /**
-     describes the selected state of Radio
-    */
-    checked: PropTypes.bool.isRequired,
-    /**
-     additional CSS class names
-    */
-    className: PropTypes.string,
-    /**
-     describes if Radio is disabled
-    */
-    disabled: PropTypes.bool,
-    /**
-     describes if Radio label is not visible
-    */
-    hideLabel: PropTypes.bool,
-    /**
-     name of input that Radio select is related to
-    */
-    name: PropTypes.string.isRequired,
-    /**
-     label that describes the Radio select for the user
-    */
-    label: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-    ]),
-    /**
-     update handler for changes on Radio select element
-    */
-    onChange: PropTypes.func,
-    /**
-     MDL ripple effect is used on Radio element
-    */
-    ripple: PropTypes.bool,
-    /**
-     value for input when Radio is selected
-    */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]).isRequired,
-};
-
-Radio.defaultProps = {
-    className: null,
-    disabled: false,
-    hideLabel: false,
-    label: null,
-    ripple: false,
-    onChange: undefined,
-};
-
-Radio.displayName = 'Radio select';
-
-export default Radio;

package/src/elements/Radio/RadioGroup.jsx

@@ -1,35 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import ReactMDLRadioGroup from 'react-mdl/lib/RadioGroup';
-
-const extendedOnChange = (onChangeFn, event) => {
-    if (_.isFunction(onChangeFn)) {
-        onChangeFn({
-            event,
-            name: event.target.name,
-            value: event.target.value,
-            rawValue: event.target.value,
-        });
-    }
-};
-
-const RadioGroup = props => {
-    const {
-        onChange, container, childContainer, ...otherProps
-    } = props;
-
-    return (
-        <div className="mdl-radio-group">
-            <ReactMDLRadioGroup
-                onChange={event => extendedOnChange(onChange, event)}
-                container={!childContainer && !container ? 'ul' : container}
-                childContainer={
-                    !childContainer && !container ? 'li' : childContainer
-                }
-                {...otherProps}
-            />
-        </div>
-    );
-};
-
-export default RadioGroup;

package/src/elements/Radio/_radio.scss

@@ -1,46 +0,0 @@
-/**
- * Adjustments for Radio input element.
- *
- * @author Michael Haschke
- */
-
-.mdl-radio-group {
-    margin-bottom: $typo-body-1-margin-bottom;
-
-    & > div {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: flex-start;;
-
-        & > * {
-            min-width: 5em;
-            flex-grow: 1;
-            margin-right: $ecc-size-block-whitespace;
-            margin-bottom: 0.5 * $ecc-size-block-whitespace;
-        }
-    }
-
-    & > ul, & > ol {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-
-        & > li {
-        }
-    }
-}
-
-.mdl-radio--hiddenlabel {
-    .mdl-radio__label {
-        display: block;
-        position: absolute;
-        bottom: 200vh;
-        right: 200vw;
-    }
-}
-
-.mdl-radio__outer-circle,
-.mdl-radio__inner-circle {
-    // move thickness of border to top that element looks vertically centered
-    margin-top: -2px;
-}

package/src/elements/Radio/index.js

@@ -1,7 +0,0 @@
-import Radio from './RadioButton';
-import RadioGroup from './RadioGroup';
-
-export default {
-    Radio,
-    RadioGroup,
-};

package/src/elements/SelectBox/SelectBox.jsx

@@ -1,321 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Select from 'react-select/lib/Select';
-import Creatable from 'react-select/lib/Creatable';
-import Async from 'react-select/lib/Async';
-import AsyncCreatable from 'react-select/lib/AsyncCreatable';
-import _ from 'lodash';
-import UniqueIdWrapper from '../../utils/uniqueId';
-import Button from '../Button/Button';
-
-// format value to lowercase string
-const stringCompare = function (value) {
-    return _.toLower(_.toString(value));
-};
-
-const clearRenderer = () => (
-    <Button iconName="clear" className="mdl-button--clearance" tabIndex={-1} />
-);
-
-/**
-The 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.
-The SelectBox behaves like a [controlled input](https://facebook.github.io/react/docs/forms.html#controlled-components).
-Please refer to all available properties in the linked documentations.
-
-```js
-import { SelectBox } from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    getInitialState(){
-      return {
-          value: 8,
-      };
-    },
-    selectBoxOnChange(value){
-       this.setState({
-           value
-       });
-    },
-    // template rendering
-    render() {
-        return (
-            <SelectBox
-                placeholder="Label for SelectBox"
-                options={['label1', 3]}
-                optionsOnTop={true} // option list opens up on top of select input (default: false)
-                value={this.state.value}
-                onChange={this.selectBoxOnChange}
-                creatable={true} // allow creation of new values
-                promptTextCreator={(newLabel) => ('New stuff: ' + newLabel)} // change default "Create option 'newLabel'" to "New stuff: 'newLabel'"
-                multi={true} // allow multi selection
-                clearable={false} // hide 'remove all selected values' button
-                searchable={true} // whether to behave like a type-ahead or not
-                reducedSize={false} // remove vertical whitespace around element, default: false
-            />
-        )
-    },
-});
-
-```
-
-Note:
-
-- if objects are used in multi selectable options you can add {"clearableValue": false} to it to hide delete button for this specifc object
-- if "creatable" is set new values will be applied on Enter, Tab and Comma (",")
-- ``placeholder`` label is used within MDL floating label layout
-
- */
-class SelectBox extends Component {
-    static displayName = 'SelectBox';
-
-    static propTypes = {
-        /**
-         * contains values which are available in dropdown list
-         * options is an array of objects or strings and/or numbers
-         */
-        options: PropTypes.arrayOf(
-            (propValue, key, componentName, location, propFullName) => {
-                const containObjects = _.isPlainObject(_.head(propValue));
-
-                const isObject = _.isPlainObject(propValue[key]);
-
-                const isNumberOrString = _.isString(propValue[key]) || _.isNumber(propValue[key]);
-
-                if (
-                    (!containObjects && !isNumberOrString)
-                    || (containObjects && !isObject)
-                ) {
-                    return new Error(
-                        `Invalid prop \`${propFullName}\` supplied to`
-                            + ` \`${componentName}\`. No mixed content (object vs string/number) allowed.`
-                    );
-                }
-                return false;
-            }
-        ).isRequired,
-        /**
-         * contains selected value
-         * value is an object or a strings a numbers
-         */
-        value: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-            PropTypes.object,
-            // only needed for multiple inputs
-            PropTypes.array,
-        ]),
-        // onChange handler
-        onChange: PropTypes.func.isRequired,
-        // allow creation of new values
-        creatable: PropTypes.bool,
-        /**
-         * remove vertical whitespace around element
-         */
-        reducedSize: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        creatable: false,
-        reducedSize: false,
-    };
-
-    constructor(props) {
-        super(props);
-        this.onChange = this.onChange.bind(this);
-        this.uniqueOptions = this.uniqueOptions.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-    }
-
-    onChange(newValue) {
-        // If the options consist of plainvalues, we just want to return the plain value
-        if (_.get(newValue, '$plainValue', false)) {
-            return this.props.onChange(newValue.value, this.props.name);
-        }
-        return this.props.onChange(newValue, this.props.name);
-    }
-
-    // default check for value creation
-    // prevent double values (check case insensitive, and handle numbers as string)
-    uniqueOptions({ option: newObject, options }) {
-        return !_.some(
-            options,
-            ({ value, label }) =>
-                stringCompare(value) === stringCompare(newObject.value)
-                && stringCompare(label) === stringCompare(newObject.label)
-        );
-    }
-
-    onFocus() {
-        this.setState({
-            focused: true,
-        });
-    }
-
-    onBlur() {
-        this.setState({
-            focused: false,
-        });
-    }
-
-    render() {
-        const {
-            autofocus,
-            className,
-            creatable,
-            placeholder = '',
-            reducedSize,
-            optionsOnTop,
-            value,
-            async = false,
-            uniqueId,
-            ...passProps
-        } = this.props;
-
-        // we do not want to pass onChange, as we wrap onChange ourselves
-        delete passProps.onChange;
-        // we do not want to pass name, as we use it ourselves
-        delete passProps.name;
-
-        passProps.onFocus = this.onFocus;
-        passProps.onBlur = this.onBlur;
-
-        passProps.clearable = _.isUndefined(passProps.clearable)
-            ? true
-            : passProps.clearable;
-
-        if (passProps.clearable) {
-            passProps.clearRenderer = clearRenderer;
-        }
-
-        const focused = this.state && typeof this.state.focused !== 'undefined'
-            ? this.state.focused
-            : autofocus;
-
-        const classes = classNames(
-            {
-                'mdl-textfield mdl-js-textfield mdl-textfield--full-width': true, // use always
-                'mdl-textfield--floating-label': true, // use always
-                'mdl-textfield--reduced': reducedSize === true,
-                'mdl-textfield--missinglabel': !placeholder,
-                'is-dirty':
-                    !_.isNil(value) && (_.isNumber(value) || !_.isEmpty(value)),
-                'is-focused': focused === true,
-                'Select--optionsontop': optionsOnTop === true,
-            },
-            className
-        );
-
-        let parsedValue = null;
-
-        // if value is not empty or a number check for formatting
-        if (!_.isEmpty(value) || _.isNumber(value)) {
-            // in case of multi select is used
-            if (_.isArray(value)) {
-                parsedValue = _.map(
-                    value,
-                    it => (_.isPlainObject(it) ? it : { value: it, label: it })
-                );
-            } else {
-                parsedValue = _.isPlainObject(value)
-                    ? value
-                    : { value, label: value };
-            }
-        }
-
-        let component = null;
-
-        if (async) {
-            const {
-                ignoreCase = false,
-                ignoreAccents = false,
-                ...passAsyncProps
-            } = passProps;
-
-            if (creatable) {
-                component = (
-                    <AsyncCreatable
-                        {...passAsyncProps}
-                        value={parsedValue}
-                        id={uniqueId}
-                        onChange={this.onChange}
-                        isOptionUnique={
-                            this.props.isOptionUnique || this.uniqueOptions
-                        }
-                        ignoreAccents={ignoreAccents}
-                        ignoreCase={ignoreCase}
-                        placeholder=""
-                    />
-                );
-            } else {
-                component = (
-                    <Async
-                        {...passAsyncProps}
-                        id={uniqueId}
-                        value={parsedValue}
-                        onChange={this.onChange}
-                        ignoreAccents={ignoreAccents}
-                        ignoreCase={ignoreCase}
-                        placeholder=""
-                    />
-                );
-            }
-        } else {
-            const { options, ...passSyncProps } = passProps;
-
-            // parse values to object format if needed
-            const parsedOptions = _.isPlainObject(options[0])
-                ? options
-                : _.map(options, it => ({
-                    value: it,
-                    label: it,
-                    $plainValue: true,
-                }));
-
-            if (creatable) {
-                component = (
-                    <Creatable
-                        {...passSyncProps}
-                        id={uniqueId}
-                        value={parsedValue}
-                        options={parsedOptions}
-                        onChange={this.onChange}
-                        isOptionUnique={
-                            this.props.isOptionUnique || this.uniqueOptions
-                        }
-                        placeholder=""
-                    />
-                );
-            } else {
-                component = (
-                    <Select
-                        {...passSyncProps}
-                        id={uniqueId}
-                        value={parsedValue}
-                        options={parsedOptions}
-                        onChange={this.onChange}
-                        placeholder=""
-                    />
-                );
-            }
-        }
-
-        return (
-            <div
-                className={classes}
-                data-test-id={`ecc-gui-elements-${uniqueId}`}
-            >
-                {component}
-                <label className="mdl-textfield__label" htmlFor={uniqueId}>
-                    {placeholder}
-                </label>
-            </div>
-        );
-    }
-}
-
-export default UniqueIdWrapper(SelectBox, {
-    prefix: 'selectBox',
-    targetProp: 'uniqueId',
-});