@bikdotai/bik-component-library 0.0.567-beta.b-5 → 0.0.567
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/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/input/Input.d.ts +0 -2
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/searchBar/searchBar.d.ts +0 -3
- package/dist/cjs/components/searchBar/searchBar.js +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/input/Input.d.ts +0 -2
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/searchBar/searchBar.d.ts +0 -3
- package/dist/esm/components/searchBar/searchBar.js +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonProps } from '../button/model';
|
|
3
2
|
export type InputVariant = 'default' | 'small';
|
|
4
3
|
export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
|
|
5
4
|
export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
|
|
@@ -34,7 +33,6 @@ export interface InputProps {
|
|
|
34
33
|
button?: {
|
|
35
34
|
text: string;
|
|
36
35
|
onClick?: () => void;
|
|
37
|
-
buttonProps?: ButtonProps;
|
|
38
36
|
};
|
|
39
37
|
suffixText?: string;
|
|
40
38
|
prefixText?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),l=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),c=require("./context/InputStyleProvider.js"),u=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,x,p,g,j,f,m;const{placeholder:y,leftIcon:b,rightIcon:C,labelText:O,maxCharLimit:T,isRequired:I,hintText:S,type:w,state:E,validate:k,variant:q,button:H,suffixText:L,prefixText:M,onChangeText:B,value:F,noErrorHint:R,reset:P,rangeValidation:z,noKeyDownChange:A,version:D,noMaxCharCheck:N,labelElement:_,autoGrow:K,minHeight:G,maxHeight:W,labelTextBold:V,truncateText:$,maxCharLimitPosition:J}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},d),Q=null==b?void 0:b.icon,U=null==C?void 0:C.icon,[X,Y]=n.useState(!1),[Z,ee]=n.useState(!1),[te,ne]=n.useState(),ie="small"===q?"18px":"22px",se=n.useContext(c.InputStyleContext),[le,re]=n.useState(),ae=n.useRef(null),oe=null!=h?h:ae;n.useEffect((()=>{re(F),!F&&K&&(oe.current.style.height=G||"48px")}),[F]),n.useEffect((()=>{var e;oe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,oe.current))}),[oe]),n.useEffect((()=>{const e=oe.current;if(e&&["phonenumber","zip","number"].includes(w))return e.addEventListener("wheel",he,{passive:!1}),()=>{e.removeEventListener("wheel",he)}}),[]),n.useEffect((()=>{P&&re("")}),[P]),n.useEffect((()=>{var e;ee(!!d.isActive),d.isActive&&(null===(e=oe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{ne(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;Y(!1),("invalid"===d.state||te||"disabled-invalid"===d.state)&&Y(!0),"active"===d.state&&(null===(e=oe.current)||void 0===e||e.focus())}),[d.state,te]),n.useEffect((()=>{Y(!!te||"invalid"===d.state)}),[te,d.state]);const ce=function(e){if(s.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},ue=()=>"zip"===w?6:2e3,de=e=>{const t=0!==T?T:ue();if(A||B(F||"",e),N)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},he=e=>{e.preventDefault()},ve=e=>{let t=e.target.value;const n=0!==T?T+1:ue();!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),B(t,e),d.textControl||re(t),K&&(oe.current.style.height=`${oe.current.scrollHeight}px`,t||(oe.current.style.height=G||"48px"));const i=k||s.validateInput;if(!i||!s.isFunction(i))return;const[l,r]=i(t,w,z);Y(!l),ne(d.errorMessage?d.errorMessage:r)},xe=e=>{var t;d.skipFocus||ee(!0),ce(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},pe=e=>{var t;d.skipFocus||ee(!1),ce(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},ge=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==w&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==se?void 0:se.input)&&void 0!==t?t:{},ref:oe,type:["phonenumber","zip","number"].includes(w)?"number":w,value:le,onFocus:e=>xe(e),onBlur:e=>pe(e),placeholder:y||"Enter here",onChange:ve,onClick:e=>ce(d.onClick),onKeyDown:e=>de(e)}),"multiline"===w&&e.jsx("textarea",{"data-test":d["data-test"],value:le,ref:oe,onFocus:e=>xe(e),onBlur:e=>pe(e),onClick:e=>ce(d.onClick),placeholder:y||"Enter here",onChange:ve,onKeyDown:e=>de(e),maxLength:T>0?T:void 0})]})};return e.jsxs(u.RootContainer,Object.assign({width:d.width,height:d.height,state:E,type:w,style:null!==(v=null==se?void 0:se.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!S||!!te)&&e.jsxs(u.InputFooter,Object.assign({invalid:!!te},{children:[!!te&&e.jsx(o.default,{width:16,height:16}),te||S]})),T>0&&"BOTTOM"===J&&e.jsxs(u.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(p=null===(x=d.value)||void 0===x?void 0:x.length)&&void 0!==p?p:0,"/",T]}))]})),e.jsxs(u.InputWrapper,Object.assign({variant:q,state:E,width:d.width,isActive:"active"===E||Z,isInvalid:X,style:null!==(g=null==se?void 0:se.InputWrapper)&&void 0!==g?g:{},version:D,height:d.height},{children:[!!Q&&e.jsx(u.IconHolder,Object.assign({variant:q,iconSize:ie,onClick:()=>ce(null==b?void 0:b.callback),isLeft:!0,style:null!==(j=null==se?void 0:se.IconHolder)&&void 0!==j?j:{}},{children:e.jsx(Q,{})})),!!M&&e.jsx(u.PrefixHolder,Object.assign({variant:q},{children:M})),"default"===q&&e.jsx(u.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:W,autoGrow:K},{children:ge()})),"small"===q&&e.jsx(u.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:ge()})),!!U&&e.jsx(u.IconHolder,Object.assign({variant:q,iconSize:ie,onClick:()=>ce(null==C?void 0:C.callback),isLeft:!1},{children:e.jsx(U,{})})),!!L&&e.jsx(u.SuffixHolder,Object.assign({variant:q},{children:L})),H&&H.text&&e.jsx(i.Button,{buttonText:H.text,onClick:()=>ce(null==H?void 0:H.onClick)})]})),(!!O||!!T)&&e.jsxs(u.InputHeader,Object.assign({invalid:X},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?e.jsxs(r.TitleSmall,{children:[O,I?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[O,I?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(l.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:X?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),T>0&&"TOP"===J&&e.jsxs(u.MaxCharStyle,{children:[null!==(m=null===(f=d.value)||void 0===f?void 0:f.length)&&void 0!==m?m:0,"/",T]})]}))]}))}));d.displayName="Input",exports.Input=d;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ButtonProps } from '../button/model';
|
|
2
1
|
import { InputVariant } from '../input/Input';
|
|
3
2
|
export interface SearchBarProps {
|
|
4
3
|
width: string;
|
|
@@ -12,7 +11,5 @@ export interface SearchBarProps {
|
|
|
12
11
|
reset?: boolean;
|
|
13
12
|
onClickCross?: () => void;
|
|
14
13
|
isActive?: boolean;
|
|
15
|
-
suffixButton?: ButtonProps;
|
|
16
|
-
searchValue?: string;
|
|
17
14
|
}
|
|
18
15
|
export declare const SearchBar: (props: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/searchIcon.js"),s=require("react"),a=require("../../assets/icons/cross.svg.js"),r=require("../input/Input.js");exports.SearchBar=n=>{const{isEnabled:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/searchIcon.js"),s=require("react"),a=require("../../assets/icons/cross.svg.js"),r=require("../input/Input.js");exports.SearchBar=n=>{const{isEnabled:c,onEnter:i,placeholder:o,width:l,variant:u,validate:d,isActive:h}=n,[v,f]=s.useState("search"),[p,g]=s.useState("default"),[C,b]=s.useState(h?"active":c?"none":"disabled"),[j,k]=s.useState(n.initialValue||"");s.useEffect((()=>{b(h?"active":c?"none":"disabled")}),[c,h]),s.useEffect((()=>{n.reset&&S()}),[null==n?void 0:n.reset]);const I=e=>{c&&i(e)},S=()=>{f("search"),g("default"),k(""),n.onChange(""),b("none"),i("")};return e.jsx(r.Input,{id:"search-bar",validate:d,onFocus:()=>{j.length&&f("cross"),"default"===p&&c&&(g("clicked"),b("active"))},width:l,state:C,leftIcon:"search"===v&&"default"===p?{icon:t.SearchIcon}:void 0,rightIcon:"cross"===v?{icon:a.default,callback:()=>{S(),n.onClickCross&&n.onClickCross()}}:void 0,onChangeText:(e,t)=>{n.onChange(e),k(e),"keydown"!==(null==t?void 0:t.type)||13!==t.which&&13!==t.keyCode?e.trim().length?f("cross"):f("search"):I(e)},placeholder:o,variant:u,value:j,onBlur:()=>{j.length||g("default"),b("none")}})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ButtonProps } from '../button/model';
|
|
3
2
|
export type InputVariant = 'default' | 'small';
|
|
4
3
|
export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
|
|
5
4
|
export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
|
|
@@ -34,7 +33,6 @@ export interface InputProps {
|
|
|
34
33
|
button?: {
|
|
35
34
|
text: string;
|
|
36
35
|
onClick?: () => void;
|
|
37
|
-
buttonProps?: ButtonProps;
|
|
38
36
|
};
|
|
39
37
|
suffixText?: string;
|
|
40
38
|
prefixText?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as u,validateInput as h}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as u,validateInput as h}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as x,InputFooter as b,MaxCharStyle as y,InputWrapper as j,IconHolder as O,PrefixHolder as C,InputContainer as T,InputContainerSmall as w,SuffixHolder as k,InputHeader as I}from"./Input.styled.js";const L=l(((l,L)=>{var B,H,M,E,z,A,D;const{placeholder:F,leftIcon:P,rightIcon:N,labelText:S,maxCharLimit:K,isRequired:R,hintText:G,type:_,state:q,validate:V,variant:W,button:$,suffixText:J,prefixText:Q,onChangeText:U,value:X,noErrorHint:Y,reset:Z,rangeValidation:ee,noKeyDownChange:te,version:ie,noMaxCharCheck:ne,labelElement:le,autoGrow:re,minHeight:oe,maxHeight:ae,labelTextBold:se,truncateText:ce,maxCharLimitPosition:ue}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),he=null==P?void 0:P.icon,de=null==N?void 0:N.icon,[ve,pe]=r(!1),[ge,me]=r(!1),[fe,xe]=r(),be="small"===W?"18px":"22px",ye=o(f),[je,Oe]=r(),Ce=a(null),Te=null!=L?L:Ce;s((()=>{Oe(X),!X&&re&&(Te.current.style.height=oe||"48px")}),[X]),s((()=>{var e;Te.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Te.current))}),[Te]),s((()=>{const e=Te.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",Le,{passive:!1}),()=>{e.removeEventListener("wheel",Le)}}),[]),s((()=>{Z&&Oe("")}),[Z]),s((()=>{var e;me(!!l.isActive),l.isActive&&(null===(e=Te.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{xe(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;pe(!1),("invalid"===l.state||fe||"disabled-invalid"===l.state)&&pe(!0),"active"===l.state&&(null===(e=Te.current)||void 0===e||e.focus())}),[l.state,fe]),s((()=>{pe(!!fe||"invalid"===l.state)}),[fe,l.state]);const we=function(e){if(u(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},ke=()=>"zip"===_?6:2e3,Ie=e=>{const t=0!==K?K:ke();if(te||U(X||"",e),ne)return;const i=e.target.value;![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Le=e=>{e.preventDefault()},Be=e=>{let t=e.target.value;const i=0!==K?K+1:ke();!ne&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),U(t,e),l.textControl||Oe(t),re&&(Te.current.style.height=`${Te.current.scrollHeight}px`,t||(Te.current.style.height=oe||"48px"));const n=V||h;if(!n||!u(n))return;const[r,o]=n(t,_,ee);pe(!r),xe(l.errorMessage?l.errorMessage:o)},He=e=>{var t;l.skipFocus||me(!0),we(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Me=e=>{var t;l.skipFocus||me(!1),we(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ee=()=>{var n;return e(i,{children:["multiline"!==_&&t("input",{className:ce?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==ye?void 0:ye.input)&&void 0!==n?n:{},ref:Te,type:["phonenumber","zip","number"].includes(_)?"number":_,value:je,onFocus:e=>He(e),onBlur:e=>Me(e),placeholder:F||"Enter here",onChange:Be,onClick:e=>we(l.onClick),onKeyDown:e=>Ie(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:je,ref:Te,onFocus:e=>He(e),onBlur:e=>Me(e),onClick:e=>we(l.onClick),placeholder:F||"Enter here",onChange:Be,onKeyDown:e=>Ie(e),maxLength:K>0?K:void 0})]})};return e(x,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==ye?void 0:ye.RootContainer)&&void 0!==B?B:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!fe)&&e(b,Object.assign({invalid:!!fe},{children:[!!fe&&t(m,{width:16,height:16}),fe||G]})),K>0&&"BOTTOM"===ue&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(H=l.value)||void 0===H?void 0:H.length)&&void 0!==M?M:0,"/",K]}))]})),e(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||ge,isInvalid:ve,style:null!==(E=null==ye?void 0:ye.InputWrapper)&&void 0!==E?E:{},version:ie,height:l.height},{children:[!!he&&t(O,Object.assign({variant:W,iconSize:be,onClick:()=>we(null==P?void 0:P.callback),isLeft:!0,style:null!==(z=null==ye?void 0:ye.IconHolder)&&void 0!==z?z:{}},{children:t(he,{})})),!!Q&&t(C,Object.assign({variant:W},{children:Q})),"default"===W&&t(T,Object.assign({height:l.height,type:l.type,minHeight:oe,maxHeight:ae,autoGrow:re},{children:Ee()})),"small"===W&&t(w,Object.assign({height:l.height,type:l.type},{children:Ee()})),!!de&&t(O,Object.assign({variant:W,iconSize:be,onClick:()=>we(null==N?void 0:N.callback),isLeft:!1},{children:t(de,{})})),!!J&&t(k,Object.assign({variant:W},{children:J})),$&&$.text&&t(c,{buttonText:$.text,onClick:()=>we(null==$?void 0:$.onClick)})]})),(!!S||!!K)&&e(I,Object.assign({invalid:ve},{children:[le&&le,e("div",Object.assign({className:"label__container"},{children:[e(se?v:p,{children:[S,R?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:ve?g.content.negative:g.content.primary})})}))]})),K>0&&"TOP"===ue&&e(y,{children:[null!==(D=null===(A=l.value)||void 0===A?void 0:A.length)&&void 0!==D?D:0,"/",K]})]}))]}))}));L.displayName="Input";export{L as Input};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ButtonProps } from '../button/model';
|
|
2
1
|
import { InputVariant } from '../input/Input';
|
|
3
2
|
export interface SearchBarProps {
|
|
4
3
|
width: string;
|
|
@@ -12,7 +11,5 @@ export interface SearchBarProps {
|
|
|
12
11
|
reset?: boolean;
|
|
13
12
|
onClickCross?: () => void;
|
|
14
13
|
isActive?: boolean;
|
|
15
|
-
suffixButton?: ButtonProps;
|
|
16
|
-
searchValue?: string;
|
|
17
14
|
}
|
|
18
15
|
export declare const SearchBar: (props: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,g]=t("default"),[C,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),g("default"),j(""),i.onChange(""),k("none"),c("")};return e(a,{id:"search-bar",validate:u,onFocus:()=>{b.length&&f("cross"),"default"===p&&r&&(g("clicked"),k("active"))},width:d,state:C,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:s,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||g("default"),k("none")}})};export{i as SearchBar};
|