CutOffPicker

CutOffPicker is a component for letting users select cut off types and values to be used with views and reports that use the stbl_System_CutOff table. The values selected by the user will be persisted in the URL search parameters.

The CutOffPicker uses a React context provided by the CutOffProvider component. This way the cut off can easily be shared between pages and components.

By default, the context is set to cut off type "MLD" for the current month.

Usage

import {
  CutOffSelect,
  CutOffProvider,
  useCutOff,
} from "@olenbetong/appframe-mui";
import { useDataWithFilter } from "@olenbetong/appframe-react";

function MyComponent() {
  return (
    <CutOffProvider>
      <CutOffSelect />
      <MyDataComponent />
    </CutOffProvider>
  );
}

function MyDataComponent() {
  let { period, cutOffType } = useCutOff();
  let data = useDataWithFilter(
    dsMyDataObject,
    `[COType] = '${cutOffType}' AND [Period] = '${period}'`
  );

  return (
    <ul>
      {data.map((record) => (
        <li key={record.PrimKey}>{record.Title}</li>
      ))}
    </ul>
  );
}

API

export declare type PeriodType = "AllDates" | "WS" | "MLD" | "QLD" | "YLD";

export declare type PeriodTypeValueMap = {
  [K in PeriodType]: string;
};

export declare type PeriodState = {
  periods: PeriodTypeValueMap;
  period: string;
  cutOffType: PeriodType;
  historyStart: string;
  label: string;
};

export declare type PeriodActions = {
  setPeriod: (type: PeriodType, period: string) => void;
  setCutOffType: (type: PeriodType) => void;
};

export declare const CutOffContext: React.Context<PeriodState & PeriodActions>;

export declare function CutOffProvider({
  children,
}: {
  children: React.ReactNode | React.ReactNode[];
}): JSX.Element;

export declare function useCutOff(): PeriodState & PeriodActions;

export declare function CutOffPicker({
  disabled,
  sx,
}: {
  disabled?: boolean;
  sx?: SxProps;
}): JSX.Element;