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