From 2b2fd5f7b0d53963bb8feb34ade547a70dc183f5 Mon Sep 17 00:00:00 2001
From: Askar Yusupov <devex.soft@gmail.com>
Date: Tue, 21 Jul 2020 08:52:02 +0500
Subject: [PATCH] feat(itemctrl): add ItemCtrl

#26
---
 packages/lib/src/components/ItemCtrl.svelte   | 11 +++++++
 .../src/components/fields/ArrayField.svelte   | 33 +++++++------------
 packages/lib/src/components/index.ts          |  2 ++
 packages/lib/src/types.ts                     |  1 +
 4 files changed, 26 insertions(+), 21 deletions(-)
 create mode 100644 packages/lib/src/components/ItemCtrl.svelte

diff --git a/packages/lib/src/components/ItemCtrl.svelte b/packages/lib/src/components/ItemCtrl.svelte
new file mode 100644
index 0000000..73b6c82
--- /dev/null
+++ 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
index 66e1dcc..525c9a6 100644
--- 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
index 5aeef93..af863ec 100644
--- a/packages/lib/src/components/index.ts
+++ b/packages/lib/src/components/index.ts
@@ -3,6 +3,7 @@ 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 = {
@@ -10,6 +11,7 @@ export const defaultFormComponents: FormComponents = {
   wrapper: Wrapper,
   form: Form,
   itemWrapper: ItemWrapper,
+  itemCtrl: ItemCtrl,
   fields: defaultFieldComponents,
 };
 
diff --git a/packages/lib/src/types.ts b/packages/lib/src/types.ts
index 84a1c8e..9ac20a4 100644
--- 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;
 }