Skip to content

Commit 0a1b231

Browse files
Revert "TSFF-284 - tar bort nav-datovelger (#5887)"
This reverts commit 7d2c037.
1 parent 0f1d6ac commit 0a1b231

File tree

33 files changed

+727
-157
lines changed

33 files changed

+727
-157
lines changed

.storybook/preview.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import '@fpsak-frontend/assets/styles/global.css';
2+
import '@navikt/ds-css';
23
import '@navikt/ft-plattform-komponenter/dist/style.css';
34
import { Preview } from '@storybook/react';
45
import { initialize, mswLoader } from 'msw-storybook-addon';

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"[email protected]": "patch:nav-frontend-skjema@npm%3A4.0.6#./.yarn/patches/nav-frontend-skjema-npm-4.0.6-34e6189688.patch",
141141
"[email protected]": "patch:nav-frontend-tabs@npm%3A2.0.3#./.yarn/patches/nav-frontend-tabs-npm-2.0.3-3d1b6739cc.patch",
142142
"[email protected]": "patch:nav-frontend-typografi@npm%3A4.0.2#./.yarn/patches/nav-frontend-typografi-npm-4.0.2-67ec896090.patch",
143+
"[email protected]": "patch:nav-datovelger@npm%3A12.6.0#./.yarn/patches/nav-datovelger-npm-12.6.0-36eb0faa79.patch",
143144
"@editorjs/editorjs": "2.27.2"
144145
},
145146
"msw": {

packages/fakta-arbeidsforhold/src/components/BekreftOgFortsettKnapp.spec.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { BekreftOgForsettKnapp } from './BekreftOgForsettKnapp';
77
describe('<BekreftOgForsettKnapp>', () => {
88
it('Skal vise en enablet hovedknapp hvis readOnly og isSubmitting er false', () => {
99
renderWithIntl(<BekreftOgForsettKnapp readOnly={false} isSubmitting={false} />, { messages });
10+
screen.debug();
1011
expect(screen.getByRole('button', { name: 'Bekreft og fortsett' })).not.toBeDisabled();
1112
});
1213
it('Skal vise en disablet hovedknapp hvis readOnly er true', () => {

packages/fakta-medisinsk-vilkår/src/ui/components/strukturer-dokument-form/StrukturerDokumentForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const StrukturerDokumentForm = ({
8989
label="Hvilken dato er dokumentet datert?"
9090
defaultValue=""
9191
validators={{ required, dateIsNotInTheFuture }}
92-
toDate={dateConstants.today.toDate()}
92+
limitations={{ maxDate: dateConstants.today.toISOString() }}
9393
inputId="datertField"
9494
/>
9595
</Box>

packages/fakta-medisinsk-vilkår/src/ui/components/strukturer-dokument-opplaeringspenger-form/StrukturerDokumentOpplaeringspengerForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const StrukturerDokumentOpplaeringspengerForm = ({
8888
label="Hvilken dato er dokumentet datert?"
8989
defaultValue=""
9090
validators={{ required, dateIsNotInTheFuture }}
91-
toDate={dateConstants.today.toDate()}
91+
limitations={{ maxDate: dateConstants.today.toISOString() }}
9292
inputId="datertField"
9393
/>
9494
</Box>

packages/fakta-medisinsk-vilkår/src/ui/components/strukturer-dokument-sluttfase-form/StrukturerDokumentSluttfaseForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const StrukturerDokumentSluttfaseForm = ({
8080
label="Hvilken dato er dokumentet datert?"
8181
defaultValue=""
8282
validators={{ required, dateIsNotInTheFuture }}
83-
toDate={dateConstants.today.toDate()}
83+
limitations={{ maxDate: dateConstants.today.toISOString() }}
8484
inputId="datertField"
8585
/>
8686
</Box>

packages/fakta-overstyr-beregning/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@navikt/ds-react": "6.5.0",
1313
"date-fns": "2.30.0",
1414
"formik": "2.4.6",
15+
"nav-datovelger": "12.6.0",
1516
"nav-frontend-core": "6.0.1",
1617
"nav-frontend-lenker": "2.0.2",
1718
"nav-frontend-lenker-style": "2.0.2",

packages/fakta-overstyr-beregning/src/components/OverstyrBeregningAktivitetForm.tsx

+31-25
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Datepicker } from '@fpsak-frontend/shared-components';
21
import { parseCurrencyInput } from '@fpsak-frontend/utils';
32
import { Table, TextField } from '@navikt/ds-react';
43
import { Field, useFormikContext } from 'formik';
4+
import { Datepicker } from 'nav-datovelger';
55
import React from 'react';
66
import { WrappedComponentProps, injectIntl } from 'react-intl';
77
import { OverstyrInputForBeregningDto } from '../types/OverstyrInputForBeregningDto';
@@ -48,7 +48,6 @@ const OverstyrBeregningAktivitetForm: React.FC<Props & WrappedComponentProps> =
4848
value={parseCurrencyInput(field.value)}
4949
error={meta.touched && meta.error ? meta.error : false}
5050
disabled={readOnly}
51-
hideLabel
5251
/>
5352
)}
5453
</Field>
@@ -75,25 +74,28 @@ const OverstyrBeregningAktivitetForm: React.FC<Props & WrappedComponentProps> =
7574
value={parseCurrencyInput(field.value)}
7675
error={meta.touched && meta.error ? meta.error : false}
7776
disabled={readOnly || !skalKunneEndreRefusjon}
78-
hideLabel
7977
/>
8078
)}
8179
</Field>
8280
</Table.DataCell>
8381
<Table.DataCell>
8482
<Field name={`perioder.${periodeIndex}.aktivitetliste.${aktivitetIndex}.startdatoRefusjon`}>
8583
{({ field, meta }) => (
86-
<Datepicker
87-
label={intl.formatMessage({ id: 'OverstyrInputForm.StartdatoRefusjonPlaceholder' })}
88-
hideLabel
89-
error={meta.touched && meta.error ? meta.error : ''}
90-
value={field.value}
91-
onChange={value => {
92-
setFieldTouched(field.name, true);
93-
setFieldValue(field.name, value);
94-
}}
95-
disabled={readOnly}
96-
/>
84+
<>
85+
<Datepicker
86+
inputProps={{
87+
placeholder: intl.formatMessage({ id: 'OverstyrInputForm.StartdatoRefusjonPlaceholder' }),
88+
'aria-invalid': !!(meta.touched && meta.error),
89+
}}
90+
value={field.value}
91+
onChange={value => {
92+
setFieldTouched(field.name, true);
93+
setFieldValue(field.name, value);
94+
}}
95+
disabled={readOnly}
96+
/>
97+
{meta.touched && meta.error && <p className={styles.errorText}>{meta.error}</p>}
98+
</>
9799
)}
98100
</Field>
99101
</Table.DataCell>
@@ -102,17 +104,21 @@ const OverstyrBeregningAktivitetForm: React.FC<Props & WrappedComponentProps> =
102104
{({ field, meta }) => {
103105
const tallverdi = values.perioder[periodeIndex].aktivitetliste[aktivitetIndex].refusjonPrAar;
104106
return (
105-
<Datepicker
106-
label={intl.formatMessage({ id: 'OverstyrInputForm.OpphorRefusjonPlaceholder' })}
107-
hideLabel
108-
error={meta.touched && meta.error ? meta.error : ''}
109-
value={field.value}
110-
onChange={value => {
111-
setFieldTouched(field.name, true);
112-
setFieldValue(field.name, value);
113-
}}
114-
disabled={(Number(tallverdi) || 0) <= 0 || !Number(tallverdi) || readOnly || !skalKunneEndreRefusjon}
115-
/>
107+
<>
108+
<Datepicker
109+
inputProps={{
110+
placeholder: intl.formatMessage({ id: 'OverstyrInputForm.OpphorRefusjonPlaceholder' }),
111+
'aria-invalid': !!(meta.touched && meta.error),
112+
}}
113+
value={field.value}
114+
onChange={value => {
115+
setFieldTouched(field.name, true);
116+
setFieldValue(field.name, value);
117+
}}
118+
disabled={(Number(tallverdi) || 0) <= 0 || !Number(tallverdi) || readOnly || !skalKunneEndreRefusjon}
119+
/>
120+
{meta.touched && meta.error && <p className={styles.errorText}>{meta.error}</p>}
121+
</>
116122
);
117123
}}
118124
</Field>

packages/form/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export { default as CheckboxField } from './src/CheckboxField';
22
export { default as DatepickerField } from './src/DatepickerField';
3-
export {default as PureDatepicker} from './src/PureDatepicker'
43
export { default as DecimalField } from './src/DecimalField';
54
export { default as InputField } from './src/InputField';
65
export { default as ReadOnlyField } from './src/ReadOnlyField';

packages/form/index.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export { default as CheckboxField } from './src/CheckboxField';
2+
export { default as DatepickerField } from './src/DatepickerField';
3+
export { default as DecimalField } from './src/DecimalField';
4+
export { default as InputField } from './src/InputField';
5+
export { default as ReadOnlyField } from './src/ReadOnlyField';
6+
export { default as NavFieldGroup } from './src/NavFieldGroup';
7+
export { default as RadioGroupField } from './src/RadioGroupField';
8+
export { default as RadioOption } from './src/RadioOption';
9+
export { default as SelectField } from './src/SelectField';
10+
export { default as SelectFieldFormik } from './src/SelectFieldFormik';
11+
export { default as TextAreaField } from './src/TextAreaField';
12+
export { default as TextFieldFormik } from './src/TextFieldFormik';
13+
export { default as TextAreaFormik } from './src/TextAreaFormik';
14+
export { default as PeriodpickerField } from './src/PeriodpickerField';
15+
export { default as AutocompleteField } from './src/AutocompleteField';
16+
export { default as CheckboxGroupFormik } from './src/CheckboxGroupFormik';
17+
export { default as FormState } from './src/FormState';
18+
export { default as Label } from './src/Label';
19+
20+
export {
21+
behandlingForm,
22+
behandlingFormValueSelector,
23+
hasBehandlingFormErrorsOfType,
24+
isBehandlingFormDirty,
25+
getBehandlingFormName,
26+
isBehandlingFormSubmitting,
27+
getBehandlingFormValues,
28+
getBehandlingFormInitialValues,
29+
getBehandlingFormSyncErrors,
30+
getBehandlingFormPrefix,
31+
} from './src/behandlingForm';
32+
33+
export { default as CheckboxGroupRHF } from './src/hook-form/CheckboxGroup';
34+
export { default as DatepickerRHF } from './src/hook-form/Datepicker';
35+
export { default as PeriodpickerListRHF } from './src/hook-form/PeriodpickerList';
36+
export { default as RadioGroupPanelRHF } from './src/hook-form/RadioGroupPanel';
37+
export { default as YesOrNoQuestionRHF } from './src/hook-form/YesOrNoQuestion';
38+
export { default as TextAreaRHF } from './src/hook-form/TextArea';

packages/form/src/DatepickerField.spec.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import DatepickerField from './DatepickerField';
66

77
describe('<DatepickerField>', () => {
88
it('skal formatere fra ISO-format til norsk datoformat', () => {
9-
renderWithIntlAndReduxForm(<DatepickerField name="testDato" label="test" />, {
9+
renderWithIntlAndReduxForm(<DatepickerField name="testDato" />, {
1010
messages,
1111
initialValues: { testDato: '2017-02-01' },
1212
});
1313

1414
expect(screen.getByRole('textbox')).toBeInTheDocument();
15-
expect(screen.getByRole('textbox', { name: 'test' })).toBeInTheDocument();
15+
expect(screen.getByPlaceholderText('dd.mm.åååå')).toBeInTheDocument();
1616
expect(screen.getByDisplayValue('01.02.2017')).toBeInTheDocument();
1717
});
1818
});

packages/form/src/DatepickerField.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { ACCEPTED_DATE_INPUT_FORMATS, DDMMYYYY_DATE_FORMAT, ISO_DATE_FORMAT } fr
33
import moment from 'moment';
44
import React from 'react';
55
import { Field } from 'redux-form';
6-
import LabelType from './LabelType';
76
import ReadOnlyField from './ReadOnlyField';
87
import renderNavField from './renderNavField';
8+
import LabelType from './LabelType';
99

1010
interface DatepickerFieldProps {
1111
name: string;
12-
label: LabelType;
12+
label?: LabelType;
1313
readOnly?: boolean;
1414
format?: (value: string) => string;
1515
parse?: (value: string) => string;
@@ -25,7 +25,6 @@ interface DatepickerFieldProps {
2525
after: Date;
2626
};
2727
dataId?: string;
28-
hideLabel?: boolean;
2928
}
3029

3130
const isoToDdMmYyyy = (string: string): string => {
@@ -63,6 +62,7 @@ const DatepickerField = ({ name, label, readOnly, format, parse, isEdited, ...ot
6362
);
6463

6564
DatepickerField.defaultProps = {
65+
label: '',
6666
readOnly: false,
6767
isEdited: false,
6868
format: value => value,

packages/form/src/hook-form/Datepicker.tsx

+21-4
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,46 @@
1-
import { Datepicker as SharedDatepicker } from '@fpsak-frontend/shared-components';
21
import React from 'react';
32
import { Controller, useFormContext } from 'react-hook-form';
3+
import { DatepickerLimitations } from './pure/DatepickerLimitations';
4+
import PureDatepicker from './pure/PureDatepicker';
45

56
export interface DatepickerProps {
67
label?: string;
78
name: string;
89
validators?: { [key: string]: (v: any) => string | boolean | undefined };
10+
ariaLabel?: string;
911
defaultValue?: string;
1012
fromDate?: Date;
1113
toDate?: Date;
14+
/**
15+
* @deprecated Bruk disabledDays, fromDate og toDate istedet.
16+
*/
17+
limitations?: DatepickerLimitations;
1218
error?: string;
1319
inputId?: string;
1420
disabled?: boolean;
21+
disabledDays?: {
22+
from: Date;
23+
to?: Date;
24+
}[];
1525
}
1626

1727
const Datepicker = ({
1828
name,
1929
validators,
30+
limitations,
2031
label,
32+
ariaLabel,
2133
defaultValue,
2234
error,
2335
inputId,
2436
disabled,
2537
fromDate,
2638
toDate,
39+
disabledDays,
2740
}: DatepickerProps): JSX.Element => {
2841
const { control, formState } = useFormContext();
2942
const { errors } = formState;
30-
const disabledDays = { before: fromDate, after: toDate };
43+
3144
return (
3245
<Controller
3346
control={control}
@@ -41,13 +54,17 @@ const Datepicker = ({
4154
render={({ field }) => {
4255
const { onChange, value } = field;
4356
return (
44-
<SharedDatepicker
57+
<PureDatepicker
4558
label={label}
4659
onChange={onChange}
4760
value={value}
48-
error={error || (errors[name]?.message as string)}
61+
errorMessage={error || (errors[name]?.message as string)}
62+
limitations={limitations}
63+
ariaLabel={ariaLabel}
4964
inputId={inputId}
5065
disabled={disabled}
66+
fromDate={fromDate}
67+
toDate={toDate}
5168
disabledDays={disabledDays}
5269
/>
5370
);

packages/form/src/hook-form/PeriodpickerList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/* eslint-disable react/jsx-props-no-spreading */
2-
import { Period } from '@fpsak-frontend/utils';
32
import { ErrorMessage } from '@navikt/ds-react';
43
import { Box, Margin } from '@navikt/ft-plattform-komponenter';
4+
import { Period } from '@fpsak-frontend/utils';
55
import React from 'react';
66
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
7-
import { DatepickerLimitations } from '../DatepickerLimitations';
8-
import PureDatepicker from '../PureDatepicker';
7+
import { DatepickerLimitations } from './pure/DatepickerLimitations';
8+
import PureDatepicker from './pure/PureDatepicker';
99
import styles from './periodpickerList.module.css';
1010

1111
interface DatepickerProps {

packages/form/src/PureDatepicker.tsx packages/form/src/hook-form/pure/PureDatepicker.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable react/jsx-props-no-spreading */
22
/* eslint-disable camelcase */
33
/* eslint-disable react/jsx-pascal-case */
4-
import { DDMMYYYY_DATE_FORMAT } from '@fpsak-frontend/utils';
54
import { DatePicker, useDatepicker } from '@navikt/ds-react';
65
import dayjs from 'dayjs';
76
import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -55,15 +54,14 @@ const PureDatepicker = ({
5554
ariaLabel,
5655
hideLabel,
5756
}: PureDatepickerProps): JSX.Element => {
58-
const stringToDate = (date: string | Date): Date =>
59-
dayjs(date, [ISO_DATE_FORMAT, DDMMYYYY_DATE_FORMAT, 'YYYY.MM.DD'], true).toDate();
57+
const stringToDate = (date: string | Date): Date => new Date(date);
6058
const [ugyldigDatoError, setUgyldigDatoError] = React.useState(false);
6159

6260
const { datepickerProps, inputProps } = useDatepicker({
6361
fromDate: limitations && limitations.minDate ? new Date(limitations.minDate) : fromDate,
6462
toDate: limitations && limitations.maxDate ? new Date(limitations.maxDate) : toDate,
6563
defaultMonth: initialMonth ? new Date(initialMonth) : undefined,
66-
defaultSelected: value ? stringToDate(value) : undefined,
64+
defaultSelected: value ? stringToDate(stringToDate(value)) : undefined,
6765
disabled:
6866
limitations && limitations.invalidDateRanges
6967
? limitations.invalidDateRanges.map(range => ({

packages/form/src/renderNavField.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ const renderNavField = WrappedNavFieldComponent => {
5050
);
5151
};
5252

53+
// FieldComponent.defaultProps = {
54+
// readOnly: false,
55+
// readOnlyHideEmpty: false,
56+
// isEdited: false,
57+
// };
58+
5359
return FieldComponent;
5460
};
5561

packages/modal-sett-pa-vent/src/components/SettPaVentModal.spec.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('<SettPaVentModal>', () => {
2929

3030
expect(screen.getByRole('dialog')).toBeInTheDocument();
3131
expect(screen.getAllByRole('button', { name: 'Lukk' }).length).toBe(2);
32-
expect(screen.getAllByText('Behandlingen er satt på vent med frist:')).toHaveLength(2);
32+
expect(screen.getByText('Behandlingen er satt på vent med frist:')).toBeInTheDocument();
3333
});
3434

3535
it('skal ikke disable knapp for lagring når frist er en gyldig fremtidig dato', () => {
@@ -153,7 +153,7 @@ describe('<SettPaVentModal>', () => {
153153
{ messages },
154154
);
155155

156-
expect(screen.getByRole('textbox', { name: 'Behandlingen settes på vent med frist' })).toBeInTheDocument();
156+
expect(screen.getByPlaceholderText('dd.mm.åååå')).toBeInTheDocument();
157157
});
158158

159159
it('skal vise årsak-input som readonly når behandling automatisk er satt på vent', () => {

packages/modal-sett-pa-vent/src/components/SettPaVentModal.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -216,8 +216,6 @@ export const SettPaVentModal = ({
216216
name="frist"
217217
validate={[required, hasValidDate, dateAfterOrEqualToToday]}
218218
data-testid="datofelt"
219-
label={getPaVentText(originalVentearsak, hasManualPaVent, frist, originalFrist, showEndreFrist)}
220-
hideLabel
221219
/>
222220
</div>
223221
)}

0 commit comments

Comments
 (0)