Rename type to dataType and inputType to interfaceType in DynamicInput

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

Hide file tree

Showing 9 changed files with 38 additions and 38 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,12 @@
   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 } 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,7 +20,7 @@
    * 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;
 
@@ -36,12 +36,12 @@
   export let 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 } from './types';
 
-  export let type: DynamicInputType;
+  export let dataType: DynamicInputDataType;
   export let enumValues: unknown[] = undefined;
   export let 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,9 +1,9 @@
 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 {

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/types.d.ts b/mathesar_ui/src/component-library/form-builder/types.d.ts
@@ -1,5 +1,5 @@
 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;
 
@@ -47,7 +47,7 @@ export interface FormLayout {
 
 export interface FormConfiguration {
   variables: Record<string, {
-    type: DynamicInputType,
+    type: DynamicInputDataType,
     default: FormInputDataType,
     enum?: unknown[]
   }>,