From 5f5dd09bf357fdb7cade6320cd60f875cd31f1f7 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sun, 12 Jan 2020 18:17:56 +0100
Subject: [PATCH] =?UTF-8?q?test:=20=F0=9F=92=8D=20add=20useScratch()=20sto?=
 =?UTF-8?q?ries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.ts                 |  1 +
 src/useScratch.ts            |  6 ++---
 stories/useScratch.story.tsx | 46 ++++++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 stories/useScratch.story.tsx

diff --git a/src/index.ts b/src/index.ts
index 6d018164..d632f7c9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -73,6 +73,7 @@ export { default as useRaf } from './useRaf';
 export { default as useRafLoop } from './useRafLoop';
 export { default as useRafState } from './useRafState';
 export { default as useSearchParam } from './useSearchParam';
+export { default as useScratch } from './useScratch';
 export { default as useScroll } from './useScroll';
 export { default as useScrolling } from './useScrolling';
 export { default as useSessionStorage } from './useSessionStorage';
diff --git a/src/useScratch.ts b/src/useScratch.ts
index 43650272..2f73530a 100644
--- a/src/useScratch.ts
+++ b/src/useScratch.ts
@@ -33,7 +33,7 @@ const useScratch = ({
   onScratch = noop,
   onScratchStart = noop,
   onScratchEnd = noop,
-}: ScratchSensorParams = {}): [ScratchSensorState, (el: HTMLElement | null) => void] => {
+}: ScratchSensorParams = {}): [(el: HTMLElement | null) => void, ScratchSensorState] => {
   const [state, setState] = useState<ScratchSensorState>({ isScratching: false });
   const refState = useRef<ScratchSensorState>(state);
   const refScratching = useRef<boolean>(false);
@@ -154,7 +154,7 @@ const useScratch = ({
     };
   }, [el, disabled, onScratchStart, onScratch, onScratchEnd]);
 
-  return [state, setEl];
+  return [setEl, state];
 };
 
 export interface ScratchSensorProps extends ScratchSensorParams {
@@ -163,7 +163,7 @@ export interface ScratchSensorProps extends ScratchSensorParams {
 
 export const ScratchSensor: FC<ScratchSensorProps> = props => {
   const { children, ...params } = props;
-  const [state, ref] = useScratch(params);
+  const [ref, state] = useScratch(params);
   const element = render(props, state);
   return cloneElement(element, {
     ...element.props,
diff --git a/stories/useScratch.story.tsx b/stories/useScratch.story.tsx
new file mode 100644
index 00000000..49fe1edb
--- /dev/null
+++ b/stories/useScratch.story.tsx
@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { useScratch } from '../src';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const [ref, state] = useScratch();
+
+  const blockStyle: React.CSSProperties = {
+    position: 'relative',
+    width: 400,
+    height: 400,
+    border: '1px solid tomato',
+  };
+
+  const preStyle: React.CSSProperties = {
+    pointerEvents: 'none',
+    userSelect: 'none',
+  };
+
+  let { x = 0, y = 0, dx = 0, dy = 0 } = state;
+  if (dx < 0) [x, dx] = [x + dx, -dx];
+  if (dy < 0) [y, dy] = [y + dy, -dy];
+
+  const rectangleStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: x,
+    top: y,
+    width: dx,
+    height: dy,
+    border: '1px solid tomato',
+    pointerEvents: 'none',
+    userSelect: 'none',
+  };
+
+  return (
+    <div ref={ref} style={blockStyle}>
+      <pre style={preStyle}>{JSON.stringify(state, null, 4)}</pre>
+      {state.isScratching && <div style={rectangleStyle} />}
+    </div>
+  );
+};
+
+storiesOf('Sensors/useScratch', module)
+  // .add('Docs', () => <ShowDocs md={require('../docs/useScroll.md')} />)
+  .add('Demo', () => <Demo />);