From 490ef39b6d81bead0ab04f73246c3ada8ba2f1d7 Mon Sep 17 00:00:00 2001 From: Arthur Clemens Date: Sun, 8 Sep 2019 16:15:09 +0200 Subject: [PATCH] TextField: don't overwrite events --- .../dist/polythene-core-textfield.js | 2 +- .../dist/polythene-core-textfield.js.map | 2 +- .../dist/polythene-core-textfield.mjs | 17 ++++++++++++----- .../polythene-core-textfield/src/index.js | 17 ++++++++++++----- .../tests/src/textfield/components/events.js | 19 +++++++++++++++++++ packages/tests/src/textfield/tests-generic.js | 11 +++++++++++ 6 files changed, 56 insertions(+), 12 deletions(-) create mode 100644 packages/tests/src/textfield/components/events.js diff --git a/packages/polythene-core-textfield/dist/polythene-core-textfield.js b/packages/polythene-core-textfield/dist/polythene-core-textfield.js index 8ecf46d99..127df0c87 100644 --- a/packages/polythene-core-textfield/dist/polythene-core-textfield.js +++ b/packages/polythene-core-textfield/dist/polythene-core-textfield.js @@ -1,2 +1,2 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("polythene-core")):"function"==typeof define&&define.amd?define(["exports","polythene-core"],t):t((e=e||self).polythene={},e["polythene-core"])}(this,function(e,t){"use strict";function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(){return(n=Object.assign||function(e){for(var t=1;t=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,l=!1,i=void 0;try{for(var u,a=e[Symbol.iterator]();!(n=(u=a.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){l=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(l)throw i}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var o={component:"pe-textfield",counter:"pe-textfield__counter",error:"pe-textfield__error",errorPlaceholder:"pe-textfield__error-placeholder",focusHelp:"pe-textfield__help-focus",help:"pe-textfield__help",input:"pe-textfield__input",inputArea:"pe-textfield__input-area",label:"pe-textfield__label",optionalIndicator:"pe-textfield__optional-indicator",requiredIndicator:"pe-textfield__required-indicator",hasCounter:"pe-textfield--counter",hasFloatingLabel:"pe-textfield--floating-label",hasFullWidth:"pe-textfield--full-width",hideClear:"pe-textfield--hide-clear",hideSpinner:"pe-textfield--hide-spinner",hideValidation:"pe-textfield--hide-validation",isDense:"pe-textfield--dense",isRequired:"pe-textfield--required",stateDirty:"pe-textfield--dirty",stateDisabled:"pe-textfield--disabled",stateFocused:"pe-textfield--focused",stateInvalid:"pe-textfield--invalid",stateReadonly:"pe-textfield--readonly"},c={invalid:!1,message:void 0},d=function(e,t){return e.ignoreEvents&&-1!==e.ignoreEvents.indexOf(t)};e._TextField=function(e){var l=e.h,s=e.a,f=e.useState,p=e.useEffect,v=e.useRef,h=e.getRef,y=u(e,["h","a","useState","useEffect","useRef","getRef"]),b=void 0!==y.defaultValue&&null!==y.defaultValue?y.defaultValue.toString():void 0!==y.value&&null!==y.value?y.value.toString():"",m=a(f(),2),g=m[0],x=m[1],O=a(f(!1),2),_=O[0],j=O[1],S=a(f(b),2),w=S[0],q=S[1],I=v(),P=v(),k=v(),N=v(),E=v(),D=v(),A=v(),C=y.multiLine?"textarea":"input",F=!!(void 0!==y.valid||y.validate||y.min||y.max||y[s.minlength]||y[s.maxlength]||y.required||y.pattern),R=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.type,r=e.focus,n=e.value;I.current&&(void 0!==n&&(I.current.value=n),void 0!==r&&(E.current=r,r?I.current.focus():I.current.blur()),"input"===t&&(y.validateOnInput||y.counter)&&(D.current=I.current.value!==b),"input"!==t&&(D.current=I.current.value!==b),"onblur"===t&&(D.current=!0),N.current=""!==I.current.value,L(),H(),P.current!==I.current.value&&q(I.current.value))},V=function(){var e=c;return D.current&&_&&0===I.current.value.length&&y.validateResetOnClear&&(D.current=!1,j(!1),A.current=void 0),y.counter&&(e={invalid:I.current.value.length>y.counter,message:y.error}),!e.invalid&&I.current.checkValidity&&(e={invalid:!I.current.checkValidity(),message:y.error}),!e.invalid&&y.validate&&(e=function(){if(!I.current)return c;var e=y.validate(I.current.value);return{invalid:e&&!e.valid,message:e&&e.error}}()),e},L=function(){var e=void 0!==y.valid?{invalid:!y.valid,message:y.error}:D.current||y.validateAtStart?V():c,t=_;A.current=e.message,e.invalid!==t&&j(e.invalid),e.invalid||(A.current=void 0)},H=function(){if(y.onChange){var e=V(),t={focus:E.current,dirty:N.current,invalid:e.invalid,error:e.error,value:I.current.value};JSON.stringify(t)!==JSON.stringify(k.current)&&(y.onChange(i({},t,{el:I.current,setInputState:function(e){var t=void 0!==e.value&&e.value!==I.current.value,r=void 0!==e.focus&&e.focus!==E.current;(t||r)&&R(e)}})),k.current=t)}};p(function(){N.current=""!==b,E.current=!1,D.current=!1,A.current=y.error},[]),p(function(){g&&(I.current=g.querySelector(C),I.current.value=b,R(),L(),H())},[g]),p(function(){if(I.current){var e=void 0!==y.value&&null!==y.value?y.value:I.current?I.current.value:P.current,t=null==e?"":e.toString();I.current&&P.current!==t&&(I.current.value=t,P.current=t,R({type:"input"}))}},[I.current,y.value]),p(function(){I.current&&(L(),H())},[y,I.current&&I.current.value]);var W=n({},t.filterSupportedAttributes(y),y.testId&&{"data-test-id":y.testId},h(function(e){return e&&!g&&(x(e),y.ref&&y.ref(e))}),{className:[o.component,_?o.stateInvalid:"",E.current?o.stateFocused:"",N.current?o.stateDirty:"",y.floatingLabel?o.hasFloatingLabel:"",y.disabled?o.stateDisabled:"",y.readonly?o.stateReadonly:"",y.dense?o.isDense:"",y.required?o.isRequired:"",y.fullWidth?o.hasFullWidth:"",y.counter?o.hasCounter:"",!1!==y.hideSpinner&&void 0!==y.hideSpinner?o.hideSpinner:"",!1!==y.hideClear&&void 0!==y.hideClear?o.hideClear:"",y.hideValidation?o.hideValidation:"","dark"===y.tone?"pe-dark-tone":null,"light"===y.tone?"pe-light-tone":null,y.className||y[s.class]].join(" ")}),J=i({},y,{},y.domAttributes),T=y.error||A.current,M=J.multiLine?null:J.type&&"submit"!==J.type&&"search"!==J.type?J.type:"text",z=_&&void 0!==T,B=J.disabled||J[s.readonly],G=J.required&&""!==J.requiredIndicator?l("span",{className:o.requiredIndicator},J.requiredIndicator||"*"):null,K=!J.required&&J.optionalIndicator?l("span",{className:o.optionalIndicator},J.optionalIndicator):null,Q=J.label?[J.label,G,K]:null,U=[l("div",{className:o.inputArea},[Q?l("label",{className:o.label},Q):null,l(C,n({},{className:o.input,disabled:J.disabled},M?{type:M}:null,J.name?{name:J.name}:null,d(J,s.onclick)?null:r({},s.onclick,function(){B||R({focus:!0})}),d(J,s.onfocus)?null:r({},s.onfocus,function(){B||(R({focus:!0}),g&&g.classList.add(o.stateFocused))}),d(J,s.onblur)?null:r({},s.onblur,function(){R({type:"onblur",focus:!1}),g.classList.remove(o.stateFocused)}),d(J,s.oninput)?null:r({},s.oninput,function(e){R({type:"input"})}),d(J,s.onkeydown)?null:r({},s.onkeydown,function(e){"Enter"===e.key?D.current=!0:"Escape"!==e.key&&"Esc"!==e.key||R({focus:!1})}),J.events?J.events:null,void 0!==J.required&&J.required?{required:!0}:null,void 0!==J[s.readonly]&&J[s.readonly]?r({},s.readonly,!0):null,void 0!==J.pattern?{pattern:J.pattern}:null,void 0!==J[s.maxlength]?r({},s.maxlength,J[s.maxlength]):null,void 0!==J[s.minlength]?r({},s.minlength,J[s.minlength]):null,void 0!==J.max?{max:J.max}:null,void 0!==J.min?{min:J.min}:null,void 0!==J[s.autofocus]?r({},s.autofocus,J[s.autofocus]):null,void 0!==J[s.tabindex]?r({},s.tabindex,J[s.tabindex]):null,void 0!==J.rows?{rows:J.rows}:null,void 0!==J.placeholder?{placeholder:J.placeholder}:null,void 0!==J.domAttributes?i({},J.domAttributes):null))]),J.counter?l("div",{className:o.counter},(w.length||0)+" / "+J.counter):null,J.help&&!z?l("div",{className:[o.help,J.focusHelp?o.focusHelp:null].join(" ")},J.help):null,z?l("div",{className:o.error},T):F&&!J.help?l("div",{className:o.errorPlaceholder}):null],X=[y.before].concat(U,[y.after]);return l(y.element||"div",W,X)},Object.defineProperty(e,"__esModule",{value:!0})}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("polythene-core")):"function"==typeof define&&define.amd?define(["exports","polythene-core"],t):t((e=e||self).polythene={},e["polythene-core"])}(this,function(e,t){"use strict";function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(){return(n=Object.assign||function(e){for(var t=1;t=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=[],n=!0,l=!1,i=void 0;try{for(var u,a=e[Symbol.iterator]();!(n=(u=a.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){l=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(l)throw i}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var o={component:"pe-textfield",counter:"pe-textfield__counter",error:"pe-textfield__error",errorPlaceholder:"pe-textfield__error-placeholder",focusHelp:"pe-textfield__help-focus",help:"pe-textfield__help",input:"pe-textfield__input",inputArea:"pe-textfield__input-area",label:"pe-textfield__label",optionalIndicator:"pe-textfield__optional-indicator",requiredIndicator:"pe-textfield__required-indicator",hasCounter:"pe-textfield--counter",hasFloatingLabel:"pe-textfield--floating-label",hasFullWidth:"pe-textfield--full-width",hideClear:"pe-textfield--hide-clear",hideSpinner:"pe-textfield--hide-spinner",hideValidation:"pe-textfield--hide-validation",isDense:"pe-textfield--dense",isRequired:"pe-textfield--required",stateDirty:"pe-textfield--dirty",stateDisabled:"pe-textfield--disabled",stateFocused:"pe-textfield--focused",stateInvalid:"pe-textfield--invalid",stateReadonly:"pe-textfield--readonly"},c={invalid:!1,message:void 0},d=function(e,t){return e.ignoreEvents&&-1!==e.ignoreEvents.indexOf(t)};e._TextField=function(e){var l=e.h,s=e.a,f=e.useState,p=e.useEffect,v=e.useRef,h=e.getRef,y=u(e,["h","a","useState","useEffect","useRef","getRef"]),b=void 0!==y.defaultValue&&null!==y.defaultValue?y.defaultValue.toString():void 0!==y.value&&null!==y.value?y.value.toString():"",m=a(f(),2),g=m[0],x=m[1],O=a(f(!1),2),_=O[0],w=O[1],j=a(f(b),2),S=j[0],k=j[1],q=v(),I=v(),P=v(),N=v(),E=v(),D=v(),A=v(),C=y.multiLine?"textarea":"input",F=!!(void 0!==y.valid||y.validate||y.min||y.max||y[s.minlength]||y[s.maxlength]||y.required||y.pattern),R=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.type,r=e.focus,n=e.value;q.current&&(void 0!==n&&(q.current.value=n),void 0!==r&&(E.current=r,r?q.current.focus():q.current.blur()),"input"===t&&(y.validateOnInput||y.counter)&&(D.current=q.current.value!==b),"input"!==t&&(D.current=q.current.value!==b),"onblur"===t&&(D.current=!0),N.current=""!==q.current.value,L(),H(),I.current!==q.current.value&&k(q.current.value))},V=function(){var e=c;return D.current&&_&&0===q.current.value.length&&y.validateResetOnClear&&(D.current=!1,w(!1),A.current=void 0),y.counter&&(e={invalid:q.current.value.length>y.counter,message:y.error}),!e.invalid&&q.current.checkValidity&&(e={invalid:!q.current.checkValidity(),message:y.error}),!e.invalid&&y.validate&&(e=function(){if(!q.current)return c;var e=y.validate(q.current.value);return{invalid:e&&!e.valid,message:e&&e.error}}()),e},L=function(){var e=void 0!==y.valid?{invalid:!y.valid,message:y.error}:D.current||y.validateAtStart?V():c,t=_;A.current=e.message,e.invalid!==t&&w(e.invalid),e.invalid||(A.current=void 0)},H=function(){if(y.onChange){var e=V(),t={focus:E.current,dirty:N.current,invalid:e.invalid,error:e.error,value:q.current.value};JSON.stringify(t)!==JSON.stringify(P.current)&&(y.onChange(i({},t,{el:q.current,setInputState:function(e){var t=void 0!==e.value&&e.value!==q.current.value,r=void 0!==e.focus&&e.focus!==E.current;(t||r)&&R(e)}})),P.current=t)}};p(function(){N.current=""!==b,E.current=!1,D.current=!1,A.current=y.error},[]),p(function(){g&&(q.current=g.querySelector(C),q.current.value=b,R(),L(),H())},[g]),p(function(){if(q.current){var e=void 0!==y.value&&null!==y.value?y.value:q.current?q.current.value:I.current,t=null==e?"":e.toString();q.current&&I.current!==t&&(q.current.value=t,I.current=t,R({type:"input"}))}},[q.current,y.value]),p(function(){q.current&&(L(),H())},[y,q.current&&q.current.value]);var W=n({},t.filterSupportedAttributes(y),y.testId&&{"data-test-id":y.testId},h(function(e){return e&&!g&&(x(e),y.ref&&y.ref(e))}),{className:[o.component,_?o.stateInvalid:"",E.current?o.stateFocused:"",N.current?o.stateDirty:"",y.floatingLabel?o.hasFloatingLabel:"",y.disabled?o.stateDisabled:"",y.readonly?o.stateReadonly:"",y.dense?o.isDense:"",y.required?o.isRequired:"",y.fullWidth?o.hasFullWidth:"",y.counter?o.hasCounter:"",!1!==y.hideSpinner&&void 0!==y.hideSpinner?o.hideSpinner:"",!1!==y.hideClear&&void 0!==y.hideClear?o.hideClear:"",y.hideValidation?o.hideValidation:"","dark"===y.tone?"pe-dark-tone":null,"light"===y.tone?"pe-light-tone":null,y.className||y[s.class]].join(" ")}),J=i({},y,{},y.domAttributes),T=y.error||A.current,M=J.multiLine?null:J.type&&"submit"!==J.type&&"search"!==J.type?J.type:"text",z=_&&void 0!==T,B=J.disabled||J[s.readonly],G=J.required&&""!==J.requiredIndicator?l("span",{className:o.requiredIndicator},J.requiredIndicator||"*"):null,K=!J.required&&J.optionalIndicator?l("span",{className:o.optionalIndicator},J.optionalIndicator):null,Q=J.label?[J.label,G,K]:null,U=J.events||{},X=[l("div",{className:o.inputArea},[Q?l("label",{className:o.label},Q):null,l(C,n({},{className:o.input,disabled:J.disabled},M?{type:M}:null,J.name?{name:J.name}:null,U,d(J,s.onclick)?null:r({},s.onclick,function(e){B||(R({focus:!0}),U[s.onclick]&&U[s.onclick](e))}),d(J,s.onfocus)?null:r({},s.onfocus,function(e){B||(R({focus:!0}),g&&g.classList.add(o.stateFocused),U[s.onfocus]&&U[s.onfocus](e))}),d(J,s.onblur)?null:r({},s.onblur,function(e){R({type:"onblur",focus:!1}),g.classList.remove(o.stateFocused),U[s.onblur]&&U[s.onblur](e)}),d(J,s.oninput)?null:r({},s.oninput,function(e){R({type:"input"}),U[s.oninput]&&U[s.oninput](e)}),d(J,s.onkeydown)?null:r({},s.onkeydown,function(e){"Enter"===e.key?D.current=!0:"Escape"!==e.key&&"Esc"!==e.key||R({focus:!1}),U[s.onkeydown]&&U[s.onkeydown](e)}),void 0!==J.required&&J.required?{required:!0}:null,void 0!==J[s.readonly]&&J[s.readonly]?r({},s.readonly,!0):null,void 0!==J.pattern?{pattern:J.pattern}:null,void 0!==J[s.maxlength]?r({},s.maxlength,J[s.maxlength]):null,void 0!==J[s.minlength]?r({},s.minlength,J[s.minlength]):null,void 0!==J.max?{max:J.max}:null,void 0!==J.min?{min:J.min}:null,void 0!==J[s.autofocus]?r({},s.autofocus,J[s.autofocus]):null,void 0!==J[s.tabindex]?r({},s.tabindex,J[s.tabindex]):null,void 0!==J.rows?{rows:J.rows}:null,void 0!==J.placeholder?{placeholder:J.placeholder}:null,void 0!==J.domAttributes?i({},J.domAttributes):null))]),J.counter?l("div",{className:o.counter},(S.length||0)+" / "+J.counter):null,J.help&&!z?l("div",{className:[o.help,J.focusHelp?o.focusHelp:null].join(" ")},J.help):null,z?l("div",{className:o.error},T):F&&!J.help?l("div",{className:o.errorPlaceholder}):null],Y=[y.before].concat(X,[y.after]);return l(y.element||"div",W,Y)},Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=polythene-core-textfield.js.map diff --git a/packages/polythene-core-textfield/dist/polythene-core-textfield.js.map b/packages/polythene-core-textfield/dist/polythene-core-textfield.js.map index ad2a0128a..c8da936e8 100644 --- a/packages/polythene-core-textfield/dist/polythene-core-textfield.js.map +++ b/packages/polythene-core-textfield/dist/polythene-core-textfield.js.map @@ -1 +1 @@ -{"version":3,"file":"polythene-core-textfield.js","sources":["../../polythene-css-classes/textfield.js","../src/index.js"],"sourcesContent":["\nexport default {\n component: \"pe-textfield\",\n\n // elements\n counter: \"pe-textfield__counter\",\n error: \"pe-textfield__error\",\n errorPlaceholder: \"pe-textfield__error-placeholder\",\n focusHelp: \"pe-textfield__help-focus\",\n help: \"pe-textfield__help\",\n input: \"pe-textfield__input\",\n inputArea: \"pe-textfield__input-area\",\n label: \"pe-textfield__label\",\n optionalIndicator: \"pe-textfield__optional-indicator\",\n requiredIndicator: \"pe-textfield__required-indicator\",\n\n // states\n hasCounter: \"pe-textfield--counter\",\n hasFloatingLabel: \"pe-textfield--floating-label\",\n hasFullWidth: \"pe-textfield--full-width\",\n hideClear: \"pe-textfield--hide-clear\",\n hideSpinner: \"pe-textfield--hide-spinner\",\n hideValidation: \"pe-textfield--hide-validation\",\n isDense: \"pe-textfield--dense\",\n isRequired: \"pe-textfield--required\",\n stateDirty: \"pe-textfield--dirty\",\n stateDisabled: \"pe-textfield--disabled\",\n stateFocused: \"pe-textfield--focused\",\n stateInvalid: \"pe-textfield--invalid\",\n stateReadonly: \"pe-textfield--readonly\",\n};\n","import { filterSupportedAttributes } from \"polythene-core\";\nimport classes from \"polythene-css-classes/textfield\";\n\nconst DEFAULT_VALID_STATE = {\n invalid: false,\n message: undefined\n};\n\nconst ignoreEvent = (props, name) =>\n props.ignoreEvents && props.ignoreEvents.indexOf(name) !== -1;\n\nexport const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props }) => {\n const defaultValue = props.defaultValue !== undefined && props.defaultValue !== null\n ? props.defaultValue.toString()\n : props.value !== undefined && props.value !== null\n ? props.value.toString()\n : \"\";\n\n const [domElement, setDomElement] = useState();\n const [isInvalid, setIsInvalid] = useState(false);\n const [value, setValue] = useState(defaultValue);\n const inputElRef = useRef();\n const previousValueRef = useRef();\n const previousStatusRef = useRef();\n const isDirtyRef = useRef();\n const hasFocusRef = useRef();\n const isTouchedRef = useRef();\n const errorRef = useRef();\n const inputType = props.multiLine ? \"textarea\" : \"input\";\n const showErrorPlaceholder = !!(props.valid !== undefined || props.validate || props.min || props.max || props[a.minlength] || props[a.maxlength] || props.required || props.pattern);\n\n const handleStateUpdate = ({ type, focus, value } = {}) => {\n if (!inputElRef.current) {\n return;\n }\n if (value !== undefined) {\n inputElRef.current.value = value;\n }\n if (focus !== undefined) {\n hasFocusRef.current = focus;\n if (focus) {\n inputElRef.current.focus();\n } else {\n inputElRef.current.blur();\n }\n }\n if (type === \"input\" && (props.validateOnInput || props.counter)) {\n isTouchedRef.current = inputElRef.current.value !== defaultValue;\n }\n if (type !== \"input\") {\n isTouchedRef.current = inputElRef.current.value !== defaultValue;\n }\n if (type === \"onblur\") {\n isTouchedRef.current = true;\n }\n isDirtyRef.current = inputElRef.current.value !== \"\";\n checkValidity();\n notifyState();\n if (previousValueRef.current !== inputElRef.current.value) {\n setValue(inputElRef.current.value); // force update\n }\n };\n\n const validateCustom = () => {\n if (!inputElRef.current) {\n return DEFAULT_VALID_STATE;\n }\n const validState = props.validate(inputElRef.current.value);\n return {\n invalid: validState && !validState.valid,\n message: validState && validState.error\n };\n };\n \n const validateCounter = () => ({\n invalid: inputElRef.current.value.length > props.counter,\n message: props.error\n });\n \n const validateHTML = () => ({\n invalid: !inputElRef.current.checkValidity(),\n message: props.error\n });\n \n const getValidStatus = () => {\n let status = DEFAULT_VALID_STATE;\n \n // props.validateResetOnClear: reset validation when field is cleared\n if (isTouchedRef.current && isInvalid && inputElRef.current.value.length === 0 && props.validateResetOnClear) {\n isTouchedRef.current = false;\n setIsInvalid(false);\n errorRef.current = undefined;\n }\n if (props.counter) {\n status = validateCounter();\n }\n if (!status.invalid && inputElRef.current.checkValidity) {\n status = validateHTML();\n }\n if (!status.invalid && props.validate) {\n status = validateCustom();\n }\n return status;\n };\n \n const checkValidity = () => {\n // default\n const status = props.valid !== undefined\n ? {\n invalid: !props.valid,\n message: props.error\n }\n : !isTouchedRef.current && !props.validateAtStart\n ? DEFAULT_VALID_STATE\n : getValidStatus();\n const previousInvalid = isInvalid;\n errorRef.current = status.message;\n if (status.invalid !== previousInvalid) {\n setIsInvalid(status.invalid);\n }\n if (!status.invalid) {\n errorRef.current = undefined;\n }\n };\n \n const notifyState = () => {\n if (props.onChange) {\n const validStatus = getValidStatus();\n const status = {\n focus: hasFocusRef.current,\n dirty: isDirtyRef.current,\n invalid: validStatus.invalid,\n error: validStatus.error,\n value: inputElRef.current.value\n };\n if (JSON.stringify(status) !== JSON.stringify(previousStatusRef.current)) {\n props.onChange({\n ...status,\n el: inputElRef.current,\n setInputState: newState => {\n const hasNewValue = newState.value !== undefined && newState.value !== inputElRef.current.value;\n const hasNewFocus = newState.focus !== undefined && newState.focus !== hasFocusRef.current;\n if (hasNewValue || hasNewFocus) {\n handleStateUpdate(newState);\n }\n },\n });\n previousStatusRef.current = status;\n }\n }\n };\n \n // State refs\n useEffect(\n () => {\n isDirtyRef.current = defaultValue !== \"\";\n hasFocusRef.current = false;\n isTouchedRef.current = false;\n errorRef.current = props.error;\n },\n []\n );\n\n // Input DOM element\n useEffect(\n () => {\n if (!domElement) {\n return;\n }\n inputElRef.current = domElement.querySelector(inputType);\n inputElRef.current.value = defaultValue;\n handleStateUpdate();\n checkValidity(); // handle `validateAtStart`\n notifyState();\n },\n [domElement]\n );\n\n // Handle value updates\n useEffect(\n () => {\n if (!inputElRef.current) {\n return;\n }\n const value = (props.value !== undefined && props.value !== null)\n ? props.value\n : inputElRef.current\n ? inputElRef.current.value\n : previousValueRef.current;\n const valueStr = (value === undefined || value === null)\n ? \"\"\n : value.toString();\n \n if (inputElRef.current && previousValueRef.current !== valueStr) {\n inputElRef.current.value = valueStr;\n previousValueRef.current = valueStr;\n handleStateUpdate({ type: \"input\" });\n }\n },\n [inputElRef.current, props.value]\n );\n\n // Handle error state updates\n useEffect(\n () => {\n if (!inputElRef.current) {\n return;\n }\n checkValidity();\n notifyState();\n },\n [props, inputElRef.current && inputElRef.current.value]\n );\n\n const componentProps = Object.assign({},\n filterSupportedAttributes(props),\n props.testId && { \"data-test-id\": props.testId },\n getRef(dom => dom && !domElement && (\n setDomElement(dom),\n props.ref && props.ref(dom)\n )),\n {\n className: [\n classes.component,\n isInvalid ? classes.stateInvalid : \"\",\n hasFocusRef.current ? classes.stateFocused : \"\",\n isDirtyRef.current ? classes.stateDirty : \"\",\n props.floatingLabel ? classes.hasFloatingLabel : \"\",\n props.disabled ? classes.stateDisabled : \"\",\n props.readonly ? classes.stateReadonly : \"\",\n props.dense ? classes.isDense : \"\",\n props.required ? classes.isRequired : \"\",\n props.fullWidth ? classes.hasFullWidth : \"\",\n props.counter ? classes.hasCounter : \"\",\n props.hideSpinner !== false && props.hideSpinner !== undefined ? classes.hideSpinner : \"\",\n props.hideClear !== false && props.hideClear !== undefined ? classes.hideClear : \"\",\n props.hideValidation ? classes.hideValidation : \"\",\n props.tone === \"dark\" ? \"pe-dark-tone\" : null,\n props.tone === \"light\" ? \"pe-light-tone\" : null,\n props.className || props[a.class],\n ].join(\" \")\n }\n );\n\n const allProps = {\n ...props,\n ...props.domAttributes\n };\n\n let errorMessage = props.error || errorRef.current;\n const type = allProps.multiLine\n ? null\n : !allProps.type || allProps.type === \"submit\" || allProps.type === \"search\"\n ? \"text\"\n : allProps.type;\n const showError = isInvalid && errorMessage !== undefined;\n const inactive = allProps.disabled || allProps[a.readonly];\n const requiredIndicator = allProps.required && allProps.requiredIndicator !== \"\"\n ? h(\"span\",\n {\n className: classes.requiredIndicator\n },\n allProps.requiredIndicator || \"*\"\n )\n : null;\n const optionalIndicator = !allProps.required && allProps.optionalIndicator\n ? h(\"span\",\n {\n className: classes.optionalIndicator\n },\n allProps.optionalIndicator\n )\n : null;\n const label = allProps.label\n ? [allProps.label, requiredIndicator, optionalIndicator]\n : null;\n\n const componentContent = [\n h(\"div\",\n {\n className: classes.inputArea,\n },\n [\n label\n ? h(\"label\",\n {\n className: classes.label,\n },\n label)\n : null,\n h(inputType, Object.assign(\n {},\n {\n className: classes.input,\n disabled: allProps.disabled\n },\n type ? { type } : null,\n allProps.name \n ? { name: allProps.name }\n : null,\n\n !ignoreEvent(allProps, a.onclick)\n ? {\n [a.onclick]: () => {\n if (inactive) {\n return;\n }\n // in case the browser does not give the field focus,\n // for instance when the user tapped to the current field off screen\n handleStateUpdate({ focus: true });\n }\n }\n : null,\n\n !ignoreEvent(allProps, a.onfocus)\n ? {\n [a.onfocus]: () => {\n if (inactive) {\n return;\n }\n handleStateUpdate({ focus: true });\n\n // set CSS class manually in case field gets focus but is off screen\n // and no redraw is triggered\n // at the next redraw `hasFocusRef.current` will be read and the focus class be set\n // in the props.class statement\n if (domElement) {\n domElement.classList.add(classes.stateFocused);\n }\n }\n }\n : null,\n \n !ignoreEvent(allProps, a.onblur)\n ? {\n [a.onblur]: () => {\n handleStateUpdate({ type: \"onblur\", focus: false });\n // same principle as onfocus\n domElement.classList.remove(classes.stateFocused);\n }\n }\n : null,\n\n !ignoreEvent(allProps, a.oninput)\n ? {\n [a.oninput]: e => {\n // default input event\n // may be overwritten by props.events\n handleStateUpdate({ type: \"input\" });\n }\n }\n : null,\n\n !ignoreEvent(allProps, a.onkeydown)\n ? {\n [a.onkeydown]: e => {\n if (e.key === \"Enter\") {\n isTouchedRef.current = true;\n } else if (e.key === \"Escape\" || e.key === \"Esc\") {\n handleStateUpdate({ focus: false });\n }\n }\n }\n : null,\n\n allProps.events ? allProps.events : null, // NOTE: may overwrite oninput\n allProps.required !== undefined && !!allProps.required ? { required: true } : null,\n allProps[a.readonly] !== undefined && !!allProps[a.readonly] ? { [a.readonly]: true } : null,\n allProps.pattern !== undefined ? { pattern: allProps.pattern } : null,\n allProps[a.maxlength] !== undefined ? { [a.maxlength]: allProps[a.maxlength] } : null,\n allProps[a.minlength] !== undefined ? { [a.minlength]: allProps[a.minlength] } : null,\n allProps.max !== undefined ? { max: allProps.max } : null,\n allProps.min !== undefined ? { min: allProps.min } : null,\n allProps[a.autofocus] !== undefined ? { [a.autofocus]: allProps[a.autofocus] } : null,\n allProps[a.tabindex] !== undefined ? { [a.tabindex]: allProps[a.tabindex] } : null,\n allProps.rows !== undefined ? { rows: allProps.rows } : null,\n allProps.placeholder !== undefined ? { placeholder: allProps.placeholder } : null,\n allProps.domAttributes !== undefined ? { ...allProps.domAttributes } : null,\n ))\n ]\n ),\n allProps.counter\n ? h(\"div\",\n {\n className: classes.counter\n },\n ((value.length) || 0) + \" / \" + allProps.counter\n )\n : null,\n allProps.help && !showError\n ? h(\"div\",\n {\n className: [\n classes.help,\n allProps.focusHelp ? classes.focusHelp : null\n ].join(\" \")\n },\n allProps.help\n )\n : null,\n showError\n ? h(\"div\",\n {\n className: classes.error\n },\n errorMessage\n )\n : showErrorPlaceholder && !allProps.help\n ? h(\"div\",\n {\n className: classes.errorPlaceholder\n }\n )\n : null\n ];\n\n const content = [\n props.before,\n ...componentContent,\n props.after\n ];\n\n return h(props.element || \"div\", componentProps, content);\n};\n"],"names":["component","counter","error","errorPlaceholder","focusHelp","help","input","inputArea","label","optionalIndicator","requiredIndicator","hasCounter","hasFloatingLabel","hasFullWidth","hideClear","hideSpinner","hideValidation","isDense","isRequired","stateDirty","stateDisabled","stateFocused","stateInvalid","stateReadonly","DEFAULT_VALID_STATE","invalid","message","undefined","ignoreEvent","props","name","ignoreEvents","indexOf","h","a","useState","useEffect","useRef","getRef","defaultValue","toString","value","domElement","setDomElement","isInvalid","setIsInvalid","setValue","inputElRef","previousValueRef","previousStatusRef","isDirtyRef","hasFocusRef","isTouchedRef","errorRef","inputType","multiLine","showErrorPlaceholder","valid","validate","min","max","minlength","maxlength","required","pattern","handleStateUpdate","type","focus","current","blur","validateOnInput","checkValidity","notifyState","getValidStatus","status","length","validateResetOnClear","validState","validateCustom","validateAtStart","previousInvalid","onChange","validStatus","dirty","JSON","stringify","el","setInputState","newState","hasNewValue","hasNewFocus","querySelector","valueStr","componentProps","_extends","filterSupportedAttributes","testId","dom","ref","className","classes","floatingLabel","disabled","readonly","dense","fullWidth","tone","join","allProps","domAttributes","errorMessage","showError","inactive","componentContent","onclick","onfocus","classList","add","onblur","remove","oninput","e","onkeydown","key","events","autofocus","tabindex","rows","placeholder","content","before","after","element"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"polythene-core-textfield.js","sources":["../../polythene-css-classes/textfield.js","../src/index.js"],"sourcesContent":["\nexport default {\n component: \"pe-textfield\",\n\n // elements\n counter: \"pe-textfield__counter\",\n error: \"pe-textfield__error\",\n errorPlaceholder: \"pe-textfield__error-placeholder\",\n focusHelp: \"pe-textfield__help-focus\",\n help: \"pe-textfield__help\",\n input: \"pe-textfield__input\",\n inputArea: \"pe-textfield__input-area\",\n label: \"pe-textfield__label\",\n optionalIndicator: \"pe-textfield__optional-indicator\",\n requiredIndicator: \"pe-textfield__required-indicator\",\n\n // states\n hasCounter: \"pe-textfield--counter\",\n hasFloatingLabel: \"pe-textfield--floating-label\",\n hasFullWidth: \"pe-textfield--full-width\",\n hideClear: \"pe-textfield--hide-clear\",\n hideSpinner: \"pe-textfield--hide-spinner\",\n hideValidation: \"pe-textfield--hide-validation\",\n isDense: \"pe-textfield--dense\",\n isRequired: \"pe-textfield--required\",\n stateDirty: \"pe-textfield--dirty\",\n stateDisabled: \"pe-textfield--disabled\",\n stateFocused: \"pe-textfield--focused\",\n stateInvalid: \"pe-textfield--invalid\",\n stateReadonly: \"pe-textfield--readonly\",\n};\n","import { filterSupportedAttributes } from \"polythene-core\";\nimport classes from \"polythene-css-classes/textfield\";\n\nconst DEFAULT_VALID_STATE = {\n invalid: false,\n message: undefined\n};\n\nconst ignoreEvent = (props, name) =>\n props.ignoreEvents && props.ignoreEvents.indexOf(name) !== -1;\n\nexport const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props }) => {\n const defaultValue = props.defaultValue !== undefined && props.defaultValue !== null\n ? props.defaultValue.toString()\n : props.value !== undefined && props.value !== null\n ? props.value.toString()\n : \"\";\n\n const [domElement, setDomElement] = useState();\n const [isInvalid, setIsInvalid] = useState(false);\n const [value, setValue] = useState(defaultValue);\n const inputElRef = useRef();\n const previousValueRef = useRef();\n const previousStatusRef = useRef();\n const isDirtyRef = useRef();\n const hasFocusRef = useRef();\n const isTouchedRef = useRef();\n const errorRef = useRef();\n const inputType = props.multiLine ? \"textarea\" : \"input\";\n const showErrorPlaceholder = !!(props.valid !== undefined || props.validate || props.min || props.max || props[a.minlength] || props[a.maxlength] || props.required || props.pattern);\n\n const handleStateUpdate = ({ type, focus, value } = {}) => {\n if (!inputElRef.current) {\n return;\n }\n if (value !== undefined) {\n inputElRef.current.value = value;\n }\n if (focus !== undefined) {\n hasFocusRef.current = focus;\n if (focus) {\n inputElRef.current.focus();\n } else {\n inputElRef.current.blur();\n }\n }\n if (type === \"input\" && (props.validateOnInput || props.counter)) {\n isTouchedRef.current = inputElRef.current.value !== defaultValue;\n }\n if (type !== \"input\") {\n isTouchedRef.current = inputElRef.current.value !== defaultValue;\n }\n if (type === \"onblur\") {\n isTouchedRef.current = true;\n }\n isDirtyRef.current = inputElRef.current.value !== \"\";\n checkValidity();\n notifyState();\n if (previousValueRef.current !== inputElRef.current.value) {\n setValue(inputElRef.current.value); // force update\n }\n };\n\n const validateCustom = () => {\n if (!inputElRef.current) {\n return DEFAULT_VALID_STATE;\n }\n const validState = props.validate(inputElRef.current.value);\n return {\n invalid: validState && !validState.valid,\n message: validState && validState.error\n };\n };\n \n const validateCounter = () => ({\n invalid: inputElRef.current.value.length > props.counter,\n message: props.error\n });\n \n const validateHTML = () => ({\n invalid: !inputElRef.current.checkValidity(),\n message: props.error\n });\n \n const getValidStatus = () => {\n let status = DEFAULT_VALID_STATE;\n \n // props.validateResetOnClear: reset validation when field is cleared\n if (isTouchedRef.current && isInvalid && inputElRef.current.value.length === 0 && props.validateResetOnClear) {\n isTouchedRef.current = false;\n setIsInvalid(false);\n errorRef.current = undefined;\n }\n if (props.counter) {\n status = validateCounter();\n }\n if (!status.invalid && inputElRef.current.checkValidity) {\n status = validateHTML();\n }\n if (!status.invalid && props.validate) {\n status = validateCustom();\n }\n return status;\n };\n \n const checkValidity = () => {\n // default\n const status = props.valid !== undefined\n ? {\n invalid: !props.valid,\n message: props.error\n }\n : !isTouchedRef.current && !props.validateAtStart\n ? DEFAULT_VALID_STATE\n : getValidStatus();\n const previousInvalid = isInvalid;\n errorRef.current = status.message;\n if (status.invalid !== previousInvalid) {\n setIsInvalid(status.invalid);\n }\n if (!status.invalid) {\n errorRef.current = undefined;\n }\n };\n \n const notifyState = () => {\n if (props.onChange) {\n const validStatus = getValidStatus();\n const status = {\n focus: hasFocusRef.current,\n dirty: isDirtyRef.current,\n invalid: validStatus.invalid,\n error: validStatus.error,\n value: inputElRef.current.value\n };\n if (JSON.stringify(status) !== JSON.stringify(previousStatusRef.current)) {\n props.onChange({\n ...status,\n el: inputElRef.current,\n setInputState: newState => {\n const hasNewValue = newState.value !== undefined && newState.value !== inputElRef.current.value;\n const hasNewFocus = newState.focus !== undefined && newState.focus !== hasFocusRef.current;\n if (hasNewValue || hasNewFocus) {\n handleStateUpdate(newState);\n }\n },\n });\n previousStatusRef.current = status;\n }\n }\n };\n \n // State refs\n useEffect(\n () => {\n isDirtyRef.current = defaultValue !== \"\";\n hasFocusRef.current = false;\n isTouchedRef.current = false;\n errorRef.current = props.error;\n },\n []\n );\n\n // Input DOM element\n useEffect(\n () => {\n if (!domElement) {\n return;\n }\n inputElRef.current = domElement.querySelector(inputType);\n inputElRef.current.value = defaultValue;\n handleStateUpdate();\n checkValidity(); // handle `validateAtStart`\n notifyState();\n },\n [domElement]\n );\n\n // Handle value updates\n useEffect(\n () => {\n if (!inputElRef.current) {\n return;\n }\n const value = (props.value !== undefined && props.value !== null)\n ? props.value\n : inputElRef.current\n ? inputElRef.current.value\n : previousValueRef.current;\n const valueStr = (value === undefined || value === null)\n ? \"\"\n : value.toString();\n \n if (inputElRef.current && previousValueRef.current !== valueStr) {\n inputElRef.current.value = valueStr;\n previousValueRef.current = valueStr;\n handleStateUpdate({ type: \"input\" });\n }\n },\n [inputElRef.current, props.value]\n );\n\n // Handle error state updates\n useEffect(\n () => {\n if (!inputElRef.current) {\n return;\n }\n checkValidity();\n notifyState();\n },\n [props, inputElRef.current && inputElRef.current.value]\n );\n\n const componentProps = Object.assign({},\n filterSupportedAttributes(props),\n props.testId && { \"data-test-id\": props.testId },\n getRef(dom => dom && !domElement && (\n setDomElement(dom),\n props.ref && props.ref(dom)\n )),\n {\n className: [\n classes.component,\n isInvalid ? classes.stateInvalid : \"\",\n hasFocusRef.current ? classes.stateFocused : \"\",\n isDirtyRef.current ? classes.stateDirty : \"\",\n props.floatingLabel ? classes.hasFloatingLabel : \"\",\n props.disabled ? classes.stateDisabled : \"\",\n props.readonly ? classes.stateReadonly : \"\",\n props.dense ? classes.isDense : \"\",\n props.required ? classes.isRequired : \"\",\n props.fullWidth ? classes.hasFullWidth : \"\",\n props.counter ? classes.hasCounter : \"\",\n props.hideSpinner !== false && props.hideSpinner !== undefined ? classes.hideSpinner : \"\",\n props.hideClear !== false && props.hideClear !== undefined ? classes.hideClear : \"\",\n props.hideValidation ? classes.hideValidation : \"\",\n props.tone === \"dark\" ? \"pe-dark-tone\" : null,\n props.tone === \"light\" ? \"pe-light-tone\" : null,\n props.className || props[a.class],\n ].join(\" \")\n }\n );\n\n const allProps = {\n ...props,\n ...props.domAttributes\n };\n\n let errorMessage = props.error || errorRef.current;\n const type = allProps.multiLine\n ? null\n : !allProps.type || allProps.type === \"submit\" || allProps.type === \"search\"\n ? \"text\"\n : allProps.type;\n const showError = isInvalid && errorMessage !== undefined;\n const inactive = allProps.disabled || allProps[a.readonly];\n const requiredIndicator = allProps.required && allProps.requiredIndicator !== \"\"\n ? h(\"span\",\n {\n className: classes.requiredIndicator\n },\n allProps.requiredIndicator || \"*\"\n )\n : null;\n const optionalIndicator = !allProps.required && allProps.optionalIndicator\n ? h(\"span\",\n {\n className: classes.optionalIndicator\n },\n allProps.optionalIndicator\n )\n : null;\n const label = allProps.label\n ? [allProps.label, requiredIndicator, optionalIndicator]\n : null;\n const events = allProps.events || {};\n\n const componentContent = [\n h(\"div\",\n {\n className: classes.inputArea,\n },\n [\n label\n ? h(\"label\",\n {\n className: classes.label,\n },\n label)\n : null,\n h(inputType, Object.assign(\n {},\n {\n className: classes.input,\n disabled: allProps.disabled\n },\n type ? { type } : null,\n allProps.name \n ? { name: allProps.name }\n : null,\n \n events,\n\n !ignoreEvent(allProps, a.onclick)\n ? {\n [a.onclick]: e => {\n if (inactive) {\n return;\n }\n // in case the browser does not give the field focus,\n // for instance when the user tapped to the current field off screen\n handleStateUpdate({ focus: true });\n events[a.onclick] && events[a.onclick](e);\n }\n }\n : null,\n\n !ignoreEvent(allProps, a.onfocus)\n ? {\n [a.onfocus]: e => {\n if (inactive) {\n return;\n }\n handleStateUpdate({ focus: true });\n\n // set CSS class manually in case field gets focus but is off screen\n // and no redraw is triggered\n // at the next redraw `hasFocusRef.current` will be read and the focus class be set\n // in the props.class statement\n if (domElement) {\n domElement.classList.add(classes.stateFocused);\n }\n events[a.onfocus] && events[a.onfocus](e);\n }\n }\n : null,\n \n !ignoreEvent(allProps, a.onblur)\n ? {\n [a.onblur]: e => {\n handleStateUpdate({ type: \"onblur\", focus: false });\n // same principle as onfocus\n domElement.classList.remove(classes.stateFocused);\n events[a.onblur] && events[a.onblur](e);\n }\n }\n : null,\n\n !ignoreEvent(allProps, a.oninput)\n ? {\n [a.oninput]: e => {\n // default input event\n // may be overwritten by props.events\n handleStateUpdate({ type: \"input\" });\n events[a.oninput] && events[a.oninput](e);\n }\n }\n : null,\n\n !ignoreEvent(allProps, a.onkeydown)\n ? {\n [a.onkeydown]: e => {\n if (e.key === \"Enter\") {\n isTouchedRef.current = true;\n } else if (e.key === \"Escape\" || e.key === \"Esc\") {\n handleStateUpdate({ focus: false });\n }\n events[a.onkeydown] && events[a.onkeydown](e);\n }\n }\n : null,\n \n allProps.required !== undefined && !!allProps.required ? { required: true } : null,\n allProps[a.readonly] !== undefined && !!allProps[a.readonly] ? { [a.readonly]: true } : null,\n allProps.pattern !== undefined ? { pattern: allProps.pattern } : null,\n allProps[a.maxlength] !== undefined ? { [a.maxlength]: allProps[a.maxlength] } : null,\n allProps[a.minlength] !== undefined ? { [a.minlength]: allProps[a.minlength] } : null,\n allProps.max !== undefined ? { max: allProps.max } : null,\n allProps.min !== undefined ? { min: allProps.min } : null,\n allProps[a.autofocus] !== undefined ? { [a.autofocus]: allProps[a.autofocus] } : null,\n allProps[a.tabindex] !== undefined ? { [a.tabindex]: allProps[a.tabindex] } : null,\n allProps.rows !== undefined ? { rows: allProps.rows } : null,\n allProps.placeholder !== undefined ? { placeholder: allProps.placeholder } : null,\n allProps.domAttributes !== undefined ? { ...allProps.domAttributes } : null,\n ))\n ]\n ),\n allProps.counter\n ? h(\"div\",\n {\n className: classes.counter\n },\n ((value.length) || 0) + \" / \" + allProps.counter\n )\n : null,\n allProps.help && !showError\n ? h(\"div\",\n {\n className: [\n classes.help,\n allProps.focusHelp ? classes.focusHelp : null\n ].join(\" \")\n },\n allProps.help\n )\n : null,\n showError\n ? h(\"div\",\n {\n className: classes.error\n },\n errorMessage\n )\n : showErrorPlaceholder && !allProps.help\n ? h(\"div\",\n {\n className: classes.errorPlaceholder\n }\n )\n : null\n ];\n\n const content = [\n props.before,\n ...componentContent,\n props.after\n ];\n\n return h(props.element || \"div\", componentProps, content);\n};\n"],"names":["component","counter","error","errorPlaceholder","focusHelp","help","input","inputArea","label","optionalIndicator","requiredIndicator","hasCounter","hasFloatingLabel","hasFullWidth","hideClear","hideSpinner","hideValidation","isDense","isRequired","stateDirty","stateDisabled","stateFocused","stateInvalid","stateReadonly","DEFAULT_VALID_STATE","invalid","message","undefined","ignoreEvent","props","name","ignoreEvents","indexOf","h","a","useState","useEffect","useRef","getRef","defaultValue","toString","value","domElement","setDomElement","isInvalid","setIsInvalid","setValue","inputElRef","previousValueRef","previousStatusRef","isDirtyRef","hasFocusRef","isTouchedRef","errorRef","inputType","multiLine","showErrorPlaceholder","valid","validate","min","max","minlength","maxlength","required","pattern","handleStateUpdate","type","focus","current","blur","validateOnInput","checkValidity","notifyState","getValidStatus","status","length","validateResetOnClear","validState","validateCustom","validateAtStart","previousInvalid","onChange","validStatus","dirty","JSON","stringify","el","setInputState","newState","hasNewValue","hasNewFocus","querySelector","valueStr","componentProps","_extends","filterSupportedAttributes","testId","dom","ref","className","classes","floatingLabel","disabled","readonly","dense","fullWidth","tone","join","allProps","domAttributes","errorMessage","showError","inactive","events","componentContent","onclick","e","onfocus","classList","add","onblur","remove","oninput","onkeydown","key","autofocus","tabindex","rows","placeholder","content","before","after","element"],"mappings":"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"} \ No newline at end of file diff --git a/packages/polythene-core-textfield/dist/polythene-core-textfield.mjs b/packages/polythene-core-textfield/dist/polythene-core-textfield.mjs index 1d1ef68f4..896962c10 100644 --- a/packages/polythene-core-textfield/dist/polythene-core-textfield.mjs +++ b/packages/polythene-core-textfield/dist/polythene-core-textfield.mjs @@ -424,6 +424,7 @@ var _TextField = function _TextField(_ref) { className: classes.optionalIndicator }, allProps.optionalIndicator) : null; var label = allProps.label ? [allProps.label, requiredIndicator, optionalIndicator] : null; + var events = allProps.events || {}; var componentContent = [h("div", { className: classes.inputArea }, [label ? h("label", { @@ -435,7 +436,7 @@ var _TextField = function _TextField(_ref) { type: type } : null, allProps.name ? { name: allProps.name - } : null, !ignoreEvent(allProps, a.onclick) ? _defineProperty({}, a.onclick, function () { + } : null, events, !ignoreEvent(allProps, a.onclick) ? _defineProperty({}, a.onclick, function (e) { if (inactive) { return; } // in case the browser does not give the field focus, @@ -445,7 +446,8 @@ var _TextField = function _TextField(_ref) { handleStateUpdate({ focus: true }); - }) : null, !ignoreEvent(allProps, a.onfocus) ? _defineProperty({}, a.onfocus, function () { + events[a.onclick] && events[a.onclick](e); + }) : null, !ignoreEvent(allProps, a.onfocus) ? _defineProperty({}, a.onfocus, function (e) { if (inactive) { return; } @@ -460,19 +462,23 @@ var _TextField = function _TextField(_ref) { if (domElement) { domElement.classList.add(classes.stateFocused); } - }) : null, !ignoreEvent(allProps, a.onblur) ? _defineProperty({}, a.onblur, function () { + + events[a.onfocus] && events[a.onfocus](e); + }) : null, !ignoreEvent(allProps, a.onblur) ? _defineProperty({}, a.onblur, function (e) { handleStateUpdate({ type: "onblur", focus: false }); // same principle as onfocus domElement.classList.remove(classes.stateFocused); + events[a.onblur] && events[a.onblur](e); }) : null, !ignoreEvent(allProps, a.oninput) ? _defineProperty({}, a.oninput, function (e) { // default input event // may be overwritten by props.events handleStateUpdate({ type: "input" }); + events[a.oninput] && events[a.oninput](e); }) : null, !ignoreEvent(allProps, a.onkeydown) ? _defineProperty({}, a.onkeydown, function (e) { if (e.key === "Enter") { isTouchedRef.current = true; @@ -481,8 +487,9 @@ var _TextField = function _TextField(_ref) { focus: false }); } - }) : null, allProps.events ? allProps.events : null, // NOTE: may overwrite oninput - allProps.required !== undefined && !!allProps.required ? { + + events[a.onkeydown] && events[a.onkeydown](e); + }) : null, allProps.required !== undefined && !!allProps.required ? { required: true } : null, allProps[a.readonly] !== undefined && !!allProps[a.readonly] ? _defineProperty({}, a.readonly, true) : null, allProps.pattern !== undefined ? { pattern: allProps.pattern diff --git a/packages/polythene-core-textfield/src/index.js b/packages/polythene-core-textfield/src/index.js index e36e6466b..449d2b816 100644 --- a/packages/polythene-core-textfield/src/index.js +++ b/packages/polythene-core-textfield/src/index.js @@ -274,6 +274,7 @@ export const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props const label = allProps.label ? [allProps.label, requiredIndicator, optionalIndicator] : null; + const events = allProps.events || {}; const componentContent = [ h("div", @@ -298,23 +299,26 @@ export const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props allProps.name ? { name: allProps.name } : null, + + events, !ignoreEvent(allProps, a.onclick) ? { - [a.onclick]: () => { + [a.onclick]: e => { if (inactive) { return; } // in case the browser does not give the field focus, // for instance when the user tapped to the current field off screen handleStateUpdate({ focus: true }); + events[a.onclick] && events[a.onclick](e); } } : null, !ignoreEvent(allProps, a.onfocus) ? { - [a.onfocus]: () => { + [a.onfocus]: e => { if (inactive) { return; } @@ -327,16 +331,18 @@ export const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props if (domElement) { domElement.classList.add(classes.stateFocused); } + events[a.onfocus] && events[a.onfocus](e); } } : null, !ignoreEvent(allProps, a.onblur) ? { - [a.onblur]: () => { + [a.onblur]: e => { handleStateUpdate({ type: "onblur", focus: false }); // same principle as onfocus domElement.classList.remove(classes.stateFocused); + events[a.onblur] && events[a.onblur](e); } } : null, @@ -347,6 +353,7 @@ export const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props // default input event // may be overwritten by props.events handleStateUpdate({ type: "input" }); + events[a.oninput] && events[a.oninput](e); } } : null, @@ -359,11 +366,11 @@ export const _TextField = ({ h, a, useState, useEffect, useRef, getRef, ...props } else if (e.key === "Escape" || e.key === "Esc") { handleStateUpdate({ focus: false }); } + events[a.onkeydown] && events[a.onkeydown](e); } } : null, - - allProps.events ? allProps.events : null, // NOTE: may overwrite oninput + allProps.required !== undefined && !!allProps.required ? { required: true } : null, allProps[a.readonly] !== undefined && !!allProps[a.readonly] ? { [a.readonly]: true } : null, allProps.pattern !== undefined ? { pattern: allProps.pattern } : null, diff --git a/packages/tests/src/textfield/components/events.js b/packages/tests/src/textfield/components/events.js new file mode 100644 index 000000000..88ea6d8ba --- /dev/null +++ b/packages/tests/src/textfield/components/events.js @@ -0,0 +1,19 @@ + +export default ({ h, a, TextField }) => ({ + view: vnode => { + const state = vnode.state; + return h("div", null, [ + h(TextField, { + label: "Focus and then blur the field", + events: { + [a.onfocus]: e => console.log("onfocus called", e), + [a.onblur]: e => console.log("onblur called", e), + [a.onkeydown]: e => console.log("onkeydown called", e), + [a.onclick]: e => console.log("onclick called", e), + [a.oninput]: e => console.log("oninput called", e), + } + }), + + ]); + } +}); diff --git a/packages/tests/src/textfield/tests-generic.js b/packages/tests/src/textfield/tests-generic.js index 67066495c..729b46415 100644 --- a/packages/tests/src/textfield/tests-generic.js +++ b/packages/tests/src/textfield/tests-generic.js @@ -1,4 +1,5 @@ import focus from "./components/focus"; +import events from "./components/events"; import onChange from "./components/onChange"; import setValue from "./components/set-value"; import { TextFieldCSS } from "polythene-css"; @@ -29,6 +30,7 @@ export default ({ TextField, Button, h, a }) => { const ipsum = "Lorem ipsum dolor sit amet, idque signiferumque at usu, eum recusabo aliquando id. Deleniti percipitur concludaturque eu eos. Vix elitr feugait ne. Mel agam integre eu, has minim aliquid salutandi eu. Est nusquam abhorreant ne. Ei wisi dicant eam, vix tota reque persequeris an. Quo in theophrastus reprehendunt, ius te graecis epicuri volutpat."; const shortIpsum = "Lorem ipsum dolor sit amet,"; const Focus = focus({ h, a, TextField, Button }); + const Events = events({ h, a, TextField }); const OnChange = onChange({ h, a, TextField, Button }); const SetValue = setValue({ h, a, TextField, Button }); @@ -444,6 +446,15 @@ export default ({ TextField, Button, h, a }) => { ]) } }, + { + name: "Test events", + interactive: true, + component: { + view: () => block( + h(Events) + ) + } + }, { name: "Give focus", interactive: true,