Datepicker bugfixes + theme support

index.scss

@@ -1,2 +1,2 @@
 @import 'nebenan-ui-kit/_index.scss';
-@import 'src/**/*.scss';
+@import 'src/**/index.scss';

package.json

@@ -7,7 +7,7 @@
   "homepage": "https://nebenan.de/",
   "repository": "good-hood-gmbh/nebenan-form",
   "bugs": "https://github.com/good-hood-gmbh/nebenan-form/issues",
-  "version": "8.3.0",
+  "version": "8.3.1-beta.5",
   "scripts": {
     "reinstall": "rm -rf node_modules package-lock.json && npm install && npm run decache",
     "decache": "find ./build -type f -name '.browserify-cache.json' -delete || echo \"\\033[0;32mAlready decached!\\033[0m\"",
@@ -64,9 +64,7 @@
     "lodash": "^4.17.15",
     "mocha": "^7.1.1",
     "morgan": "^1.10.0",
-    "nebenan-helpers": "^4.1.1",
     "nebenan-ui-kit": "^4.4.1",
-    "nebenan-react-datepicker": "^1.0.0",
     "node-sass-glob-importer": "^5.3.2",
     "nodemon": "^2.0.1",
     "normalize.css": "^8.0.1",
@@ -84,12 +82,18 @@
     "stylelint": "^13.2.1",
     "stylelint-config-nebenan": "^1.6.0",
     "terser": "^4.6.7",
+    "nebenan-helpers": "^4.2.0-beta.0",
     "tiny-lr": "^1.1.1",
     "vinyl-source-stream": "^2.0.0"
   },
+  "dependencies": {
+    "nebenan-react-datepicker": "^1.0.0"
+  },
   "peerDependencies": {
     "@babel/runtime": "^7.9.2",
     "clsx": "^1.1.0",
+    "nebenan-helpers": "^4.2.0-beta.0",
+    "tiny-lr": "^1.1.1",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

preview/index.scss

@@ -1,5 +1,5 @@
 @import 'nebenan-ui-kit/styles';
-@import '../src/**/*.scss';
+@import '../src/**/index.scss';
 @import './components/**/*.scss';
 @import './containers/**/*.scss';
 

src/datepicker/index.es

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import memorize from 'lodash/memoize';
 
 import { screenPosition, screenSize, size } from 'nebenan-helpers/lib/dom';
 import keymanager from 'nebenan-helpers/lib/keymanager';
@@ -10,8 +11,8 @@ import Picker from 'nebenan-react-datepicker/lib';
 import { bindTo } from '../utils';
 
 import InputComponent from '../base';
-import theme from './theme';
-import { getDate, getValueFromDate, getValueFromISO } from './utils';
+import baseCalendarTheme from './calendar_theme';
+import { getCalendarTheme, getDate, getValueFromDate, getValueFromISO } from './utils';
 
 class Datepicker extends InputComponent {
   constructor(props) {
@@ -23,6 +24,7 @@ class Datepicker extends InputComponent {
       'handleClick',
       'handleClear',
     );
+    this.getCalendarTheme = memorize(getCalendarTheme.bind(null, baseCalendarTheme));
   }
 
   componentWillUnmount() {
@@ -97,7 +99,8 @@ class Datepicker extends InputComponent {
     else this.hide();
   }
 
-  handleClear() {
+  handleClear(event) {
+    event.preventDefault();
     this.setValue(null, this.validate);
   }
 
@@ -119,6 +122,7 @@ class Datepicker extends InputComponent {
       firstDay,
       weekdayShortLabels,
       monthLabels,
+      theme: passedTheme,
     } = this.props;
 
     const localizedValue = getValueFromISO(value, dateFormat);
@@ -139,7 +143,8 @@ class Datepicker extends InputComponent {
           selected={getDate(value)}
           minDate={getDate(minDate)}
           maxDate={getDate(maxDate)}
-          {...{ theme, monthLabels, weekdayShortLabels, firstDay }}
+          theme={this.getCalendarTheme(passedTheme)}
+          {...{ monthLabels, weekdayShortLabels, firstDay }}
         />
       );
     }
@@ -153,10 +158,11 @@ class Datepicker extends InputComponent {
 
     return (
       <div ref={this.setEl('container')} className={className}>
-        <label onClick={this.handleClick}>
+        <label>
           {labelNode}
           <div className="c-datepicker-container">
             <input
+              onClick={this.handleClick}
               ref={this.setEl('input')}
               className={inputClassName}
               placeholder={placeholder}
@@ -177,6 +183,8 @@ class Datepicker extends InputComponent {
 Datepicker.propTypes = {
   ...InputComponent.propTypes,
 
+  theme: PropTypes.object,
+
   firstDay: PropTypes.number.isRequired,
   weekdayShortLabels: PropTypes.arrayOf(PropTypes.string).isRequired,
   monthLabels: PropTypes.arrayOf(PropTypes.string).isRequired,

src/datepicker/index.scss

@@ -1,3 +1,5 @@
+@import 'calendar_theme';
+
 .c-datepicker {
   position: relative;
 }

src/datepicker/utils.es

@@ -1,5 +1,6 @@
 import parseISO from 'date-fns/parseISO';
 import formatDate from 'date-fns/format';
+import { getSubTheme, mergeThemes } from 'nebenan-helpers/lib/themes';
 
 const DATE_FORMAT_ISO = 'yyyy-MM-dd';
 
@@ -16,3 +17,7 @@ export const getDate = (dateOrIso) => {
   if (dateOrIso instanceof Date) return dateOrIso;
   return parseISO(dateOrIso);
 };
+
+export const getCalendarTheme = (baseCalendarTheme, passedTheme) => (
+  mergeThemes(baseCalendarTheme, getSubTheme(passedTheme, 'calendar'))
+);

test/datepicker/utils.js

@@ -3,9 +3,27 @@ const {
   getValueFromISO,
   getValueFromDate,
   getDate,
+  getCalendarTheme,
 } = require('../../lib/datepicker/utils');
 
 describe('ui/datepicker/utils', () => {
+  describe('getCalendarTheme', () => {
+    it('merges base theme with calendar prefixed keys from passed theme', () => {
+      const baseCalendarTheme = {
+        root: 'base-root',
+        clever: 'base-clever',
+      };
+      const passedTheme = {
+        calendarRoot: 'my-root',
+        blubb: 'my-blubb',
+      };
+      assert.deepEqual(getCalendarTheme(baseCalendarTheme, passedTheme), {
+        root: 'base-root my-root',
+        clever: 'base-clever',
+      });
+    });
+  });
+
   describe('getValueFromISO', () => {
     it('returns empty string for falsey values', () => {
       assert.equal(getValueFromISO(null, 'yyyy'), '');