playbook_ui 12.26.0.pre.alpha.railsmultilevelimprovements805 → 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831

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

@@ -8,6 +8,8 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick_rails: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +35,8 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick_react: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -19,4 +19,6 @@ 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 DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
+export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -0,0 +1,168 @@
+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,
+}
+
+let activeLabel = ""
+
+const quickPickPlugin = (thisRangesEndToday: boolean) => {
+  return function (fp: FpTypes & any): any {
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
+    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
+
+    // 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('isoWeek').toDate(), thisWeekEndDate],
+      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
+      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
+      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
+      'Last week': [
+        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
+        moment().subtract(1, 'week').endOf('isoWeek').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
+   */
+
+    //function for creating the range buttons in the nav
+    const addRangeButton = (label: string) => {
+
+      // creating new elements to mimick selectable card component
+      const div2 = document.createElement('div');
+      div2.className = "nav-item-link"
+      div2.innerHTML = label;
+
+      pluginData.rangesButtons[label] = div2;
+
+      // create li elements inside the dropdown
+      const item = document.createElement('li');
+      item.className = "nav-item";
+
+      // append those nav items 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 && activeLabel) {
+        // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
+        // selected.forEach(el => {
+        //   if (el.innerHTML === activeLabel)
+        //   el.classList.add('active')
+        //   return
+        // })
+
+        pluginData.rangesButtons[activeLabel].classList.add('active');
+      }
+    }
+
+
+    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 listener 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 {
+              activeLabel = label
+              fp.setDate([start, end], true);
+              fp.close();
+            }
+          });
+        }
+        // conditional to check if there is a dropdown to add it to the calendar container and get 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 button the active class
+          selectActiveRangeButton(selectedDates);
+        }
+      },
+      onValueUpdate(selectedDates: Array<string>) {
+        selectActiveRangeButton(selectedDates);
+      },
+
+      onClose(selectedDates: Array<string>) {
+        // set the input value to the selected dates when the dropdown is closed
+        if (selectedDates.length < 2 && selectedDates.length > 0) {
+          fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
+        }
+      }
+    };
+  };
+}
+
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -1,3 +1,4 @@
+@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
   pointer-events: none;
@@ -13,8 +14,8 @@
   padding-left: $space_sm - 1;
   color: $text_lt_light;
   @media (hover: hover) {
-    &:hover {
-      cursor: pointer;
+    &:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -0,0 +1,75 @@
+@import "../../tokens/animation-curves";
+@import "../../tokens/colors";
+@import "../../tokens/typography";
+@import "../../tokens/titles";
+@import "../../tokens/spacing";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+
+// used to display dropdown on the left of the calender
+.quick-pick-drop-down {
+  width: auto;
+  display: grid;
+}
+
+.quick-pick-ul {
+  padding: $space_xs 0px;
+  margin: 0;
+  list-style: none;
+}
+
+.nav-item {
+  list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
+}
+
+.nav-item-link {
+  text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
+  padding: $space_xs 14px;
+  transition-property: color, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: $bezier;
+  line-height: 1.4;
+  color: $charcoal;
+  font-size: $font_default;
+  font-weight: $regular;
+  &.active {
+    border-width: 2px;
+    border-color: $primary;
+  }
+  @media (hover:hover) {
+    &:hover {
+      cursor: pointer;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
+    }
+  }
+}
+
+// Hide the calendar
+.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
+  display: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -1,58 +1,16 @@
-//function for unchecking items in formattedData
-export const unCheckIt = (
-  formattedData: { [key: string]: any }[],
-  id: string
-) => {
-  formattedData.map((item: { [key: string]: any }) => {
-    if (item.id === id && item.checked) {
-      item.checked = false;
-    }
-    if (item.children && item.children.length > 0) {
-      unCheckIt(item.children, id);
-    }
-    return item;
-  });
-};
-
 //function to retrieve all ancestors of unchecked item and set checked to false
 export const getAncestorsOfUnchecked = (
-  formattedData: { [key: string]: any }[],
+  data: { [key: string]: any }[],
   item: { [key: string]: any }
 ) => {
   if (item.parent_id) {
-    const ancestors = filterFormattedDataById(formattedData, item.parent_id);
-    ancestors[0].checked = false;
-
-    if (ancestors[0].parent_id) {
-      getAncestorsOfUnchecked(formattedData, ancestors[0]);
-    }
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0])
   }
+  return data;
 };
-
-//recursively check all child and grandchild items if parent checked
-export const checkedRecursive = (item: { [key: string]: any }) => {
-  if (!item.checked) {
-    item.checked = true;
-  }
-  if (item.children && item.children.length > 0) {
-    item.children.forEach((childItem: { [key: string]: any }) => {
-      checkedRecursive(childItem);
-    });
-  }
-};
-
-//recursively uncheck all child and grandchild items if parent unchecked
-export const unCheckedRecursive = (item: { [key: string]: any }) => {
-  if (item.checked) {
-    item.checked = false;
-  }
-  if (item.children && item.children.length > 0) {
-    item.children.forEach((childItem: { [key: string]: any }) => {
-      unCheckedRecursive(childItem);
-    });
-  }
-};
-
+  
 //function is going over formattedData and returning all objects that match the
 //id of the clicked item from the dropdown
 export const filterFormattedDataById = (
@@ -64,6 +22,7 @@ export const filterFormattedDataById = (
     for (const item of data) {
       if (item.id.toLowerCase() === (term.toLowerCase())) {
         matched.push(item);
+        return
       }
 
       if (item.children && item.children.length > 0) {
@@ -116,97 +75,60 @@ export const getCheckedItems = (
   });
   return checkedItems;
 };
+    
+export const getDefaultCheckedItems = (treeData:{ [key: string]: any }[]) => {
+  const checkedDefault: { [key: string]: any }[] = [];
 
-export const getChildIds = (
-  item: { [key: string]: any },
-  defaultArray: { [key: string]: any }[]
-) => {
-  let childIds: string[] = [];
-  item.children.forEach((child: { [key: string]: any }) => {
-    childIds.push(child.id);
-    if (child.children && child.children.length > 0) {
-      const childChildIds = getChildIds(child, defaultArray);
-      childIds.push(...childChildIds);
+  const traverseTree = (items:{ [key: string]: any }[]) => {
+    if (!Array.isArray(items)) {
+      return;
     }
-  });
-  return childIds;
-};
+    items.forEach((item:{ [key: string]: any }) => {
+      if (item.checked) {
+        if (item.children && item.children.length > 0) {
+          const uncheckedChildren = item.children.filter((child:{ [key: string]: any }) => !child.checked);
+          if (uncheckedChildren.length === 0) {
+            checkedDefault.push(item);
+            return;
+          }
+        } else {
+          const parent = items.find((parentItem:{ [key: string]: any }) => parentItem.id === item.parentId);
+          if (!parent || !parent.checked) {
+            checkedDefault.push(item);
+          }
+        }
+      }
 
-export const updateReturnItems = (newChecked: { [key: string]: any }[]) => {
-  const updatedCheckedItems: { [key: string]: any }[] = [];
-  for (const item of newChecked) {
-    if (item.children && item.children.length > 0) {
-      const allChildrenChecked = item.children.every(
-        (child: { [key: string]: any }) => child.checked
-      );
-      if (allChildrenChecked) {
-        updatedCheckedItems.push(item);
+      if (item.children && item.children.length > 0) {
+        traverseTree(item.children);
       }
-    }
-    const childItem = updatedCheckedItems.some((x) => x.id === item?.parent_id);
-    if (!childItem) {
-      updatedCheckedItems.push(item);
-    }
-  }
-  const filteredReturn = updatedCheckedItems.filter((item) => {
-    return !updatedCheckedItems.find(
-      (otherItem) => otherItem.id === item.parent_id
-    );
-  });
-  return filteredReturn;
+    });
+  };
+
+  traverseTree(treeData);
+
+  return checkedDefault;
 };
 
-export const recursiveReturnOnlyParent = (
-  items: { [key: string]: any },
-  formattedData: { [key: string]: any }[],
-  defaultReturn: { [key: string]: any }[],
-  setDefaultReturn: any
+export const recursiveCheckParent = (
+  item: { [key: string]: any },
+  data:any
 ) => {
-  const parent = filterFormattedDataById(formattedData, items.parent_id);
+  if (item.parent_id !== null) {
+  const parent = filterFormattedDataById(data, item.parent_id);
   const allChildrenChecked = parent[0].children.every(
     (child: { [key: string]: any }) => child.checked
   );
   if (allChildrenChecked) {
-    // Only return the parent and remove its children from defaultReturn
     parent[0].checked = true;
-    const filteredDefaultReturn = defaultReturn.filter((item) => {
-      // Remove children of the specific parent
-      if (
-        parent[0].children.find(
-          (child: { [key: string]: any }) => child.id === item.id
-        )
-      ) {
-        return false;
-      }
-    });
-    setDefaultReturn([...filteredDefaultReturn, parent[0]]);
-    // Check if the parent has a parent and its children are all checked
     const parentHasParent = parent[0].parent_id !== null;
     if (parentHasParent) {
-      recursiveReturnOnlyParent(
+      recursiveCheckParent(
         parent[0],
-        formattedData,
-        filteredDefaultReturn,
-        setDefaultReturn
+        data
       );
     }
-  } else {
-    const checkedChildren = parent[0].children.filter(
-      (child: { [key: string]: any }) => child.checked
-    );
-    const updatedDefaultReturn = [...defaultReturn, ...checkedChildren];
-    setDefaultReturn(updatedDefaultReturn);
-  }
-};
-
-export const removeChildrenIfParentChecked = (
-  items: { [key: string]: any },
-  defaultReturn: { [key: string]: any }[],
-  setDefaultReturn: any
-) => {
-  const childIds = getChildIds(items, defaultReturn);
-  const filteredDefaultArray = defaultReturn.filter(
-    (item: { [key: string]: any }) => childIds !== item.id
-  );
-  setDefaultReturn([...filteredDefaultArray, items]);
-};
+}
+}
+return data;
+}