@shopgate/pwa-ui-shared 6.17.4 → 6.18.0-beta.1

package/Sheet/components/SearchBar/index.js

@@ -0,0 +1,3 @@
+function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{I18n,Input,MagnifierIcon}from'@shopgate/engage/components';import styles from"./style";/**
+ * @return {JSX}
+ */var SearchBar=function SearchBar(_ref){var handleChange=_ref.handleChange,name=_ref.name;var _useState=useState(''),_useState2=_slicedToArray(_useState,2),query=_useState2[0],setQuery=_useState2[1];return React.createElement("div",{className:"theme__browse__search-field","data-test-id":"SearchField"},React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.inputWrapper},React.createElement("form",null,React.createElement("label",{htmlFor:name,className:styles.label},React.createElement("div",{className:styles.icon},React.createElement(MagnifierIcon,null)),!query.length&&React.createElement(I18n.Text,{string:"search.label"})),React.createElement(Input,{autoComplete:false,className:classNames(styles.input),onChange:function onChange(value){handleChange(value);setQuery(value);},value:query,type:"search"})))));};SearchBar.defaultProps={name:'search'};export default SearchBar;

package/Sheet/components/SearchBar/style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',position:'relative',flexDirection:'row',flexWrap:'nowrap',marginBottom:4,paddingLeft:16,paddingRight:16}).toString();var inputWrapper=css({position:'relative',flexGrow:1}).toString();var input=css({borderRadius:10,width:'100%',padding:'4px 10px 4px 30px',lineHeight:'28px',outline:'none',background:themeColors.shade7,verticalAlign:'middle',WebkitAppearance:'none'}).toString();var label=css({alignItems:'center',color:themeColors.shade3,display:'flex',height:'36px',position:'absolute',pointerEvents:'none',width:'100%'}).toString();var icon=css({padding:'0 6px',color:themeColors.shade3,fontSize:'1.235rem'}).toString();var searchBarWrapper=css({});export default{container:container,inputWrapper:inputWrapper,input:input,label:label,icon:icon,searchBarWrapper:searchBarWrapper};

package/Sheet/index.js

@@ -1,4 +1,4 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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 throttle from'lodash/throttle';import classNames from'classnames';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Drawer from'@shopgate/pwa-common/components/Drawer';import Header from"./components/Header";import styles from"./style";export var SHEET_EVENTS={OPEN:'Sheet.open',CLOSE:'Sheet.close'};/**
+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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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 throttle from'lodash/throttle';import classNames from'classnames';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Drawer from'@shopgate/pwa-common/components/Drawer';import SearchBar from"./components/SearchBar";import Header from"./components/Header";import styles from"./style";export var SHEET_EVENTS={OPEN:'Sheet.open',CLOSE:'Sheet.close'};/**
  * Sheet component.
  */var Sheet=/*#__PURE__*/function(_Component){_inherits(Sheet,_Component);/**
    * The component default props.
@@ -6,7 +6,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */ /**
    * The constructor.
    * @param {Object} props The component props.
-   */function Sheet(props){var _this;_classCallCheck(this,Sheet);_this=_possibleConstructorReturn(this,_getPrototypeOf(Sheet).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleScroll",throttle(function(){var scrolled=_this.content.current.scrollTop!==0;if(_this.state.scrolled!==scrolled){_this.setState({scrolled:scrolled});}},10));_defineProperty(_assertThisInitialized(_this),"handleClose",function(){_this.props.onClose();_this.setState({isOpen:false,scrolled:false});});_defineProperty(_assertThisInitialized(_this),"handleDidOpen",function(){UIEvents.emit(SHEET_EVENTS.OPEN);_this.props.onDidOpen();});_defineProperty(_assertThisInitialized(_this),"handleDidClose",function(){UIEvents.emit(SHEET_EVENTS.CLOSE);});_this.content=React.createRef();_this.state={isOpen:props.isOpen,scrolled:false};return _this;}/**
+   */function Sheet(props){var _this;_classCallCheck(this,Sheet);_this=_possibleConstructorReturn(this,_getPrototypeOf(Sheet).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleScroll",throttle(function(){var scrolled=_this.content.current.scrollTop!==0;if(_this.state.scrolled!==scrolled){_this.setState({scrolled:scrolled});}},10));_defineProperty(_assertThisInitialized(_this),"handleClose",function(){_this.props.onClose();_this.setState({isOpen:false,scrolled:false});});_defineProperty(_assertThisInitialized(_this),"handleDidOpen",function(){UIEvents.emit(SHEET_EVENTS.OPEN);_this.props.onDidOpen();});_defineProperty(_assertThisInitialized(_this),"handleDidClose",function(){UIEvents.emit(SHEET_EVENTS.CLOSE);});_defineProperty(_assertThisInitialized(_this),"handleSearchInput",function(value){_this.setState({query:value});});_this.content=React.createRef();_this.state={isOpen:props.isOpen,scrolled:false,query:''};return _this;}/**
    * Change isOpen state for new incoming props.
    * @param {Object} nextProps The next component props.
    */_createClass(Sheet,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(_ref){var isOpen=_ref.isOpen;if(this.state.isOpen!==isOpen){this.setState({isOpen:isOpen});}}/**
@@ -15,9 +15,9 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * Renders the component.
    * @returns {JSX}
    */value:function render(){var _this2=this;var children=React.Children.map(this.props.children,function(child){return React.cloneElement(child,// Only add onClose prop to other components
-typeof child.type==='function'&&_this2.props.onClose!==null?{onClose:_this2.props.onClose}:{});});var drawerClassNames=classNames(styles.container,_defineProperty({},this.props.className,this.props.className));var contentClassNames=classNames(styles.content,_defineProperty({},this.props.contentClassName,this.props.contentClassName),_defineProperty({},styles.shadow,!this.props.backdrop));return React.createElement("section",{className:"ui-shared__sheet"},React.createElement(Drawer,{className:drawerClassNames,isOpen:this.state.isOpen,onDidOpen:this.handleDidOpen,onDidClose:this.handleDidClose,onOpen:this.props.onOpen,onClose:this.handleClose,animation:this.animationProps},this.props.title&&React.createElement(Sheet.Header,{onToggleClose:this.handleClose,shadow:this.state.scrolled,title:this.props.title}),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:this.handleClose,opacity:20}));}},{key:"animationProps",/**
+typeof child.type==='function'&&_this2.props.onClose!==null?{onClose:_this2.props.onClose,query:_this2.state.query}:{});});var drawerClassNames=classNames(styles.container,_defineProperty({},styles.containerFullScreen,this.props.showSearch),_defineProperty({},this.props.className,this.props.className));var contentClassNames=classNames(styles.content,_defineProperty({},this.props.contentClassName,this.props.contentClassName),_defineProperty({},styles.shadow,!this.props.backdrop));return React.createElement("section",{className:"ui-shared__sheet"},React.createElement(Drawer,{className:drawerClassNames,isOpen:this.state.isOpen,onDidOpen:this.handleDidOpen,onDidClose:this.handleDidClose,onOpen:this.props.onOpen,onClose:this.handleClose,animation:this.animationProps},this.props.title&&React.createElement(Sheet.Header,{onToggleClose:this.handleClose,shadow:this.state.scrolled,title:this.props.title}),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},this.props.showSearch&&React.createElement("div",{style:{backgroundColor:'white',position:'sticky',width:'100%',top:0,zIndex:2},className:""},React.createElement(SearchBar,{handleChange:this.handleSearchInput})),children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:this.handleClose,opacity:20}));}},{key:"animationProps",/**
    * Getter for the animation props of the Sheet.
    * @returns {Object}
    */get:function get(){return _extends({duration:this.props.duration},styles.drawerAnimation,{},this.props.animation);}/**
    * Close the Sheet.
-   */}]);return Sheet;}(Component);_defineProperty(Sheet,"Header",Header);_defineProperty(Sheet,"defaultProps",{animation:{},backdrop:true,children:null,className:null,contentClassName:null,duration:300,isOpen:false,onClose:function onClose(){},onDidOpen:function onDidOpen(){},onOpen:function onOpen(){},title:''});export default Sheet;
+   */}]);return Sheet;}(Component);_defineProperty(Sheet,"Header",Header);_defineProperty(Sheet,"defaultProps",{animation:{},backdrop:true,children:null,className:null,contentClassName:null,duration:300,isOpen:false,onClose:function onClose(){},onDidOpen:function onDidOpen(){},onOpen:function onOpen(){},showSearch:false,title:''});export default Sheet;

package/Sheet/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var container=css({bottom:0,background:themeConfig.colors.light,color:themeConfig.colors.dark,width:'100vw',maxWidth:640,left:0,right:0,margin:'0 auto'}).toString();var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css({maxHeight:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")],paddingBottom:['var(--safe-area-inset-bottom)'],overflowY:'scroll',WebkitOverflowScrolling:'touch'}).toString();var slideInSheetDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var drawerAnimation={"in":css({animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,shadow:shadow,content:content,drawerAnimation:drawerAnimation};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var container=css({bottom:0,background:themeConfig.colors.light,color:themeConfig.colors.dark,width:'100vw',maxWidth:640,left:0,right:0,margin:'0 auto'}).toString();var containerFullScreen=css({height:'100%'});var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css({position:'relative',maxHeight:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")],paddingBottom:['var(--safe-area-inset-bottom)'],overflowY:'scroll',WebkitOverflowScrolling:'touch'}).toString();var slideInSheetDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var drawerAnimation={"in":css({animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,containerFullScreen:containerFullScreen,shadow:shadow,content:content,drawerAnimation:drawerAnimation};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "6.17.4",
+  "version": "6.18.0-beta.1",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "6.17.4",
-    "@shopgate/pwa-ui-material": "6.17.4"
+    "@shopgate/pwa-ui-ios": "6.18.0-beta.1",
+    "@shopgate/pwa-ui-material": "6.18.0-beta.1"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "6.17.4",
-    "@shopgate/pwa-common-commerce": "6.17.4",
+    "@shopgate/pwa-common": "6.18.0-beta.1",
+    "@shopgate/pwa-common-commerce": "6.18.0-beta.1",
     "classnames": "^2.2.5",
     "react": "~16.12.0"
   },