(this.variantsContainer = ref)}
+ className={`
+ opuscapita_date-input__variants-container
+ ${showToTop ? 'opuscapita_date-input__variants-container--to-top' : ''}
+ `}
+ style={{
+ maxHeight: `${interpolatedStyle.x * 640}px`,
+ opacity: easeOutCubic(interpolatedStyle.x)
+ }}
+ >
+ {variantsElement}
+
)}
) : null;
diff --git a/src/client/components/DateInputField/DateInputField.less b/src/client/components/DateInputField/DateInputField.less
index 249739f3..9fb7798a 100644
--- a/src/client/components/DateInputField/DateInputField.less
+++ b/src/client/components/DateInputField/DateInputField.less
@@ -7,4 +7,10 @@
&::-ms-clear {
display: none !important;
}
+
+ &::placeholder { color: #999; }
+ &::-moz-placeholder { color: #999; }
+ &::-webkit-input-placeholder { color: #999; }
+ &:-ms-input-placeholder { color: #999; }
+ &::-ms-input-placeholder { color: #999; }
}
diff --git a/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md b/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md
index a1d3bc13..260ae42d 100644
--- a/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md
+++ b/src/client/components/DatePicker/DatePicker.DOCUMENTATION.md
@@ -31,17 +31,6 @@ See react-day-picker [methods reference](http://react-day-picker.js.org/APIMetho
### Code Example
```jsx
- (this.container = el)}
{ ...commonProps }
>
diff --git a/src/client/components/DatePicker/DatePicker.spec.js b/src/client/components/DatePicker/DatePicker.spec.js
index 6062b81d..ef081f0a 100644
--- a/src/client/components/DatePicker/DatePicker.spec.js
+++ b/src/client/components/DatePicker/DatePicker.spec.js
@@ -22,12 +22,6 @@ describe('
', () => {
expect(wrapper.hasClass('test-class-name')).to.be.true;
});
- it('should have picker-container', () => {
- let wrapper = mount(
);
- let pickerContainers = document.getElementsByClassName('opuscapita_date-picker__picker-container');
- expect(pickerContainers).to.have.lengthOf(1);
- });
-
it.skip('+ should pass specific DayPicker props to it', () => {
let wrapper = mount(
+
+
+
+
+
+
diff --git a/src/client/components/DateRangeInput/DateRangeInput.SCOPE.react.js b/src/client/components/DateRangeInput/DateRangeInput.SCOPE.react.js
index 733663f6..3f8f6350 100644
--- a/src/client/components/DateRangeInput/DateRangeInput.SCOPE.react.js
+++ b/src/client/components/DateRangeInput/DateRangeInput.SCOPE.react.js
@@ -5,6 +5,9 @@
import React, { Component } from 'react';
import { showroomScopeDecorator } from '@opuscapita/react-showroom-client';
+import { Modal } from 'react-bootstrap';
+
+window.Modal = Modal;
@showroomScopeDecorator
@@ -16,10 +19,19 @@ class DateRangeInputScope extends Component {
value1: [null, null],
value2: [new Date(), new Date()],
value3: [null, null],
- value4: [null, null]
+ value4: [null, null],
+ openModal: false,
};
}
+ handleOpenModal = () => {
+ this.setState({ openModal: true });
+ }
+
+ handleHideModal = () => {
+ this.setState({ openModal: false });
+ }
+
handleChange1(value) {
this.setState({ value1: value });
}
diff --git a/src/client/components/DateRangeInput/DateRangeInput.less b/src/client/components/DateRangeInput/DateRangeInput.less
index 5359887e..00199a84 100644
--- a/src/client/components/DateRangeInput/DateRangeInput.less
+++ b/src/client/components/DateRangeInput/DateRangeInput.less
@@ -12,12 +12,22 @@
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
overflow: hidden;
position: absolute;
- z-index: 900;
+ z-index: 9999;
+
+ bottom: -4px;
+ transform: translate(0, 100%);
+}
+
+.opuscapita_date-range-input__picker-container {
+ left: 0;
}
.opuscapita_date-range-input__variants-container {
+ right: 0;
+ left: auto;
white-space: nowrap;
}
+
.opuscapita_date-range-input__picker-container:focus {
outline: none;
}
@@ -31,7 +41,7 @@
position: absolute;
top: 0;
right: 1ch;
- z-index: 10;
+ z-index: 1;
}
.opuscapita_date-range-input__input-field {
@@ -105,8 +115,20 @@
display: inline-flex;
align-items: center;
justify-content: center;
- z-index: 10;
+ z-index: 1;
pointer-events: none;
color: #aaa;
padding-right: 24px;
}
+
+.opuscapita_date-range-input__picker-container--to-left {
+ left: auto;
+ right: 0;
+}
+
+.opuscapita_date-range-input__picker-container--to-top,
+.opuscapita_date-range-input__variants-container--to-top {
+ bottom: auto;
+ top: -4px;
+ transform: translate(0, -100%);
+}
diff --git a/src/client/components/DateRangeInput/DateRangeInput.react.js b/src/client/components/DateRangeInput/DateRangeInput.react.js
index 729e1b6c..627ecc23 100644
--- a/src/client/components/DateRangeInput/DateRangeInput.react.js
+++ b/src/client/components/DateRangeInput/DateRangeInput.react.js
@@ -9,8 +9,7 @@ import isEqual from 'lodash/isEqual';
import dayjs from '../../dayjs';
import { spring, presets, Motion } from 'react-motion';
import getMessage from '../translations';
-import { Portal } from 'react-portal';
-import { getCoords, splitProps, zeroTime } from '../utils';
+import { splitProps, zeroTime } from '../utils';
let springPreset = presets.gentle;
let easeOutCubic = (t) => (--t) * t * t + 1; // eslint-disable-line no-param-reassign
@@ -66,7 +65,7 @@ let defaultProps = {
value: [null, null],
variants: [
{
- getLabel: (locale) => getMessage(locale, 'previousWeek'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.previousWeek'),
// TODO remove ternary operator below. Monitor this issue: https://github.com/iamkun/dayjs/issues/215
getValue: (locale) => locale === 'en' ? [
dayjs().locale(locale).subtract(7, 'days').startOf('week').toDate(),
@@ -77,7 +76,7 @@ let defaultProps = {
]
},
{
- getLabel: (locale) => getMessage(locale, 'thisWeek'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.thisWeek'),
// TODO remove ternary operator below. Monitor this issue: https://github.com/iamkun/dayjs/issues/215
getValue: (locale) => locale === 'en' ? [
dayjs().locale(locale).startOf('week').toDate(),
@@ -88,7 +87,7 @@ let defaultProps = {
]
},
{
- getLabel: (locale) => getMessage(locale, 'nextWeek'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.nextWeek'),
// TODO remove ternary operator below. Monitor this issue: https://github.com/iamkun/dayjs/issues/215
getValue: (locale) => locale === 'en' ? [
dayjs().locale(locale).add(7, 'days').startOf('week').toDate(),
@@ -99,28 +98,28 @@ let defaultProps = {
]
},
{
- getLabel: (locale) => getMessage(locale, 'previousMonth'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.previousMonth'),
getValue: (locale) => [
dayjs().locale(locale).subtract(1, 'month').startOf('month').toDate(),
dayjs().locale(locale).subtract(1, 'month').endOf('month').toDate()
]
},
{
- getLabel: (locale) => getMessage(locale, 'last30Days'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.last30Days'),
getValue: (locale) => [
dayjs().locale(locale).subtract(30, 'days').toDate(),
dayjs().locale(locale).toDate()
]
},
{
- getLabel: (locale) => getMessage(locale, 'thisMonth'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.thisMonth'),
getValue: (locale) => [
dayjs().locale(locale).startOf('month').toDate(),
dayjs().locale(locale).endOf('month').toDate()
]
},
{
- getLabel: (locale) => getMessage(locale, 'nextMonth'),
+ getLabel: (locale) => getMessage(locale, 'common.DateRangeInput.nextMonth'),
getValue: (locale) => [
dayjs().locale(locale).add(1, 'month').startOf('month').toDate(),
dayjs().locale(locale).add(1, 'month').endOf('month').toDate()
@@ -355,6 +354,9 @@ class DateRangeInput extends Component {
let { enteredTo, error, focused, showPicker, showVariants } = this.state;
let dayjsCompatibleDateFormat = dateFormat.replace(/d/g, 'D').replace(/y/g, 'Y');
+ let showToTopClassName = showToTop ? 'opuscapita_date-range-input__picker-container--to-top' : '';
+ let showToLeftClassName = showToLeft ? 'opuscapita_date-range-input__picker-container--to-left' : '';
+
let pickerElement = (
{interpolatedStyle => (
-
- (this.pickerContainer = ref)}
- className={`opuscapita_date-range-input__picker-container`}
- style={{
- maxHeight: `${interpolatedStyle.x * 640}px`,
- opacity: easeOutCubic(interpolatedStyle.x),
- top: `${top}px`,
- left: `${left}px`,
- transform: `translate(${showToLeft ? '-100%' : '0'}, ${showToTop ? '-100%' : '0'})`
- }}
- >
- {pickerElement}
-
-
+ (this.pickerContainer = ref)}
+ className={`opuscapita_date-range-input__picker-container ${showToTopClassName} ${showToLeftClassName}`}
+ style={{
+ maxHeight: `${interpolatedStyle.x * 640}px`,
+ opacity: easeOutCubic(interpolatedStyle.x)
+ }}
+ >
+ {pickerElement}
+
)}
);
@@ -425,21 +420,19 @@ class DateRangeInput extends Component {
style={{ x: showVariants ? spring(1, springPreset) : spring(0, springPreset) }}
>
{interpolatedStyle => (
-
- (this.variantsContainer = ref)}
- className={`opuscapita_date-range-input__variants-container`}
- style={{
- maxHeight: `${interpolatedStyle.x * 640}px`,
- opacity: easeOutCubic(interpolatedStyle.x),
- top: `${top}px`,
- left: `${alwaysLeft}px`,
- transform: `translate(-100%, ${showToTop ? '-100%' : '0'})`
- }}
- >
- {variantsElement}
-
-
+ (this.variantsContainer = ref)}
+ className={`
+ opuscapita_date-range-input__variants-container
+ ${showToTop ? 'opuscapita_date-range-input__variants-container--to-top' : ''}
+ `}
+ style={{
+ maxHeight: `${interpolatedStyle.x * 640}px`,
+ opacity: easeOutCubic(interpolatedStyle.x)
+ }}
+ >
+ {variantsElement}
+
)}
) : null;
@@ -450,7 +443,7 @@ class DateRangeInput extends Component {
tabIndex="-1"
onClick={this.handleReset}
disabled={disabled}
- title={getMessage(locale, 'clearValue')}
+ title={getMessage(locale, 'common.DateInput.clearValue')}
>
✕
diff --git a/src/client/components/DayPicker/DayPicker.react.js b/src/client/components/DayPicker/DayPicker.react.js
index fdf1e87f..306f5cba 100644
--- a/src/client/components/DayPicker/DayPicker.react.js
+++ b/src/client/components/DayPicker/DayPicker.react.js
@@ -23,7 +23,7 @@ let propTypes = {
let defaultProps = {
className: '',
dayPickerRef: () => {},
- getTodayButtonLabel: (locale) => getMessage(locale, 'today'),
+ getTodayButtonLabel: (locale) => getMessage(locale, 'common.DateInput.today'),
hideTodayButton: false,
isRange: false,
labels: ReactDayPicker.defaultProps.labels,
diff --git a/src/client/components/translations.js b/src/client/components/translations.js
index ee238e1e..d7a98143 100644
--- a/src/client/components/translations.js
+++ b/src/client/components/translations.js
@@ -1,87 +1,81 @@
const translations = {
en: {
- selectDateRange: 'Select date range',
- today: 'Today',
- yesterday: 'Yesterday',
- tomorrow: 'Tomorrow',
- previousWeek: 'Previous week',
- nextWeek: 'Next week',
- thisWeek: 'This week',
- previousMonth: 'Previous month',
- last30Days: 'Last 30 days',
- thisMonth: 'This month',
- nextMonth: 'Next month',
- clearValue: 'Clear value'
+ 'common.DateInput.today': 'Today',
+ 'common.DateInput.yesterday': 'Yesterday',
+ 'common.DateInput.tomorrow': 'Tomorrow',
+ 'common.DateRangeInput.previousWeek': 'Previous week',
+ 'common.DateRangeInput.nextWeek': 'Next week',
+ 'common.DateRangeInput.thisWeek': 'This week',
+ 'common.DateRangeInput.previousMonth': 'Previous month',
+ 'common.DateRangeInput.last30Days': 'Last 30 days',
+ 'common.DateRangeInput.thisMonth': 'This month',
+ 'common.DateRangeInput.nextMonth': 'Next month',
+ 'common.DateInput.clearValue': 'Clear value'
},
de: {
- selectDateRange: 'Datumsbereich auswählen',
- today: 'Heute',
- yesterday: 'Gestern',
- tomorrow: 'Morgen',
- previousWeek: 'Vorherige Woche',
- nextWeek: 'Nächste Woche',
- thisWeek: 'Diese Woche',
- previousMonth: 'Vorheriger Monat',
- last30Days: 'Letzte 30 Tagen',
- thisMonth: 'Dieser Monat',
- nextMonth: 'Nächster Monat',
- clearValue: 'Inhalt löschen'
+ 'common.DateInput.today': 'Heute',
+ 'common.DateInput.yesterday': 'Gestern',
+ 'common.DateInput.tomorrow': 'Morgen',
+ 'common.DateRangeInput.previousWeek': 'Vorherige Woche',
+ 'common.DateRangeInput.nextWeek': 'Nächste Woche',
+ 'common.DateRangeInput.thisWeek': 'Diese Woche',
+ 'common.DateRangeInput.previousMonth': 'Vorheriger Monat',
+ 'common.DateRangeInput.last30Days': 'Letzte 30 Tagen',
+ 'common.DateRangeInput.thisMonth': 'Dieser Monat',
+ 'common.DateRangeInput.nextMonth': 'Nächster Monat',
+ 'common.DateInput.clearValue': 'Inhalt löschen'
},
ru: {
- selectDateRange: 'Выберите диапазон дат',
- today: 'Сегодня',
- yesterday: 'Вчера',
- tomorrow: 'Завтра',
- previousWeek: 'Предыдущая неделя',
- nextWeek: 'Следующая неделя',
- thisWeek: 'Эта неделя',
- previousMonth: 'Предыдущий месяц',
- last30Days: 'Последние 30 дней',
- thisMonth: 'Этот месяц',
- nextMonth: 'Следующий месяц',
- clearValue: ''
+ 'common.DateInput.today': 'Сегодня',
+ 'common.DateInput.yesterday': 'Вчера',
+ 'common.DateInput.tomorrow': 'Завтра',
+ 'common.DateRangeInput.previousWeek': 'Предыдущая неделя',
+ 'common.DateRangeInput.nextWeek': 'Следующая неделя',
+ 'common.DateRangeInput.thisWeek': 'Эта неделя',
+ 'common.DateRangeInput.previousMonth': 'Предыдущий месяц',
+ 'common.DateRangeInput.last30Days': 'Последние 30 дней',
+ 'common.DateRangeInput.thisMonth': 'Этот месяц',
+ 'common.DateRangeInput.nextMonth': 'Следующий месяц',
+ 'common.DateInput.clearValue': ''
},
fi: {
- selectDateRange: 'Valitse päivämääräväli',
- today: 'Tänään',
- yesterday: 'Eilen',
- tomorrow: 'Huomenna',
- previousWeek: 'Edellinen viikko',
- nextWeek: 'Seuraava viikko',
- thisWeek: 'Tämä viikko',
- previousMonth: 'Edellinen kuukausi',
- last30Days: 'Edelliset 30 päivää',
- thisMonth: 'Tämä kuukausi',
- nextMonth: 'Seuraava kuukausi',
- clearValue: ''
+ 'common.DateInput.today': 'Tänään',
+ 'common.DateInput.yesterday': 'Eilen',
+ 'common.DateInput.tomorrow': 'Huomenna',
+ 'common.DateRangeInput.previousWeek': 'Edellinen viikko',
+ 'common.DateRangeInput.nextWeek': 'Seuraava viikko',
+ 'common.DateRangeInput.thisWeek': 'Tämä viikko',
+ 'common.DateRangeInput.previousMonth': 'Edellinen kuukausi',
+ 'common.DateRangeInput.last30Days': 'Edelliset 30 päivää',
+ 'common.DateRangeInput.thisMonth': 'Tämä kuukausi',
+ 'common.DateRangeInput.nextMonth': 'Seuraava kuukausi',
+ 'common.DateInput.clearValue': ''
},
no: {
- selectDateRange: 'Velg datoområde',
- today: 'I dag',
- yesterday: 'I går',
- tomorrow: 'I morgen',
- previousWeek: 'Forrige uke',
- nextWeek: 'Neste uke',
- thisWeek: 'Denne uken',
- previousMonth: 'Foregående måned',
- last30Days: 'Siste 30 dager',
- thisMonth: 'Denne måneden',
- nextMonth: 'Neste måned',
- clearValue: ''
+ 'common.DateInput.today': 'I dag',
+ 'common.DateInput.yesterday': 'I går',
+ 'common.DateInput.tomorrow': 'I morgen',
+ 'common.DateRangeInput.previousWeek': 'Forrige uke',
+ 'common.DateRangeInput.nextWeek': 'Neste uke',
+ 'common.DateRangeInput.thisWeek': 'Denne uken',
+ 'common.DateRangeInput.previousMonth': 'Foregående måned',
+ 'common.DateRangeInput.last30Days': 'Siste 30 dager',
+ 'common.DateRangeInput.thisMonth': 'Denne måneden',
+ 'common.DateRangeInput.nextMonth': 'Neste måned',
+ 'common.DateInput.clearValue': ''
},
sv: {
- selectDateRange: 'Välj datumintervall',
- today: 'Idag',
- yesterday: 'Igår',
- tomorrow: 'Imorgon',
- previousWeek: 'Föregående vecka',
- nextWeek: 'Nästa vecka',
- thisWeek: 'Denna vecka',
- previousMonth: 'Föregående månad',
- last30Days: 'SSenaste 30 dagarna',
- thisMonth: 'Denna månad',
- nextMonth: 'Nästa månad',
- clearValue: ''
+ 'common.DateInput.today': 'Idag',
+ 'common.DateInput.yesterday': 'Igår',
+ 'common.DateInput.tomorrow': 'Imorgon',
+ 'common.DateRangeInput.previousWeek': 'Föregående vecka',
+ 'common.DateRangeInput.nextWeek': 'Nästa vecka',
+ 'common.DateRangeInput.thisWeek': 'Denna vecka',
+ 'common.DateRangeInput.previousMonth': 'Föregående månad',
+ 'common.DateRangeInput.last30Days': 'SSenaste 30 dagarna',
+ 'common.DateRangeInput.thisMonth': 'Denna månad',
+ 'common.DateRangeInput.nextMonth': 'Nästa månad',
+ 'common.DateInput.clearValue': ''
}
};
diff --git a/src/client/dayjs/index.js b/src/client/dayjs/index.js
index 739df2b5..8a86041b 100644
--- a/src/client/dayjs/index.js
+++ b/src/client/dayjs/index.js
@@ -1,5 +1,6 @@
import dayjs from 'dayjs';
import en from './locales/en';
+import es from './locales/es';
import de from './locales/de';
import fi from './locales/fi';
import no from './locales/no';
@@ -8,6 +9,7 @@ import sv from './locales/sv';
const locales = {
en,
+ es,
de,
fi,
no,
diff --git a/src/client/dayjs/locales/es.js b/src/client/dayjs/locales/es.js
new file mode 100644
index 00000000..041aade4
--- /dev/null
+++ b/src/client/dayjs/locales/es.js
@@ -0,0 +1,12 @@
+export default {
+ name: 'es',
+ weekdays: 'Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado'.split('_'),
+ months: 'Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre'.split('_'),
+ ordinal: n => `${n}°`,
+ // https://github.com/moment/moment/blob/develop/locale/es.js
+ weekdaysMin: 'Do_Lu_Ma_Mi_Ju_Vi_Sá'.split('_'),
+ week: {
+ dow: 1, // Monday is the first day of the week.
+ doy: 4 // The week that contains Jan 4th is the first week of the year.
+ }
+}