@razorpay/blade
Version:
The Design System that powers Razorpay
318 lines (313 loc) • 12.1 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import styled from 'styled-components';
import dayjs from 'dayjs';
import { classes } from './constants.js';
import '../Box/BaseBox/index.js';
import getTextStyles from '../Typography/Text/getTextStyles.js';
import '../../tokens/global/index.js';
import '../../utils/index.js';
import getIn from '../../utils/lodashButBetter/get.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import '../../utils/getFocusRingStyles/index.js';
import { size } from '../../tokens/global/size.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
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; }
var cell = {
gap: {
x: size[0],
y: size[2]
},
size: {
desktop: size[40],
mobile: size[48]
},
background: {
"default": 'transparent',
hover: 'interactive.background.gray.highlighted',
disabled: 'transparent'
},
text: {
"default": 'interactive.text.gray.normal',
disabled: 'interactive.text.gray.disabled'
}
};
var todayCell = {
background: {
"default": 'transparent',
hover: 'interactive.background.primary.faded'
},
border: {
"default": 'interactive.border.primary.default',
hover: 'interactive.border.primary.default'
},
text: {
"default": 'interactive.text.primary.normal',
hover: 'interactive.text.primary.normal'
}
};
var selectedCell = {
day: {
background: {
"default": 'interactive.background.primary.default',
hover: 'interactive.background.primary.highlighted'
},
border: {
"default": 'interactive.border.primary.default',
hover: 'interactive.border.primary.faded'
},
text: {
"default": 'interactive.text.onPrimary.normal',
hover: 'interactive.text.onPrimary.normal'
}
},
month: {
background: {
"default": 'transparent',
hover: 'interactive.background.primary.faded'
},
border: {
"default": 'interactive.border.primary.default'
},
text: {
"default": 'interactive.text.primary.normal'
}
}
};
var inRangeCell = {
background: {
"default": 'surface.background.primary.subtle',
hover: 'interactive.background.primary.faded'
},
border: {
"default": 'interactive.border.primary.default',
hover: 'interactive.border.primary.default'
},
text: {
"default": 'interactive.text.primary.normal',
hover: 'interactive.text.primary.normal'
}
};
var CalendarGradientStyles = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "CalendarStylesweb__CalendarGradientStyles",
componentId: "xxlq7y-0"
})(function (_ref) {
var theme = _ref.theme,
date = _ref.date,
isRange = _ref.isRange;
var isMobile = useIsMobile();
// Bail out if datepicker is not in range mode or on mobile
if (isMobile || !isRange) return {};
// Calculate the first and last day of the month for both calendars in range mode
// This is to apply the gradient to the first and last day of the month
var cal1 = dayjs(date);
var cal1FirstDay = cal1.startOf('month');
var cal1LastDay = cal1.endOf('month');
// Check if the first and last day of the month are at the start or end of the week
// If so, we don't apply the gradient, as it will overflow to the previous or next month
// Eg: https://github.com/razorpay/blade/assets/35374649/025b8ed9-90b4-49b6-a307-a746ae5b910f
var cal1IsFirstDayStartOfTheWeek = cal1FirstDay.day() === 0;
var cal1IsLastDayEndOfTheWeek = cal1LastDay.day() === 6;
// Do the same for the second calendar
var cal2 = dayjs(date).add(1, 'month');
var cal2FirstDay = cal2.startOf('month');
var cal2LastDay = cal2.endOf('month');
var cal2IsFirstDayStartOfTheWeek = cal2FirstDay.day() === 0;
var cal2IsLastDayEndOfTheWeek = cal2LastDay.day() === 6;
var calendar1FirstGradient = "".concat(cal1.month(), "-").concat(cal1FirstDay.date());
var calendar1LastGradient = "".concat(cal1.month(), "-").concat(cal1LastDay.date());
var calendar2FirstGradient = "".concat(cal2.month(), "-").concat(cal2FirstDay.date());
var calendar2LastGradient = "".concat(cal2.month(), "-").concat(cal2LastDay.date());
var gradientBefore = {
content: '""',
position: 'absolute',
width: '100%',
top: 0,
bottom: 0,
right: 0,
pointerEvents: 'none'
};
var rightGradient = _objectSpread(_objectSpread({}, gradientBefore), {}, {
left: '-100%',
background: "linear-gradient(to right, transparent, ".concat(getIn(theme.colors, inRangeCell.background["default"]), ")")
});
var leftGradient = _objectSpread(_objectSpread({}, gradientBefore), {}, {
left: '100%',
background: "linear-gradient(to left, transparent, ".concat(getIn(theme.colors, inRangeCell.background["default"]), ")")
});
return _defineProperty({}, ".".concat(classes.dayCell), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&[data-in-range]:not(&[data-first-in-range])[data-date=\"".concat(calendar1FirstGradient, "\"]"), {
'&:before': cal1IsFirstDayStartOfTheWeek ? {} : rightGradient
}), "&[data-in-range]:not(&[data-last-in-range])[data-date=\"".concat(calendar1LastGradient, "\"]"), {
'&:before': cal1IsLastDayEndOfTheWeek ? {} : leftGradient
}), "&[data-in-range]:not(&[data-first-in-range])[data-date=\"".concat(calendar2FirstGradient, "\"]"), {
'&:before': cal2IsFirstDayStartOfTheWeek ? {} : rightGradient
}), "&[data-in-range]:not(&[data-last-in-range])[data-date=\"".concat(calendar2LastGradient, "\"]"), {
'&:before': cal2IsLastDayEndOfTheWeek ? {} : leftGradient
}));
});
var CalendarStyles = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "CalendarStylesweb__CalendarStyles",
componentId: "xxlq7y-1"
})(function (_ref3) {
var theme = _ref3.theme,
pickerType = _ref3.pickerType;
var isMobile = useIsMobile();
var device = isMobile ? 'mobile' : 'desktop';
var isDayPicker = pickerType === 'day';
var today = {
'&[data-today]': {
position: 'relative',
':before': {
content: '""',
position: 'absolute',
left: '50%',
bottom: makeSpace(size[5]),
transform: 'translate(-50%, -50%)',
backgroundColor: getIn(theme.colors, todayCell.text["default"]),
width: makeSpace(theme.spacing[2]),
height: makeSpace(theme.spacing[2]),
borderRadius: theme.border.radius.max
}
},
'&[data-today]:hover': {
backgroundColor: getIn(theme.colors, todayCell.background.hover),
outlineColor: getIn(theme.colors, todayCell.border.hover),
color: getIn(theme.colors, todayCell.text.hover)
}
};
var selected = {
'&[data-selected]': {
'&[data-celltype="day"]': {
backgroundColor: getIn(theme.colors, selectedCell.day.background["default"]),
outlineColor: getIn(theme.colors, selectedCell.day.border["default"]),
color: getIn(theme.colors, selectedCell.day.text["default"]),
':hover': {
backgroundColor: getIn(theme.colors, selectedCell.day.background.hover),
color: getIn(theme.colors, selectedCell.day.text.hover)
}
},
'&[data-celltype="month"], &[data-celltype="year"]': {
backgroundColor: 'transparent',
outlineStyle: 'solid',
outlineWidth: makeBorderSize(theme.border.width.thin),
outlineOffset: makeSpace(-theme.border.width.thin),
outlineColor: getIn(theme.colors, selectedCell.month.border["default"]),
color: getIn(theme.colors, selectedCell.month.text["default"]),
':hover': {
backgroundColor: getIn(theme.colors, selectedCell.month.background.hover)
}
},
':before': {
backgroundColor: getIn(theme.colors, selectedCell.day.text["default"])
}
}
};
var ranges = {
'&[data-in-range]': {
borderRadius: 0,
backgroundColor: getIn(theme.colors, inRangeCell.background["default"]),
outlineColor: getIn(theme.colors, inRangeCell.border["default"]),
color: getIn(theme.colors, inRangeCell.text["default"]),
position: 'relative'
},
'&[data-in-range]:hover': {
backgroundColor: getIn(theme.colors, inRangeCell.background.hover),
outlineColor: getIn(theme.colors, inRangeCell.border.hover),
color: getIn(theme.colors, inRangeCell.text.hover)
},
'&[data-first-in-range]': {
borderRadius: theme.border.radius.medium,
borderTopRightRadius: 0,
borderBottomRightRadius: 0
},
'&[data-last-in-range]': {
borderRadius: theme.border.radius.medium,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0
},
'&[data-first-in-range][data-last-in-range]': {
borderRadius: theme.border.radius.medium
}
};
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
width: '100%'
}, ".".concat(classes.levelsGroup), {
width: '100%',
display: 'flex',
justifyContent: 'space-between',
gap: makeSpace(theme.spacing[8]),
table: {
borderCollapse: 'collapse',
width: !isDayPicker || isMobile ? '100%' : undefined
},
'> div': {
margin: 0,
width: isMobile || !isDayPicker ? '100%' : undefined
},
th: {
flex: 1
},
td: {
flex: 1,
padding: '0px',
paddingBottom: makeSpace(cell.gap.y)
}
}), ".".concat(classes.row), {
textAlign: 'center',
display: isDayPicker ? 'flex' : 'grid',
gridTemplateColumns: 'repeat(3, 1fr)'
}), ".".concat(classes.calendarHeader), {
display: 'none'
}), ".".concat(classes.weekday), _objectSpread(_objectSpread({}, getTextStyles({
theme: theme,
variant: 'body',
size: 'small',
weight: 'medium',
color: 'surface.text.gray.muted'
})), {}, {
paddingBottom: makeSpace(theme.spacing[4])
})), ".".concat(classes.dayCell), {
button: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
all: 'unset',
cursor: 'pointer',
width: isMobile || !isDayPicker ? '100%' : makeSpace(cell.size[device]),
height: isDayPicker && isMobile ? '100%' : makeSpace(cell.size[device]),
aspectRatio: isDayPicker && isMobile ? '1 / 1' : undefined,
borderRadius: theme.border.radius.medium,
backgroundColor: getIn(theme.colors, cell.background["default"]),
border: 'none'
}, getTextStyles({
theme: theme,
variant: 'body',
size: 'medium',
weight: 'regular'
})), {}, {
'&:hover': {
backgroundColor: getIn(theme.colors, cell.background.hover)
},
'&:focus-visible': getFocusRingStyles({
theme: theme,
isImportant: true
}),
'&[data-disabled]': {
color: getIn(theme.colors, cell.text.disabled),
backgroundColor: getIn(theme.colors, cell.background.disabled),
cursor: 'not-allowed'
},
'&[data-hidden]': {
display: 'none'
},
'&[data-outside]': {
color: theme.colors.interactive.text.gray.muted
},
'&[data-outside]:hover': {
color: getIn(theme.colors, cell.text["default"])
}
}, ranges), today), selected)
});
});
export { CalendarGradientStyles, CalendarStyles };
//# sourceMappingURL=CalendarStyles.web.js.map