Merge pull request #118 from codaco/release/3.0.5

Release/3.0.5

Author: jthrilly

.gitignore

@@ -2,3 +2,4 @@
 /node_modules
 npm-debug.log*
 /lib
+.vscode

package-lock.json

@@ -1,9 +1,10 @@
 {
   "name": "@codaco/ui",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Styles and React components for the Network Canvas project",
   "main": "lib/components/index.js",
   "type": "module",
+  "license": "GPL-3.0-or-later",
   "engines": {
     "node": "12.8.0",
     "npm": "6.10.2"

package.json

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { DateTime, Interval } from 'luxon';
 import DatePickerContext from './DatePickerContext';
@@ -27,6 +27,14 @@ const DatePicker = ({
     date: getDate(props.date),
   });
 
+  // Correctly update component state when passed new date prop
+  useEffect(() => {
+    setPickerState(state => ({
+      ...state,
+      date: getDate(props.date),
+    }));
+  }, [props.date]);
+
   const type = props.type || DEFAULT_TYPE;
 
   const format = DATE_FORMATS[type];

src/components/Fields/DatePicker/DatePicker/DatePicker.js

@@ -1,13 +1,19 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { times } from 'lodash';
+import { times, find } from 'lodash';
 
 // If today's date isn't in range, what's the closest value?
 const getScrollToValue = (range = [], today) => {
-  if (today !== 0 && !today) { return null; }
+  if (today !== 0 && !today) {
+    return null;
+  }
+
   const findToday = find(range, ({ value }) => value === today);
-  if (findToday) { return findToday; }
+  if (findToday) {
+    return findToday.value;
+  }
+
   const first = range[0].value;
   const last = range[range.length - 1].value;
 
@@ -57,7 +63,6 @@ const RangePicker = ({
   );
 
   const scrollToValue = getScrollToValue(range, today);
-
   return (
     <div className={classes} ref={datePickerRef}>
       <div className="date-picker__range-picker-items">

src/components/Fields/DatePicker/RangePicker.js

@@ -1,5 +1,5 @@
 $module-name: date-picker;
-$animation-speed: var(--animation-duration-standard);
+$animation-speed: var(--animation-duration-fast);
 $height: 18rem;
 $lighten: rgba(255, 255, 255, 0.05);
 $darken: rgba(0, 0, 0, 0.2);
@@ -8,8 +8,8 @@ $darken: rgba(0, 0, 0, 0.2);
   &__error {
     opacity: 0;
     max-height: 0;
-    transition: opacity var(--animation-easing) var(--animation-duration-standard),
-    max-height var(--animation-easing) var(--animation-duration-standard);
+    transition: opacity var(--animation-easing) var(--animation-duration-fast),
+    max-height var(--animation-easing) var(--animation-duration-fast);
   }
 
   &__error-message {
@@ -53,7 +53,7 @@ $darken: rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
     border-bottom: 2px solid transparent;
-    transition: border-bottom-color var(--animation-easing) var(--animation-duration-standard);
+    transition: border-bottom-color var(--animation-easing) var(--animation-duration-fast);
 
     &-divider {
       color: var(--active-color);
@@ -63,7 +63,7 @@ $darken: rgba(0, 0, 0, 0.2);
     &-part,
     &-clear {
       display: inline-block;
-      transition: opacity var(--animation-easing) var(--animation-duration-standard);
+      transition: opacity var(--animation-easing) var(--animation-duration-fast);
     }
 
     &-part {
@@ -106,14 +106,14 @@ $darken: rgba(0, 0, 0, 0.2);
     height: 0;
     position: relative;
     transform-origin: top left;
-    transition: height var(--animation-easing) var(--animation-duration-slow) var(--animation-duration-standard),
-    transform var(--animation-easing) var(--animation-duration-slow) var(--animation-duration-standard);
+    transition: height var(--animation-easing) var(--animation-duration-standard) var(--animation-duration-fast),
+    transform var(--animation-easing) var(--animation-duration-standard) var(--animation-duration-fast);
 
     &--is-open {
       height: $height;
       transform: scaleY(1);
-      transition: height var(--animation-easing) var(--animation-duration-slow),
-      transform var(--animation-easing) var(--animation-duration-slow);
+      transition: height var(--animation-easing) var(--animation-duration-standard),
+      transform var(--animation-easing) var(--animation-duration-standard);
     }
   }
 
@@ -128,7 +128,7 @@ $darken: rgba(0, 0, 0, 0.2);
     background-color: var(--input-background);
     flex-direction: column;
     transform: translateX(100%);
-    transition: transform var(--animation-easing) var(--animation-duration-slow) var(--animation-duration-standard);
+    transition: transform var(--animation-easing) var(--animation-duration-standard) var(--animation-duration-fast);
     border-color: var(--darken);
     border-style: solid;
     border-width: 0 2px 0 0;