2019-09-10 11:28:56 +00:00
|
|
|
import React from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import { Text } from "../../text";
|
|
|
|
import isEqual from "lodash/isEqual";
|
|
|
|
|
|
|
|
const StyledDay = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex-basis: 14.2857%; /*(1/7*100%)*/
|
|
|
|
text-align: center;
|
2019-10-09 11:18:35 +00:00
|
|
|
line-height: 2.5em;
|
2019-09-11 06:28:46 +00:00
|
|
|
user-select: none;
|
2019-09-10 11:28:56 +00:00
|
|
|
${props =>
|
|
|
|
props.size === "base" ? "margin-top: 3px;" : "margin-top: 7.5px;"}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const DayContent = styled.div`
|
|
|
|
width: 32px;
|
|
|
|
height: 32px;
|
|
|
|
.textStyle {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
class Day extends React.Component {
|
|
|
|
shouldComponentUpdate(nextProps) {
|
|
|
|
const { day, size, onDayClick } = this.props;
|
|
|
|
if (
|
|
|
|
isEqual(day, nextProps.day) &&
|
|
|
|
size === nextProps.size &&
|
|
|
|
onDayClick === nextProps.onDayClick
|
|
|
|
) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
//console.log("Day render");
|
|
|
|
const { day, size, onDayClick } = this.props;
|
|
|
|
|
|
|
|
return (
|
2019-10-09 11:18:35 +00:00
|
|
|
<StyledDay size={size} className={`calendar_day ${day.disableClass}`}>
|
2019-09-10 11:28:56 +00:00
|
|
|
<DayContent
|
|
|
|
onClick={onDayClick.bind(this, day)}
|
|
|
|
className={day.className}
|
|
|
|
>
|
|
|
|
<Text.Body isBold={true} color="inherit;" className="textStyle">
|
|
|
|
{day.value}
|
|
|
|
</Text.Body>
|
|
|
|
</DayContent>
|
|
|
|
</StyledDay>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Day.propTypes = {
|
|
|
|
day: PropTypes.object,
|
|
|
|
size: PropTypes.string,
|
|
|
|
onDayClick: PropTypes.func
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Day;
|