fix: update to React new Ref syntax

docs/components/Contributors/index.jsx

@@ -7,25 +7,25 @@ import './styles.scss';
 
 const plural = number => `${number} contribution${number > 1 ? 's' : ''}`;
 
-class Contributors extends React.Component {
-  constructor() {
-    super();
-    this.state = { contributors: [] };
-    this.renderContributors = this.renderContributors.bind(this);
+class Contributors extends React.PureComponent {
+  state = {
+    contributors: [],
+  };
 
+  componentDidMount() {
     this.getContributors();
   }
 
-  getContributors() {
+  getContributors = () => {
     fetch('https://api.github.com/repos/Adslot/adslot-ui/contributors')
       .then(response => response.json())
       .then(contributors => {
         this.setState({ contributors });
       });
-  }
+  };
 
-  renderContributors() {
-    return _.map(this.state.contributors, (
+  renderContributors = () =>
+    _.map(this.state.contributors, (
       { login, avatar_url, contributions } // eslint-disable-line camelcase
     ) => (
       <Avatar
@@ -35,7 +35,6 @@ class Contributors extends React.Component {
         tooltip={`Thanks, ${login}, for your ${plural(contributions)}`}
       />
     ));
-  }
 
   render() {
     return (

src/components/adslot-ui/FilePicker/index.jsx

@@ -7,32 +7,56 @@ require('./styles.scss');
 
 const baseClass = 'filepicker-component';
 
-class FilePickerComponent extends React.Component {
+class FilePickerComponent extends React.PureComponent {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    dts: PropTypes.string,
+    filter: PropTypes.string,
+    isHighlighted: PropTypes.bool,
+    label: PropTypes.string,
+    onRemove: PropTypes.func,
+    onSelect: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+  };
+
+  static defaultProps = {
+    isHighlighted: false,
+    label: 'Select',
+    placeholder: 'No file selected',
+    disabled: false,
+  };
+
   constructor(props) {
     super(props);
 
-    this.state = { isFileSelected: false, fileName: '' };
-
-    this.onChange = this.onChange.bind(this);
-    this.removeFile = this.removeFile.bind(this);
+    this.fileInput = React.createRef();
   }
 
-  onChange(changeEvent) {
+  state = {
+    isFileSelected: false,
+    fileName: '',
+  };
+
+  onChange = changeEvent => {
     if (!this.state.isFileSelected) {
       this.setState({ isFileSelected: true, fileName: changeEvent.target.files[0].name });
       this.props.onSelect(changeEvent.target.files[0]);
     }
-  }
+  };
 
-  removeFile() {
+  onUploadBtnClick = () => {
+    this.fileInput.current.click();
+  };
+
+  removeFile = () => {
     if (this.state.isFileSelected) {
-      this.fileInput.value = null;
+      this.fileInput.current.value = null;
       this.setState({ isFileSelected: false, fileName: '' });
       if (this.props.onRemove) {
         this.props.onRemove();
       }
     }
-  }
+  };
 
   render() {
     const mainClass = classNames({ [`${baseClass}-highlight`]: this.props.isHighlighted }, baseClass, 'input-group');
@@ -57,17 +81,13 @@ class FilePickerComponent extends React.Component {
           ) : null}
           <Button
             className="btn-inverse"
-            onClick={() => {
-              this.fileInput.click();
-            }}
+            onClick={this.onUploadBtnClick}
             disabled={this.props.disabled || isFileSelected}
           >
             <span>{this.props.label}</span>
             <input
               className="file-input"
-              ref={ref => {
-                this.fileInput = ref;
-              }}
+              ref={this.fileInput}
               type="file"
               onChange={this.onChange}
               accept={this.props.filter}
@@ -80,22 +100,4 @@ class FilePickerComponent extends React.Component {
   }
 }
 
-FilePickerComponent.propTypes = {
-  disabled: PropTypes.bool,
-  dts: PropTypes.string,
-  filter: PropTypes.string,
-  isHighlighted: PropTypes.bool,
-  label: PropTypes.string,
-  onRemove: PropTypes.func,
-  onSelect: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-};
-
-FilePickerComponent.defaultProps = {
-  isHighlighted: false,
-  label: 'Select',
-  placeholder: 'No file selected',
-  disabled: false,
-};
-
 export default FilePickerComponent;

src/components/adslot-ui/FilePicker/index.spec.jsx

@@ -51,7 +51,7 @@ describe('FilePickerComponent', () => {
   it('should trigger click event on file input when button is clicked', () => {
     const component = mount(<FilePickerComponent onSelect={_.noop} />);
     const spy = sinon.spy();
-    component.instance().fileInput.addEventListener('click', spy, {
+    component.instance().fileInput.current.addEventListener('click', spy, {
       passive: true,
       once: true,
     });

src/components/adslot-ui/HoverDropdownMenu/index.jsx

@@ -25,13 +25,22 @@ export const renderPopoverComponent = arrowPosition => props => {
 /* eslint-enable react/prop-types */
 
 export class HoverDropdownMenuComponent extends React.Component {
+  static propTypes = {
+    arrowPosition: PropTypes.oneOf(['left', 'right']),
+    headerText: PropTypes.string,
+    hoverComponent: PropTypes.element.isRequired,
+    children: PropTypes.node,
+  };
+
+  static defaultProps = {
+    arrowPosition: 'left',
+    headerText: '',
+  };
+
   constructor(props) {
     super(props);
-    this.state = {
-      isOpen: false,
-      target: null,
-      mouseInPopover: false,
-    };
+
+    this.element = React.createRef();
 
     this.closeMenu = _.debounce(() => {
       if (!this.state.mouseInPopover) {
@@ -40,48 +49,43 @@ export class HoverDropdownMenuComponent extends React.Component {
         });
       }
     }, 100);
-
-    this.openMenu = this.openMenu.bind(this);
-    this.popoverEnterHandler = this.popoverEnterHandler.bind(this);
-    this.popoverLeaveHandler = this.popoverLeaveHandler.bind(this);
   }
 
+  state = {
+    isOpen: false,
+    target: null,
+    mouseInPopover: false,
+  };
+
   componentDidMount() {
     // prevent default title popup if exists, assuming the first child is the hoverComponent
-    this.element.childNodes[0].removeAttribute('title');
+    this.element.current.childNodes[0].removeAttribute('title');
   }
 
-  openMenu(event) {
+  openMenu = event => {
     this.setState({
       isOpen: true,
       target: event.target,
       mouseInPopover: false,
     });
-  }
+  };
 
-  popoverEnterHandler() {
+  popoverEnterHandler = () => {
     this.setState({ mouseInPopover: true });
-  }
+  };
 
-  popoverLeaveHandler() {
+  popoverLeaveHandler = () => {
     this.setState({ mouseInPopover: false });
     this.closeMenu();
-  }
+  };
 
   render() {
     const { arrowPosition, headerText, hoverComponent, children } = this.props;
 
     const HoverPopover = renderPopoverComponent(arrowPosition);
 
     return (
-      <div
-        className="hover-dropdown"
-        ref={element => {
-          this.element = element;
-        }}
-        onMouseEnter={this.openMenu}
-        onMouseLeave={this.closeMenu}
-      >
+      <div className="hover-dropdown" ref={this.element} onMouseEnter={this.openMenu} onMouseLeave={this.closeMenu}>
         {hoverComponent}
         {children && children.length > 0 ? (
           <Overlay show={this.state.isOpen} target={this.state.target} placement="bottom">
@@ -101,18 +105,6 @@ export class HoverDropdownMenuComponent extends React.Component {
   }
 }
 
-HoverDropdownMenuComponent.propTypes = {
-  arrowPosition: PropTypes.oneOf(['left', 'right']),
-  headerText: PropTypes.string,
-  hoverComponent: PropTypes.element.isRequired,
-  children: PropTypes.node,
-};
-
-HoverDropdownMenuComponent.defaultProps = {
-  arrowPosition: 'left',
-  headerText: '',
-};
-
 HoverDropdownMenuComponent.Item = PopoverLinkItem;
 
 export default HoverDropdownMenuComponent;

src/components/adslot-ui/PagedGrid/index.jsx

@@ -16,9 +16,10 @@ class PagedGridComponent extends React.Component {
     this.state = { activePage: 1 };
   }
 
-  componentWillReceiveProps() {
-    const totalPages = Math.ceil(this.props.items.length / this.props.perPage);
-    if (this.state.activePage > totalPages) this.setState({ activePage: totalPages });
+  static getDerivedStateFromProps(props, state) {
+    const totalPages = Math.ceil(props.items.length / props.perPage);
+
+    return state.activePage > totalPages ? { activePage: totalPages } : null;
   }
 
   render() {

src/components/adslot-ui/TextEllipsis/index.jsx

@@ -7,13 +7,33 @@ import { Popover } from 'third-party';
 require('./styles.scss');
 
 class TextEllipsisComponent extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    overlayTriggerProps: PropTypes.shape(_.omit(OverlayTrigger.propTypes, ['overlay'])),
+    popoverProps: PropTypes.shape(Popover.propTypes),
+  };
+
+  static defaultProps = {
+    overlayTriggerProps: {
+      trigger: ['focus', 'hover'],
+      placement: 'top',
+    },
+    popoverProps: {
+      id: 'popover',
+      placement: 'top',
+    },
+  };
+
   constructor(props) {
     super(props);
-    this.state = {
-      truncated: false,
-    };
+
+    this.container = React.createRef();
   }
 
+  state = {
+    truncated: false,
+  };
+
   componentDidMount() {
     this.setTruncate();
   }
@@ -23,7 +43,7 @@ class TextEllipsisComponent extends Component {
   }
 
   setTruncate() {
-    const nextTruncateState = this.container.scrollWidth > this.container.clientWidth;
+    const nextTruncateState = this.container.current.scrollWidth > this.container.current.clientWidth;
     if (this.state.truncated !== nextTruncateState) {
       this.setState({
         truncated: nextTruncateState,
@@ -40,46 +60,19 @@ class TextEllipsisComponent extends Component {
 
       return (
         <OverlayTrigger {...overlayTriggerProps} overlay={tooltip}>
-          <div
-            className="text-ellipsis-component"
-            ref={ref => {
-              this.container = ref;
-            }}
-          >
+          <div className="text-ellipsis-component" ref={this.container}>
             {this.props.children}
           </div>
         </OverlayTrigger>
       );
     }
 
     return (
-      <div
-        className="text-ellipsis-component"
-        ref={ref => {
-          this.container = ref;
-        }}
-      >
+      <div className="text-ellipsis-component" ref={this.container}>
         {this.props.children}
       </div>
     );
   }
 }
 
-TextEllipsisComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-  overlayTriggerProps: PropTypes.shape(_.omit(OverlayTrigger.propTypes, ['overlay'])),
-  popoverProps: PropTypes.shape(Popover.propTypes),
-};
-
-TextEllipsisComponent.defaultProps = {
-  overlayTriggerProps: {
-    trigger: ['focus', 'hover'],
-    placement: 'top',
-  },
-  popoverProps: {
-    id: 'popover',
-    placement: 'top',
-  },
-};
-
 export default TextEllipsisComponent;

src/lib/test-utils.js

@@ -5,11 +5,6 @@ export const runComponentDidMount = ({ shallowRenderer }) => {
   shallowRenderer.update();
 };
 
-export const runComponentWillReceiveProps = ({ shallowRenderer, nextProps }) => {
-  shallowRenderer.instance().componentWillReceiveProps(nextProps);
-  shallowRenderer.update();
-};
-
 export const createAndMountComponent = component => {
   const shallowRenderer = shallow(component);
   runComponentDidMount({ shallowRenderer });