Advertisement
HjHimansh

classTabs

Aug 6th, 2020
2,095
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2. import propTypes from 'prop-types';
  3. import { makeStyles } from '@material-ui/core/styles';
  4. import { useStoreState } from 'easy-peasy';
  5. import {returnDateStatus} from 'utils/dateUtils.js';
  6.  
  7. import {
  8.   Tabs
  9. } from 'widget';
  10.  
  11. import TimeSlotButtons from './TimeSlotButtons';
  12. import { tabHeaders, todayDateFormatHeader } from './tabConstants';
  13.  
  14. import classstyles from './ClassTabs.module.scss';
  15.  
  16. const ClassTabs = props => {
  17.   const { serverTime, clientTime } = useStoreState(state => state.app);
  18.   const defaultTabHeader = todayDateFormatHeader(serverTime, clientTime, props.slotData);
  19.   const [selectedTab, onTabSelect] = useState(defaultTabHeader);
  20.   const tabHeads = tabHeaders(serverTime, clientTime, props.slotData);
  21.   // console.log(props.slotData);
  22.   // console.log(selectedTab);
  23.  
  24.   if (!props.slotData.has(selectedTab.name)) {
  25.     //console.log(selectedTab.name);
  26.     selectedTab.name = props.slotData.keys().next().value;
  27.     selectedTab.value = returnDateStatus(serverTime,clientTime,selectedTab.name);
  28.     //just set value here...value will be the day corresponding to selectedTab.name;
  29.     //console.log("Updated: ", selectedTab);
  30.   }
  31.  
  32.   const onTabChange = value => {
  33.     //console.log("Triggered");
  34.     const data = tabHeads.filter(tabHeader => tabHeader.value === value)[0];
  35.     onTabSelect(data);
  36.   };
  37.  
  38.   const selectSlot = slot => {
  39.     props.handleSlot(slot);
  40.   };
  41.  
  42.   const useStyles = makeStyles(theme => ({
  43.     root: {
  44.       '& .MuiTabs-flexContainer': {
  45.         paddingLeft: '0px',
  46.       },
  47.       '& .MuiButtonBase-root.Mui-selected': {
  48.         borderBottom: '2px solid #227AEB',
  49.       },
  50.       '& .MuiButtonBase-root': {
  51.         borderBottom: '2px solid #E9E9E9',
  52.         padding: '5px 10px',
  53.       },
  54.       '& .Mui-selected .MuiTab-wrapper': {
  55.         color: '#227AEB',
  56.         fontSize: '.75rem',
  57.         fontWeight: 'normal',
  58.       },
  59.       '& .MuiTab-wrapper': {
  60.         alignItems: 'center',
  61.         fontSize: '.75rem',
  62.         fontWeight: 'normal',
  63.         color: '#9E9E9E',
  64.       },
  65.       '& .MuiFormControlLabel-root': {
  66.         width: '50%',
  67.       },
  68.       [theme.breakpoints.up('sm')]: {
  69.         '& .MuiTabs-flexContainer .MuiButtonBase-root': {
  70.           minWidth: '110px'
  71.         }
  72.       },
  73.     },
  74.   }));
  75.  
  76.   const classList = useStyles();
  77.   const data = props.slotData && props.slotData.get(selectedTab.name);
  78.   //console.log("Heya" , selectedTab);
  79.   return (
  80.     <div className={[classList.root, classstyles.wrapper].join(' ')}>
  81.       {/* tbd: display name logic to tabs to be changed */}
  82.       <Tabs
  83.         value={selectedTab.value}
  84.         tabHeader={tabHeads}
  85.         onChange={onTabChange}
  86.         headerAsObject
  87.       />
  88.       <div>
  89.         <div className={classstyles.hoursWrapper}>
  90.           <p className={classstyles.hourContent}>
  91.             <img src="/assets/images/morning.svg" alt="morning" />
  92.             <span className={classstyles.hourTitle}>Morning</span>
  93.           </p>
  94.           <div className={classstyles.hourTabs}>
  95.             { data && data.morning ? (
  96.               <TimeSlotButtons
  97.                 data={data && data.morning}
  98.                 slotButtonsClass={classstyles.slotButtons}
  99.                 selectedSlotClass={classstyles.selectedSlot}
  100.                 selectSlot={selectSlot}
  101.                 slot={props.value}
  102.               />
  103.             ) : null }
  104.           </div>
  105.         </div>
  106.         <div className={classstyles.hoursWrapper}>
  107.           <p className={classstyles.hourContent}>
  108.             <img src="/assets/images/afternoon.svg" alt="afternoon" />
  109.             <span className={classstyles.hourTitle}>AfterNoon</span>
  110.           </p>
  111.           <div className={classstyles.hourTabs}>
  112.             { data && data.afternoon ? (
  113.               <TimeSlotButtons
  114.                 data={data && data.afternoon}
  115.                 slotButtonsClass={classstyles.slotButtons}
  116.                 selectedSlotClass={classstyles.selectedSlot}
  117.                 selectSlot={selectSlot}
  118.                 slot={props.value}
  119.               />
  120.             ) : null }
  121.           </div>
  122.         </div>
  123.         <div className={classstyles.hoursWrapper}>
  124.           <p className={classstyles.hourContent}>
  125.             <img src="/assets/images/evening.svg" alt="evening" />
  126.             <span className={classstyles.hourTitle}>Evening</span>
  127.           </p>
  128.           <div className={classstyles.hourTabs}>
  129.             { data && data.evening ? (
  130.               <TimeSlotButtons
  131.                 data={data && data.evening}
  132.                 slotButtonsClass={classstyles.slotButtons}
  133.                 selectedSlotClass={classstyles.selectedSlot}
  134.                 selectSlot={selectSlot}
  135.                 slot={props.value}
  136.               />
  137.             ) : null }
  138.           </div>
  139.         </div>
  140.       </div>
  141.     </div>
  142.   );
  143. };
  144.  
  145. ClassTabs.propTypes = {
  146.   value: propTypes.string,
  147.   handleSlot: propTypes.func.isRequired,
  148. };
  149.  
  150. ClassTabs.defaultProps = {
  151.   value: ''
  152. };
  153. export default ClassTabs;
  154.  
Advertisement
RAW Paste Data Copied
Advertisement