@innovaccer/design-system 2.13.2 → 2.13.4-1

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

@@ -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

@@ -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

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

package/core/index.tsx

@@ -65,6 +65,7 @@ export { Placeholder } from './components/molecules/placeholder';
 export { EditableInput } from './components/molecules/editableInput';
 export { EditableChipInput } from './components/molecules/editableChipInput';
 export { PlaceholderParagraph } from './components/atoms/placeholderParagraph';
+export { PlaceholderImage } from './components/atoms/placeholderImage';
 export { ProgressRing } from './components/atoms/progressRing';
 export { Stepper } from './components/molecules/stepper';
 export { DateRangePicker } from './components/organisms/dateRangePicker';

package/css/dist/index.css

@@ -2085,7 +2085,7 @@ body {
 }
 
 .Dropdown-inputWrapper {
-  border-bottom: var(--border);
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
 }
 
 .Dropdown-input {
@@ -2095,6 +2095,7 @@ body {
 .Dropdown-input,
 .Dropdown-input:focus-within {
   border: unset !important;
+  box-shadow: none !important;
 }
 
 .Dropdown-section {
@@ -2135,13 +2136,6 @@ body {
   box-sizing: border-box;
 }
 
-.Dropdown-items {
-  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
 .Option {
   display: flex;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
@@ -3858,6 +3852,7 @@ body {
 .MetricInput:focus-within {
   background: var(--white);
   border-color: var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -4030,7 +4025,6 @@ body {
   background-color: var(--white);
   border-radius: var(--spacing);
   overflow: auto;
-  display: flex;
   flex-direction: column;
   display: none;
   margin: auto;
@@ -4044,7 +4038,7 @@ body {
 }
 
 .Modal--open {
-  display: block;
+  display: flex;
 }
 
 .Modal-animation--open {