apps.websight-package-manager.web-resources.components.modals.ScheduleValueRow.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of websight-package-manager-view Show documentation
Package Manager View module is responsible for view part of Package Manager.
The newest version!
import React from "/apps/websight-atlaskit-esm/web-resources/react.js";
import Button from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/button.js";
import { DateTimePicker } from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/datetime-picker.js";
import { HelperMessage } from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/form.js";
import Select from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/select.js";
import Textfield from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/textfield.js";
import styled from "/apps/websight-atlaskit-esm/web-resources/styled-components.js";
import { colors } from "/apps/websight-admin/web-resources/theme.js";
import { LOCALE } from "/apps/websight-admin/web-resources/DateUtils.js";
const ScheduleValueContainer = styled.div`
    display: flex;
    padding-bottom: 10px;
    align-items: flex-start;
`;
const ScheduleValueTypeContainer = styled.div`
    margin: 0px 15px 0px;
    flex: 1 1 70px;
`;
const ScheduleValueFieldContainer = styled.div`
    flex: 9 1 200px;
`;
const RemoveIconContainer = styled.i`
    font-size: 20px;
    margin-top: 6px;
`;
const removeScheduleButtonStyle = {
  backgroundColor: colors.white,
  padding: 0,
  display: 'inline'
};
const expressionGeneratorHelperStyle = {
  textDecoration: 'none',
  cursor: 'pointer'
};

const newSchedule = (newScheduleType, serverDateTimeOffset) => newScheduleType === 'at' ? {
  at: {
    date: serverDateTimeOffset.getIsoDateString(),
    time: serverDateTimeOffset.getSimpleTimeString()
  }
} : {
  cron: ''
};

const getScheduleValueField = (schedule, serverDateTimeOffset, onUpdate) => {
  return /*#__PURE__*/React.createElement(ScheduleValueFieldContainer, null, schedule.at ? /*#__PURE__*/React.createElement(DateTimePicker, {
    timeIsEditable: true,
    spacing: "compact",
    locale: LOCALE,
    datePickerProps: {
      value: schedule.at.date,
      onChange: newDate => onUpdate({
        at: {
          date: newDate,
          time: schedule.at.time
        }
      })
    },
    timePickerProps: {
      value: schedule.at.time,
      onChange: newTime => onUpdate({
        at: {
          date: schedule.at.date,
          time: newTime
        }
      })
    }
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textfield, {
    autocomplete: "off",
    placeholder: "Example: 0 0 0 * * ?",
    isCompact: true,
    defaultValue: schedule.cron,
    onChange: event => onUpdate({
      cron: event.target.value
    })
  }), /*#__PURE__*/React.createElement(HelperMessage, null, /*#__PURE__*/React.createElement("a", {
    href: "https://sojinantony01.github.io/react-cron-generator/",
    style: expressionGeneratorHelperStyle,
    target: "_blank",
    rel: "noreferrer"
  }, "Use expression generator"))));
};

const SCHEDULE_TYPES_OPTIONS = [{
  value: 'at',
  label: 'at'
}, {
  value: 'cron',
  label: 'cron'
}];

const ScheduleValueRow = props => {
  const {
    schedule
  } = props;

  if (!schedule) {
    return null;
  }

  return /*#__PURE__*/React.createElement(ScheduleValueContainer, null, /*#__PURE__*/React.createElement(ScheduleValueTypeContainer, null, /*#__PURE__*/React.createElement(Select, {
    className: "single-select",
    classNamePrefix: "react-select",
    spacing: "compact",
    isRequired: true,
    options: SCHEDULE_TYPES_OPTIONS,
    menuPortalTarget: document.body,
    styles: {
      menuPortal: base => ({ ...base,
        zIndex: 9999
      })
    },
    onChange: newScheduleType => props.update(newSchedule(newScheduleType.value, props.serverDateTimeOffset)),
    value: schedule.at ? SCHEDULE_TYPES_OPTIONS[0] : SCHEDULE_TYPES_OPTIONS[1]
  })), getScheduleValueField(schedule, props.serverDateTimeOffset, props.update), /*#__PURE__*/React.createElement(Button, {
    style: removeScheduleButtonStyle,
    appearance: "subtle",
    spacing: "compact",
    onClick: props.delete,
    title: "Delete schedule"
  }, /*#__PURE__*/React.createElement(RemoveIconContainer, {
    className: "material-icons"
  }, "delete")));
};

export default ScheduleValueRow;