added feature: absolute snap dimensions

README.md

@@ -128,6 +128,10 @@ The `maxHeight` property is used to set the maximum height of a resizable compon
 
 The `grid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`.
 
+#### `snap?: { x?: Array<number>, y?: Array<number> };`
+
+The `snap` property is used to specify absolute pixel values that resizing should snap to. `x` and `y` are both optional, allowing you to only include the axis you want to define. Defaults to `null`.
+
 #### `lockAspectRatio?: boolean | number;`
 
 The `lockAspectRatio` property is used to lock aspect ratio.
@@ -235,7 +239,7 @@ Calls when resizable component resize stop.
 
 Update component size.
 
-`grid` ,`max/minWidth`, `max/minHeight` props is ignored, when this method called.
+`grid`, `snap`, `max/minWidth`, `max/minHeight` props is ignored, when this method called.
 
 - for example
 
@@ -318,7 +322,7 @@ npm test
 
 #### v4.4.7
 
-- fix: #218 size not updated when zero props pass 
+- fix: #218 size not updated when zero props pass
 
 #### v4.4.6
 

src/index.js

@@ -96,6 +96,10 @@ export type ResizableProps = {
   style?: Style,
   className?: string,
   grid?: [number, number],
+  snap?: {
+    x?: Array<number>,
+    y?: Array<number>,
+  },
   bounds?: 'parent' | 'window' | HTMLElement,
   size?: Size,
   minWidth?: string | number,
@@ -135,6 +139,8 @@ type State = {
 const clamp = (n: number, min: number, max: number): number => Math.max(Math.min(n, max), min);
 const snap = (n: number, size: number): number => Math.round(n / size) * size;
 
+const findClosestSnap = (n: number, snapArray: Array<number>): number => snapArray.reduce((prev, curr) => (Math.abs(curr - n) < Math.abs(prev - n) ? curr : prev));
+
 const endsWith = (str: string, searchStr: string): boolean =>
   str.substr(str.length - searchStr.length, searchStr.length) === searchStr;
 
@@ -148,6 +154,7 @@ const definedProps = [
   'style',
   'className',
   'grid',
+  'snap',
   'bounds',
   'size',
   'defaultSize',
@@ -501,6 +508,13 @@ export default class Resizable extends React.Component<ResizableProps, State> {
       newHeight = snap(newHeight, this.props.grid[1]);
     }
 
+    if (this.props.snap && this.props.snap.x) {
+      newWidth = findClosestSnap(newWidth, this.props.snap.x);
+    }
+    if (this.props.snap && this.props.snap.y) {
+      newHeight = findClosestSnap(newHeight, this.props.snap.y);
+    }
+
     const delta = {
       width: newWidth - original.width,
       height: newHeight - original.height,

stories/default-size/absolute-snap.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+import React from 'react';
+import Resizable from '../../src';
+
+const style = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'solid 1px #ddd',
+  background: '#f0f0f0',
+};
+
+export default () => (
+  <Resizable
+    style={style}
+    defaultSize={{
+      width: 200,
+      height: 200,
+    }}
+    snap={{
+      x: [10, 20, 50, 100, 300],
+      y: [10, 20, 50, 100, 300],
+    }}
+  >
+    [10, 20, 50, 100, 300]
+  </Resizable>
+);

stories/index.js

@@ -14,6 +14,7 @@ import DefaultSizeMaxHeight from './default-size/max-height';
 import DefaultSizeAutoWidth from './default-size/auto-width';
 import DefaultSizeAutoHeight from './default-size/auto-height';
 import DefaultSizeGrid from './default-size/grid';
+import DefaultSizeAbsoluteSnap from './default-size/absolute-snap';
 import DefaultSizeLockAspect from './default-size/lock-aspect';
 import DefaultSizeBoundsParent from './default-size/bounds-parent';
 import DefaultSizeMaxSizePercent from './default-size/max-size-percent';
@@ -47,6 +48,7 @@ storiesOf('defaultSize', module)
   .add('max width 400px.', () => <DefaultSizeMaxWidth />)
   .add('max height 400px.', () => <DefaultSizeMaxHeight />)
   .add('grid [10, 20].', () => <DefaultSizeGrid />)
+  .add('absolute snap {x y}.', () => <DefaultSizeAbsoluteSnap />)
   .add('lock aspect ratio w:h = 2:3', () => <DefaultSizeLockAspect />)
   .add('bounds parent', () => <DefaultSizeBoundsParent />)
   .add('max size percent', () => <DefaultSizeMaxSizePercent />)

test/index.test.js

@@ -424,6 +424,30 @@ test.serial('should snapped by grid value', async t => {
   t.deepEqual(onResize.getCall(0).args[3], { width: 10, height: 10 });
 });
 
+test.serial('should snapped by absolute snap value', async t => {
+  const onResize = sinon.spy();
+  const onResizeStart = sinon.spy();
+  const onResizeStop = sinon.spy();
+  const resizable = ReactDOM.render(
+    <Resizable
+      defaultSize={{ width: 100, height: 100 }}
+      onResize={onResize}
+      onResizeStart={onResizeStart}
+      onResizeStop={onResizeStop}
+      snap={{ x: [20, 30], y: [100] }}
+    />,
+    document.getElementById('content'),
+  );
+  const divs = TestUtils.scryRenderedDOMComponentsWithTag(resizable, 'div');
+  const node = ReactDOM.findDOMNode(divs[6]);
+  TestUtils.Simulate.mouseDown(node, { clientX: 0, clientY: 0 });
+  mouseMove(12, 12);
+  t.true(onResize.getCall(0).args[0] instanceof MouseEvent);
+  t.deepEqual(onResize.getCall(0).args[2].clientHeight, 100);
+  t.deepEqual(onResize.getCall(0).args[2].clientWidth, 30);
+  t.deepEqual(onResize.getCall(0).args[3], { width: -70, height: 0 });
+});
+
 test.serial('should clamped by max width', async t => {
   const onResize = sinon.spy();
   const onResizeStart = sinon.spy();