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