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

package/src/elements/Card/CardTitle.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import classNames from 'classnames';
-import ReactMDLCardTitle from 'react-mdl/lib/Card/CardTitle';
-import PropTypes from 'prop-types';
-
-const CardTitle = props => {
-    const {
-        className,
-        border,
-        children,
-        documentLevel,
-        ...otherProps
-    } = props;
-
-    const classes = classNames(
-        {
-            'mdl-card--border': border === true,
-        },
-        className
-    );
-
-    let title = children;
-    if (!_.isUndefined(documentLevel) && _.isString(children)) {
-        switch (documentLevel) {
-        case 'h1':
-            title = (
-                <h1 className="mdl-card__title-text">{children}</h1>
-            );
-            break;
-        case 'h2':
-            title = (
-                <h2 className="mdl-card__title-text">{children}</h2>
-            );
-            break;
-        case 'h3':
-            title = (
-                <h3 className="mdl-card__title-text">{children}</h3>
-            );
-            break;
-        case 'h4':
-            title = (
-                <h4 className="mdl-card__title-text">{children}</h4>
-            );
-            break;
-        case 'h5':
-            title = (
-                <h5 className="mdl-card__title-text">{children}</h5>
-            );
-            break;
-        case 'h6':
-            title = (
-                <h6 className="mdl-card__title-text">{children}</h6>
-            );
-            break;
-        default:
-            title = children;
-            break;
-        }
-    }
-
-    return (
-        <ReactMDLCardTitle className={classes} {...otherProps}>
-            {title}
-        </ReactMDLCardTitle>
-    );
-};
-CardTitle.propTypes = {
-    className: PropTypes.string,
-    border: PropTypes.bool,
-    documentLevel: PropTypes.string,
-};
-CardTitle.defaultProps = {
-    border: true,
-};
-CardTitle.displayName = 'CardTitle';
-
-export default CardTitle;

package/src/elements/Card/FloatingActionList.jsx

@@ -1,260 +0,0 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import Button from '../Button/Button';
-import Icon from '../Icon/Icon';
-
-/**
-The `<FloatingActionList />` element provides functionality for a quick adaption of the floating action button (FAB) pattern from Material Design.
-It 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 on default.
-The 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.
-When there is already a fixed `<CardActions />` element in use put the `<FloatingActionList />` in it to use it fixed.
-
-```js
-import {
-    Card,
-    CardTitle,
-    CardContent,
-    CardActions,
-    FloatingActionList
-} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <div>
-                <Card>
-                    <CardTitle>
-                        Card title
-                    </CardTitle>
-                    <CardContent>
-                        <!-- ... -->
-                    </CardContent>
-                    <FloatingActionList
-                        className={'my-own-class'} // string, element can be enhanced with additional CSS classes
-                        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
-                        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
-                        fabSize={'mini|large'} // string, what FAB size should be used, default: 'large'
-                        fixed={false|true} // boolean, if FAB should be always visible sticky on botton when card is only partly shown, default: false
-                        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.
-                        actions={
-                            [
-                                // array of objects that define icon, label and handler method of each action
-                                {
-                                    icon: 'info',
-                                    label: 'Open ConfirmationDialog',
-                                    handler: this.openConfirmationDialog
-                                },
-                                {
-                                    icon: 'info',
-                                    label: 'Open BaseDialog',
-                                    handler: this.openBaseDialog,
-                                    disabled: true
-                                },
-                            ]
-                        }
-                    />
-                </Card>
-                <Card fixedActions={true}>
-                    <CardTitle>
-                        Card title
-                    </CardTitle>
-                    <CardContent>
-                        <!-- ... -->
-                    </CardContent>
-                    <CardActions fixed={true}>
-                        <!-- if a fixed button row is used then include the action list there if it need to be fixed, too. -->
-                        <FloatingActionList
-                            actions={
-                                [
-                                    {
-                                        icon: 'info',
-                                        label: 'Open ConfirmationDialog',
-                                        handler: this.openConfirmationDialog
-                                    },
-                                ]
-                            }
-                        />
-                    </CardActions>
-                </Card>
-            </div>
-        )
-    },
-    // ....
-});
-```
-*/
-class FloatingActionList extends Component {
-    static displayName = 'FloatingActionList';
-
-    static propTypes = {
-        /**
-            array (required): list of action objects, each can have `icon`, `label`, `handler` and `disabled` properties
-        */
-        actions: PropTypes.array.isRequired,
-        /**
-            string (optional): additional CSS class name
-        */
-        className: PropTypes.string,
-        /**
-            string (optional): `large` (default) or `mini` FAB size
-        */
-        fabSize: PropTypes.string,
-        /**
-         // eslint-disable-next-line max-len
-         boolean (optional): `true` sets FAB always visible sticky
-         on botton when card is only partly shown, default: `false`
-        */
-        fixed: PropTypes.bool,
-        /**
-            string (optional): 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.
-        */
-        iconName: PropTypes.string,
-        /**
-            boolean (optional): 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
-        */
-        allowSingleItemList: PropTypes.bool,
-        /**
-            boolean (optional): action menu list is shown at the bottom of the FAB, default: `false`
-        */
-        openToBottom: PropTypes.func,
-    };
-
-    static defaultProps = {
-        fabSize: 'large',
-        fixed: false,
-        iconName: 'add',
-        allowSingleItemList: false,
-        openToBottom() { return false; },
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            activeFAB: false,
-        };
-
-        this.handleFAB = this.handleFAB.bind(this);
-        this.handleOutsideClick = this.handleOutsideClick.bind(this);
-
-        this.refFAB = null;
-        this.setRefFAB = element => {
-            this.refFAB = element;
-        };
-    }
-
-    /**
-     * close the fab button context menu whenever not the fab button is clicked
-     */
-    handleOutsideClick(event) {
-        if (this.state.activeFAB === false) return;
-        if (this.refFAB && !this.refFAB.contains(event.target)) {
-            this.setState({
-                activeFAB: false,
-            });
-        }
-    }
-
-    componentDidMount() {
-        document.addEventListener('click', this.handleOutsideClick, false);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('click', this.handleOutsideClick, false);
-    }
-
-    componentWillReceiveProps() {
-        if (this.state.activeFAB) {
-            this.setState({
-                activeFAB: false,
-            });
-        }
-    }
-
-    handleFAB(event) {
-        event.stopPropagation();
-        this.setState({
-            activeFAB: !this.state.activeFAB,
-        });
-    }
-
-    render() {
-        const {
-            actions,
-            className,
-            fabSize,
-            fixed,
-            iconName,
-            allowSingleItemList,
-            openToBottom,
-            ...otherProps
-        } = this.props;
-
-        const classes = classNames(
-            {
-                'ecc-floatingactionlist': true,
-                'ecc-floatingactionlist--bottommenu': openToBottom(),
-            },
-            className
-        );
-
-        const showMenuList = (actions.length > 1 || allowSingleItemList);
-
-        const floatinglist = (
-            <div className={classes} {...otherProps}>
-                <Button
-                    className={classNames('ecc-floatingactionlist__button', {
-                        'is-active': this.state.activeFAB === true,
-                    })}
-                    iconName={
-                        showMenuList || !actions[0].icon
-                            ? (this.state.activeFAB ? 'hide' : iconName)
-                            : actions[0].icon
-                    }
-                    fabSize={fabSize}
-                    colored
-                    tooltip={showMenuList ? false : actions[0].label}
-                    onClick={showMenuList ? this.handleFAB : actions[0].handler}
-                />
-                {showMenuList ? (
-                    <ul className="mdl-menu mdl-shadow--2dp ecc-floatingactionlist__menu">
-                        {_.map(actions, (action, idx) => (
-                            <li key={`FloatingAction_${idx}_${action.label}`}>
-                                <button
-                                    className="mdl-menu__item"
-                                    onClick={action.handler}
-                                    disabled={action.disabled}
-                                    data-test-id={action.dataTestId}
-                                >
-                                    {action.icon ? (
-                                        <Icon name={action.icon} />
-                                    ) : (
-                                        false
-                                    )}
-                                    {action.label}
-                                </button>
-                            </li>
-                        ))}
-                    </ul>
-                ) : (
-                    false
-                )}
-            </div>
-        );
-        return (
-            <div
-                ref={this.setRefFAB}
-                className={fixed ? 'ecc-floatingactionlist__wrapper--fixed' : ''}
-            >
-                {floatinglist}
-            </div>
-        );
-    }
-}
-
-export default FloatingActionList;

package/src/elements/Card/_card.scss

@@ -1,179 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-card {
-    z-index: auto;
-    overflow: visible;
-    min-height: 0;
-}
-
-.mdl-card--stretch,
-.mdl-card--full-width {
-    width: auto;
-}
-
-.mdl-card__title {
-    min-height: calc(#{$button-height} - #{$ecc-size-block-whitespace});
-}
-
-.mdl-card__menu {
-    display: flex;
-    justify-content: flex-end;
-    top: calc(0.5 * (#{$button-height} - #{$button-icon-size}));
-    right: calc(0.5 * (#{$button-height} - #{$button-icon-size}));
-}
-
-.mdl-card__title-text {
-    align-self: center;
-    line-height: 1;
-    flex-grow: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.mdl-card__content {
-    margin: 0;
-    padding: $ecc-size-block-whitespace/2 $ecc-size-block-whitespace;
-
-    .mdl-grid + & {
-        margin-top: -1 * $ecc-size-block-whitespace;
-    }
-
-    .mdl-card--has-fixed-actions > .mdl-card__title ~ &:nth-last-child(-n+2) {
-        margin-bottom: calc(#{$ecc-size-block-whitespace/2} - #{$button-fab-size});
-    }
-}
-
-.mdl-card__actions {
-    display: flex;
-    justify-content: flex-start;
-    background-color: rgba(to_color($card-background-color), 0.90);
-    min-height: $button-height;
-    z-index: 1;
-
-    & > * {
-        margin-right: $ecc-size-block-whitespace/2;
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-
-    .mdl-card__title.mdl-card--border + &.mdl-card--border {
-        border-top: none;
-    }
-}
-
-.mdl-card__actions--fixed {
-    position: sticky;
-    bottom: -1 * $ecc-size-block-whitespace;
-
-    .mdl-card__title ~ & {
-        margin-top: $button-fab-size;
-    }
-}
-
-.mdl-card--reduced {
-    & > .mdl-card__title {
-        padding: 0;
-        min-height: $button-height;
-
-        &.mdl-card--border {
-            padding-bottom: $ecc-size-block-whitespace/4;
-        }
-    }
-
-    & > .mdl-card__menu {
-        top: 0;
-        right: 0;
-    }
-
-    & > .mdl-card__content {
-        padding: $ecc-size-block-whitespace/4 0;
-    }
-
-    & > .mdl-card__actions {
-        padding: 0;
-
-        &.mdl-card--border {
-            padding-top: $ecc-size-block-whitespace/4;
-        }
-    }
-}
-
-.ecc-floatingactionlist {
-    position: absolute;
-    bottom: $ecc-size-block-whitespace;
-    right: 2 * $ecc-size-block-whitespace;
-    height: 0;
-    width: 0;
-}
-
-.ecc-floatingactionlist__wrapper--fixed {
-    position: sticky;
-    bottom: -1 * $ecc-size-block-whitespace;
-    height: 0;
-}
-
-.ecc-floatingactionlist__button {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    z-index: 2;
-    transition: opacity .2s, width .2s, height .2s, border-radius .2s;
-}
-
-.ecc-floatingactionlist__menu {
-    position: absolute;
-    bottom: 0.61 * $button-fab-size;
-    right: 0.61 * $button-fab-size;
-    top: auto;
-    left: auto;
-    height: auto;
-    overflow: hidden;
-    width: 0;
-    min-width: 0;
-    max-height: 0;
-    padding: 0;
-    opacity: 0;
-    border-radius: 50%;
-    z-index: 0;
-    transition: opacity .2s, width .2s, max-height .2s, border-radius .2s;
-
-    .ecc-floatingactionlist--bottommenu & {
-        bottom: auto;
-        top: -0.39 * $button-fab-size;
-    }
-
-    .mdl-button--mini-fab + & {
-        bottom: 0.61 * $button-fab-size-mini;
-        right: 0.61 * $button-fab-size-mini;
-
-        .ecc-floatingactionlist--bottommenu & {
-            bottom: auto;
-            top: -0.39 * $button-fab-size-mini;
-        }
-    }
-
-    .mdl-menu__item {
-        opacity: 1;
-    }
-
-    .material-icons {
-        vertical-align: middle;
-        margin-right: 0.5em
-    }
-
-    .ecc-floatingactionlist__button.is-active + & {
-        width: 20em;
-        max-height: 6 * 48px;
-        overflow-y: auto;
-        background-color: white;
-        opacity: 1;
-        border-radius: 0;
-        z-index: 2;
-    }
-}

package/src/elements/Card/index.js

@@ -1,18 +0,0 @@
-import { CardMenu } from 'react-mdl/lib/Card';
-import basicClassCreator from 'react-mdl/lib/utils/basicClassCreator';
-
-import Card from './Card';
-import CardTitle from './CardTitle';
-import CardActions from './CardActions';
-import FloatingActionList from './FloatingActionList';
-
-const CardContent = basicClassCreator('CardContent', 'mdl-card__content');
-
-export {
-    Card,
-    CardTitle,
-    CardMenu,
-    CardContent,
-    CardActions,
-    FloatingActionList,
-};

package/src/elements/Checkbox/Checkbox.jsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactMDLCheckbox from 'react-mdl/lib/Checkbox';
-import classNames from 'classnames';
-import extendedOnChangeBoolean from '../../utils/extendedOnChangeBoolean';
-
-/**
-```js
-import { Checkbox } from '@eccenca/gui-elements';
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <Checkbox
-                checked={true} // Boolean (required), describes the checked state of Checkbox, default: false
-                className="my-checkbox-class" // String (optional), additional CSS class names
-                disabled={true} // Boolean (optional), describes if Checkbox is disabled, default: false
-                hideLabel{true} // Boolean (optional), describes if Checkbox label is not visible, default: false
-                label={"My checkbox label"} // String (optional), label that describes the input checkbox for the user
-                onChange={this.myCheckboxHandlerMethod} // function (required), update handler for changes on Checkbox
-                ripple={true} // Boolean (optional), MDL ripple effect is used on Checkbox, default: false
-            />
-            <Checkbox>
-                <div className="my-checkbox-label"><p>Use child elements instead of a label property.</p></div>
-            </Checkbox>
-        )
-    },
-    // ....
-});
-```
-*/
-const Checkbox = props => {
-    const {
-        label,
-        children,
-        className,
-        hideLabel,
-        ripple,
-        checked,
-        onChange,
-        ...otherProperties
-    } = props;
-
-    let checkboxlabel = label || '';
-    if (!checkboxlabel && children) {
-        checkboxlabel = children;
-    }
-
-    const classes = classNames(
-        {
-            'mdl-checkbox--hiddenlabel': hideLabel === true,
-        },
-        className
-    );
-    return (
-        <ReactMDLCheckbox
-            checked={!!checked}
-            label={checkboxlabel}
-            ripple={ripple}
-            value="test"
-            onChange={extendedOnChangeBoolean.bind(null, onChange)}
-            className={classes}
-            {...otherProperties}
-        />
-    );
-};
-
-Checkbox.propTypes = {
-    /**
-     describes the checked state of Checkbox
-     */
-    checked: PropTypes.bool.isRequired,
-    /**
-     additional CSS class names
-     */
-    className: PropTypes.string,
-    /**
-     describes if Checkbox is disabled
-     */
-    disabled: PropTypes.bool,
-    /**
-     describes if Checkbox label is not visible
-     */
-    hideLabel: PropTypes.bool,
-    /**
-     label that describes the input checkbox for the user
-     */
-    label: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-    ]),
-    /**
-     update handler for changes on Checkbox
-     */
-    onChange: PropTypes.func.isRequired,
-    /**
-     MDL ripple effect is used on Checkbox
-     */
-    ripple: PropTypes.bool,
-};
-
-Checkbox.defaultProps = {
-    className: null,
-    disabled: false,
-    hideLabel: false,
-    label: null,
-    ripple: false,
-    checked: false,
-};
-
-Checkbox.displayName = 'Checkbox input';
-
-export default Checkbox;

package/src/elements/Checkbox/_checkbox.scss

@@ -1,14 +0,0 @@
-/**
- * Adjustments for Checkbox input element.
- *
- * @author Michael Haschke
- */
-
-.mdl-checkbox--hiddenlabel {
-    .mdl-checkbox__label {
-        display: block;
-        position: absolute;
-        bottom: 200vh;
-        right: 200vw;
-    }
-}