orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
657 lines (654 loc) • 22.3 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
import momentPropTypes from "react-moment-proptypes";
import omit from "lodash/omit";
import "react-dates/lib/css/_datepicker.css";
import "react-dates/initialize";
import { Small } from "../Typography";
import { DateRangePicker, SingleDatePicker } from "react-dates";
import styled from "styled-components";
import { themeGet } from "@styled-system/theme-get";
import DateRangePickerShape from "react-dates/lib/shapes/DateRangePickerShape";
import { DateRangePickerPhrases } from "react-dates/lib/defaultPhrases";
import { START_DATE, END_DATE, HORIZONTAL_ORIENTATION, ANCHOR_LEFT, NAV_POSITION_TOP } from "react-dates/lib/constants";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const defaultProps = {
autoFocus: false,
autoFocusEndDate: false,
initialStartDate: null,
initialEndDate: null,
// input related props
startDateId: START_DATE,
startDatePlaceholderText: "Start Date",
endDateId: END_DATE,
endDatePlaceholderText: "End Date",
disabled: false,
required: false,
screenReaderInputMessage: "",
showClearDates: false,
showDefaultInputIcon: false,
customInputIcon: null,
customArrowIcon: null,
customCloseIcon: null,
block: false,
small: false,
regular: false,
invalid: false,
// calendar presentation and interaction related props
renderMonthText: null,
orientation: HORIZONTAL_ORIENTATION,
anchorDirection: ANCHOR_LEFT,
horizontalMargin: 0,
withPortal: false,
withFullScreenPortal: false,
initialVisibleMonth: null,
numberOfMonths: 2,
keepOpenOnDateSelect: false,
reopenPickerOnClearDates: false,
isRTL: false,
// navigation related props
navPosition: NAV_POSITION_TOP,
navPrev: null,
navNext: null,
onPrevMonthClick() {},
onNextMonthClick() {},
onClose() {},
// day presentation and interaction related props
renderCalendarDay: undefined,
renderDayContents: null,
minimumNights: 1,
enableOutsideDays: false,
isDayBlocked: () => false,
isOutsideRange: () => false,
isDayHighlighted: () => false,
displayFormat: "DD/MM/YYYY",
monthFormat: "MMMM YYYY",
phrases: DateRangePickerPhrases,
stateDateWrapper: date => date
};
const DatePickerLabel = styled.label.withConfig({
displayName: "DatePicker__DatePickerLabel",
componentId: "sc-15292wq-0"
})(["display:block;margin-bottom:", ";font-size:", ";font-weight:", ";color:", ";"], themeGet("space.xs"), themeGet("fontSizes.1"), props => props.boldLabel ? themeGet("fontWeights.2") : themeGet("fontWeights.1"), props => props.invalid ? themeGet("colors.dangerDark") : themeGet("colors.greyDarkest"));
const DatePickerContainer = styled.div.withConfig({
displayName: "DatePicker__DatePickerContainer",
componentId: "sc-15292wq-1"
})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:", ";}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:transparent;border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:auto;right:0;transform:none;&:hover,&:focus{outline:0;svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "134px", props => {
if (props.width) {
if (props.width.includes("px")) {
const widthValue = parseInt(props.width, 10);
return `${widthValue * 2}px`;
}
return props.width;
}
return "calc(134px * 2)";
}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => `${themeGet("radii.2")(props)} 0 0 ${themeGet("radii.2")(props)}`, props => `0 ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 0`, props => `0 ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 0`, props => `0 ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 0`, props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
/**
*
* Datepicker uses airbnb's react datepicker under the hood. This is just a wrapper to override styles, the only props you need to specify is either single or range. For all functionality and additional required props refer to documentation here: <https://github.com/airbnb/react-dates>
*/
class DatePicker extends React.Component {
render() {
const {
single,
range,
width,
height,
zIndex,
invalid,
required,
label,
id,
startDateId,
boldLabel,
...pickerProps
} = this.props;
return /*#__PURE__*/_jsx(DatePickerContainer, {
width: width,
height: height,
invalid: invalid,
zIndex: zIndex,
required: required,
children: single ? /*#__PURE__*/_jsxs(_Fragment, {
children: [label && /*#__PURE__*/_jsxs(DatePickerLabel, {
htmlFor: id,
invalid: invalid,
boldLabel: boldLabel,
children: [label, required && /*#__PURE__*/_jsx(Small, {
color: "danger",
ml: "xs",
children: "*"
})]
}), /*#__PURE__*/_jsx(SingleDatePicker, {
id: id,
...pickerProps
})]
}) : range ? /*#__PURE__*/_jsxs(_Fragment, {
children: [label && /*#__PURE__*/_jsxs(DatePickerLabel, {
htmlFor: startDateId,
invalid: invalid,
boldLabel: boldLabel,
children: [label, required && /*#__PURE__*/_jsx(Small, {
color: "danger",
ml: "xs",
children: "*"
})]
}), /*#__PURE__*/_jsx(DateRangePicker, {
id: id,
...pickerProps
})]
}) : null
});
}
}
DatePicker.defaultProps = defaultProps;
DatePicker.propTypes = {
/** Specifies a single date picker */
single: PropTypes.bool,
/** Specifies a range date picker */
range: PropTypes.bool,
/** For Single DatePicker Date */
date: momentPropTypes.momentObj,
/** For Single DatePicker date change */
onDateChange: PropTypes.func,
/** For Single DatePicker input placeholder */
placeholder: PropTypes.string,
/** For Range DatePicker Start Date */
startDate: momentPropTypes.momentObj,
/** For Range DatePicker End Date */
endDate: momentPropTypes.momentObj,
/** For Range DatePicker dates change */
onDatesChange: PropTypes.func,
/** For focus state change */
onFocusChange: PropTypes.func,
/** Input focused state */
focusedInput: PropTypes.bool,
/** Date format */
displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/** For specifying width of input (specify units) */
width: PropTypes.string,
/** For specifying height of input (specify units) */
height: PropTypes.string,
/** Applies invalid input styles */
invalid: PropTypes.bool,
/**
* Should not be visible
* @ignore
*/
autoFocus: PropTypes.bool,
autoFocusEndDate: PropTypes.bool,
stateDateWrapper: PropTypes.func,
initialStartDate: momentPropTypes.momentObj,
initialEndDate: momentPropTypes.momentObj,
...omit(DateRangePickerShape, ["startDate", "endDate", "onDatesChange", "focusedInput", "onFocusChange"])
};
/**
* Test description
*/
DatePicker.__docgenInfo = {
"description": "Datepicker uses airbnb's react datepicker under the hood. This is just a wrapper to override styles, the only props you need to specify is either single or range. For all functionality and additional required props refer to documentation here: <https://github.com/airbnb/react-dates>",
"methods": [],
"displayName": "DatePicker",
"props": {
"autoFocus": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Should not be visible\n@ignore",
"type": {
"name": "bool"
},
"required": false
},
"autoFocusEndDate": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"initialStartDate": {
"defaultValue": {
"value": "null",
"computed": false
},
"description": "",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
},
"initialEndDate": {
"defaultValue": {
"value": "null",
"computed": false
},
"description": "",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
},
"startDateId": {
"defaultValue": {
"value": "START_DATE",
"computed": true
},
"required": false
},
"startDatePlaceholderText": {
"defaultValue": {
"value": "\"Start Date\"",
"computed": false
},
"required": false
},
"endDateId": {
"defaultValue": {
"value": "END_DATE",
"computed": true
},
"required": false
},
"endDatePlaceholderText": {
"defaultValue": {
"value": "\"End Date\"",
"computed": false
},
"required": false
},
"disabled": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"required": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"screenReaderInputMessage": {
"defaultValue": {
"value": "\"\"",
"computed": false
},
"required": false
},
"showClearDates": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"showDefaultInputIcon": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"customInputIcon": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"customArrowIcon": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"customCloseIcon": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"block": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"small": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"regular": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"invalid": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Applies invalid input styles",
"type": {
"name": "bool"
},
"required": false
},
"renderMonthText": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"orientation": {
"defaultValue": {
"value": "HORIZONTAL_ORIENTATION",
"computed": true
},
"required": false
},
"anchorDirection": {
"defaultValue": {
"value": "ANCHOR_LEFT",
"computed": true
},
"required": false
},
"horizontalMargin": {
"defaultValue": {
"value": "0",
"computed": false
},
"required": false
},
"withPortal": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"withFullScreenPortal": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"initialVisibleMonth": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"numberOfMonths": {
"defaultValue": {
"value": "2",
"computed": false
},
"required": false
},
"keepOpenOnDateSelect": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"reopenPickerOnClearDates": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"isRTL": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"navPosition": {
"defaultValue": {
"value": "NAV_POSITION_TOP",
"computed": true
},
"required": false
},
"navPrev": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"navNext": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"onPrevMonthClick": {
"defaultValue": {
"value": "() {}",
"computed": false
},
"required": false
},
"onNextMonthClick": {
"defaultValue": {
"value": "() {}",
"computed": false
},
"required": false
},
"onClose": {
"defaultValue": {
"value": "() {}",
"computed": false
},
"required": false
},
"renderCalendarDay": {
"defaultValue": {
"value": "undefined",
"computed": true
},
"required": false
},
"renderDayContents": {
"defaultValue": {
"value": "null",
"computed": false
},
"required": false
},
"minimumNights": {
"defaultValue": {
"value": "1",
"computed": false
},
"required": false
},
"enableOutsideDays": {
"defaultValue": {
"value": "false",
"computed": false
},
"required": false
},
"isDayBlocked": {
"defaultValue": {
"value": "() => false",
"computed": false
},
"required": false
},
"isOutsideRange": {
"defaultValue": {
"value": "() => false",
"computed": false
},
"required": false
},
"isDayHighlighted": {
"defaultValue": {
"value": "() => false",
"computed": false
},
"required": false
},
"displayFormat": {
"defaultValue": {
"value": "\"DD/MM/YYYY\"",
"computed": false
},
"description": "Date format",
"type": {
"name": "union",
"value": [{
"name": "string"
}, {
"name": "func"
}]
},
"required": false
},
"monthFormat": {
"defaultValue": {
"value": "\"MMMM YYYY\"",
"computed": false
},
"required": false
},
"phrases": {
"defaultValue": {
"value": "DateRangePickerPhrases",
"computed": true
},
"required": false
},
"stateDateWrapper": {
"defaultValue": {
"value": "(date) => date",
"computed": false
},
"description": "",
"type": {
"name": "func"
},
"required": false
},
"single": {
"description": "Specifies a single date picker",
"type": {
"name": "bool"
},
"required": false
},
"range": {
"description": "Specifies a range date picker",
"type": {
"name": "bool"
},
"required": false
},
"date": {
"description": "For Single DatePicker Date",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
},
"onDateChange": {
"description": "For Single DatePicker date change",
"type": {
"name": "func"
},
"required": false
},
"placeholder": {
"description": "For Single DatePicker input placeholder",
"type": {
"name": "string"
},
"required": false
},
"startDate": {
"description": "For Range DatePicker Start Date",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
},
"endDate": {
"description": "For Range DatePicker End Date",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
},
"onDatesChange": {
"description": "For Range DatePicker dates change",
"type": {
"name": "func"
},
"required": false
},
"onFocusChange": {
"description": "For focus state change",
"type": {
"name": "func"
},
"required": false
},
"focusedInput": {
"description": "Input focused state",
"type": {
"name": "bool"
},
"required": false
},
"width": {
"description": "For specifying width of input (specify units)",
"type": {
"name": "string"
},
"required": false
},
"height": {
"description": "For specifying height of input (specify units)",
"type": {
"name": "string"
},
"required": false
}
},
"composes": ["lodash/omit"]
};
export default DatePicker;