Skip to content
This repository has been archived by the owner on Jul 8, 2023. It is now read-only.

debounce-handler can get delay via props #23

Merged
merged 5 commits into from
Aug 29, 2018
Merged

debounce-handler can get delay via props #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b4e0cd8
feature: delay can now be a function where the value can be derrived …
nmccready Aug 28, 2018
cec49d3
fix lint
nmccready Aug 28, 2018
9f2d643
throttle updated get debounce features and fixes
nmccready Aug 28, 2018
a4f76aa
Demo and Documentation/Readme updates
nmccready Aug 28, 2018
dcb742f
props.debounce to props.throttle in Demo and docs
nmccready Aug 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 32 additions & 3 deletions packages/debounce-handler/demo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,46 @@ import { compose, withState, withHandlers } from 'recompose'

import debounceHandler from '../src/'

const Demo = ({ count, onButtonClick }) => (
<div>
const Demo = ({ count, onButtonClick, label }) => (
<div className='demo'>
{label || ''}
<h1>{count}</h1>
<button onClick={onButtonClick}>CLICK ME FAST</button>
</div>
)

export default compose(
const Demo1 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
debounceHandler('onButtonClick', 300)
)(Demo)

const Demo2 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
debounceHandler('onButtonClick', (props) => props.debounce || 0)
)(Demo)

const MainDemo = () => (
<div>
<style>
{
`.demo {
margin-bottom: 10px;
border-style: dotted;
border-radius: 10px;
padding: 5px;
}`
}
</style>
<Demo1 label='Demo 1' />
<Demo2 label='Demo 2 w Debounce' debounce={300} />
<Demo2 label='Demo 2 w/o Debounce' />
</div>
)

export default MainDemo
41 changes: 35 additions & 6 deletions packages/debounce-handler/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ yarn add @hocs/debounce-handler
```js
debounceHandler(
handlerName: string,
delay?: number,
delay?: number|function<props>,
leadingCall?: boolean
): HigherOrderComponent
```
Expand All @@ -27,20 +27,49 @@ import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import debounceHandler from '@hocs/debounce-handler';

const Demo = ({ count, onButtonClick }) => (
<div>
const Demo = ({ count, onButtonClick, label }) => (
<div className='demo'>
{label || ''}
<h1>{count}</h1>
<button onClick={onButtonClick}>CLICK ME FAST</button>
</div>
);
)

export default compose(
const Demo1 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
debounceHandler('onButtonClick', 300)
)(Demo);
)(Demo)

const Demo2 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
debounceHandler('onButtonClick', (props) => props.debounce || 0)
)(Demo)

const MainDemo = () => (
<div>
<style>
{
`.demo {
margin-bottom: 10px;
border-style: dotted;
border-radius: 10px;
padding: 5px;
}`
}
</style>
<Demo1 label='Demo 1' />
<Demo2 label='Demo 2 w Debounce' debounce={300} />
<Demo2 label='Demo 2 w/o Debounce' />
</div>
)

export default MainDemo
```

:tv: [Check out live demo](https://codesandbox.io/s/qlmk8mlvk4).
4 changes: 3 additions & 1 deletion packages/debounce-handler/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ const debounceHandler = (handlerName, delay, leadingCall) => (Target) => {
constructor (props, context) {
super(props, context)

const delayValue = typeof delay === 'function' ? delay(props) : delay
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could do this in throttle as well.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. It also lacks the same changes as in #22 :) Do you mind to work on that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should there be a common module since since they are so similar? That way you don't have to remember to update and fix both. This could be an inheritable common component.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep it "duplicated" for a while. If at some point we have a 3rd one then yes, I agree :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

10-4 , I am down with that rule of 3 is a good one.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whats the command line paradigm to update jest snapshots with start? I tried yarn start test throttle-handler --updateSnapshot and yarn start test throttle-handler -u with no success .

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I never used it like this, I should probably propagate an argument.

yarn start testWatch + u keypress when it comes to it.


this.debouncedPropInvoke = debounce(
(...args) => this.props[handlerName](...args),
delay,
delayValue,
leadingCall
)

Expand Down
10 changes: 10 additions & 0 deletions packages/debounce-handler/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,16 @@ Array [
]
`;

exports[`debounceHandler should pass \`delay\` option to \`just-debounce-it\` via props 1`] = `
Array [
Array [
[Function],
75,
undefined,
],
]
`;

exports[`debounceHandler should pass \`leadingCall\` option to \`just-debounce-it\` 1`] = `
Array [
Array [
Expand Down
14 changes: 14 additions & 0 deletions packages/debounce-handler/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,20 @@ describe('debounceHandler', () => {
expect(mockJustDebounce.mock.calls).toMatchSnapshot()
})

it('should pass `delay` option to `just-debounce-it` via props', () => {
const EnhancedTarget = debounceHandler('testHandler', (props) =>
props.debounce)(Target)
const mockTestHandler = jest.fn()
const wrapper = mount(
<EnhancedTarget testHandler={mockTestHandler} debounce={75} />
)
const testHandler = wrapper.find(Target).prop('testHandler')

testHandler()

expect(mockJustDebounce.mock.calls).toMatchSnapshot()
})

it('should pass `leadingCall` option to `just-debounce-it`', () => {
const EnhancedTarget = debounceHandler('testHandler', 75, true)(Target)
const mockTestHandler = jest.fn()
Expand Down
35 changes: 32 additions & 3 deletions packages/throttle-handler/demo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,46 @@ import { compose, withState, withHandlers } from 'recompose'

import throttleHandler from '../src/'

const Demo = ({ count, onButtonClick }) => (
<div>
const Demo = ({ count, onButtonClick, label }) => (
<div className='demo'>
{label || ''}
<h1>{count}</h1>
<button onClick={onButtonClick}>CLICK ME FAST</button>
</div>
)

export default compose(
const Demo1 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
throttleHandler('onButtonClick', 1000)
)(Demo)

const Demo2 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
throttleHandler('onButtonClick', (props) => props.throttle || 0)
)(Demo)

const MainDemo = () => (
<div>
<style>
{
`.demo {
margin-bottom: 10px;
border-style: dotted;
border-radius: 10px;
padding: 5px;
}`
}
</style>
<Demo1 label='Demo 1' />
<Demo2 label='Demo 2 w throttle' throttle={1000} />
<Demo2 label='Demo 2 w/o throttle' />
</div>
)

export default MainDemo
45 changes: 35 additions & 10 deletions packages/throttle-handler/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,30 +17,55 @@ yarn add @hocs/throttle-handler
```js
throttleHandler(
handlerName: string,
interval?: number,
interval?: number|function<props>,
leadingCall?: boolean
): HigherOrderComponent
```

```js
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import throttleHandler from '@hocs/throttle-handler';

const Demo = ({ count, onButtonClick }) => (
<div>
const Demo = ({ count, onButtonClick, label }) => (
<div className='demo'>
{label || ''}
<h1>{count}</h1>
<button onClick={onButtonClick}>CLICK ME FAST</button>
</div>
);
)

export default compose(
const Demo1 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
throttleHandler('onButtonClick', 1000)
)(Demo);
)(Demo)

const Demo2 = compose(
withState('count', 'setCount', 0),
withHandlers({
onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
}),
throttleHandler('onButtonClick', (props) => props.throttle || 0)
)(Demo)

const MainDemo = () => (
<div>
<style>
{
`.demo {
margin-bottom: 10px;
border-style: dotted;
border-radius: 10px;
padding: 5px;
}`
}
</style>
<Demo1 label='Demo 1' />
<Demo2 label='Demo 2 w throttle' throttle={1000} />
<Demo2 label='Demo 2 w/o throttle' />
</div>
)

export default MainDemo
```

:tv: [Check out live demo](https://codesandbox.io/s/q96856wkow).
14 changes: 10 additions & 4 deletions packages/throttle-handler/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,27 @@ const throttleHandler = (handlerName, interval, leadingCall) => (Target) => {
constructor (props, context) {
super(props, context)

const throttled = throttle(props[handlerName], interval, leadingCall)
const intervalValue = typeof interval === 'function' ? interval(props) : interval

this[handlerName] = (e, ...rest) => {
this.throttlePropInvoke = throttle(
(...args) => this.props[handlerName](...args),
intervalValue,
leadingCall
)

this.handler = (e, ...rest) => {
if (e && typeof e.persist === 'function') {
e.persist()
}

return throttled(e, ...rest)
return this.throttlePropInvoke(e, ...rest)
}
}

render () {
return createElement(Target, {
...this.props,
[handlerName]: this[handlerName]
[handlerName]: this.handler
})
}
}
Expand Down
Loading