groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Inputs/DateSelect.js

@@ -1,461 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-import DatePicker from 'react-datepicker';
-import styled, { useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-import { Icon } from '../Icon';
-
-const Wrapper = styled.div`
-  display: flex;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
-
-  .react-datepicker-wrapper {
-    display: flex;
-  }
-
-  .react-datepicker {
-    font-size: 14px;
-    background-color: ${({ theme }) => theme.bgColor};
-    color: #444444;
-    border: 1px solid ${({ theme }) => theme.neutral['neutral-5']};
-    border-radius: 6.6px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .react-datepicker__input-container {
-    border: 1px solid ${({ theme }) => theme.border};  
-    border-radius: 4px;
-    padding: 6px 12px;
-    display: flex;
-    align-items: center;
-    background-color: ${({ theme }) => theme.bgColor};
-
-    &:focus-within {
-      border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-      outline: none;
-    }
-
-    input {
-      border: none;
-      outline: none;
-      width: 100%;
-      cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
-    }
-  }
-
-  .react-datepicker__triangle {
-    ::before,
-    ::after {
-      display: none;
-    }
-  }
-
-  .react-datepicker__month-container {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-  }
-  .react-datepicker__month-select {
-    font-size: 16px;
-    border: none;
-  }
-  .react-datepicker__current-month,
-  .react-datepicker-time__header,
-  .react-datepicker-year-header,
-  .react-datepicker__navigation {
-    display: none;
-  }
-  .react-datepicker__day--outside-month {
-    color: #a9b1b8 !important;
-  }
-  .react-datepicker__header__dropdown,
-  .react-datepicker__header__dropdown--select {
-    margin-top: 16px;
-    margin-bottom: 30px;
-    border: none;
-  }
-  .react-datepicker__header {
-    text-align: center;
-    border-bottom: none;
-    border-top-left-radius: 6.6px;
-    border-top-right-radius: 6.6px;
-    padding: 0;
-    position: relative;
-    background-color: ${({ theme }) => theme.bgColor};
-  }
-  .react-datepicker__year-select {
-    border: none;
-
-    &::focus-visible {
-      border: none;
-    }
-  }
-  .react-datepicker__day {
-    cursor: pointer;
-    padding: 3px;
-    color: ${({ theme }) => theme.textColor};
-  }
-  .react-datepicker__day--selected,
-  .react-datepicker__day--keyboard-selected {
-    background: ${({ theme }) => theme.variant['primary-1']};
-    border-radius: 2.4px;
-    color: ${({ theme }) => theme.bgColor};
-  }
-  .react-datepicker__day-names,
-  .react-datepicker__day-name {
-    color: #9d9d9d;
-    padding: 3px;
-    text-transform: uppercase;
-    font-size: 12px !important;
-  }
-
-  .react-datepicker__day-names {
-    margin-bottom: -14px;
-  }
-
-  .calender-year {
-    select {
-      border: none;
-      cursor: pointer;
-      outline: none;
-      font-size: 16px;
-      font-weight: bold;
-      &:focus {
-        outline: none;
-        border: none;
-      }
-    }
-  }
-  .react-datepicker__day-name,
-  .react-datepicker__day,
-  .react-datepicker__time-name {
-    width: 30.2px;
-    line-height: 27.2px;
-    text-align: center;
-    margin: 2.656px;
-  }
-
-  .react-datepicker::before,
-  .react-datepicker::after {
-    box-sizing: initial !important;
-  }
-`;
-
-Wrapper.defaultProps = {
-  theme: defaultThemeColor,
-};
-
-const CalendarHeaderDiv = styled.div`
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  font-size: 16px;
-  padding-top: 12px;
-  padding-bottom: 15px;
-`;
-
-const IconDiv = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-left: 6px;
-`;
-
-const DropDownContainer = styled('div')`
-  width: inherit;
-`;
-
-const DropDownHeader = styled('div')`
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-`;
-
-const DropDownListContainer = styled('div')`
-  margin-top: 8px;
-  position: absolute;
-  z-index: 100;
-  width: inherit;
-  margin-left: -20px;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  background: white;
-  box-shadow: 0px 6px 20px rgb(56 66 100 / 15%);
-  border-radius: 4px;
-`;
-
-const DropDownList = styled('ul')`
-  list-style: none;
-  padding: 0;
-  margin: 12px;
-  margin-right: 8px;
-  padding-bottom: 10px;
-  width: 132px;
-  height: 178px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border-radius: 10px;
-    background-color: ${({ theme }) => theme.neutral['neutral-3']};
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    // margin: 5px;
-    background-color: ${({ theme }) => theme.neutral['neutral-4']};
-    border-radius: 10px;
-  }
-`;
-DropDownList.defaultProps = {
-  theme: defaultThemeColor,
-};
-
-const ListItem = styled('li')`
-  text-align: left;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 17px;
-  padding-left: 12px;
-  padding-bottom: 12px;
-  cursor: pointer;
-`;
-
-export const DateSelect = ({ startDate, setStartDate, disabled, theme, ...props }) => {
-  const activeTheme = useTheme() || defaultThemeColor
-
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  var years = [];
-  for (var i = 2010; i <= new Date().getFullYear() + 10; i++) {
-    years.push(i);
-  }
-
-  const refMonth = useRef(null);
-  const refYear = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isOpenYear, setIsOpenYear] = useState(false);
-  const [hover, setHover] = useState(false);
-  const [hoverYear, setHoverYear] = useState(false);
-  const [selectedYear, setSelectedYear] = useState(startDate.getFullYear());
-  const [selectedMonth, setSelectedMonth] = useState(
-    months[startDate.getMonth()]
-  );
-
-  useEffect(() => {
-    setSelectedMonth(months[startDate.getMonth()]);
-    setSelectedYear(startDate.getFullYear());
-  }, [startDate]);
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutsideMonth, true);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutsideMonth, true);
-    };
-  }, []);
-
-  const handleClickOutsideMonth = (event) => {
-    if (refMonth.current && !refMonth.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-
-  const handleClickOutsideYear = (event) => {
-    if (refYear.current && !refYear.current.contains(event.target)) {
-      setIsOpenYear(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutsideYear, true);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutsideYear, true);
-    };
-  }, []);
-
-  return (
-    <Wrapper disabled={disabled} theme={theme} {...props}>
-      <DatePicker
-        selected={startDate}
-        dateFormat='dd/MM/yyyy'
-        useWeekdaysShort={true}
-        onChange={(date) => setStartDate(date)}
-        placeholderText={'select date'}
-        adjustDateOnChange
-        disabled={disabled}
-        dropdownMode='select'
-        renderCustomHeader={({ date, changeYear, changeMonth }) => {
-          return (
-            <CalendarHeaderDiv>
-              <div style={{ display: 'flex' }}>
-                <DropDownContainer ref={refMonth}>
-                  <DropDownHeader
-                    onClick={() => {
-                      setIsOpen(!isOpen);
-                      setIsOpenYear(false);
-                    }}
-                  >
-                    <span
-                      onMouseEnter={() => setHover(true)}
-                      onMouseLeave={() => setHover(false)}
-                      style={{
-                        color: `${hover ? activeTheme.variant['primary-1'] : activeTheme.textColor
-                          }`,
-                      }}
-                    >
-                      {months[date.getMonth()]}
-                    </span>
-                    <IconDiv>
-                      <Icon
-                        icon='triangle-down'
-                        color={hover ? activeTheme.variant['primary-1'] : activeTheme.textColor}
-                        size={7}
-                      />
-                    </IconDiv>
-                  </DropDownHeader>
-                  {isOpen && (
-                    <DropDownListContainer>
-                      <DropDownList theme={theme} onMouseEnter={() => setHover(true)}>
-                        {months.map((option, index) => (
-                          <ListItem
-                            selectedMonth={selectedMonth}
-                            onClick={() => {
-                              setHover(false);
-                              changeMonth(index);
-                              setIsOpen(false);
-                              setSelectedMonth(months[index]);
-                            }}
-                            key={Math.random()}
-                          >
-                            <span
-                              style={{
-                                color: `${selectedMonth === option
-                                  ? activeTheme.variant['primary-1']
-                                  : activeTheme.textColor
-                                  }`,
-                              }}
-                            >
-                              {option}
-                            </span>
-                          </ListItem>
-                        ))}
-                      </DropDownList>
-                    </DropDownListContainer>
-                  )}
-                </DropDownContainer>
-                <DropDownContainer ref={refYear}>
-                  <DropDownHeader
-                    style={{ marginLeft: '28px' }}
-                    onClick={() => {
-                      setIsOpenYear(!isOpenYear);
-                      setIsOpen(false);
-                    }}
-                  >
-                    <span
-                      onMouseEnter={() => setHoverYear(true)}
-                      onMouseLeave={() => setHoverYear(false)}
-                      style={{
-                        color: `${hoverYear
-                          ? activeTheme.variant['primary-1']
-                          : activeTheme.textColor
-                          }`,
-                      }}
-                    >
-                      {date.getFullYear()}
-                    </span>
-                    <IconDiv>
-                      <Icon
-                        icon='triangle-down'
-                        color={hoverYear ? activeTheme.variant['primary-1'] : activeTheme.textColor}
-                        size={7}
-                      />
-                    </IconDiv>
-                  </DropDownHeader>
-                  {isOpenYear && (
-                    <DropDownListContainer>
-                      <DropDownList onMouseEnter={() => setHoverYear(true)}>
-                        {years.map((option, index) => (
-                          <ListItem
-                            onClick={() => {
-                              setHoverYear(false);
-                              changeYear(option);
-                              setSelectedYear(option);
-                              setIsOpenYear(false);
-                            }}
-                            key={Math.random()}
-                          >
-                            <span
-                              style={{
-                                color: `${selectedYear === option
-                                  ? activeTheme.variant['primary-1']
-                                  : activeTheme.textColor
-                                  }`,
-                              }}
-                            >
-                              {option}
-                            </span>
-                          </ListItem>
-                        ))}
-                      </DropDownList>
-                    </DropDownListContainer>
-                  )}
-                </DropDownContainer>
-              </div>
-            </CalendarHeaderDiv>
-          );
-        }}
-      />
-    </Wrapper>
-  );
-};
-
-DateSelect.propTypes = {
-  /**
-   * Date Props in GMT Format
-   */
-  startDate: PropTypes.any,
-  /**
-   * Date onChange Function
-   */
-  setStartDate: PropTypes.func,
-  /**
-   * Disable property of DateSelect
-   */
-  disabled: PropTypes.bool,
-  /**
-   * theme object
-   */
-  theme: PropTypes.object,
-};
-
-DateSelect.defaultProps = {
-  theme: defaultThemeColor,
-  startDate: '',
-  setStartDate: () => { },
-  disabled: false,
-};