✨ [#2] Implement types for select

src/formio/components/index.ts

@@ -10,6 +10,7 @@ export * from './postcode';
 export * from './iban';
 export * from './licenseplate';
 export * from './number';
+export * from './select';
 export * from './checkbox';
 export * from './selectboxes';
 export * from './file';

src/formio/components/select.ts

@@ -0,0 +1,43 @@
+import {InputComponentSchema} from '..';
+import {MultipleCapable, OFExtensions} from '../base';
+import {ManualValues, Option, VariableValues} from '../common';
+
+type Validator = 'required';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type SelectInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+interface BaseSelectSchema {
+  type: 'select';
+}
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+type SelectManualValuesSchema = Omit<SelectInputSchema, 'hideLabel' | 'disabled'> &
+  BaseSelectSchema & {
+    openForms: OFExtensions<TranslatableKeys>['openForms'] & ManualValues;
+    values: Option[];
+  };
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+type SelectVariableValuesSchema = Omit<SelectInputSchema, 'hideLabel' | 'disabled'> &
+  BaseSelectSchema & {
+    openForms: OFExtensions<TranslatableKeys>['openForms'] & VariableValues;
+  };
+
+/**
+ * @group Form.io components
+ * @category Concrete types
+ */
+export type SelectComponentSchema = MultipleCapable<
+  SelectManualValuesSchema | SelectVariableValuesSchema
+>;

src/formio/index.ts

@@ -12,6 +12,7 @@ import {
   PhoneNumberComponentSchema,
   PostcodeComponentSchema,
   RadioComponentSchema,
+  SelectComponentSchema,
   SelectboxesComponentSchema,
   TextFieldComponentSchema,
   TimeComponentSchema,
@@ -51,6 +52,7 @@ export type AnyComponentSchema =
   | PostcodeComponentSchema
   | FileComponentSchema
   | NumberComponentSchema
+  | SelectComponentSchema
   | CheckboxComponentSchema
   | SelectboxesComponentSchema
   | CurrencyComponentSchema

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

@@ -0,0 +1,216 @@
+import {expectAssignable, expectNotAssignable} from 'tsd';
+
+import {SelectComponentSchema} from '../../../lib';
+
+// minimal component schema, manual:
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  openForms: {
+    dataSrc: 'manual',
+    translations: {},
+  },
+  values: [
+    {
+      value: 'dummy',
+      label: 'dummy',
+    }
+  ],
+});
+
+// minimal component schema, variable:
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  openForms: {
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+    translations: {},
+  },
+});
+
+// minimal component schema, multiple false:
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  multiple: false,
+  defaultValue: 'dummy',
+  openForms: {
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+    translations: {},
+  },
+});
+
+// minimal component schema, multiple true:
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  multiple: true,
+  defaultValue: ['dummy'],
+  openForms: {
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+    translations: {},
+  },
+});
+
+// minimal component schema, multiple true and empty defaults:
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  multiple: true,
+  defaultValue: [],
+  openForms: {
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+    translations: {},
+  },
+});
+
+// values translations
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  defaultValue: 'dummy',
+  openForms: {
+    dataSrc: 'manual',
+    translations: {},
+  },
+  values: [
+    {
+      value: 'dummy',
+      label: 'dummy',
+      openForms: {
+        translations: {
+          en: {
+            label: 'dummy_en',
+          },
+          nl: {
+            label: 'dummy_nl',
+          }
+        }
+      }
+    }
+  ]
+});
+
+// full, correct schema
+expectAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  // basic tab
+  label: 'Some select',
+  key: 'someSelect',
+  description: '',
+  tooltip: 'A tooltip',
+  showInSummary: true,
+  showInEmail: false,
+  showInPDF: true,
+  hidden: false,
+  clearOnHide: true,
+  isSensitiveData: true,
+  defaultValue: 'dummy',
+  // Advanced tab
+  conditional: {
+    show: undefined,
+    when: '',
+    eq: '',
+  },
+  // Validation tab
+  validate: {
+    required: false,
+    plugins: [],
+  },
+  translatedErrors: {nl: {required: 'Geef checkbox.'}},
+  errors: {required: 'Geef checkbox.'},
+  // registration tab
+  registration: {
+    attribute: '',
+  },
+  // translations tab in builder form
+  openForms: {
+    translations: {
+      nl: {label: 'foo'},
+    },
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+  },
+  // fixed but not editable
+  validateOn: 'blur',
+});
+
+// Missing openForms
+expectNotAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+});
+
+// multiple true, wrong default value
+expectNotAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  multiple: true,
+  defaultValue: 'dummy',
+  openForms: {
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+    translations: {},
+  },
+});
+
+// multiple false, wrong default value
+expectNotAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  multiple: false,
+  defaultValue: ['dummy'],
+  openForms: {
+    dataSrc: 'variable',
+    itemsExpression: 'dummy',
+    translations: {},
+  },
+});
+
+
+// manual without values
+expectNotAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  openForms: {
+    dataSrc: 'manual',
+    translations: {},
+  },
+});
+
+// variable without itemsExpressions
+expectNotAssignable<SelectComponentSchema>({
+  id: 'yejak',
+  type: 'select',
+  key: 'someSelect',
+  label: 'Some select',
+  openForms: {
+    dataSrc: 'variable',
+    translations: {},
+  },
+});