RubyGems - playbook_ui - Versions diffs - 12.13.0 → 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456 - Mend

playbook_ui 12.13.0 → 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect} from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: any,
+  inputValue?: string,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week",
+  selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeFormat?: string,
@@ -78,6 +78,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     mode = 'single',
     name,
     onChange = () => { void 0 },
+    onClose,
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -95,40 +96,46 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
+useEffect(() => {
+  datePickerHelper({
+    allowInput,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    enableTime,
+    format,
+    hideIcon,
+    inLine,
+    maxDate,
+    minDate,
+    mode,
+    onChange,
+    onClose,
+    pickerId,
+    plugins,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    position,
+    positionElement,
+    selectionType,
+    showTimezone,
+    staticPosition,
+    yearRange,
+    required: false,
+  }, scrollContainer)
+})
+  const filteredProps = {...props}
+  delete filteredProps?.position
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    globalProps(props),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
-  useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      pickerId,
-      plugins,
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      yearRange,
-      required: false,
-    }, scrollContainer)
-  })
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -145,78 +152,81 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
+          {...inputAriaProps}
+          {...inputDataProps}
+          className="input_wrapper"
+      >
         <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
         />
-        <div className="date_picker_input_wrapper">
-          <input
-            autoComplete="off"
-            className="date_picker_input"
-            disabled={disableInput}
-            id={pickerId}
-            name={name}
-            onChange={inputOnChange}
-            placeholder={placeholder}
-            value={inputValue}
-          />
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
-        {!hideIcon &&
-          <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-              className="cal_icon"
-              icon="calendar-alt"
-            />
-          </div>
-        }
-        {hideIcon && inLine ?
-          <div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
-            >
-              <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
-              />
-            </div>
-            <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
-            >
-              <Icon
-                className="angle_down_icon"
-                icon="angle-down"
+          <>
+            <div className="date_picker_input_wrapper">
+              <input
+                  autoComplete="off"
+                  className="date_picker_input"
+                  disabled={disableInput}
+                  id={pickerId}
+                  name={name}
+                  onChange={inputOnChange}
+                  placeholder={placeholder}
+                  value={inputValue}
               />
+              {error &&
+                  <Body
+                      status="negative"
+                      text={error}
+                      variant={null}
+                  />
+              }
             </div>
-          </div>
-          : null}
+            {!hideIcon &&
+              <div
+                  className={iconWrapperClass()}
+                  id={`cal-icon-${pickerId}`}
+              >
+                <Icon
+                    className="cal_icon"
+                    icon="calendar-alt"
+                />
+              </div>
+            }
+            {hideIcon && inLine ?
+              <div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-icon-plus`}
+                >
+                  <Icon
+                      className="date-picker-plus-icon"
+                      icon="plus"
+                  />
+                </div>
+                <div
+                    className={iconWrapperClass()}
+                    id={`${pickerId}-angle-down`}
+                >
+                  <Icon
+                      className="angle_down_icon"
+                      icon="angle-down"
+                  />
+                </div>
+              </div>
+              : null
+            }
+          </>
       </div>
     </div>
   )
 }
 export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb CHANGED Viewed

@@ -64,4 +64,4 @@
         datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -51,7 +51,7 @@ module Playbook
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
-                            values: %w[week month none],
+                            values: %w[week month quickpick none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
@@ -103,6 +103,65 @@ module Playbook
         class_string += error_class
         class_string
       end
+      def format_date(date)
+        date.strftime("%m/%d/%Y")
+      end
+      def date_ranges
+        [
+          {
+            label: "Today",
+            start_date: format_date(::Date.current),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "Yesterday",
+            start_date: format_date(::Date.current.yesterday),
+            end_date: format_date(::Date.current.yesterday),
+          },
+          {
+            label: "This Week",
+            start_date: format_date(::Date.current.beginning_of_week),
+            end_date: format_date(::Date.current.end_of_week),
+          },
+          {
+            label: "This Month",
+            start_date: format_date(::Date.current.beginning_of_month),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "This Quarter",
+            start_date: format_date(::Date.current.beginning_of_quarter),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "This Year",
+            start_date: format_date(::Date.current.beginning_of_year),
+            end_date: format_date(::Date.current),
+          },
+          {
+            label: "Last Week",
+            start_date: format_date(::Date.current.last_week.beginning_of_week),
+            end_date: format_date(::Date.current.last_week.end_of_week),
+          },
+          {
+            label: "Last Month",
+            start_date: format_date(::Date.current.last_month.beginning_of_month),
+            end_date: format_date(::Date.current.last_month.end_of_month),
+          },
+          {
+            label: "Last Quarter",
+            start_date: format_date(::Date.current.last_quarter.beginning_of_quarter),
+            end_date: format_date(::Date.current.last_quarter.end_of_quarter),
+          },
+          {
+            label: "Last Year",
+            start_date: format_date(::Date.current.last_year.beginning_of_year),
+            end_date: format_date(::Date.current.last_year.end_of_year),
+          },
+        ]
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
+import quickPickPlugin from './plugins/quickPick'
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,7 +20,8 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
-  selectionType?: "month" | "week" | "",
+  selectionType?: "month" | "week" | "quickpick" | "",
+  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
   showTimezone?: boolean,
   staticPosition: boolean,
   timeCaption?: string,
@@ -41,6 +43,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate,
     mode,
     onChange = () => {},
+    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -88,18 +91,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
   const setPlugins = () => {
-    let pluginList = []
+    const pluginList = []
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
+    } else if (selectionType === "quickpick") {
+    //------- QUICKPICK VARIANT PLUGIN -------------//
+    pluginList.push(quickPickPlugin())
     }
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
     return pluginList
   }
@@ -142,6 +150,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
+    locale: {
+      rangeSeparator: ' → '
+    },
     maxDate,
     minDate,
     mode,
@@ -151,9 +162,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
     }],
-    onClose: [() => {
+    onClose: [(selectedDates, dateStr) => {
       window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
@@ -168,6 +180,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     static: staticPosition,
   })
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { DatePicker,LabelValue } from '../..'
+const DatePickerOnClose = (props) => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+  const handleOnClose = (selectedDates, dateStr) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+  return (
+    <div>
+        <DatePicker
+            defaultDate={dateString}
+            enableTime
+            marginBottom="lg"
+            onClose={handleOnClose}
+            pickerId="date-picker-on-close"
+            showTimezone
+            {...props}
+        />
+        <LabelValue
+            label="Date Object"
+            marginBottom="lg"
+            value={dateObj[0] ? dateObj[0].toString() : ''}
+            {...props}
+        />
+        <LabelValue
+            label="Date String"
+            value={dateString}
+            {...props}
+        />
+    </div>
+  )
+}
+export default DatePickerOnClose

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb ADDED Viewed

@@ -0,0 +1,8 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+const DatePickerQuickPick = (props) => (
+  <div>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="date-picker-quick-pick"
+        placeholder="mm/dd/yyyy → mm/dd/yyyy"
+        selectionType="quickpick"
+        {...props}
+    />
+  </div>
+)
+export default DatePickerQuickPick

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx CHANGED Viewed

@@ -5,6 +5,7 @@ import DatePicker from '../_date_picker'
 const DatePickerRange = (props) => (
   <div>
     <DatePicker
+        allowInput
         defaultDate={[new Date(), new Date().fp_incr(7)]}
         mode="range"
         pickerId="date-picker-range"

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

@@ -21,6 +21,7 @@ examples:
   - date_picker_week: Week
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
+  - date_picker_quick_pick: Quick Pick
   - date_picker_positions_element: Custom Position (based on element)
   react:
@@ -31,6 +32,7 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
@@ -44,4 +46,5 @@ examples:
   - date_picker_week: Week
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
+  - date_picker_quick_pick: Quick Pick
   - date_picker_positions_element: Custom Position (based on element)

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

@@ -19,3 +19,5 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
+export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts ADDED Viewed

@@ -0,0 +1,166 @@
+import moment from 'moment'
+type FpTypes = {
+  setDate: (arg0: any, arg1: boolean) => void,
+  config: { [key: string]: string },
+  clear: (arg0: boolean, arg1: boolean) => void,
+  close: () => void,
+  calendarContainer?: {
+    classList: { add: (arg0: string) => void };
+    prepend: (arg0: HTMLDivElement) => void;
+    append: (arg0: HTMLDivElement) => void;
+  },
+  loadedPlugins: string[],
+};
+type pluginDataType = {
+  ranges: { [key: string]: Date[] },
+  rangesNav: HTMLUListElement,
+  rangesButtons: [] | any,
+}
+const quickPickPlugin = () => {
+  return function (fp: FpTypes & any): any {
+  // variable that holds the ranges available
+  const ranges = {
+      'Today': [new Date(), new Date()],
+      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
+      'This week': [moment().startOf('week').toDate(), moment().endOf('week').toDate()],
+      'This month': [moment().startOf('month').toDate(), moment().endOf('month').toDate()],
+      'This quarter': [moment().startOf('quarter').toDate(), moment().endOf('quarter').toDate()],
+      'This year': [moment().startOf('year').toDate(), moment().endOf('year').toDate()],
+      'Last week': [
+          moment().subtract(1, 'week').startOf('week').toDate(),
+          moment().subtract(1, 'week').endOf('week').toDate()
+      ],
+      'Last month': [
+          moment().subtract(1, 'month').startOf('month').toDate(),
+          moment().subtract(1, 'month').endOf('month').toDate()
+      ],
+      'Last quarter': [
+          moment().subtract(1, 'quarter').startOf('quarter').toDate(),
+          moment().subtract(1, 'quarter').endOf('quarter').toDate()
+      ],
+      'Last year': [
+          moment().subtract(1, 'year').startOf('year').toDate(),
+          moment().subtract(1, 'year').endOf('year').toDate()
+      ]
+    }
+    //creating the ul element for the nav dropdown and giving it classnames
+    const rangesNav = document.createElement('ul');
+    // creating the pluginData object that will hold the properties of this plugin
+    const pluginData: pluginDataType = {
+      ranges: ranges,
+      rangesNav: rangesNav,
+      rangesButtons: [],
+    };
+  /**
+ *    @param {string} label
+ *    @returns HTML Element
+ */
+  //funciton for creating the range buttons in the nav
+  const addRangeButton = (label: string) => {
+    // create the button element and add class and text
+    const button = document.createElement('a');
+    button.className = "nav-item-link";
+    const itemLabel = document.createElement('span')
+    itemLabel.className = "nav-item-text"
+    itemLabel.innerHTML = label;
+    // create li elements inside the dropdown
+    const item = document.createElement('li');
+    item.className = "nav-item";
+    pluginData.rangesButtons[label] = button;
+    // append span text to anchor tag
+    pluginData.rangesButtons[label].appendChild(itemLabel)
+    // append those anchor tags to the li items
+    item.appendChild(pluginData.rangesButtons[label]);
+    // append the li item to the ul rangeNav prop
+    pluginData.rangesNav.appendChild(item);
+    // return the ranges buton prop
+    return pluginData.rangesButtons[label];
+  };
+  const selectActiveRangeButton = (selectedDates: Array<string>) => {
+    const current = pluginData.rangesNav.querySelector('.active');
+    if (current) {
+      current.classList.remove('active');
+    }
+      /** conditional statment to extract start and end dates from selectedDates,
+        *   then loop through ranges prop in pluginData
+        *   and check if chosen dates equal to a date in the ranges prop
+        *   if they are equal, add the active class
+        */
+    if (selectedDates.length > 0) {
+      const startDate = moment(selectedDates[0]);
+      const endDate = selectedDates.length > 1 ? moment(selectedDates[1]) : startDate;
+      for (const [label, range] of Object.entries(pluginData.ranges)) {
+        if (startDate.isSame(moment(range[0]), 'day') && endDate.isSame(moment(range[1]), 'day')) {
+          pluginData.rangesButtons[label].classList.add('active');
+          break;
+        }
+      }
+    }
+  }
+    return {
+      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      onReady(selectedDates: Array<string>) {
+        // loop through the ranges and create an anchor tag for each range and add an event listiner to set the date when user clicks on a date range
+        for (const [label, range] of Object.entries(pluginData.ranges)) {
+          addRangeButton(label).addEventListener('click', function () {
+              const start = moment(range[0]).toDate();
+              const end = moment(range[1]).toDate();
+              if (!start) {
+                fp.clear();
+              }
+              else {
+                fp.setDate([start, end], true);
+              }
+              fp.close();
+            });
+        }
+        // conditional to check if there is a dropdown to add it to the calendar container and git it the classes it needs
+        if (pluginData.rangesNav.children.length > 0) {
+          fp.calendarContainer.prepend(pluginData.rangesNav);
+          pluginData.rangesNav.classList.add('quick-pick-ul')
+          fp.calendarContainer.classList.add('quick-pick-drop-down');
+        /**
+         *
+         * @param {Array} selectedDates
+         */
+          // function to give the active butto the active class
+          selectActiveRangeButton(selectedDates);
+        }
+      },
+      onValueUpdate(selectedDates: Array<string>) {
+        selectActiveRangeButton(selectedDates);
+      }
+    };
+  };
+}
+export default quickPickPlugin;