Add gridRef props #20

wadackel · Jul 21, 2017 · e5da0ae · e5da0ae
1 parent b8a0dd5
commit e5da0ae
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 12 deletions.
diff --git a/src/components/StackGrid.js b/src/components/StackGrid.js
@@ -61,6 +61,7 @@ type Props = {
   children: React$Element<any>;
   className?: string;
   style: Object;
+  gridRef?: Function;
   component: string;
   columnWidth: number | string;
   gutterWidth: number;
@@ -92,18 +93,20 @@ type InlineState = {
   columnWidth: number;
 };
 
-type InlineProps = $All<Props, {
+type InlineProps = Props & {
+  refCallback: Function;
   size: {
     width: number;
     height: number;
   }
-}>;
+};
 
 /* eslint-disable react/no-unused-prop-types */
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.object,
+  gridRef: PropTypes.func,
   component: PropTypes.string,
   columnWidth: PropTypes.oneOfType([
     PropTypes.number,
@@ -250,8 +253,12 @@ export class GridInline extends Component {
     };
   }
 
-  updateLayout(props: InlineProps): void {
-    this.setStateIfNeeded(this.doLayout(props));
+  updateLayout(props: ?InlineProps): void {
+    if (!props) {
+      this.setStateIfNeeded(this.doLayout(this.props));
+    } else {
+      this.setStateIfNeeded(this.doLayout(props));
+    }
   }
 
   handleItemMounted = (item: GridItem) => {
@@ -285,6 +292,10 @@ export class GridInline extends Component {
     }
   }
 
+  handleRef = () => {
+    this.props.refCallback(this);
+  };
+
   render() {
     const {
       /* eslint-disable no-unused-vars */
@@ -293,6 +304,7 @@ export class GridInline extends Component {
       columnWidth: rawColumnWidth,
       monitorImagesLoaded,
       enableSSR,
+      refCallback,
       /* eslint-enable no-unused-vars */
       className,
       style,
@@ -324,6 +336,7 @@ export class GridInline extends Component {
           transition: transition(['height'], rest.duration, easings.easeOut),
           height,
         }}
+        ref={this.handleRef}
       >
         {validChildren.map((child, i) =>
           (<GridItem
@@ -352,12 +365,11 @@ const SizeAwareGridInline = sizeMe({
 
 
 export default class StackGrid extends Component {
-  props: Props;
-
   static propTypes = propTypes;
 
   static defaultProps = {
     style: {},
+    gridRef: null,
     component: 'div',
     columnWidth: 150,
     gutterWidth: 5,
@@ -377,8 +389,35 @@ export default class StackGrid extends Component {
     enableSSR: false,
   };
 
+  props: Props;
+  grid: GridInline;
+
+  updateLayout() {
+    this.grid.updateLayout();
+  }
+
+  handleRef = (grid: GridInline) => {
+    this.grid = grid;
+
+    if (typeof this.props.gridRef === 'function') {
+      this.props.gridRef(this);
+    }
+  };
+
   render() {
-    sizeMe.enableSSRBehaviour = this.props.enableSSR;
-    return <SizeAwareGridInline {...this.props} />;
+    const {
+      enableSSR,
+      gridRef,
+      ...rest
+    } = this.props;
+
+    sizeMe.enableSSRBehaviour = enableSSR;
+
+    return (
+      <SizeAwareGridInline
+        {...rest}
+        refCallback={this.handleRef}
+      />
+    );
   }
 }
diff --git a/src/components/__tests__/StackGrid.spec.js b/src/components/__tests__/StackGrid.spec.js
@@ -10,6 +10,7 @@ const mockProps = {
     height: 0,
   },
   style: {},
+  refCallback: () => {},
   component: 'div',
   columnWidth: 150,
   gutterWidth: 5,
@@ -30,7 +31,7 @@ const mockProps = {
 
 
 describe('<StackGrid /> (GridInline)', () => {
-  it('Should not be render children', () => {
+  test('Should not be render children', () => {
     const wrapper = mount(
       <StackGrid />
     );
@@ -39,7 +40,7 @@ describe('<StackGrid /> (GridInline)', () => {
   });
 
 
-  it('Should be pass the base props', () => {
+  test('Should be pass the base props', () => {
     const wrapper = mount(
       <StackGrid
         className="rsg-grid"
@@ -60,7 +61,7 @@ describe('<StackGrid /> (GridInline)', () => {
   });
 
 
-  it('Should be render with specify component', () => {
+  test('Should be render with specify component', () => {
     const wrapper = mount(
       <GridInline
         {...mockProps}
@@ -75,7 +76,7 @@ describe('<StackGrid /> (GridInline)', () => {
   });
 
 
-  it('Should be render children', () => {
+  test('Should be render children', () => {
     const wrapper = mount(
       <GridInline {...mockProps}>
         <div className="item" key="1">ITEM 1</div>
@@ -86,4 +87,22 @@ describe('<StackGrid /> (GridInline)', () => {
 
     expect(wrapper.find('div.item').length).toBe(3);
   });
+
+
+  test('Should be get grid ref', () => {
+    const callback = jest.fn();
+    const wrapper = mount(
+      <GridInline
+        {...mockProps}
+        refCallback={callback}
+      >
+        <div key="1">Foo</div>
+      </GridInline>
+    );
+
+    expect(callback.mock.calls.length).toBe(1);
+    expect(callback.mock.calls[0]).toEqual([
+      wrapper.instance(),
+    ]);
+  });
 });