@bikdotai/bik-component-library 0.0.455-beta.ppi-25 → 0.0.455-beta.ppi-26
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/product-picker-v2/selectedScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/style.js +10 -5
- package/dist/cjs/components/product-picker-v2/variant.js +1 -1
- package/dist/esm/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/style.js +7 -2
- package/dist/esm/components/product-picker-v2/variant.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),r=require("react"),o=require("../icon-button/IconButton.js"),c=require("../TypographyStyle.js"),s=require("./emptyState.js"),l=require("./productScreen.js"),n=require("./reducers.js"),i=require("./style.js"),u=require("./utility.js");exports.SelectedScreen=d=>{const{selectedCollections:a,selectedCollectionsDispatch:v,setScreen:p,collections:j,outOfStockAction:f,storeId:g,fbStatusFetcher:S}=d,y=r.useRef(0),h=r.useRef(null),[b,x]=r.useReducer(n.paginationReducer,{});r.useEffect((()=>{y.current=0;const e=u.paginateSelectedItems(a,10,0);x({type:"paginate",data:e}),u.fetchFbStatusCollection(e,g,x,S,"set"),y.current+=1}),[]),r.useEffect((()=>{x({type:"filter",data:a})}),[a]),r.useEffect((()=>{console.log("vj: observertarget",h.current);const e=new IntersectionObserver((e=>{if(console.log("vj: observertargetinside",e),e[0].isIntersecting&&(console.log("vj: nextPageRef",y.current),y.current>0)){const e=u.paginateSelectedItems(a,10,y.current);console.log("paginated inside observer target",{paginatedProducts:e,selectedCollections:a,curScreenData:b}),x({type:"paginate",data:e}),u.fetchFbStatusCollection(e,g,x,S,"update"),y.current+=1}}),{threshold:1});return h.current&&e.observe(h.current),()=>{h.current&&e.unobserve(h.current)}}),[h,a]);const q=(e,t)=>{var r,o,c,s,l,n,i,u,d;let v=0,p=0;return!!((null===(o=null===(r=null==a?void 0:a[e])||void 0===r?void 0:r.products)||void 0===o?void 0:o[t])&&(null===(n=Object.keys((null===(l=null===(s=null===(c=null==j?void 0:j[e])||void 0===c?void 0:c.products)||void 0===s?void 0:s[t])||void 0===l?void 0:l.variants)||[]))||void 0===n||n.forEach((()=>p++)),Object.keys((null===(d=null===(u=null===(i=null==a?void 0:a[e])||void 0===i?void 0:i.products)||void 0===u?void 0:u[t])||void 0===d?void 0:d.variants)||[]).forEach((()=>v++)),v>0&&p!==v))};return e.jsxs("div",{children:[e.jsxs(i.SelectedScreenHeader,{children:[e.jsx(o.IconButton,{Icon:t.default,onClick:()=>{p("collections")}}),e.jsx(c.BodyCaption,{children:"Selected Products"})]}),e.jsxs("div",{children:[Object.keys(b).length>0?e.jsx(e.Fragment,{children:Object.keys(b).map((t=>{var r;return Object.keys((null===(r=null==b?void 0:b[t])||void 0===r?void 0:r.products)||[]).map((r=>{let o=!1;return(null==
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),r=require("react"),o=require("../icon-button/IconButton.js"),c=require("../TypographyStyle.js"),s=require("./emptyState.js"),l=require("./productScreen.js"),n=require("./reducers.js"),i=require("./style.js"),u=require("./utility.js");exports.SelectedScreen=d=>{const{selectedCollections:a,selectedCollectionsDispatch:v,setScreen:p,collections:j,outOfStockAction:f,storeId:g,fbStatusFetcher:S}=d,y=r.useRef(0),h=r.useRef(null),[b,x]=r.useReducer(n.paginationReducer,{});r.useEffect((()=>{y.current=0;const e=u.paginateSelectedItems(a,10,0);x({type:"paginate",data:e}),u.fetchFbStatusCollection(e,g,x,S,"set"),y.current+=1}),[]),r.useEffect((()=>{x({type:"filter",data:a})}),[a]),r.useEffect((()=>{console.log("vj: observertarget",h.current);const e=new IntersectionObserver((e=>{if(console.log("vj: observertargetinside",e),e[0].isIntersecting&&(console.log("vj: nextPageRef",y.current),y.current>0)){const e=u.paginateSelectedItems(a,10,y.current);console.log("paginated inside observer target",{paginatedProducts:e,selectedCollections:a,curScreenData:b}),x({type:"paginate",data:e}),u.fetchFbStatusCollection(e,g,x,S,"update"),y.current+=1}}),{threshold:1});return h.current&&e.observe(h.current),()=>{h.current&&e.unobserve(h.current)}}),[h,a]);const q=(e,t)=>{var r,o,c,s,l,n,i,u,d;let v=0,p=0;return!!((null===(o=null===(r=null==a?void 0:a[e])||void 0===r?void 0:r.products)||void 0===o?void 0:o[t])&&(null===(n=Object.keys((null===(l=null===(s=null===(c=null==j?void 0:j[e])||void 0===c?void 0:c.products)||void 0===s?void 0:s[t])||void 0===l?void 0:l.variants)||[]))||void 0===n||n.forEach((()=>p++)),Object.keys((null===(d=null===(u=null===(i=null==a?void 0:a[e])||void 0===i?void 0:i.products)||void 0===u?void 0:u[t])||void 0===d?void 0:d.variants)||[]).forEach((()=>v++)),v>0&&p!==v))};return e.jsxs("div",{children:[e.jsxs(i.SelectedScreenHeader,{children:[e.jsx(o.IconButton,{Icon:t.default,onClick:()=>{p("collections")}}),e.jsx(c.BodyCaption,{children:"Selected Products"})]}),e.jsxs("div",{children:[Object.keys(b).length>0?e.jsx(e.Fragment,{children:Object.keys(b).map((t=>{var r;return Object.keys((null===(r=null==b?void 0:b[t])||void 0===r?void 0:r.products)||[]).map((r=>{let o=!1;return(null==a?void 0:a.isCustom)&&(o=!0),e.jsx(l.ProductGroup,{upliftAdditions:null,collectionId:t,productId:r,data:b[t].products[r],isProductPartiallyChecked:q(t,r),selectedData:a,selectedCollectionsDispatch:v,viewOnly:o,outOfStockAction:f},r)}))}))}):e.jsx(s.EmptyState,{title:"No Products Selected",subtitle:"Select products will appear here"}),e.jsx("div",{ref:h})]})]})};
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
background-color: #888;
|
|
17
17
|
border-radius: 8px;
|
|
18
18
|
}
|
|
19
|
-
`,
|
|
19
|
+
`,n=o.default.div`
|
|
20
20
|
height: 64px;
|
|
21
21
|
background-color: ${e=>e.isDisabled?"#F0F0F0":e.isActive?t.COLORS.background.positive.light:"white"};
|
|
22
22
|
border-bottom: 1px solid #e0e0e0;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
cursor: pointer;
|
|
31
31
|
background-color: ${t.COLORS.surface.hovered};
|
|
32
32
|
}
|
|
33
|
-
`,
|
|
33
|
+
`,d=o.default.div`
|
|
34
34
|
display: flex;
|
|
35
35
|
flex-direction: row;
|
|
36
36
|
justify-content: center;
|
|
@@ -96,9 +96,14 @@
|
|
|
96
96
|
padding: 12px 16px;
|
|
97
97
|
display: flex;
|
|
98
98
|
flex-direction: row;
|
|
99
|
-
gap: 16px;
|
|
100
99
|
align-items: center;
|
|
101
|
-
justify-content:
|
|
100
|
+
justify-content: space-between;
|
|
101
|
+
|
|
102
|
+
.text-container {
|
|
103
|
+
display: flex;
|
|
104
|
+
justify-content: space-between;
|
|
105
|
+
gap: 16px;
|
|
106
|
+
}
|
|
102
107
|
|
|
103
108
|
.tooltip-title-tag {
|
|
104
109
|
display: flex;
|
|
@@ -122,4 +127,4 @@
|
|
|
122
127
|
align-items: center;
|
|
123
128
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
124
129
|
border-radius: 4px;
|
|
125
|
-
`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=
|
|
130
|
+
`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=d,exports.CollectionCardStyle=n,exports.CollectionNameHolder=u,exports.ContainerStyle=r,exports.ProductCardStyle=x,exports.ProductScreenCollectionCardStyle=c,exports.ProductScreenHeader=p,exports.ScrollContainerStyle=l,exports.SelectedScreenHeader=s,exports.VariantCardGridStyle=g,exports.VariantCardListStyle=f;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),i=require("../../assets/icons/drag_handle.svg.js"),r=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),o=require("../TypographyStyle.js"),n=require("./collectionScreen.js"),c=require("./ProductPickerTag.js"),l=require("./style.js"),d=require("../tooltips/Tooltip.js");exports.VariantCardGridView=t=>{const{data:i}=t;return e.jsx(l.VariantCardGridStyle,{children:e.jsx(d.Tooltip,Object.assign({body:i.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e.jsx(s.ShimmerImage,{width:72,height:72,imageUrl:i.image,alt:"Item",borderRadius:4})}))})},exports.VariantCardListView=u=>{const{data:m,selectedCollectionsDispatch:h,outOfStockAction:j}=u,g=e=>{let t;return t=m.name.includes(m.productName)?m.name:`${m.productName} ${m.name}`,e?n.truncate(t,34,!0):t};return e.jsxs(l.VariantCardListStyle,{children:[e.jsxs("div",Object.assign({className:"text-container"},{children:[e.jsx(i.default,{width:24,height:24,color:r.COLORS.content.placeholder}),e.jsx("div",{children:e.jsx(s.ShimmerImage,{width:40,height:40,imageUrl:m.image,alt:"Item",borderRadius:4},m.variantId)}),e.jsxs("div",Object.assign({className:"tooltip-title-tag"},{children:[e.jsx(d.Tooltip,Object.assign({body:g(!1),placement:"bottom",delay:400,variant:"light"},{children:e.jsx(o.TitleRegular,{children:g(!0)})})),e.jsx(c.ProductPickerTag,{isVariant:!0,data:m,outOfStockAction:j})]}))]})),e.jsx(a.IconButton,{Icon:()=>e.jsx(t.default,{width:24,height:24,color:r.COLORS.content.placeholder}),onClick:()=>{h&&h({type:"variantUnselected",data:{productId:m.productId,variantId:m.variantId,collectionId:m.collectionId}}),u.onDelete&&u.onDelete()}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../assets/icons/arrow_left.svg.js";import{useRef as l,useReducer as n,useEffect as c}from"react";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as s}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as u}from"./productScreen.js";import{paginationReducer as a}from"./reducers.js";import{SelectedScreenHeader as v}from"./style.js";import{paginateSelectedItems as p,fetchFbStatusCollection as m}from"./utility.js";const f=f=>{const{selectedCollections:j,selectedCollectionsDispatch:g,setScreen:h,collections:y,outOfStockAction:b,storeId:S,fbStatusFetcher:k}=f,O=l(0),C=l(null),[I,P]=n(a,{});c((()=>{O.current=0;const e=p(j,10,0);P({type:"paginate",data:e}),m(e,S,P,k,"set"),O.current+=1}),[]),c((()=>{P({type:"filter",data:j})}),[j]),c((()=>{console.log("vj: observertarget",C.current);const e=new IntersectionObserver((e=>{if(console.log("vj: observertargetinside",e),e[0].isIntersecting&&(console.log("vj: nextPageRef",O.current),O.current>0)){const e=p(j,10,O.current);console.log("paginated inside observer target",{paginatedProducts:e,selectedCollections:j,curScreenData:I}),P({type:"paginate",data:e}),m(e,S,P,k,"update"),O.current+=1}}),{threshold:1});return C.current&&e.observe(C.current),()=>{C.current&&e.unobserve(C.current)}}),[C,j]);const w=(e,t)=>{var o,r,l,n,c,i,s,d,u;let a=0,v=0;return!!((null===(r=null===(o=null==j?void 0:j[e])||void 0===o?void 0:o.products)||void 0===r?void 0:r[t])&&(null===(i=Object.keys((null===(c=null===(n=null===(l=null==y?void 0:y[e])||void 0===l?void 0:l.products)||void 0===n?void 0:n[t])||void 0===c?void 0:c.variants)||[]))||void 0===i||i.forEach((()=>v++)),Object.keys((null===(u=null===(d=null===(s=null==j?void 0:j[e])||void 0===s?void 0:s.products)||void 0===d?void 0:d[t])||void 0===u?void 0:u.variants)||[]).forEach((()=>a++)),a>0&&v!==a))};return e("div",{children:[e(v,{children:[t(i,{Icon:r,onClick:()=>{h("collections")}}),t(s,{children:"Selected Products"})]}),e("div",{children:[Object.keys(I).length>0?t(o,{children:Object.keys(I).map((e=>{var o;return Object.keys((null===(o=null==I?void 0:I[e])||void 0===o?void 0:o.products)||[]).map((o=>{let r=!1;return(null==
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../assets/icons/arrow_left.svg.js";import{useRef as l,useReducer as n,useEffect as c}from"react";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as s}from"../TypographyStyle.js";import{EmptyState as d}from"./emptyState.js";import{ProductGroup as u}from"./productScreen.js";import{paginationReducer as a}from"./reducers.js";import{SelectedScreenHeader as v}from"./style.js";import{paginateSelectedItems as p,fetchFbStatusCollection as m}from"./utility.js";const f=f=>{const{selectedCollections:j,selectedCollectionsDispatch:g,setScreen:h,collections:y,outOfStockAction:b,storeId:S,fbStatusFetcher:k}=f,O=l(0),C=l(null),[I,P]=n(a,{});c((()=>{O.current=0;const e=p(j,10,0);P({type:"paginate",data:e}),m(e,S,P,k,"set"),O.current+=1}),[]),c((()=>{P({type:"filter",data:j})}),[j]),c((()=>{console.log("vj: observertarget",C.current);const e=new IntersectionObserver((e=>{if(console.log("vj: observertargetinside",e),e[0].isIntersecting&&(console.log("vj: nextPageRef",O.current),O.current>0)){const e=p(j,10,O.current);console.log("paginated inside observer target",{paginatedProducts:e,selectedCollections:j,curScreenData:I}),P({type:"paginate",data:e}),m(e,S,P,k,"update"),O.current+=1}}),{threshold:1});return C.current&&e.observe(C.current),()=>{C.current&&e.unobserve(C.current)}}),[C,j]);const w=(e,t)=>{var o,r,l,n,c,i,s,d,u;let a=0,v=0;return!!((null===(r=null===(o=null==j?void 0:j[e])||void 0===o?void 0:o.products)||void 0===r?void 0:r[t])&&(null===(i=Object.keys((null===(c=null===(n=null===(l=null==y?void 0:y[e])||void 0===l?void 0:l.products)||void 0===n?void 0:n[t])||void 0===c?void 0:c.variants)||[]))||void 0===i||i.forEach((()=>v++)),Object.keys((null===(u=null===(d=null===(s=null==j?void 0:j[e])||void 0===s?void 0:s.products)||void 0===d?void 0:d[t])||void 0===u?void 0:u.variants)||[]).forEach((()=>a++)),a>0&&v!==a))};return e("div",{children:[e(v,{children:[t(i,{Icon:r,onClick:()=>{h("collections")}}),t(s,{children:"Selected Products"})]}),e("div",{children:[Object.keys(I).length>0?t(o,{children:Object.keys(I).map((e=>{var o;return Object.keys((null===(o=null==I?void 0:I[e])||void 0===o?void 0:o.products)||[]).map((o=>{let r=!1;return(null==j?void 0:j.isCustom)&&(r=!0),t(u,{upliftAdditions:null,collectionId:e,productId:o,data:I[e].products[o],isProductPartiallyChecked:w(e,o),selectedData:j,selectedCollectionsDispatch:g,viewOnly:r,outOfStockAction:b},o)}))}))}):t(d,{title:"No Products Selected",subtitle:"Select products will appear here"}),t("div",{ref:C})]})]})};export{f as SelectedScreen};
|
|
@@ -96,9 +96,14 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
96
96
|
padding: 12px 16px;
|
|
97
97
|
display: flex;
|
|
98
98
|
flex-direction: row;
|
|
99
|
-
gap: 16px;
|
|
100
99
|
align-items: center;
|
|
101
|
-
justify-content:
|
|
100
|
+
justify-content: space-between;
|
|
101
|
+
|
|
102
|
+
.text-container {
|
|
103
|
+
display: flex;
|
|
104
|
+
justify-content: space-between;
|
|
105
|
+
gap: 16px;
|
|
106
|
+
}
|
|
102
107
|
|
|
103
108
|
.tooltip-title-tag {
|
|
104
109
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/delete.svg.js";import i from"../../assets/icons/drag_handle.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as c}from"../TypographyStyle.js";import{truncate as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/delete.svg.js";import i from"../../assets/icons/drag_handle.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as c}from"../TypographyStyle.js";import{truncate as s}from"./collectionScreen.js";import{ProductPickerTag as l}from"./ProductPickerTag.js";import{VariantCardListStyle as m,VariantCardGridStyle as d}from"./style.js";import{Tooltip as h}from"../tooltips/Tooltip.js";const p=d=>{const{data:p,selectedCollectionsDispatch:g,outOfStockAction:u}=d,j=t=>{let e;return e=p.name.includes(p.productName)?p.name:`${p.productName} ${p.name}`,t?s(e,34,!0):e};return t(m,{children:[t("div",Object.assign({className:"text-container"},{children:[e(i,{width:24,height:24,color:r.content.placeholder}),e("div",{children:e(n,{width:40,height:40,imageUrl:p.image,alt:"Item",borderRadius:4},p.variantId)}),t("div",Object.assign({className:"tooltip-title-tag"},{children:[e(h,Object.assign({body:j(!1),placement:"bottom",delay:400,variant:"light"},{children:e(c,{children:j(!0)})})),e(l,{isVariant:!0,data:p,outOfStockAction:u})]}))]})),e(a,{Icon:()=>e(o,{width:24,height:24,color:r.content.placeholder}),onClick:()=>{g&&g({type:"variantUnselected",data:{productId:p.productId,variantId:p.variantId,collectionId:p.collectionId}}),d.onDelete&&d.onDelete()}})]})},g=t=>{const{data:o}=t;return e(d,{children:e(h,Object.assign({body:o.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e(n,{width:72,height:72,imageUrl:o.image,alt:"Item",borderRadius:4})}))})};export{g as VariantCardGridView,p as VariantCardListView};
|