Skip to content

Commit

Permalink
chore(pf5): upgrade datetime components and remaining dashboard ones
Browse files Browse the repository at this point in the history
  • Loading branch information
@tthvo
tthvo committed Nov 2, 2023
1 parent 5975839 commit d4a6663
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 144 deletions.
121 changes: 59 additions & 62 deletions src/app/Dashboard/LayoutTemplatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,14 @@ import {
ToolbarItem,
ToolbarToggleGroup,
EmptyStateHeader,
SelectList,
Select,
SelectOption,
Badge,
MenuToggle,
MenuToggleElement,
} from '@patternfly/react-core';
import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core/deprecated';
import { SelectOptionObject } from '@patternfly/react-core/deprecated';
import {
ArrowsAltVIcon,
FilterIcon,
Expand Down Expand Up @@ -227,14 +233,9 @@ export const LayoutTemplatePicker: React.FC<LayoutTemplatePickerProps> = ({ onTe
);

const onFilterSelect = React.useCallback(
(
_ev: React.MouseEvent | React.ChangeEvent,
selection: string | SelectOptionObject,
isPlaceholder: boolean | undefined,
) => {
const selected = selection as LayoutTemplateFilter;
(_ev: React.MouseEvent<Element, MouseEvent>, selected: LayoutTemplateFilter) => {
setSelectedFilters((prev) => {
if (isPlaceholder) {
if (selected) {
return [];
}
if (prev.includes(selected)) {
Expand All @@ -246,37 +247,21 @@ export const LayoutTemplatePicker: React.FC<LayoutTemplatePickerProps> = ({ onTe
[setSelectedFilters],
);

const onFilterSelectToggle = React.useCallback(
(isExpanded: boolean) => {
setIsFilterSelectOpen(isExpanded);
},
[setIsFilterSelectOpen],
);
const onFilterSelectToggle = React.useCallback(() => {
setIsFilterSelectOpen((isExpanded) => !isExpanded);
}, [setIsFilterSelectOpen]);

const onClearAllFilters = React.useCallback(() => {
setSelectedFilters([]);
}, [setSelectedFilters]);

const onSortSelectToggle = React.useCallback(
(isExpanded: boolean) => {
setIsSortSelectOpen(isExpanded);
},
[setIsSortSelectOpen],
);
const onSortSelectToggle = React.useCallback(() => {
setIsSortSelectOpen((isExpanded) => !isExpanded);
}, [setIsSortSelectOpen]);

const onSortSelect = React.useCallback(
(
_ev: React.MouseEvent | React.ChangeEvent,
selection: string | SelectOptionObject,
isPlaceholder: boolean | undefined,
) => {
const selected = selection.valueOf() as LayoutTemplateSort;
setSelectedSort((_prev) => {
if (isPlaceholder) {
return undefined;
}
return selected;
});
(_ev: React.MouseEvent<Element, MouseEvent>, selected: LayoutTemplateSort) => {
setSelectedSort(selected);
setIsSortSelectOpen(false);
},
[setSelectedSort, setIsSortSelectOpen],
Expand Down Expand Up @@ -537,51 +522,63 @@ export const LayoutTemplatePicker: React.FC<LayoutTemplatePickerProps> = ({ onTe
</ToolbarItem>
<ToolbarFilter chips={selectedFilters} deleteChip={onDeleteChip} categoryName="Category">
<Select
menuAppendTo={portalRoot}
variant={SelectVariant.checkbox}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={onFilterSelectToggle} isExpanded={isFilterSelectOpen}>
Template Type
{selectedFilters.length ? <Badge isRead>{selectedFilters.length}</Badge> : null}
</MenuToggle>
)}
popperProps={{
appendTo: portalRoot,
}}
aria-label="Select template category"
onToggle={onFilterSelectToggle}
onSelect={onFilterSelect}
selections={selectedFilters}
selected={selectedFilters}
isOpen={isFilterSelectOpen}
placeholderText="Template Type"
>
<SelectOption key="suggested" value={t('SUGGESTED', { ns: 'common' })} />
<SelectOption key="cryostat" value="Cryostat" />
<SelectOption key="user-submitted" value={t('USER_SUBMITTED', { ns: 'common' })} />
<SelectList>
<SelectOption key="suggested" value={t('SUGGESTED', { ns: 'common' })} hasCheckbox>
{t('SUGGESTED', { ns: 'common' })}
</SelectOption>
<SelectOption key="cryostat" value="Cryostat" hasCheckbox>
Cryostat
</SelectOption>
<SelectOption
key="user-submitted"
value={t('USER_SUBMITTED', { ns: 'common' })}
hasCheckbox
>
{t('USER_SUBMITTED', { ns: 'common' })}
</SelectOption>
</SelectList>
</Select>
</ToolbarFilter>
</ToolbarGroup>
</ToolbarToggleGroup>
<ToolbarGroup variant="icon-button-group">
<ToolbarItem>
<Select
menuAppendTo={portalRoot}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle ref={toggleRef} onClick={onSortSelectToggle} isExpanded={isSortSelectOpen}>
{selectedSort ?? t('LayoutTemplatePicker.SORT_BY.PLACEHOLDER')}
</MenuToggle>
)}
popperProps={{
appendTo: portalRoot,
}}
aria-label="Select sorting category"
onToggle={onSortSelectToggle}
onSelect={onSortSelect}
selections={selectedSort}
selected={selectedSort}
isOpen={isSortSelectOpen}
placeholderText={t('LayoutTemplatePicker.SORT_BY.PLACEHOLDER') as string}
>
<SelectOption
key={LayoutTemplateSort.NAME}
value={
{
toString: () => `${t('LayoutTemplatePicker.SORT_BY.NAME')}`,
valueOf: () => LayoutTemplateSort.NAME,
} as SelectOptionObject
}
/>
<SelectOption
key={LayoutTemplateSort.CARD_COUNT}
value={
{
toString: () => `${t('LayoutTemplatePicker.SORT_BY.CARD_COUNT')}`,
valueOf: () => LayoutTemplateSort.CARD_COUNT,
} as SelectOptionObject
}
/>
<SelectList>
<SelectOption key={LayoutTemplateSort.NAME} value={LayoutTemplateSort.NAME}>
{t('LayoutTemplatePicker.SORT_BY.NAME')}
</SelectOption>
<SelectOption key={LayoutTemplateSort.CARD_COUNT} value={LayoutTemplateSort.CARD_COUNT}>
{t('LayoutTemplatePicker.SORT_BY.CARD_COUNT')}
</SelectOption>
</SelectList>
</Select>
</ToolbarItem>
<ToolbarItem>
Expand Down
2 changes: 1 addition & 1 deletion src/app/DateTimePicker/DateTimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({ onSelect, onDism
}, [datetime, timezone, onSelect]);

const handleCalendarSelect = React.useCallback(
(date: Date) => {
(_, date: Date) => {
setDatetime((old) => {
const wrappedOld = dayjs(old);
return dayjs(date).hour(wrappedOld.hour()).minute(wrappedOld.minute()).second(wrappedOld.second()).toDate();
Expand Down
33 changes: 14 additions & 19 deletions src/app/DateTimePicker/TimePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
Divider,
HelperText,
HelperTextItem,
Icon,
Level,
LevelItem,
Panel,
Expand Down Expand Up @@ -121,7 +122,12 @@ export const TimePicker: React.FC<TimePickerProps> = ({
<HelperText>
<HelperTextItem>{t('TimePicker.USE_24HR_TIME')}</HelperTextItem>
</HelperText>
<Switch id={'24-hour-switch'} label={t('TimePicker.24HOUR')} isChecked={is24h} onChange={setIs24h} />
<Switch
id={'24-hour-switch'}
label={t('TimePicker.24HOUR')}
isChecked={is24h}
onChange={(_, checked: boolean) => setIs24h(checked)}
/>
</PanelFooter>
</PanelMain>
</Panel>
Expand Down Expand Up @@ -166,7 +172,7 @@ const TimeSpinner: React.FC<TimeSpinnerProps> = ({ variant, onChange, selected,
);

const handleValueChange = React.useCallback(
(value: string) => {
(_, value: string) => {
if (isNaN(Number(value))) {
return;
}
Expand Down Expand Up @@ -203,7 +209,9 @@ const TimeSpinner: React.FC<TimeSpinnerProps> = ({ variant, onChange, selected,
onClick={handleIncrement}
aria-label={t(`TimeSpinner.INCREMENT_${variant.toUpperCase()}_VALUE`) || ''}
>
<AngleUpIcon size="md" />
<Icon size="md">
<AngleUpIcon />
</Icon>
</Button>
</StackItem>
<StackItem key={`${variant}-input`}>
Expand All @@ -224,24 +232,11 @@ const TimeSpinner: React.FC<TimeSpinnerProps> = ({ variant, onChange, selected,
onClick={handleDecrement}
aria-label={t(`TimeSpinner.DECREMENT_${variant.toUpperCase()}_VALUE`) || ''}
>
<AngleDownIcon size="md" />
<Icon size="md">
<AngleDownIcon />
</Icon>
</Button>
</StackItem>
</Stack>
);
};

/**
* t('TimeSpinner.INPUT_HOUR12_VALUE')
* t('TimeSpinner.INPUT_HOUR24_VALUE')
* t('TimeSpinner.INPUT_MINUTE_VALUE')
* t('TimeSpinner.INPUT_SECOND_VALUE')
* t('TimeSpinner.INCREMENT_HOUR12_VALUE')
* t('TimeSpinner.INCREMENT_HOUR24_VALUE')
* t('TimeSpinner.INCREMENT_MINUTE_VALUE')
* t('TimeSpinner.INCREMENT_SECOND_VALUE')
* t('TimeSpinner.DECREMENT_HOUR12_VALUE')
* t('TimeSpinner.DECREMENT_HOUR24_VALUE')
* t('TimeSpinner.DECREMENT_MINUTE_VALUE')
* t('TimeSpinner.DECREMENT_SECOND_VALUE')
*/
Loading

0 comments on commit d4a6663

Please sign in to comment.