@bikdotai/bik-component-library 0.0.488-beta.3 → 0.0.488-beta.4
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 +2 -0
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +2 -0
- package/dist/esm/components/input-with-vars/InputWithVariables.js +2 -2
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
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"),t=require("uuid"),i=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),
|
|
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"),t=require("uuid"),i=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../input/Input.js"),o=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;exports.InputWithVariables=r=>{let{type:i,addVarBoxRight:c,allowMix:b,onChange:
|
|
6
|
+
`;exports.InputWithVariables=r=>{let{type:i,addVarBoxRight:c,allowMix:b,onChange:h,prevVariable:g,variablesList:V,onBlur:p,onlyVariables:x,placeHolder:T,showAddButton:j=!0,showHelp:y,showSideVariablePanel:f,errorMessage:m,showSideModal:S,maxCharLimit:q,noMaxCharCheck:C,labelText:w,labelElement:A,isRequired:O=!1,hintText:k}=r;const B=l.useRef(!0),M=l.useRef(null),[L,N]=l.useState(!1),[R]=l.useState(t.v4()),[E,I]=l.useState(),[F,P]=l.useState(g),[Z,$]=l.useState(!1),[z,H]=l.useState(!1),[W,_]=l.useState(0);return l.useEffect((()=>{if(E&&E.actualValue)if(b){if(P((e=>{return{actualValue:(a=e.actualValue,l=E.actualValue,r=W,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),M.current){_(M.current.selectionStart);const e=W+E.actualValue.length+2;M.current.setSelectionRange(e,e),_(e)}}else P((e=>({actualValue:E.actualValue,variableType:E.variableType,needsFetching:E.needsFetching})))}),[E]),l.useEffect((()=>{B.current?B.current=!1:h(F)}),[F]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(F.actualValue)},{children:[e.jsx(n.Input,{isRequired:O,hintText:k,type:null!=i?i:"text",id:R,ref:M,skipFocus:!0,isActive:L,value:F.actualValue,validate:e=>[!0,""],errorMessage:m,noMaxCharCheck:C,maxCharLimit:q,labelText:w,labelElement:A,placeholder:T||"Add a value",onClick:e=>{M.current&&_(M.current.selectionStart)},onChangeText:(e,a)=>{if(M.current&&_(M.current.selectionStart),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||P({actualValue:"",variableType:"string"})}else P(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{N(!0),H(!0),document.getElementById("varList")&&!Z&&$(!0)},onBlur:e=>{var a,l,r,t,i,d,s;null==p||p(e,F),"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===(t=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===t?void 0:t.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(M.current&&M.current.focus(),N(!0)):"search-bar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?N(!0):(N(!1),$(!1),H(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[F.actualValue&&y&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${F.variableType}`})})),j&&z&&e.jsx("div",Object.assign({style:{marginTop:m?"-24px":"0px"}},{children:e.jsx(u.AddVariableStyled,Object.assign({right:c,id:"addVar",onClick:()=>{$(!Z)}},{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"}))]}))}))}))]})),!f&&Z&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{$(!1)},variableValue:E,setVariableValue:I,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,t,i,d;"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===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==R&&($(!1),H(!1),N(!1)):($(!1),H(!1),N(!1))}})]})),f&&Z&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:Z,setShowVariable:()=>{$(!1)},placeholder:"Add a variable",customTrigger:e=>{I({actualValue:e.actualValue,variableType:"string"}),P(e)},onSearchBlur:e=>{var a,l,r,t,i,d;"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===(i=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===i?void 0:i.includes("sc-dZoequ "))?M.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==R&&($(!1),H(!1),N(!1)):($(!1),H(!1),N(!1))}})]})};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as
|
|
1
|
+
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as h}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";const m=o=>{let{type:s,addVarBoxRight:m,allowMix:g,onChange:V,prevVariable:T,variablesList:y,onBlur:f,onlyVariables:x,placeHolder:j,showAddButton:C=!0,showHelp:S,showSideVariablePanel:w,errorMessage:k,showSideModal:A,maxCharLimit:B,noMaxCharCheck:N,labelText:L,labelElement:M,isRequired:O=!1,hintText:q}=o;const E=i(!0),I=i(null),[R,F]=t(!1),[Z]=t(n()),[$,z]=t(),[H,P]=t(T),[D,W]=t(!1),[G,J]=t(!1),[K,Q]=t(0);return d((()=>{if($&&$.actualValue)if(g){if(P((e=>{return{actualValue:(a=e.actualValue,l=$.actualValue,r=K,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),I.current){Q(I.current.selectionStart);const e=K+$.actualValue.length+2;I.current.setSelectionRange(e,e),Q(e)}}else P((e=>({actualValue:$.actualValue,variableType:$.variableType,needsFetching:$.needsFetching})))}),[$]),d((()=>{E.current?E.current=!1:V(H)}),[H]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(H.actualValue)},{children:[l(h,{isRequired:O,hintText:q,type:null!=s?s:"text",id:Z,ref:I,skipFocus:!0,isActive:R,value:H.actualValue,validate:e=>[!0,""],errorMessage:k,noMaxCharCheck:N,maxCharLimit:B,labelText:L,labelElement:M,placeholder:j||"Add a value",onClick:e=>{I.current&&Q(I.current.selectionStart)},onChangeText:(e,a)=>{if(I.current&&Q(I.current.selectionStart),x){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||P({actualValue:"",variableType:"string"})}else P(g?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{F(!0),J(!0),document.getElementById("varList")&&!D&&W(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==f||f(e,H),"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===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(I.current&&I.current.focus(),F(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?F(!0):(F(!1),W(!1),J(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[H.actualValue&&S&&l("div",Object.assign({style:{marginTop:4}},{children:l(p,{children:`This value is of type ${H.variableType}`})})),C&&G&&l("div",Object.assign({style:{marginTop:k?"-24px":"0px"}},{children:l(v,Object.assign({right:m,id:"addVar",onClick:()=>{W(!D)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!w&&D&&l(u,{data:y,showVariable:!0,setShowVariable:()=>{W(!1)},variableValue:$,setVariableValue:z,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"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===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?I.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==Z&&(W(!1),J(!1),F(!1)):(W(!1),J(!1),F(!1))}})]})),w&&D&&l(c,{zIndex:2e3,data:null!=y?y:[],showVariable:D,setShowVariable:()=>{W(!1)},placeholder:"Add a variable",customTrigger:e=>{z({actualValue:e.actualValue,variableType:"string"}),P(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"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===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?I.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==Z&&(W(!1),J(!1),F(!1)):(W(!1),J(!1),F(!1))}})]})},b=o.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?s.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;export{
|
|
6
|
+
`;export{m as InputWithVariables};
|