@transferwise/components 0.0.0-experimental-8f9699a → 0.0.0-experimental-a25e4d8

package/src/dateLookup/tableLink/TableLink.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import { injectIntl } from 'react-intl';
+
+import messages from '../DateLookup.messages';
+
+class TableLink extends PureComponent {
+  onClick = (event) => {
+    event.preventDefault();
+    if (!this.props.disabled) {
+      this.props.onClick(this.props.item);
+    }
+  };
+
+  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
+    if (active) {
+      return `${longTitle || title}, ${formatMessage(messages.selected)} ${formatMessage(
+        messages[type],
+      )}`;
+    }
+    return longTitle || title;
+  };
+
+  render() {
+    const {
+      item,
+      type,
+      title,
+      longTitle,
+      active,
+      disabled,
+      today,
+      intl: { formatMessage },
+    } = this.props;
+    return (
+      <>
+        <button
+          type="button"
+          className={`tw-date-lookup-${type}-option ${active ? 'active' : ''} ${
+            today ? 'today' : ''
+          } np-text-body-default-bold`}
+          disabled={disabled}
+          aria-label={this.calculateAriaLabel(longTitle, title, active, type, formatMessage)}
+          aria-pressed={active}
+          onClick={this.onClick}
+        >
+          {title || item}
+        </button>
+      </>
+    );
+  }
+}
+
+TableLink.propTypes = {
+  item: PropTypes.number.isRequired, // day (1-31), month (0-11) or year (2018 etc)
+  type: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  title: PropTypes.string,
+  longTitle: PropTypes.string,
+  active: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  today: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+TableLink.defaultProps = {
+  title: null,
+  longTitle: null,
+};
+
+export default injectIntl(TableLink);

package/src/dateLookup/tableLink/TableLink.spec.js

@@ -1,9 +1,15 @@
 import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
 
 import TableLink from '.';
 
-jest.mock('react-intl');
+const formatMessage = (id) => id.defaultMessage;
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ formatMessage }} />;
+    },
+  defineMessages: (translations) => translations,
+}));
 
 jest.mock('../DateLookup.messages', () => ({
   selected: {
@@ -23,15 +29,18 @@ jest.mock('../DateLookup.messages', () => ({
     defaultMessage: 'year',
   },
 }));
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ formatMessage }} />;
+    },
+}));
 
 describe('TableLink', () => {
   let component;
   let props;
 
   beforeEach(() => {
-    useIntl.mockReturnValue({
-      formatMessage: (message) => message.defaultMessage,
-    });
     props = {
       item: 12,
       type: 'day',
@@ -42,7 +51,7 @@ describe('TableLink', () => {
       title: '12',
       longTitle: '12/12/1212',
     };
-    component = shallow(<TableLink {...props} />);
+    component = shallow(<TableLink {...props} />).dive();
   });
 
   it('shows item value', () => {

package/src/dateLookup/yearCalendar/table/YearCalendarTable.js

@@ -2,7 +2,6 @@ import { formatDate } from '@transferwise/formatting';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
 import TableLink from '../../tableLink';
 
 const ROWS = 5;
@@ -12,38 +11,17 @@ const YEAR_ONLY_FORMAT = { year: 'numeric' };
 const YearCalendarTable = ({ selectedDate, min, max, viewYear, placeholder, onSelect }) => {
   const { locale } = useIntl();
   const startYear = viewYear - (viewYear % 20);
-  const getLink = (year) => {
-    return (
-      <TableLink
-        item={year}
-        type="year"
-        title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
-        active={isActive(year)}
-        disabled={isDisabled(year)}
-        today={isThisYear(year)}
-        autofocus={autofocusYear === year}
-        onClick={onSelect}
-      />
-    );
-  };
-
-  const isActive = (year) => {
-    return !!(selectedDate && year === selectedDate.getFullYear());
-  };
-
-  const isThisYear = (year) => {
-    return year === new Date().getFullYear();
-  };
-
-  const isDisabled = (year) => {
-    return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));
-  };
-
-  const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
-    return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });
-  })();
-
+  const getLink = (year) => (
+    <TableLink
+      item={year}
+      type="year"
+      title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}
+      active={!!(selectedDate && year === selectedDate.getFullYear())}
+      disabled={!!((min && year < min.getFullYear()) || (max && year > max.getFullYear()))}
+      today={year === new Date().getFullYear()}
+      onClick={onSelect}
+    />
+  );
   return (
     <table className="table table-condensed table-bordered tw-date-lookup-calendar m-b-0">
       <thead className="sr-only">

package/src/dateLookup/yearCalendar/table/YearCalendarTable.spec.js

@@ -90,32 +90,6 @@ describe('YearCalendarTable', () => {
     expect(component.find('.sr-only').text()).toBe('Enter date..');
   });
 
-  it('sets autofocus to true when 2002 is the selected year', () => {
-    component.setProps({ selectedDate: new Date(2002, 5, 1) });
-    expect(getTableLinkAt(2).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true when selected year is null and current year is visible', () => {
-    const today = new Date();
-    component.setProps({
-      selectedDate: null,
-      viewYear: today.getFullYear(),
-    });
-    expect(getTableLink().find({ today: true }).prop('autofocus')).toBe(true);
-  });
-
-  it('sets autofocus to true on the second year when the first year is disabled', () => {
-    component.setProps({
-      selectedDate: null,
-      viewYear: 2000,
-      min: new Date(2001, 1, 1),
-      isDisabled: (month) => month === 0,
-    });
-
-    expect(getTableLinkAt(0).prop('autofocus')).toBe(false);
-    expect(getTableLinkAt(1).prop('autofocus')).toBe(true);
-  });
-
   const getTableLinkAt = (i) => component.find('[type="year"]').at(i);
   const getTableLink = () => component.find('[type="year"]');
 });