@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.0 → 23.10.18

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -1,63 +0,0 @@
-import { MouseEvent, useState } from 'react';
-
-import { useAtomValue, useSetAtom } from 'jotai';
-
-import {
-  changeCustomTimePeriodDerivedAtom,
-  customTimePeriodAtom
-} from '../timePeriodsAtoms';
-
-import CompactCustomTimePeriod from './CompactCustomTimePeriod';
-import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
-
-interface Props {
-  disabled?: boolean;
-  width: number;
-}
-
-const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
-
-  const customTimePeriod = useAtomValue(customTimePeriodAtom);
-  const changeCustomTimePeriod = useSetAtom(changeCustomTimePeriodDerivedAtom);
-
-  const acceptDate = ({ property, date }): void =>
-    changeCustomTimePeriod({ date, property });
-
-  const onClickCompactCustomTimePeriod = (
-    event: MouseEvent<HTMLButtonElement>
-  ): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const closePopover = (): void => {
-    setAnchorEl(undefined);
-  };
-
-  return (
-    <>
-      <CompactCustomTimePeriod
-        disabled={disabled}
-        width={width}
-        onClick={onClickCompactCustomTimePeriod}
-      />
-      <PopoverCustomTimePeriod
-        pickersData={{
-          acceptDate,
-          customTimePeriod,
-          isDisabledEndPicker: disabled,
-          isDisabledStartPicker: disabled,
-          rangeEndDate: { min: customTimePeriod.start },
-          rangeStartDate: { max: customTimePeriod.end }
-        }}
-        popoverData={{
-          anchorEl,
-          onClose: closePopover,
-          open: Boolean(anchorEl)
-        }}
-      />
-    </>
-  );
-};
-
-export default CustomTimePeriod;

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -1,99 +0,0 @@
-import { useState } from 'react';
-
-import dayjs from 'dayjs';
-
-import { TextFieldProps } from '@mui/material';
-import { DesktopDateTimePicker } from '@mui/x-date-pickers';
-
-import { TextField } from '@centreon/ui';
-
-import { DateTimePickerInputModel } from './models';
-import useDateTimePickerAdapter from './useDateTimePickerAdapter';
-
-const renderDateTimePickerTextField =
-  (blur: () => void) =>
-  ({ inputRef, inputProps, InputProps }: TextFieldProps): JSX.Element => {
-    return (
-      <TextField
-        // eslint-disable-next-line react/no-unstable-nested-components
-        EndAdornment={(): JSX.Element => <div>{InputProps?.endAdornment}</div>}
-        dataTestId="calendar"
-        inputProps={{
-          ...inputProps,
-          ref: inputRef,
-          style: { padding: 8 }
-        }}
-        onBlur={blur}
-      />
-    );
-  };
-
-const DateTimePickerInput = ({
-  date,
-  maxDate,
-  minDate,
-  property,
-  changeDate,
-  setDate,
-  onClosePicker,
-  disabled = false
-}: DateTimePickerInputModel): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { getDestinationAndConfiguredTimezoneOffset, formatKeyboardValue } =
-    useDateTimePickerAdapter();
-
-  const changeTime = (
-    newValue: dayjs.Dayjs | null,
-    keyBoardValue: string | undefined
-  ): void => {
-    if (isOpen) {
-      changeDate({ date: dayjs(newValue).toDate(), property });
-
-      return;
-    }
-    const value = dayjs(formatKeyboardValue(keyBoardValue))
-      .add(
-        dayjs.duration({ hours: getDestinationAndConfiguredTimezoneOffset() })
-      )
-      .toDate();
-
-    setDate(value);
-  };
-
-  const blur = (): void => {
-    changeDate({ date, property });
-  };
-  const close = (): void => {
-    setIsOpen(false);
-    onClosePicker?.(true);
-  };
-
-  const open = (): void => {
-    setIsOpen(true);
-    onClosePicker?.(false);
-  };
-
-  return (
-    <DesktopDateTimePicker<dayjs.Dayjs>
-      hideTabs
-      PopperProps={{
-        open: isOpen
-      }}
-      dayOfWeekFormatter={(day: string): string =>
-        day.substring(0, 2).toUpperCase()
-      }
-      disabled={disabled}
-      maxDate={maxDate && dayjs(maxDate)}
-      minDate={minDate && dayjs(minDate)}
-      open={isOpen}
-      renderInput={renderDateTimePickerTextField(blur)}
-      value={date as dayjs.Dayjs}
-      onChange={changeTime}
-      onClose={close}
-      onOpen={open}
-    />
-  );
-};
-
-export default DateTimePickerInput;

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -1,99 +0,0 @@
-import { useAtomValue, useSetAtom } from 'jotai';
-import { T, always, cond, equals, lte, map, pick } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
-
-import { TimePeriod, timePeriods } from './models';
-import {
-  changeSelectedTimePeriodDerivedAtom,
-  selectedTimePeriodAtom
-} from './timePeriodsAtoms';
-import useSortTimePeriods from './useSortTimePeriods';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    fontSize: theme.typography.body2.fontSize,
-    pointerEvents: 'all'
-  },
-  buttonGroup: {
-    alignSelf: 'center',
-    height: '100%'
-  }
-}));
-
-interface Props {
-  disabled?: boolean;
-  extraTimePeriods?: Array<TimePeriod>;
-  width: number;
-}
-
-const SelectedTimePeriod = ({
-  width,
-  disabled = false,
-  extraTimePeriods = []
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const theme = useTheme();
-
-  const selectedTimePeriodData = useAtomValue(selectedTimePeriodAtom);
-
-  const changeSelectedTimePeriod = useSetAtom(
-    changeSelectedTimePeriodDerivedAtom
-  );
-
-  const currentTimePeriods = useSortTimePeriods([
-    ...timePeriods,
-    ...extraTimePeriods
-  ]);
-
-  const timePeriodOptions = map(
-    pick(['id', 'name', 'largeName']),
-    currentTimePeriods
-  );
-
-  return (
-    <div>
-      <ButtonGroup
-        className={classes.buttonGroup}
-        color="primary"
-        component="span"
-        disabled={disabled}
-        size="small"
-      >
-        {map(
-          ({ id, name, largeName }) => (
-            <Tooltip key={name} placement="top" title={largeName}>
-              <Button
-                className={classes.button}
-                component="span"
-                data-testid={id}
-                variant={
-                  equals(selectedTimePeriodData?.id, id)
-                    ? 'contained'
-                    : 'outlined'
-                }
-                onClick={(): void =>
-                  changeSelectedTimePeriod({
-                    id,
-                    timePeriods: currentTimePeriods
-                  })
-                }
-              >
-                {
-                  cond<number, string>([
-                    [lte(theme.breakpoints.values.md), always(largeName)],
-                    [T, always(name)]
-                  ])(width) as string
-                }
-              </Button>
-            </Tooltip>
-          ),
-          timePeriodOptions
-        )}
-      </ButtonGroup>
-    </div>
-  );
-};
-
-export default SelectedTimePeriod;