orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
344 lines (341 loc) • 17.2 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["single", "range", "width", "height", "zIndex", "invalid", "required", "label", "id", "startDateId", "boldLabel"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 defaultDatePickerProps = {
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 = /*#__PURE__*/styled.label.withConfig({
displayName: "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 = /*#__PURE__*/styled.div.withConfig({
displayName: "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.SingleDatePickerInput_clearDate__hide,.DateRangePickerInput_clearDates.DateRangePickerInput_clearDates__hide{display:none;}}.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;background:transparent;border-radius:", ";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 "".concat(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 => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), 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 mergedProps = _objectSpread(_objectSpread({}, defaultDatePickerProps), this.props);
const {
single,
range,
width,
height,
zIndex,
invalid,
required,
label,
id,
startDateId,
boldLabel
} = mergedProps,
pickerProps = _objectWithoutProperties(mergedProps, _excluded);
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, _objectSpread({
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, _objectSpread({
id: id
}, pickerProps))]
}) : null
});
}
}
DatePicker.propTypes = _objectSpread({
/** 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": {
"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
},
"displayFormat": {
"description": "Date format",
"type": {
"name": "union",
"value": [{
"name": "string"
}, {
"name": "func"
}]
},
"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
},
"invalid": {
"description": "Applies invalid input styles",
"type": {
"name": "bool"
},
"required": false
},
"autoFocus": {
"description": "Should not be visible\n@ignore",
"type": {
"name": "bool"
},
"required": false
},
"autoFocusEndDate": {
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"stateDateWrapper": {
"description": "",
"type": {
"name": "func"
},
"required": false
},
"initialStartDate": {
"description": "",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
},
"initialEndDate": {
"description": "",
"type": {
"name": "custom",
"raw": "momentPropTypes.momentObj"
},
"required": false
}
},
"composes": ["lodash/omit"]
};
export default DatePicker;