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

package/src/elements/Button/Button.jsx

@@ -1,216 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ReactMDLButton from 'react-mdl/lib/Button';
-import ReactMDLFabButton from 'react-mdl/lib/FABButton';
-import Tooltip from '../Tooltip/Tooltip';
-import Icon from '../Icon/Icon';
-import canonicalTooltips from '../Icon/canonicaltooltips.json';
-
-/**
-Read the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons).
-
-```js
-import {Button} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <Button>
-                Flat button
-            </Button>
-
-            // use the button parameters according to MDL-API, @see https://getmdl.io/components/index.html#buttons-section
-            <Button
-                raised
-                accent
-                colored
-                ripple
-                disabled
-                badge="5"
-            >
-                Button label
-            </Button>
-
-            // you can apply all other button properties on icon buttons, too (e.g. affirmative, accent, ripple, ...)
-            <Button
-                iconName="menu_more"
-                tooltip="This is a Test!"
-                fabSize="mini"
-            />
-        )
-    },
-    // ....
-});
-```
-*/
-
-const Button = props => {
-    /* TODO:
-
-    * add label/content as tooltip for icon/fab buttons
-    * add label as tooltip if children content is available
-
-    */
-
-    const {
-        badge,
-        className,
-        fabSize,
-        iconName,
-        affirmative,
-        dismissive,
-        disruptive,
-        tooltip: defaultTooltip,
-        children: defaultChildren,
-        ripple: defaultRipple,
-        ...otherProps
-    } = props;
-
-    const semanticConfig = {};
-
-    if (affirmative === true) {
-        semanticConfig.accent = true;
-        semanticConfig.colored = false;
-    }
-
-    if (dismissive === true || disruptive === true) {
-        semanticConfig.accent = false;
-        semanticConfig.colored = false;
-    }
-
-    const classes = classNames(
-        {
-            'mdl-button--icon': typeof iconName !== 'undefined',
-            'mdl-button--danger': disruptive === true,
-            'mdl-badge mdl-badge--overlap': typeof badge !== 'undefined',
-        },
-        className
-    );
-    const ripple = defaultRipple === true; // disable ripple by default
-
-    let tooltip = defaultTooltip;
-    // if tooltip is empty check for default one
-    if (
-        !tooltip
-        && tooltip !== false
-        && typeof canonicalTooltips[iconName] !== 'undefined'
-    ) {
-        tooltip = canonicalTooltips[iconName];
-    }
-
-    let button = '';
-    let buttonContent = defaultChildren;
-    if (iconName) {
-        buttonContent = (
-            // if tooltip already exist send 'false' to prevent adding additional default tooltip in <Icon/>
-            <Icon
-                name={iconName}
-                tooltip={tooltip || tooltip === false ? false : ''}
-                badge={badge || false}
-            />
-        );
-    }
-
-    if (badge && !iconName) {
-        otherProps['data-badge'] = badge;
-    }
-
-    if (fabSize) {
-        button = (
-            <ReactMDLFabButton
-                className={classes}
-                ripple={ripple}
-                mini={fabSize === 'mini'}
-                {...otherProps}
-                {...semanticConfig}
-            >
-                {buttonContent}
-            </ReactMDLFabButton>
-        );
-    } else {
-        button = (
-            <ReactMDLButton
-                className={classes}
-                ripple={ripple}
-                {...otherProps}
-                {...semanticConfig}
-            >
-                {buttonContent}
-            </ReactMDLButton>
-        );
-    }
-
-    if (tooltip && !props.disabled) {
-        button = <Tooltip label={tooltip}>{button}</Tooltip>;
-    }
-
-    return button;
-};
-
-Button.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.node]),
-    /**
-        string (optional): use badge if the (icon) button need to be enhanced by
-        a small badge containing 1 to 3 chars or digits
-    */
-    badge: PropTypes.string,
-    /**
-        string (optional): additional CSS class name
-    */
-    className: PropTypes.string,
-    /**
-        boolean (default: false): button is disabled and cannot get used to trigger an action
-    */
-    disabled: PropTypes.bool,
-    /**
-        string 'mini|large' (optional): use fabSize only if it is a Material Design floating action button (FAB)
-    */
-    fabSize: PropTypes.string,
-    /**
-        string (optional): icon name if it is an Material Design icon button
-
-        We defined some canonical names for icons and their meanings:
-
-        - 'edit': edit data
-        - 'remove': remove data
-        - 'arrow_nextpage': go to next page
-        - 'arrow_prevpage': go to previous page
-        - 'arrow_lastpage': go to last page
-        - 'arrow_firstpage': go to first page
-        - 'arrow_dropdown': open dropdown select
-        - 'expand_more': expand GUI element to show more details
-        - 'expand_less': reduce GUI element to show less details
-        - 'menu_more': open context menu
-        - 'filter': filter data
-        - 'sort': sort data
-        - 'hide': hide (or close/remove) GUI elements
-        - 'access_forbidden': no access to read and write data
-
-        For other symbols and icon names @see https://material.io/icons/
-    */
-    iconName: PropTypes.string,
-    /**
-        boolean (default: false): activate ripple effect on button
-    */
-    ripple: PropTypes.bool,
-    /**
-        React node or boolean (optional): tooltip text, some icons have fallback
-        tooltips, set it to false if you need to prevent them
-    */
-    tooltip: PropTypes.oneOfType([
-        PropTypes.node,
-        PropTypes.bool,
-    ]),
-
-    // internal properties, used by button sub types
-
-    affirmative: PropTypes.bool,
-    dismissive: PropTypes.bool,
-    disruptive: PropTypes.bool,
-};
-
-Button.displayName = 'Button';
-
-export default Button;

package/src/elements/Button/DismissiveButton.jsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import ProgressButton from './ProgressButton';
-
-
-/**
-Use the `<DismissiveButton />` element for all buttons that trigger dismissive actions, e.g. cancelling edit forms.
-For more information read the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons).
-It is possible to combine it with `<Button />` parameters like `disabled`, `raised`, `iconName` and `ripple`.
-
-```js
-import {DismissiveButton} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <DismissiveButton
-                raised={true}
-            >
-                Dismissive action
-            </DismissiveButton>
-        )
-    },
-    // ....
-});
-```
-*/
-
-const DismissiveButton = props => {
-    const { children, ...otherProps } = props;
-    const useProgressButton = typeof otherProps.progress !== 'undefined';
-
-    // remove unused propTypes from button
-    if (!useProgressButton) {
-        delete otherProps.progress;
-    }
-
-    if (__DEBUG__ && typeof otherProps.accent !== 'undefined') {
-        console.warn(
-            'Do not use <DismissiveButton/>  with accent property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.colored !== 'undefined') {
-        console.warn(
-            'Do not use <DismissiveButton/>  with colored property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.affirmative !== 'undefined') {
-        console.warn(
-            'Do not use <DismissiveButton/>  with affirmative property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.disruptive !== 'undefined') {
-        console.warn(
-            'Do not use <DismissiveButton/>  with disruptive property.'
-        ); // eslint-disable-line no-console
-    }
-
-    // render button
-    return useProgressButton ? (
-        <ProgressButton {...otherProps} dismissive>
-            {children}
-        </ProgressButton>
-    ) : (
-        <Button {...otherProps} dismissive>
-            {children}
-        </Button>
-    );
-};
-
-DismissiveButton.displayName = 'DismissiveButton';
-
-export default DismissiveButton;

package/src/elements/Button/DisruptiveButton.jsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import ProgressButton from './ProgressButton';
-
-/**
-Use the `<DisruptiveButton />` element for all buttons that trigger disruptive actions, e.g. confirming "Remove data."
-For more information read the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons).
-It is possible to combine it with `<Button />` parameters like `disabled`, `raised`, `iconName` and `ripple`.
-
-```js
-import {DisruptiveButton} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <DisruptiveButton
-                iconName="remove"
-                tooltip="Remove data"
-            />
-        )
-    },
-    // ....
-});
-```
-*/
-
-const DisruptiveButton = props => {
-    const { children, ...otherProps } = props;
-    const useProgressButton = typeof otherProps.progress !== 'undefined';
-
-    // remove unused propTypes from button
-    if (!useProgressButton) {
-        delete otherProps.progress;
-    }
-
-    if (__DEBUG__ && typeof otherProps.accent !== 'undefined') {
-        console.warn(
-            'Do not use <DisruptiveButton/>  with accent property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.colored !== 'undefined') {
-        console.warn(
-            'Do not use <DisruptiveButton/>  with colored property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.affirmative !== 'undefined') {
-        console.warn(
-            'Do not use <DisruptiveButton/>  with affirmative property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.dismissive !== 'undefined') {
-        console.warn(
-            'Do not use <DisruptiveButton/>  with dismissive property.'
-        ); // eslint-disable-line no-console
-    }
-
-    // render button
-    return useProgressButton ? (
-        <ProgressButton {...otherProps} disruptive>
-            {children}
-        </ProgressButton>
-    ) : (
-        <Button {...otherProps} disruptive>
-            {children}
-        </Button>
-    );
-};
-DisruptiveButton.displayName = 'DisruptiveButton';
-
-export default DisruptiveButton;

package/src/elements/Button/ProgressButton.jsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip from '../Tooltip/Tooltip';
-import Button from './Button';
-import Progressbar from '../Progressbar/Progressbar';
-
-/**
-`<ProgressButton/>` is a special version of the `<Button/>` element that can be used to visualize a running process.
-It is shown as a raised disabled button but this behaviour can be overwritten, using the `raised`
- and `disabled` paramters from the `<Button/>` element.
-
-```js
-import {ProgressButton} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <ProgressButton
-                progress={50}
-                lastUpdate={'August 31st 2017, 9:48:24 am.'}
-                tooltip={'running'}
-                raised={false}
-            >
-                Working!
-            </ProgressButton>
-        )
-    },
-    // ....
-});
-```
-
-You can use `progress` option directly on `<AffirmativeButton/>`, `<DismissiveButton/>`
- and `<DisruptiveButton/>` elements.
-
-*/
-
-const ProgressButton = props => {
-    const {
-        children, tooltip, progress, lastUpdate, ...otherProps
-    } = props;
-    // template rendering
-
-    let progressbar = (
-        <Progressbar
-            appearLocal
-            indeterminate={!progress}
-            progress={progress || 0}
-        />
-    );
-
-    if (typeof tooltip !== 'undefined' && tooltip) {
-        const infoUpdate = lastUpdate ? `${lastUpdate} ` : '';
-        progressbar = (
-            <Tooltip
-                label={
-                    progress
-                        ? `${infoUpdate}${tooltip}: ${progress}%`
-                        : infoUpdate + tooltip
-                }
-            >
-                {progressbar}
-            </Tooltip>
-        );
-    }
-
-    // render button
-    return (
-        <Button {...otherProps} raised disabled>
-            {children}
-            {progressbar}
-        </Button>
-    );
-};
-
-ProgressButton.propTypes = {
-    /**
-     integer (default: 0): progress number 0..100, if not set or 0 then an infinite progress bar is used
-     */
-    progress: PropTypes.number,
-    /**
-     message queue subject (optional): channel subject that are used to update information about progress,
-     if given that the button element listens to it for update objects that include `progressNumber`
-     property with a value between 0 and 100
-     */
-    tooltip: PropTypes.string,
-    /**
-     string (optional): text info that shows information about the last known update on the process
-     */
-    lastUpdate: PropTypes.string,
-};
-
-ProgressButton.displayName = 'ProgressButton';
-
-export default ProgressButton;

package/src/elements/Button/_button.scss

@@ -1,61 +0,0 @@
-/**
- * Copyright 2016 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-button {
-    &.mdl-button--danger {
-        color: to_color($palette-red-800);
-    }
-
-    &.mdl-button--clearance:not(.mdl-button--raised):not([disabled]) {
-
-        &.mdl-button--icon {
-            opacity: 0.61;
-        }
-
-        &:focus, &:hover, &:active {
-            opacity: 1;
-            color: to_color($palette-red-800);
-            background-color: transparent;
-        }
-    }
-
-    &.mdl-badge {
-        overflow: visible;
-    }
-
-    .material-icons {
-        vertical-align: text-bottom;
-
-        &.mdl-badge[data-badge]:after {
-            right: -10px;
-        }
-    }
-
-    &--accent.mdl-badge[data-badge]:after,
-    &--accent .material-icons.mdl-badge[data-badge]:after {
-        border: 1px solid $badge-color;
-    }
-}
-
-.mdl-button--raised {
-    &.mdl-button--danger {
-        background-color: to_color($palette-red-800);
-        color: to_color($palette-red-50);
-    }
-
-    &.mdl-button--clearance:not([disabled]) {
-        &:focus, &:hover, &:active {
-            background-color: $button-primary-color;
-            color: to_color($palette-red-800);
-        }
-    }
-}
-
-.mdl-button--fab {
-    width: $button-fab-size;
-    height: $button-fab-size;
-    min-width: unset;
-}

package/src/elements/Button/index.js

@@ -1,13 +0,0 @@
-import Button from './Button';
-import AffirmativeButton from './AffirmativeButton';
-import DismissiveButton from './DismissiveButton';
-import DisruptiveButton from './DisruptiveButton';
-import ProgressButton from './ProgressButton';
-
-export default {
-    Button,
-    AffirmativeButton,
-    DismissiveButton,
-    DisruptiveButton,
-    ProgressButton,
-};

package/src/elements/Card/Card.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ReactMDLCard from 'react-mdl/lib/Card/Card';
-import ScrollingHOC from '../../hocs/ScrollingHOC';
-
-
-const Card = props => {
-    const {
-        className,
-        stretch,
-        shadow,
-        fixedActions,
-        reducedSize,
-        children,
-        ...otherProps
-    } = props;
-
-    delete otherProps.scrollElementIntoView;
-    delete otherProps.scrollIntoView;
-
-
-    const classes = classNames(
-        {
-            'mdl-card--stretch': stretch === true,
-            'mdl-card--has-fixed-actions': fixedActions === true,
-
-            'mdl-card--reduced': reducedSize === true,
-        },
-        className
-    );
-
-
-    return (
-        <ReactMDLCard
-            className={classes}
-            shadow={shadow > 0 ? shadow - 1 : undefined}
-            {...otherProps}
-        >
-            {children}
-        </ReactMDLCard>
-    );
-};
-// define property types
-Card.propTypes = {
-    className: PropTypes.string,
-    shadow: PropTypes.number,
-    stretch: PropTypes.bool,
-    fixedActions: PropTypes.bool,
-    reducedSize: PropTypes.bool,
-};
-Card.defaultProps = {
-    shadow: 1,
-    stretch: true,
-    fixedActions: false,
-    reducedSize: false,
-};
-
-Card.displayName = 'Card';
-
-export default ScrollingHOC(Card);

package/src/elements/Card/CardActions.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ReactMDLCardActions from 'react-mdl/lib/Card/CardActions';
-
-
-const CardActions = props => {
-    const {
-        children, className, fixed, ...otherProps
-    } = props;
-
-    const classes = classNames(
-        {
-            'mdl-card__actions--fixed': fixed === true,
-        },
-        className
-    );
-    return (
-        <ReactMDLCardActions className={classes} {...otherProps}>
-            {children}
-        </ReactMDLCardActions>
-    );
-};
-// define property types
-CardActions.propTypes = {
-    border: PropTypes.bool,
-    fixed: PropTypes.bool,
-};
-
-CardActions.defaultProps = {
-    border: true,
-    fixed: false,
-};
-
-CardActions.displayName = 'CardActions';
-
-export default CardActions;