playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha9

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -0,0 +1,171 @@
+import flatpickr from 'flatpickr'
+
+const datePickerHelper = (config) => {
+  const {
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    format,
+    hideIcon,
+    maxDate,
+    minDate,
+    mode,
+    pickerId,
+    readOnly,
+    yearRange,
+  } = config
+
+  // ===========================================================
+  // |                   Hook Definitions                      |
+  // ===========================================================
+
+  const defaultDateGetter = () => {
+    if (defaultDate !== '') {
+      if (defaultDate === 'blank') {
+        return ''
+      } else {
+        return defaultDate
+      }
+    }
+    if (mode === 'single' && defaultDate === '') {
+      return new Date()
+    } else if (mode === 'range' && defaultDate === '') {
+      const today = new Date()
+      const tomorrow = new Date(today)
+      tomorrow.setDate(tomorrow.getDate() + 1)
+      return [today, tomorrow]
+    }
+  }
+  const disabledParser = () => {
+    if (disableDate && disableDate.length > 0) {
+      return disableDate
+    } else if (disableRange && disableRange.length > 0) {
+      return disableRange
+    } else {
+      return []
+    }
+  }
+  const calendarResizer = () => {
+    const cal = document.querySelector(`#cal-${pickerId}.open`)
+    const parentInput = cal.parentElement
+    if (cal.getBoundingClientRect().right > window.innerWidth) {
+      parentInput.style.display = 'flex'
+      parentInput.style.justifyContent = 'center'
+    }
+    if (cal.offsetWidth <= parentInput.offsetWidth) {
+      parentInput.style.display = ''
+      parentInput.style.justifyContent = ''
+    }
+  }
+
+  // ===========================================================
+  // |             Flatpickr initializer w/ config             |
+  // ===========================================================
+
+  flatpickr(`#${pickerId}`, {
+    disableMobile: true,
+    allowInput: !readOnly,
+    dateFormat: format,
+    defaultDate: defaultDateGetter(),
+    disable: disableWeekdays && disableWeekdays.length > 0 ? [
+      (date) => {
+        const weekdayObj = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6,
+        }
+        return (
+          date.getDay() === weekdayObj[disableWeekdays[0]] ||
+          date.getDay() === weekdayObj[disableWeekdays[1]] ||
+          date.getDay() === weekdayObj[disableWeekdays[2]] ||
+          date.getDay() === weekdayObj[disableWeekdays[3]] ||
+          date.getDay() === weekdayObj[disableWeekdays[4]] ||
+          date.getDay() === weekdayObj[disableWeekdays[5]] ||
+          date.getDay() === weekdayObj[disableWeekdays[6]]
+        )
+      },
+    ] : disabledParser(),
+    maxDate: maxDate,
+    minDate: minDate,
+    mode: mode,
+    nextArrow: '<i class="far fa-angle-right"></i>',
+    onOpen: [() => {
+      calendarResizer()
+      window.addEventListener('resize', calendarResizer)
+    }],
+    onClose: [() => {
+      window.removeEventListener('resize', calendarResizer)
+    }],
+    onYearChange: [],
+    prevArrow: '<i class="far fa-angle-left"></i>',
+    static: true,
+  })
+
+  // ===========================================================
+  //                 Additional JS Functionality               |
+  // ===========================================================
+
+  // Assign dynamically sourced flatpickr instance to variable
+  const picker = document.querySelector(`#${pickerId}`)._flatpickr
+  picker.innerContainer.parentElement.id = `cal-${pickerId}`
+
+  // replace year selector with dropdown
+  picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
+
+  // create html option tags for desired years
+  let years = ''
+  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
+    years += `<option value="${year}">${year}</option>`
+  }
+
+  // variablize each dropdown selecttor
+  const dropdown = document.querySelector(`#year-${pickerId}`)
+
+  // inject year options into dropdown and assign it the flatpickr's current year value
+  dropdown.innerHTML = years
+  dropdown.value = picker.currentYear
+
+  // whenever a new year is selected from dropdown update flatpickr's current year value
+  dropdown.addEventListener('input', (e) => {
+    picker.changeYear(Number(e.target.value))
+  })
+
+  // two way binding
+  const yearChangeHook = () => {
+    dropdown.value = picker.currentYear
+  }
+  picker.config.onYearChange.push(yearChangeHook)
+
+  // click handling for Calendar Icon
+  if (!hideIcon){
+    document.querySelector(`#cal-icon-${pickerId}`).addEventListener('click', () => {
+      picker.toggle()
+    })
+  }
+
+  // Adding dropdown icons to year and month selects
+  picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+
+  // Set input value attribute on page load
+  picker.input.setAttribute('value', picker.input.value)
+  // logic for updating value when typing
+  document.querySelector(`#${pickerId}`).addEventListener('input', (e) => {
+    picker.input.setAttribute('value', e.target.value)
+    const variant = picker.config.mode
+    if (variant === 'single' && e.target.value.split('').length === 10) {
+      picker.setDate(e.target.value)
+      dropdown.value = picker.currentYear
+    } else if (variant === 'range' && e.target.value.split('').length === 24) {
+      picker.setDate(e.target.value)
+      dropdown.value = picker.currentYear
+    }
+  })
+}
+
+export default datePickerHelper

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  dark: true,
+  picker_id: "date-picker-dark"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDark = () => (
+  <div>
+    <DatePicker
+        dark
+        pickerId="date-picker-dark"
+    />
+  </div>
+)
+
+export default DatePickerDark

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDefault = () => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-default"
+    />
+  </div>
+)
+
+export default DatePickerDefault

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("date_picker", props: {
+  default_date: "07/31/2020",
+  label: "Default Date String",
+  picker_id: "date-picker-default-date1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: (Date.today + 2).httpdate,
+  label: "Default Date Dynamic",
+  picker_id: "date-picker-default-date2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
+  label: "Default Date Range",
+  mode: "range",
+  picker_id: "date-picker-default-date3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: "blank",
+  label: "Blank",
+  picker_id: "date-picker-default-date4"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDefaultDate = () => (
+  <div>
+    <DatePicker
+        defaultDate="07/31/2020"
+        label="Default Date String"
+        pickerId="date-picker-default-date1"
+    />
+    <DatePicker
+        defaultDate={new Date().fp_incr(1)}
+        label="Default Date Dynamic"
+        pickerId="date-picker-default-date2"
+    />
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(6)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+    />
+    <DatePicker
+        defaultDate="blank"
+        label="Blank"
+        pickerId="date-picker-default-date4"
+    />
+  </div>
+)
+
+export default DatePickerDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("date_picker", props: {
+  disable_date: [(Date.today + 1).httpdate],
+  label: "Disable Single Date",
+  picker_id: "single-disabled-date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_date: [(Date.today + 1).httpdate, (Date.today + 3).httpdate],
+  label: "Disable Multiple Dates",
+  picker_id: "multiple-disabled-dates"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_range: [
+          {
+            from: (Date.today + 1).httpdate,
+            to: (Date.today + 7).httpdate,
+          },
+        ],
+  label: "Disable Single Range",
+  picker_id: "single-date-range"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_range: [
+          {
+            from: (Date.today + 1).httpdate,
+            to: (Date.today + 3).httpdate,
+          },
+          {
+            from: (Date.today + 7).httpdate,
+            to: (Date.today + 14).httpdate,
+          },
+        ],
+  label: "Disable Multiple Ranges",
+  picker_id: "multiple-date-ranges"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_weekdays: ['Sunday', 'Saturday'],
+  label: "Disable Specific Weekdays",
+  picker_id: "disabled-weekdays"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDisabled = () => (
+  <div>
+    <DatePicker
+        disableDate={[new Date().fp_incr(1)]}
+        label="Disable Single Date"
+        pickerId="single-disabled-date"
+    />
+    <DatePicker
+        disableDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
+        label="Disable Multiple Dates"
+        pickerId="multiple-disabled-dates"
+    />
+    <DatePicker
+        disableRange={[
+          {
+            from: new Date().fp_incr(1),
+            to: new Date().fp_incr(7),
+          },
+        ]}
+        label="Disable Single Range"
+        pickerId="single-date-range"
+    />
+    <DatePicker
+        disableRange={[
+          {
+            from: new Date().fp_incr(1),
+            to: new Date().fp_incr(3),
+          },
+          {
+            from: new Date().fp_incr(7),
+            to: new Date().fp_incr(14),
+          },
+        ]}
+        label="Disable Multiple Ranges"
+        pickerId="multiple-date-ranges"
+    />
+    <DatePicker
+        disableWeekdays={['Sunday', 'Saturday']}
+        label="Disable Specific Weekdays"
+        pickerId="disabled-weekdays"
+    />
+  </div>
+)
+
+export default DatePickerDisabled

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  error: "Invalid date. Please pick a valid date.",
+  picker_id: "date-picker-error"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerError = () => (
+  <div>
+    <DatePicker
+        error="Invalid date. Please pick a valid date."
+        pickerId="date-picker-error"
+    />
+  </div>
+)
+
+export default DatePickerError

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("date_picker", props: {
+  format: "m-d-Y",
+  picker_id: "date-picker-format1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/y",
+  picker_id: "date-picker-format2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "n-j-y",
+  picker_id: "date-picker-format3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "Y-d-m",
+  picker_id: "date-picker-format4"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerFormat = () => (
+  <div>
+    <DatePicker
+        format="m-d-Y"
+        pickerId="date-picker-format1"
+    />
+    <DatePicker
+        format="m/d/y"
+        pickerId="date-picker-format2"
+    />
+    <DatePicker
+        format="n-j-y"
+        pickerId="date-picker-format3"
+    />
+    <DatePicker
+        format="Y-d-m"
+        pickerId="date-picker-format4"
+    />
+  </div>
+)
+
+export default DatePickerFormat

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md

@@ -0,0 +1 @@
+A full list of formatting tokens, i.e. `"m/d/Y"` can be found [here](https://flatpickr.js.org/formatting/).

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  hide_icon: true, 
+  picker_id: "date-picker-hide-icon" 
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerHideIcon = () => (
+  <div>
+    <DatePicker
+        hideIcon
+        pickerId="date-picker-hide-icon"
+    />
+  </div>
+)
+
+export default DatePickerHideIcon