diff --git a/package.json b/package.json index 874a09a27..7b2ddddf1 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,8 @@ "classnames": "^2.2.1", "date-fns": "2.0.0-alpha.7", "prop-types": "^15.5.10", - "react-list": "^0.8.8" + "react-list": "^0.8.8", + "styled-components": "^4.1.3" }, "peerDependencies": { "react": "^0.14 || ^15.0.0-rc || >=15.0" @@ -71,8 +72,8 @@ "postcss-loader": "^2.0.10", "precss": "^2.0.0", "prettier": "^1.9.2", - "react": "^16.2.0", - "react-dom": "^16.2.0", + "react": "16.4.2", + "react-dom": "16.4.2", "react-hot-loader": "^3.1.3", "style-loader": "^0.19.1", "webpack": "^3.10.0", diff --git a/src/components/Calendar.js b/src/components/Calendar.js index be26e122b..570221cf5 100644 --- a/src/components/Calendar.js +++ b/src/components/Calendar.js @@ -26,6 +26,19 @@ import { } from 'date-fns'; import defaultLocale from 'date-fns/locale/en-US'; import coreStyles from '../styles'; +import { + MonthAndYearWrapper, + MonthAndYearPickers, + YearPicker, + DateDisplay, + CalendarWrapper, + MonthPicker, + Months, + InfiniteMonths, + NavigationButton, + DateDisplayItem, +} from './styles/Calendar.styled.js'; +import { WeekDays, WeekDay } from './styles/Month.styled.js'; class Calendar extends PureComponent { constructor(props, context) { @@ -166,18 +179,18 @@ class Calendar extends PureComponent { const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear(); const styles = this.styles; return ( -
e.stopPropagation()} className={styles.monthAndYearWrapper}> + e.stopPropagation()}> {showMonthArrow ? ( - + ) : null} {showMonthAndYearPickers ? ( - - + + - + - + - - + + ) : ( - + {locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()} - + )} {showMonthArrow ? ( - + ) : null} -
+ ); } renderWeekdays() { const now = new Date(); return ( -
+ {eachDayOfInterval({ start: startOfWeek(now, this.dateOptions), end: endOfWeek(now, this.dateOptions), - }).map((day, i) => ( - - {format(day, 'ddd', this.dateOptions)} - - ))} -
+ }).map((day, i) => {format(day, 'ddd', this.dateOptions)})} + ); } renderDateDisplay() { const { focusedRange, color, ranges, rangeColors } = this.props; const defaultColor = rangeColors[focusedRange[0]] || color; - const styles = this.styles; return ( -
+
{ranges.map((range, i) => { if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay)) return null; return ( -
- + this.handleRangeFocusChange(i, 0)}> - - + this.handleRangeFocusChange(i, 1)}> - -
+ + ); })}
@@ -366,7 +367,7 @@ class Calendar extends PureComponent { color: range.color || rangeColors[i] || color, })); return ( -
this.setState({ drag: { status: false, range: {} } })} onMouseLeave={() => { @@ -377,11 +378,8 @@ class Calendar extends PureComponent { {scroll.enabled ? (
{isVertical && this.renderWeekdays(this.dateOptions)} -
onPreviewChange && onPreviewChange()} style={{ width: scrollArea.calendarWidth + 11, @@ -428,14 +426,10 @@ class Calendar extends PureComponent { ); }} /> -
+
) : ( -
+ {new Array(this.props.months).fill(null).map((_, i) => { const monthStep = addMonths(this.state.focusedDate, i); return ( @@ -459,9 +453,9 @@ class Calendar extends PureComponent { /> ); })} -
+ )} -
+ ); } } diff --git a/src/components/DateRange.js b/src/components/DateRange.js index 6815f0679..dfe26bf95 100644 --- a/src/components/DateRange.js +++ b/src/components/DateRange.js @@ -120,7 +120,7 @@ class DateRange extends Component { }} {...this.props} displayMode="dateRange" - className={classnames(this.styles.dateRangeWrapper, this.props.className)} + className={this.props.className} onChange={this.setSelection} updateRange={val => this.setSelection(val, false)} ref={target => { diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js index 10cafcd40..0a8811af1 100644 --- a/src/components/DateRangePicker.js +++ b/src/components/DateRangePicker.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import DateRange from './DateRange'; import DefinedRange from './DefinedRange'; import { findNextRangeIndex, generateStyles } from '../utils.js'; -import classnames from 'classnames'; import coreStyles from '../styles'; +import { DateRangePickerWrapper } from './styles/DateRangePicker.styles'; class DateRangePicker extends Component { constructor(props) { @@ -17,7 +17,7 @@ class DateRangePicker extends Component { render() { const { focusedRange } = this.state; return ( -
+ this.dateRange.updatePreview(value)} @@ -32,7 +32,7 @@ class DateRangePicker extends Component { ref={t => (this.dateRange = t)} className={undefined} /> -
+ ); } } diff --git a/src/components/DayCell.js b/src/components/DayCell.js index 72bda900e..2bca4f9da 100644 --- a/src/components/DayCell.js +++ b/src/components/DayCell.js @@ -3,6 +3,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns'; +import { DayNumber, Day } from './styles/DayCell.styled'; class DayCell extends Component { constructor(props, context) { @@ -76,13 +77,11 @@ class DayCell extends Component { isEndOfWeek, isStartOfMonth, isEndOfMonth, - disabled, styles, } = this.props; return classnames(styles.day, { [styles.dayPassive]: isPassive, - [styles.dayDisabled]: disabled, [styles.dayToday]: isToday, [styles.dayWeekend]: isWeekend, [styles.dayStartOfWeek]: isStartOfWeek, @@ -118,7 +117,7 @@ class DayCell extends Component { if (this.props.displayMode === 'date') { let isSelected = isSameDay(this.props.day, this.props.date); return isSelected ? ( - + ) : null; } @@ -161,10 +160,11 @@ class DayCell extends Component { )); } render() { - const { styles } = this.props; + const { disabled, styles } = this.props; return ( - + + ); } } diff --git a/src/components/DefinedRange.js b/src/components/DefinedRange.js index 2d94d686f..1b906ab0c 100644 --- a/src/components/DefinedRange.js +++ b/src/components/DefinedRange.js @@ -4,6 +4,15 @@ import styles from '../styles'; import { defaultInputRanges, defaultStaticRanges } from '../defaultRanges'; import { rangeShape } from './DayCell'; import cx from 'classnames'; +import { + InputRanges, + InputRange, + InputRangeInput, + StaticRanges, + StaticRange, + StaticRangeLabel, + DefinedRangesWrapper, +} from './styles/DefinedRange.styled'; class DefinedRanges extends Component { constructor(props) { @@ -37,9 +46,9 @@ class DefinedRanges extends Component { const { onPreviewChange, ranges, renderStaticRangeLabel, rangeColors, className } = this.props; return ( -
+ {this.props.headerContent} -
+ {this.props.staticRanges.map((staticRange, i) => { const { selectedRange, focusedRangeIndex } = this.getSelectedRange(ranges, staticRange); let labelContent; @@ -51,9 +60,9 @@ class DefinedRanges extends Component { } return ( - + {labelContent} + ); })} -
-
+ + {this.props.inputRanges.map((rangeOption, i) => ( -
- + this.setState({ focusedInput: i, rangeOffset: 0 })} onBlur={() => this.setState({ rangeOffset: 0 })} onChange={e => { @@ -98,11 +104,11 @@ class DefinedRanges extends Component { } /> {rangeOption.label} -
+ ))} -
+ {this.props.footerContent} -
+ ); } } diff --git a/src/components/Month.js b/src/components/Month.js index 92358f0d0..e0a9e67d4 100644 --- a/src/components/Month.js +++ b/src/components/Month.js @@ -16,20 +16,17 @@ import { eachDayOfInterval, } from 'date-fns'; import { getMonthDisplayRange } from '../utils'; +import { WeekDays, WeekDay, MonthWrapper, MonthName, Days } from './styles/Month.styled.js'; function renderWeekdays(styles, dateOptions) { const now = new Date(); return ( -
+ {eachDayOfInterval({ start: startOfWeek(now, dateOptions), end: endOfWeek(now, dateOptions), - }).map((day, i) => ( - - {format(day, 'ddd', dateOptions)} - - ))} -
+ }).map((day, i) => {format(day, 'ddd', dateOptions)})} + ); } @@ -54,14 +51,14 @@ class Month extends PureComponent { } const showPreview = this.props.showPreview && !drag.disablePreview; return ( -
+ {this.props.showMonthName ? ( -
+ {format(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)} -
+ ) : null} {this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions)} -
+ {eachDayOfInterval({ start: monthDisplay.start, end: monthDisplay.end }).map( (day, index) => { const isStartOfMonth = isSameDay(day, monthDisplay.startDateOfMonth); @@ -101,8 +98,8 @@ class Month extends PureComponent { ); } )} -
-
+ + ); } } diff --git a/src/components/calendar.scss b/src/components/calendar.scss deleted file mode 100644 index ba8704a9b..000000000 --- a/src/components/calendar.scss +++ /dev/null @@ -1,97 +0,0 @@ -.rdrCalendarWrapper { - box-sizing: border-box; - background: #ffffff; - display: inline-flex; - flex-direction: column; - user-select: none; -} - -.rdrDateDisplay{ - display: flex; - justify-content: space-between; -} - -.rdrDateDisplayItem{ - flex: 1 1; - width: 0; - text-align: center; - color: inherit; - & + &{ - margin-left: 0.833em; - } - input{ - text-align: inherit; - &:disabled{ - cursor: default; - } - } -} - -.rdrDateDisplayItemActive{} - -.rdrMonthAndYearWrapper { - box-sizing: inherit; - display: flex; - justify-content: space-between; -} - -.rdrMonthAndYearPickers{ - flex: 1 1 auto; - display: flex; - justify-content: center; - align-items: center; -} - -.rdrMonthPicker{} - -.rdrYearPicker{} - -.rdrNextPrevButton { - box-sizing: inherit; - cursor: pointer; - outline: none; -} - -.rdrPprevButton {} - -.rdrNextButton {} - -.rdrMonths{ - display: flex; -} - -.rdrMonthsVertical{ - flex-direction: column; -} - -.rdrMonthsHorizontal > div > div > div{ - display: flex; - flex-direction: row; -} - -.rdrMonth{ - width: 27.667em; -} - -.rdrWeekDays{ - display: flex; -} - -.rdrWeekDay { - flex-basis: calc(100% / 7); - box-sizing: inherit; - text-align: center; -} - -.rdrDays{ - display: flex; - flex-wrap: wrap; -} - -.rdrDateDisplayWrapper{} - -.rdrMonthName{} - -.rdrInfiniteMonths{ - overflow: auto; -} \ No newline at end of file diff --git a/src/components/dateRange.scss b/src/components/dateRange.scss deleted file mode 100644 index 89dcf26d2..000000000 --- a/src/components/dateRange.scss +++ /dev/null @@ -1,3 +0,0 @@ -.rdrDateRangeWrapper{ - user-select: none; -} diff --git a/src/components/dateRangePicker.scss b/src/components/dateRangePicker.scss deleted file mode 100644 index 1e2d18360..000000000 --- a/src/components/dateRangePicker.scss +++ /dev/null @@ -1,4 +0,0 @@ -.rdrDateRangePickerWrapper{ - display: inline-flex; - user-select: none; -} \ No newline at end of file diff --git a/src/components/dayCell.scss b/src/components/dayCell.scss index 228671054..8bbcb9c75 100644 --- a/src/components/dayCell.scss +++ b/src/components/dayCell.scss @@ -1,11 +1,3 @@ -.rdrDay { - box-sizing: inherit; - width: calc(100% / 7); - position: relative; - font: inherit; - cursor: pointer; -} - .rdrDayNumber { display: block; position: relative; @@ -14,21 +6,10 @@ } } -.rdrDayDisabled { - cursor: not-allowed; -} - - .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ pointer-events: none; } -.rdrInRange{} - .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ pointer-events: none; } - -.rdrDayHovered{} - -.rdrDayActive{} diff --git a/src/components/definedRange.scss b/src/components/definedRange.scss deleted file mode 100644 index 9f05efa0c..000000000 --- a/src/components/definedRange.scss +++ /dev/null @@ -1,20 +0,0 @@ -.rdrDefinedRangesWrapper{} - -.rdrStaticRanges{ - display: flex; - flex-direction: column; -} - -.rdrStaticRange{ - font-size: inherit; -} - -.rdrStaticRangeLabel{} - -.rdrInputRanges{} - -.rdrInputRange{ - display: flex; -} - -.rdrInputRangeInput{} diff --git a/src/components/styles/Calendar.styled.js b/src/components/styles/Calendar.styled.js new file mode 100644 index 000000000..ea35218a0 --- /dev/null +++ b/src/components/styles/Calendar.styled.js @@ -0,0 +1,176 @@ +import styled, { css } from 'styled-components'; + +const marginHorizontal = css` + margin: 0 5px; +`; + +export const CalendarWrapper = styled.div` + box-sizing: border-box; + background: #ffffff; + display: inline-flex; + flex-direction: column; + user-select: none; + color: #000000; + font-size: 12px; +`; + +export const MonthAndYearWrapper = styled.div` + box-sizing: inherit; + display: flex; + justify-content: space-between; + align-items: center; + height: 60px; + padding-top: 10px; +`; + +export const MonthAndYearPickers = styled.span` + flex: 1 1 auto; + display: flex; + justify-content: center; + align-items: center; + + font-weight: 600; + select { + appearance: none; + -webkit-appearance: none; + border: 0; + background: transparent; + padding: 10px 30px 10px 10px; + border-radius: 4px; + outline: 0; + color: #3e484f; + background: url("data:image/svg+xml;utf8,") + no-repeat; + background-position: right 8px center; + cursor: pointer; + text-align: center; + &:hover { + background-color: rgba(0, 0, 0, 0.07); + } + } +`; + +export const YearPicker = styled.span` + ${marginHorizontal}; +`; + +export const MonthPicker = styled.span` + ${marginHorizontal}; +`; + +export const DateDisplay = styled.div` + display: flex; + justify-content: space-between; + background-color: rgb(239, 242, 247); + padding: 0.833em; +`; + +const monthsVertical = css` + flex-direction: column; +`; + +const monthsHorizontal = css` + > div > div > div { + display: flex; + flex-direction: row; + } +`; + +export const Months = styled.div` + display: flex; + ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)}; +`; + +export const InfiniteMonths = styled.div` + overflow: auto; + ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)}; +`; + +// +// Date Display Item + +const dateDisplayItemActive = css` + border-color: currentColor; + input { + color: #7d888d; + } +`; + +export const DateDisplayItem = styled.span` + flex: 1 1; + width: 0; + text-align: center; + color: inherit; + border-radius: 4px; + background-color: rgb(255, 255, 255); + box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); + border: 1px solid transparent; + + & + & { + margin-left: 0.833em; + } + + input { + width: 100%; + height: 2.5em; + color: #849095; + background: transparent; + border: 0px; + line-height: 2.5em; + text-align: inherit; + cursor: pointer; + &:disabled { + cursor: default; + } + } + + ${props => (props.active ? dateDisplayItemActive : '')}; +`; + +// Buttons +// TODO: Split into separated file +const prevButton = css` + i { + border-width: 4px 6px 4px 4px; + border-color: transparent rgb(52, 73, 94) transparent transparent; + transform: translate(-3px, 0px); + } +`; + +const nextButton = css` + i { + margin: 0 0 0 7px; + border-width: 4px 4px 4px 6px; + border-color: transparent transparent transparent rgb(52, 73, 94); + transform: translate(3px, 0px); + } +`; + +export const NavigationButton = styled.button` + box-sizing: inherit; + cursor: pointer; + outline: none; + display: block; + width: 24px; + height: 24px; + margin: 0 0.833em; + padding: 0; + border: 0; + border-radius: 5px; + background: #eff2f7; + &:hover { + background: #e1e7f0; + } + i { + display: block; + width: 0; + height: 0; + padding: 0; + text-align: center; + border-style: solid; + margin: auto; + transform: translate(-3px, 0px); + } + + ${({ actionType }) => (actionType === 'next' ? nextButton : prevButton)}; +`; diff --git a/src/components/styles/DateRangePicker.styles.js b/src/components/styles/DateRangePicker.styles.js new file mode 100644 index 000000000..09d8ce491 --- /dev/null +++ b/src/components/styles/DateRangePicker.styles.js @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +export const DateRangePickerWrapper = styled.div` + display: inline-flex; + user-select: none; +`; diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js new file mode 100644 index 000000000..ba3969545 --- /dev/null +++ b/src/components/styles/DayCell.styled.js @@ -0,0 +1,62 @@ +import styled, { css } from 'styled-components'; + +export const DayNumber = styled.span` + && { + outline: 0; + font-weight: 300; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + top: 5px; + bottom: 5px; + display: flex; + align-items: center; + justify-content: center; + span { + color: #1d2429; + } + } +`; + +// Day States +const dayDisabled = css` + background-color: rgb(248, 248, 248); + cursor: not-allowed; + + .rdrDayNumber span { + color: #aeb9bf; + } + .rdrInRange, + .rdrStartEdge, + .rdrEndEdge, + .rdrSelected, + .rdrDayStartPreview, + .rdrDayInPreview, + .rdrDayEndPreview { + filter: grayscale(100%) opacity(60%); + } +`; + +// Day Cell +export const Day = styled.button` + box-sizing: inherit; + width: calc(100% / 7); + position: relative; + font: inherit; + cursor: pointer; + background: transparent; + user-select: none; + border: 0; + padding: 0; + line-height: 3em; + height: 3em; + text-align: center; + color: #1d2429; + &:focus { + outline: 0; + } + + ${props => (props.disabled ? dayDisabled : '')}; +`; diff --git a/src/components/styles/DefinedRange.styled.js b/src/components/styles/DefinedRange.styled.js new file mode 100644 index 000000000..9a5e91cc5 --- /dev/null +++ b/src/components/styles/DefinedRange.styled.js @@ -0,0 +1,73 @@ +import styled, { css } from 'styled-components'; + +// Static Ranges +export const StaticRanges = styled.div` + display: flex; + flex-direction: column; +`; + +export const StaticRangeLabel = styled.span` + display: block; + outline: 0; + line-height: 18px; + padding: 10px 20px; + text-align: left; +`; + +const staticRangeSelected = css``; + +export const StaticRange = styled.button` + border: 0; + cursor: pointer; + display: block; + outline: 0; + border-bottom: 1px solid #eff2f7; + font-size: inherit; + padding: 0; + background: #fff; + &:hover, + &:focus { + .rdrStaticRangeLabel { + background: #eff2f7; + } + } +`; + +export const DefinedRangesWrapper = styled.div` + font-size: 12px; + width: 226px; + border-right: solid 1px #eff2f7; + background: #fff; + ${staticRangeSelected} { + color: currentColor; + font-weight: 600; + } +`; + +// Input ranges +export const InputRanges = styled.div` + padding: 10px 0; +`; + +export const InputRange = styled.div` + display: flex; + align-items: center; + padding: 5px 20px; +`; + +export const InputRangeInput = styled.input` + width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + text-align: center; + border: solid 1px rgb(222, 231, 235); + margin-right: 10px; + color: rgb(108, 118, 122); + &:focus, + &:hover { + border-color: rgb(180, 191, 196); + outline: 0; + color: #333; + } +`; diff --git a/src/components/styles/Month.styled.js b/src/components/styles/Month.styled.js new file mode 100644 index 000000000..c7c455f34 --- /dev/null +++ b/src/components/styles/Month.styled.js @@ -0,0 +1,35 @@ +import styled from 'styled-components'; + +export const MonthName = styled.div` + text-align: left; + font-weight: 600; + color: #849095; + padding: 0.833em; +`; + +export const WeekDays = styled.div` + display: flex; + padding: 0 0.833em; +`; + +export const WeekDay = styled.span` + flex-basis: calc(100% / 7); + box-sizing: inherit; + text-align: center; + font-weight: 400; + line-height: 2.667em; + color: rgb(132, 144, 149); +`; + +export const Days = styled.div` + display: flex; + flex-wrap: wrap; +`; + +export const MonthWrapper = styled.div` + width: 27.667em; + padding: 0 0.833em 1.666em 0.833em; + ${WeekDays} { + padding: 0; + } +`; diff --git a/src/styles.scss b/src/styles.scss index 0e2aa27e6..4047fa97a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1 @@ -@import 'components/calendar.scss'; -@import 'components/dateRange.scss'; @import 'components/dayCell.scss'; -@import 'components/dateRangePicker.scss'; -@import 'components/definedRange.scss'; diff --git a/src/theme/default.scss b/src/theme/default.scss index 91bd46ef3..24491eec3 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -1,162 +1,7 @@ -.rdrCalendarWrapper{ - color: #000000; - font-size: 12px; -} - -.rdrDateDisplay{ - background-color: rgb(239, 242, 247); - padding: 0.833em; -} - -.rdrDateDisplayItem{ - border-radius: 4px; - background-color: rgb(255, 255, 255); - box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); - border: 1px solid transparent; - input{ - cursor: pointer; - height: 2.5em; - line-height: 2.5em; - border: 0px; - background: transparent; - width: 100%; - color: #849095; - } -} - -.rdrDateDisplayItemActive{ - border-color: currentColor; -} - -.rdrDateDisplayItemActive{ - input{ - color: #7d888d - } -} - -.rdrMonthAndYearWrapper { - align-items: center; - height: 60px; - padding-top: 10px; -} - -.rdrMonthAndYearPickers{ - font-weight: 600; - select{ - appearance: none; - -webkit-appearance: none; - border: 0; - background: transparent; - padding: 10px 30px 10px 10px; - border-radius: 4px; - outline: 0; - color: #3e484f; - background: url("data:image/svg+xml;utf8,") no-repeat; - background-position: right 8px center; - cursor: pointer; - text-align: center; - &:hover{ - background-color: rgba(0,0,0,0.07); - } - } -} - -.rdrMonthPicker, .rdrYearPicker{ - margin: 0 5px -} - -.rdrNextPrevButton { - display: block; - width: 24px; - height: 24px; - margin: 0 0.833em; - padding: 0; - border: 0; - border-radius: 5px; - background: #EFF2F7; - &:hover{ - background: #E1E7F0; - } - i { - display: block; - width: 0; - height: 0; - padding: 0; - text-align: center; - border-style: solid; - margin: auto; - transform: translate(-3px, 0px); - } -} - -.rdrPprevButton { - i { - border-width: 4px 6px 4px 4px; - border-color: transparent rgb(52, 73, 94) transparent transparent; - transform: translate(-3px, 0px); - } -} - -.rdrNextButton { - i { - margin: 0 0 0 7px; - border-width: 4px 4px 4px 6px; - border-color: transparent transparent transparent rgb(52, 73, 94); - transform: translate(3px, 0px); - } -} - - -.rdrWeekDays { - padding: 0 0.833em; -} - -.rdrMonth{ - padding: 0 0.833em 1.666em 0.833em; - .rdrWeekDays { - padding: 0; - } -} - .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{ display: none; } -.rdrWeekDay { - font-weight: 400; - line-height: 2.667em; - color: rgb(132, 144, 149); -} - -.rdrDay { - background: transparent; - user-select: none; - border: 0; - padding: 0; - line-height: 3.000em; - height: 3.000em; - text-align: center; - color: #1d2429; - &:focus { - outline: 0; - } -} - -.rdrDayNumber { - outline: 0; - font-weight: 300; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - top: 5px; - bottom: 5px; - display: flex; - align-items: center; - justify-content: center; -} - .rdrDayToday .rdrDayNumber span{ font-weight: 500; &:after{ @@ -204,8 +49,6 @@ right: 2px; } -.rdrInRange{} - .rdrStartEdge{ border-top-left-radius: 1.042em; border-bottom-left-radius: 1.042em; @@ -294,64 +137,6 @@ right: 0px; } -.rdrDefinedRangesWrapper{ - font-size: 12px; - width: 226px; - border-right: solid 1px #eff2f7; - background: #fff; - .rdrStaticRangeSelected{ - color: currentColor; - font-weight: 600; - } -} - -.rdrStaticRange{ - border: 0; - cursor: pointer; - display: block; - outline: 0; - border-bottom: 1px solid #eff2f7; - padding: 0; - background: #fff; - &:hover, &:focus{ - .rdrStaticRangeLabel{ - background: #eff2f7; - } - } -} - -.rdrStaticRangeLabel{ - display: block; - outline: 0; - line-height: 18px; - padding: 10px 20px; - text-align: left; -} - -.rdrInputRanges{ - padding: 10px 0; -} - -.rdrInputRange{ - align-items: center; - padding: 5px 20px; -} - -.rdrInputRangeInput{ - width: 30px; - height: 30px; - line-height: 30px; - border-radius: 4px; - text-align: center; - border: solid 1px rgb(222, 231, 235); - margin-right: 10px; - color: rgb(108, 118, 122); - &:focus, &:hover{ - border-color: rgb(180, 191, 196); - outline: 0; - color: #333; - } -} .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{ content: ''; @@ -374,20 +159,3 @@ display: none; } } - -.rdrDayDisabled { - background-color: rgb(248, 248, 248); - .rdrDayNumber span{ - color: #aeb9bf; - } - .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ - filter: grayscale(100%) opacity(60%); - } -} - -.rdrMonthName{ - text-align: left; - font-weight: 600; - color: #849095; - padding: 0.833em; -} diff --git a/yarn.lock b/yarn.lock index 6ef9a6374..b0743fb2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18,6 +18,13 @@ esutils "^2.0.2" js-tokens "^3.0.0" +"@babel/helper-annotate-as-pure@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" + integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q== + dependencies: + "@babel/types" "^7.0.0" + "@babel/helper-function-name@7.0.0-beta.31": version "7.0.0-beta.31" resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57" @@ -33,6 +40,13 @@ dependencies: "@babel/types" "7.0.0-beta.31" +"@babel/helper-module-imports@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d" + integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A== + dependencies: + "@babel/types" "^7.0.0" + "@babel/template@7.0.0-beta.31": version "7.0.0-beta.31" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda" @@ -63,6 +77,32 @@ lodash "^4.2.0" to-fast-properties "^2.0.0" +"@babel/types@^7.0.0": + version "7.3.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed" + integrity sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ== + dependencies: + esutils "^2.0.2" + lodash "^4.17.11" + to-fast-properties "^2.0.0" + +"@emotion/is-prop-valid@^0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc" + integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA== + dependencies: + "@emotion/memoize" "0.7.1" + +"@emotion/memoize@0.7.1": + version "0.7.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" + integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== + +"@emotion/unitless@^0.7.0": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f" + integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -630,6 +670,16 @@ babel-plugin-jest-hoist@^22.1.0: version "22.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee" +"babel-plugin-styled-components@>= 1": + version "1.10.0" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939" + integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.10" + babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -646,7 +696,7 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" -babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -1349,6 +1399,11 @@ camelcase@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^1.5.2: version "1.6.1" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c" @@ -1798,6 +1853,11 @@ css-color-function@~1.3.3: debug "^3.1.0" rgb "~0.1.0" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -1838,6 +1898,15 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" +css-to-react-native@^2.2.2: + version "2.3.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.0.tgz#bf80d24ec4a08e430306ef429c0586e6ed5485f7" + integrity sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^3.3.0" + css-what@2.1: version "2.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" @@ -4207,6 +4276,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1: version "3.10.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" @@ -4467,6 +4541,11 @@ lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" +lodash@^4.17.10, lodash@^4.17.11: + version "4.17.11" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" + integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== + log-symbols@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a" @@ -4487,6 +4566,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: dependencies: js-tokens "^3.0.0" +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + loud-rejection@^1.0.0: version "1.6.0" resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f" @@ -4556,6 +4642,11 @@ mem@^1.1.0: dependencies: mimic-fn "^1.0.0" +memoize-one@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906" + integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA== + memory-fs@^0.4.0, memory-fs@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -5948,6 +6039,15 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.6.2: + version "15.7.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + proxy-addr@~2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec" @@ -6092,9 +6192,10 @@ react-deep-force-update@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909" -react-dom@^16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044" +react-dom@16.4.2: + version "16.4.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4" + integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw== dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" @@ -6111,6 +6212,11 @@ react-hot-loader@^3.1.3: redbox-react "^1.3.6" source-map "^0.6.1" +react-is@^16.6.0, react-is@^16.8.1: + version "16.8.4" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2" + integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA== + react-list@^0.8.8: version "0.8.8" resolved "https://registry.yarnpkg.com/react-list/-/react-list-0.8.8.tgz#de2cb768dd210fb3e4835b9277f158e9cd403078" @@ -6140,15 +6246,26 @@ react-test-renderer@^16.0.0-0: object-assign "^4.1.1" prop-types "^15.6.0" -react@^16.2.0: - version "16.2.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" +react@16.4.2: + version "16.4.2" + resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f" + integrity sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg== dependencies: fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.0" +react@^16.8.4: + version "16.8.4" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768" + integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + scheduler "^0.13.4" + read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" @@ -6558,6 +6675,14 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" +scheduler@^0.13.4: + version "0.13.4" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298" + integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf" @@ -6999,6 +7124,33 @@ style-loader@^0.19.1: loader-utils "^1.0.2" schema-utils "^0.3.0" +styled-components@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.3.tgz#4472447208e618b57e84deaaeb6acd34a5e0fe9b" + integrity sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/is-prop-valid" "^0.7.3" + "@emotion/unitless" "^0.7.0" + babel-plugin-styled-components ">= 1" + css-to-react-native "^2.2.2" + memoize-one "^4.0.0" + prop-types "^15.5.4" + react-is "^16.6.0" + stylis "^3.5.0" + stylis-rule-sheet "^0.0.10" + supports-color "^5.5.0" + +stylis-rule-sheet@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" + integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== + +stylis@^3.5.0: + version "3.5.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" + integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== + sugarss@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.1.tgz#be826d9003e0f247735f92365dc3fd7f1bae9e44" @@ -7033,6 +7185,13 @@ supports-color@^5.3.0, supports-color@^5.4.0: dependencies: has-flag "^3.0.0" +supports-color@^5.5.0: + version "5.5.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" + integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== + dependencies: + has-flag "^3.0.0" + svgo@^0.7.0: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"