react-search-field
Version:
This is a simple search field component for react
1 lines • 5.59 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactSearch=t(require("react")):e.ReactSearch=t(e.React)}(this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(4)()},function(e,t,n){"use strict";const r=e=>Object.prototype.toString.call(e).slice(8,-1),o=e=>"Array"===r(e),a=e=>"Object"===r(e),c=e=>"String"===r(e),i=e=>"Number"===r(e)&&!Number.isNaN(e),l=e=>"Null"===r(e)||"Undefined"===r(e),u=e=>c(e)?""===e.trim():o(e)?0===e.length:a(e)?0===Object.keys(e).length:l(e);e.exports={isArray:o,isObject:a,isString:c,isDate:e=>"Date"===r(e),isRegExp:e=>"RegExp"===r(e),isFunction:e=>"Function"===r(e),isBoolean:e=>"Boolean"===r(e)||c(e)&&("true"===e||"false"===e),isNumber:i,isNull:l,isEmpty:u,isEmptyOrZero:e=>u(e)||i(e)&&0===e}},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),a=n(1),c=n.n(a),i=n(2),l=n.n(i);var u={border:"1px #ddd solid",display:"inline-flex",justifyContent:"space-between",height:35},s=function(e){return{height:33,width:33,outline:"none",backgroundColor:"white",cursor:e?"auto":"pointer",padding:5,boxSizing:"border-box",appearance:"none",border:"none",borderLeft:"1px #ddd solid"}},f={outline:"none",border:"none",fontSize:14,padding:"0 8px",flex:1,color:"#5a5a5a",fontWeight:100,height:33},p=function(){var e=Math.ceil(21);return o.a.createElement("svg",{version:"1.1",x:"0px",y:"0px",width:e,height:e,viewBox:"0 0 635 635",style:{fill:"#727272"}},o.a.createElement("g",null,o.a.createElement("path",{d:"M255.108,0C119.863,0,10.204,109.66,10.204,244.904c0,135.245,109.659,244.905,244.904,244.905 c52.006,0,100.238-16.223,139.883-43.854l185.205,185.176c1.671,1.672,4.379,1.672,5.964,0.115l34.892-34.891 c1.613-1.613,1.47-4.379-0.115-5.965L438.151,407.605c38.493-43.246,61.86-100.237,61.86-162.702 C500.012,109.66,390.353,0,255.108,0z M255.108,460.996c-119.34,0-216.092-96.752-216.092-216.092 c0-119.34,96.751-216.091,216.092-216.091s216.091,96.751,216.091,216.091C471.199,364.244,374.448,460.996,255.108,460.996z"})))},d=function(e){var t=e.classNames,n=e.searchText,a=e.placeholder,c=e.disabled,i=e.onChange,d=e.onEnter,b=e.onSearchClick,y=e.onBlur,h=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var n=[],r=!0,o=!1,a=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw a}}return n}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}(Object(r.useState)(n),2),g=h[0],m=h[1];Object(r.useEffect)((function(){m(n)}),[n,m]);var x=Object(r.useCallback)((function(e){m(e.target.value),l.a.isFunction(i)&&i(e.target.value,e)}),[i,m]),v=Object(r.useCallback)((function(e){(13===e.which||13===e.keyCode)&&l.a.isFunction(d)&&d(e.target.value,e)}),[d]),O=Object(r.useCallback)((function(){l.a.isFunction(b)&&b(g)}),[b,g]),j=Object(r.useCallback)((function(e){l.a.isFunction(y)&&y(e.target.value,e)}),[y]),S="react-search-field ".concat(t);return o.a.createElement("div",{className:S,style:u},o.a.createElement("input",{className:"react-search-field-input",style:f,onChange:x,onKeyPress:v,onBlur:j,placeholder:a,type:"text",value:g,disabled:c}),o.a.createElement("button",{className:"react-search-field-button",type:"button","aria-label":"search button",style:s(c),onClick:O,disabled:c},o.a.createElement(p,null)))};d.propTypes={classNames:c.a.string,searchText:c.a.string,placeholder:c.a.string,disabled:c.a.bool,onChange:c.a.func,onEnter:c.a.func,onSearchClick:c.a.func,onBlur:c.a.func},d.defaultProps={classNames:"",searchText:"",placeholder:"Search",disabled:!1,onChange:null,onEnter:null,onSearchClick:null,onBlur:null},t.default=d},function(e,t,n){"use strict";var r=n(5);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,c){if(c!==r){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])}));