@bikdotai/bik-component-library 1.1.1-beta.53 → 1.1.1-beta.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/postPicker/PostPicker.styled.js +3 -5
- package/dist/cjs/components/postPicker/postPicker.js +1 -1
- package/dist/cjs/components/shimmer-image/ShimmerImage.d.ts +8 -0
- package/dist/cjs/components/shimmer-image/ShimmerImage.js +1 -0
- package/dist/cjs/components/shimmer-image/ShimmerImage.stories.d.ts +5 -0
- package/dist/esm/components/postPicker/PostPicker.styled.js +0 -2
- package/dist/esm/components/postPicker/postPicker.js +1 -1
- package/dist/esm/components/shimmer-image/ShimmerImage.d.ts +8 -0
- package/dist/esm/components/shimmer-image/ShimmerImage.js +1 -0
- package/dist/esm/components/shimmer-image/ShimmerImage.stories.d.ts +5 -0
- package/package.json +1 -1
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
padding: 6px 6px 20px 6px;
|
|
31
31
|
`,o.default.div`
|
|
32
32
|
padding: 6px 6px 20px 6px;
|
|
33
|
-
`;const
|
|
33
|
+
`;const r=o.default.div`
|
|
34
34
|
display: grid;
|
|
35
35
|
grid-template-columns: repeat(
|
|
36
36
|
${e=>e.mediaType==d.POST?6:8},
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
&:hover::-webkit-scrollbar {
|
|
51
51
|
width: 0.5em;
|
|
52
52
|
}
|
|
53
|
-
`,
|
|
53
|
+
`,p=o.default.div`
|
|
54
54
|
position: relative;
|
|
55
55
|
cursor: pointer;
|
|
56
56
|
height: ${e=>e.mediaType==d.POST?155:180}px;
|
|
@@ -59,8 +59,6 @@
|
|
|
59
59
|
border: 2px solid transparent;
|
|
60
60
|
|
|
61
61
|
img {
|
|
62
|
-
width: ${e=>e.mediaType==d.POST?148:104}px;
|
|
63
|
-
height: ${e=>e.mediaType==d.POST?148:172}px;
|
|
64
62
|
object-fit: cover;
|
|
65
63
|
border-radius: 4px;
|
|
66
64
|
}
|
|
@@ -127,4 +125,4 @@
|
|
|
127
125
|
flex-direction: row;
|
|
128
126
|
justify-content: flex-end;
|
|
129
127
|
gap: 10px;
|
|
130
|
-
`,exports.StyledProduct=
|
|
128
|
+
`,exports.StyledProduct=p,exports.StyledProductGrid=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),s=require("react"),i=require("./PostPicker.styled.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),s=require("react"),i=require("./PostPicker.styled.js"),a=require("../tag/Tag.js"),r=require("../TypographyStyle.js"),n=require("../../utils/unCamelCase.js"),l=require("../../constants/colors.js"),o=require("../../constants/Theme.js"),d=require("../../assets/icons/instagram.svg.js"),c=require("../../assets/icons/warning.svg.js"),m=require("../modals/styledModal.js"),u=require("../shimmer-image/ShimmerImage.js"),g=require("../states/StateComponent.js");exports.MEDIA_TYPES=void 0,(e=exports.MEDIA_TYPES||(exports.MEDIA_TYPES={})).STORY="story",e.POST="post",e.REEL="reel";exports.PostPicker=e=>{var y,h;const[p,j]=s.useState(null!==(y=e.previouslySelected)&&void 0!==y?y:[]),[T,x]=s.useState("");s.useEffect((()=>{console.log("props.media on mount",null==e?void 0:e.media),j(e.selected||[]),console.log("set selected media called")}),[]),s.useEffect((()=>{console.log("media",e.media)}),[null===(h=null==e?void 0:e.media)||void 0===h?void 0:h.length]),s.useEffect((()=>{p.length>0&&x("")}),[p.length]);return t.jsx(t.Fragment,{children:t.jsx(m.StyledModal,Object.assign({zIndex:201,open:e.showModal,headingTitle:e.title,onClose:e.onClose,centralContainerStyles:{width:1071,height:564},primaryButton:{disabled:!e.media.length,buttonType:"primary",buttonText:`Select ${n.unCamelCase(e.mediaType)}`,onClick:()=>{p.length?e.onSelect(p):x(`Please select a ${e.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>e.onClose()},footerLeftCustomElement:T?t.jsx(a.Tag,{tagText:T,type:"negative",LeadingIcon:c.default}):p.length?t.jsxs(r.BodySecondary,{children:[p.length," selected"]}):null},{children:e.media&&e.media.length?t.jsx(i.StyledProductGrid,Object.assign({mediaType:e.mediaType},{children:e.media.map((s=>{return t.jsxs(i.StyledProduct,Object.assign({mediaType:e.mediaType,className:""+(a=s,n=p,n.some((e=>e.id===a.id))?"selected":""),onClick:()=>{return t=s,void j((()=>p.includes(t)?p.filter((e=>e!==t)):!e.limit||p.length<e.limit?[...p,t]:(x(`Only ${e.limit} ${e.mediaType}s can be selected`),p)));var t}},{children:[t.jsx(u.ShimmerImage,{imageUrl:s.imageUrl,width:e.mediaType==exports.MEDIA_TYPES.POST?148:104,height:e.mediaType==exports.MEDIA_TYPES.POST?148:172,alt:s.overlayCaption}),t.jsxs("div",Object.assign({className:"overlay"},{children:[t.jsx("a",Object.assign({target:"_blank",rel:"noreferrer",href:s.redirectionUrl},{children:t.jsxs("div",Object.assign({className:"overlay__redirection"},{children:[t.jsx(d.default,{height:22,width:22}),t.jsx(r.BodyPrimary,Object.assign({color:l.PRIMARY,style:{fontWeight:500}},{children:"View"}))]}))})),t.jsx("div",Object.assign({className:"overlay__caption"},{children:t.jsx(r.BodyCaption,Object.assign({color:o.COLORS.content.placeholder},{children:s.overlayCaption}))}))]}))]}),s.id);var a,n}))})):t.jsx("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:t.jsx(g.StateComponent,{states:g.StateInterface.WARNING,heading:`No ${e.mediaType}s on your account`,subline:`There seems to be no ${e.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))}))})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../shimmer/ShimmerComponent/BikShimmer.js");exports.ShimmerImage=r=>{let{imageUrl:s,width:n,height:h,alt:l}=r;const[m,o]=t.useState(!0);return t.useEffect((()=>{const e=new Image;return e.src=s,e.onload=()=>{o(!1)},()=>{e.onload=null}}),[s]),e.jsxs("div",Object.assign({style:{position:"relative",width:n,height:h}},{children:[m&&e.jsx(i.BikShimmer,{boxes:[{height:`${h}px`,width:`${n}`,marginTop:"0px"}]}),e.jsx("img",{src:s,alt:null!=l?l:"Image",style:{display:m?"none":"block",width:"100%",height:"100%"}})]}))};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
3
|
+
declare const _default: ComponentMeta<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Image: ComponentStory<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
|
|
@@ -59,8 +59,6 @@ import e from"styled-components";import{TitleMedium as i}from"../TypographyStyle
|
|
|
59
59
|
border: 2px solid transparent;
|
|
60
60
|
|
|
61
61
|
img {
|
|
62
|
-
width: ${e=>e.mediaType==t.POST?148:104}px;
|
|
63
|
-
height: ${e=>e.mediaType==t.POST?148:172}px;
|
|
64
62
|
object-fit: cover;
|
|
65
63
|
border-radius: 4px;
|
|
66
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as o,useEffect as n}from"react";import{StyledProductGrid as s,StyledProduct as l}from"./PostPicker.styled.js";import{Tag as a}from"../tag/Tag.js";import{BodyPrimary as r,BodyCaption as d,BodySecondary as m}from"../TypographyStyle.js";import{unCamelCase as c}from"../../utils/unCamelCase.js";import{PRIMARY as g}from"../../constants/colors.js";import{COLORS as p}from"../../constants/Theme.js";import h from"../../assets/icons/instagram.svg.js";import y from"../../assets/icons/warning.svg.js";import{StyledModal as u}from"../modals/styledModal.js";import{ShimmerImage as T}from"../shimmer-image/ShimmerImage.js";import{StateComponent as j,StateInterface as v}from"../states/StateComponent.js";var f;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(f||(f={}));const b=b=>{var O,C;const[S,w]=o(null!==(O=b.previouslySelected)&&void 0!==O?O:[]),[x,N]=o("");n((()=>{console.log("props.media on mount",null==b?void 0:b.media),w(b.selected||[]),console.log("set selected media called")}),[]),n((()=>{console.log("media",b.media)}),[null===(C=null==b?void 0:b.media)||void 0===C?void 0:C.length]),n((()=>{S.length>0&&N("")}),[S.length]);return e(t,{children:e(u,Object.assign({zIndex:201,open:b.showModal,headingTitle:b.title,onClose:b.onClose,centralContainerStyles:{width:1071,height:564},primaryButton:{disabled:!b.media.length,buttonType:"primary",buttonText:`Select ${c(b.mediaType)}`,onClick:()=>{S.length?b.onSelect(S):N(`Please select a ${b.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>b.onClose()},footerLeftCustomElement:x?e(a,{tagText:x,type:"negative",LeadingIcon:y}):S.length?i(m,{children:[S.length," selected"]}):null},{children:b.media&&b.media.length?e(s,Object.assign({mediaType:b.mediaType},{children:b.media.map((t=>{return i(l,Object.assign({mediaType:b.mediaType,className:""+(o=t,n=S,n.some((e=>e.id===o.id))?"selected":""),onClick:()=>{return e=t,void w((()=>S.includes(e)?S.filter((t=>t!==e)):!b.limit||S.length<b.limit?[...S,e]:(N(`Only ${b.limit} ${b.mediaType}s can be selected`),S)));var e}},{children:[e(T,{imageUrl:t.imageUrl,width:b.mediaType==f.POST?148:104,height:b.mediaType==f.POST?148:172,alt:t.overlayCaption}),i("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:t.redirectionUrl},{children:i("div",Object.assign({className:"overlay__redirection"},{children:[e(h,{height:22,width:22}),e(r,Object.assign({color:g,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(d,Object.assign({color:p.content.placeholder},{children:t.overlayCaption}))}))]}))]}),t.id);var o,n}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:e(j,{states:v.WARNING,heading:`No ${b.mediaType}s on your account`,subline:`There seems to be no ${b.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))}))})};export{f as MEDIA_TYPES,b as PostPicker};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as r}from"react";import{BikShimmer as o}from"../shimmer/ShimmerComponent/BikShimmer.js";const m=m=>{let{imageUrl:n,width:h,height:l,alt:s}=m;const[a,c]=i(!0);return r((()=>{const t=new Image;return t.src=n,t.onload=()=>{c(!1)},()=>{t.onload=null}}),[n]),t("div",Object.assign({style:{position:"relative",width:h,height:l}},{children:[a&&e(o,{boxes:[{height:`${l}px`,width:`${h}`,marginTop:"0px"}]}),e("img",{src:n,alt:null!=s?s:"Image",style:{display:a?"none":"block",width:"100%",height:"100%"}})]}))};export{m as ShimmerImage};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
3
|
+
declare const _default: ComponentMeta<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Image: ComponentStory<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
|