increase coverage, add custom day names feature, give headers

hexad3cimal · Dec 24, 2020 · d19ee44 · d19ee44
1 parent 219a63f
commit d19ee44
Show file tree

Hide file tree

Showing 7 changed files with 318 additions and 13,689 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,10 @@
 
 
     Simple calendar component based on @material-ui/core
-
+## Changes in 0.3.2
+- Unselect date option
+- Can use custom day names
+- Other performance fixes
 
 ## Installation
 
@@ -43,11 +46,22 @@ function App() {
   );
 }
 
-# You can pass the callback function on date select via getSelectedDays.
-# List of preselected days can be passed via selectedDays ( you can pass month and dates as in example above )
-  info refers to tool tip to be show and color refers to background color( default is blue).
 ```
 
+### Options
+
+Currently, these options can be passed to the module
+
+| Property | Description | Sample value
+| ------ | ------ | ------ |
+| title | Title of the component | calendar |
+| days | You can pass in your custom day names as an array (By default it is english day names) | ['Sunday', 'Monday'...] |
+| month | Initial month(MM) that has to shown when module renders | 10 or 04 |
+| year |  Initial year that(YYYY) has to shown when module renders | 2020 |
+| getSelectedDays | callback function to receive date changes | (dates) => {} |
+| selectedDays | Here you can pass the dates which needs to be shown as preselected,   info refers to tool tip to be shown and color refers to background color( default is blue).| {'2020-5': [{ '3': { 'info': 'testing', color :'red' } }]} |
+
+
 ## Contributing
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/src/Calender/Calendar.jsx b/src/Calender/Calendar.jsx
@@ -7,7 +7,9 @@ import {
   Divider,
   CardActions,
   Button,
-  makeStyles
+  makeStyles,
+  TableHead,
+  TableCell
 } from '@material-ui/core'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
@@ -16,6 +18,7 @@ import Month from './Month'
 import Paper from '@material-ui/core/Paper'
 import ArrowRightIcon from '@material-ui/icons/ArrowRight'
 import ArrowLeftIcon from '@material-ui/icons/ArrowLeft'
+import TableRow from '@material-ui/core/TableRow'
 
 const useStyles = makeStyles(() => ({
   actions: {
@@ -36,8 +39,12 @@ export const Calendar = (props) => {
   const classes = useStyles()
   const nextMonth = () => {
     const currentYear =
-      calenderProps.month === 11 ? calenderProps.year + 1 : calenderProps.year
-    const currentMonth = (calenderProps.month + 1) % 12
+      calenderProps.month === 12 ? calenderProps.year + 1 : calenderProps.year
+    const currentMonth =
+      calenderProps.month === 12
+        ? (calenderProps.month = 1)
+        : calenderProps.month + 1
+
     setProps({
       ...calenderProps,
       month: currentMonth,
@@ -47,9 +54,9 @@ export const Calendar = (props) => {
 
   const previousMonth = () => {
     const currentYear =
-      calenderProps.month === 0 ? calenderProps.year - 1 : calenderProps.year
+      calenderProps.month === 1 ? calenderProps.year - 1 : calenderProps.year
     const currentMonth =
-      calenderProps.month === 0 ? 11 : calenderProps.month - 1
+      calenderProps.month === 1 ? 12 : calenderProps.month - 1
     setProps({
       ...calenderProps,
       month: currentMonth,
@@ -58,7 +65,7 @@ export const Calendar = (props) => {
   }
 
   const setDates = (date) => {
-    const key = calenderProps.year + '-' + (parseInt(calenderProps.month) + 1)
+    const key = calenderProps.year + '-' + parseInt(calenderProps.month)
     const selectedDatesInCurrentMonth = calenderProps.selectedDays
     selectedDatesInCurrentMonth[key] = date
     setProps({
@@ -70,6 +77,7 @@ export const Calendar = (props) => {
   }
 
   const months = [
+    '',
     'Jan',
     'Feb',
     'Mar',
@@ -84,12 +92,22 @@ export const Calendar = (props) => {
     'Dec'
   ]
 
+  const days = props.days || [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+  ]
+
   return (
     <Card>
       <CardHeader
         action={
           <Button size='small' variant='text'>
-            {months[calenderProps.month]}
+            {months[calenderProps.month]}-{calenderProps.year}
           </Button>
         }
         title={calenderProps.title}
@@ -98,16 +116,21 @@ export const Calendar = (props) => {
       <CardContent>
         <TableContainer component={Paper}>
           <Table className={classes.table} aria-label='calender'>
+            <TableHead>
+              <TableRow>
+                {days.map((day) => {
+                  return <TableCell key={day}>{day}</TableCell>
+                })}
+              </TableRow>
+            </TableHead>
             <TableBody>
               <Month
                 month={calenderProps.month}
                 year={calenderProps.year}
                 setDates={setDates}
                 selectedDays={
                   calenderProps.selectedDays[
-                    calenderProps.year +
-                      '-' +
-                      (parseInt(calenderProps.month) + 1)
+                    calenderProps.year + '-' + parseInt(calenderProps.month)
                   ]
                 }
               />

diff --git a/src/Calender/Calendar.test.js b/src/Calender/Calendar.test.js
@@ -15,7 +15,7 @@ describe('Calendar component test', () => {
         getSelectedDays={getSelectedDays}
         year={2020}
         selectedDays={{
-          '2020-5': [
+          '2020-4': [
             { 3: { info: 'testing', color: 'red' } },
             { 8: { info: 'testing2' } }
           ]
@@ -31,7 +31,7 @@ describe('Calendar component test', () => {
       wrapper.find('Day').at(10).prop('onClick')(10)
     })
     expect(getSelectedDays).toBeCalledWith({
-      '2020-5': [
+      '2020-4': [
         { 3: { color: 'red', info: 'testing' } },
         { 8: { info: 'testing2' } },
         { 10: { info: ' ' } }
@@ -42,14 +42,13 @@ describe('Calendar component test', () => {
     act(() => {
       wrapper.find('.MuiButton-label').at(2).simulate('click')
     })
-    expect(wrapper.find('.MuiButton-label').at(0).text()).toBe('Jun')
+    expect(wrapper.find('.MuiButton-label').at(0).text()).toBe('May-2020')
   })
 
   it('should show previous month when clicked', () => {
-    console.log(wrapper.debug())
     act(() => {
       wrapper.find('.MuiButton-label').at(1).simulate('click')
     })
-    expect(wrapper.find('.MuiButton-label').at(0).text()).toBe('Apr')
+    expect(wrapper.find('.MuiButton-label').at(0).text()).toBe('Mar-2020')
   })
 })
diff --git a/src/Calender/Day.jsx b/src/Calender/Day.jsx
@@ -3,7 +3,7 @@ import TableCell from '@material-ui/core/TableCell'
 import { makeStyles } from '@material-ui/core/styles'
 import Tooltip from '@material-ui/core/Tooltip'
 
-const useStyles = makeStyles({
+const getStyles = makeStyles({
   selected: {
     background: '#007cff',
     fontColor: 'white'
@@ -20,7 +20,7 @@ const Day = (props) => {
 }
 
 const getContent = (props) => {
-  const classes = useStyles()
+  const classes = getStyles()
 
   return props.data.selected === true ? (
     <TableCell

diff --git a/src/Calender/Month.jsx b/src/Calender/Month.jsx
@@ -12,8 +12,8 @@ const isSelected = (date, selectedDays) => {
   return selectedDate
 }
 const getDays = (month, year, selectedDays) => {
-  const firstDayOfMonth = new Date(year, month).getDay()
-  const noOfDaysInMonth = 32 - new Date(year, month, 32).getDate()
+  const firstDayOfMonth = new Date(year, month - 1).getDay()
+  const noOfDaysInMonth = 32 - new Date(year, month - 1, 32).getDate()
   const days = []
   let date = 1
   for (let i = 0; i < 6; i++) {

diff --git a/src/Calender/Month.test.js b/src/Calender/Month.test.js
@@ -7,12 +7,12 @@ describe('Month component test', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = mount(<Month month='1' year='2020' selectedDays={[3, 4, 10]} />)
+    wrapper = mount(<Month month='01' year='2020' selectedDays={[3, 4, 10]} />)
   })
   it('renders container', () => {
     expect(wrapper.find('Month').length).toBe(1)
-    expect(wrapper.find('Day').length).toBe(35)
-    expect(wrapper.find('Day').at(34).text()).toBe('29')
+    expect(wrapper.find('Day').length).toBe(34)
+    expect(wrapper.find('Day').at(33).text()).toBe('31')
   })
 
   it('should trigger onSelect on click of week pre-selected', () => {