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