Skip to content

Commit

Permalink
Implemented to apply the class even if the same day is specified in h…
Browse files Browse the repository at this point in the history 
…ighlightDates.
  • Loading branch information
@gomo @alex-shamshurin
gomo authored and alex-shamshurin committed Jul 22, 2017
1 parent 9889f9c commit fa1abff
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 35 deletions.
14 changes: 9 additions & 5 deletions docs-site/bundle.js
View file
Expand Up @@ -56770,27 +56770,32 @@
day = _this$props.day,
highlightDates = _this$props.highlightDates;


if (!highlightDates) {
return _defineProperty({}, defaultClassName, false);
}

var classNames = {};
for (var i = 0, len = highlightDates.length; i < len; i++) {
var obj = highlightDates[i];
if (obj instanceof _moment2.default) {
if ((0, _date_utils.isSameDay)(day, obj)) {
return _defineProperty({}, defaultClassName, true);
classNames[defaultClassName] = true;
}
} else if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object') {
var keys = Object.keys(obj);
var arr = obj[keys[0]];
if (typeof keys[0] === 'string' && arr.constructor === Array) {
for (var k = 0, _len2 = arr.length; k < _len2; k++) {
if ((0, _date_utils.isSameDay)(day, arr[k])) {
return _defineProperty({}, keys[0], true);
classNames[keys[0]] = true;
}
}
}
}
}

return classNames;
}, _this.isInRange = function () {
var _this$props2 = _this.props,
day = _this$props2.day,
Expand Down Expand Up @@ -57232,10 +57237,9 @@
!hidePopper && _react2.default.createElement(
_reactPopper.Popper,
{
style: { zIndex: 1 },
className: 'react-datepicker-popper',
modifiers: popperModifiers,
placement: popperPlacement,
className: 'popper' },
placement: popperPlacement },
popperComponent
)
);
Expand Down
55 changes: 27 additions & 28 deletions docs-site/style.css
View file
@@ -1,43 +1,43 @@
.popper[data-placement^="bottom"] .react-datepicker__triangle, .popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
margin-left: -8px;
position: absolute; }
.popper[data-placement^="bottom"] .react-datepicker__triangle, .popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .popper[data-placement^="bottom"] .react-datepicker__triangle::before, .popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
box-sizing: content-box;
position: absolute;
border: 8px solid transparent;
height: 0;
width: 1px; }
.popper[data-placement^="bottom"] .react-datepicker__triangle::before, .popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
content: "";
z-index: -1;
border-width: 8px;
left: -8px;
border-bottom-color: #aeaeae; }

.popper[data-placement^="bottom"] .react-datepicker__triangle {
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
top: 0;
margin-top: -8px; }
.popper[data-placement^="bottom"] .react-datepicker__triangle, .popper[data-placement^="bottom"] .react-datepicker__triangle::before {
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
border-top: none;
border-bottom-color: #f0f0f0; }
.popper[data-placement^="bottom"] .react-datepicker__triangle::before {
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
top: -1px;
border-bottom-color: #aeaeae; }

.popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
bottom: 0;
margin-bottom: -8px; }
.popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
border-bottom: none;
border-top-color: #fff; }
.popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before {
bottom: -1px;
border-top-color: #aeaeae; }
Expand All @@ -59,23 +59,22 @@
position: absolute;
left: 50px; }

.popper[data-placement^="bottom"] {
margin-top: 10px; }

.popper[data-placement^="top"] {
margin-bottom: 6px; }

.popper[data-placement^="right"] {
margin-left: 8px; }
.popper[data-placement^="right"] .react-datepicker__triangle {
left: auto;
right: 42px; }

.popper[data-placement^="left"] {
margin-right: 8px; }
.popper[data-placement^="left"] .react-datepicker__triangle {
left: 42px;
right: auto; }
.react-datepicker-popper {
z-index: 1; }
.react-datepicker-popper[data-placement^="bottom"] {
margin-top: 10px; }
.react-datepicker-popper[data-placement^="top"] {
margin-bottom: 6px; }
.react-datepicker-popper[data-placement^="right"] {
margin-left: 8px; }
.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
left: auto;
right: 42px; }
.react-datepicker-popper[data-placement^="left"] {
margin-right: 8px; }
.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
left: 42px;
right: auto; }

.react-datepicker__header {
text-align: center;
Expand Down
9 changes: 7 additions & 2 deletions src/day.jsx
View file
Expand Up @@ -48,27 +48,32 @@ export default class Day extends React.Component {

getHighLightedClass = (defaultClassName) => {
const { day, highlightDates } = this.props

if (!highlightDates) {
return {[defaultClassName]: false}
}

const classNames = {}
for (let i = 0, len = highlightDates.length; i < len; i++) {
const obj = highlightDates[i]
if (obj instanceof moment) {
if (isSameDay(day, obj)) {
return {[defaultClassName]: true}
classNames[defaultClassName] = true
}
} else if (typeof obj === 'object') {
const keys = Object.keys(obj)
const arr = obj[keys[0]]
if (typeof keys[0] === 'string' && arr.constructor === Array) {
for (let k = 0, len = arr.length; k < len; k++) {
if (isSameDay(day, arr[k])) {
return {[keys[0]]: true}
classNames[keys[0]] = true
}
}
}
}
}

return classNames
}

isInRange = () => {
Expand Down
12 changes: 12 additions & 0 deletions test/day_test.js
View file
Expand Up @@ -119,6 +119,18 @@ describe('Day', () => {
const shallowDay = renderDay(day, { highlightDates })
expect(shallowDay.hasClass('testClassName')).to.equal(false)
})

it('should apply the highlighted classes even if the same day in highlighted array', () => {
const day = moment()
const highlightDay1 = {'fooClassName': [day.clone()]}
const highlightDay2 = {'barClassName': [day.clone()]}
const highlightDay3 = day.clone()
const highlightDates = [highlightDay1, highlightDay2, highlightDay3]
const shallowDay = renderDay(day, { highlightDates })
expect(shallowDay.hasClass('fooClassName')).to.equal(true)
expect(shallowDay.hasClass('barClassName')).to.equal(true)
expect(shallowDay.hasClass('react-datepicker__day--highlighted')).to.equal(true)
})
})
})

Expand Down

0 comments on commit fa1abff

Please sign in to comment.