Merge pull request #39 from webgme/issue/38-string-control-append

Add `append` and `'prepend` properties for string controls

Author: romancow

src/lib/Control.svelte

@@ -1,4 +1,10 @@
 <script context="module" lang="ts">
+  import { getContext, setContext } from "svelte";
+  import * as controls from "./controls";
+
+  const controlNames = Object.keys(controls);
+  const ControlPropsContextKey = Symbol("control-props");
+
   function useConst(schema: JSONSchema7 | undefined) {
     return (schema != null) && !isBoolean(schema) && ("const" in schema);
   }
@@ -13,20 +19,36 @@
       : schema?.type;
     return (Array.isArray(type) ? type[0] : type) ?? "object";
   }
+
+  export function setControlProps(props: Record<string, any>) {
+    const context = Object.keys(props).reduce((controlsProps, name) => {
+      const [controlName, propName] = name.split('$', 2);
+      if ((controlNames.includes(controlName)) && (propName != null)) {
+        (controlsProps[controlName] ??= {})[propName] = props[name];
+      }
+      return controlsProps;
+    }, {} as { [control: string]: { [prop: string]: any } });
+    return setContext(ControlPropsContextKey, context);
+  }
+
+  export function getControlProps() {
+    return getContext<{[control: string]: Record<string, any>}>(ControlPropsContextKey);
+  }
 </script>
 
 <script lang="ts">
   import type { JSONSchema7 } from "json-schema";
   import type UISchema from "./UISchema";
   import { isBoolean } from "./utilities";
-  import * as controls from "./controls";
 
   export let schema: JSONSchema7 | undefined;
   export let data: any = undefined;
   export let uischema: UISchema = {};
   export let force: boolean = false;
 
+  const allControlProps = getControlProps();
   let control: any;
+  let controlProps: Record<string, any> = {};
 
   $: updateControlType(schema);
 
@@ -35,8 +57,9 @@
     const updatedControl = controls[singleType as keyof typeof controls] as any;
     if (updatedControl != control) {
       control = updatedControl;
+      controlProps = allControlProps[singleType];
     }
   }
 </script>
 
-<svelte:component this={control} {...schema} bind:data {uischema} {force} />
+<svelte:component this={control} {...controlProps} {...schema} bind:data {uischema} {force} />

src/lib/SchemaForm.svelte

@@ -9,14 +9,15 @@
   import Paper, { Title, Subtitle, Content } from '@smui/paper';
   import createMountedEventDispatcher from './createMountedEventDispatcher';
   import ObjectProps from "./controls/ObjectProps.svelte";
-  import Control from "./Control.svelte";
+  import Control, { setControlProps } from "./Control.svelte";
   import { isObjectSchema, isString, isBoolean } from './utilities';
   import libVersion from "./version";
 
   export let schema: JSONSchema7Definition = {};
   export let data: { [prop: string]: any } = {};
   export let uischema: UISchema = {};
 
+  setControlProps($$restProps);
   const dispatch = createMountedEventDispatcher();
   /* A bit of a hack - When bulding the static test site, the dereferencer is still behind a
    * `.default` property for some reason. I'm guessing it has something to do with how modules are

src/lib/controls/StringControl.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isString } from "$lib/utilities";
   import UISchema from "$lib/UISchema";
   import Textfield from "@smui/textfield";
   import HelperText from "@smui/textfield/helper-text";
@@ -15,6 +16,9 @@
   export let isRequired: boolean | undefined = undefined;
   export let force: boolean = false;
 
+  export let prepend: ConstructorOfATypedSvelteComponent | string | undefined = undefined;
+  export let append: ConstructorOfATypedSvelteComponent | string | undefined = undefined;
+
   let value: string = data ?? "";
   let enumValues: string[] | undefined = undefined;
 
@@ -41,6 +45,12 @@
 </script>
 
 <div class="jsonschema-form-control control-string">
+  {#if isString(prepend)}
+    {@html prepend}
+  {:else if prepend != null}
+    <svelte:component this={prepend} {...$$props} />
+  {/if}
+
   {#if enumValues?.length}
     <Select 
       variant="outlined"
@@ -79,9 +89,22 @@
       </svelte:fragment>
     </Textfield>
   {/if}
+
+  {#if isString(append)}
+    {@html append}
+  {:else if append != null}
+    <svelte:component this={append} {...$$props} />
+  {/if}
 </div>
 
 <style>
+  .control-string {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3px;
+  }
+
   .control-string > :global(.mdc-text-field),
   .control-string > :global(.mdc-select) {
     width: 100%;