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

package/src/elements/Chip/Chip.jsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import basicClassCreator from 'react-mdl/lib/utils/basicClassCreator';
-import _ from 'lodash';
-import ChipVisual from './ChipVisual';
-
-/**
- The are two simple React elements to create Chip and ChipVisual.
-
- ```js
- import {
-    Chip,
-    ChipVisual,
-} from '@eccenca/gui-elements';
-
- class Page extends React.Component {
-    // template rendering
-    render() {
-        return (
-            <div>
-                <Chip onClick={() => console.log('#1 chip clicked')}>
-                    <ChipVisual
-                        image="https://placekitten.com/500/500"
-                    />
-                clickable with image visual
-                </Chip>
-            </div>
-        );
-    }
-}
- ```
- */
-const ChipContact = basicClassCreator(
-    'ChipContact',
-    'mdl-chip__contact',
-    'span'
-);
-const ChipText = basicClassCreator('ChipText', 'mdl-chip__text', 'span');
-const ChipContextActions = basicClassCreator(
-    'ChipContextActions',
-    'mdl-chip__actionsoverlay',
-    'div'
-);
-
-// Chip Component
-const Chip = props => {
-    const {
-        className, onClose, children, contextActions, ...otherProps
-    } = props;
-    const childrenArray = React.Children.toArray(children);
-    const contactIndex = _.findIndex(childrenArray,
-        c => c.type === ChipContact || c.type === ChipVisual);
-    const chipContent = [];
-    delete otherProps.tooltip;
-
-    if (contactIndex >= 0) {
-        chipContent.push(
-            childrenArray[contactIndex],
-            <ChipText key="text">
-                {childrenArray
-                    .slice(0, contactIndex)
-                    .concat(childrenArray.slice(contactIndex + 1))}
-            </ChipText>
-        );
-    } else {
-        chipContent.push(<ChipText key="text">{children}</ChipText>);
-    }
-
-    if (contextActions) {
-        chipContent.push(
-            <ChipContextActions
-                onClick={
-                    e => { e.stopPropagation(); e.preventDefault(); }
-                }
-                key="contextactions">
-                {contextActions}
-            </ChipContextActions>
-        );
-    }
-
-    if (__DEBUG__) {
-        if (onClose) {
-            console.warn(
-                'At the moment our chips do not allow for a chip action (like close).'
-                    + 'If you think, you need one please start a discussion around that topic.'
-            );
-            // chipContent.push(
-            //     <button key="btn" type="button" className="mdl-chip__action" onClick={onClose}>
-            //         <Icon name="cancel" />
-            //     </button>
-            // );
-        }
-    }
-
-    let chipType = otherProps.onClick ? 'button' : 'span';
-    chipType = otherProps.href ? 'a' : chipType;
-
-    return React.createElement(
-        chipType,
-        {
-            className: cx(
-                'mdl-chip',
-                {
-                    'mdl-chip--contact': contactIndex > -1,
-                    'mdl-chip--deletable': !!onClose,
-                    'mdl-chip--hasoverlay': !!contextActions,
-                },
-                className
-            ),
-            ...otherProps,
-        },
-        chipContent
-    );
-};
-
-Chip.propTypes = {
-    children: PropTypes.node,
-    /**
-     additional CSS class name
-     */
-    className: PropTypes.string,
-    /**
-     Click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     Close handler
-     */
-    onClose: PropTypes.func,
-    /**
-     Chip is rendered as HTML link anchor
-     */
-    href: PropTypes.string,
-    /**
-     Chip offers context buttons or menu, display on hover
-     */
-    contextActions: PropTypes.node,
-};
-
-export default Chip;

package/src/elements/Chip/ChipVisual.jsx

@@ -1,88 +0,0 @@
-import _ from 'lodash';
-import cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import basicClassCreator from 'react-mdl/lib/utils/basicClassCreator';
-
-const ChipContact = basicClassCreator(
-    'ChipContact',
-    'mdl-chip__contact',
-    'span'
-);
-// ChipVisual Component
-const ChipVisual = props => {
-    const {
-        image,
-        label,
-        className,
-        bgColor,
-        textColor,
-        children,
-    } = props;
-
-
-    if (image) {
-        return (
-            <ChipContact style={{ background: `url("${image}") 0 0 / cover` }} />
-        );
-    }
-
-    if (__DEBUG__) {
-        if (
-            label !== false
-            && (!_.isString(label) || label.length === 0 || label.length > 2)
-        ) {
-            console.warn(
-                `A ChipVisual label should be a string with a length of 1 or 2, and not "${label}"`
-            );
-        }
-    }
-
-    const classColors = {};
-    classColors[`mdl-color--${bgColor}`] = bgColor;
-    classColors[`mdl-color-text--${textColor}`] = textColor;
-
-    return (
-        <ChipContact className={cx(classColors, className)}>
-            {label || children}
-        </ChipContact>
-    );
-};
-
-ChipVisual.propTypes = {
-    /**
-     additional CSS class name
-     */
-    className: PropTypes.string,
-    /**
-     Image prop
-     */
-    image: PropTypes.string,
-    /**
-     label name prop
-     */
-    label: PropTypes.string,
-    /**
-     additional css color prop
-     */
-    bgColor: PropTypes.string,
-    /**
-     additional css text color prop
-     */
-    textColor: PropTypes.string,
-    /**
-     Chip children prop
-     */
-    children: PropTypes.object,
-};
-
-ChipVisual.defaultProps = {
-    image: '',
-    label: '',
-    className: '',
-    bgColor: '',
-    textColor: '',
-};
-
-
-export default ChipVisual;

package/src/elements/Chip/_chip.scss

@@ -1,82 +0,0 @@
-/**
- * Copyright 2017 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-chip {
-    margin-right: $chips-margin-vertical;
-    font-weight: inherit;
-    max-width: calc(100% - #{$chips-margin-vertical});
-}
-
-.mdl-chip__text {
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    .mdl-chip__contact + & {
-        max-width: calc(101% - #{$chip-height} - #{$chips-margin-vertical});
-    }
-}
-
-.mdl-chip__contact {
-    background-color: $chip-bg-color;
-    margin-right: $chips-margin-vertical;
-
-    .material-icons {
-        line-height: $chip-height;
-        width: $chip-height;
-        height: $chip-height;
-    }
-
-    img {
-        height: auto;
-        width: auto;
-        max-height: 100%;
-        max-width: 100%;
-        vertical-align: middle;
-    }
-}
-
-a.mdl-chip,
-button.mdl-chip {
-    cursor: pointer;
-
-    &:hover {
-        @extend .mdl-chip:focus;
-    }
-}
-
-.mdl-chip--hasoverlay {
-    position: relative;
-}
-
-.mdl-chip__actionsoverlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: $chip-height;
-    max-width: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    background-color: rgba(to_color($color-white), 0.61);
-    border-radius: $chip-height/2;
-    opacity: 0;
-    overflow: hidden;
-    transition: max-width 0.5s $animation-curve-default,
-        opacity 0.5s $animation-curve-default,
-        background-color 0.5s $animation-curve-default;
-
-    &:hover {
-        background-color: rgba(to_color($color-white), 1);
-    }
-
-    .mdl-chip:hover &,
-    .mdl-chip:focus & {
-        opacity: 1;
-        max-width: 100%;
-        overflow: visible;
-    }
-}

package/src/elements/Chip/index.js

@@ -1,7 +0,0 @@
-import Chip from './Chip';
-import ChipVisual from './ChipVisual';
-
-export default {
-    Chip,
-    ChipVisual,
-};

package/src/elements/ContextMenu/ContextMenu.jsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import ReactMDLMenu, { MenuItem } from 'react-mdl/lib/Menu';
-import Button from '../Button/Button';
-
-/**
- * This component provides a context menu
- */
-
-const ContextMenu = props => {
-    const {
-        children, iconName, tooltip, target, ...otherProps
-    } = props;
-
-    const menuItemsCopy = Array.isArray(children) ? children : [children];
-    const menuId = target || _.uniqueId('app-contextmenu-');
-
-    const menuItems = _.map(menuItemsCopy, (obj, idx) => {
-        if (obj) {
-            if (_.has(obj, 'props.className') && obj.key) {
-                return obj;
-            }
-
-            const objExtension = {};
-
-                // add className if none exist
-            if (
-                !_.has(obj, 'props.className')
-                    && _.has(obj, 'props.children')
-            ) {
-                objExtension.className = `item-${_.kebabCase(
-                    obj.props.children
-                )}`;
-            }
-
-                // add key
-            if (!obj.key) {
-                objExtension.key = `MenuItem.${idx}`;
-            }
-
-            return Object.assign(
-                {},
-                obj,
-                objExtension.key ? { key: objExtension.key } : { key: obj.key },
-                objExtension.className
-                    ? {
-                        props: Object.assign({}, obj.props, {
-                            className: objExtension.className,
-                        }),
-                    }
-                    : { props: obj.props }
-            );
-        }
-        return null;
-    });
-
-    const menulist = menuItems.length > 0 ? (
-        <ReactMDLMenu target={menuId} {...otherProps}>
-            {menuItems}
-        </ReactMDLMenu>
-    ) : (
-        false
-    );
-
-    return menulist ? (
-        <div className="ege-contextmenu__wrapper">
-            <Button
-                iconName={iconName || 'menu_more'}
-                id={menuId}
-                tooltip={false}
-            />
-            {menulist}
-        </div>
-    ) : (
-        false
-    );
-};
-
-ContextMenu.propTypes = {
-    align: PropTypes.string,
-    valign: PropTypes.string,
-    className: PropTypes.string,
-    iconName: PropTypes.string,
-    ripple: PropTypes.bool,
-    target: PropTypes.string,
-    tooltip: PropTypes.string,
-};
-
-ContextMenu.defaultProps = {
-    align: 'right',
-    valign: 'bottom',
-    ripple: false,
-    tooltip: 'open menu',
-    target: '',
-    iconName: '',
-};
-
-ContextMenu.displayName = 'ContextMenu';
-
-export default { ContextMenu, MenuItem };

package/src/elements/ContextMenu/_contextmenu.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-menu {
-    /*
-    - MDL javascript injects clip rule for unknown reasons
-    - we remove it here because clip introduces a rendering bug in our app and
-      the attribute is deprecated in spec anyway
-    */
-    clip: auto !important;
-}
-
-.mdl-menu__item {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.ege-contextmenu__wrapper {
-  position: relative;
-}

package/src/elements/DateField/DateField.jsx

@@ -1,178 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Datetime from 'react-datetime';
-import _ from 'lodash';
-import moment from 'moment';
-import TextField from '../TextField/TextField';
-import ScrollingHOC from '../../hocs/ScrollingHOC';
-
-
-const DateField = props => {
-    const {
-        // outer props
-        label,
-        value,
-        onChange,
-        className,
-        // inner props
-        placeholder,
-        disabled,
-        inputClassName,
-        // rest outer props
-        ...otherProps
-    } = props;
-
-    delete otherProps.initialFormat;
-    delete otherProps.dateFormat;
-    delete otherProps.timeFormat;
-    delete otherProps.name;
-    delete otherProps.scrollElementIntoView;
-    delete otherProps.scrollIntoView;
-
-    // construct the date/time for moment
-    const getFormats = () => {
-        const { dateFormat, timeFormat } = props;
-        // set format output
-        const fullFormat = [];
-        let date = false;
-        let time = false;
-
-        if (dateFormat) {
-            date = _.isString(dateFormat) ? dateFormat : 'YYYY-MM-DD';
-            fullFormat.push(date);
-        }
-
-        if (timeFormat) {
-            time = _.isString(timeFormat) ? timeFormat : 'HH:mm:ss';
-            fullFormat.push(time);
-        }
-
-        if (_.isEmpty(fullFormat)) {
-            throw new Error(
-                'Datefield: Please define dateFormat, timeFormat or both.'
-            );
-        }
-        return {
-            date,
-            time,
-            full: fullFormat.join(' '),
-        };
-    };
-
-    const convertToMoment = (value, format) => {
-        if (moment.isMoment(value)) {
-            return value;
-        }
-        return moment(value, format, true);
-    };
-
-    const extendedOnChange = ({ onChange, value }) => {
-        const format = getFormats().full;
-
-        const newValue = convertToMoment(value, format);
-        const oldValue = convertToMoment(props.value, format);
-
-        // only return value if value is a new one
-        if (!oldValue.isSame(newValue) && _.isFunction(onChange)) {
-            onChange({
-                value: newValue,
-                rawValue: newValue,
-                isValid: newValue.isValid(),
-                name: props.name,
-            });
-        }
-    };
-
-    if (!moment.isMoment(value)) {
-        console.warn(
-            // eslint-disable-next-line max-len
-            'Datefield: Please provide the value as a Moment Object, otherwise it could result in false value conversions'
-        );
-        extendedOnChange({ onChange, value });
-    }
-
-    const textFieldOnChange = ({ rawValue }) => {
-        if (
-            rawValue !== props.value
-            && _.isFunction(props.onChange)
-        ) {
-            extendedOnChange({
-                onChange: props.onChange,
-                value: rawValue,
-            });
-        }
-    };
-
-    const renderInput = props => {
-        return (
-            <TextField
-                {...props}
-                stretch={props.stretch}
-                error={props.error}
-                onChange={textFieldOnChange}
-            />
-        );
-    };
-
-    const inputProps = {
-        label: label || placeholder,
-        disabled,
-        className: className || inputClassName,
-    };
-
-    const formats = getFormats();
-
-    // try to convert value to moment object
-    const inputValue = convertToMoment(value, formats.full);
-
-    return (
-        <Datetime
-            value={
-                inputValue.isValid()
-                    ? inputValue
-                    : inputValue.creationData().input
-            }
-            onChange={newValue => {
-                extendedOnChange({ onChange, value: newValue });
-            }}
-            dateFormat={formats.date}
-            timeFormat={formats.time}
-            strictParsing
-            inputProps={inputProps}
-            renderInput={renderInput}
-            {...otherProps}
-        />
-    );
-};
-
-DateField.propTypes = {
-    label: PropTypes.string, // input label as string
-    value: PropTypes.oneOfType([
-        PropTypes.string, // date value as string
-        PropTypes.object, // can be a moment object as well
-    ]),
-    onChange: PropTypes.func.isRequired, // on change function
-    timeFormat: PropTypes.oneOfType([
-        PropTypes.string, // time format as string
-        PropTypes.bool, // time select can be disabled
-    ]),
-    dateFormat: PropTypes.oneOfType([
-        PropTypes.string, // date format as string
-        PropTypes.bool, // date select can be disabled
-    ]),
-    placeholder: PropTypes.string, // text shown on empty input element
-    disabled: PropTypes.bool, // prevent change of input element
-    inputClassName: PropTypes.string, // class name of input element
-    input: PropTypes.bool, // show/hide input element
-    closeOnSelect: PropTypes.bool, // auto close picker after date select
-};
-
-DateField.defaultProps = {
-    timeFormat: false,
-    dateFormat: 'YYYY-MM-DD',
-};
-
-
-DateField.displayName = 'DateField';
-
-export default ScrollingHOC(DateField);

package/src/elements/DateField/DateTimefield.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import Datefield from './DateField';
-
-
-/**
- * This Component creates a date and time input field based on DateField.
- */
-
-const DateTimefield = props => (
-    <Datefield {...props} />
-);
-
-DateTimefield.defaultProps = {
-    timeFormat: 'HH:mm',
-    dateFormat: 'DD-MM-YYYY',
-};
-
-DateTimefield.displayName = 'DateTimefield';
-
-export default DateTimefield;