playbook_ui 7.0.0.pre.alpha12 → 7.0.0.pre.alpha13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 94ac0232046d608bf8ae158596a7734d1b67f23fb91b1c64b30baede6f4ad758
-  data.tar.gz: eed40c32073db9ff048cb4c7b965dbef077058dacaff858e9a753da281fcf881
+  metadata.gz: e329711246ae555c5e6e13504fe7489062e64e67be40c0bbc17c473dbd3e7994
+  data.tar.gz: 67a8d82f86700372bc6cfb19af7f2f592f12278af0d0731388ff29b2d374dab8
 SHA512:
-  metadata.gz: ea8f2b075e31b0bdc0cf3d9dea2b386912492c3d046095e86775e6b54e8368f3af077446962cb0cdf8ba06046ee5d7153cc354cf331f6dd8bc3308888dff529c
-  data.tar.gz: 771928c8397ce43f9f038b9d64c8e358e1380e7f41fa51770df2742ccef8aee5de38dbd9cf0ec139accf029be26d8d7db8baacda51b7efcb5fc1efaf7845537b
+  metadata.gz: 7f0826a7a92bcd1f848ab4e7aea2af39d16d3a030ea28e5e5f83bf8133587f811df372587a1e5fa3c35d1cfd4068414641cc944403d59eb857ed2e62b04580a1
+  data.tar.gz: 1ed00c2dff812d1dfbcdc0d4bcf0dba1de40356155632be76255b5fa9ffe985800aa0b62c0a5f6889ef4e2abc4e4fc4c3a31f5c5b347fdc12f46992972ca3958

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -3,25 +3,20 @@
     class: object.classname + object.error_class,
     data: object.data,
     id: object.id) do %>
-      <% if object.children %>
-        <div class="input_wrapper">
-          <%= capture(&object.children) %>
-      <% else %>
-        <div class="input_wrapper">
-          <%= pb_rails("text_input", props: {
-            aria: object.input_aria,
-            autocomplete: false,
-            dark: object.dark,
-            data: object.input_data,
-            disabled: object.disable_input,
-            error: object.error,
-            id: object.picker_id,
-            label: object.hide_label ? nil : object.label,
-            name: object.name,
-            placeholder: object.placeholder,
-            required: object.required,
-          }) %>
-        <% end %>
+      <div class="input_wrapper">
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          label: object.hide_label ? nil : object.label,
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required
+        }) %>
         <% if !object.hide_icon %>
           <div
               class="<%= object.icon_wrapper_class %>"

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -65,6 +65,7 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
+          required: required,
           yearRange: year_range,
         }.to_json.html_safe
       end

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

@@ -13,29 +13,14 @@ const datePickerHelper = (config) => {
     mode,
     onChange = () => {},
     pickerId,
+    required,
     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]
-  //   }
     if (defaultDate === '') {
       return null
     } else {
@@ -63,7 +48,6 @@ const datePickerHelper = (config) => {
       parentInput.style.justifyContent = ''
     }
   }
-
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -107,16 +91,13 @@ const datePickerHelper = (config) => {
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
-    },
-    (selectedDates, dateStr) => {
-      updateValueOnChange(dateStr)
-    },
-    ],
-    onYearChange: [],
+    }],
+    onYearChange: [() => {
+      yearChangeHook()
+    }],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
-
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================
@@ -146,37 +127,55 @@ const datePickerHelper = (config) => {
     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
   }
-  picker.config.onYearChange.push(yearChangeHook)
 
   // 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
-    }
-  })
-  // Update input value attribute on Change
-  const updateValueOnChange = (pickerValue) => {
-    picker.input.setAttribute('value', pickerValue)
-  }
+  // 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_input.html.erb

@@ -15,7 +15,7 @@
 <%= pb_rails("date_picker", props: {
   label: "Blank Placeholder",
   picker_id: "date-picker-input3",
-  placeholder: "",
+  placeholder: ""
 }) %>
 
 <%= pb_rails("date_picker", props: {

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -12,9 +12,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
-  - date_picker_dark: Dark
   
   
   react:
@@ -30,7 +28,5 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
-  - date_picker_dark: Dark
   

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -10,6 +10,4 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
 export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
 export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
-// export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
-export { default as DatePickerDark } from './_date_picker_dark.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -30,6 +30,7 @@
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= form.date_picker :test_id, props: { label: true }%>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -33,7 +33,7 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker1, props: { default_date: "blank", label: true } %>
+  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -28,7 +28,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true, label: "hello-label" } %>
+  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -15,23 +15,12 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field,
-    :example_checkbox_field_2,
-    :example_date_picker_field_1,
-    :example_date_picker_field_3
-
-    # for local testing only
-    # will be removed before merging
-    def initialize
-      # @example_number_field = 123
-      @example_date_picker_field_1 = "10/02/1993"
-      @example_date_picker_field_3 = Date.today.httpdate
-    end
+    :example_date_picker_field_1
 
 
     def self.model_name
       ActiveModel::Name.new(self, nil, "ExampleFormModel")
     end
-
   end
 %>
 
@@ -52,7 +41,6 @@
 
 
 <%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
-
   <%= form.input :example_text_field, as: :string %>
   <%= form.input :example_phone_field, as: :tel %>
   <%= form.input :example_email_field, as: :email %>
@@ -64,9 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.check_box :example_checkbox_field_2, props: { text: "Example Checkbox", label: true } %>
   <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
-  <%= form.date_picker :example_date_picker_field_3, props: { default_date: 'blank', label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -8,44 +8,14 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
+          props[:label] = @template.label(@object_name, name) if props[:label] && !props[:label].is_a?(String)
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id
-          props[:label] = @template.label(@object_name, name) if props[:label] == true
 
-          puts @object.to_json
-
-          input = text_field(
-            name,
-            autocomplete: "off",
-            disabled: props[:disable_input],
-            data: props[:input_data],
-            aria: props[:input_aria],
-            props: {
-              error: props[:error],
-              label: props[:label],
-              placeholder: props[:placeholder],
-              required: props[:required],
-            }
-          )
-          puts input
-
-          @template.pb_rails("date_picker", props: props) do
-            input
-          end
+          @template.pb_rails("date_picker", props: props)
         end
       end
     end
   end
 end
-
-# Create text input with rails form helper
-# pass options to text input
-
-# add hidden, implicit prop identifying it as form helper
-# inside dp erb, create conditional if check to leave out text_input kit
-
-# pass that input as a block to @template.pb_rails("date_picker")
-# let rails do the magic
-
-# null value handling

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.0.0.pre.alpha12"
+  VERSION = "7.0.0.pre.alpha13"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.0.0.pre.alpha12
+  version: 7.0.0.pre.alpha13
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-06 00:00:00.000000000 Z
+date: 2020-10-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -680,11 +680,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

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

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

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

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

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

@@ -1 +0,0 @@
-By default the date picker input can only be modified by picking a date on the calendar.  This prop allows your users to manually type in the date.

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

@@ -1,4 +0,0 @@
-<%= 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

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