pouncejs/dist/esm/components/DateRangeInput/Presets.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { getDates } from '../../utils/helpers';
import Box from '../Box';
import AbstractButton from '../AbstractButton';

var ListItem = function ListItem(_ref) {
  var selected = _ref.selected,
      onSelect = _ref.onSelect,
      rest = _objectWithoutPropertiesLoose(_ref, ["selected", "onSelect"]);

  return /*#__PURE__*/React.createElement(Box, {
    as: "li",
    mb: 6
  }, /*#__PURE__*/React.createElement(AbstractButton, _extends({
    color: "navyblue-100",
    _selected: {
      color: 'white-200'
    },
    _hover: {
      color: 'white-200'
    },
    "aria-selected": selected,
    onClick: onSelect,
    fontSize: "medium"
  }, rest)));
};

var getOptions = function getOptions(timezone) {
  return [{
    id: 'last_day',
    label: 'Last 24 Hours',
    onSelectPreset: function onSelectPreset(callback, setCurrentMonth) {
      return function (e) {
        e.preventDefault();

        var _getDates = getDates(timezone),
            lastDay = _getDates.lastDay,
            nextMonth = _getDates.nextMonth,
            now = _getDates.now;

        setCurrentMonth(nextMonth);
        callback([lastDay, now]);
      };
    }
  }, {
    id: 'last_week',
    label: 'Last Week',
    onSelectPreset: function onSelectPreset(callback, setCurrentMonth) {
      return function (e) {
        e.preventDefault();

        var _getDates2 = getDates(timezone),
            lastWeek = _getDates2.lastWeek,
            nextMonth = _getDates2.nextMonth,
            now = _getDates2.now;

        setCurrentMonth(nextMonth);
        callback([lastWeek, now]);
      };
    }
  }, {
    id: 'last_month',
    label: 'Last Month',
    onSelectPreset: function onSelectPreset(callback, setCurrentMonth) {
      return function (e) {
        e.preventDefault();

        var _getDates3 = getDates(timezone),
            lastMonth = _getDates3.lastMonth,
            nextMonth = _getDates3.nextMonth,
            now = _getDates3.now;

        setCurrentMonth(nextMonth);
        callback([lastMonth, now]);
      };
    }
  }, {
    id: 'last_three_months',
    label: 'Last 3 Months',
    onSelectPreset: function onSelectPreset(callback, setCurrentMonth) {
      return function (e) {
        e.preventDefault();

        var _getDates4 = getDates(timezone),
            lastThreeMonths = _getDates4.lastThreeMonths,
            nextMonth = _getDates4.nextMonth,
            now = _getDates4.now;

        setCurrentMonth(nextMonth);
        callback([lastThreeMonths, now]);
      };
    }
  }, {
    id: 'last_six_months',
    label: 'Last 6 Months',
    onSelectPreset: function onSelectPreset(callback, setCurrentMonth) {
      return function (e) {
        e.preventDefault();

        var _getDates5 = getDates(timezone),
            lastSixMonths = _getDates5.lastSixMonths,
            nextMonth = _getDates5.nextMonth,
            now = _getDates5.now;

        setCurrentMonth(nextMonth);
        callback([lastSixMonths, now]);
      };
    }
  }, {
    id: 'custom',
    label: 'Custom',
    onSelectPreset: function onSelectPreset() {
      return function (e) {
        e.preventDefault();
      };
    }
  }];
};

var Presets = function Presets(_ref2) {
  var _ref2$currentDateRang = _ref2.currentDateRange,
      currentDateRange = _ref2$currentDateRang === void 0 ? [] : _ref2$currentDateRang,
      timezone = _ref2.timezone,
      onSelect = _ref2.onSelect,
      setCurrentMonth = _ref2.setCurrentMonth;
  var selected = React.useMemo(function () {
    var _getDates6 = getDates(timezone),
        now = _getDates6.now,
        lastDay = _getDates6.lastDay,
        lastWeek = _getDates6.lastWeek,
        lastMonth = _getDates6.lastMonth,
        lastThreeMonths = _getDates6.lastThreeMonths,
        lastSixMonths = _getDates6.lastSixMonths;

    var start = currentDateRange[0],
        end = currentDateRange[1];

    if (!start || !end) {
      return 'custom';
    }

    if (!end.isSame(now, 'date')) {
      return 'custom';
    }

    if (start.isSame(lastDay, 'minute')) {
      return 'last_day';
    }

    if (start.isSame(lastWeek, 'date')) {
      return 'last_week';
    }

    if (start.isSame(lastMonth, 'date')) {
      return 'last_month';
    }

    if (start.isSame(lastThreeMonths, 'date')) {
      return 'last_three_months';
    }

    if (start.isSame(lastSixMonths, 'date')) {
      return 'last_six_months';
    }

    return 'custom';
  }, [currentDateRange]);
  return /*#__PURE__*/React.createElement(Box, {
    borderRight: "1px solid",
    borderColor: "navyblue-300"
  }, /*#__PURE__*/React.createElement(Box, {
    p: 6,
    width: "140px"
  }, /*#__PURE__*/React.createElement(Box, {
    as: "ol"
  }, getOptions(timezone).map(function (opt) {
    return /*#__PURE__*/React.createElement(ListItem, {
      "aria-label": opt.label,
      onSelect: opt.onSelectPreset(onSelect, setCurrentMonth),
      selected: selected === opt.id,
      key: opt.id
    }, opt.label);
  }))));
};

export default Presets;