UNPKG

@wordpress/compose

Version:
8 lines (7 loc) 3.31 kB
{ "version": 3, "sources": ["../../../src/higher-order/with-safe-timeout/index.tsx"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tWithInjectedProps,\n\tWithoutInjectedProps,\n} from '../../utils/create-higher-order-component';\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`\n * types here because those functions include functionality that is not handled\n * by this component, like the ability to pass extra arguments.\n *\n * In the case of this component, we only handle the simplest case where\n * `setTimeout` only accepts a function (not a string) and an optional delay.\n */\ninterface TimeoutProps {\n\tsetTimeout: ( fn: () => void, delay: number ) => number;\n\tclearTimeout: ( id: number ) => void;\n}\n\n/**\n * A higher-order component used to provide and manage delayed function calls\n * that ought to be bound to a component's lifecycle.\n */\nconst withSafeTimeout = createHigherOrderComponent(\n\t< C extends WithInjectedProps< C, TimeoutProps > >(\n\t\tOriginalComponent: C\n\t) => {\n\t\ttype WrappedProps = WithoutInjectedProps< C, TimeoutProps >;\n\t\treturn class WrappedComponent extends Component< WrappedProps > {\n\t\t\ttimeouts: number[];\n\n\t\t\tconstructor( props: WrappedProps ) {\n\t\t\t\tsuper( props );\n\t\t\t\tthis.timeouts = [];\n\t\t\t\tthis.setTimeout = this.setTimeout.bind( this );\n\t\t\t\tthis.clearTimeout = this.clearTimeout.bind( this );\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tthis.timeouts.forEach( clearTimeout );\n\t\t\t}\n\n\t\t\tsetTimeout( fn: () => void, delay: number ) {\n\t\t\t\tconst id = setTimeout( () => {\n\t\t\t\t\tfn();\n\t\t\t\t\tthis.clearTimeout( id );\n\t\t\t\t}, delay );\n\t\t\t\tthis.timeouts.push( id );\n\t\t\t\treturn id;\n\t\t\t}\n\n\t\t\tclearTimeout( id: number ) {\n\t\t\t\tclearTimeout( id );\n\t\t\t\tthis.timeouts = this.timeouts.filter(\n\t\t\t\t\t( timeoutId ) => timeoutId !== id\n\t\t\t\t);\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t<OriginalComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\tsetTimeout={ this.setTimeout }\n\t\t\t\t\t\tclearTimeout={ this.clearTimeout }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t},\n\t'withSafeTimeout'\n);\n\nexport default withSafeTimeout;\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0B;AAS1B,2CAA2C;AAyDtC;AAAA;AAAA;AAAA;AAtCL,IAAM,sBAAkB;AAAA,EACvB,CACC,sBACI;AAEJ,WAAO,MAAM,yBAAyB,yBAA0B;AAAA,MAC/D;AAAA,MAEA,YAAa,OAAsB;AAClC,cAAO,KAAM;AACb,aAAK,WAAW,CAAC;AACjB,aAAK,aAAa,KAAK,WAAW,KAAM,IAAK;AAC7C,aAAK,eAAe,KAAK,aAAa,KAAM,IAAK;AAAA,MAClD;AAAA,MAEA,uBAAuB;AACtB,aAAK,SAAS,QAAS,YAAa;AAAA,MACrC;AAAA,MAEA,WAAY,IAAgB,OAAgB;AAC3C,cAAM,KAAK,WAAY,MAAM;AAC5B,aAAG;AACH,eAAK,aAAc,EAAG;AAAA,QACvB,GAAG,KAAM;AACT,aAAK,SAAS,KAAM,EAAG;AACvB,eAAO;AAAA,MACR;AAAA,MAEA,aAAc,IAAa;AAC1B,qBAAc,EAAG;AACjB,aAAK,WAAW,KAAK,SAAS;AAAA,UAC7B,CAAE,cAAe,cAAc;AAAA,QAChC;AAAA,MACD;AAAA,MAEA,SAAS;AACR,eAEC;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,KAAK;AAAA,YACV,YAAa,KAAK;AAAA,YAClB,cAAe,KAAK;AAAA;AAAA,QACrB;AAAA,MAEF;AAAA,IACD;AAAA,EACD;AAAA,EACA;AACD;AAEA,IAAO,4BAAQ;", "names": [] }