@shopgate/pwa-ui-material 7.30.0-alpha.7 → 7.30.0-alpha.8

package/SnackBar/index.js

@@ -1,33 +1,168 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{config}from'react-spring';import{Spring}from'react-spring/renderprops.cjs';import Ellipsis from'@shopgate/pwa-common/components/Ellipsis';import styles from"./style";var defaultToast={};/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { config } from 'react-spring';
+import { Spring } from 'react-spring/renderprops.cjs';
+import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
+import styles from "./style";
+const defaultToast = {};
+
+/**
  * The SnackBar component.
- */var SnackBar=/*#__PURE__*/function(_Component){/**
+ */
+class SnackBar extends Component {
+  /**
    * @param {Object} props The component props.
-   */function SnackBar(props){var _this2;_classCallCheck(this,SnackBar);_this2=_callSuper(this,SnackBar,[props]);_defineProperty(_this2,"timer",null);_defineProperty(_this2,"handleAction",function(){clearTimeout(_this2.timer);_this2.props.toasts[0].action();_this2.hide();});_defineProperty(_this2,"handleEntered",function(){_this2.timer=setTimeout(_this2.hide,_this2.props.toasts[0].duration||2500);});_defineProperty(_this2,"handleRest",function(){if(_this2.state.visible){_this2.handleEntered();return;}_this2.props.removeToast();});_defineProperty(_this2,"hide",function(){_this2.setState({visible:false});});/**
-   * Calculates the required amount of rows for the snack bar.
-   * @param {string} message The snack bar message.
-   * @param {string} actionLabel The snack bar action label.
-   * @return {number}
-   */_defineProperty(_this2,"calcRows",function(message,actionLabel){/**
-     * Calculates the amount of rows for a passed text.
-     * @param {string} text The input text.
+   */
+  constructor(props) {
+    super(props);
+    this.timer = null;
+    this.handleAction = () => {
+      clearTimeout(this.timer);
+      this.props.toasts[0].action();
+      this.hide();
+    };
+    this.handleEntered = () => {
+      this.timer = setTimeout(this.hide, this.props.toasts[0].duration || 2500);
+    };
+    this.handleRest = () => {
+      if (this.state.visible) {
+        this.handleEntered();
+        return;
+      }
+      this.props.removeToast();
+    };
+    this.hide = () => {
+      this.setState({
+        visible: false
+      });
+    };
+    /**
+     * Calculates the required amount of rows for the snack bar.
+     * @param {string} message The snack bar message.
+     * @param {string} actionLabel The snack bar action label.
      * @return {number}
-     */var calc=function calc(text){return Math.max(2,Math.ceil(text.length/40));};/**
-     * First calculate the required amount of rows for the message. Then append the action label
-     * once per line and calculate the rows again. Since the action label occupies an own column,
-     * we'll get an approximated number for the required rows.
-     */return calc("".concat(message).concat(actionLabel.repeat(calc(message))));});_this2.state={visible:true};return _this2;}/**
+     */
+    this.calcRows = (message, actionLabel) => {
+      /**
+       * Calculates the amount of rows for a passed text.
+       * @param {string} text The input text.
+       * @return {number}
+       */
+      const calc = text => Math.max(2, Math.ceil(text.length / 40));
+      /**
+       * First calculate the required amount of rows for the message. Then append the action label
+       * once per line and calculate the rows again. Since the action label occupies an own column,
+       * we'll get an approximated number for the required rows.
+       */
+      return calc(`${message}${actionLabel.repeat(calc(message))}`);
+    };
+    this.state = {
+      visible: true
+    };
+  }
+
+  /**
    * @param {Object} nextProps The next component props.
-   */_inherits(SnackBar,_Component);return _createClass(SnackBar,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var hasToast=nextProps.toasts.length>0;this.setState({visible:hasToast});}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const hasToast = nextProps.toasts.length > 0;
+    this.setState({
+      visible: hasToast
+    });
+  }
+
+  /**
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next component state.
    * @returns {boolean}
-   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){return this.state.visible!==nextState.visible;}},{key:"snack",get:/**
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.visible !== nextState.visible;
+  }
+  /**
    * Returns the first snack from the state.
    * @returns {Object}
-   */function get(){var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;var snack=this.props.toasts.length?this.props.toasts[0]:defaultToast;return _extends({},snack,{message:__(snack.message||'',snack.messageParams||{}),actionLabel:__(snack.actionLabel||'')});}},{key:"render",value:/**
+   */
+  get snack() {
+    const {
+      __
+    } = this.context.i18n();
+    const snack = this.props.toasts.length ? this.props.toasts[0] : defaultToast;
+    return {
+      ...snack,
+      message: __(snack.message || '', snack.messageParams || {}),
+      actionLabel: __(snack.actionLabel || '')
+    };
+  }
+  /**
    * @returns {JSX}
-   */function render(){var _this3=this;var visible=this.state.visible;var _this$snack=this.snack,_this$snack$action=_this$snack.action,action=_this$snack$action===void 0?null:_this$snack$action,_this$snack$actionLab=_this$snack.actionLabel,actionLabel=_this$snack$actionLab===void 0?null:_this$snack$actionLab,_this$snack$message=_this$snack.message,message=_this$snack$message===void 0?null:_this$snack$message;// Action exits without actionLabel. Handle the whole box
-var boxProps=_extends({},action&&!actionLabel&&{onClick:this.handleAction});// Calculate the required amount of rows and the height of the snack bar.
-var rows=this.calcRows(message,actionLabel);var snackBarHeight=40+rows*20;return React.createElement("div",{className:"".concat(styles.container," ui-material__snack-bar"),style:{'--snack-bar-height':"".concat(snackBarHeight,"px")}},React.createElement(Spring,{from:{top:snackBarHeight},to:{top:0},config:config.stiff,reverse:!visible,force:true,onRest:this.handleRest},function(props){return(// eslint-disable-next-line max-len
-// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-React.createElement("div",{className:styles.wrapper,style:props,"data-footer-inset-update-ignore":"true",onClick:_this3.hide},React.createElement("div",_extends({className:styles.box},boxProps),React.createElement(Ellipsis,{rows:rows},React.createElement("span",{className:styles.label,"aria-live":"assertive",role:"status"},message)),action&&actionLabel&&React.createElement("button",{className:styles.button,onClick:_this3.handleAction,type:"button","aria-hidden":true},actionLabel))));}));}}]);}(Component);_defineProperty(SnackBar,"defaultProps",{toasts:null});_defineProperty(SnackBar,"contextTypes",{i18n:PropTypes.func});export default SnackBar;
+   */
+  render() {
+    const {
+      visible
+    } = this.state;
+    const {
+      action = null,
+      actionLabel = null,
+      message = null
+    } = this.snack;
+
+    // Action exits without actionLabel. Handle the whole box
+    const boxProps = {
+      ...(action && !actionLabel && {
+        onClick: this.handleAction
+      })
+    };
+
+    // Calculate the required amount of rows and the height of the snack bar.
+    const rows = this.calcRows(message, actionLabel);
+    const snackBarHeight = 40 + rows * 20;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${styles.container} ui-material__snack-bar`,
+      style: {
+        '--snack-bar-height': `${snackBarHeight}px`
+      }
+    }, /*#__PURE__*/React.createElement(Spring, {
+      from: {
+        top: snackBarHeight
+      },
+      to: {
+        top: 0
+      },
+      config: config.stiff,
+      reverse: !visible,
+      force: true,
+      onRest: this.handleRest
+    }, props =>
+    /*#__PURE__*/
+    // eslint-disable-next-line max-len
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      className: styles.wrapper,
+      style: props,
+      "data-footer-inset-update-ignore": "true",
+      onClick: this.hide
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      className: styles.box
+    }, boxProps), /*#__PURE__*/React.createElement(Ellipsis, {
+      rows: rows
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label,
+      "aria-live": "assertive",
+      role: "status"
+    }, message)), action && actionLabel && /*#__PURE__*/React.createElement("button", {
+      className: styles.button,
+      onClick: this.handleAction,
+      type: "button",
+      "aria-hidden": true
+    }, actionLabel)))));
+  }
+}
+SnackBar.defaultProps = {
+  toasts: null
+};
+SnackBar.contextTypes = {
+  i18n: PropTypes.func
+};
+export default SnackBar;

package/SnackBar/style.js

@@ -1,2 +1,64 @@
-import{css}from'glamor';import Color from'color';import{themeColors,themeShadows}from'@shopgate/pwa-common/helpers/config';var backgroundColor=themeColors.lightDark;var buttonColor=themeColors.accent;var buttonColorContrast=Color(buttonColor).contrast(Color(backgroundColor));// Button color can be anything. Fall back to white if accent is too dark.
-var safeButtonColor=buttonColorContrast>4?buttonColor:themeColors.light;var container=css({position:'fixed',height:'var(--snack-bar-height, 80px)',bottom:'max(var(--footer-height), var(--safe-area-inset-bottom))',transition:'bottom 0.3s ease',overflow:'hidden',zIndex:6,width:'100%'});var wrapper=css({top:'var(--snack-bar-height, 80px)',display:'flex',justifyContent:'center',left:0,position:'absolute',width:'100%',zIndex:6});var box=css({alignItems:'center',background:backgroundColor,borderRadius:3,boxShadow:themeShadows.toast,color:themeColors.light,display:'flex',fontSize:'0.875rem',justifyContent:'space-between',letterSpacing:0.5,margin:16,maxWidth:344,minHeight:48,padding:'6px 16px',width:'100%'});var label=css({lineHeight:1.4,margin:'6px 0',overflow:'hidden'}).toString();var button=css({color:safeButtonColor,fontWeight:500,height:36,letterSpacing:'inherit',margin:'0 -8px 0 8px',outline:0,padding:'0 8px',textTransform:'uppercase'});export default{container:container,wrapper:wrapper,box:box,label:label,button:button};
+import { css } from 'glamor';
+import Color from 'color';
+import { themeColors, themeShadows } from '@shopgate/pwa-common/helpers/config';
+const backgroundColor = themeColors.lightDark;
+const buttonColor = themeColors.accent;
+const buttonColorContrast = Color(buttonColor).contrast(Color(backgroundColor));
+// Button color can be anything. Fall back to white if accent is too dark.
+const safeButtonColor = buttonColorContrast > 4 ? buttonColor : themeColors.light;
+const container = css({
+  position: 'fixed',
+  height: 'var(--snack-bar-height, 80px)',
+  bottom: 'max(var(--footer-height), var(--safe-area-inset-bottom))',
+  transition: 'bottom 0.3s ease',
+  overflow: 'hidden',
+  zIndex: 6,
+  width: '100%'
+});
+const wrapper = css({
+  top: 'var(--snack-bar-height, 80px)',
+  display: 'flex',
+  justifyContent: 'center',
+  left: 0,
+  position: 'absolute',
+  width: '100%',
+  zIndex: 6
+});
+const box = css({
+  alignItems: 'center',
+  background: backgroundColor,
+  borderRadius: 3,
+  boxShadow: themeShadows.toast,
+  color: themeColors.light,
+  display: 'flex',
+  fontSize: '0.875rem',
+  justifyContent: 'space-between',
+  letterSpacing: 0.5,
+  margin: 16,
+  maxWidth: 344,
+  minHeight: 48,
+  padding: '6px 16px',
+  width: '100%'
+});
+const label = css({
+  lineHeight: 1.4,
+  margin: '6px 0',
+  overflow: 'hidden'
+}).toString();
+const button = css({
+  color: safeButtonColor,
+  fontWeight: 500,
+  height: 36,
+  letterSpacing: 'inherit',
+  margin: '0 -8px 0 8px',
+  outline: 0,
+  padding: '0 8px',
+  textTransform: 'uppercase'
+});
+export default {
+  container,
+  wrapper,
+  box,
+  label,
+  button
+};

package/colors.js

@@ -1,3 +1,6 @@
 /**
  * @TODO COLORS CHECK
- */export default{primary:'#303f9f'};
+ */
+export default {
+  primary: '#303f9f'
+};

package/icons/ShareIcon.js

@@ -1,5 +1,14 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import Icon from'@shopgate/pwa-common/components/Icon';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@shopgate/pwa-common/components/Icon';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * The Share icon component.
  * @param {Object} props The icon component properties.
  * @returns {JSX}
- */var ShareIcon=function ShareIcon(props){return React.createElement(Icon,_extends({content:themeConfig.icons.share},props));};export default ShareIcon;
+ */
+const ShareIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
+  content: themeConfig.icons.share
+}, props));
+export default ShareIcon;

package/index.js

@@ -1 +1,5 @@
-export{default as Accordion}from"./Accordion";export{default as AppBar}from"./AppBar";export{default as FloatingActionButton}from"./FloatingActionButton";export{default as NavDrawer}from"./NavDrawer";export{default as SnackBar}from"./SnackBar";
+export { default as Accordion } from "./Accordion";
+export { default as AppBar } from "./AppBar";
+export { default as FloatingActionButton } from "./FloatingActionButton";
+export { default as NavDrawer } from "./NavDrawer";
+export { default as SnackBar } from "./SnackBar";

package/jest.config.js

@@ -1,2 +1,2 @@
 // Require the default configuration.
-module.exports=require('@shopgate/pwa-unit-test/jest.config');
+module.exports = require('@shopgate/pwa-unit-test/jest.config');

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.30.0-alpha.7",
+  "version": "7.30.0-alpha.8",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.0-alpha.7",
+    "@shopgate/pwa-common": "7.30.0-alpha.8",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
     "redux": "^4.2.1"