Merge pull request #157 from dmtrKovalenko/avoid-anonymous-functions

Avoid passing anonymous functions as props

Author: dmtrKovalenko

.eslintrc

@@ -4,6 +4,7 @@
   "rules": {
     "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": 0,
+    "react/no-find-dom-node": 0,
     "no-param-reassign": 0,
     "import/no-named-as-default": 0,
     "import/no-extraneous-dependencies": 0

lib/src/DatePicker/Calendar.jsx

@@ -1,13 +1,14 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, IconButton } from 'material-ui';
+import { withStyles } from 'material-ui';
 
 import Moment from 'moment';
 import { extendMoment } from 'moment-range';
-import classnames from 'classnames';
 import CalendarHeader from './CalendarHeader';
 import DomainPropTypes from '../constants/prop-types';
 import * as defaultUtils from '../utils/utils';
+import DayWrapper from './DayWrapper';
+import Day from './Day';
 
 const moment = extendMoment(Moment);
 
@@ -90,45 +91,42 @@ export class Calendar extends Component {
 
   renderDays = (week) => {
     const {
-      classes, date, renderDay, utils,
+      date, renderDay, utils,
     } = this.props;
 
     const selectedDate = date.clone().startOf('day');
     const currentMonthNumber = utils.getMonthNumber(this.state.currentMonth);
     const now = moment();
 
     return week.map((day) => {
-      // should be applied both for wrapper and button
-      const disabledClass = classnames({ [classes.disabled]: this.shouldDisableDate(day) });
+      const disabled = this.shouldDisableDate(day);
       const dayInCurrentMonth = utils.getMonthNumber(day) === currentMonthNumber;
-      const isHidden = !dayInCurrentMonth;
-
-      const dayClass = classnames(classes.day, disabledClass, {
-        [classes.hidden]: isHidden,
-        [classes.current]: day.isSame(now, 'day'),
-        [classes.selected]: selectedDate.isSame(day, 'day'),
-      });
 
       let dayComponent = (
-        <IconButton className={dayClass} tabIndex={isHidden ? -1 : 0}>
-          <span> {utils.getDayText(day)} </span>
-        </IconButton>
+        <Day
+          current={day.isSame(now, 'day')}
+          hidden={!dayInCurrentMonth}
+          disabled={disabled}
+          selected={selectedDate.isSame(day, 'day')}
+        >
+          {utils.getDayText(day)}
+        </Day>
       );
 
       if (renderDay) {
         dayComponent = renderDay(day, selectedDate, dayInCurrentMonth, dayComponent);
       }
 
       return (
-        <div
+        <DayWrapper
           key={day.toString()}
-          onClick={() => dayInCurrentMonth && this.onDateSelect(day)}
-          onKeyPress={() => dayInCurrentMonth && this.onDateSelect(day)}
-          className={disabledClass}
-          role="presentation"
+          value={day}
+          dayInCurrentMonth={dayInCurrentMonth}
+          disabled={disabled}
+          onSelect={this.onDateSelect}
         >
           {dayComponent}
-        </div>
+        </DayWrapper>
       );
     });
   }
@@ -160,31 +158,6 @@ const styles = theme => ({
     height: 36 * 6,
     marginTop: theme.spacing.unit * 1.5,
   },
-  hidden: {
-    opacity: 0,
-    pointerEvents: 'none',
-  },
-  day: {
-    width: 36,
-    height: 36,
-    fontSize: theme.typography.caption.fontSize,
-    margin: '0 2px',
-    color: theme.palette.text.primary,
-    fontWeight: theme.typography.fontWeightMedium,
-  },
-  current: {
-    color: theme.palette.primary[500],
-    fontWeight: 600,
-  },
-  selected: {
-    color: theme.palette.common.white,
-    backgroundColor: theme.palette.primary[500],
-    fontWeight: theme.typography.fontWeightMedium,
-  },
-  disabled: {
-    pointerEvents: 'none',
-    color: theme.palette.text.hint,
-  },
   week: {
     display: 'flex',
     justifyContent: 'center',

lib/src/DatePicker/DatePickerWrapper.jsx

@@ -93,7 +93,7 @@ export default class DatePickerWrapper extends PickerBase {
 
     return (
       <ModalWrapper
-        ref={(node) => { this.wrapper = node; }}
+        ref={this.getRef}
         value={value}
         format={format}
         onClear={this.handleClear}

lib/src/DatePicker/Day.d.ts

@@ -0,0 +1,13 @@
+import { ComponentClass, ReactNode } from 'react';
+
+export interface DayProps {
+    children: ReactNode;
+    current?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    selected?: boolean;
+}
+
+declare const Day: ComponentClass<DayProps>;
+
+export default Day;

lib/src/DatePicker/Day.jsx

@@ -0,0 +1,76 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { IconButton, withStyles } from 'material-ui';
+import classnames from 'classnames';
+
+class Day extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    classes: PropTypes.object.isRequired,
+    current: PropTypes.bool,
+    disabled: PropTypes.bool,
+    hidden: PropTypes.bool,
+    selected: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    disabled: false,
+    hidden: false,
+    current: false,
+    selected: false,
+  }
+
+  render() {
+    const {
+      children, classes, disabled, hidden, current, selected, ...other
+    } = this.props;
+
+    const className = classnames(classes.day, {
+      [classes.hidden]: hidden,
+      [classes.current]: current,
+      [classes.selected]: selected,
+      [classes.disabled]: disabled,
+    });
+
+    return (
+      <IconButton
+        className={className}
+        tabIndex={hidden || disabled ? -1 : 0}
+        {...other}
+      >
+        <span> {children} </span>
+      </IconButton>
+    );
+  }
+}
+
+const styles = theme => ({
+  day: {
+    width: 36,
+    height: 36,
+    fontSize: theme.typography.caption.fontSize,
+    margin: '0 2px',
+    color: theme.palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+  hidden: {
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  current: {
+    color: theme.palette.primary[500],
+    fontWeight: 600,
+  },
+  selected: {
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.primary[500],
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+  disabled: {
+    pointerEvents: 'none',
+    color: theme.palette.text.hint,
+  },
+});
+
+export default withStyles(styles)(Day);

lib/src/DatePicker/DayWrapper.d.ts

@@ -0,0 +1,13 @@
+import { ComponentClass, ReactNode } from 'react';
+
+export interface DayWrapperProps {
+    children: ReactNode;
+    dayInCurrentMonth?: boolean,
+    disabled?: boolean;
+    onSelect: (value: any) => void;
+    value: any;
+}
+
+declare const DayWrapper: ComponentClass<DayWrapperProps>;
+
+export default DayWrapper;

lib/src/DatePicker/DayWrapper.jsx

@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+class DayWrapper extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    dayInCurrentMonth: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    value: PropTypes.any.isRequired,
+  }
+
+  static defaultProps = {
+    dayInCurrentMonth: true,
+    disabled: false,
+  }
+
+  handleClick = () => {
+    this.props.onSelect(this.props.value);
+  }
+
+  render() {
+    const {
+      children, value, dayInCurrentMonth, disabled, onSelect, ...other
+    } = this.props;
+    return (
+      <div
+        onClick={dayInCurrentMonth && !disabled ? this.handleClick : undefined}
+        onKeyPress={dayInCurrentMonth && !disabled ? this.handleClick : undefined}
+        role="presentation"
+        {...other}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default DayWrapper;

lib/src/DatePicker/Year.d.ts

@@ -0,0 +1,13 @@
+import { ComponentClass, ReactNode } from 'react';
+
+export interface YearProps {
+    children: ReactNode;
+    disabled?: boolean;
+    onSelect: (value: any) => void;
+    selected?: boolean;
+    value: any;
+}
+
+declare const Year: ComponentClass<YearProps>;
+
+export default Year;

lib/src/DatePicker/Year.jsx

@@ -0,0 +1,75 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { withStyles, Typography } from 'material-ui';
+import classnames from 'classnames';
+
+class Year extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    classes: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    selected: PropTypes.bool,
+    value: PropTypes.any.isRequired,
+  }
+
+  static defaultProps = {
+    selected: false,
+    disabled: false,
+  }
+
+  handleClick = () => {
+    this.props.onSelect(this.props.value);
+  }
+
+  render() {
+    const {
+      classes, selected, disabled, value, children, ...other
+    } = this.props;
+
+    return (
+      <Typography
+        role="button"
+        component="div"
+        className={classnames(classes.root, {
+          [classes.selected]: selected,
+          [classes.disabled]: disabled,
+        })}
+        tabIndex={disabled ? -1 : 0}
+        onClick={this.handleClick}
+        onKeyPress={this.handleClick}
+        color={selected ? 'primary' : 'default'}
+        type={selected ? 'headline' : 'subheading'}
+        {...other}
+      >
+        {children}
+      </Typography>
+    );
+  }
+}
+
+const styles = theme => ({
+  root: {
+    height: theme.spacing.unit * 5,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    '&:focus': {
+      color: theme.palette.primary[500],
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+  },
+  selected: {
+    margin: '10px 0',
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+  disabled: {
+    pointerEvents: 'none',
+    color: theme.palette.text.hint,
+  },
+});
+
+export default withStyles(styles)(Year);