Merge pull request #153 from Conor-Mack/feature/md-datepicker-and-iconbutton

MD DatePicker and IconButton

package.json

@@ -24,5 +24,8 @@
     "lint:fix": "eslint --fix packages",
     "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\""
   },
-  "dependencies": {}
+  "dependencies": {
+    "@material/icon-button": "4.0.0",
+    "date-fns": "^2.10.0"
+  }
 }

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/package.json

@@ -18,6 +18,7 @@
     "@material/checkbox": "^4.0.0",
     "@material/data-table": "4.0.0",
     "@material/form-field": "^4.0.0",
+    "@material/icon-button": "4.0.0",
     "@material/list": "4.0.0",
     "@material/menu": "4.0.0",
     "@material/radio": "^4.0.0",
@@ -25,6 +26,7 @@
     "@material/textfield": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
+    "date-fns": "^2.10.0",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",

packages/materialdesign-components/src/Common/Ripple.js

@@ -2,7 +2,7 @@ import { MDCRipple } from "@material/ripple"
 
 export default function ripple(
   node,
-  props = { colour: "primary", unbounded: false }
+  props = { colour: "primary", unbounded: true }
 ) {
   node.classList.add("mdc-ripple-surface")
   let component = new MDCRipple(node)

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

@@ -0,0 +1,178 @@
+<script>
+  import { onMount } from "svelte"
+  import {
+    startOfMonth,
+    endOfMonth,
+    getDate,
+    getMonth,
+    getYear,
+    addMonths,
+    subMonths,
+    format,
+  } from "date-fns"
+  import { MDCMenu } from "@material/menu"
+  import { Textfield } from "../Textfield"
+  import Icon from "../Common/Icon.svelte"
+  import ripple from "../Common/Ripple.js"
+  import { Body1, Body2, Caption } from "../Typography"
+  import { IconButton } from "../IconButton"
+
+  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 label = ""
+  export let onSelect = selectedDate => {}
+
+  onMount(() => {
+    if (!!menu) {
+      instance = new MDCMenu(menu)
+      instance.open = false
+      instance.setFixedPostion = true
+    }
+  })
+
+  function selectDate(dayOfMonth) {
+    let month = getMonth(navDate)
+    let year = getYear(navDate)
+    date = new Date(year, month, dayOfMonth)
+    onSelect(date)
+  }
+
+  function addMonth() {
+    navDate = addMonths(navDate, 1)
+  }
+
+  function subtractMonth() {
+    navDate = subMonths(navDate, 1)
+  }
+
+  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()
+  $: dateMonthBegins = startOfMonth(navDate).getDay()
+  $: dayStart = dateMonthBegins + 1 //1 = sunday
+  $: monthAndYear = format(navDate, "MMMM y")
+  $: selectedDate = format(date, "dd/MM/yyyy")
+  $: dayOfSelectedDate = getDate(date)
+  $: for (let d = 1; d <= dateMonthEnds; d++) {
+    if (d === 1) {
+      daysArr = [d]
+    } else {
+      daysArr = [...daysArr, d]
+    }
+  }
+  $: rowRepeater =
+    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
+  $: sameMonthAndYear =
+    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
+</script>
+
+<div class="mdc-menu-surface--anchor">
+  <Textfield
+    {label}
+    onChange={textFieldChange}
+    value={selectedDate}
+    trailingIcon={true}
+    useIconButton={true}
+    iconButtonClick={openCalendar}
+    icon="calendar_today" />
+
+  <div
+    bind:this={menu}
+    class="mdc-menu mdc-menu-surface bbmd-menu"
+    style={`margin-top: 70px`}>
+    <div class="calendar-container">
+      <div class="month-picker">
+        <div>
+          <IconButton icon="chevron_left" onClick={subtractMonth} />
+        </div>
+        <div class="centreText">
+          <Body1 text={monthAndYear} />
+        </div>
+        <div>
+          <IconButton icon="chevron_right" onClick={addMonth} />
+        </div>
+      </div>
+      <div class="week-days">
+        {#each weekdayMap as day, i}
+          <div class="centreText">
+            <Caption text={day} />
+          </div>
+        {/each}
+      </div>
+      <div
+        class="day-picker"
+        style={`grid-template-rows: repeat(${rowRepeater}, 40px)`}>
+        {#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' : ''}`}>
+            <Body2 text={day} />
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Superfluous but necessary to keep the menu instance sweet -->
+    <ul class="mdc-list" role="menu" />
+  </div>
+</div>
+
+<style>
+  .bbmd-menu {
+    width: 330px;
+    height: auto;
+    padding: 5px;
+  }
+
+  .month-picker {
+    display: grid;
+    grid-template-columns: 40px 1fr 40px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .calendar-container {
+    display: grid;
+    height: 100%;
+    grid-template-rows: repeat(3, auto);
+    grid-gap: 5px;
+  }
+
+  .week-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .day-picker {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .centreText {
+    text-align: center;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+@import "@material/ripple/mdc-ripple.scss";
+@import "@material/theme/mixins";
+
+.bbmd-day {
+  transition: background-color .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  display: flex;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.selected {
+  @include mdc-theme-prop(background-color, primary);
+  @include mdc-theme-prop(color, on-primary);
+}

packages/materialdesign-components/src/DatePicker/index.js

@@ -0,0 +1,2 @@
+import "./_style.scss";
+export { default as DatePicker } from "./DatePicker.svelte";

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

@@ -0,0 +1,66 @@
+<script>
+  import ripple from "../Common/Ripple.js"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("icon-button")
+
+  let on = false
+
+  export let _bb
+  export let context = ""
+  export let onClick = () => {}
+  export let disabled = false
+  export let href = ""
+  export let icon = ""
+  export let onIcon = "" //on state icon for toggle button
+  export let size = "medium"
+
+  function onButtonClick() {
+    open = !open
+    onClick()
+  }
+
+  $: isToggleButton = !!icon && !!onIcon
+  $: useLinkButton = !!href
+
+  $: customs = { size }
+  $: props = { customs, extras: ["material-icons", context] }
+  $: iconBtnClass = cb.build({ props })
+</script>
+
+{#if useLinkButton}
+  <a
+    on:click={onButtonClick}
+    class={iconBtnClass}
+    {href}
+    {disabled}
+    role="button"
+    tabindex="0">
+    {#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={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

@@ -0,0 +1,18 @@
+@import "@material/icon-button/mdc-icon-button";
+
+.mdc-icon-button {
+
+  &.bbmd-mdc-icon-button--size-large {
+    @include mdc-icon-button-icon-size(24px);
+  }
+  
+  &.bbmd-mdc-icon-button--size-medium {
+    @include mdc-icon-button-icon-size(20px);
+  }
+  
+  &.bbmd-mdc-icon-button--size-small {
+    @include mdc-icon-button-icon-size(16px);
+  }
+}
+
+

packages/materialdesign-components/src/IconButton/index.js

@@ -0,0 +1,2 @@
+import "./_style.scss";
+export { default as IconButton } from "./IconButton.svelte";

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

@@ -17,6 +17,8 @@
     Icon,
     List,
     Select,
+    DatePicker,
+    IconButton,
   } = props
 
   let currentComponent
@@ -34,6 +36,8 @@
             Select,
             Radiobutton,
             Radiobuttongroup,
+            DatePicker,
+            IconButton,
           ],
         },
       }

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

@@ -205,5 +205,16 @@ export const props = {
         value: "2",
       },
     ],
-  }
+  },
+  DatePicker: {
+    _component: "@budibase/materialdesign-components/DatePicker",
+    _children: [],
+    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

@@ -9,10 +9,12 @@
   import HelperText from "./HelperText.svelte"
   import CharacterCounter from "./CharacterCounter.svelte"
   import Icon from "../Common/Icon.svelte"
+  import { IconButton } from "../IconButton"
 
   const cb = new ClassBuilder("text-field", ["primary", "medium"])
 
   let tf = null
+  export let tfHeight = null
   let tfInstance = null
 
   onMount(() => {
@@ -40,6 +42,8 @@
   export let placeholder = ""
   export let icon = ""
   export let trailingIcon = false
+  export let useIconButton = false
+  export let iconButtonClick = () => {}
   export let textarea = false
   export let rows = 4
   export let cols = 40
@@ -93,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>
 
@@ -105,7 +110,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
  -->
 
 <div class="textfield-container" class:fullwidth>
-  <div bind:this={tf} class={blockClasses}>
+  <div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
     {#if textarea}
       <CharacterCounter />
       <textarea
@@ -123,7 +128,14 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:change={changed} />
     {:else}
       {#if renderLeadingIcon}
-        <Icon context="text-field" {icon} />
+        {#if useIconButton}
+          <IconButton
+            {icon}
+            context="mdc-text-field__icon mdc-text-field__icon--leading"
+            onClick={iconButtonClick} />
+        {:else}
+          <Icon context="text-field" {icon} />
+        {/if}
       {/if}
       <input
         {id}
@@ -139,7 +151,14 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
         on:focus={focus}
         on:input={changed} />
       {#if renderTrailingIcon}
-        <Icon context="text-field" {icon} />
+        {#if useIconButton}
+          <IconButton
+            {icon}
+            context="mdc-text-field__icon mdc-text-field__icon--trailing"
+            onClick={iconButtonClick} />
+        {:else}
+          <Icon context="text-field" {icon} />
+        {/if}
       {/if}
       {#if variant !== 'outlined'}
         <div class="mdc-line-ripple" />

packages/materialdesign-components/src/Typography/Caption.svelte

@@ -2,4 +2,4 @@
   export let text = ""
 </script>
 
-<div class="mdc-typography--caption">{text}</div>
+<span class="mdc-typography--caption">{text}</span>

packages/materialdesign-components/src/index.js

@@ -19,3 +19,5 @@ export { default as recordForm } from "./Templates/recordForm"
 export { List, ListItem } from "./List"
 export { Menu } from "./Menu"
 export { Select } from "./Select"
+export { DatePicker } from "./DatePicker"
+export { IconButton } from "./IconButton"

yarn.lock

@@ -756,6 +756,62 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@material/animation@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-4.0.0.tgz#19eaf377809f20978f8452a4237d27867d3ffd1d"
+  integrity sha512-IfzXzstWdtKQcsNWu+s2Hpz5dBwkTHtgtzoesr+FC7TqENH+SJdsF1ntnZI1XVi2C9ZlBf7f4BSmXpWHD0MIlw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/base@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-4.0.0.tgz#535574d0b63c18892cfb70e88b27bc8f8090677a"
+  integrity sha512-vHm7fkqXzjdfxifXvlmaZColoIfKuWmO+1rvdzDORTWP+A8Dq70cgKd2I1SBqxzDGjOasMzHbQI6f9MISQf2vQ==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/dom@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-4.0.0.tgz#f0e68c4429e555040304c958bb3e11614276fdfa"
+  integrity sha512-GRCJT9+PGWqygZwGf1XLTrbmzP35YWG7+T0hpfhoIJO8VDiMTeyfvhJXFuA2wh9pD0noEjte0lmbdBlykrbWZw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/feature-targeting@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-4.0.0.tgz#8d9d1470801a1fd166773731613d9fa89e0fd85e"
+  integrity sha512-0gk+f151vqmEdWkrQ9ocPlQRU9aUtSGsVBhletqIbsthLUsZIz9qk25FHjV1wHd/bGHknd9NH+T8ENprv3KLFg==
+
+"@material/icon-button@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-4.0.0.tgz#f7293462f1b4967712f9b8755b87c2228dcccc3d"
+  integrity sha512-b1SyWtr2cwlKgIVo+irxRgW0lpIzauADLAxQEJ8/RTO9qVFviohJUnS+5QQCkC5zex5Q52OmQ+aNl0KRjkUdvQ==
+  dependencies:
+    "@material/base" "^4.0.0"
+    "@material/feature-targeting" "^4.0.0"
+    "@material/ripple" "^4.0.0"
+    "@material/theme" "^4.0.0"
+    tslib "^1.9.3"
+
+"@material/ripple@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-4.0.0.tgz#906ba421a3e6c68651d829d44c50a95060aa1e75"
+  integrity sha512-9BLIOvyCP5sM+fQpLlcJZWyrHguusJq8E5A1pxg0wQwputOyaPBM7recHhYkJmVjzRpTcPgf1PkvkpN6DKGcNg==
+  dependencies:
+    "@material/animation" "^4.0.0"
+    "@material/base" "^4.0.0"
+    "@material/dom" "^4.0.0"
+    "@material/feature-targeting" "^4.0.0"
+    "@material/theme" "^4.0.0"
+    tslib "^1.9.3"
+
+"@material/theme@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-4.0.0.tgz#8de388fcdbae20fd09b02a3bdef3049bf2f623a8"
+  integrity sha512-vS4G4rusJTatTH50kSYO1U3UGN8EY9kGRvPaFsEFKikJBOqcR6KWK9H9/wCLqqd6nDNifEj9H2sdWw1AV4NA6Q==
+  dependencies:
+    "@material/feature-targeting" "^4.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1630,6 +1686,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.10.0.tgz#abd10604d8bafb0bcbd2ba2e9b0563b922ae4b6b"
+  integrity sha512-EhfEKevYGWhWlZbNeplfhIU/+N+x0iCIx7VzKlXma2EdQyznVlZhCptXUY+BegNpPW2kjdx15Rvq503YcXXrcA==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"