From 8076840fe18c3def9d91475829391671ffab8129 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 12 Mar 2020 14:07:20 +0000 Subject: [PATCH] Adding onChange functionality for typing date in field and tidy up --- .../materialdesign-components/components.json | 22 ++++++++ .../src/DatePicker/DatePicker.svelte | 55 +++++++++---------- .../src/DatePicker/_style.scss | 2 +- .../src/IconButton/IconButton.svelte | 41 +++++++++----- .../src/IconButton/_style.scss | 1 - .../src/Test/TestApp.svelte | 2 + .../src/Test/props.js | 8 ++- .../src/Textfield/Textfield.svelte | 10 ++-- 8 files changed, 91 insertions(+), 50 deletions(-) diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index 0028b39545..d017e54b11 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -169,6 +169,16 @@ "description": "Material Design .", "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", diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte index 142805533f..d43cbc072e 100644 --- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte +++ b/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) -
+ icon="calendar_today" />
selectDate(day)} class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}> - {#if i === 0} -
- -
- {:else} - - {/if} +
{/each}
+