@roo-ui/components - npm Package Compare versions

Comparing version 0.44.0 to 0.45.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="0.45.0"></a>
+# [0.45.0](https://github.com/hooroo/roo-ui/compare/v0.44.0...v0.45.0) (2018-07-26)
+
+
+### Features
+
+* add ability to disable dates on calendar ([#125](https://github.com/hooroo/roo-ui/issues/125)) ([d36034c](https://github.com/hooroo/roo-ui/commit/d36034c))
+
+
+
+
 <a name="0.44.0"></a>
@@ -8,0 +19,0 @@ # [0.44.0](https://github.com/hooroo/roo-ui/compare/v0.43.8...v0.44.0) (2018-07-25)

dist/Calendar/Calendar.js

@@ -21,6 +21,4 @@ 'use strict';
 
-var _sub_days = require('date-fns/sub_days');
+var _dateFns = require('date-fns');
 
-var _sub_days2 = _interopRequireDefault(_sub_days);
-
 var _ = require('../');
@@ -34,2 +32,20 @@
 
+var getCustomDateProps = function getCustomDateProps(disabledDates, day) {
+  var isDisabled = disabledDates.filter(function (disabledDate) {
+    return (0, _dateFns.isSameDay)(disabledDate, day.date);
+  }).length;
+
+  var props = {
+    selected: day.selected,
+    selectable: day.selectable
+  };
+
+  if (isDisabled) {
+    props.disabled = true;
+    props.selectable = false;
+  }
+
+  return props;
+};
+
 var Calendar = function Calendar(_ref) {
@@ -40,3 +56,4 @@ var monthNames = _ref.monthNames,
       stacked = _ref.stacked,
-      rest = _objectWithoutProperties(_ref, ['monthNames', 'weekdayNames', 'monthsToDisplay', 'stacked']);
+      disabledDates = _ref.disabledDates,
+      rest = _objectWithoutProperties(_ref, ['monthNames', 'weekdayNames', 'monthsToDisplay', 'stacked', 'disabledDates']);
 
@@ -94,2 +111,3 @@ return _react2.default.createElement(_dayzed2.default, _extends({}, rest, {
                     }
+
                     return _react2.default.createElement(
@@ -99,5 +117,3 @@ _2.CalendarDay,
                         key: '' + calendar.year + calendar.month + index // eslint-disable-line react/no-array-index-key
-                        , selected: day.selected,
-                        selectable: day.selectable
-                      }, getDateProps({ dateObj: day })),
+                      }, getDateProps({ dateObj: day }), getCustomDateProps(disabledDates, day)),
                       day.date.getDate()
@@ -120,3 +136,4 @@ );
   stacked: false,
-  minDate: (0, _sub_days2.default)(new Date(), 1),
+  minDate: (0, _dateFns.subDays)(new Date(), 1),
+  disabledDates: [],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
@@ -131,2 +148,3 @@ weekdayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   minDate: _propTypes2.default.instanceOf(Date),
+  disabledDates: _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(Date)),
   monthNames: _propTypes2.default.arrayOf(_propTypes2.default.string),
@@ -133,0 +151,0 @@ weekdayNames: _propTypes2.default.arrayOf(_propTypes2.default.string)

dist/Calendar/Calendar.story.js

@@ -38,4 +38,5 @@ 'use strict';
     onDateSelected: console.log // eslint-disable-line no-console
-    , stacked: (0, _addonKnobs.boolean)('Stacked', false)
+    , stacked: (0, _addonKnobs.boolean)('Stacked', false),
+    disabledDates: [(0, _add_days2.default)(new Date(), 1), (0, _add_days2.default)(new Date(), 2), (0, _add_days2.default)(new Date(), 4)]
   });
 });

dist/Calendar/Calendar.test.js

@@ -27,7 +27,8 @@ 'use strict';
     maxDate: new Date('2018-08-20'),
-    selected: new Date('2018-07-03'),
+    selected: new Date('2018-07-20'),
     onDateSelected: jest.fn(),
     monthsToDisplay: 1,
     stacked: true,
-    weekdayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+    weekdayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    disabledDates: [new Date('2018-07-04'), new Date('2018-07-05')]
   };
@@ -69,33 +70,83 @@
 
-  describe('props', function () {
-    it('uses monthNames to pass each calendar month name to <CalendarMonth />', function () {
+  describe('<Dayzed />', function () {
+    it('passes down props.monthsToDisplay', function () {
+      expect(wrapper.find('Dayzed').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
+    });
+
+    it('assigns the rest of the props', function () {
+      expect(wrapper.props()).toEqual(expect.objectContaining({
+        date: props.date,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        selected: props.selected,
+        onDateSelected: props.onDateSelected
+      }));
+    });
+  });
+
+  describe('<CalendarMonth />', function () {
+    it('passes the month name to each calendar month', function () {
       expect(childrenWrapper.find('CalendarMonth').prop('month')).toEqual('Jul');
     });
 
-    it('passes renders a <CalendarWeekday /> for each weekdayNames', function () {
-      expect(childrenWrapper.find('CalendarWeekday')).toHaveLength(props.weekdayNames.length);
+    it('passes down props.stacked', function () {
+      expect(childrenWrapper.find('CalendarMonth').prop('stacked')).toEqual(props.stacked);
     });
 
-    it('passes monthsToDisplay to <CalendarMonth />', function () {
+    it('passes down props.monthsToDisplay', function () {
       expect(childrenWrapper.find('CalendarMonth').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
     });
+  });
 
-    it('passes stacked to <CalendarMonth />', function () {
-      expect(childrenWrapper.find('CalendarMonth').prop('stacked')).toEqual(props.stacked);
+  describe('<CalendarWeekday />', function () {
+    it('renders one for each weekday name', function () {
+      expect(childrenWrapper.find('CalendarWeekday')).toHaveLength(props.weekdayNames.length);
     });
+  });
 
-    it('passes monthsToDisplay to <Dayzed />', function () {
-      expect(wrapper.find('Dayzed').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
+  describe('<CalendarEmptyDay />', function () {
+    it('renders one for each empty day in the calendar month', function () {
+      expect(childrenWrapper.find('CalendarEmptyDay')).toHaveLength(11);
     });
+  });
 
-    it('assigns the rest of the props to <Dayzed />', function () {
-      expect(wrapper.props()).toEqual(expect.objectContaining({
-        date: props.date,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        selected: props.selected,
-        onDateSelected: props.onDateSelected
+  describe('<CalendarDay />', function () {
+    it('it renders a day for each day in the month', function () {
+      expect(childrenWrapper.find('CalendarDay')).toHaveLength(31);
+    });
+
+    it('renders days as clickable elements', function () {
+      var day = childrenWrapper.find('CalendarDay').first();
+
+      expect(day.props()).toEqual(expect.objectContaining({
+        selectable: true,
+        disabled: false
       }));
     });
+
+    it('adds props.selected true when date is in props.selected', function () {
+      var day19 = childrenWrapper.find('CalendarDay').at(19);
+
+      expect(day19.props()).toEqual(expect.objectContaining({
+        selected: true
+      }));
+    });
+
+    it('renders a disabled day when date is in props.disabledDates', function () {
+      var day3 = childrenWrapper.find('CalendarDay').at(3);
+      var day4 = childrenWrapper.find('CalendarDay').at(4);
+
+      expect(day3.props()).toEqual(expect.objectContaining({
+        selected: false,
+        selectable: false,
+        disabled: true
+      }));
+
+      expect(day4.props()).toEqual(expect.objectContaining({
+        selected: false,
+        selectable: false,
+        disabled: true
+      }));
+    });
   });
 });

dist/Calendar/components/CalendarDays/CalendarDays.js

@@ -11,3 +11,3 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  flex: 1 1 auto;\n  width: calc(100% / 7);\n  justify-content: center;\n  margin: 0 -1px -1px 0;\n  border: ', ' ', ';\n\n  &:after {\n    content: \'\';\n    display: block;\n    padding-bottom: 100%;\n  }\n'], ['\n  flex: 1 1 auto;\n  width: calc(100% / 7);\n  justify-content: center;\n  margin: 0 -1px -1px 0;\n  border: ', ' ', ';\n\n  &:after {\n    content: \'\';\n    display: block;\n    padding-bottom: 100%;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding: 0;\n  width: 100%;\n  border: ', ' transparent;\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: ', ';\n  }\n\n   ', ';\n\n  ', ';\n'], ['\n  color: ', ';\n  padding: 0;\n  width: 100%;\n  border: ', ' transparent;\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: ', ';\n  }\n\n   ', ';\n\n  ', ';\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding: 0;\n  width: 100%;\n  border: ', ' transparent;\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: ', ';\n  }\n\n  ', ';\n\n  ', ';\n'], ['\n  color: ', ';\n  padding: 0;\n  width: 100%;\n  border: ', ' transparent;\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: ', ';\n  }\n\n  ', ';\n\n  ', ';\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  flex-wrap: wrap;\n  margin-bottom: 1px;\n  margin-right: 1px;\n'], ['\n  flex-wrap: wrap;\n  margin-bottom: 1px;\n  margin-right: 1px;\n']),
@@ -47,2 +47,3 @@ _templateObject4 = _taggedTemplateLiteral(['\n  border-color: transparent;\n'], ['\n  border-color: transparent;\n']);
 Button.defaultProps = _extends({}, _.NakedButton.defaultProps, {
+  disabled: _propTypes2.default.bool,
   blacklist: [].concat(_toConsumableArray(Object.keys(_.NakedButton.propTypes)), ['selectable'])
@@ -55,2 +56,4 @@ });
 
+CalendarEmptyDay.displayName = 'CalendarEmptyDay';
+
 var CalendarDay = function CalendarDay(_ref) {
@@ -57,0 +60,0 @@ var children = _ref.children,

package.json

 {
   "name": "@roo-ui/components",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/Calendar/Calendar.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import Dayzed from 'dayzed';
-import subDays from 'date-fns/sub_days';
+import { subDays, isSameDay } from 'date-fns';
 
@@ -17,4 +17,22 @@ import { Flex, Box } from '../';
 
+const getCustomDateProps = (disabledDates, day) => {
+  const isDisabled = disabledDates
+    .filter(disabledDate => isSameDay(disabledDate, day.date))
+    .length;
+
+  const props = {
+    selected: day.selected,
+    selectable: day.selectable,
+  };
+
+  if (isDisabled) {
+    props.disabled = true;
+    props.selectable = false;
+  }
+
+  return props;
+};
+
 const Calendar = ({
-  monthNames, weekdayNames, monthsToDisplay, stacked, ...rest
+  monthNames, weekdayNames, monthsToDisplay, stacked, disabledDates, ...rest
 }) => (
@@ -65,8 +83,8 @@ <Dayzed
                         }
+
                         return (
                           <Day
                             key={`${calendar.year}${calendar.month}${index}`} // eslint-disable-line react/no-array-index-key
-                            selected={day.selected}
-                            selectable={day.selectable}
                             {...getDateProps({ dateObj: day })}
+                            {...getCustomDateProps(disabledDates, day)}
                           >
@@ -92,2 +110,3 @@ {day.date.getDate()}
   minDate: subDays(new Date(), 1),
+  disabledDates: [],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
@@ -103,2 +122,3 @@ weekdayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   minDate: PropTypes.instanceOf(Date),
+  disabledDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   monthNames: PropTypes.arrayOf(PropTypes.string),
@@ -105,0 +125,0 @@ weekdayNames: PropTypes.arrayOf(PropTypes.string),

src/Calendar/Calendar.story.js

@@ -21,3 +21,4 @@ import React from 'react';
       stacked={boolean('Stacked', false)}
+      disabledDates={[addDays(new Date(), 1), addDays(new Date(), 2), addDays(new Date(), 4)]}
     />
   ));

src/Calendar/Calendar.test.js

@@ -16,3 +16,3 @@ import React from 'react';
     maxDate: new Date('2018-08-20'),
-    selected: new Date('2018-07-03'),
+    selected: new Date('2018-07-20'),
     onDateSelected: jest.fn(),
@@ -22,2 +22,3 @@ monthsToDisplay: 1,
     weekdayNames: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    disabledDates: [new Date('2018-07-04'), new Date('2018-07-05')],
   };
@@ -42,33 +43,83 @@
 
-  describe('props', () => {
-    it('uses monthNames to pass each calendar month name to <CalendarMonth />', () => {
+  describe('<Dayzed />', () => {
+    it('passes down props.monthsToDisplay', () => {
+      expect(wrapper.find('Dayzed').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
+    });
+
+    it('assigns the rest of the props', () => {
+      expect(wrapper.props()).toEqual(expect.objectContaining({
+        date: props.date,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        selected: props.selected,
+        onDateSelected: props.onDateSelected,
+      }));
+    });
+  });
+
+  describe('<CalendarMonth />', () => {
+    it('passes the month name to each calendar month', () => {
       expect(childrenWrapper.find('CalendarMonth').prop('month')).toEqual('Jul');
     });
 
-    it('passes renders a <CalendarWeekday /> for each weekdayNames', () => {
-      expect(childrenWrapper.find('CalendarWeekday')).toHaveLength(props.weekdayNames.length);
+    it('passes down props.stacked', () => {
+      expect(childrenWrapper.find('CalendarMonth').prop('stacked')).toEqual(props.stacked);
     });
 
-    it('passes monthsToDisplay to <CalendarMonth />', () => {
+    it('passes down props.monthsToDisplay', () => {
       expect(childrenWrapper.find('CalendarMonth').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
     });
+  });
 
-    it('passes stacked to <CalendarMonth />', () => {
-      expect(childrenWrapper.find('CalendarMonth').prop('stacked')).toEqual(props.stacked);
+  describe('<CalendarWeekday />', () => {
+    it('renders one for each weekday name', () => {
+      expect(childrenWrapper.find('CalendarWeekday')).toHaveLength(props.weekdayNames.length);
     });
+  });
 
-    it('passes monthsToDisplay to <Dayzed />', () => {
-      expect(wrapper.find('Dayzed').prop('monthsToDisplay')).toEqual(props.monthsToDisplay);
+  describe('<CalendarEmptyDay />', () => {
+    it('renders one for each empty day in the calendar month', () => {
+      expect(childrenWrapper.find('CalendarEmptyDay')).toHaveLength(11);
     });
+  });
 
-    it('assigns the rest of the props to <Dayzed />', () => {
-      expect(wrapper.props()).toEqual(expect.objectContaining({
-        date: props.date,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        selected: props.selected,
-        onDateSelected: props.onDateSelected,
+  describe('<CalendarDay />', () => {
+    it('it renders a day for each day in the month', () => {
+      expect(childrenWrapper.find('CalendarDay')).toHaveLength(31);
+    });
+
+    it('renders days as clickable elements', () => {
+      const day = childrenWrapper.find('CalendarDay').first();
+
+      expect(day.props()).toEqual(expect.objectContaining({
+        selectable: true,
+        disabled: false,
       }));
     });
+
+    it('adds props.selected true when date is in props.selected', () => {
+      const day19 = childrenWrapper.find('CalendarDay').at(19);
+
+      expect(day19.props()).toEqual(expect.objectContaining({
+        selected: true,
+      }));
+    });
+
+    it('renders a disabled day when date is in props.disabledDates', () => {
+      const day3 = childrenWrapper.find('CalendarDay').at(3);
+      const day4 = childrenWrapper.find('CalendarDay').at(4);
+
+      expect(day3.props()).toEqual(expect.objectContaining({
+        selected: false,
+        selectable: false,
+        disabled: true,
+      }));
+
+      expect(day4.props()).toEqual(expect.objectContaining({
+        selected: false,
+        selectable: false,
+        disabled: true,
+      }));
+    });
   });
 });

src/Calendar/components/CalendarDays/CalendarDays.js

@@ -33,3 +33,3 @@ import React from 'react';
 
-   ${props => props.selectable &&
+  ${props => props.selectable &&
     css`
@@ -47,3 +47,3 @@ background-color: ${themeGet('colors.white')};
       }
-  `};
+    `};
 
@@ -59,2 +59,3 @@ ${props => props.selected &&
   ...NakedButton.defaultProps,
+  disabled: PropTypes.bool,
   blacklist: [...Object.keys(NakedButton.propTypes), 'selectable'],
@@ -73,2 +74,4 @@ };
 
+CalendarEmptyDay.displayName = 'CalendarEmptyDay';
+
 export const CalendarDay = ({ children, ...rest }) => (
@@ -75,0 +78,0 @@ <Wrapper>

src/Calendar/README.md

@@ -34,11 +34,11 @@ # Calendar
 
-
 ## Properties
 
-| Name              | Description                          | Type            | Default | Required? |
-|-------------------|--------------------------------------|-----------------|---------|-----------|
-| `monthsToDisplay` | Number of months to display          | `number`        | 1       | -         |
-| `stacked`         | Stack the calendar months vertically | `boolean`       | false   | -         |
-| `monthNames`      | Month names                          | `array`         | -       | -         |
-| `weekdayNames`    | Weekday names                        | `array`         | -       | -         |
+| Name              | Description                          | Type      | Default | Required? |
+|-------------------|--------------------------------------|-----------|---------|-----------|
+| `monthsToDisplay` | Number of months to display          | `number`  | 1       | -         |
+| `stacked`         | Stack the calendar months vertically | `boolean` | false   | -         |
+| `monthNames`      | Month names                          | `array`   | -       | -         |
+| `weekdayNames`    | Weekday names                        | `array`   | -       | -         |
+| `disabledDates`   | Dates which will be disabled         | `array`   | []      | -         |
 
@@ -45,0 +45,0 @@ ## Customization

No alert changes

Improved metrics

Total package byte prevSize

611059

0.78%

Lines of code

10147

1.19%

No dependency changes