Add tick

Author: vadimkorr

src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, beforeUpdate, afterUpdate } from 'svelte'
+	import { onMount } from 'svelte'
 	import { v4 as uuid } from 'uuid'
 	import AddTodoItem from './AddTodoItem.svelte'
 	import TodoItem from './TodoItem.svelte'
@@ -9,18 +9,9 @@
 	$: count = items.length;
 	$: checkedCount = items.filter(({ checked }) => checked).length
 
-	beforeUpdate(() => {
-		console.log('beforeUpdate called')
-	});
-
 	onMount(async () => {
-		console.log('onMount called')
 		items = await getTodos()
 	})
-
-	afterUpdate(() => {
-		console.log('afterUpdate called')
-	});
 	
 	function handleAddTodoItem(event) {
     items = [...items, {

src/Form.svelte

@@ -1,12 +1,23 @@
 <script>
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, tick } from 'svelte'
+  import { format } from './format'
+
   const dispath = createEventDispatcher()
 
   export let title = ''
   export let buttonTitle = ''
 
   let text = ''
 
+  async function handleTextChange(event) {
+    const { selectionStart, selectionEnd, value } = this;
+    text = format(event.target.value)
+
+    await tick();
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+  }
+
   function handleAddClick() {
     dispath('add', text)
   }
@@ -17,7 +28,8 @@
   <input
     class="input"
     id="text"
-    bind:value={text}
+    value={text}
+    on:input={handleTextChange}
   />
   <button on:click={handleAddClick}>{buttonTitle}</button>
 </div>

src/format.js

@@ -0,0 +1,13 @@
+export function format(value) {
+  const formatted = value
+    .replace(/\D/g, '')
+    .replace(/(\d{1,2})(\d{1})?(\d{1,3})?(\d{1,4})?/, function(_, p1, p2, p3, p4) {
+      let output = ""
+      if (p1) output = `(${p1}`;
+      if (p2) output += `${p2})`;
+      if (p3) output += ` ${p3}`
+      if (p4) output += ` ${p4}`
+      return output;
+    });
+  return formatted;
+}