Web: Components: added disable style, fixed min-max value, update README.md file
This commit is contained in:
parent
4a83ed26cb
commit
20d3e05d30
@ -12,6 +12,15 @@ const HoverStyle = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const DisabledStyle = css`
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const ComboBoxStyle = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -25,10 +34,9 @@ const ComboBoxDateStyle = styled.div`
|
||||
`;
|
||||
|
||||
const CalendarStyle = styled.div`
|
||||
min-width: 280px;
|
||||
|
||||
/*width: 100%;*/
|
||||
width: 325px;
|
||||
min-width: 280px;
|
||||
width: ${props => props.scaled ? "100%;" : "325px;"}
|
||||
|
||||
border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
@ -43,7 +51,11 @@ const CalendarStyle = styled.div`
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
${props => props.disabled ? "pointer-events: none;" : "pointer-events: auto;"}
|
||||
${props => props.disabled ?
|
||||
`${DisabledStyle}
|
||||
`
|
||||
: "pointer-events: auto;"
|
||||
}
|
||||
|
||||
.calendar-month {
|
||||
${HoverStyle}
|
||||
@ -51,10 +63,17 @@ const CalendarStyle = styled.div`
|
||||
|
||||
.calendar-month_neighboringMonth {
|
||||
color: #ECEEF1;
|
||||
|
||||
${HoverStyle}
|
||||
&:hover {color: #333;}
|
||||
}
|
||||
|
||||
.calendar-month_disabled {
|
||||
${DisabledStyle}
|
||||
color: #ECEEF1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.calendar-month_weekend {
|
||||
color: #A3A9AE;
|
||||
${HoverStyle}
|
||||
@ -70,11 +89,6 @@ const CalendarStyle = styled.div`
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar-month_disabled {
|
||||
/*color:red !important;*/
|
||||
pointer-events: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Weekday = styled.div`
|
||||
@ -118,8 +132,7 @@ class Calendar extends Component {
|
||||
state = {
|
||||
months: moment.months(),
|
||||
openToDate: this.props.openToDate,
|
||||
selectedDate: this.props.selectedDate,
|
||||
|
||||
selectedDate: this.props.selectedDate
|
||||
};
|
||||
|
||||
onSelectYear = (value) => {
|
||||
@ -153,50 +166,43 @@ class Calendar extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
getListMonth = (minMonth, maxMonth) => {
|
||||
const monthList = [];
|
||||
for (let i = minMonth; i <= maxMonth; i++) {
|
||||
monthList.push({ key: `${i}`, label: `${this.state.months[i]}` });
|
||||
}
|
||||
return monthList;
|
||||
}
|
||||
|
||||
getArrayMonth = () => {
|
||||
getListMonth = () => {
|
||||
const minDate = this.props.minDate;
|
||||
const maxDate = this.props.maxDate;
|
||||
|
||||
let disabled = false;
|
||||
const monthList = [];
|
||||
|
||||
const month = this.state.months.map(item => item.charAt(0).toLocaleUpperCase() + item.slice(1));
|
||||
//This function is not optimal for all languages. // It'is bad...
|
||||
|
||||
for (let i = 0; i <= 11; i++) {
|
||||
monthList.push({ key: `${i}`, label: `${month[i]}`, disabled: disabled });
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
if (this.state.openToDate.getFullYear() === minDate.getFullYear()) {
|
||||
return this.getListMonth(minDate.getMonth(), 11);
|
||||
while (i != minDate.getMonth()) {
|
||||
monthList[i].disabled = true;
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
else if (this.state.openToDate.getFullYear() === maxDate.getFullYear()) {
|
||||
return this.getListMonth(0, maxDate.getMonth());
|
||||
i = 11;
|
||||
if (this.state.openToDate.getFullYear() === maxDate.getFullYear()) {
|
||||
while (i != maxDate.getMonth()) {
|
||||
monthList[i].disabled = true;
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
else if (minDate.getFullYear() !== maxDate.getFullYear()) {
|
||||
return this.getListMonth(0, 11);
|
||||
} else { return this.getListMonth(minDate.getMonth(), maxDate.getMonth()); }
|
||||
return monthList;
|
||||
}
|
||||
|
||||
getCurrentMonth = () => {
|
||||
const openToDate = this.state.openToDate;
|
||||
const month = this.getArrayMonth();
|
||||
const month = this.getListMonth();
|
||||
const selectedMonth = month.find(x => x.key == openToDate.getMonth());
|
||||
|
||||
const minMonth = month.find(x => x.key === "0");
|
||||
const maxMonth = month.find(x => x.key === "11");
|
||||
let nearMonth;
|
||||
|
||||
if (!minMonth) { nearMonth = month[0]; }
|
||||
else if (!maxMonth) { nearMonth = month[month.length - 1]; }
|
||||
|
||||
if (!selectedMonth) {
|
||||
const key = nearMonth.key;
|
||||
const currentMonth = Number(key) + 1;
|
||||
const date = new Date(openToDate.getFullYear() + "/" + currentMonth + "/" + "01");
|
||||
this.state.openToDate = date;
|
||||
}
|
||||
return selectedMonth ? selectedMonth : nearMonth;
|
||||
return selectedMonth;
|
||||
}
|
||||
|
||||
getArrayYears = () => {
|
||||
@ -243,7 +249,9 @@ class Calendar extends Component {
|
||||
let className = "";
|
||||
for (let i = 0; i < weekdays.length; i++) {
|
||||
(i >= 5) ? className = "calendar-month_weekdays_weekend" : className = "calendar-month_weekdays";
|
||||
arrayWeekDays.push(<Weekday className={className} key={weekdays[i]}><AbbrDay>{weekdays[i]}</AbbrDay></Weekday>)
|
||||
arrayWeekDays.push(<Weekday className={className} key={weekdays[i]}>
|
||||
<AbbrDay>{(weekdays[i].charAt(0).toUpperCase() + weekdays[i].slice(1))}</AbbrDay></Weekday>)
|
||||
//This function is not optimal for all languages. // It'is bad...
|
||||
}
|
||||
return arrayWeekDays;
|
||||
}
|
||||
@ -288,14 +296,14 @@ class Calendar extends Component {
|
||||
|
||||
//Disable max days in month
|
||||
let maxDay, minDay;
|
||||
disableClass= null;
|
||||
disableClass = null;
|
||||
if (openToDate.getFullYear() === maxDate.getFullYear() && openToDate.getMonth() >= maxDate.getMonth()) {
|
||||
if (openToDate.getMonth() === maxDate.getMonth()) { maxDay = maxDate.getDate(); }
|
||||
else { maxDay = null; }
|
||||
}
|
||||
|
||||
//Disable min days in month
|
||||
else if (openToDate.getFullYear() === minDate.getFullYear() && openToDate.getMonth() >= minDate.getMonth()) {
|
||||
if (openToDate.getFullYear() === minDate.getFullYear() && openToDate.getMonth() >= minDate.getMonth()) {
|
||||
if (openToDate.getMonth() === minDate.getMonth()) { minDay = minDate.getDate(); }
|
||||
else { minDay = null; }
|
||||
}
|
||||
@ -311,7 +319,7 @@ class Calendar extends Component {
|
||||
else if (i === (seven - prevMonthDays)) { seven += 7; className = "calendar-month_weekend"; }
|
||||
else { className = "calendar-month"; }
|
||||
if (i === dateNow && this.compareDays()) { className = "calendar-month_selected-day" }
|
||||
if (i > maxDay || i < minDay) { disableClass = "calendar-month_disabled"; }
|
||||
if (i > maxDay || i < minDay) { disableClass = "calendar-month_disabled"; className = "calendar-month_disabled" }
|
||||
else { disableClass = null; }
|
||||
|
||||
arrayDays.push(
|
||||
@ -342,7 +350,7 @@ class Calendar extends Component {
|
||||
<Day key={keys++} className={disableClass} >
|
||||
<AbbrDay
|
||||
onClick={this.onDayClick.bind(this, i + 1)}
|
||||
className="calendar-month_neighboringMonth" >
|
||||
className={className} >
|
||||
{nextDay++}
|
||||
</AbbrDay>
|
||||
</Day>
|
||||
@ -351,24 +359,35 @@ class Calendar extends Component {
|
||||
return arrayDays;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
moment.locale(this.props.locale);
|
||||
this.state.months = moment.months();
|
||||
if (this.props.selectedDate !== prevProps.selectedDate ||
|
||||
this.props.selectedDate !== prevProps.selectedDate) {
|
||||
this.setState({
|
||||
selectedDate: this.props.selectedDate,
|
||||
openToDate: this.props.openToDate
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("render");
|
||||
|
||||
moment.locale(this.props.locale);
|
||||
this.state.months = moment.months();
|
||||
const disabled = this.props.disabled;
|
||||
const dropDownSizeMonth = this.getArrayMonth().length > 4 ? 180 : undefined;
|
||||
const dropDownSizeYear = this.getArrayYears().length > 4 ? 180 : undefined;
|
||||
const scaled = this.props.scaled;
|
||||
const dropDownSizeMonth = this.getListMonth().length > 4 ? 180 : undefined;
|
||||
const dropDownSizeYear = this.getListMonth().length > 4 ? 180 : undefined;
|
||||
|
||||
return (
|
||||
<CalendarStyle color={this.props.themeColor} disabled={disabled}>
|
||||
<CalendarStyle scaled={scaled} color={this.props.themeColor} disabled={disabled}>
|
||||
<ComboBoxStyle>
|
||||
<ComboBox
|
||||
scaled={true}
|
||||
dropDownMaxHeight={dropDownSizeMonth}
|
||||
onSelect={this.onSelectMonth.bind(this)}
|
||||
selectedOption={this.getCurrentMonth()}
|
||||
options={this.getArrayMonth()}
|
||||
options={this.getListMonth()}
|
||||
isDisabled={disabled}
|
||||
/>
|
||||
<ComboBoxDateStyle>
|
||||
@ -377,7 +396,7 @@ class Calendar extends Component {
|
||||
dropDownMaxHeight={dropDownSizeYear}
|
||||
onSelect={this.onSelectYear.bind(this)}
|
||||
selectedOption={this.getCurrentYear()}
|
||||
options={this.getArrayYears()}
|
||||
options={this.getArrayYears().reverse()}
|
||||
isDisabled={disabled}
|
||||
/>
|
||||
</ComboBoxDateStyle>
|
||||
@ -404,7 +423,7 @@ Calendar.propTypes = {
|
||||
maxDate: PropTypes.instanceOf(Date),
|
||||
locale: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
//size: PropTypes.string
|
||||
scaled: PropTypes.bool
|
||||
}
|
||||
|
||||
Calendar.defaultProps = {
|
||||
@ -414,7 +433,6 @@ Calendar.defaultProps = {
|
||||
maxDate: new Date("3000/01/01"),
|
||||
themeColor: '#ED7309',
|
||||
locale: moment.locale(),
|
||||
//size: 'base'
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
@ -2,31 +2,30 @@
|
||||
|
||||
#### Description
|
||||
|
||||
Custom date input
|
||||
Custom calendar
|
||||
|
||||
#### Usage
|
||||
|
||||
```js
|
||||
import { Calendar } from 'asc-web-components';
|
||||
|
||||
<Calendar
|
||||
<NewCalendar
|
||||
onChange={date => {
|
||||
console.log(date);
|
||||
action('Selected date')(date);
|
||||
}}
|
||||
disabled={false}
|
||||
themeColor='#ED7309'
|
||||
selectedDate={new Date()}
|
||||
openToDate={new Date()}
|
||||
minDate={new Date("2018/02/01")}
|
||||
maxDate={new Date("2019/09/01")}
|
||||
language='en'
|
||||
size = 'big'
|
||||
disabled={boolean('disabled', false)}
|
||||
themeColor={color('themeColor', '#ED7309')}
|
||||
selectedDate={myDateKnob('selectedDate', new Date())}
|
||||
openToDate={myDateKnob('openToDate', new Date())}
|
||||
minDate={myDateKnob('minDate', new Date("1970/01/01"))}
|
||||
maxDate={myDateKnob('maxDate', new Date("3000/01/01"))}
|
||||
locale={select('location', locales, 'en')}
|
||||
scaled = {boolean('scaled', false)}
|
||||
/>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
http://projects.wojtekmaj.pl/react-calendar/
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | -------- | :------: | ------ | ------- | --------------------------------------- |
|
||||
@ -37,5 +36,5 @@ http://projects.wojtekmaj.pl/react-calendar/
|
||||
| `openToDate` | `date` | - | - | (today) | The beginning of a period that shall be displayed by default |
|
||||
| `minDate` | `date` | - | - | `new Date("1970/01/01")` | Minimum date that the user can select. |
|
||||
| `maxDate` | `date` | - | - | `new Date("3000/01/01")` | Maximum date that the user can select. |
|
||||
| `language` | `string` | - | - | User's browser settings | Indicates the input field has an error |
|
||||
| `size` | `oneOf` | - | `base, big` | `base` | Selected calendar size |
|
||||
| `locale` | `string` | - | - | User's browser settings | Browser locale |
|
||||
| `scaled` | `bool` | - | | | Selected calendar size |
|
||||
@ -8,6 +8,7 @@ import { NewCalendar } from 'asc-web-components';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import moment from 'moment';
|
||||
import 'moment/min/locales'
|
||||
//import { text } from '@storybook/addon-knobs/dist/deprecated';
|
||||
|
||||
|
||||
function myDateKnob(name, defaultValue) {
|
||||
@ -30,9 +31,10 @@ storiesOf('Components|Input', module)
|
||||
themeColor={color('themeColor', '#ED7309')}
|
||||
selectedDate={myDateKnob('selectedDate', new Date())}
|
||||
openToDate={myDateKnob('openToDate', new Date())}
|
||||
minDate={myDateKnob('minDate', new Date("2010/05/15"))}
|
||||
maxDate={myDateKnob('maxDate', new Date("2020/09/15"))}
|
||||
minDate={myDateKnob('minDate', new Date("1970/01/01"))}
|
||||
maxDate={myDateKnob('maxDate', new Date("3000/01/01"))}
|
||||
locale={select('location', locales, 'en')}
|
||||
scaled = {boolean('scaled', false)}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user