feat: add flexibility to PeriodDimension and periods utils

src/components/PeriodDimension/PeriodDimension.js

@@ -19,6 +19,7 @@ const PeriodDimension = ({
     rightFooter,
     excludedPeriodTypes,
     infoBoxMessage,
+    height,
 }) => {
     const { systemInfo } = useConfig()
     const result = useDataQuery(userSettingsQuery)
@@ -43,13 +44,15 @@ const PeriodDimension = ({
             dataTest={'period-dimension'}
             excludedPeriodTypes={excludedPeriodTypes}
             periodsSettings={periodsSettings}
+            height={height}
         />
     )
 }
 
 PeriodDimension.propTypes = {
     onSelect: PropTypes.func.isRequired,
     excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+    height: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     rightFooter: PropTypes.node,
     selectedPeriods: PropTypes.array,

src/components/PeriodDimension/PeriodTransfer.js

@@ -44,6 +44,7 @@ const PeriodTransfer = ({
     excludedPeriodTypes,
     periodsSettings,
     infoBoxMessage,
+    height = TRANSFER_HEIGHT,
 }) => {
     const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY)
         ? getRelativePeriodsOptionsById(QUARTERLY)
@@ -196,7 +197,7 @@ const PeriodTransfer = ({
             selected={selectedItems.map((period) => period.id)}
             leftHeader={renderLeftHeader()}
             enableOrderChange
-            height={TRANSFER_HEIGHT}
+            height={height}
             optionsWidth={TRANSFER_OPTIONS_WIDTH}
             selectedWidth={TRANSFER_SELECTED_WIDTH}
             selectedEmptyComponent={renderEmptySelection()}
@@ -233,6 +234,7 @@ PeriodTransfer.propTypes = {
     onSelect: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
     excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
+    height: PropTypes.string,
     infoBoxMessage: PropTypes.string,
     periodsSettings: PropTypes.shape({
         calendar: PropTypes.string,

src/components/PeriodDimension/__tests__/__snapshots__/relativePeriods.spec.js.snap

@@ -0,0 +1,347 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`relativePeriods utils should correctly return relative periods details 1`] = `
+Object {
+  "BIMONTHS_THIS_YEAR": Object {
+    "duration": 6,
+    "id": "BIMONTHS_THIS_YEAR",
+    "name": "Bi-months this year",
+    "offset": 5,
+    "type": "BIMONTHLY",
+  },
+  "LAST_10_YEARS": Object {
+    "duration": 10,
+    "id": "LAST_10_YEARS",
+    "name": "Last 10 years",
+    "offset": -1,
+    "type": "YEARLY",
+  },
+  "LAST_12_MONTHS": Object {
+    "duration": 12,
+    "id": "LAST_12_MONTHS",
+    "name": "Last 12 months",
+    "offset": -1,
+    "type": "MONTHLY",
+  },
+  "LAST_12_WEEKS": Object {
+    "duration": 12,
+    "id": "LAST_12_WEEKS",
+    "name": "Last 12 weeks",
+    "offset": -1,
+    "type": "WEEKLY",
+  },
+  "LAST_14_DAYS": Object {
+    "duration": 14,
+    "id": "LAST_14_DAYS",
+    "name": "Last 14 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_180_DAYS": Object {
+    "duration": 180,
+    "id": "LAST_180_DAYS",
+    "name": "Last 180 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_2_SIXMONTHS": Object {
+    "duration": 2,
+    "id": "LAST_2_SIXMONTHS",
+    "name": "Last 2 six-month",
+    "offset": -1,
+    "type": "SIXMONTHLY",
+  },
+  "LAST_30_DAYS": Object {
+    "duration": 30,
+    "id": "LAST_30_DAYS",
+    "name": "Last 30 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_3_DAYS": Object {
+    "duration": 3,
+    "id": "LAST_3_DAYS",
+    "name": "Last 3 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_3_MONTHS": Object {
+    "duration": 3,
+    "id": "LAST_3_MONTHS",
+    "name": "Last 3 months",
+    "offset": -1,
+    "type": "MONTHLY",
+  },
+  "LAST_4_BIWEEKS": Object {
+    "duration": 4,
+    "id": "LAST_4_BIWEEKS",
+    "name": "Last 4 bi-weeks",
+    "offset": -1,
+    "type": "BIWEEKLY",
+  },
+  "LAST_4_QUARTERS": Object {
+    "duration": 4,
+    "id": "LAST_4_QUARTERS",
+    "name": "Last 4 quarters",
+    "offset": -1,
+    "type": "QUARTERLY",
+  },
+  "LAST_4_WEEKS": Object {
+    "duration": 4,
+    "id": "LAST_4_WEEKS",
+    "name": "Last 4 weeks",
+    "offset": -1,
+    "type": "WEEKLY",
+  },
+  "LAST_52_WEEKS": Object {
+    "duration": 52,
+    "id": "LAST_52_WEEKS",
+    "name": "Last 52 weeks",
+    "offset": -1,
+    "type": "WEEKLY",
+  },
+  "LAST_5_FINANCIAL_YEARS": Object {
+    "duration": 5,
+    "id": "LAST_5_FINANCIAL_YEARS",
+    "name": "Last 5 financial years",
+    "offset": -1,
+    "type": "FINANCIAL",
+  },
+  "LAST_5_YEARS": Object {
+    "duration": 5,
+    "id": "LAST_5_YEARS",
+    "name": "Last 5 years",
+    "offset": -1,
+    "type": "YEARLY",
+  },
+  "LAST_60_DAYS": Object {
+    "duration": 60,
+    "id": "LAST_60_DAYS",
+    "name": "Last 60 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_6_BIMONTHS": Object {
+    "duration": 6,
+    "id": "LAST_6_BIMONTHS",
+    "name": "Last 6 bi-months",
+    "offset": -1,
+    "type": "BIMONTHLY",
+  },
+  "LAST_6_MONTHS": Object {
+    "duration": 6,
+    "id": "LAST_6_MONTHS",
+    "name": "Last 6 months",
+    "offset": -1,
+    "type": "MONTHLY",
+  },
+  "LAST_7_DAYS": Object {
+    "duration": 7,
+    "id": "LAST_7_DAYS",
+    "name": "Last 7 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_90_DAYS": Object {
+    "duration": 90,
+    "id": "LAST_90_DAYS",
+    "name": "Last 90 days",
+    "offset": -1,
+    "type": "DAILY",
+  },
+  "LAST_BIMONTH": Object {
+    "duration": 1,
+    "id": "LAST_BIMONTH",
+    "name": "Last bi-month",
+    "offset": -1,
+    "type": "BIMONTHLY",
+  },
+  "LAST_BIWEEK": Object {
+    "duration": 1,
+    "id": "LAST_BIWEEK",
+    "name": "Last bi-week",
+    "offset": -1,
+    "type": "BIWEEKLY",
+  },
+  "LAST_FINANCIAL_YEAR": Object {
+    "duration": 1,
+    "id": "LAST_FINANCIAL_YEAR",
+    "name": "Last financial year",
+    "offset": -1,
+    "type": "FINANCIAL",
+  },
+  "LAST_MONTH": Object {
+    "duration": 1,
+    "id": "LAST_MONTH",
+    "name": "Last month",
+    "offset": -1,
+    "type": "MONTHLY",
+  },
+  "LAST_QUARTER": Object {
+    "duration": 1,
+    "id": "LAST_QUARTER",
+    "name": "Last quarter",
+    "offset": -1,
+    "type": "QUARTERLY",
+  },
+  "LAST_SIX_MONTH": Object {
+    "duration": 1,
+    "id": "LAST_SIX_MONTH",
+    "name": "Last six-month",
+    "offset": -1,
+    "type": "SIXMONTHLY",
+  },
+  "LAST_WEEK": Object {
+    "duration": 1,
+    "id": "LAST_WEEK",
+    "name": "Last week",
+    "offset": -1,
+    "type": "WEEKLY",
+  },
+  "LAST_YEAR": Object {
+    "duration": 1,
+    "id": "LAST_YEAR",
+    "name": "Last year",
+    "offset": -1,
+    "type": "YEARLY",
+  },
+  "MONTHS_THIS_YEAR": Object {
+    "duration": 12,
+    "id": "MONTHS_THIS_YEAR",
+    "name": "Months this year",
+    "offset": 11,
+    "type": "MONTHLY",
+  },
+  "QUARTERS_THIS_YEAR": Object {
+    "duration": 4,
+    "id": "QUARTERS_THIS_YEAR",
+    "name": "Quarters this year",
+    "offset": 3,
+    "type": "QUARTERLY",
+  },
+  "THIS_BIMONTH": Object {
+    "duration": 1,
+    "id": "THIS_BIMONTH",
+    "name": "This bi-month",
+    "offset": 0,
+    "type": "BIMONTHLY",
+  },
+  "THIS_BIWEEK": Object {
+    "duration": 1,
+    "id": "THIS_BIWEEK",
+    "name": "This bi-week",
+    "offset": 0,
+    "type": "BIWEEKLY",
+  },
+  "THIS_FINANCIAL_YEAR": Object {
+    "duration": 1,
+    "id": "THIS_FINANCIAL_YEAR",
+    "name": "This financial year",
+    "offset": 0,
+    "type": "FINANCIAL",
+  },
+  "THIS_MONTH": Object {
+    "duration": 1,
+    "id": "THIS_MONTH",
+    "name": "This month",
+    "offset": 0,
+    "type": "MONTHLY",
+  },
+  "THIS_QUARTER": Object {
+    "duration": 1,
+    "id": "THIS_QUARTER",
+    "name": "This quarter",
+    "offset": 0,
+    "type": "QUARTERLY",
+  },
+  "THIS_SIX_MONTH": Object {
+    "duration": 1,
+    "id": "THIS_SIX_MONTH",
+    "name": "This six-month",
+    "offset": 0,
+    "type": "SIXMONTHLY",
+  },
+  "THIS_WEEK": Object {
+    "duration": 1,
+    "id": "THIS_WEEK",
+    "name": "This week",
+    "offset": 0,
+    "type": "WEEKLY",
+  },
+  "THIS_YEAR": Object {
+    "duration": 1,
+    "id": "THIS_YEAR",
+    "name": "This year",
+    "offset": 0,
+    "type": "YEARLY",
+  },
+  "TODAY": Object {
+    "duration": 1,
+    "id": "TODAY",
+    "name": "Today",
+    "offset": 0,
+    "type": "DAILY",
+  },
+  "WEEKS_THIS_YEAR": Object {
+    "duration": 52,
+    "id": "WEEKS_THIS_YEAR",
+    "name": "Weeks this year",
+    "offset": 51,
+    "type": "WEEKLY",
+  },
+  "YESTERDAY": Object {
+    "duration": 1,
+    "id": "YESTERDAY",
+    "name": "Yesterday",
+    "offset": -1,
+    "type": "DAILY",
+  },
+}
+`;
+
+exports[`relativePeriods utils should correctly return relative periods names 1`] = `
+Object {
+  "BIMONTHS_THIS_YEAR": "Bi-months this year",
+  "LAST_10_YEARS": "Last 10 years",
+  "LAST_12_MONTHS": "Last 12 months",
+  "LAST_12_WEEKS": "Last 12 weeks",
+  "LAST_14_DAYS": "Last 14 days",
+  "LAST_180_DAYS": "Last 180 days",
+  "LAST_2_SIXMONTHS": "Last 2 six-month",
+  "LAST_30_DAYS": "Last 30 days",
+  "LAST_3_DAYS": "Last 3 days",
+  "LAST_3_MONTHS": "Last 3 months",
+  "LAST_4_BIWEEKS": "Last 4 bi-weeks",
+  "LAST_4_QUARTERS": "Last 4 quarters",
+  "LAST_4_WEEKS": "Last 4 weeks",
+  "LAST_52_WEEKS": "Last 52 weeks",
+  "LAST_5_FINANCIAL_YEARS": "Last 5 financial years",
+  "LAST_5_YEARS": "Last 5 years",
+  "LAST_60_DAYS": "Last 60 days",
+  "LAST_6_BIMONTHS": "Last 6 bi-months",
+  "LAST_6_MONTHS": "Last 6 months",
+  "LAST_7_DAYS": "Last 7 days",
+  "LAST_90_DAYS": "Last 90 days",
+  "LAST_BIMONTH": "Last bi-month",
+  "LAST_BIWEEK": "Last bi-week",
+  "LAST_FINANCIAL_YEAR": "Last financial year",
+  "LAST_MONTH": "Last month",
+  "LAST_QUARTER": "Last quarter",
+  "LAST_SIX_MONTH": "Last six-month",
+  "LAST_WEEK": "Last week",
+  "LAST_YEAR": "Last year",
+  "MONTHS_THIS_YEAR": "Months this year",
+  "QUARTERS_THIS_YEAR": "Quarters this year",
+  "THIS_BIMONTH": "This bi-month",
+  "THIS_BIWEEK": "This bi-week",
+  "THIS_FINANCIAL_YEAR": "This financial year",
+  "THIS_MONTH": "This month",
+  "THIS_QUARTER": "This quarter",
+  "THIS_SIX_MONTH": "This six-month",
+  "THIS_WEEK": "This week",
+  "THIS_YEAR": "This year",
+  "TODAY": "Today",
+  "WEEKS_THIS_YEAR": "Weeks this year",
+  "YESTERDAY": "Yesterday",
+}
+`;