From 1e5b2f54c3e44a2699ff345d0d257e68dfcdab51 Mon Sep 17 00:00:00 2001 From: Pierre Donias Date: Thu, 1 Feb 2018 11:34:42 +0100 Subject: [PATCH] chore: use debounce-input-decorator (#2608) --- package.json | 1 + src/common/debounce-component-decorator.js | 60 ---------------------- src/common/sorted-table/index.js | 2 +- src/xo-app/new-vm/index.js | 2 +- src/xo-app/settings/ips/index.js | 2 +- yarn.lock | 6 +++ 6 files changed, 10 insertions(+), 63 deletions(-) delete mode 100644 src/common/debounce-component-decorator.js diff --git a/package.json b/package.json index b6c0b7bb3..a61cfa5b8 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "complex-matcher": "^0.2.1", "cookies-js": "^1.2.2", "d3": "^4.12.2", + "debounce-input-decorator": "^0.1.0", "dependency-check": "^3.0.0", "enzyme": "^3.3.0", "enzyme-adapter-react-15": "^1.0.5", diff --git a/src/common/debounce-component-decorator.js b/src/common/debounce-component-decorator.js deleted file mode 100644 index 8acdadbe5..000000000 --- a/src/common/debounce-component-decorator.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react' -import { debounce } from 'lodash' - -import getEventValue from './get-event-value' - -const DEFAULT_DELAY = ({ debounceTimeout = 250 }) => debounceTimeout - -const debounceComponentDecorator = (delay = DEFAULT_DELAY) => Component => - class DebouncedComponent extends React.Component { - constructor (props) { - super() - this.state = { value: props.value } - - this._notify = debounce(event => { - this.props.onChange(event) - }, typeof delay === 'function' ? delay(props) : delay) - - this._onChange = event => { - this.setState({ value: getEventValue(event) }) - - event.persist() - this._notify(event) - } - - this._wrappedInstance = null - this._onRef = ref => { - this._wrappedInstance = ref - } - } - - componentWillReceiveProps ({ value }) { - if (value !== this.props.value) { - this._notify.cancel() - this.setState({ value }) - } - } - - componentWillUnmount () { - this._notify.flush() - } - - getWrappedInstance () { - return this._wrappedInstance - } - - render () { - const props = { - ...this.props, - onChange: this._onChange, - ref: this._onRef, - value: this.state.value, - } - return - } - } -export { debounceComponentDecorator as default } - -// common components -export const Input = debounceComponentDecorator()('input') -export const Textarea = debounceComponentDecorator()('textarea') diff --git a/src/common/sorted-table/index.js b/src/common/sorted-table/index.js index 59173cbf5..a2038745e 100644 --- a/src/common/sorted-table/index.js +++ b/src/common/sorted-table/index.js @@ -5,6 +5,7 @@ import DropdownMenu from 'react-bootstrap-4/lib/DropdownMenu' // https://phabric import DropdownToggle from 'react-bootstrap-4/lib/DropdownToggle' // https://phabricator.babeljs.io/T6662 so Dropdown.Toggle won't work https://react-bootstrap.github.io/components.html#btn-dropdowns-custom import React from 'react' import Shortcuts from 'shortcuts' +import { Input as DebouncedInput } from 'debounce-input-decorator' import { Portal } from 'react-overlays' import { routerShape } from 'react-router/lib/PropTypes' import { Set } from 'immutable' @@ -31,7 +32,6 @@ import SingleLineRow from '../single-line-row' import Tooltip from '../tooltip' import { BlockLink } from '../link' import { Container, Col } from '../grid' -import { Input as DebouncedInput } from '../debounce-component-decorator' import { createCounter, createFilter, diff --git a/src/xo-app/new-vm/index.js b/src/xo-app/new-vm/index.js index 8e9c94050..53e08692d 100644 --- a/src/xo-app/new-vm/index.js +++ b/src/xo-app/new-vm/index.js @@ -18,7 +18,7 @@ import { injectIntl } from 'react-intl' import { Input as DebounceInput, Textarea as DebounceTextarea, -} from 'debounce-component-decorator' +} from 'debounce-input-decorator' import { Limits } from 'usage' import { clamp, diff --git a/src/xo-app/settings/ips/index.js b/src/xo-app/settings/ips/index.js index ba1867d34..9a0853a32 100644 --- a/src/xo-app/settings/ips/index.js +++ b/src/xo-app/settings/ips/index.js @@ -12,7 +12,7 @@ import { Container, Row, Col } from 'grid' import { createGetObjectsOfType, createSelector } from 'selectors' import { formatIps, getNextIpV4, parseIpPattern } from 'ip' import { injectIntl } from 'react-intl' -import { Input as DebounceInput } from 'debounce-component-decorator' +import { Input as DebounceInput } from 'debounce-input-decorator' import { renderXoItemFromId } from 'render-xo-item' import { SelectNetwork } from 'select-objects' import { Text } from 'editable' diff --git a/yarn.lock b/yarn.lock index 636be4d68..6bd5689ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2544,6 +2544,12 @@ dateformat@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.2.0.tgz#4065e2013cf9fb916ddfd82efb506ad4c6769062" +debounce-input-decorator@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/debounce-input-decorator/-/debounce-input-decorator-0.1.0.tgz#e1c4ca7f40fa2d63e7bc4e14ea5dc850fdabaeea" + dependencies: + lodash "^4.17.4" + debug-fabulous@1.X: version "1.0.0" resolved "https://registry.yarnpkg.com/debug-fabulous/-/debug-fabulous-1.0.0.tgz#57f6648646097b1b0849dcda0017362c1ec00f8b"