mirror of https://github.com/grafana/grafana
Chore: Replace `rc-time-picker` with `rc-picker` (#99022)
* replace rc-time-picker with rc-picker * remove unnecessary stack * remove TimePickerInput * make props stricter * fix type assertions * remove outdated comment * fix types * fix clear icon * fix styling * fix z-index and 6 tests * fix remaining unit tests * betterer results * styling tweaks * don't show/hide scrollbars on hoverpull/99042/head
Ashley Harrison
5 months ago
committed by
GitHub
parent
106af5d0ee
commit
cff07c9fb6
@ -1,43 +0,0 @@ |
||||
import { css } from '@emotion/react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
export function getRcTimePickerStyles(theme: GrafanaTheme2) { |
||||
return css({ |
||||
'.rc-time-picker-input,.rc-time-picker-panel-input-wrap,.rc-time-picker-panel-inner': { |
||||
backgroundColor: theme.components.input.background, |
||||
color: theme.colors.text.secondary, |
||||
borderColor: theme.components.input.borderColor, |
||||
fontSize: theme.typography.body.fontSize, |
||||
}, |
||||
|
||||
'.rc-time-picker-input': { |
||||
padding: theme.spacing(0, 1), |
||||
height: theme.spacing(4), |
||||
}, |
||||
|
||||
'.rc-time-picker-panel': { |
||||
width: '176px', |
||||
}, |
||||
|
||||
'.rc-time-picker-panel-select': { |
||||
width: '50%', |
||||
|
||||
'&:only-child': { |
||||
width: '100%', |
||||
}, |
||||
|
||||
'.rc-time-picker-panel-select-option-selected': { |
||||
backgroundColor: theme.colors.background.secondary, |
||||
}, |
||||
|
||||
'li:hover': { |
||||
backgroundColor: theme.colors.background.secondary, |
||||
}, |
||||
}, |
||||
|
||||
'.rc-time-picker-panel-narrow': { |
||||
maxWidth: 'none', |
||||
}, |
||||
}); |
||||
} |
||||
@ -1,185 +0,0 @@ |
||||
import { css, cx } from '@emotion/css'; |
||||
import { Moment } from 'moment'; |
||||
import TimePicker from 'rc-time-picker'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { FormInputSize, Icon, useStyles2 } from '@grafana/ui'; |
||||
import { inputSizes } from '@grafana/ui/src/components/Forms/commonStyles'; |
||||
import { getFocusStyles } from '@grafana/ui/src/themes/mixins'; |
||||
|
||||
export interface Props { |
||||
onChange: (value: Moment) => void; |
||||
value?: Moment; |
||||
defaultValue?: Moment; |
||||
showHour?: boolean; |
||||
showSeconds?: boolean; |
||||
minuteStep?: number; |
||||
size?: FormInputSize; |
||||
disabled?: boolean; |
||||
disabledHours?: () => number[]; |
||||
disabledMinutes?: () => number[]; |
||||
disabledSeconds?: () => number[]; |
||||
placeholder?: string; |
||||
format?: string; |
||||
allowEmpty?: boolean; |
||||
width?: number; |
||||
} |
||||
|
||||
export const POPUP_CLASS_NAME = 'time-of-day-picker-panel'; |
||||
|
||||
// @TODO fix TimeOfDayPicker and switch?
|
||||
export const TimePickerInput = ({ |
||||
minuteStep = 1, |
||||
showHour = true, |
||||
showSeconds = false, |
||||
onChange, |
||||
value, |
||||
size = 'auto', |
||||
disabled, |
||||
disabledHours, |
||||
disabledMinutes, |
||||
disabledSeconds, |
||||
placeholder, |
||||
format = 'HH:mm', |
||||
defaultValue = undefined, |
||||
allowEmpty = false, |
||||
width, |
||||
}: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const getWidth = () => { |
||||
if (width) { |
||||
return css({ |
||||
width: `${width}px`, |
||||
}); |
||||
} |
||||
|
||||
return inputSizes()[size]; |
||||
}; |
||||
|
||||
return ( |
||||
<TimePicker |
||||
value={value} |
||||
defaultValue={defaultValue} |
||||
onChange={(v) => onChange(v)} |
||||
showHour={showHour} |
||||
showSecond={showSeconds} |
||||
format={format} |
||||
allowEmpty={allowEmpty} |
||||
className={cx(getWidth(), styles.input)} |
||||
popupClassName={cx(styles.picker, POPUP_CLASS_NAME)} |
||||
minuteStep={minuteStep} |
||||
inputIcon={<Caret wrapperStyle={styles.caretWrapper} />} |
||||
disabled={disabled} |
||||
disabledHours={disabledHours} |
||||
disabledMinutes={disabledMinutes} |
||||
disabledSeconds={disabledSeconds} |
||||
placeholder={placeholder} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
interface CaretProps { |
||||
wrapperStyle?: string; |
||||
} |
||||
|
||||
const Caret = ({ wrapperStyle = '' }: CaretProps) => { |
||||
return ( |
||||
<div className={wrapperStyle}> |
||||
<Icon name="angle-down" /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
const bgColor = theme.components.input.background; |
||||
const menuShadowColor = theme.v1.palette.black; |
||||
const optionBgHover = theme.colors.background.secondary; |
||||
const borderRadius = theme.shape.radius.default; |
||||
const borderColor = theme.components.input.borderColor; |
||||
|
||||
return { |
||||
caretWrapper: css({ |
||||
position: 'absolute', |
||||
right: '8px', |
||||
top: '50%', |
||||
transform: 'translateY(-50%)', |
||||
display: 'inline-block', |
||||
textAlign: 'right', |
||||
color: theme.colors.text.secondary, |
||||
}), |
||||
picker: css({ |
||||
'.rc-time-picker-panel-select': { |
||||
fontSize: '14px', |
||||
backgroundColor: bgColor, |
||||
borderColor: borderColor, |
||||
li: { |
||||
outlineWidth: '2px', |
||||
'&.rc-time-picker-panel-select-option-selected': { |
||||
backgroundColor: 'inherit', |
||||
border: `1px solid ${theme.v1.palette.orange}`, |
||||
borderRadius: borderRadius, |
||||
}, |
||||
|
||||
'&:hover': { |
||||
background: optionBgHover, |
||||
}, |
||||
|
||||
'&.rc-time-picker-panel-select-option-disabled': { |
||||
color: theme.colors.action.disabledText, |
||||
}, |
||||
}, |
||||
}, |
||||
|
||||
'.rc-time-picker-panel-inner': { |
||||
boxShadow: `0px 4px 4px ${menuShadowColor}`, |
||||
backgroundColor: bgColor, |
||||
borderColor: borderColor, |
||||
borderRadius: borderRadius, |
||||
marginTop: '3px', |
||||
|
||||
'.rc-time-picker-panel-input-wrap': { |
||||
marginRight: '2px', |
||||
|
||||
'&, .rc-time-picker-panel-input': { |
||||
backgroundColor: bgColor, |
||||
paddingTop: '2px', |
||||
}, |
||||
}, |
||||
|
||||
'.rc-time-picker-panel-combobox': { |
||||
display: 'flex', |
||||
}, |
||||
}, |
||||
}), |
||||
input: css({ |
||||
'.rc-time-picker-input': { |
||||
backgroundColor: bgColor, |
||||
borderRadius: borderRadius, |
||||
borderColor: borderColor, |
||||
height: theme.spacing(4), |
||||
|
||||
'&:focus': getFocusStyles(theme), |
||||
|
||||
'&:disabled': { |
||||
backgroundColor: theme.colors.action.disabledBackground, |
||||
color: theme.colors.action.disabledText, |
||||
border: `1px solid ${theme.colors.action.disabledBackground}`, |
||||
'&:focus': { |
||||
boxShadow: 'none', |
||||
}, |
||||
}, |
||||
}, |
||||
|
||||
'.rc-time-picker-clear': { |
||||
position: 'absolute', |
||||
right: '20px', |
||||
top: '50%', |
||||
cursor: 'pointer', |
||||
overflow: 'hidden', |
||||
transform: 'translateY(-50%)', |
||||
color: theme.colors.text.secondary, |
||||
}, |
||||
}), |
||||
}; |
||||
}; |
||||
Loading…
Reference in new issue