@bikdotai/bik-component-library 0.0.376 → 0.0.377
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/input-with-vars/InputWithVariables.d.ts +1 -0
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +2 -2
- package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +1 -0
- package/dist/esm/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +2 -2
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),d=require("../add-variableV2/AddVariableV2SideModal.js"),t=require("../add-variableV2/AddVariableV2.js"),s=require("../../constants/Theme.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../input/Input.js"),n=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
|
|
2
|
-
margin-bottom:
|
|
2
|
+
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?s.COLORS.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;exports.InputWithVariables=r=>{var s;const c=l.useRef(null),[b,
|
|
6
|
+
`;exports.InputWithVariables=r=>{var s;const c=l.useRef(null),[b,g]=l.useState(!1),[V]=l.useState(i.v4()),[p,h]=l.useState(),[T,j]=l.useState(r.prevVariable),[x,y]=l.useState(!1),[f,S]=l.useState(!1),[m,q]=l.useState("");return l.useEffect((()=>{p&&p.actualValue&&(r.allowMix?j((e=>({actualValue:e.actualValue+p.actualValue,variableType:"string"}))):j((e=>({actualValue:p.actualValue,variableType:p.variableType,needsFetching:p.needsFetching}))))}),[p]),l.useEffect((()=>{r.onChange(T)}),[T]),l.useEffect((()=>{(null==r?void 0:r.errorMessage)&&q(null==r?void 0:r.errorMessage)}),[null==r?void 0:r.errorMessage]),e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(T.actualValue)},{children:[e.jsx(o.Input,{id:V,ref:c,skipFocus:!0,textControl:!0,isActive:b,value:T.actualValue,validate:e=>[!0,""],errorMessage:m,placeholder:"Add a value",onChangeText:function(e,a){if(q(""),r.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else r.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;g(!0),S(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||y(!0)},onBlur:e=>{var a,l,r,i,d,t,s;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(c.current&&c.current.focus(),g(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?g(!0):(g(!1),y(!1),S(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[T.actualValue&&r.showHelp?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${T.variableType}`})})):e.jsx("div",{}),f&&e.jsx("div",Object.assign({style:{marginTop:m?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:r.addVarBoxRight,id:"addVar",onClick:()=>{y(!x)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),x&&!r.showSideModal&&e.jsx(t.AddVariableV2,{data:r.variablesList,showVariable:!0,setShowVariable:()=>{y(!1)},variableValue:p,setVariableValue:h,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?c.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==V&&(y(!1),S(!1),g(!1)):(y(!1),S(!1),g(!1))}}),x&&r.showSideModal&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!==(s=r.variablesList)&&void 0!==s?s:[],showVariable:x,setShowVariable:()=>{y(!1)},placeholder:"Add a variable",customTrigger:e=>{h({actualValue:e.actualValue,variableType:"string"})},onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?c.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==V&&(y(!1),S(!1),g(!1)):(y(!1),S(!1),g(!1))}})]}))};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
5
|
-
width: ${e=>e.channel===r.CHANNEL_TYPE.WHATSAPP?"236px":"
|
|
5
|
+
width: ${e=>e.channel===r.CHANNEL_TYPE.WHATSAPP?"236px":"300px"};
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,
|
|
20
|
+
`,d=s.default.forwardRef(((t,i)=>{let{display_content:o,channel:s,template:l}=t;return e.jsx("div",{children:e.jsxs(p,Object.assign({channel:s},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s===r.CHANNEL_TYPE.WHATSAPP?236:300,height:443}}),e.jsx(n,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{template:l,channel:s,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));d.displayName="MobilePreview",exports.default=d;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import{jsxs as e,jsx as a}from"react/jsx-runtime";import l from"../../assets/icons/PlusIcon.js";import{useRef as r,useState as i,useEffect as d}from"react";import o from"styled-components";import{v4 as t}from"uuid";import{AddVariableV2SideModal as s}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as n}from"../add-variableV2/AddVariableV2.js";import{COLORS as u}from"../../constants/Theme.js";import{AddVariableStyled as c}from"../add-variableV2/AddVariableBox.styled.js";import{Input as v}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";const g=o=>{var u;const g=r(null),[h,m]=i(!1),[V]=i(t()),[T,f]=i(),[y,
|
|
2
|
-
margin-bottom:
|
|
1
|
+
import{jsxs as e,jsx as a}from"react/jsx-runtime";import l from"../../assets/icons/PlusIcon.js";import{useRef as r,useState as i,useEffect as d}from"react";import o from"styled-components";import{v4 as t}from"uuid";import{AddVariableV2SideModal as s}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as n}from"../add-variableV2/AddVariableV2.js";import{COLORS as u}from"../../constants/Theme.js";import{AddVariableStyled as c}from"../add-variableV2/AddVariableBox.styled.js";import{Input as v}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";const g=o=>{var u;const g=r(null),[h,m]=i(!1),[V]=i(t()),[T,f]=i(),[y,x]=i(o.prevVariable),[j,w]=i(!1),[S,M]=i(!1),[N,A]=i("");return d((()=>{T&&T.actualValue&&(o.allowMix?x((e=>({actualValue:e.actualValue+T.actualValue,variableType:"string"}))):x((e=>({actualValue:T.actualValue,variableType:T.variableType,needsFetching:T.needsFetching}))))}),[T]),d((()=>{o.onChange(y)}),[y]),d((()=>{(null==o?void 0:o.errorMessage)&&A(null==o?void 0:o.errorMessage)}),[null==o?void 0:o.errorMessage]),e(b,Object.assign({isVar:/^{{.*}}$/.test(y.actualValue)},{children:[a(v,{id:V,ref:g,skipFocus:!0,textControl:!0,isActive:h,value:y.actualValue,validate:e=>[!0,""],errorMessage:N,placeholder:"Add a value",onChangeText:function(e,a){if(A(""),o.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||x({actualValue:"",variableType:"string"})}else o.allowMix?x({actualValue:e,variableType:"string"}):x({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;m(!0),M(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||j||w(!0)},onBlur:e=>{var a,l,r,i,d,o,t;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(o=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(g.current&&g.current.focus(),m(!0)):"Search..."===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?m(!0):(m(!1),w(!1),M(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[y.actualValue&&o.showHelp?a("div",Object.assign({style:{marginTop:4}},{children:a(p,{children:`This value is of type ${y.variableType}`})})):a("div",{}),S&&a("div",Object.assign({style:{marginTop:N?"-24px":"0px"}},{children:a(c,Object.assign({right:o.addVarBoxRight,id:"addVar",onClick:()=>{w(!j)}},{children:e("div",Object.assign({className:"add"},{children:[a(l,{color:"white"}),a("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),j&&!o.showSideModal&&a(n,{data:o.variablesList,showVariable:!0,setShowVariable:()=>{w(!1)},variableValue:T,setVariableValue:f,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?g.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==V&&(w(!1),M(!1),m(!1)):(w(!1),M(!1),m(!1))}}),j&&o.showSideModal&&a(s,{zIndex:2e3,data:null!==(u=o.variablesList)&&void 0!==u?u:[],showVariable:j,setShowVariable:()=>{w(!1)},placeholder:"Add a variable",customTrigger:e=>{f({actualValue:e.actualValue,variableType:"string"})},onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?g.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==V&&(w(!1),M(!1),m(!1)):(w(!1),M(!1),m(!1))}})]}))},b=o.div`
|
|
2
|
+
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?u.stroke.brand:"black"};
|
|
5
5
|
}
|
|
@@ -2,7 +2,7 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
|
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
5
|
-
width: ${e=>e.channel===r.WHATSAPP?"236px":"
|
|
5
|
+
width: ${e=>e.channel===r.WHATSAPP?"236px":"300px"};
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:
|
|
20
|
+
`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
|