@bikdotai/bik-component-library 0.0.264-beta.15 → 0.0.264-beta.16
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),e=require("react"),s=require("./AddVariableV2.styled.js"),i=require("./backIcon.js"),l=require("./closeIcon.js"),r=require("./plusIcon.js"),t=require("./rightFilled.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react/jsx-runtime"),e=require("react"),s=require("./AddVariableV2.styled.js"),i=require("./backIcon.js"),l=require("./closeIcon.js"),r=require("./plusIcon.js"),t=require("./rightFilled.js"),n=require("./undoIcon.js"),d=require("../button/Button.js"),o=require("../icon-button/IconButton.js"),c=require("../searchBar/searchBar.js"),b=require("../TypographyStyle.js");exports.default=j=>{const{data:u}=j,[p,v]=e.useState({}),[y,g]=e.useState(),[m,h]=e.useState(""),[x,V]=e.useState(""),[O,N]=e.useState(!0);e.useEffect((()=>{const a={};u.forEach((e=>{a[e.payloadVariables.displayName]=[]})),g(a)}),[u]),e.useEffect((()=>{if(x){j.data.filter((a=>Object.keys(a.payloadVariables.variables).filter((e=>{var s;return(null===(s=a.payloadVariables.variables[e].displayName)||void 0===s?void 0:s.toLowerCase().includes(x.toLowerCase()))||_(a.payloadVariables.variables[e])})).length>0)).length>0?N(!0):N(!1)}else N(!0)}),[x]);const f=(a,e)=>{const s=u.find((a=>a.payloadVariables.displayName===e));if(s){let i=s.payloadVariables;a.forEach(((a,e)=>{i=i.variables[a]})),v((a=>Object.assign(Object.assign({},a),{[e]:i})))}},_=a=>{let e=!1;if(a.isSubHeader&&a.variables){const s=Object.keys(a.variables);for(let i=0;i<s.length;i++){const l=s[i];if(a.variables&&a.variables[l].displayName.toLowerCase().includes(x.toLowerCase())){e=!0;break}}}return e},C=e=>a.jsx(d.Button,{disabled:!1,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:r.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(t.RightFilled,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),S=(e,s)=>a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{const a=[...y[m],s];f(a,m),g((e=>Object.assign(Object.assign({},e),{[m]:a})))}:()=>{j.customTrigger?(j.customTrigger(e),j.setShowVariable(!1)):j.setVariableValue(e.actualValue)}},{children:a.jsx(C,{item:e})}));return a.jsx(s.AddVariableStyled,Object.assign({id:"varList",onClick:a=>{a.stopPropagation()},pickerSize:j.pickerSize||"large"},{children:j.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a.jsx("div",Object.assign({onClick:()=>{j.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(o.IconButton,{iconButtonType:"default",Icon:l.default})}))]})),a.jsx("div",Object.assign({className:"search__bar"},{children:a.jsx(c.SearchBar,{width:"100%",isEnabled:!0,onChange:a=>{V(a)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!O&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(b.TitleSmall,{children:"No results found!"}),a.jsx(b.BodyCaption,{children:`Sorry we could not find any results for "${x}"`})]})),m&&y[m].length>0&&a.jsxs("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(o.IconButton,{Icon:i.default,style:{color:"#919191",display:"flex"},onClick:()=>{const a=y[m].slice(0,-1);f(a,m),g((e=>Object.assign(Object.assign({},e),{[m]:a}))),a.length||h("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(b.TitleSmall,{children:p[m].displayName}),p[m].description&&a.jsx(b.BodyCaption,{children:p[m].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(o.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{f([],m),g((a=>Object.assign(Object.assign({},a),{[m]:[]}))),h("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),a.jsx("div",Object.assign({className:"wrapper"},{children:a.jsx("div",Object.assign({className:"list__map"},{children:a.jsxs("div",Object.assign({className:"items"},{children:[!m&&j.data.map((e=>{var s,i,l,r;let t=[];return x&&(t=Object.keys(e.payloadVariables.variables).filter((a=>{var s;return(null===(s=e.payloadVariables.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(x.toLowerCase()))||_(e.payloadVariables.variables[a])}))),a.jsxs(a.Fragment,{children:[x?t.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null===(s=null==e?void 0:e.payloadVariables)||void 0===s?void 0:s.displayName})),a.jsx(b.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(i=null==e?void 0:e.payloadVariables)||void 0===i?void 0:i.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null===(l=null==e?void 0:e.payloadVariables)||void 0===l?void 0:l.displayName})),a.jsx(b.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(r=null==e?void 0:e.payloadVariables)||void 0===r?void 0:r.description}))]})),Object.keys(e.payloadVariables.variables).map((s=>{var i;return x?(null===(i=e.payloadVariables.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(x.toLowerCase()))||_(e.payloadVariables.variables[s])?a.jsx("div",Object.assign({onClick:e.payloadVariables.variables[s].isSubHeader?()=>{const a=[...y[e.payloadVariables.displayName],s];f(a,e.payloadVariables.displayName),g((s=>Object.assign(Object.assign({},s),{[e.payloadVariables.displayName]:a}))),h(e.payloadVariables.displayName)}:()=>{j.customTrigger?(j.customTrigger(e.payloadVariables.variables[s]),j.setShowVariable(!1)):j.setVariableValue(e.payloadVariables.variables[s].actualValue)}},{children:a.jsx(C,{item:e.payloadVariables.variables[s]})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.payloadVariables.variables[s].isSubHeader?()=>{const a=[...y[e.payloadVariables.displayName],s];f(a,e.payloadVariables.displayName),g((s=>Object.assign(Object.assign({},s),{[e.payloadVariables.displayName]:a}))),h(e.payloadVariables.displayName)}:()=>{j.customTrigger?(j.customTrigger(e.payloadVariables.variables[s]),j.setShowVariable(!1)):j.setVariableValue(e.payloadVariables.variables[s].actualValue)}},{children:a.jsx(C,{item:e.payloadVariables.variables[s]})}))}))]})})),m&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(p[m].variables).map(((e,s)=>{var i;return x?(null===(i=p[m].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(x.toLowerCase()))||_(p[m].variables[e])?S(p[m].variables[e],e):a.jsx(a.Fragment,{}):S(p[m].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as a,jsxs as e,Fragment as i}from"react/jsx-runtime";import{useState as s,useEffect as l}from"react";import{AddVariableStyled as r}from"./AddVariableV2.styled.js";import
|
|
1
|
+
import{jsx as a,jsxs as e,Fragment as i}from"react/jsx-runtime";import{useState as s,useEffect as l}from"react";import{AddVariableStyled as r}from"./AddVariableV2.styled.js";import t from"./backIcon.js";import o from"./closeIcon.js";import n from"./plusIcon.js";import{RightFilled as d}from"./rightFilled.js";import c from"./undoIcon.js";import{Button as b}from"../button/Button.js";import{IconButton as p}from"../icon-button/IconButton.js";import{SearchBar as m}from"../searchBar/searchBar.js";import{TitleSmall as v,BodyCaption as y}from"../TypographyStyle.js";const g=g=>{const{data:u}=g,[h,j]=s({}),[V,O]=s(),[f,N]=s(""),[_,k]=s(""),[C,w]=s(!0);l((()=>{const a={};u.forEach((e=>{a[e.payloadVariables.displayName]=[]})),O(a)}),[u]),l((()=>{if(_){g.data.filter((a=>Object.keys(a.payloadVariables.variables).filter((e=>{var i;return(null===(i=a.payloadVariables.variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(_.toLowerCase()))||T(a.payloadVariables.variables[e])})).length>0)).length>0?w(!0):w(!1)}else w(!0)}),[_]);const S=(a,e)=>{const i=u.find((a=>a.payloadVariables.displayName===e));if(i){let s=i.payloadVariables;a.forEach(((a,e)=>{s=s.variables[a]})),j((a=>Object.assign(Object.assign({},a),{[e]:s})))}},T=a=>{let e=!1;if(a.isSubHeader&&a.variables){const i=Object.keys(a.variables);for(let s=0;s<i.length;s++){const l=i[s];if(a.variables&&a.variables[l].displayName.toLowerCase().includes(_.toLowerCase())){e=!0;break}}}return e},I=e=>a(b,{disabled:!1,size:"chip",LeadingIcon:e.item.isSubHeader?void 0:n,TrailingIcon:()=>e.item.isSubHeader?a("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a(d,{})})):a(i,{}),buttonText:e.item.displayName}),L=(e,i)=>a("div",Object.assign({onClick:e.isSubHeader?()=>{const a=[...V[f],i];S(a,f),O((e=>Object.assign(Object.assign({},e),{[f]:a})))}:()=>{g.customTrigger?(g.customTrigger(e),g.setShowVariable(!1)):g.setVariableValue(e.actualValue)}},{children:a(I,{item:e})}));return a(r,Object.assign({id:"varList",onClick:a=>{a.stopPropagation()},pickerSize:g.pickerSize||"large"},{children:g.showVariable&&e("div",Object.assign({className:"popup"},{children:[e("div",Object.assign({className:"sticky__bar"},{children:[e("div",Object.assign({className:"header__bar"},{children:[a("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),a("div",Object.assign({onClick:()=>{g.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a(p,{iconButtonType:"default",Icon:o})}))]})),a("div",Object.assign({className:"search__bar"},{children:a(m,{width:"100%",isEnabled:!0,onChange:a=>{k(a)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!C&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a(v,{children:"No results found!"}),a(y,{children:`Sorry we could not find any results for "${_}"`})]})),f&&V[f].length>0&&e("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[e("div",Object.assign({className:"left__nav"},{children:[a(p,{Icon:t,style:{color:"#919191",display:"flex"},onClick:()=>{const a=V[f].slice(0,-1);S(a,f),O((e=>Object.assign(Object.assign({},e),{[f]:a}))),a.length||N("")}}),e("div",Object.assign({className:"block"},{children:[a(v,{children:h[f].displayName}),h[f].description&&a(y,{children:h[f].description})]}))]})),e("div",Object.assign({className:"right__nav"},{children:[a(p,{Icon:c,style:{display:"flex"},onClick:()=>{S([],f),O((a=>Object.assign(Object.assign({},a),{[f]:[]}))),N("")}}),a("div",{children:"First page"})]}))]}))]})),a("div",Object.assign({className:"wrapper"},{children:a("div",Object.assign({className:"list__map"},{children:e("div",Object.assign({className:"items"},{children:[!f&&g.data.map((s=>{var l,r,t,o;let n=[];return _&&(n=Object.keys(s.payloadVariables.variables).filter((a=>{var e;return(null===(e=s.payloadVariables.variables[a].displayName)||void 0===e?void 0:e.toLowerCase().includes(_.toLowerCase()))||T(s.payloadVariables.variables[a])}))),e(i,{children:[_?n.length>0?e("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null===(l=null==s?void 0:s.payloadVariables)||void 0===l?void 0:l.displayName})),a(y,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(r=null==s?void 0:s.payloadVariables)||void 0===r?void 0:r.description}))]})):a(i,{}):e("div",Object.assign({className:"block"},{children:[a("div",Object.assign({className:"heading__font"},{children:null===(t=null==s?void 0:s.payloadVariables)||void 0===t?void 0:t.displayName})),a(y,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null===(o=null==s?void 0:s.payloadVariables)||void 0===o?void 0:o.description}))]})),Object.keys(s.payloadVariables.variables).map((e=>{var l;return _?(null===(l=s.payloadVariables.variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(_.toLowerCase()))||T(s.payloadVariables.variables[e])?a("div",Object.assign({onClick:s.payloadVariables.variables[e].isSubHeader?()=>{const a=[...V[s.payloadVariables.displayName],e];S(a,s.payloadVariables.displayName),O((e=>Object.assign(Object.assign({},e),{[s.payloadVariables.displayName]:a}))),N(s.payloadVariables.displayName)}:()=>{g.customTrigger?(g.customTrigger(s.payloadVariables.variables[e]),g.setShowVariable(!1)):g.setVariableValue(s.payloadVariables.variables[e].actualValue)}},{children:a(I,{item:s.payloadVariables.variables[e]})})):a(i,{}):a("div",Object.assign({onClick:s.payloadVariables.variables[e].isSubHeader?()=>{const a=[...V[s.payloadVariables.displayName],e];S(a,s.payloadVariables.displayName),O((e=>Object.assign(Object.assign({},e),{[s.payloadVariables.displayName]:a}))),N(s.payloadVariables.displayName)}:()=>{g.customTrigger?(g.customTrigger(s.payloadVariables.variables[e]),g.setShowVariable(!1)):g.setVariableValue(s.payloadVariables.variables[e].actualValue)}},{children:a(I,{item:s.payloadVariables.variables[e]})}))}))]})})),f&&a("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(h[f].variables).map(((e,s)=>{var l;return _?(null===(l=h[f].variables[e].displayName)||void 0===l?void 0:l.toLowerCase().includes(_.toLowerCase()))||T(h[f].variables[e])?L(h[f].variables[e],e):a(i,{}):L(h[f].variables[e],e)}))}))}))]}))}))})),a("div",{className:"bottom__padding"})]}))}))};export{g as default};
|
|
@@ -5,7 +5,7 @@ import i from"styled-components";import{COLORS as t}from"../../constants/Theme.j
|
|
|
5
5
|
z-index: 11;
|
|
6
6
|
height: 100%;
|
|
7
7
|
width: 100%;
|
|
8
|
-
background-color: rgba(0, 0, 0, 0.
|
|
8
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
justify-content: flex-end;
|