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