feat(itemctrl): add ItemCtrl

#26
pyoner · Jul 21, 2020 · 2b2fd5f · 2b2fd5f
1 parent 530dd40
commit 2b2fd5f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/packages/lib/src/components/ItemCtrl.svelte b/packages/lib/src/components/ItemCtrl.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let moveUp: Function;
+  export let moveDown: Function;
+  export let remove: Function;
+  export let position: Number;
+  export let length: Number;
+</script>
+
+<button type="button" on:click={remove}>Remove</button>
+<button type="button" disabled={position <= 0} on:click={moveUp}>Move Up</button>
+<button type="button" disabled={position + 1 == length} on:click={moveDown}>Move Down</button>
diff --git a/packages/lib/src/components/fields/ArrayField.svelte b/packages/lib/src/components/fields/ArrayField.svelte
@@ -9,7 +9,6 @@
     getPropsFromContainer,
   } from "../../helpers";
   import Wrap from "../helpers/Wrap.svelte";
-  import ItemWrapper from "../ItemWrapper.svelte";
 
   type T = Array<any>;
   const p = createProps<T, ErrorRecord>([]);
@@ -80,29 +79,21 @@
           </div>
 
           <div slot="ctrl">
-            <button
-              type="button"
-              on:click={(e) => {
+            <svelte:component
+              this={getComponent(schema, components.itemCtrl, 'itemCtrl')}
+              {schema}
+              props={getProps(schema, components.itemCtrl, 'itemCtrl')}
+              remove={() => {
                 removeItem(i);
-              }}>
-              Remove
-            </button>
-            <button
-              type="button"
-              disabled={i <= 0}
-              on:click={(e) => {
+              }}
+              moveUp={() => {
                 moveItem(i, i - 1);
-              }}>
-              Move Up
-            </button>
-            <button
-              type="button"
-              disabled={i + 1 == value.length}
-              on:click={(e) => {
+              }}
+              moveDown={() => {
                 moveItem(i, i + 1);
-              }}>
-              Move Down
-            </button>
+              }}
+              position={i}
+              length={value.length} />
           </div>
 
         </svelte:component>

diff --git a/packages/lib/src/components/index.ts b/packages/lib/src/components/index.ts
@@ -3,13 +3,15 @@ import Wrapper from "./Wrapper.svelte";
 import Layout from "./Layout.svelte";
 import Form from "./Form.svelte";
 import ItemWrapper from "./ItemWrapper.svelte";
+import ItemCtrl from "./ItemCtrl.svelte";
 import { defaultFieldComponents } from "./fields";
 
 export const defaultFormComponents: FormComponents = {
   layout: Layout,
   wrapper: Wrapper,
   form: Form,
   itemWrapper: ItemWrapper,
+  itemCtrl: ItemCtrl,
   fields: defaultFieldComponents,
 };
 

diff --git a/packages/lib/src/types.ts b/packages/lib/src/types.ts
@@ -28,6 +28,7 @@ export interface FormComponents {
   wrapper: SvelteComponentProps;
   form: SvelteComponentProps;
   itemWrapper: SvelteComponentProps;
+  itemCtrl: SvelteComponentProps;
   fields: FieldComponents;
 }