Adding onChange functionality for typing date in field and tidy up

packages/materialdesign-components/components.json

@@ -169,6 +169,16 @@
     "description": "Material Design <tr>.",
     "props": {}
   },
+  "DatePicker": {
+    "name": "DatePicker",
+    "description": "Material Design DatePicker",
+    "props": {
+      "date": "string",
+      "label": "string",
+      "onSelect": "event"
+    },
+    "tags": []
+  },
   "H1": {
     "name": "H1",
     "description": "Sets the font properties as Roboto Headline1",
@@ -217,6 +227,18 @@
     },
     "tags": []
   },
+  "IconButton": {
+    "onClick": "event",
+    "disabled": "bool",
+    "href": "string",
+    "icon": "string",
+    "size": {
+      "type":"options",
+      "options": ["small", "medium", "large"],
+      "default": "medium"
+    },
+    "tags": []
+  },
   "Label": {
     "name": "Label",
     "description": "A simple label component that displays its text in the standard Roboto Material Design font",

packages/materialdesign-components/src/DatePicker/DatePicker.svelte

@@ -17,21 +17,22 @@
   import { Body1, Body2, Caption } from "../Typography"
   import { IconButton } from "../IconButton"
 
-  let textFieldHeight = null
   let menu
   let instance
+  let textfieldValue = ""
 
   let daysArr = []
   let navDate = new Date()
   const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
 
   export let date = new Date()
-  export let open = true
+  export let label = ""
+  export let onSelect = selectedDate => {}
 
   onMount(() => {
     if (!!menu) {
       instance = new MDCMenu(menu)
-      instance.open = true
+      instance.open = false
       instance.setFixedPostion = true
     }
   })
@@ -40,6 +41,7 @@
     let month = getMonth(navDate)
     let year = getYear(navDate)
     date = new Date(year, month, dayOfMonth)
+    onSelect(date)
   }
 
   function addMonth() {
@@ -50,8 +52,21 @@
     navDate = subMonths(navDate, 1)
   }
 
-  function openCalendar() {
-    instance.open = true
+  function openCalendar(isOpen) {
+    instance.open = isOpen === undefined ? !instance.open : isOpen
+  }
+
+  function textFieldChange(value) {
+    const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
+    if (isDate.test(value)) {
+      const [year, month, day] = value.split("/").reverse()
+      if (month > 0 && month <= 12 && (day > 0 && day <= 31)) {
+        date = new Date(year, month - 1, day)
+        navDate = date
+        openCalendar(true)
+        onSelect(date)
+      }
+    }
   }
 
   $: dateMonthEnds = endOfMonth(navDate).getDate()
@@ -71,23 +86,17 @@
     dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
   $: sameMonthAndYear =
     getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
-  $: console.log(textFieldHeight)
 </script>
 
-<!-- 
-  TODO: Add transition effects to toggling of calendar
-  TODO: Bug - August 2020 has too many rows. find out why
-  TODO: Bug - make out transition of date bg colour instantaneous
- -->
 <div class="mdc-menu-surface--anchor">
   <Textfield
-    bind:tfHeight={textFieldHeight}
+    {label}
+    onChange={textFieldChange}
     value={selectedDate}
     trailingIcon={true}
     useIconButton={true}
     iconButtonClick={openCalendar}
-    icon="calendar_today"
-    label="Select Date" />
+    icon="calendar_today" />
 
   <div
     bind:this={menu}
@@ -118,20 +127,16 @@
         {#each daysArr as day, i}
           <div
             use:ripple
+            style={i === 0 ? `grid-column-start: ${dayStart}` : ``}
             on:click={() => selectDate(day)}
             class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}>
-            {#if i === 0}
-              <div style={`grid-column-start: ${dateMonthBegins}`}>
-                <Body2 text={day} />
-              </div>
-            {:else}
-              <Body2 text={day} />
-            {/if}
+            <Body2 text={day} />
           </div>
         {/each}
       </div>
     </div>
 
+    <!-- Superfluous but necessary to keep the menu instance sweet -->
     <ul class="mdc-list" role="menu" />
   </div>
 </div>
@@ -157,10 +162,6 @@
     grid-gap: 5px;
   }
 
-  .calendar-container > div {
-    /* border: 1px solid red; */
-  }
-
   .week-days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -174,8 +175,4 @@
   .centreText {
     text-align: center;
   }
-
-  span {
-    margin: auto;
-  }
 </style>

packages/materialdesign-components/src/DatePicker/_style.scss

@@ -2,7 +2,7 @@
 @import "@material/theme/mixins";
 
 .bbmd-day {
-  transition: background-color 0.5s ease-in;
+  transition: background-color .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   display: flex;
   border-radius: 50%;
   justify-content: center;

packages/materialdesign-components/src/IconButton/IconButton.svelte

@@ -4,6 +4,8 @@
 
   const cb = new ClassBuilder("icon-button")
 
+  let on = false
+
   export let _bb
   export let context = ""
   export let onClick = () => {}
@@ -13,6 +15,11 @@
   export let onIcon = "" //on state icon for toggle button
   export let size = "medium"
 
+  function onButtonClick() {
+    open = !open
+    onClick()
+  }
+
   $: isToggleButton = !!icon && !!onIcon
   $: useLinkButton = !!href
 
@@ -22,20 +29,10 @@
 </script>
 
 {#if useLinkButton}
-  <a on:click={onClick} class={iconBtnClass} {href} {disabled}>
-    {#if isToggleButton}
-      <i
-        use:ripple
-        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
-        {onIcon}
-      </i>
-      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
-    {:else}{icon}{/if}
-  </a>
-{:else}
-  <button
-    on:click={onClick}
+  <a
+    on:click={onButtonClick}
     class={iconBtnClass}
+    {href}
     {disabled}
     role="button"
     tabindex="0">
@@ -47,5 +44,23 @@
       </i>
       <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
     {:else}{icon}{/if}
+  </a>
+{:else}
+  <button
+    on:click={onButtonClick}
+    class={iconBtnClass}
+    {disabled}
+    role="button"
+    aria-label="Add to favorites"
+    aria-pressed="false"
+    tabindex="0">
+    {#if isToggleButton}
+      <i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
+      <i
+        use:ripple
+        class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
+        {onIcon}
+      </i>
+    {:else}{icon}{/if}
   </button>
 {/if}

packages/materialdesign-components/src/IconButton/_style.scss

@@ -2,7 +2,6 @@
 
 .mdc-icon-button {
 
-
   &.bbmd-mdc-icon-button--size-large {
     @include mdc-icon-button-icon-size(24px);
   }

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -18,6 +18,7 @@
     List,
     Select,
     DatePicker,
+    IconButton,
   } = props
 
   let currentComponent
@@ -36,6 +37,7 @@
             Radiobutton,
             Radiobuttongroup,
             DatePicker,
+            IconButton,
           ],
         },
       }

packages/materialdesign-components/src/Test/props.js

@@ -209,6 +209,12 @@ export const props = {
   DatePicker: {
     _component: "@budibase/materialdesign-components/DatePicker",
     _children: [],
-    open: true,
+    label: "Date of Admission",
+    onSelect: date => console.log("SELECTED DATE", date)
+  },
+  IconButton: {
+    _component: "@budibase/materialdesign-components/IconButton",
+    _children: [],
+    icon: "calendar_today",
   },
 }

packages/materialdesign-components/src/Textfield/Textfield.svelte

@@ -15,7 +15,6 @@
 
   let tf = null
   export let tfHeight = null
-  $: console.log("TF", tfHeight)
   let tfInstance = null
 
   onMount(() => {
@@ -98,10 +97,11 @@
   function changed(e) {
     const val = e.target.value
     value = val
-    if (_bb.isBound(_bb.props.value)) {
-      _bb.setStateFromBinding(_bb.props.value, val)
-    }
-    _bb.call(onChange, val)
+    onChange(value)
+    // if (_bb.isBound(_bb.props.value)) {
+    //   _bb.setStateFromBinding(_bb.props.value, val)
+    // }
+    // _bb.call(onChange, val)
   }
 </script>