@mobilestockweb/header-next 0.0.2 → 0.0.3

package/index.d.ts

@@ -3,6 +3,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { ViewBaseProps } from '@mobilestockweb/container';
 import { ButtonProps } from '@mobilestockweb/button';
+import { useRouter } from 'next/router';
 
 declare function Header(): react_jsx_runtime.JSX.Element;
 
@@ -26,12 +27,13 @@ interface HeaderProviderProps {
     children: ReactNode;
     appName: string;
     logo: string;
+    router: ReturnType<typeof useRouter>;
     avatar?: string;
     onBackNavigation?(): void;
     pressOnTitle?(): void;
     pressOnAvatar?(): void;
 }
-declare function HeaderProvider({ children, appName, avatar, logo, onBackNavigation, pressOnTitle, pressOnAvatar }: HeaderProviderProps): react_jsx_runtime.JSX.Element;
+declare function HeaderProvider({ children, appName, avatar, logo, router, onBackNavigation, pressOnTitle, pressOnAvatar }: HeaderProviderProps): react_jsx_runtime.JSX.Element;
 
 interface HeaderContextState {
     appName: string;

package/index.js

@@ -1,7 +1,7 @@
-"use strict";var v=Object.defineProperty,pe=Object.defineProperties,fe=Object.getOwnPropertyDescriptor,me=Object.getOwnPropertyDescriptors,be=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var U=(e,o,r)=>o in e?v(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,c=(e,o)=>{for(var r in o||(o={}))x.call(o,r)&&U(e,r,o[r]);if(S)for(var r of S(o))W.call(o,r)&&U(e,r,o[r]);return e},T=(e,o)=>pe(e,me(o));var u=(e,o)=>{var r={};for(var i in e)x.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&S)for(var i of S(e))o.indexOf(i)<0&&W.call(e,i)&&(r[i]=e[i]);return r};var He=(e,o)=>{for(var r in o)v(e,r,{get:o[r],enumerable:!0})},Ce=(e,o,r,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of be(o))!x.call(e,n)&&n!==r&&v(e,n,{get:()=>o[n],enumerable:!(i=fe(o,n))||i.enumerable});return e};var ge=e=>Ce(v({},"__esModule",{value:!0}),e);var xe={};He(xe,{Header:()=>G,HeaderProvider:()=>ie,SubHeader:()=>re,useHeader:()=>p});module.exports=ge(xe);var f=require("styled-components"),N=require("@mobilestockweb/button"),B=require("@mobilestockweb/clickable"),l=require("@mobilestockweb/container"),P=require("@mobilestockweb/image"),D=require("@mobilestockweb/typography");var R=require("react"),E=(0,R.createContext)(null);function p(){let e=(0,R.useContext)(E);if(!e)throw new Error("useHeader must be used within a HeaderProvider");return e}var t=require("react/jsx-runtime");function G(){let e=p();return(0,t.jsxs)(ve,{children:[(0,t.jsx)(Te,{children:(0,t.jsx)(Se,{children:(0,t.jsxs)(l.Container.Horizontal,{full:!0,align:"BETWEEN_CENTER",padding:"2XS",children:[(0,t.jsx)(l.Container.Vertical,{align:"CENTER",children:(0,t.jsx)(_,{children:!e.isLeftSideDisabled&&(0,t.jsx)(t.Fragment,{children:e.isBackArrowVisible?(0,t.jsx)(N.Button,{variant:"TRANSPARENT",icon:"ArrowLeft",circular:!0,size:"SM",onClick:e.onNavigateBack}):(0,t.jsx)(P.Img,{src:e.logo,alt:"Logo",size:"FULL",borderRadius:"ROUNDED"})})})}),(0,t.jsxs)(l.Container.Vertical,{full:!0,align:"CENTER",style:{userSelect:"none"},children:[(0,t.jsx)(B.Clickable,{onClick:e.pressOnTitle,disabled:e.isCenterDisabled,children:(0,t.jsx)(D.Typography,{size:"LG",weight:"BOLD",color:"CONTRAST",children:e.appName})}),e.pageTitle&&(0,t.jsx)(D.Typography,{size:"SM",color:"CONTRAST_600",children:e.pageTitle})]}),(0,t.jsx)(l.Container.Vertical,{align:"CENTER",children:(0,t.jsx)(_,{children:!e.isRightSideDisabled&&(0,t.jsx)(t.Fragment,{children:e.avatar?(0,t.jsx)(B.Clickable,{onClick:e.pressOnAvatar,style:{display:"flex"},children:(0,t.jsx)(P.Img,{alt:"Avatar",src:e.avatar,size:"FULL",borderRadius:"ROUNDED"})}):(0,t.jsx)(N.Button,{variant:"TRANSPARENT",icon:"Settings",onClick:e.pressOnAvatar})})})})]})})}),(e==null?void 0:e.subHeader)&&(0,t.jsx)(l.Container.Main,{children:(0,t.jsx)(Re,{children:(0,t.jsx)(l.Container.Horizontal,{align:"BETWEEN_CENTER",children:e==null?void 0:e.subHeader})})})]})}var _=f.styled.div`
+"use strict";var be=Object.create;var m=Object.defineProperty,He=Object.defineProperties,Ce=Object.getOwnPropertyDescriptor,ge=Object.getOwnPropertyDescriptors,Se=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,Te=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var I=(e,o,r)=>o in e?m(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,c=(e,o)=>{for(var r in o||(o={}))R.call(o,r)&&I(e,r,o[r]);if(S)for(var r of S(o))U.call(o,r)&&I(e,r,o[r]);return e},T=(e,o)=>He(e,ge(o));var u=(e,o)=>{var r={};for(var i in e)R.call(e,i)&&o.indexOf(i)<0&&(r[i]=e[i]);if(e!=null&&S)for(var i of S(e))o.indexOf(i)<0&&U.call(e,i)&&(r[i]=e[i]);return r};var ve=(e,o)=>{for(var r in o)m(e,r,{get:o[r],enumerable:!0})},W=(e,o,r,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of Se(o))!R.call(e,a)&&a!==r&&m(e,a,{get:()=>o[a],enumerable:!(i=Ce(o,a))||i.enumerable});return e};var he=(e,o,r)=>(r=e!=null?be(Te(e)):{},W(o||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),xe=e=>W(m({},"__esModule",{value:!0}),e);var ke={};ve(ke,{Header:()=>K,HeaderProvider:()=>de,SubHeader:()=>ne,useHeader:()=>p});module.exports=xe(ke);var s=require("styled-components"),F=require("@mobilestockweb/button"),N=require("@mobilestockweb/clickable"),l=require("@mobilestockweb/container"),P=require("@mobilestockweb/image"),B=he(require("@mobilestockweb/tools")),X=require("@mobilestockweb/typography");var v=require("react"),E=(0,v.createContext)(null);function p(){let e=(0,v.useContext)(E);if(!e)throw new Error("useHeader must be used within a HeaderProvider");return e}var t=require("react/jsx-runtime");function K(){let e=p();return(0,t.jsxs)(Ee,{children:[(0,t.jsx)(Ne,{children:(0,t.jsx)(Re,{children:(0,t.jsxs)(l.Container.Horizontal,{full:!0,align:"BETWEEN_CENTER",padding:"2XS",children:[(0,t.jsx)(l.Container.Vertical,{align:"CENTER",children:(0,t.jsx)($,{children:!e.isLeftSideDisabled&&(0,t.jsx)(t.Fragment,{children:e.isBackArrowVisible?(0,t.jsx)(_,{variant:"TRANSPARENT",icon:"ArrowLeft",circular:!0,size:"SM",onClick:e.onNavigateBack}):(0,t.jsx)(P.Img,{src:e.logo,alt:"Logo",size:"FULL",borderRadius:"ROUNDED"})})})}),(0,t.jsxs)(l.Container.Vertical,{full:!0,align:"CENTER",style:{userSelect:"none"},children:[(0,t.jsx)(N.Clickable,{onClick:e.pressOnTitle,disabled:e.isCenterDisabled,children:(0,t.jsx)(G,{size:"LG",weight:"BOLD",children:e.appName})}),e.pageTitle&&(0,t.jsx)(G,{size:"SM",children:e.pageTitle})]}),(0,t.jsx)(l.Container.Vertical,{align:"CENTER",children:(0,t.jsx)($,{children:!e.isRightSideDisabled&&(0,t.jsx)(t.Fragment,{children:e.avatar?(0,t.jsx)(N.Clickable,{onClick:e.pressOnAvatar,style:{display:"flex"},children:(0,t.jsx)(P.Img,{alt:"Avatar",src:e.avatar,size:"FULL",borderRadius:"ROUNDED"})}):(0,t.jsx)(_,{variant:"TRANSPARENT",icon:"Settings",circular:!0,size:"SM",onClick:e.pressOnAvatar})})})})]})})}),(e==null?void 0:e.subHeader)&&(0,t.jsx)(l.Container.Main,{children:(0,t.jsx)(Pe,{children:(0,t.jsx)(l.Container.Horizontal,{align:"BETWEEN_CENTER",children:e==null?void 0:e.subHeader})})})]})}var $=s.styled.div`
   display: flex;
   width: 2.5rem;
-`,Se=f.styled.div`
+`,Re=s.styled.div`
   max-width: 73.5rem;
   width: 100%;
   height: 4rem;
@@ -11,14 +11,20 @@
   padding: 0.25rem 0.25rem 0 0.25rem;
   display: flex;
   justify-content: center;
-`,ve=f.styled.header`
+`,Ee=s.styled.header`
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 1000;
-`,Te=f.styled.div`
+`,Ne=s.styled.div`
   background-color: ${({theme:e})=>e.colors.header.background};
-`,Re=f.styled.div`
+`,Pe=s.styled.div`
   background-color: ${({theme:e})=>e.colors.header.sub};
   border-radius: 0 0 0.4rem 0.4rem;
-`;var F=require("@mobilestockweb/button");var $=require("react/jsx-runtime");function X(i){var n=i,{icon:e,text:o}=n,r=u(n,["icon","text"]);return(0,$.jsx)(F.Button,c({icon:e,text:o,size:"SM",variant:"LINK",iconAlign:"ABOVE-TEXT"},r))}var q=require("react"),J=require("@mobilestockweb/container");var K=require("react");function h(e){let{setSubHeader:o}=p();(0,K.useEffect)(()=>(o(e),()=>{o(void 0)}),[o])}var Y=require("react/jsx-runtime"),Q=(0,q.forwardRef)(function(n,i){var d=n,{children:o}=d,r=u(d,["children"]);return h((0,Y.jsx)(J.Container.Horizontal,T(c({ref:i,full:!0,align:"CENTER_CENTER"},r),{children:o}))),null});var Z=require("react"),j=require("@mobilestockweb/container");var oe=require("react/jsx-runtime"),ee=(0,Z.forwardRef)(function(n,i){var d=n,{children:o}=d,r=u(d,["children"]);return h((0,oe.jsx)(j.Container.Vertical,T(c({ref:i,full:!0},r),{children:o}))),null});function he(){throw new Error("The SubHeader component should not be used directly. Use SubHeader.Vertical or SubHeader.Horizontal.")}var re=Object.assign(he,{Vertical:ee,Horizontal:Q,Button:X});var te=require("next/router"),a=require("react");var ae=require("react/jsx-runtime");function ie({children:e,appName:o,avatar:r,logo:i,onBackNavigation:n,pressOnTitle:d,pressOnAvatar:b}){let s=(0,te.useRouter)(),[k,y]=(0,a.useState)(void 0),[V,ne]=(0,a.useState)(void 0),[H,de]=(0,a.useState)(!1),[C,se]=(0,a.useState)(!1),[g,le]=(0,a.useState)(!1),[w,ce]=(0,a.useState)(!1);(0,a.useEffect)(()=>{ce(s.pathname!=="/"),setTimeout(()=>{s.pathname!=="/"?y(document.title):y(void 0)},0)},[s.pathname,o]);let L=(0,a.useCallback)(()=>{if(!H){if(n){n();return}s.back()}},[n,s,H]),z=(0,a.useCallback)(()=>{if(!C){if(d){d();return}s.pathname!=="/"&&s.replace("/")}},[d,C,s]),A=(0,a.useCallback)(m=>{de(m)},[]),M=(0,a.useCallback)(m=>{se(m)},[]),O=(0,a.useCallback)(m=>{le(m)},[]),I=(0,a.useCallback)(()=>{g||b==null||b()},[b,g]),ue=(0,a.useMemo)(()=>({appName:o,avatar:r,logo:i,pageTitle:k,subHeader:V,isBackArrowVisible:w,isLeftSideDisabled:H,isCenterDisabled:C,isRightSideDisabled:g,setSubHeader:ne,pressOnTitle:z,onNavigateBack:L,pressOnAvatar:I,disableLeftSide:A,disableCenter:M,disableRightSide:O}),[o,r,i,k,V,w,H,C,g,z,L,I,A,M,O]);return(0,ae.jsx)(E.Provider,{value:ue,children:e})}0&&(module.exports={Header,HeaderProvider,SubHeader,useHeader});
+`,G=(0,s.styled)(X.Typography)`
+  color: ${({theme:e})=>B.default.defineTextColor(e.colors.header.background)};
+`,_=(0,s.styled)(F.Button)`
+  svg * {
+    color: ${({theme:e})=>B.default.defineTextColor(e.colors.header.background)} !important;
+  }
+`;var q=require("@mobilestockweb/button");var Q=require("react/jsx-runtime");function J(i){var a=i,{icon:e,text:o}=a,r=u(a,["icon","text"]);return(0,Q.jsx)(q.Button,c({icon:e,text:o,size:"SM",variant:"LINK",iconAlign:"ABOVE-TEXT"},r))}var Z=require("react"),j=require("@mobilestockweb/container");var Y=require("react");function h(e){let{setSubHeader:o}=p();(0,Y.useEffect)(()=>(o(e),()=>{o(void 0)}),[o])}var oe=require("react/jsx-runtime"),ee=(0,Z.forwardRef)(function(a,i){var d=a,{children:o}=d,r=u(d,["children"]);return h((0,oe.jsx)(j.Container.Horizontal,T(c({ref:i,full:!0,align:"CENTER_CENTER"},r),{children:o}))),null});var re=require("react"),te=require("@mobilestockweb/container");var ae=require("react/jsx-runtime"),ie=(0,re.forwardRef)(function(a,i){var d=a,{children:o}=d,r=u(d,["children"]);return h((0,ae.jsx)(te.Container.Vertical,T(c({ref:i,full:!0},r),{children:o}))),null});function Be(){throw new Error("The SubHeader component should not be used directly. Use SubHeader.Vertical or SubHeader.Horizontal.")}var ne=Object.assign(Be,{Vertical:ie,Horizontal:ee,Button:J});var n=require("react");var se=require("react/jsx-runtime");function de({children:e,appName:o,avatar:r,logo:i,router:a,onBackNavigation:d,pressOnTitle:x,pressOnAvatar:b}){let[k,y]=(0,n.useState)(void 0),[D,le]=(0,n.useState)(void 0),[H,ce]=(0,n.useState)(!1),[C,ue]=(0,n.useState)(!1),[g,pe]=(0,n.useState)(!1),[V,fe]=(0,n.useState)(!1);(0,n.useEffect)(()=>{fe(a.pathname!=="/"),setTimeout(()=>{a.pathname!=="/"?y(document.title):y(void 0)},0)},[a.pathname,o]);let w=(0,n.useCallback)(()=>{if(!H){if(d){d();return}a.back()}},[d,a,H]),z=(0,n.useCallback)(()=>{if(!C){if(x){x();return}a.pathname!=="/"&&a.replace("/")}},[x,C,a]),L=(0,n.useCallback)(f=>{ce(f)},[]),A=(0,n.useCallback)(f=>{ue(f)},[]),M=(0,n.useCallback)(f=>{pe(f)},[]),O=(0,n.useCallback)(()=>{g||b==null||b()},[b,g]),me=(0,n.useMemo)(()=>({appName:o,avatar:r,logo:i,pageTitle:k,subHeader:D,isBackArrowVisible:V,isLeftSideDisabled:H,isCenterDisabled:C,isRightSideDisabled:g,setSubHeader:le,pressOnTitle:z,onNavigateBack:w,pressOnAvatar:O,disableLeftSide:L,disableCenter:A,disableRightSide:M}),[o,r,i,k,D,V,H,C,g,z,w,O,L,A,M]);return(0,se.jsx)(E.Provider,{value:me,children:e})}0&&(module.exports={Header,HeaderProvider,SubHeader,useHeader});

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@mobilestockweb/header-next",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "index.js",
   "dependencies": {
     "@mobilestockweb/button": "^1.0.4",
     "@mobilestockweb/clickable": "^1.0.2",
     "@mobilestockweb/container": "^0.0.3",
+    "@mobilestockweb/typography": "^0.0.5",
     "@mobilestockweb/image": "^0.0.6",
-    "@mobilestockweb/typography": "^0.0.5"
+    "@mobilestockweb/tools": "^0.0.15"
   },
   "peerDependencies": {
     "react": "18.2.0",