playbook_ui 7.0.0.pre.alpha8 → 7.0.0.pre.alpha13

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

@@ -0,0 +1,181 @@
+import flatpickr from 'flatpickr'
+
+const datePickerHelper = (config) => {
+  const {
+    allowInput,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    format,
+    maxDate,
+    minDate,
+    mode,
+    onChange = () => {},
+    pickerId,
+    required,
+    yearRange,
+  } = config
+  // ===========================================================
+  // |                   Hook Definitions                      |
+  // ===========================================================
+
+  const defaultDateGetter = () => {
+    if (defaultDate === '') {
+      return null
+    } else {
+      return defaultDate
+    }
+  }
+  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,
+    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)
+    }],
+    onChange: [(selectedDates, dateStr) => {
+      onChange(dateStr, selectedDates)
+    }],
+    onYearChange: [() => {
+      yearChangeHook()
+    }],
+    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))
+  })
+
+  // Allow the date picker form resetting
+  if (picker.input.form) {
+    picker.input.form.addEventListener('reset', (e) => {
+      e.preventDefault()
+      if (defaultDate){
+        picker.setDate(defaultDate)
+        yearChangeHook()
+      } else {
+        picker.clear()
+      }
+
+      const fields = e.target.querySelectorAll('select, input, textarea')
+
+      // Prevent year and month dropdowns from being reset
+      fields.forEach((field) => {
+        if (field == picker.monthsDropdownContainer || field == dropdown || field == picker.input){
+          // console.log(field)
+          return
+        } else {
+          field.value = field.defaultValue
+        }
+      })
+      // setTimeout(() => {
+      //   dropdown.value = picker.currentYear
+      //   picker.monthsDropdownContainer.value = picker.currentMonth
+      //   console.log(picker)
+      // }, 10)
+    })
+  }
+
+  // two way binding
+  const yearChangeHook = () => {
+    dropdown.value = picker.currentYear
+  }
+
+  // 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>')
+
+  // Remove readonly attribute for validation and or text input
+  if (allowInput){
+    picker.input.removeAttribute('readonly')
+  }
+  if (required){
+    picker.input.removeAttribute('readonly')
+    picker.input.addEventListener('keydown', (e) => e.preventDefault())
+    picker.input.style.caretColor = 'transparent'
+    picker.input.style.cursor = 'pointer'
+  }
+}
+
+export default datePickerHelper

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,23 @@
+<%= 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: {
+  label: "Default Behavior",
+  picker_id: "date-picker-default-date4"
+}) %>

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

@@ -0,0 +1,29 @@
+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
+        label="Default Behavior"
+        pickerId="date-picker-default-date4"
+    />
+  </div>
+)
+
+export default DatePickerDefaultDate

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

@@ -0,0 +1 @@
+The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.

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,23 @@
+<%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
+  format: "m-d-Y",
+  picker_id: "date-picker-format1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
+  format: "m/d/y",
+  picker_id: "date-picker-format2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
+  format: "n-j-y",
+  picker_id: "date-picker-format3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: (Date.today).httpdate,
+  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,29 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerFormat = () => (
+  <div>
+    <DatePicker
+        defaultDate={new Date()}
+        format="m-d-Y"
+        pickerId="date-picker-format1"
+    />
+    <DatePicker
+        defaultDate={new Date()}
+        format="m/d/y"
+        pickerId="date-picker-format2"
+    />
+    <DatePicker
+        defaultDate={new Date()}
+        format="n-j-y"
+        pickerId="date-picker-format3"
+    />
+    <DatePicker
+        defaultDate={new Date()}
+        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