maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use IconArrowHead on DateRangeInput

Browse source
This commit is contained in:
Jenni Nurmi 2018-11-14 14:55:15 +02:00
parent c0dd47fd02
commit 2338d0dd51
4 changed files with 13 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/FieldDateRangeInput/DateRangeInput.css
View file

@ -263,8 +263,7 @@
}
}
.rootNextMonthIcon,
.rootPreviousMonthIcon {
.arrowIcon {
stroke: var(--matterColorLight);
fill: var(--matterColorLight);
}

16
src/components/FieldDateRangeInput/DateRangeInput.js
View file

@ -21,8 +21,7 @@ import {
pickerEndDateToApiDate,
} from './DateRangeInput.helpers';
import NextMonthIcon from './NextMonthIcon';
import PreviousMonthIcon from './PreviousMonthIcon';
import { IconArrowHead } from '../../components';
import css from './DateRangeInput.css';
export const HORIZONTAL_ORIENTATION = 'horizontal';
@ -37,6 +36,15 @@ export const ANCHOR_LEFT = 'left';
// value and moves on to another input within this component.
const BLUR_TIMEOUT = 100;
// IconArrowHead component might not be defined if exposed directly to the file.
// This component is called before IconArrowHead component in components/index.js
const PrevIcon = props => (
<IconArrowHead {...props} direction="left" rootClassName={css.arrowIcon} />
);
const NextIcon = props => (
<IconArrowHead {...props} direction="right" rootClassName={css.arrowIcon} />
);
// Possible configuration options of React-dates
const defaultProps = {
initialDates: null, // Possible initial date passed for the component
@ -79,8 +87,8 @@ const defaultProps = {
hideKeyboardShortcutsPanel: true,
// navigation related props
navPrev: <PreviousMonthIcon />,
navNext: <NextMonthIcon />,
navPrev: <PrevIcon />,
navNext: <NextIcon />,
onPrevMonthClick() {},
onNextMonthClick() {},
transitionDuration: 200, // milliseconds between next month changes etc.

39
src/components/FieldDateRangeInput/NextMonthIcon.js
View file

@ -1,39 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import css from './DateRangeInput.css';
const NextMonthIcon = props => {
const { className, rootClassName } = props;
const classes = classNames(rootClassName || css.rootNextMonthIcon, className);
return (
<svg
className={classes}
width="9"
height="13"
viewBox="0 0 9 13"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.472 6.97c.26-.26.26-.68 0-.94L2.14.694c-.263-.26-.684-.26-.944 0-.26.26-.26.683 0 .943L6.056 6.5l-4.86 4.862c-.26.26-.26.683 0 .943.26.26.68.26.943 0L7.47 6.97z"
fillRule="evenodd"
/>
</svg>
);
};
const { string } = PropTypes;
NextMonthIcon.defaultProps = {
className: null,
rootClassName: null,
};
NextMonthIcon.propTypes = {
className: string,
rootClassName: string,
};
export default NextMonthIcon;

39
src/components/FieldDateRangeInput/PreviousMonthIcon.js
View file

@ -1,39 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import css from './DateRangeInput.css';
const PreviousMonthIcon = props => {
const { className, rootClassName } = props;
const classes = classNames(rootClassName || css.rootPreviousMonthIcon, className);
return (
<svg
className={classes}
width="9"
height="13"
viewBox="0 0 9 13"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.195 6.03c-.26.26-.26.68 0 .94l5.333 5.335c.262.26.683.26.943 0 .262-.26.262-.683 0-.943L2.61 6.5l4.86-4.862c.262-.26.262-.683 0-.943-.26-.26-.68-.26-.942 0L1.195 6.03z"
fillRule="evenodd"
/>
</svg>
);
};
const { string } = PropTypes;
PreviousMonthIcon.defaultProps = {
className: null,
rootClassName: null,
};
PreviousMonthIcon.propTypes = {
className: string,
rootClassName: string,
};
export default PreviousMonthIcon;