react-js-cron-mantine/dist/esm/fields/Period.js

Fork of [react-js-cron](https://github.com/xrutayisire/react-js-cron), made to work with [mantine](https://mantine.dev)

import React, { useCallback, useMemo } from 'react';
import { DEFAULT_LOCALE_EN } from '../locale';
import { classNames } from '../utils';
import { Select } from '@mantine/core';
export default function Period(props) {
  const {
    value,
    setValue,
    locale,
    className,
    disabled,
    readOnly,
    shortcuts,
    allowedPeriods
  } = props;
  const options = [];
  const newValue = [value];

  if (allowedPeriods.includes('year')) {
    options.push({
      value: 'year',
      label: locale.yearOption || DEFAULT_LOCALE_EN.yearOption
    });
  }

  if (allowedPeriods.includes('month')) {
    options.push({
      value: 'month',
      label: locale.monthOption || DEFAULT_LOCALE_EN.monthOption
    });
  }

  if (allowedPeriods.includes('week')) {
    options.push({
      value: 'week',
      label: locale.weekOption || DEFAULT_LOCALE_EN.weekOption
    });
  }

  if (allowedPeriods.includes('day')) {
    options.push({
      value: 'day',
      label: locale.dayOption || DEFAULT_LOCALE_EN.dayOption
    });
  }

  if (allowedPeriods.includes('hour')) {
    options.push({
      value: 'hour',
      label: locale.hourOption || DEFAULT_LOCALE_EN.hourOption
    });
  }

  if (allowedPeriods.includes('minute')) {
    options.push({
      value: 'minute',
      label: locale.minuteOption || DEFAULT_LOCALE_EN.minuteOption
    });
  }

  if (allowedPeriods.includes('reboot') && shortcuts && (shortcuts === true || shortcuts.includes('@reboot'))) {
    options.push({
      value: 'reboot',
      label: locale.rebootOption || DEFAULT_LOCALE_EN.rebootOption
    });
  }

  const handleChange = useCallback(newValue => {
    if (!readOnly) {
      setValue(newValue);
    }
  }, [setValue, readOnly]);
  const internalClassName = useMemo(() => classNames({
    'react-js-cron-field': true,
    'react-js-cron-period': true,
    [`${className}-field`]: !!className,
    [`${className}-period`]: !!className
  }), [className]);
  const selectClassName = useMemo(() => classNames({
    'react-js-cron-select': true,
    'react-js-cron-select-no-prefix': locale.prefixPeriod === '',
    [`${className}-select`]: !!className
  }), [className, locale.prefixPeriod]);
  const dropdownClassName = useMemo(() => classNames({
    'react-js-cron-select-dropdown': true,
    'react-js-cron-select-dropdown-period': true,
    [`${className}-select-dropdown`]: !!className,
    [`${className}-select-dropdown-period`]: !!className
  }), [className]);
  return React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center'
    }
  }, React.createElement(Select, {
    withinPortal: true,
    label: locale.prefixPeriod !== '' && (locale.prefixPeriod || DEFAULT_LOCALE_EN.prefixPeriod),
    sx: {
      width: '100%'
    },
    key: JSON.stringify(locale),
    value: value,
    onChange: handleChange,
    data: options,
    disabled: disabled
  }));
}