fix(datepicker): enable showToday prop to be provided on TypeScript (#306)

* fix(datepicker): enable showToday prop to be provided on TypeScript

* test(datepicker): add tests for showToday prop

* chore(deps): add resolutions to handlebars package

* ci(Travis): update config to use Yarn instead of npm

* ci(Codecov): add config to setup targets

Author: arthurdenner

.codecov.yaml

@@ -0,0 +1,8 @@
+coverage:
+  status:
+    project:
+      default:
+        target: 75
+    patch:
+      default:
+        target: 0

.travis.yml

@@ -1,12 +1,10 @@
 language: node_js
-cache:
-  directories:
-    - ~/.npm
+cache: yarn
 notifications:
   email: false
 node_js: '10'
-install: npm install
-script: npm run validate
+install: yarn --frozen-lockfile
+script: yarn validate
 after_success:
   - npx codecov --disable=gcov
   - test $TRAVIS_BRANCH = "master" && test $TRAVIS_PULL_REQUEST = "false" && npx semantic-release

README.md

@@ -91,6 +91,7 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
 | onBlur               | function                            | no       | () => {}     | Callback fired when the input loses focus                                                                                                                                   |
 | onChange             | function                            | no       | () => {}     | Callback fired when the value changes                                                                                                                                       |
 | pointing             | string                              | no       | 'left'       | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'                                                                  |
+| showToday            | boolean                             | no       | true         | Hides the "Today" button if false                                                                                                                                           |
 | type                 | string                              | no       | basic        | Type of input to render. Available options: 'basic' and 'range'                                                                                                             |
 | value                | Date\|Date[]                        | no       | --           | The value of the datepicker                                                                                                                                                 |
 

package.json

@@ -79,6 +79,9 @@
     "react": ">=16.8.0",
     "semantic-ui-react": ">=0.75.0"
   },
+  "resolutions": {
+    "handlebars" : "4.5.0"
+  },
   "jest": {
     "globals": {
       "ts-jest": {

src/__tests__/datepicker.test.tsx

@@ -291,6 +291,20 @@ describe('Basic datepicker', () => {
       expect(datePickerInput.placeholder).toBe('');
     });
   });
+
+  describe('showToday', () => {
+    it('should display the Today button when prop is true', () => {
+      const { getByText } = setup({ inline: true, showToday: true });
+
+      expect(getByText('Today')).toBeInTheDocument();
+    });
+
+    it('should NOT display the Today button when prop is true', () => {
+      const { queryByText } = setup({ inline: true, showToday: false });
+
+      expect(queryByText('Today')).not.toBeInTheDocument();
+    });
+  });
 });
 
 describe('Range datepicker', () => {

src/components/calendar/calendar.css

@@ -30,6 +30,7 @@
   background-color: rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 0.28571429rem;
+  overflow: hidden;
 }
 
 .clndr-left {

src/components/calendar/calendar.tsx

@@ -23,7 +23,7 @@ type CalendarProps = {
   pointing: SemanticDatepickerProps['pointing'];
   previousMonth: string;
   previousYear: string;
-  showToday: boolean;
+  showToday: SemanticDatepickerProps['showToday'];
   todayButton: string;
   weekdays: Locale['weekdays'];
 };
@@ -163,9 +163,4 @@ const Calendar: React.FC<CalendarProps> = ({
   </Segment>
 );
 
-Calendar.defaultProps = {
-  pointing: 'left',
-  showToday: true,
-};
-
 export default Calendar;

src/components/icon.tsx

@@ -47,9 +47,4 @@ const CustomIcon = ({
   );
 };
 
-CustomIcon.defaultProps = {
-  clearIcon: 'close',
-  icon: 'calendar',
-};
-
 export default CustomIcon;

src/index.tsx

@@ -70,12 +70,14 @@ class SemanticDatepicker extends React.Component<
 > {
   static defaultProps = {
     allowOnlyNumbers: false,
+    clearIcon: 'close',
     clearOnSameDateClick: true,
     clearable: true,
     date: undefined,
     filterDate: () => true,
     firstDayOfWeek: 0,
     format: 'YYYY-MM-DD',
+    icon: 'calendar',
     id: undefined,
     inline: false,
     keepOpenOnClear: false,
@@ -90,6 +92,7 @@ class SemanticDatepicker extends React.Component<
     readOnly: false,
     datePickerOnly: false,
     required: false,
+    showToday: true,
     showOutsideDays: false,
     type: 'basic',
     value: null,

src/types/index.ts

@@ -72,6 +72,7 @@ export type SemanticDatepickerProps = PickedDayzedProps &
       data: SemanticDatepickerProps
     ) => void;
     pointing: 'left' | 'right' | 'top left' | 'top right';
+    showToday: boolean;
     type: 'basic' | 'range';
     datePickerOnly: boolean;
     value: DayzedProps['selected'];