@bikdotai/bik-component-library 0.0.281-beta.21 → 0.0.281-beta.22
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 e=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),a=require("../../assets/icons/chevronRightAlt.svg.js"),i=require("../../assets/icons/cross.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),a=require("../../assets/icons/chevronRightAlt.svg.js"),i=require("../../assets/icons/cross.svg.js"),t=require("../../assets/icons/plus.svg.js"),l=require("../../assets/icons/undo.svg.js"),r=require("react"),n=require("./AddVariableV2.styled.js"),c=require("../button/Button.js"),o=require("../icon-button/IconButton.js"),d=require("../searchBar/searchBar.js"),u=require("../tooltips/Tooltip.js"),b=require("../../constants/Theme.js"),j=require("../TypographyStyle.js");exports.AddVariableV2=v=>{const{data:m}=v,[g,p]=r.useState({}),[h,x]=r.useState(),[y,O]=r.useState(""),[f,N]=r.useState(""),[V,S]=r.useState(!0),C=/^[^.]*\.[^.]*$/;r.useEffect((()=>{const e={};m.forEach((s=>{e[s.displayName]=[]})),x(e)}),[m]),r.useEffect((()=>{if(f){v.data.filter((e=>Object.keys(e.variables).filter((s=>{var a;return(null===(a=e.variables[s].displayName)||void 0===a?void 0:a.toLowerCase().includes(f.toLowerCase()))||k(e.variables[s])})).length>0)).length>0?S(!0):S(!1)}else S(!0)}),[f]);const _=(e,s)=>{const a=m.find((e=>e.displayName===s));if(a){let i=a;e.forEach(((e,s)=>{i=i.variables[e]})),p((e=>Object.assign(Object.assign({},e),{[s]:i})))}},k=e=>{let s=!1;if(e.isSubHeader&&e.variables){const a=Object.keys(e.variables);for(let i=0;i<a.length;i++){const t=a[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(f.toLowerCase())){s=!0;break}}}return s},w=s=>{const a=s.item.description;return e.jsx(e.Fragment,{children:e.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:e.jsx(j.BodyCaption,Object.assign({color:b.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:s.item.isAvailable?a?`1.${a}\n2.Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:e.jsx("div",{children:e.jsx(B,{item:s.item})})}))})},B=s=>e.jsx(c.Button,{darkMode:v.enableVariable?v.enableVariable:s.item.isAvailable,size:"chip",LeadingIcon:s.item.isSubHeader?void 0:t.default,TrailingIcon:()=>s.item.isSubHeader?e.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:e.jsx(a.default,{})})):e.jsx(e.Fragment,{}),buttonText:s.item.displayName}),T=(s,a)=>e.jsx("div",Object.assign({onClick:s.isSubHeader?()=>{const e=[...h[y],a];_(e,y),x((s=>Object.assign(Object.assign({},s),{[y]:e})))}:()=>{if(v.customTrigger)v.customTrigger(s),v.setShowVariable(!1);else if(v.isEvaluationList)if(s.actualValue.match(C)){const e=s.actualValue.replace("{{","").replace("}}","").split("."),a=e[0]+`['${e[1]}']`;v.setVariableValue(a)}else{const e=s.actualValueEval?s.actualValueEval:s.actualValue;v.setVariableValue(e)}else v.setVariableValue(s.actualValue)}},{children:e.jsx(w,{item:s})})),L=(e,s)=>{const a=[...h[e.displayName],s];_(a,e.displayName),x((s=>Object.assign(Object.assign({},s),{[e.displayName]:a}))),O(e.displayName)},q=(e,s)=>{if(v.customTrigger)v.customTrigger(e.variables[s]),v.setShowVariable(!1);else if(v.isEvaluationList){const a=e.variables[s];if(a.actualValue.match(C)){const e=a.actualValue.replace("{{","").replace("}}","").split("."),s=e[0]+`['${e[1]}']`;v.setVariableValue(s)}else{const e=a.actualValueEval?a.actualValueEval:a.actualValue;v.setVariableValue(e)}}else v.setVariableValue(e.variables[s].actualValue)},E=v.isModalState?void 0:{top:"small"===v.pickerSize?"300px":"60px",left:`${v.leftPosition?v.leftPosition+24:430}px`};return e.jsx(n.AddVariableStyled,Object.assign({id:"varList",style:E,onClick:e=>{e.stopPropagation()},pickerSize:v.pickerSize||"large",isModalState:v.isModalState},{children:v.showVariable&&e.jsxs("div",Object.assign({className:"popup"},{children:[e.jsxs("div",Object.assign({className:"sticky__bar"},{children:[e.jsxs("div",Object.assign({className:"header__bar"},{children:[e.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),e.jsx("div",Object.assign({onClick:()=>{v.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:e.jsx(o.IconButton,{iconButtonType:"default",Icon:i.default})}))]})),e.jsx("div",Object.assign({className:"search__bar"},{children:e.jsx(d.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{N(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!V&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[e.jsx(j.TitleSmall,{children:"No results found!"}),e.jsx(j.BodyCaption,{children:`Sorry we could not find any results for "${f}"`})]})),y&&h[y].length>0&&e.jsxs("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[e.jsxs("div",Object.assign({className:"left__nav"},{children:[e.jsx(o.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{const e=h[y].slice(0,-1);_(e,y),x((s=>Object.assign(Object.assign({},s),{[y]:e}))),e.length||O("")}}),e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx(j.TitleSmall,{children:g[y].displayName}),g[y].description&&e.jsx(j.BodyCaption,{children:g[y].description})]}))]})),e.jsxs("div",Object.assign({className:"right__nav"},{children:[e.jsx(o.IconButton,{Icon:l.default,style:{display:"flex"},onClick:()=>{_([],y),x((e=>Object.assign(Object.assign({},e),{[y]:[]}))),O("")}}),e.jsx("div",{children:"First page"})]}))]}))]})),e.jsx("div",Object.assign({className:"wrapper"},{children:e.jsx("div",Object.assign({className:"list__map"},{children:e.jsxs("div",Object.assign({className:"items"},{children:[!y&&v.data.map((s=>{let a=[];return f&&(a=Object.keys(s.variables).filter((e=>{var a;return(null===(a=s.variables[e].displayName)||void 0===a?void 0:a.toLowerCase().includes(f.toLowerCase()))||k(s.variables[e])}))),e.jsxs(e.Fragment,{children:[f?a.length>0?e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e.jsx(j.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})):e.jsx(e.Fragment,{}):e.jsxs("div",Object.assign({className:"block"},{children:[e.jsx("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e.jsx(j.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})),Object.keys(s.variables).map((a=>{var i;return f?(null===(i=s.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(f.toLowerCase()))||k(s.variables[a])?e.jsx("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>L(s,a):()=>q(s,a)},{children:e.jsx(w,{item:s.variables[a]})})):e.jsx(e.Fragment,{}):e.jsx("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>L(s,a):()=>q(s,a)},{children:e.jsx(w,{item:s.variables[a]})}))}))]})})),y&&e.jsx("div",Object.assign({className:"list__map"},{children:e.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(g[y].variables).map(((s,a)=>{var i;return f?(null===(i=g[y].variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(f.toLowerCase()))||k(g[y].variables[s])?T(g[y].variables[s],s):e.jsx(e.Fragment,{}):T(g[y].variables[s],s)}))}))}))]}))}))})),e.jsx("div",{className:"bottom__padding"})]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import s from"../../assets/icons/back_icon.svg.js";import l from"../../assets/icons/chevronRightAlt.svg.js";import t from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import
|
|
1
|
+
import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import s from"../../assets/icons/back_icon.svg.js";import l from"../../assets/icons/chevronRightAlt.svg.js";import t from"../../assets/icons/cross.svg.js";import r from"../../assets/icons/plus.svg.js";import n from"../../assets/icons/undo.svg.js";import{useState as c,useEffect as o}from"react";import{AddVariableStyled as d}from"./AddVariableV2.styled.js";import{Button as b}from"../button/Button.js";import{IconButton as m}from"../icon-button/IconButton.js";import{SearchBar as v}from"../searchBar/searchBar.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{COLORS as u}from"../../constants/Theme.js";import{TitleSmall as g,BodyCaption as h}from"../TypographyStyle.js";const j=j=>{const{data:f}=j,[y,O]=c({}),[N,V]=c(),[_,k]=c(""),[C,w]=c(""),[S,L]=c(!0),T=/^[^.]*\.[^.]*$/;o((()=>{const e={};f.forEach((a=>{e[a.displayName]=[]})),V(e)}),[f]),o((()=>{if(C){j.data.filter((e=>Object.keys(e.variables).filter((a=>{var i;return(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(C.toLowerCase()))||E(e.variables[a])})).length>0)).length>0?L(!0):L(!1)}else L(!0)}),[C]);const x=(e,a)=>{const i=f.find((e=>e.displayName===a));if(i){let s=i;e.forEach(((e,a)=>{s=s.variables[e]})),O((e=>Object.assign(Object.assign({},e),{[a]:s})))}},E=e=>{let a=!1;if(e.isSubHeader&&e.variables){const i=Object.keys(e.variables);for(let s=0;s<i.length;s++){const l=i[s];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(C.toLowerCase())){a=!0;break}}}return a},I=a=>{const s=a.item.description;return e(i,{children:e(p,Object.assign({body:"",tooltipContent:e(h,Object.assign({color:u.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:a.item.isAvailable?s?`1.${s}\n2.Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:e("div",{children:e(B,{item:a.item})})}))})},B=a=>e(b,{darkMode:j.enableVariable?j.enableVariable:a.item.isAvailable,size:"chip",LeadingIcon:a.item.isSubHeader?void 0:r,TrailingIcon:()=>a.item.isSubHeader?e("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:e(l,{})})):e(i,{}),buttonText:a.item.displayName}),H=(a,i)=>e("div",Object.assign({onClick:a.isSubHeader?()=>{const e=[...N[_],i];x(e,_),V((a=>Object.assign(Object.assign({},a),{[_]:e})))}:()=>{if(j.customTrigger)j.customTrigger(a),j.setShowVariable(!1);else if(j.isEvaluationList)if(a.actualValue.match(T)){const e=a.actualValue.replace("{{","").replace("}}","").split("."),i=e[0]+`['${e[1]}']`;j.setVariableValue(i)}else{const e=a.actualValueEval?a.actualValueEval:a.actualValue;j.setVariableValue(e)}else j.setVariableValue(a.actualValue)}},{children:e(I,{item:a})})),$=(e,a)=>{const i=[...N[e.displayName],a];x(i,e.displayName),V((a=>Object.assign(Object.assign({},a),{[e.displayName]:i}))),k(e.displayName)},A=(e,a)=>{if(j.customTrigger)j.customTrigger(e.variables[a]),j.setShowVariable(!1);else if(j.isEvaluationList){const i=e.variables[a];if(i.actualValue.match(T)){const e=i.actualValue.replace("{{","").replace("}}","").split("."),a=e[0]+`['${e[1]}']`;j.setVariableValue(a)}else{const e=i.actualValueEval?i.actualValueEval:i.actualValue;j.setVariableValue(e)}}else j.setVariableValue(e.variables[a].actualValue)},z=j.isModalState?void 0:{top:"small"===j.pickerSize?"300px":"60px",left:`${j.leftPosition?j.leftPosition+24:430}px`};return e(d,Object.assign({id:"varList",style:z,onClick:e=>{e.stopPropagation()},pickerSize:j.pickerSize||"large",isModalState:j.isModalState},{children:j.showVariable&&a("div",Object.assign({className:"popup"},{children:[a("div",Object.assign({className:"sticky__bar"},{children:[a("div",Object.assign({className:"header__bar"},{children:[e("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),e("div",Object.assign({onClick:()=>{j.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:e(m,{iconButtonType:"default",Icon:t})}))]})),e("div",Object.assign({className:"search__bar"},{children:e(v,{width:"100%",isEnabled:!0,onChange:e=>{w(e)},onEnter:()=>{},placeholder:"Search...",variant:"default"})})),!S&&a("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[e(g,{children:"No results found!"}),e(h,{children:`Sorry we could not find any results for "${C}"`})]})),_&&N[_].length>0&&a("div",Object.assign({className:"nav__bar",style:{marginTop:8}},{children:[a("div",Object.assign({className:"left__nav"},{children:[e(m,{Icon:s,style:{color:"#919191",display:"flex"},onClick:()=>{const e=N[_].slice(0,-1);x(e,_),V((a=>Object.assign(Object.assign({},a),{[_]:e}))),e.length||k("")}}),a("div",Object.assign({className:"block"},{children:[e(g,{children:y[_].displayName}),y[_].description&&e(h,{children:y[_].description})]}))]})),a("div",Object.assign({className:"right__nav"},{children:[e(m,{Icon:n,style:{display:"flex"},onClick:()=>{x([],_),V((e=>Object.assign(Object.assign({},e),{[_]:[]}))),k("")}}),e("div",{children:"First page"})]}))]}))]})),e("div",Object.assign({className:"wrapper"},{children:e("div",Object.assign({className:"list__map"},{children:a("div",Object.assign({className:"items"},{children:[!_&&j.data.map((s=>{let l=[];return C&&(l=Object.keys(s.variables).filter((e=>{var a;return(null===(a=s.variables[e].displayName)||void 0===a?void 0:a.toLowerCase().includes(C.toLowerCase()))||E(s.variables[e])}))),a(i,{children:[C?l.length>0?a("div",Object.assign({className:"block"},{children:[e("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e(h,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})):e(i,{}):a("div",Object.assign({className:"block"},{children:[e("div",Object.assign({className:"heading__font"},{children:null==s?void 0:s.displayName})),e(h,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==s?void 0:s.description}))]})),Object.keys(s.variables).map((a=>{var l;return C?(null===(l=s.variables[a].displayName)||void 0===l?void 0:l.toLowerCase().includes(C.toLowerCase()))||E(s.variables[a])?e("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>$(s,a):()=>A(s,a)},{children:e(I,{item:s.variables[a]})})):e(i,{}):e("div",Object.assign({onClick:s.variables[a].isSubHeader?()=>$(s,a):()=>A(s,a)},{children:e(I,{item:s.variables[a]})}))}))]})})),_&&e("div",Object.assign({className:"list__map"},{children:e("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(y[_].variables).map(((a,s)=>{var l;return C?(null===(l=y[_].variables[a].displayName)||void 0===l?void 0:l.toLowerCase().includes(C.toLowerCase()))||E(y[_].variables[a])?H(y[_].variables[a],a):e(i,{}):H(y[_].variables[a],a)}))}))}))]}))}))})),e("div",{className:"bottom__padding"})]}))}))};export{j as AddVariableV2};
|