@grafana/ui
Version:
Grafana Components Library
1 lines • 4 kB
Source Map (JSON)
{"version":3,"file":"DatePicker.mjs","sources":["../../../../../src/components/DateTimePickers/DatePicker/DatePicker.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { memo } from 'react';\nimport Calendar from 'react-calendar';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';\nimport { Icon } from '../../Icon/Icon';\nimport { getBodyStyles } from '../TimeRangePicker/CalendarBody';\n\n/** @public */\nexport interface DatePickerProps {\n isOpen?: boolean;\n onClose: () => void;\n onChange: (value: Date) => void;\n value?: Date;\n minDate?: Date;\n maxDate?: Date;\n}\n\n/** @public */\nexport const DatePicker = memo<DatePickerProps>((props) => {\n const styles = useStyles2(getStyles);\n const { isOpen, onClose } = props;\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <ClickOutsideWrapper useCapture={true} includeButtonPress={false} onClick={onClose}>\n <div className={styles.modal} data-testid=\"date-picker\">\n <Body {...props} />\n </div>\n </ClickOutsideWrapper>\n );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nconst Body = memo<DatePickerProps>(({ value, minDate, maxDate, onChange }) => {\n const styles = useStyles2(getBodyStyles);\n\n return (\n <Calendar\n className={styles.body}\n tileClassName={styles.title}\n value={value || new Date()}\n minDate={minDate}\n maxDate={maxDate}\n nextLabel={<Icon name=\"angle-right\" />}\n prevLabel={<Icon name=\"angle-left\" />}\n onChange={(ev) => {\n if (ev && !Array.isArray(ev)) {\n onChange(ev);\n }\n }}\n locale=\"en\"\n />\n );\n});\n\nBody.displayName = 'Body';\n\nexport const getStyles = (theme: GrafanaTheme2) => {\n return {\n modal: css({\n zIndex: theme.zIndex.modal,\n boxShadow: theme.shadows.z3,\n backgroundColor: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n borderTopLeftRadius: theme.shape.radius.default,\n borderBottomLeftRadius: theme.shape.radius.default,\n\n 'button:disabled': {\n color: theme.colors.text.disabled,\n },\n }),\n };\n};\n"],"names":[],"mappings":";;;;;;;;;AAsBa,MAAA,UAAA,GAAa,IAAsB,CAAA,CAAC,KAAU,KAAA;AACzD,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAM,MAAA,EAAE,MAAQ,EAAA,OAAA,EAAY,GAAA,KAAA;AAE5B,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,uBAAoB,UAAY,EAAA,IAAA,EAAM,oBAAoB,KAAO,EAAA,OAAA,EAAS,SACzE,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EAAO,eAAY,aACxC,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAM,GAAG,KAAA,EAAO,GACnB,CACF,EAAA,CAAA;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;AAEzB,MAAM,IAAA,GAAO,KAAsB,CAAC,EAAE,OAAO,OAAS,EAAA,OAAA,EAAS,UAAe,KAAA;AAC5E,EAAM,MAAA,MAAA,GAAS,WAAW,aAAa,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,eAAe,MAAO,CAAA,KAAA;AAAA,MACtB,KAAA,EAAO,KAAS,oBAAA,IAAI,IAAK,EAAA;AAAA,MACzB,OAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAW,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,aAAc,EAAA,CAAA;AAAA,MACpC,SAAW,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,YAAa,EAAA,CAAA;AAAA,MACnC,QAAA,EAAU,CAAC,EAAO,KAAA;AAChB,QAAA,IAAI,EAAM,IAAA,CAAC,KAAM,CAAA,OAAA,CAAQ,EAAE,CAAG,EAAA;AAC5B,UAAA,QAAA,CAAS,EAAE,CAAA;AAAA;AACb,OACF;AAAA,MACA,MAAO,EAAA;AAAA;AAAA,GACT;AAEJ,CAAC,CAAA;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;AAEN,MAAA,SAAA,GAAY,CAAC,KAAyB,KAAA;AACjD,EAAO,OAAA;AAAA,IACL,OAAO,GAAI,CAAA;AAAA,MACT,MAAA,EAAQ,MAAM,MAAO,CAAA,KAAA;AAAA,MACrB,SAAA,EAAW,MAAM,OAAQ,CAAA,EAAA;AAAA,MACzB,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,MACzC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,MAC7C,mBAAA,EAAqB,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACxC,sBAAA,EAAwB,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MAE3C,iBAAmB,EAAA;AAAA,QACjB,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF;;;;"}