SHARE
TWEET

Untitled

a guest Jul 24th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /** @jsx jsx */
  2. import { useRef, useContext } from "react";
  3. import { useDay } from "@datepicker-react/hooks";
  4. import { jsx } from "@emotion/core";
  5. import DatepickerContext from "./datepickerContext";
  6.  
  7. function getColor(
  8.   isSelected,
  9.   isSelectedStartOrEnd,
  10.   isWithinHoverRange,
  11.   isDisabled
  12. ) {
  13.   return ({
  14.     selectedFirstOrLastColor,
  15.     normalColor,
  16.     selectedColor,
  17.     rangeHoverColor,
  18.     disabledColor
  19.   }) => {
  20.     if (isSelectedStartOrEnd) {
  21.       return selectedFirstOrLastColor;
  22.     } else if (isSelected) {
  23.       return selectedColor;
  24.     } else if (isWithinHoverRange) {
  25.       return rangeHoverColor;
  26.     } else if (isDisabled) {
  27.       return disabledColor;
  28.     } else {
  29.       return normalColor;
  30.     }
  31.   };
  32. }
  33.  
  34. function Day({ dayLabel, date }) {
  35.   const dayRef = useRef(null);
  36.   const {
  37.     focusedDate,
  38.     isDateFocused,
  39.     isDateSelected,
  40.     isDateHovered,
  41.     isDateBlocked,
  42.     isFirstOrLastSelectedDate,
  43.     onDateSelect,
  44.     onDateFocus,
  45.     onDateHover
  46.   } = useContext(DatepickerContext);
  47.   const {
  48.     isSelected,
  49.     isSelectedStartOrEnd,
  50.     isWithinHoverRange,
  51.     disabledDate,
  52.     onClick,
  53.     onKeyDown,
  54.     onMouseEnter,
  55.     tabIndex
  56.   } = useDay({
  57.     date,
  58.     focusedDate,
  59.     isDateFocused,
  60.     isDateSelected,
  61.     isDateHovered,
  62.     isDateBlocked,
  63.     isFirstOrLastSelectedDate,
  64.     onDateFocus,
  65.     onDateSelect,
  66.     onDateHover,
  67.     dayRef
  68.   });
  69.  
  70.   if (!dayLabel) {
  71.     return <div />;
  72.   }
  73.  
  74.   const getColorFn = getColor(
  75.     isSelected,
  76.     isSelectedStartOrEnd,
  77.     isWithinHoverRange,
  78.     disabledDate
  79.   );
  80.  
  81.   return (
  82.     <button
  83.       onClick={onClick}
  84.       onKeyDown={onKeyDown}
  85.       onMouseEnter={onMouseEnter}
  86.       tabIndex={tabIndex}
  87.       type="button"
  88.       ref={dayRef}
  89.       css={{
  90.         padding: "8px",
  91.         border: 0,
  92.         color: getColorFn({
  93.           selectedFirstOrLastColor: "#FFFFFF",
  94.           normalColor: "#001217",
  95.           selectedColor: "#FFFFFF",
  96.           rangeHoverColor: "#FFFFFF",
  97.           disabledColor: "#808285"
  98.         }),
  99.         background: getColorFn({
  100.           selectedFirstOrLastColor: "#00aeef",
  101.           normalColor: "#FFFFFF",
  102.           selectedColor: "#71c9ed",
  103.           rangeHoverColor: "#71c9ed",
  104.           disabledColor: "#FFFFFF"
  105.         })
  106.       }}
  107.     >
  108.       {dayLabel}
  109.     </button>
  110.   );
  111. }
  112.  
  113. export default Day;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top