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

package/src/hocs/ScrollingHOC.js

@@ -1,122 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import scrollIntoViewExternal from 'scroll-into-view';
-import _ from 'lodash';
-
-export default function ScrollingHOC(WrappedComponent) {
-    return class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.scrollIntoView = this.scrollIntoView.bind(this);
-            this.scrollElementIntoView = this.scrollElementIntoView.bind(this);
-        }
-
-        scrollIntoView(options = {}) {
-            this.scrollElementIntoView(ReactDOM.findDOMNode(this), options);
-
-            /*
-            options {
-                animationTime: 500, // (optional) integer, time in milliseconds
-                topOffset: 0, // (optional) integer, pixels to offset top alignment
-                callbackFinished: function(result) {}, // (optional) function, result parameter is currently 'cancelled' or 'completed'
-            }
-            */
-        }
-
-        scrollElementIntoView(element, options = {}) {
-            let domElement = false;
-            if (_.isElement(element)) {
-                // is already a DOM element
-                domElement = element;
-                if (__DEBUG__) {
-                    console.log(
-                        `scrolling DOM element with a height of ${
-                            domElement.scrollHeight
-                        }`
-                    );
-                }
-            } else if (_.get(element, 'props', false) !== false) {
-                // await a mounted react element or component
-                // TODO: improve test, 'props' is only a weak check, findDOMNode still can fail
-                domElement = ReactDOM.findDOMNode(element);
-                if (__DEBUG__) {
-                    console.log(
-                        `scrolling react element with a height of ${
-                            domElement.scrollHeight
-                        }`
-                    );
-                }
-            }
-
-            if (!domElement) {
-                if (__DEBUG__) {
-                    console.warn(
-                        'Cannot scroll element that is not part of the DOM.'
-                    );
-                }
-                return false;
-            }
-
-            return scrollIntoViewExternal(
-                domElement,
-                {
-                    time: _.get(options, 'animationTime', 500),
-                    align: {
-                        top: 0, // align it to the top, or user cannot see top part if element is higher than the viewport
-                        topOffset: _.get(options, 'topOffset', 0),
-                    },
-                    /*
-                        We replace the standard isScrollable with a function which also checks
-                        overflowX and overflowY, as only checking overflow is not enough in IE/Edge,
-                        because if the following is set:
-                        .foo {
-                            overflow-x: hidden;
-                            overflow-y: auto;
-                        }
-                        `getComputedStyle(element).overflow` will yield `'hidden'`
-                     */
-                    isScrollable(el) {
-                        if (el === window) {
-                            return true;
-                        }
-
-                        if (
-                            el.scrollHeight !== el.clientHeight
-                            || el.scrollWidth !== el.clientWidth
-                        ) {
-                            const css = getComputedStyle(el);
-
-                            return (
-                                css
-                                && (css.overflow !== 'hidden'
-                                    || (_.get(options, 'scrollY', true)
-                                        && css.overflowY !== 'hidden')
-                                    || (_.get(options, 'scrollX', true)
-                                        && css.overflowX !== 'hidden'))
-                            );
-                        }
-                        return false;
-                    },
-                },
-                result => {
-                    if (__DEBUG__) {
-                        console.log(
-                            `element scrolling ${result}, now at ${
-                                domElement.getBoundingClientRect().top
-                            }`
-                        );
-                    }
-
-                    if (_.isFunction(options.callbackFinished)) {
-                        options.callbackFinished(result);
-                    }
-                }
-            );
-        }
-
-        render() {
-            // eslint-disable-next-line max-len
-            return (<WrappedComponent scrollElementIntoView={this.scrollElementIntoView} scrollIntoView={this.scrollIntoView} {...this.props} />);
-        }
-    };
-}

package/src/main.scss

@@ -1,83 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- *
- * Create Stylesheet using Node imports via Webpack's require method.
- * We need to repeat code because (at least libsass) test @import statements
- * before conditionals and Sass itself do not allow variables in direct imports.
- */
-
-// -- Configuration ------------------------------------------------------------
-
-@import "./configuration.default"; // gui elements configuration
-
-// -- Eccenca Material Design Lite -----------------------------------------------------
-
-// Resets and dependencies
-@import "~@eccenca/material-design-lite/src/resets/resets";
-// Components
-@import "~@eccenca/material-design-lite/src/typography/typography";
-@import "~@eccenca/material-design-lite/src/palette/palette";
-@import "~@eccenca/material-design-lite/src/ripple/ripple";
-@import "~@eccenca/material-design-lite/src/animation/animation";
-@import "~@eccenca/material-design-lite/src/badge/badge";
-@import "~@eccenca/material-design-lite/src/button/button";
-@import "~@eccenca/material-design-lite/src/card/card";
-@import "~@eccenca/material-design-lite/src/checkbox/checkbox";
-@import "~@eccenca/material-design-lite/src/chip/chip";
-// @import "~@eccenca/material-design-lite/src/data-table/data-table";
-// @import "~@eccenca/material-design-lite/src/dialog/dialog";
-@import "~@eccenca/material-design-lite/src/footer/mega_footer";
-@import "~@eccenca/material-design-lite/src/footer/mini_footer";
-@import "~@eccenca/material-design-lite/src/icon-toggle/icon-toggle";
-@import "~@eccenca/material-design-lite/src/list/list";
-@import "~@eccenca/material-design-lite/src/menu/menu";
-@import "~@eccenca/material-design-lite/src/progress/progress";
-@import "~@eccenca/material-design-lite/src/layout/layout";
-@import "~@eccenca/material-design-lite/src/radio/radio";
-@import "~@eccenca/material-design-lite/src/slider/slider";
-@import "~@eccenca/material-design-lite/src/snackbar/snackbar";
-@import "~@eccenca/material-design-lite/src/spinner/spinner";
-@import "~@eccenca/material-design-lite/src/switch/switch";
-@import "~@eccenca/material-design-lite/src/tabs/tabs";
-@import "~@eccenca/material-design-lite/src/textfield/textfield";
-@import "~@eccenca/material-design-lite/src/tooltip/tooltip";
-@import "~@eccenca/material-design-lite/src/shadow/shadow";
-@import "~@eccenca/material-design-lite/src/grid/grid";
-
-// -- Own MDL & GUI extensions -------------------------------------------------
-
-@import "./elements/Alert/alert";
-@import "./elements/Button/button";
-@import "./elements/Breadcrumbs/breadcrumbs";
-@import "./elements/Card/card";
-@import "./elements/Checkbox/checkbox";
-@import "./elements/Chip/chip";
-@import "./elements/ContextMenu/contextmenu";
-@import "./elements/DateField/datefield";
-@import "./elements/Dialog/dialog";
-@import "./elements/Grid/grid";
-@import "./elements/Footer/footer";
-@import "./elements/Layout/layout";
-@import "./elements/NotAvailable/notavailable";
-@import "./elements/Radio/radio";
-@import "./elements/Pagination/pagination";
-@import "./elements/Progressbar/progressbar";
-@import "./elements/SelectBox/selectbox";
-@import "./elements/AutoCompleteBox/autocomplete";
-@import "./elements/Spinner/spinner";
-@import "./elements/Table/table";
-@import "./elements/TextField/textfield";
-@import "./elements/Tooltip/tooltip";
-
-// -- Changes ------------------------------------------------------------------
-
-@import "./scss/adjustments";
-@import "./scss/patches";
-
-// -- Fonts --------------------------------------------------------------------
-
-$font_root: "~@eccenca/gui-elements/dist/fonts" !default;
-@import "./scss/roboto";
-@import "./scss/iconfont";

package/src/scss/_adjustments.scss

@@ -1,16 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- *
- * Adjustments that we cannot do by configuration.
- */
-
-html, body {
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-}
-
-html {
-    background-color: to_color($ecc-color-application-background);
-    color: to_color($ecc-color-application-text);
-}

package/src/scss/_helpers.scss

@@ -1,29 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- *
- * Configuration used for MDL and beyond.
- */
-
-// -- Color helpers ------------------------------------------------------------
-
-@import "~sassyjson/stylesheets/decode/decode";
-
-@function to_color($var) {
-    @if type-of($var) == "color" {
-        @return $var;
-    }
-
-    @if (
-        type-of($var) == 'string' and
-        str-slice($var, 1, 3) != 'rgb' and
-        str-slice($var, 1, 3) != 'hsl' and
-        str-slice($var, 1, 1) != '#'
-    ) {
-        @return _color(unquote('rgb(#{$var})'));
-    }
-    @else {
-        @return _color($var);
-    }
-}

package/src/scss/_iconfont.scss

@@ -1,35 +0,0 @@
-
-$font_root: "fonts" !default;
-
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url('#{$font_root}/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
-       url('#{$font_root}/iconfont/MaterialIcons-Regular.woff') format('woff');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: $typo-icon-font-size;  /* Preferred icon size */
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}

package/src/scss/_patches.scss

@@ -1,19 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- *
- * Other patches not aligned to application layout and MDL.
- */
-
-::-webkit-scrollbar {
-  -webkit-appearance: none;
-  width: 6px;
-}
-::-webkit-scrollbar:horizontal {
-  height: 6px;
-}
-::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: grey;
-}

package/src/scss/_roboto.scss

@@ -1,30 +0,0 @@
-$font_root: "fonts" !default;
-
-@mixin fontdef($font_type:"Regular", $font_weight:400, $font_style: normal) {
-    @font-face {
-        font-family: Roboto;
-        src: url('#{$font_root}/roboto/#{$font_type}/Roboto-#{$font_type}.woff2') format('woff2'),
-             url('#{$font_root}/roboto/#{$font_type}/Roboto-#{$font_type}.woff') format('woff');
-        font-weight: $font_weight;
-        font-style: $font_style;
-    }
-}
-
-@include fontdef("ThinItalic", 100, italic);
-@include fontdef("Thin", 100, normal);
-
-@include fontdef("LightItalic", 300, italic);
-@include fontdef("Light", 300, normal);
-
-@include fontdef("Regular", 400, normal);
-@include fontdef("Regular", normal, normal);
-@include fontdef("Italic", 400, italic);
-@include fontdef("Italic", normal, italic);
-
-@include fontdef("MediumItalic", 500, italic);
-@include fontdef("Medium", 500, normal);
-
-@include fontdef("BoldItalic", 700, italic);
-@include fontdef("BoldItalic", bold, italic);
-@include fontdef("Bold", 700, normal);
-@include fontdef("Bold", bold, normal);

package/src/scss/main.build-css.scss

@@ -1,4 +0,0 @@
-
-$font_root: "./fonts";
-$image_path: "./images";
-@import "../main";

package/src/utils/classnameSeperator.js

@@ -1,10 +0,0 @@
-import _ from 'lodash';
-
-// check if several classnames are used and try to replace them with given property list
-const classnameSeperator = (classname, propObject) =>
-    _.map(
-        _.split(classname, ' '),
-        prop => ` ${_.get(propObject, [prop], prop)}`
-    ).join(' ');
-
-export default classnameSeperator;

package/src/utils/extendedOnChangeBoolean.jsx

@@ -1,14 +0,0 @@
-import _ from 'lodash';
-
-const extendedOnChangeBoolean = (onChangeFn, event) => {
-    if (_.isFunction(onChangeFn)) {
-        onChangeFn({
-            event,
-            name: event.target.name,
-            value: event.target.checked,
-            rawValue: event.target.value,
-        });
-    }
-};
-
-export default extendedOnChangeBoolean;

package/src/utils/uniqueId.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-
-/**
- *
- * Adds unique id as prop to a React Component
- *
- * @example
- * //this.props.uniqueId is undefined
- * Foo = React.createClass({})
- *
- * //this.props.uniqueId is defined
- * FooWithUniqueId = uniqueId(Foo, {prefix: 'yep', targetProp: 'uniqueId'})
- *
- * @param {React.Component} WrappedComponent which should be extended with a unique Id
- * @param {String} [prefix=''] prefix for the generated unique id
- * @param {String} [targetProp='id'] prop which contains the generated unique id
- * @returns {uniqueIdComponent} Decorated WrappedComponent with id prop
- */
-const uniqueId = (WrappedComponent, { prefix = '', targetProp = 'id' }) => {
-    class uniqueIdComponent extends React.Component {
-        id = {};
-
-        componentWillMount() {
-            _.set(this.id, targetProp, _.uniqueId(prefix));
-        }
-
-        render() {
-            return <WrappedComponent {...this.props} {...this.id} />;
-        }
-    }
-
-    return uniqueIdComponent;
-};
-
-export default uniqueId;

package/style/test.scss

@@ -1,30 +0,0 @@
-
-$font_root: "../dist/fonts";
-@import "../src/main";
-
-.mdl-layout__content {
-    padding: 14px 40px;
-}
-
-.ecc-application__workspace {
-    padding: 2rem;
-}
-
-.uitest-highred {
-    height: 111vh;
-}
-
-.uitest-table__contextmenu {
-}
-
-.uitest-divmargin {
-    margin-bottom: 10px;
-}
-
-.uitest-scrolling__cardcontent {
-    height: 100px;
-}
-
-.uitest-longcard {
-    height: 120vh
-}