groundfloor-react-ui 1.0.0

package/components/Inputs/DateSelect.js

@@ -0,0 +1,411 @@
+import React, { useState, useEffect, useRef } from "react";
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css'
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+import { Icon } from "../Icon";
+
+const border = `#D4D7E3`;
+
+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 ${border};
+        border-radius: 4px;
+        padding: 8px 12px;
+        display: flex;
+        align-items: center;
+
+        
+        &: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;
+            }
+        }
+    }
+`;
+
+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, ...props }) => {
+    const theme = 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} {...props}>
+            <DatePicker
+                selected={startDate}
+                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 ? theme.variant['primary-1'] : theme.textColor}` }}>
+                                            {months[date.getMonth()]}
+                                        </span>
+                                        <IconDiv>
+                                            <Icon icon='triangle-down'
+                                                color={hover ? 'blue' : 'black'}
+                                                size={7} />
+                                        </IconDiv>
+                                    </DropDownHeader>
+                                    {isOpen && (
+                                        <DropDownListContainer>
+                                            <DropDownList 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 ? theme.variant['primary-1'] : theme.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 ? theme.variant['primary-1'] : theme.textColor}` }}>
+                                            {(date).getFullYear()}
+                                        </span>
+                                        <IconDiv>
+                                            <Icon icon='triangle-down'
+                                                color={hoverYear ? 'blue' : 'black'}
+                                                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 ? theme.variant['primary-1'] : theme.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
+}
+
+DateSelect.defaultProps = {
+    startDate: '',
+    setStartDate: () => { },
+    disabled: false
+}