jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make date term editable

Browse Source 
Reviewed By: lblasa

Differential Revision: D49453947

fbshipit-source-id: b6959c6ac74d8966e21fb91f7dcbdf186253b93b
This commit is contained in:
Andrey Goncharov
2023-09-20 04:36:57 -07:00
committed by Facebook GitHub Bot
parent e180a1ed4b
commit e031032b93
2 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchAbsoluteDateTerm.tsx
View File

@@ -7,8 +7,12 @@
* @format
*/
import {DatePicker, DatePickerProps} from 'antd';
import {Button, DatePicker, DatePickerProps} from 'antd';
import dayjs from 'dayjs';
import React from 'react';
// Use this exact version of moment to match what antd has
// eslint-disable-next-line no-restricted-imports
import moment from 'antd/node_modules/moment';
type PowerSearchAbsoluteTermProps = {
onCancel: () => void;
@@ -16,6 +20,7 @@ type PowerSearchAbsoluteTermProps = {
dateOnly?: boolean;
minValue?: Date;
maxValue?: Date;
defaultValue?: Date;
};
export const DATE_ONLY_FORMAT = 'YYYY-MM-DD';
@@ -23,7 +28,9 @@ export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export const PowerSearchAbsoluteDateTerm: React.FC<
PowerSearchAbsoluteTermProps
> = ({onCancel, onChange, dateOnly, minValue, maxValue}) => {
> = ({onCancel, onChange, dateOnly, minValue, maxValue, defaultValue}) => {
const [editing, setEditing] = React.useState(!defaultValue);
const disabledDate: DatePickerProps['disabledDate'] = React.useCallback(
(date) => {
if (minValue !== undefined && date < minValue) {
@@ -40,7 +47,11 @@ export const PowerSearchAbsoluteDateTerm: React.FC<
const format = dateOnly ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss';
const valueRef = React.useRef<Date>();
if (defaultValue && !valueRef.current) {
valueRef.current = defaultValue;
}
if (editing) {
return (
<DatePicker
autoFocus
@@ -66,10 +77,21 @@ export const PowerSearchAbsoluteDateTerm: React.FC<
if (!valueRef.current) {
onCancel();
}
setEditing(false);
}}
disabledDate={disabledDate}
showTime={!dateOnly}
defaultOpen
defaultValue={defaultValue ? moment(defaultValue) : undefined}
/>
);
}
return (
<Button onClick={() => setEditing(true)}>
{dateOnly
? dayjs(defaultValue).format(DATE_ONLY_FORMAT)
: dayjs(defaultValue).format(DATE_TIME_FORMAT)}
</Button>
);
};

19
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx
View File

@@ -155,6 +155,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
minValue={searchTerm.operator.minValue}
maxValue={searchTerm.operator.maxValue}
dateOnly={searchTerm.operator.dateOnly}
defaultValue={searchTerm.searchValue}
/>
);
break;
@@ -262,11 +263,19 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
}
case 'ABSOLUTE_DATE': {
searchValueComponent = (
<Button>
{searchTerm.operator.dateOnly
? dayjs(searchTerm.searchValue).format(DATE_ONLY_FORMAT)
: dayjs(searchTerm.searchValue).format(DATE_TIME_FORMAT)}
</Button>
<PowerSearchAbsoluteDateTerm
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
minValue={searchTerm.operator.minValue}
maxValue={searchTerm.operator.maxValue}
dateOnly={searchTerm.operator.dateOnly}
defaultValue={searchTerm.searchValue}
/>
);
break;
}