feat(datepicker): Adding new prop filterDate (#7)

* feat(datepicker): Adding new prop `filterDate`

* docs(readme): adding the filterDate prop in the readme documentation

* chore(contributors): adding myself to the contributors table

* chore(calendar): removing console.log

* fix(calendars): Condição para filtrar apenas os valores selecionáveis.

* test(stories): Test to check if the dateFilter property interferes with the value of the selectables

Author: lucasvnborges

.all-contributorsrc

@@ -33,6 +33,17 @@
         "doc",
         "example"
       ]
+    },
+    {
+      "login": "lucasnsborges",
+      "name": "Lucas Borges",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/12260334?v=4",
+      "profile": "https://github.com/lucasnsborges",
+      "contributions": [
+        "code",
+        "doc",
+        "example"
+      ]
     }
   ]
 }

README.md

@@ -4,7 +4,7 @@ Datepickers built with [Semantic UI for React][semantic-ui-react] and [Dayzed][d
 
 [![version][version-badge]][package]
 [![MIT License][license-badge]][license]
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)
 
 ## Overview
 
@@ -78,6 +78,7 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
 | locale           | object   | no       | [en-US](https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/src/locales/en-US.js) | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales!                |
 | onDateChange     | function | yes      |                                                                                                         | Callback fired when the value changes                                                                           |
 | type             | string   | no       | basic                                                                                                   | Type of input to render. Available options: 'basic' and 'range'                                                 |
+| filterDate       | function | no       | () => true                                                                                              | Function that receives each date and returns a boolean to indicate whether it is enabled or not                 |
 |selected   | Date, arrayOf(Date)    | no |  | Default date selected |
 | pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
 
@@ -133,8 +134,8 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore -->
-| [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Code") [🎨](#design-arthurdenner "Design") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Documentation") [💡](#example-arthurdenner "Examples") [🤔](#ideas-arthurdenner "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Code") [🤔](#ideas-emersonlaurentino "Ideas, Planning, & Feedback") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Documentation") [💡](#example-emersonlaurentino "Examples") |
-| :---: | :---: |
+| [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Code") [🎨](#design-arthurdenner "Design") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=arthurdenner "Documentation") [💡](#example-arthurdenner "Examples") [🤔](#ideas-arthurdenner "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Code") [🤔](#ideas-emersonlaurentino "Ideas, Planning, & Feedback") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=emersonlaurentino "Documentation") [💡](#example-emersonlaurentino "Examples") | [<img src="https://avatars2.githubusercontent.com/u/12260334?v=4" width="100px;"/><br /><sub><b>Lucas Borges</b></sub>](https://github.com/lucasnsborges)<br />[💻](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=lucasnsborges "Code") [📖](https://github.com/arthurdenner/react-semantic-ui-datepickers/commits?author=lucasnsborges "Documentation") [💡](#example-lucasnsborges "Examples") |
+| :---: | :---: | :---: |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/components/calendar/calendar.js

@@ -22,6 +22,7 @@ const pointings = {
 
 const Calendar = ({
   calendars,
+  filterDate,
   getBackProps,
   getDateProps,
   getForwardProps,
@@ -98,16 +99,22 @@ const Calendar = ({
               week.map((dateObj, weekIdx) => {
                 const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
 
-                return dateObj ? (
+                if (!dateObj) {
+                  return <CalendarCell key={key} />;
+                }
+
+                const selectable =
+                  dateObj.selectable && filterDate(dateObj.date);
+
+                return (
                   <CalendarCell
                     key={key}
                     {...dateObj}
-                    {...getDateProps({ dateObj })}
+                    {...getDateProps({ dateObj: { ...dateObj, selectable } })}
+                    selectable={selectable}
                   >
                     {dateObj.date.getDate()}
                   </CalendarCell>
-                ) : (
-                  <CalendarCell key={key} />
                 );
               })
             )}

src/components/datepicker.js

@@ -58,18 +58,20 @@ class SemanticDatepicker extends React.Component {
     ]),
     type: PropTypes.oneOf(['basic', 'range']),
     pointing: PropTypes.oneOf(['left', 'right', 'top left', 'top right']),
+    filterDate: PropTypes.func,
   };
 
   static defaultProps = {
-    pointing: 'left',
     clearable: true,
-    keepOpenOnClear: false,
-    keepOpenOnSelect: false,
     date: undefined,
+    filterDate: () => true,
     firstDayOfWeek: 0,
     format: 'YYYY-MM-DD',
+    keepOpenOnClear: false,
+    keepOpenOnSelect: false,
     locale: localeEn,
     placeholder: null,
+    pointing: 'left',
     selected: null,
     type: 'basic',
   };
@@ -232,7 +234,7 @@ class SemanticDatepicker extends React.Component {
 
   render() {
     const { isVisible, selectedDate, selectedDateFormatted } = this.state;
-    const { clearable, locale, pointing } = this.props;
+    const { clearable, locale, pointing, filterDate } = this.props;
 
     return (
       <div
@@ -262,6 +264,7 @@ class SemanticDatepicker extends React.Component {
                 {...this.dayzedProps}
                 {...props}
                 {...locale}
+                filterDate={filterDate}
                 pointing={pointing}
                 weekdays={this.weekdays}
               />

stories/index.js

@@ -17,6 +17,12 @@ const Content = ({ children, style }) => (
   </div>
 );
 
+const isWeekday = date => {
+  const day = date.getDay();
+
+  return day !== 0 && day !== 6;
+};
+
 storiesOf('Examples', module)
   .add('Basic', () => (
     <Content>
@@ -173,4 +179,23 @@ storiesOf('Examples', module)
     <Content>
       <SemanticDatepicker pointing="bottom right" onDateChange={console.log} />
     </Content>
+  ))
+  .add('Basic with filterDate', () => (
+    <Content>
+      <SemanticDatepicker
+        filterDate={isWeekday}
+        onDateChange={console.log}
+        showOutsideDays
+      />
+    </Content>
+  ))
+  .add('Basic with filterDate setting a maxDate', () => (
+    <Content>
+      <SemanticDatepicker
+        filterDate={isWeekday}
+        maxDate={new Date('2019-01-01')}
+        onDateChange={console.log}
+        showOutsideDays
+      />
+    </Content>
   ));