fix(datepicker): allow empty string as placeholder (#261)

* fix(datepicker): allow empty string as placeholder

* chore: apply lint on stories folder

Author: arthurdenner

package.json

@@ -6,7 +6,8 @@
   "module": "dist/react-semantic-ui-datepickers.esm.js",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "lint": "tsdx lint src",
+    "lint": "tsdx lint src stories",
+    "lint:fix": "yarn lint --fix",
     "start": "tsdx watch",
     "build": "tsdx build",
     "prebuild": "rimraf dist",

src/__tests__/datepicker.test.tsx

@@ -266,6 +266,26 @@ describe('Basic datepicker', () => {
       expect(onBlur).not.toHaveBeenCalled();
     });
   });
+
+  describe('placeholder', () => {
+    it('should use the format prop as default', () => {
+      const { datePickerInput } = setup();
+
+      expect(datePickerInput.placeholder).toBe('YYYY-MM-DD');
+    });
+
+    it('should allow empty strings', () => {
+      const { datePickerInput } = setup({ placeholder: '' });
+
+      expect(datePickerInput.placeholder).toBe('');
+    });
+
+    it('should allow null', () => {
+      const { datePickerInput } = setup({ placeholder: null });
+
+      expect(datePickerInput.placeholder).toBe('');
+    });
+  });
 });
 
 describe('Range datepicker', () => {

src/index.tsx

@@ -83,7 +83,7 @@ class SemanticDatepicker extends React.Component<
     name: undefined,
     onBlur: () => {},
     onChange: () => {},
-    placeholder: null,
+    placeholder: undefined,
     pointing: 'left',
     readOnly: false,
     datePickerOnly: false,
@@ -131,7 +131,8 @@ class SemanticDatepicker extends React.Component<
 
   get inputProps() {
     const props = pick(semanticInputProps, this.props);
-    const placeholder = props.placeholder || this.props.format;
+    const placeholder =
+      props.placeholder !== undefined ? props.placeholder : this.props.format;
 
     return {
       ...props,

stories/basic.stories.tsx

@@ -6,7 +6,7 @@ import SemanticDatepicker from '../src';
 import { Content } from './common';
 import { parseISO } from 'date-fns';
 
-const isWeekday = date => {
+const isWeekday = (date: Date) => {
   const day = date.getDay();
 
   return day !== 0 && day !== 6;