npm - @innovaccer/design-system - Versions diffs - 2.13.3 → 2.13.4-2 - Mend

@innovaccer/design-system 2.13.3 → 2.13.4-2

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 (349) hide show

package/core/components/organisms/timePicker/__tests__/__snapshots__/TimePickerWithSearch.test.tsx.snap ADDED Viewed

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`TimePicker component snapshots renders snapshot for all props
+  startTime: "05:00 AM", endTime: "11:00 PM", showDuration: false, timeFormat: "12-Hour"
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="Dropdown"
+    >
+      <style />
+      <div
+        class="OutsideClick PopperWrapper-trigger w-100"
+      >
+        <button
+          class="Button DropdownButton DropdownButton--regular DropdownButton--placeholder"
+          data-test="DesignSystem-DropdownTrigger"
+          tabindex="0"
+          type="button"
+          value=""
+        >
+          <div
+            class="DropdownButton-wrapper"
+          >
+            <span
+              class="Text Text--regular DropdownButton-text"
+            >
+              Select
+            </span>
+          </div>
+          <i
+            class="material-icons material-icons-round Icon Icon--default"
+            role="button"
+            style="font-size: 16px; width: 16px;"
+          >
+            keyboard_arrow_down_round
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`TimePicker component snapshots renders snapshot for all props
+  startTime: "05:00 AM", endTime: "11:00 PM", showDuration: false, timeFormat: "24-Hour"
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="Dropdown"
+    >
+      <style />
+      <div
+        class="OutsideClick PopperWrapper-trigger w-100"
+      >
+        <button
+          class="Button DropdownButton DropdownButton--regular DropdownButton--placeholder"
+          data-test="DesignSystem-DropdownTrigger"
+          tabindex="0"
+          type="button"
+          value=""
+        >
+          <div
+            class="DropdownButton-wrapper"
+          >
+            <span
+              class="Text Text--regular DropdownButton-text"
+            >
+              Select
+            </span>
+          </div>
+          <i
+            class="material-icons material-icons-round Icon Icon--default"
+            role="button"
+            style="font-size: 16px; width: 16px;"
+          >
+            keyboard_arrow_down_round
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`TimePicker component snapshots renders snapshot for all props
+  startTime: "05:00 AM", endTime: "11:00 PM", showDuration: true, timeFormat: "12-Hour"
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="Dropdown"
+    >
+      <style />
+      <div
+        class="OutsideClick PopperWrapper-trigger w-100"
+      >
+        <button
+          class="Button DropdownButton DropdownButton--regular DropdownButton--placeholder"
+          data-test="DesignSystem-DropdownTrigger"
+          tabindex="0"
+          type="button"
+          value=""
+        >
+          <div
+            class="DropdownButton-wrapper"
+          >
+            <span
+              class="Text Text--regular DropdownButton-text"
+            >
+              Select
+            </span>
+          </div>
+          <i
+            class="material-icons material-icons-round Icon Icon--default"
+            role="button"
+            style="font-size: 16px; width: 16px;"
+          >
+            keyboard_arrow_down_round
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`TimePicker component snapshots renders snapshot for all props
+  startTime: "05:00 AM", endTime: "11:00 PM", showDuration: true, timeFormat: "24-Hour"
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="Dropdown"
+    >
+      <style />
+      <div
+        class="OutsideClick PopperWrapper-trigger w-100"
+      >
+        <button
+          class="Button DropdownButton DropdownButton--regular DropdownButton--placeholder"
+          data-test="DesignSystem-DropdownTrigger"
+          tabindex="0"
+          type="button"
+          value=""
+        >
+          <div
+            class="DropdownButton-wrapper"
+          >
+            <span
+              class="Text Text--regular DropdownButton-text"
+            >
+              Select
+            </span>
+          </div>
+          <i
+            class="material-icons material-icons-round Icon Icon--default"
+            role="button"
+            style="font-size: 16px; width: 16px;"
+          >
+            keyboard_arrow_down_round
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/core/components/organisms/timePicker/index.tsx CHANGED Viewed

@@ -1,2 +1,4 @@
 export { default } from './TimePicker';
 export * from './TimePicker';
+export * from './TimePickerWithInput';
+export * from './TimePickerWithSearch';

package/core/components/organisms/timePicker/utility/searchUtils.tsx ADDED Viewed

@@ -0,0 +1,295 @@
+import {
+  convertToTwoDigit,
+  _isTimeInAM,
+  _isTimeInPM,
+  checkTimeDifference,
+  getTimeDifference,
+} from './timePickerUtility';
+import { OptionSchema } from '@/components/atoms/dropdown/option';
+interface timeObj {
+  hour: string;
+  min: string;
+}
+const convertMinTo60 = (time: string) => {
+  const parseNum = parseInt(time, 10);
+  if (parseNum < 10) return time;
+  const timeInNum = parseNum > 60 ? parseNum % 60 : parseNum;
+  const min = (timeInNum.toString() + '0').slice(0, 2);
+  return min;
+};
+const get24HourCurrentTime = () => {
+  const today = new Date();
+  return convertToTwoDigit(today.getHours()) + ':' + convertToTwoDigit(today.getMinutes());
+};
+const convertHourTo24 = (time: string) => {
+  const timeInNum = parseInt(time, 10) % 24;
+  return timeInNum.toString();
+};
+const convertHourTo12 = (time: string) => {
+  const timeInNum = parseInt(time, 10) % 12;
+  return timeInNum.toString();
+};
+const _checkNumber = (str: string) => {
+  const numberRegex = /^[0-9]+$/;
+  return numberRegex.test(str);
+};
+const _checkNumberWithAMPM = (str: string) => {
+  const numberWithAMPMRegex = /^[0-9]+[ AaMmPp]+$/;
+  return numberWithAMPMRegex.test(str);
+};
+const _checkNumberWithSpecialChar = (str: string) => {
+  const numberWithSpecialCharRegex = /^[0-9]+[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~][0-9]*$/;
+  return numberWithSpecialCharRegex.test(str);
+};
+const _checkNumberWithSpecialCharAMPM = (str: string) => {
+  const numberWithSpecialCharAMPM = /^[0-9]+[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~][0-9]+[ AaMmPp]+$/;
+  return numberWithSpecialCharAMPM.test(str);
+};
+const specialCharRegex = /[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/;
+/**
+ * @param searchTime in [number special-char number] format
+ * @returns timeObj with hour & minute in 24 hour format
+ */
+const getTimeFromNumberWithSpecialChar = (searchTime: string) => {
+  const time = searchTime.split(specialCharRegex);
+  const hour = convertHourTo24(time[0]);
+  const hh = convertToTwoDigit(hour);
+  const min = time[1] !== '' ? convertMinTo60(time[1]) : '00';
+  const mm = (min + '0').slice(0, 2);
+  return { hour: hh, min: mm };
+};
+/**
+ * If search term only contains number
+ * @param searchTerm
+ * @returns timeObj with hour & minute in 24 hour format
+ */
+const getSearchTimeFromNumber = (searchTerm: string, show12HourFormat?: boolean) => {
+  const searchLen = searchTerm.length;
+  const searchTimeInNum = parseInt(searchTerm, 10);
+  const firstTwoTerm = searchTerm.slice(0, 2);
+  let hh = '00';
+  let mm = '00';
+  switch (searchLen) {
+    case 1: // if search term length is 1 consider it as hour
+      hh = '0' + searchTerm;
+      break;
+    case 2: // if search term length is 2
+      if (searchTimeInNum <= 24 || (show12HourFormat && searchTimeInNum <= 12)) {
+        // consider it as hour
+        hh = convertToTwoDigit(searchTerm);
+      } else {
+        // consider first term as hour and last term as min
+        hh = '0' + searchTerm[0];
+        mm = convertMinTo60(searchTerm[1] + '0');
+        // mm = searchTerm[1] + '0';
+      }
+      break;
+    case 3:
+      hh = '0' + searchTerm[0];
+      mm = convertMinTo60(searchTerm.slice(1));
+      break;
+    case 4:
+      hh = show12HourFormat ? convertHourTo12(firstTwoTerm) : convertHourTo24(firstTwoTerm);
+      mm = convertMinTo60(searchTerm.slice(2));
+      break;
+    default:
+      // set time as -1 in case of invalid time
+      hh = '-1';
+      mm = '-1';
+  }
+  return { hour: hh, min: mm };
+};
+/**
+ * @param searchTime in [number AMPM] format
+ * @returns timeObj with hour & minute in 24 hour format
+ */
+const getTimeFromNumberWithAMPM = (searchTime: string) => {
+  const timeArr = searchTime.split(/[\saAmMpP]/);
+  const { hour, min } = getSearchTimeFromNumber(timeArr[0], true);
+  return { hour, min };
+};
+/**
+ * @param searchTerm entered by user in any format
+ * @returns modified search term in 24 hour format
+ */
+export const formatSearchTerm = (optionList: string[], searchTerm: string) => {
+  let searchTime = { hour: '00', min: '00' };
+  // If search term only contains numbers
+  if (_checkNumber(searchTerm)) {
+    const searchTimeInHHMM = getSearchTimeFromNumber(searchTerm);
+    if (parseInt(searchTimeInHHMM.hour) <= 12 && parseInt(searchTimeInHHMM.hour) > 0) {
+      // switch to AM/PM based on current time
+      searchTime = getCurrentRelativeTime(optionList, searchTimeInHHMM);
+    } else {
+      searchTime = searchTimeInHHMM;
+    }
+  }
+  // if search term contains numbers along with [ampm]
+  else if (_checkNumberWithAMPM(searchTerm)) {
+    searchTime = getTimeFromNumberWithAMPM(searchTerm);
+    searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
+  }
+  // if search term contains numbers along with special character
+  else if (_checkNumberWithSpecialChar(searchTerm)) {
+    const searchTimeInHHMM = getTimeFromNumberWithSpecialChar(searchTerm);
+    if (parseInt(searchTimeInHHMM.hour) <= 12) {
+      // switch to AM/PM based on current time
+      searchTime = getCurrentRelativeTime(optionList, searchTimeInHHMM);
+    } else {
+      searchTime = searchTimeInHHMM;
+    }
+  }
+  // if search term contains numbers, special character & [AmPm]
+  else if (_checkNumberWithSpecialCharAMPM(searchTerm)) {
+    const timeWithoutAMPM = searchTerm.replace(/[\saApPmM]/g, '');
+    if (_checkNumber(timeWithoutAMPM)) {
+      searchTime = getSearchTimeFromNumber(timeWithoutAMPM, true);
+    } else if (_checkNumberWithSpecialChar(timeWithoutAMPM)) {
+      searchTime = getTimeFromNumberWithSpecialChar(timeWithoutAMPM);
+    }
+    searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
+  }
+  return searchTime;
+};
+/**
+ * @param hours
+ * @param searchTerm
+ * @returns hours based on AM/PM in 24 hour format
+ */
+const convert12To24HourFormat = (hours: string, searchTerm: string) => {
+  if (hours === '12' && _isTimeInAM(searchTerm)) {
+    hours = '00';
+  } else if (_isTimeInPM(searchTerm) && hours !== '12') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+  return hours;
+};
+/**
+ * Switch to AM/PM time based on current time
+ * @param optionList
+ * @param searchTime
+ */
+const getCurrentRelativeTime = (optionList: string[], searchTime: timeObj) => {
+  const searchTimeStr = `${searchTime.hour}:${searchTime.min}`;
+  const currentTime = get24HourCurrentTime();
+  const greaterTime = checkTimeDifference(currentTime, searchTimeStr);
+  const currentTimeIndex = findClosestTimeIndex(optionList, currentTime);
+  const searchTimeIndex = findClosestTimeIndex(optionList, searchTimeStr);
+  if (greaterTime && currentTimeIndex > searchTimeIndex) {
+    const hourIn24Format = parseInt(searchTime.hour, 10) + 12;
+    searchTime.hour = hourIn24Format.toString();
+  }
+  return searchTime;
+};
+const findClosestTimeIndex = (optionList: string[], searchItem: string) => {
+  let closestItemIndex = 0;
+  const minTime = { hour: 100, mins: 100 };
+  for (let index = 0; index < optionList.length; index++) {
+    const { hour, minute } = getTimeDifference(searchItem, optionList[index]);
+    if (hour < minTime.hour || (hour === minTime.hour && minute < minTime.mins)) {
+      minTime.hour = hour;
+      minTime.mins = minute;
+      closestItemIndex = index;
+    }
+  }
+  return closestItemIndex;
+};
+/**
+ * Get index of search term from option list
+ * @param optionList
+ * @param searchTerm
+ * @returns Index of the search term in option list
+ */
+export const getSearchIndex = (optionList: string[], searchTerm: string) => {
+  let { hour, min } = formatSearchTerm(optionList, searchTerm);
+  if (min === '60') {
+    min = '00';
+    hour = (parseInt(hour, 10) + 1).toString();
+  }
+  const searchItem = `${hour}:${min}`;
+  const searchIndex = findClosestTimeIndex(optionList, searchItem);
+  return searchIndex;
+};
+/**
+ * @param searchTerm
+ * @returns count number of digits present inside search term
+ */
+const countNumberInStr = (searchTerm: string) => {
+  return searchTerm.match(/\d/g)?.length || 0;
+};
+const isValidSearchTerm = (searchTerm: string) => {
+  const totalDigit = countNumberInStr(searchTerm);
+  return totalDigit > 0 && totalDigit < 5;
+};
+const getValueFromOptionList = (optionList: OptionSchema[]) => {
+  const list = optionList.map((option: any) => option.value);
+  return list;
+};
+const getSearchValueIndex = (options: string[], searchTerm: string): number => {
+  // Search Term is valid if it contains number
+  if (!isValidSearchTerm(searchTerm)) {
+    return -1;
+  }
+  const searchIndex = getSearchIndex(options, searchTerm);
+  return searchIndex;
+};
+export const getScrollIndex = (dropdownOptionList: OptionSchema[], searchTerm: string): number => {
+  const optionList = getValueFromOptionList(dropdownOptionList);
+  if (searchTerm === '') {
+    // return current time index
+    const currTime = get24HourCurrentTime();
+    const currTimeIndex = findClosestTimeIndex(optionList, currTime);
+    return currTimeIndex;
+  }
+  return getSearchValueIndex(optionList, searchTerm);
+};

package/core/components/organisms/timePicker/utility/timePickerUtility.tsx ADDED Viewed

@@ -0,0 +1,219 @@
+import { TimePickerDropdownProps, TimeFormat } from '../TimePickerWithSearch';
+const parseDate = (date_time: any) => {
+  const d = new Date();
+  d.setHours(date_time.substring(0, 2));
+  d.setMinutes(date_time.substring(3, 5));
+  return d;
+};
+export const isFormat12Hour = (format: string) => {
+  return format === '12-Hour';
+};
+const isTimeIn12HourFormat = (time: string) => {
+  return _isTimeInAM(time) || _isTimeInPM(time);
+};
+export const _isTimeInAM = (time: string) => {
+  return time.includes('a') || time.includes('A');
+};
+export const _isTimeInPM = (time: string) => {
+  return time.includes('p') || time.includes('P');
+};
+/**
+ * Convert time from 12 hour format to 24 hour format
+ * @param timeStr in hh:mm [AM/PM] format
+ * @returns time in HH:MM format
+ */
+export const convert12To24HourFormat = (timeStr: string) => {
+  const [time, modifier] = timeStr.split(' ');
+  const timeArr = time.split(':');
+  let hours = timeArr[0];
+  const minutes = timeArr[1];
+  if (hours === '12' && _isTimeInAM(modifier)) {
+    hours = '00';
+  }
+  if (_isTimeInPM(modifier) && hours !== '12') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+  return `${hours}:${minutes}`;
+};
+/**
+ * @param val
+ * @returns insert 0 at start in case of single digit
+ */
+export const convertToTwoDigit = (val: string | number) => {
+  return ('0' + val).slice(-2);
+};
+/**
+ * Convert time from 24 hour format to 12 hour format
+ * @param timeStr in HH:MM format
+ * @returns time in hh:mm [AM/PM] format
+ */
+export const convert24To12HourFormat = (timeStr: string) => {
+  const timeArr = timeStr.split(':');
+  const hours = parseInt(timeArr[0], 10);
+  const modifier = hours >= 12 ? 'PM' : 'AM';
+  const convertedHours = hours % 12 || 12;
+  let hoursInString = convertedHours.toString();
+  hoursInString = convertToTwoDigit(hoursInString);
+  const minutes = timeArr[1];
+  const result = `${hoursInString.toString()}:${minutes} ${modifier}`;
+  return result;
+};
+const getTimeIn24HrFormat = (timeStr: string) => {
+  if (isTimeIn12HourFormat(timeStr)) {
+    return convert12To24HourFormat(timeStr);
+  }
+  return timeStr;
+};
+/**
+ * @param startTime in HH:MM format
+ * @param endTime in HH:MM format
+ * @returns returns true if start time is greater than end time
+ */
+export const checkTimeDifference = (startTime: string, endTime: string) => {
+  const parseStartTime = parseDate(startTime);
+  const parseEndTime = parseDate(endTime);
+  return parseStartTime > parseEndTime;
+};
+/**
+ * @param startTime in HH:MM format
+ * @param endTime in HH:MM format
+ * @param interval
+ * @returns array of 24 hour time list based on interval
+ */
+const get24HourTimeList = (startTime: string, endTime: string, interval: number) => {
+  const timeList = [];
+  const parseStartTime = parseDate(startTime);
+  const parseEndTime = parseDate(endTime);
+  while (parseStartTime <= parseEndTime) {
+    timeList.push(parseStartTime.toTimeString().substring(0, 5));
+    parseStartTime.setMinutes(parseStartTime.getMinutes() + interval);
+  }
+  return timeList;
+};
+/**
+ * @param startTime in HH:MM format
+ * @param interval
+ * @returns time list in 24 hour format including times option for next day
+ */
+const getReverseTimeList = (startTime: string, endTime: string, interval: number) => {
+  const timeList = get24HourTimeList('00:00', '23:59', interval);
+  const startTimeIndex = timeList.indexOf(startTime);
+  const endTimeIndex = timeList.indexOf(endTime);
+  const nextDayTimeIndex = endTime === '' ? startTimeIndex : endTimeIndex + 1;
+  const presentDayList = timeList.slice(startTimeIndex);
+  const nextDayList = timeList.slice(0, nextDayTimeIndex);
+  const result = presentDayList.concat(nextDayList);
+  return result;
+};
+const getTimeListIn24HourFormat = (startTime: string, endTime: string, interval: number) => {
+  if (endTime === '' || checkTimeDifference(startTime, endTime)) {
+    return getReverseTimeList(startTime, endTime, interval);
+  }
+  return get24HourTimeList(startTime, endTime, interval);
+};
+export const getTimeDifference = (startTime: string, endTime: string) => {
+  const timeStart = new Date('07/07/2022 ' + startTime);
+  const timeEnd = new Date('07/07/2022 ' + endTime);
+  const diff = timeEnd.getTime() - timeStart.getTime();
+  const diff_as_date = new Date(diff);
+  const hour = diff_as_date.getUTCHours();
+  const minute = diff_as_date.getUTCMinutes();
+  return { hour, minute };
+};
+const getCustomLabel = (time: string, timeFormat: TimeFormat, showDuration?: boolean, referenceTime?: string) => {
+  let label = time;
+  if (isFormat12Hour(timeFormat)) {
+    label = convert24To12HourFormat(time);
+  }
+  if (showDuration && referenceTime) {
+    const { hour, minute } = getTimeDifference(referenceTime, time);
+    const timeDiffLabel = ` (${hour} hr ${minute} min)`;
+    label += timeDiffLabel;
+  }
+  return label;
+};
+const isOptionDisabled = (time: string, timeFormat: TimeFormat, disabledSlotList: string[]) => {
+  let timeValue = time;
+  if (isFormat12Hour(timeFormat)) {
+    timeValue = convert24To12HourFormat(time);
+  }
+  if (disabledSlotList.includes(timeValue)) {
+    return true;
+  }
+  return false;
+};
+const convertTimeToOptionList = (
+  timeList: string[],
+  timeFormat: TimeFormat,
+  id = 'TimePicker-Option-key',
+  showDuration?: boolean,
+  referenceTime?: string,
+  disabledSlotList?: string[]
+) => {
+  const optionList = timeList.map((time, index) => {
+    return {
+      label: getCustomLabel(time, timeFormat, showDuration, referenceTime),
+      value: time,
+      disabled: disabledSlotList && isOptionDisabled(time, timeFormat, disabledSlotList),
+      selected: false,
+      optionID: id + index,
+    };
+  });
+  return optionList;
+};
+const computeEndTime = (startTime: string | undefined) => {
+  return startTime ? '' : '23:59';
+};
+export const getDropdownOptionList = (props: TimePickerDropdownProps) => {
+  const { startTime, endTime, interval, timeFormat, showDuration, disabledSlotList, id } = props;
+  const startTimeIn24Hr = startTime ? getTimeIn24HrFormat(startTime) : '00:00';
+  const endTimeIn24Hr = endTime ? getTimeIn24HrFormat(endTime) : computeEndTime(startTime);
+  const timeList = getTimeListIn24HourFormat(startTimeIn24Hr, endTimeIn24Hr, interval);
+  const dropdownOptionList = convertTimeToOptionList(
+    timeList,
+    timeFormat,
+    id,
+    showDuration,
+    startTime,
+    disabledSlotList
+  );
+  return dropdownOptionList;
+};

package/core/components/organisms/timePicker/utils.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { TimeType, AMPMType } from './TimePicker';
+import { TimeType, AMPMType } from './TimePickerWithInput';
 import { InputProps } from '@/index.type';
 interface TimeObject {