Merge pull request #39 from open-formulieren/issue/105-number-currenc…

…y-null-defaultValue

🐛 Allow null for currency/number components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-formulieren/types",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "Typescript type definitions for Open Forms' Form.io extensions",
   "main": "index.js",
   "module": "./lib/index.js",

src/formio/components/currency.ts

@@ -3,7 +3,7 @@ import {InputComponentSchema} from '..';
 type Validator = 'required' | 'min' | 'max';
 type TranslatableKeys = 'label' | 'description' | 'tooltip';
 
-export type CurrencyInputSchema = InputComponentSchema<number, Validator, TranslatableKeys>;
+export type CurrencyInputSchema = InputComponentSchema<number | null, Validator, TranslatableKeys>;
 
 /**
  * @group Form.io components
@@ -15,5 +15,5 @@ export interface CurrencyComponentSchema extends Omit<CurrencyInputSchema, 'hide
   currency: 'EUR';
   decimalLimit?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   allowNegative?: boolean;
-  defaultValue?: number;
+  defaultValue?: number | null;
 }

src/formio/components/number.ts

@@ -3,7 +3,7 @@ import {InputComponentSchema} from '..';
 type Validator = 'required' | 'min' | 'max';
 type TranslatableKeys = 'label' | 'description' | 'tooltip' | 'suffix';
 
-export type NumberInputSchema = InputComponentSchema<number, Validator, TranslatableKeys>;
+export type NumberInputSchema = InputComponentSchema<number | null, Validator, TranslatableKeys>;
 
 /**
  * @group Form.io components
@@ -12,7 +12,7 @@ export type NumberInputSchema = InputComponentSchema<number, Validator, Translat
 export interface BaseNumberComponentSchema
   extends Omit<NumberInputSchema, 'hideLabel' | 'placeholder'> {
   type: 'number';
-  defaultValue?: number;
+  defaultValue?: number | null;
   /*
     formio does math on `decimalLimit`` and feeds it to lodash.repeat -> must be int at
     runtime. There does not appear to be a more elegant way to only allow positive integers.

test-d/formio/components/currency.test-d.ts

@@ -9,7 +9,17 @@ expectAssignable<CurrencyComponentSchema>({
   key: 'aCurrency',
   label: 'A currency',
   currency: 'EUR',
-} as const);
+});
+
+// no defaultValue, but using formio.js default of `null`
+expectAssignable<CurrencyComponentSchema>({
+  id: '123',
+  type: 'currency',
+  key: 'aCurrency',
+  label: 'A currency',
+  currency: 'EUR',
+  defaultValue: null,
+});
 
 // with additional, number-component specific properties
 expectAssignable<CurrencyComponentSchema>({
@@ -20,7 +30,7 @@ expectAssignable<CurrencyComponentSchema>({
   currency: 'EUR',
   decimalLimit: 3,
   allowNegative: true,
-} as const);
+});
 
 // multiple false (implicit) and appropriate default value type
 expectAssignable<CurrencyComponentSchema>({
@@ -30,43 +40,43 @@ expectAssignable<CurrencyComponentSchema>({
   label: 'A currency',
   currency: 'EUR',
   defaultValue: 3,
-} as const);
+});
 
 // different component type
 expectNotAssignable<CurrencyComponentSchema>({
-  type: 'textfield',
-} as const);
+  type: 'textfield' as const,
+});
 
 // wrong currency
 expectNotAssignable<CurrencyComponentSchema>({
   id: '123',
-  type: 'currency',
+  type: 'currency' as const,
   key: 'aCurrency',
   label: 'A currency',
-  currency: 'dummy',
-} as const);
+  currency: 'dummy' as const,
+});
 
 // using unsupported properties
 expectNotAssignable<CurrencyComponentSchema>({
   id: '123',
-  type: 'currency',
+  type: 'currency' as const,
   key: 'aCurrency',
   label: 'A currency',
-  currency: 'EUR',
+  currency: 'EUR' as const,
   hideLabel: true,
-} as const);
+});
 
 // invalid, only the number validators may be assignable
 expectNotAssignable<CurrencyComponentSchema>({
   id: '123',
-  type: 'currency',
+  type: 'currency' as const,
   key: 'aCurrency',
   label: 'A currency',
-  currency: 'EUR',
+  currency: 'EUR' as const,
   validate: {
     maxLength: 100,
   },
-} as const);
+});
 
 // full, correct schema
 expectAssignable<CurrencyComponentSchema>({
@@ -127,20 +137,20 @@ expectAssignable<CurrencyComponentSchema>({
 // invalid, multiple true
 expectNotAssignable<CurrencyComponentSchema>({
   id: '123',
-  type: 'currency',
+  type: 'currency' as const,
   key: 'aCurrency',
   label: 'A currency',
-  currency: 'EUR',
+  currency: 'EUR' as const,
   multiple: true,
 });
 
 // invalid, multiple false and array default value
 expectNotAssignable<CurrencyComponentSchema>({
   id: '123',
-  type: 'currency',
+  type: 'currency' as const,
   key: 'aCurrency',
   label: 'A currency',
-  currency: 'EUR',
+  currency: 'EUR' as const,
   multiple: false,
   defaultValue: [1],
 });

test-d/formio/components/number.test-d.ts

@@ -8,7 +8,7 @@ expectAssignable<NumberComponentSchema>({
   type: 'number',
   key: 'aNumber',
   label: 'A number',
-} as const);
+});
 
 // with additional, number-component specific properties
 expectAssignable<NumberComponentSchema>({
@@ -18,7 +18,16 @@ expectAssignable<NumberComponentSchema>({
   label: 'A number',
   decimalLimit: 3,
   allowNegative: true,
-} as const);
+});
+
+// no defaultValue, but using formio.js default of `null`
+expectAssignable<NumberComponentSchema>({
+  id: '123',
+  type: 'number',
+  key: 'aNumber',
+  label: 'A number',
+  defaultValue: null,
+});
 
 // multiple false (implicit) and appropriate default value type
 expectAssignable<NumberComponentSchema>({
@@ -27,50 +36,50 @@ expectAssignable<NumberComponentSchema>({
   key: 'aNumber',
   label: 'A number',
   defaultValue: 3,
-} as const);
+});
 
 // different component type
 expectNotAssignable<NumberComponentSchema>({
-  type: 'textfield',
-} as const);
+  type: 'textfield' as const,
+});
 
 // using unsupported properties
 expectNotAssignable<NumberComponentSchema>({
   id: '123',
-  type: 'number',
+  type: 'number' as const,
   key: 'aNumber',
   label: 'A number',
   hideLabel: true,
-} as const);
+});
 
 // no multiple support -> no array defaultValue
 expectNotAssignable<NumberComponentSchema>({
   id: '123',
-  type: 'number',
+  type: 'number' as const,
   key: 'aNumber',
   label: 'A number',
   defaultValue: [],
-} as const);
+});
 
 expectNotAssignable<NumberComponentSchema>({
   id: '123',
-  type: 'number',
+  type: 'number' as const,
   key: 'aNumber',
   label: 'A number',
   multiple: true,
   defaultValue: [],
-} as const);
+});
 
 // invalid, only the number validators may be assignable
 expectNotAssignable<NumberComponentSchema>({
   id: '123',
-  type: 'number',
+  type: 'number' as const,
   key: 'aNumber',
   label: 'A number',
   validate: {
     maxLength: 100,
   },
-} as const);
+});
 
 // full, correct schema
 expectAssignable<NumberComponentSchema>({