Duration

Le composant Duration permet à l'utilisateur de renseigner une durée. Elle peut être définie en :

• années / mois (format : PnYnM)
• heures / minutes (format : PTnHnM)

Le composant présente deux champs de saisie, mais la donnée est enregistrée dans une variable commune. Par exemple en renseignant respectivement dans les champs 10 et 7, la valeur de la donnée sera :

• année / mois : "PT10H7M"
• heures / minutes : "P10Y7M"

Si une seule des deux valeurs est renseignée, la seconde prend pour valeur 0 (ex : P0Y5M).

Il est impossible de renseigner une valeur supérieure à 59 minutes (resp. 11 mois).

Source

{
  "components": [
    {
      "id": "kxi788",
      "componentType": "Duration",
      "mandatory": false,
      "format": "PTnHnM",
      "page": "1",
      "maxPage": "1",
      "label": {
        "value": "\"➡ 1. \" || \"Duration (format: PTnHnM) \"",
        "type": "VTL|MD"
      },
      "description": {
        "value": "\"Description\"",
        "type": "VTL|MD"
      },
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "response": {
        "name": "DUREE"
      }
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "DUREE",
      "values": {
        "PREVIOUS": null,
        "COLLECTED": "PT12H50M",
        "FORCED": null,
        "EDITED": null,
        "INPUTTED": null
      }
    }
  ]
}

Data

{}

Code

import {
  type LunaticData,
  type LunaticSource,
  useLunatic,
  LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'

type Props = {
  source: LunaticSource;
  data: LunaticData;
};

export function FormRenderer({ source, data }: Props) {
  const { getComponents, Provider } = useLunatic(source, data, {
    initialPage: '1',
  });
  return (
    <Provider>
      <LunaticComponents components={getComponents()} />
    </Provider>
  );
}

Rendu

Loading...

Source

{
  "components": [
    {
      "id": "kxi788",
      "componentType": "Duration",
      "mandatory": false,
      "format": "PnYnM",
      "page": "1",
      "maxPage": "1",
      "label": {
        "value": "\"➡ 1. \" || \"Duration (format: PnYnM) \"",
        "type": "VTL|MD"
      },
      "description": {
        "value": "\"Description\"",
        "type": "VTL|MD"
      },
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "response": {
        "name": "DUREE"
      }
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "DUREE",
      "values": {
        "PREVIOUS": null,
        "COLLECTED": "P4Y0M",
        "FORCED": null,
        "EDITED": null,
        "INPUTTED": null
      }
    }
  ]
}

Data

{}

Code

import {
  type LunaticData,
  type LunaticSource,
  useLunatic,
  LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'

type Props = {
  source: LunaticSource;
  data: LunaticData;
};

export function FormRenderer({ source, data }: Props) {
  const { getComponents, Provider } = useLunatic(source, data, {
    initialPage: '1',
  });
  return (
    <Provider>
      <LunaticComponents components={getComponents()} />
    </Provider>
  );
}

Rendu

Loading...