Rename type to dataType and inputType to interfaceType in DynamicInput

mathesar-foundation · Jan 13, 2022 · 51ca4dd · 51ca4dd
1 parent 6d5c9e5
commit 51ca4dd
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 49 deletions.
diff --git a/mathesar_ui/src/component-library/dynamic-input/BooleanInput.svelte b/mathesar_ui/src/component-library/dynamic-input/BooleanInput.svelte
@@ -1,12 +1,12 @@
 <script lang='ts'>
   import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
-  import type { DynamicInputElementType } from './types.d';
+  import type { DynamicInputInterfaceType } from './types.d';
 
   export let value = undefined;
-  export let inputType: DynamicInputElementType = undefined;
+  export let interfaceType: DynamicInputInterfaceType = undefined;
 </script>
 
-{#if inputType === 'toggle'}
+{#if interfaceType === 'toggle'}
   <!--TODO: Add css to checkbox to show a toggle view -->
   Toggle not implemented yet
 {:else}

diff --git a/mathesar_ui/src/component-library/dynamic-input/DynamicInput.svelte b/mathesar_ui/src/component-library/dynamic-input/DynamicInput.svelte
@@ -3,12 +3,16 @@
   import StringInput from './StringInput..svelte';
   import BooleanInput from './BooleanInput.svelte';
   import NumberInput from '../number-input/NumberInput.svelte';
-  import type { DynamicInputType, DynamicInputElementType } from './types.d';
+  import type {
+    DynamicInputDataType,
+    DynamicInputInterfaceType,
+    DynamicInputSelectElement,
+  } from './types.d';
 
   /**
    * Type of input, one of: 'boolean', 'integer', 'float', 'string', 'date', 'datetime', 'time'
    */
-  export let type: DynamicInputType;
+  export let dataType: DynamicInputDataType;
 
   /**
    * Value of input. Depends on type.
@@ -20,28 +24,28 @@
    * boolean -> checkbox, toggle, select. Default: checkbox.<br/>
    * string -> text, textarea, select. Default: text.
    */
-  export let inputType: DynamicInputElementType = undefined;
+  export let interfaceType: DynamicInputInterfaceType = undefined;
 
   let enumValues: unknown[] = undefined;
 
   /**
-   * Applies when inputType is select. List of values to allow for value.
+   * Applies when interfaceType is select. List of values to allow for value.
    */
   export { enumValues as enum };
 
   /**
-   * Applies when inputType is select. Additional configuration for options
+   * Applies when interfaceType is select. Additional configuration for options
    * that are displayed.
    */
-  export let options = undefined;
+  export let options: DynamicInputSelectElement['options'] = undefined;
 </script>
 
-{#if enumValues || inputType === 'select'}
-  <EnumInput {...$$restProps} {enumValues} {type} {options} bind:value/>
-{:else if type === 'boolean'}
-  <BooleanInput {...$$restProps} {inputType} bind:value/>
-{:else if type === 'integer' || type === 'float'}
-  <NumberInput {...$$restProps} isInteger={type === 'integer'} bind:value/>
-{:else if type === 'string'}
-  <StringInput {...$$restProps} {inputType} bind:value/>
+{#if enumValues || interfaceType === 'select'}
+  <EnumInput {...$$restProps} {enumValues} {dataType} {options} bind:value/>
+{:else if dataType === 'boolean'}
+  <BooleanInput {...$$restProps} {interfaceType} bind:value/>
+{:else if dataType === 'integer' || dataType === 'float'}
+  <NumberInput {...$$restProps} isInteger={dataType === 'integer'} bind:value/>
+{:else if dataType === 'string'}
+  <StringInput {...$$restProps} {interfaceType} bind:value/>
 {/if}
diff --git a/mathesar_ui/src/component-library/dynamic-input/EnumInput.svelte b/mathesar_ui/src/component-library/dynamic-input/EnumInput.svelte
@@ -2,15 +2,15 @@
   import Select from '@mathesar-component-library-dir/select/Select.svelte';
   import type { Appearance } from '@mathesar-component-library-dir/types.d';
   import { generateSelectOptions, getSelectedValue, getInitialValue } from './utils';
-  import type { DynamicInputType } from './types';
+  import type { DynamicInputDataType, DynamicInputSelectElement } from './types.d';
 
-  export let type: DynamicInputType;
+  export let dataType: DynamicInputDataType;
   export let enumValues: unknown[] = undefined;
-  export let options = undefined;
+  export let options: DynamicInputSelectElement['options'] = undefined;
   export let triggerAppearance: Appearance = 'default';
-  export let value = getInitialValue(type, enumValues);
+  export let value = getInitialValue(dataType, enumValues);
 
-  $: selectOptions = generateSelectOptions(type, enumValues, options);
+  $: selectOptions = generateSelectOptions(dataType, enumValues, options);
   $: selectedValue = getSelectedValue(selectOptions, value);
 
   // TODO: Handle indeterminate state for boolean

diff --git a/mathesar_ui/src/component-library/dynamic-input/StringInput..svelte b/mathesar_ui/src/component-library/dynamic-input/StringInput..svelte
@@ -1,13 +1,13 @@
 <script lang='ts'>
   import TextInput from '@mathesar-component-library-dir/text-input/TextInput.svelte';
   import TextArea from '@mathesar-component-library-dir/text-area/TextArea.svelte';
-  import type { DynamicInputElementType } from './types.d';
+  import type { DynamicInputInterfaceType } from './types.d';
 
   export let value = undefined;
-  export let inputType: DynamicInputElementType = undefined;
+  export let interfaceType: DynamicInputInterfaceType = undefined;
 </script>
 
-{#if inputType === 'textarea'}
+{#if interfaceType === 'textarea'}
   <TextArea {...$$restProps} bind:value/>
 {:else}
   <TextInput {...$$restProps} bind:value/>

diff --git a/mathesar_ui/src/component-library/dynamic-input/__meta__/DynamicInput.stories.svelte b/mathesar_ui/src/component-library/dynamic-input/__meta__/DynamicInput.stories.svelte
@@ -20,12 +20,12 @@
 <Meta {...meta} />
 
 <Story name="Boolean">
-  <DynamicInput type="boolean"/>
-  <DynamicInput type="boolean" inputType="select"/>
+  <DynamicInput dataType="boolean"/>
+  <DynamicInput dataType="boolean" interfaceType="select"/>
 </Story>
 
 <Story name="String">
-  <DynamicInput type="string"/>
-  <DynamicInput type="string" inputType="textarea"/>
-  <DynamicInput type="string" enum={['Pichu', 'Pikachu', 'Raichu']}/>
+  <DynamicInput dataType="string"/>
+  <DynamicInput dataType="string" interfaceType="textarea"/>
+  <DynamicInput dataType="string" enum={['Pichu', 'Pikachu', 'Raichu']}/>
 </Story>
diff --git a/mathesar_ui/src/component-library/dynamic-input/types.d.ts b/mathesar_ui/src/component-library/dynamic-input/types.d.ts
@@ -1,13 +1,13 @@
 import type { SelectOption } from '@mathesar-component-library-dir/select/Select.d';
 
-export type DynamicInputType =
+export type DynamicInputDataType =
   'boolean' | 'integer' | 'float' | 'string' | 'date' | 'datetime' | 'time';
 
-export type DynamicInputElementType =
+export type DynamicInputInterfaceType =
   'text' | 'textarea' | 'number' | 'checkbox' | 'toggle' | 'select';
 
 export interface DynamicInputSelectElement {
-  inputType: 'select',
+  interfaceType: 'select',
   options?: Record<string, {
     label?: string,
   }>

diff --git a/mathesar_ui/src/component-library/dynamic-input/utils.ts b/mathesar_ui/src/component-library/dynamic-input/utils.ts
@@ -1,11 +1,11 @@
-import type { DynamicInputType, DynamicInputSelectElement, EnumSelectOption } from './types';
+import type { DynamicInputDataType, DynamicInputSelectElement, EnumSelectOption } from './types';
 
 export function generateSelectOptions(
-  type: DynamicInputType,
+  dataType: DynamicInputDataType,
   enumValues?: unknown[],
   options?: DynamicInputSelectElement['options'],
 ): EnumSelectOption[] {
-  if (type === 'boolean') {
+  if (dataType === 'boolean') {
     return [
       {
         value: true,
@@ -33,10 +33,10 @@ export function getSelectedValue(
 }
 
 export function getInitialValue(
-  type: DynamicInputType,
+  dataType: DynamicInputDataType,
   enumValues?: unknown[],
 ): unknown {
-  if (type === 'boolean') {
+  if (dataType === 'boolean') {
     return true;
   }
   return enumValues?.[0];

diff --git a/mathesar_ui/src/component-library/form-builder/FormInput.svelte b/mathesar_ui/src/component-library/form-builder/FormInput.svelte
@@ -1,16 +1,16 @@
 <script lang='ts'>
   import LabeledInput from '@mathesar-component-library-dir/labeled-input/LabeledInput.svelte';
   import DynamicInput from '@mathesar-component-library-dir/dynamic-input/DynamicInput.svelte';
-  import type { DynamicInputType } from '@mathesar-component-library-dir/dynamic-input/types.d';
+  import type { DynamicInputDataType } from '@mathesar-component-library-dir/dynamic-input/types.d';
   import type { FormInputElement, FormInputStore } from './types.d';
 
-  export let type: DynamicInputType;
+  export let type: DynamicInputDataType;
   export let label: FormInputElement['label'] = undefined;
   export let store: FormInputStore;
 </script>
 
 <div class="form-element form-input">
   <LabeledInput {label} layout={type === 'boolean' ? 'inline-input-first' : 'stacked'}>
-    <DynamicInput {...$$restProps} {type} {label} bind:value={$store}/>
+    <DynamicInput {...$$restProps} dataType={type} {label} bind:value={$store}/>
   </LabeledInput>
 </div>
diff --git a/mathesar_ui/src/component-library/form-builder/__meta__/basicForm.ts b/mathesar_ui/src/component-library/form-builder/__meta__/basicForm.ts
@@ -54,13 +54,13 @@ const formConfig: FormConfiguration = {
       {
         type: 'input',
         variable: 'stringTextAreaValue',
-        inputType: 'textarea',
+        interfaceType: 'textarea',
         label: 'String value: TextArea',
       },
       {
         type: 'input',
         variable: 'enumValue',
-        inputType: 'select',
+        interfaceType: 'select',
         label: 'Enum value',
       },
     ],

diff --git a/mathesar_ui/src/component-library/form-builder/__meta__/formWithSwitchCondition.ts b/mathesar_ui/src/component-library/form-builder/__meta__/formWithSwitchCondition.ts
@@ -42,7 +42,7 @@ const formConfig: FormConfiguration = {
             type: 'input',
             variable: 'integerDataSize',
             label: 'Integer Data Size',
-            inputType: 'select',
+            interfaceType: 'select',
             options: {
               default: { label: 'Default (4 bytes)' },
               bigInt: { label: 'Big Integer (8 bytes)' },
@@ -69,7 +69,7 @@ const formConfig: FormConfiguration = {
             type: 'input',
             variable: 'floatingPointType',
             label: 'Floating Point Type',
-            inputType: 'select',
+            interfaceType: 'select',
             options: {
               real: { label: 'Real (6 digits)' },
               doublePrecision: { label: 'Double Precision (15 digits)' },

diff --git a/mathesar_ui/src/component-library/form-builder/types.d.ts b/mathesar_ui/src/component-library/form-builder/types.d.ts
@@ -1,17 +1,17 @@
 import type { Writable } from 'svelte/store';
-import type { DynamicInputType } from '@mathesar-component-library-dir/dynamic-input/types.d';
+import type { DynamicInputDataType } from '@mathesar-component-library-dir/dynamic-input/types.d';
 
 export type FormInputDataType = boolean | string | number | undefined;
 
 export interface FormInputBaseElement {
   type: 'input',
-  inputType?: string,
+  interfaceType?: string,
   variable: string,
   label?: string,
 }
 
 export interface FormInputSelectElement extends FormInputBaseElement {
-  inputType: 'select',
+  interfaceType: 'select',
   options: Record<string, {
     label?: string,
   }>
@@ -47,7 +47,7 @@ export interface FormLayout {
 
 export interface FormConfiguration {
   variables: Record<string, {
-    type: DynamicInputType,
+    type: DynamicInputDataType,
     default: FormInputDataType,
     enum?: unknown[]
   }>,