@hisptz/react-ui/build/es/components/PeriodSelector/PeriodSelector.stories.js

A collection of reusable complex DHIS2 react ui components.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from "react";
import { CalendarTypes } from "./components/CalendarSpecificPeriodDimension/constants/calendar";
import PeriodSelector from "./index";

const Template = (args, context) => /*#__PURE__*/React.createElement(PeriodSelector, _extends({}, args, context));

export const Default = Template.bind({});
Default.args = {
  onSelect: _ref => {
    let {
      items
    } = _ref;
    console.log(items);
  },
  selectedPeriods: [],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN
};
export const Ethiopian = Template.bind({});
Ethiopian.args = {
  onSelect: _ref2 => {
    let {
      items
    } = _ref2;
    console.log(items);
  },
  selectedPeriods: [],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.ETHIOPIAN
};
export const ExcludedFixedPeriodTypes = Template.bind({});
ExcludedFixedPeriodTypes.args = {
  onSelect: _ref3 => {
    let {
      items
    } = _ref3;
    console.log(items);
  },
  selectedPeriods: [],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN,
  excludeFixedPeriods: true
};
export const ExcludedRelativePeriodTypes = Template.bind({});
ExcludedRelativePeriodTypes.args = {
  onSelect: _ref4 => {
    let {
      items
    } = _ref4;
    console.log(items);
  },
  selectedPeriods: [],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN,
  excludeRelativePeriods: true
};
export const ExcludedPeriodTypes = Template.bind({});
ExcludedPeriodTypes.args = {
  onSelect: _ref5 => {
    let {
      items
    } = _ref5;
    console.log(items);
  },
  selectedPeriods: [],
  excludedPeriodTypes: ["RelativeWeek", "RelativeMonth", "Monthly", "Weekly"],
  calendar: CalendarTypes.GREGORIAN
};
export const SingleSelection = Template.bind({});
SingleSelection.args = {
  onSelect: _ref6 => {
    let {
      items
    } = _ref6;
    console.log(items);
  },
  selectedPeriods: [],
  excludedPeriodTypes: ["RelativeWeek", "RelativeMonth", "Monthly", "Weekly"],
  calendar: CalendarTypes.GREGORIAN
};
export const SelectedDateRangePeriod = Template.bind({});
SelectedDateRangePeriod.args = {
  onSelect: _ref7 => {
    let {
      items
    } = _ref7;
    console.log(items);
  },
  enableDateRange: true,
  selectedPeriods: [{
    startDate: "2022-01-01",
    endDate: "2022-12-31",
    type: "RANGE"
  }],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN
};
export const SelectedPeriods = Template.bind({});
SelectedPeriods.args = {
  onSelect: _ref8 => {
    let {
      items
    } = _ref8;
    console.log(items);
  },
  enableDateRange: true,
  selectedPeriods: [{
    id: "202209",
    name: "September 2022"
  }],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN
};
export const WithAllowedFuturePeriods = Template.bind({});
WithAllowedFuturePeriods.args = {
  onSelect: _ref9 => {
    let {
      items
    } = _ref9;
    console.log(items);
  },
  enableDateRange: true,
  selectedPeriods: [{
    id: "202209",
    name: "September 2022"
  }],
  allowFuturePeriods: false,
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN
};
export const DateRange = Template.bind({});
DateRange.args = {
  onSelect: _ref10 => {
    let {
      items
    } = _ref10;
    console.log(items);
  },
  enableDateRange: true,
  selectedPeriods: [],
  excludedPeriodTypes: [],
  calendar: CalendarTypes.GREGORIAN,
  defaultInputType: "dateRange"
};
export default {
  title: "Components/Period Selector",
  component: PeriodSelector,
  argTypes: {
    selectedPeriods: {
      control: "array"
    },
    calendar: {
      control: "radio",
      options: [CalendarTypes.GREGORIAN, CalendarTypes.ETHIOPIAN]
    }
  },
  decorators: [Story => {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: "100%",
        height: "100%"
      }
    }, /*#__PURE__*/React.createElement(Story, null));
  }]
};