carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.93 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useImperativeHandle as o,useState as i}from"react";import a from"invariant";import l from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import c from"./search.style.js";import u from"./search-button.style.js";import p from"../icon/icon.component.js";import{Textbox as f}from"../textbox/textbox.component.js";import m from"../button/button.component.js";import b from"../../hooks/__internal__/useLocale/useLocale.js";import h from"../../__internal__/utils/helpers/events/events.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){y(e,t,r[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const O=r.forwardRef(((r,y)=>{var{onChange:O,onClick:v,onFocus:j,onBlur:w,onKeyDown:P,value:x,id:_,name:B,label:C,inputHint:k,searchWidth:D,maxWidth:S,searchButton:I,searchButtonAriaLabel:T,placeholder:W,variant:E="default","aria-label":F,tabIndex:H,error:K,warning:L,info:A,tooltipPosition:z,triggerOnClear:M}=r,N=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["onChange","onClick","onFocus","onBlur","onKeyDown","value","id","name","label","inputHint","searchWidth","maxWidth","searchButton","searchButtonAriaLabel","placeholder","variant","aria-label","tabIndex","error","warning","info","tooltipPosition","triggerOnClear"]);const R=b(),V=n(null),q=n(null);o(y,(()=>({focus(){var e;null===(e=q.current)||void 0===e||e.focus()}})),[]),a("string"==typeof x,"This component has no initial value");const[G,J]=i(!1),Q=0===x.length;let U={};I&&v&&(U={onClick:()=>{v({target:{name:B,id:_,value:x}})}});const X="string"==typeof I?I:R.search.searchButtonText(),Y=!!(null==x?void 0:x.length);return e(c,g(d(g(d({ref:V,isFocused:G,searchWidth:D,maxWidth:S,searchHasValue:Y,showSearchButton:!!I,variant:E},s(N)),{id:_,name:B}),N,l("search",N)),{children:[t(f,{placeholder:W,value:x,inputIcon:Q?void 0:"cross",iconTabIndex:Q?-1:0,iconOnClick:()=>{var e;null==O||O({target:g(d({},B&&{name:B},_&&{id:_}),{value:""})}),M&&(null==v||v({target:g(d({},B&&{name:B},_&&{id:_}),{value:""})})),null===(e=q.current)||void 0===e||e.focus()},iconOnMouseDown:e=>{e.preventDefault()},"aria-label":F||(C?void 0:R.search.searchButtonText()),label:C,inputHint:k,onFocus:e=>{J(!0),j&&j(e)},onBlur:e=>{J(!1),w&&w(e)},onChange:e=>{O(e)},onKeyDown:e=>{1===e.key.length&&e.stopPropagation(),h.isEscKey(e)&&!Q&&(e.stopPropagation(),null==O||O({target:g(d({},B&&{name:B},_&&{id:_}),{value:""})})),P&&P(e)},ref:q,tabIndex:H,error:K,warning:L,info:A,leftChildren:I?void 0:t(p,{type:"search",ml:1}),tooltipPosition:z,my:0}),I&&t(u,{children:t(m,g(d({"aria-label":T||X,size:"medium",px:2,buttonType:"primary",iconPosition:"before",iconType:"search",className:"search-button"},U),{children:X}))})]}))}));export{O as Search,O as default};