@saas-ui/search-input
Version:
A search input for Chakra UI
3 lines (2 loc) • 1.95 kB
JavaScript
var e=require("react"),t=require("@chakra-ui/react"),n=require("@chakra-ui/utils"),r=require("@chakra-ui/icons");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var l=/*#__PURE__*/a(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}var c=["value","size","variant","icon","resetIcon","rightElement","onChange","onReset","onKeyDown"],o=t.forwardRef(function(e,a){var o=e.value,i=e.size,s=e.icon,f=e.resetIcon,p=e.rightElement,h=e.onChange,g=e.onReset,v=e.onKeyDown,b=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(a[n]=e[n]);return a}(e,c),m=t.useMultiStyleConfig("SearchInput",e),y=t.useControllableState({value:o,defaultValue:""}),E=y[0],d=y[1],I=l.useCallback(function(e){d(e.target.value)},[d]),O=l.useCallback(function(e){"Escape"===e.key&&(d(""),null==g||g())},[g,d]),k="lg"===i?"sm":"xs";/*#__PURE__*/return l.createElement(t.InputGroup,{size:i},/*#__PURE__*/l.createElement(t.InputLeftElement,null,s||/*#__PURE__*/l.createElement(r.SearchIcon,null)),/*#__PURE__*/l.createElement(t.Input,u({type:"text",size:i,value:E,ref:a,sx:m.input,onChange:n.callAllHandlers(I,h),onKeyDown:n.callAllHandlers(O,v)},b)),/*#__PURE__*/l.createElement(t.InputRightElement,null,E?/*#__PURE__*/l.createElement(t.IconButton,{onClick:g,size:k,variant:"ghost","aria-label":"Reset search",icon:f||/*#__PURE__*/l.createElement(r.CloseIcon,null),sx:m.reset}):p))});o.defaultProps={placeholder:"Search"},n.__DEV__&&(o.displayName="SearchInput"),exports.SearchInput=o;
//# sourceMappingURL=index.js.map