@innovaccer/design-system 2.13.3 → 2.13.4-2

package/core/components/organisms/timePicker/TimePickerWithInput.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { InputMask, Utils } from '@/index';
+import { InputMaskProps } from '@/index.type';
+import { Validators } from '@/utils/types';
+
+import { translateToTime, getOutputTimeString, placeholders, isPlaceholderPresent } from './utils';
+
+export type AMPMType = 'AM' | 'PM';
+export type InputFormat = 'hh:mm AM' | 'hh:mm';
+export type TimeType = number | string;
+
+export interface TimePickerInputProps {
+  /**
+   * Selected time
+   *
+   * `number` - number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC
+   *
+   * **`string` - Time string value as per `inputFormat`**
+   */
+  time?: TimeType;
+  /**
+   * Props to be used for `InputMask`
+   */
+  inputOptions: Omit<InputMaskProps, 'mask' | 'value' | 'validators'>;
+  /**
+   * Should be used if `time` is of type `string`
+   *
+   * Also determines mask format
+   */
+  inputFormat: InputFormat;
+  /**
+   * Should be used to translate `time` to desired format for `onTimeChange` callback
+   */
+  outputFormat: InputFormat;
+  /**
+   * custom Validator for `TimePicker`
+   * `boolean | ((val?: string) => boolean)`
+   */
+  validators: Validators;
+  /**
+   * Callback function called when input field is blurred
+   */
+  onTimeChange?: (timeVal?: string) => void;
+}
+
+export const TimePickerWithInput = (props: TimePickerInputProps) => {
+  const { validators, inputOptions, inputFormat, outputFormat, onTimeChange, time: timeProp } = props;
+
+  const [time, setTime] = React.useState(timeProp);
+  const [init, setInit] = React.useState(false);
+  const { placeholderChar = '_' } = inputOptions;
+
+  React.useEffect(() => {
+    const timeStr = translateToTime(inputFormat, time);
+    const updatedTime = timeProp === undefined && timeStr.includes(placeholderChar) ? time : timeProp;
+
+    setTime(updatedTime);
+  }, [timeProp]);
+
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
+    const updatedTime = val?.toUpperCase();
+    setTime(updatedTime);
+
+    if (inputOptions.onChange) {
+      inputOptions.onChange(e, val);
+    }
+  };
+
+  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
+    const updatedTime = translateToTime(inputFormat, time);
+    setInit(true);
+
+    if (onTimeChange) {
+      const outputTimeStr =
+        updatedTime && !isPlaceholderPresent(placeholderChar, updatedTime)
+          ? getOutputTimeString(inputFormat, outputFormat, updatedTime)
+          : undefined;
+
+      onTimeChange(outputTimeStr);
+    }
+
+    if (inputOptions.onBlur) inputOptions.onBlur(e, val);
+  };
+
+  const onClearHandler = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+    const updatedTime = '';
+    setInit(true);
+
+    if (onTimeChange) onTimeChange(updatedTime);
+    if (inputOptions.onClear) inputOptions.onClear(e);
+  };
+
+  const inputValidator = (val: string): boolean => {
+    return Utils.validators.isValid(validators, val, inputFormat);
+  };
+
+  const mask = Utils.masks.time[inputFormat];
+  return (
+    <InputMask
+      placeholder={placeholders[inputFormat]}
+      placeholderChar={placeholderChar}
+      {...inputOptions}
+      mask={mask}
+      value={
+        time ? translateToTime(inputFormat, time) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : ''
+      }
+      validators={inputValidator}
+      onChange={onChangeHandler}
+      onClear={onClearHandler}
+      onBlur={onBlurHandler}
+      id="parent-TimePicker"
+    />
+  );
+};
+
+TimePickerWithInput.defaultProps = {
+  inputFormat: 'hh:mm AM',
+  outputFormat: 'hh:mm AM',
+  inputOptions: {},
+  validators: [Utils.validators.time],
+};
+
+TimePickerWithInput.displayName = 'TimePickerWithInput';
+export default TimePickerWithInput;

package/core/components/organisms/timePicker/TimePickerWithSearch.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import { Dropdown } from '@/index';
+import { BaseProps } from '@/utils/types';
+import { getScrollIndex } from './utility/searchUtils';
+import { OptionSchema } from '@/components/atoms/dropdown/option';
+import { scrollToOptionIndex } from '@/components/atoms/dropdown/utility';
+import { getDropdownOptionList, isFormat12Hour, convert24To12HourFormat } from './utility/timePickerUtility';
+
+type fetchOptionsFunction = (searchTerm: string) => Promise<{
+  count: number;
+  searchTerm?: string;
+  scrollToIndex?: number;
+  options: OptionSchema[];
+}>;
+
+export type TimeFormat = '12-Hour' | '24-Hour';
+
+export interface TimePickerDropdownProps extends BaseProps {
+  /**
+   * Set as `true` to show timePicker with search
+   */
+  withSearch?: boolean;
+  /**
+   * Indicates the start time for the options in particular time format `hh:mm [AM | PM]` or `hh:mm`
+   */
+  startTime?: string;
+  /**
+   * Indicates the end time for the options in particular time format `hh:mm [AM | PM]` or `hh:mm`
+   */
+  endTime?: string;
+  /**
+   * Depicts the time interval in `minutes` between options
+   */
+  interval: number;
+  /**
+   * Indicates time format for options list
+   */
+  timeFormat: TimeFormat;
+  /**
+   * Determines if the `TimePicker Popover` is open
+   */
+  open?: boolean;
+  /**
+   * Display message when there is no result
+   */
+  noResultMessage?: string;
+  /**
+   * Set as `true` to display time difference in option label w.r.t start time
+   */
+  showDuration?: boolean;
+  /**
+   *  Specify list of options in `hh:mm [AM | PM]` or `hh:mm` time format which need to be set as disabled
+   */
+  disabledSlotList?: string[];
+  /**
+   * Callback function which is called when options are selected from dropdown.
+   */
+  onChange?: (selected: any[] | any, name?: string | number) => void;
+  /**
+   * Callback function to fetch options list from API based on search term
+   *
+   * <pre className="DocPage-codeBlock p-4">
+   * fetchOptionsFunction: (searchTerm: string) => Promise<{
+   *      searchTerm?: string;
+   *      count: number,
+   *      options: OptionSchema[];
+   *      scrollToIndex?: number;
+   * }>;
+   * <br/> <br/>
+   *
+   * OptionSchema: {
+   *   label: string;
+   *   value: React.ReactText;
+   *   icon?: string;
+   *   subInfo?: string | [MetaListProps]
+   *   optionType?: OptionType;
+   *   selected?: boolean;
+   *   disabled?: boolean;
+   *   group?: string;
+   * }
+   * </pre>
+   *
+   */
+  fetchTimeOptions?: fetchOptionsFunction;
+  /**
+   * Provide unique ID in case of using multiple timePicker together
+   */
+  id?: string;
+}
+
+export const TimePickerWithSearch = (props: TimePickerDropdownProps) => {
+  const {
+    open,
+    endTime,
+    interval,
+    onChange,
+    startTime,
+    timeFormat,
+    showDuration,
+    noResultMessage,
+    disabledSlotList,
+    fetchTimeOptions,
+  } = props;
+
+  const [tabIndex, setTabIndex] = React.useState(0);
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(-1);
+  const [counter, setCounter] = React.useState(0);
+
+  const dropdownOptionList = getDropdownOptionList(props);
+
+  React.useEffect(() => {
+    open !== undefined && setOpenPopover(open);
+  }, [open]);
+
+  React.useEffect(() => {
+    let timer: any;
+
+    if (openPopover && selectedIndex != -1) {
+      setTabIndex(selectedIndex);
+
+      timer = setTimeout(() => {
+        scrollToOptionIndex(selectedIndex, dropdownOptionList);
+      }, 100);
+    }
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [openPopover]);
+
+  // Required to re-render dropdown forcefully whenever props changes
+  React.useEffect(() => {
+    setCounter(counter + 1);
+  }, [startTime, endTime, interval, showDuration, disabledSlotList]);
+
+  const onChangeHandler = (props: string) => {
+    let time = props;
+
+    if (isFormat12Hour(timeFormat)) {
+      time = convert24To12HourFormat(time);
+    }
+
+    const selectIndex = dropdownOptionList.findIndex((option) => option.value === props);
+    setSelectedIndex(selectIndex);
+    onChange && onChange(time);
+  };
+
+  const getOptionList = (searchTerm: string) => {
+    let scrollIndex;
+    const indexValue = getScrollIndex(dropdownOptionList, searchTerm);
+
+    if (searchTerm === '' && selectedIndex != -1) {
+      scrollIndex = selectedIndex;
+      setTabIndex(selectedIndex);
+    } else {
+      scrollIndex = indexValue;
+      setTabIndex(indexValue);
+    }
+
+    return Promise.resolve({
+      options: indexValue === -1 ? [] : dropdownOptionList,
+      count: dropdownOptionList.length,
+      scrollToIndex: scrollIndex === 0 ? scrollIndex + 1 : scrollIndex,
+      searchTerm,
+    });
+  };
+
+  const fetchOptionList = () => {
+    return fetchTimeOptions ? fetchTimeOptions : getOptionList;
+  };
+
+  return (
+    <Dropdown
+      key={counter}
+      maxHeight={160}
+      loadersCount={0}
+      withSearch={true}
+      open={openPopover}
+      tabIndex={tabIndex}
+      searchPlaceholder="Search"
+      onChange={onChangeHandler}
+      fetchOptions={fetchOptionList()}
+      noResultMessage={noResultMessage}
+      staticLimit={dropdownOptionList.length}
+      onPopperToggle={() => {
+        setOpenPopover(!openPopover);
+      }}
+    />
+  );
+};
+
+TimePickerWithSearch.defaultProps = {
+  timeFormat: '12-Hour',
+  interval: 15,
+};
+
+TimePickerWithSearch.displayName = 'TimePickerWithSearch';
+export default TimePickerWithSearch;

package/core/components/organisms/timePicker/__stories__/TimeIntervals.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const TimeIntervals = () => {
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format (1 hour Interval)</Label>
+        <TimePicker withSearch={true} interval={60} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format (1 hour Interval)</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} interval={60} id="24-hour" />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format (1 hour Interval)</Label>
+        <TimePicker withSearch={true} interval={60} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format (1 hour Interval)</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} interval={60} id="24-hour" />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/Time Intervals',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/disabledOption.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const disabledOption = () => {
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker withSearch={true} disabledSlotList={['12:45 AM', '01:00 AM']} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} disabledSlotList={['00:45', '01:00']} id="24-hour" />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker withSearch={true} disabledSlotList={['12:45 AM', '01:00 AM']} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker timeFormat="24-Hour" withSearch={true} disabledSlotList={['00:45', '01:00']} id="24-hour" />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/Disabled Option',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/fromTo.story.jsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { TimePicker, Label } from '@/index';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+
+// CSF format story
+export const FromTo = () => {
+  const [startTime, setStartTime] = React.useState('00:00');
+
+  const onFromChangeHandler = (props) => {
+    setStartTime(props);
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="w-25 mr-5">
+        <Label withInput={true}>From</Label>
+        <TimePicker
+          withSearch={true}
+          startTime="00:15 AM"
+          endTime="11:45 PM"
+          onChange={onFromChangeHandler}
+          id="From"
+        />
+      </div>
+
+      <div className="w-25">
+        <Label withInput={true}>To</Label>
+        <TimePicker withSearch={true} startTime={startTime} endTime="11:45 PM" showDuration={true} id="To" />
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+
+  const [startTime, setStartTime] = React.useState('00:00');
+
+  const onFromChangeHandler = (props) => {
+    setStartTime(props);
+  };
+
+  return (
+    <div className="d-flex">
+      <div className="w-25 mr-5">
+        <Label withInput={true}>From</Label>
+        <TimePicker withSearch={true} startTime="00:15 AM" endTime="11:45 PM" onChange={onFromChangeHandler} id="From" />
+      </div>
+
+      <div className="w-25">
+        <Label withInput={true}>To</Label>
+        <TimePicker withSearch={true} startTime={startTime} endTime="11:45 PM" showDuration={true} id="To" />
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/From To',
+  component: TimePicker,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+        props: {
+          components: { TimePickerWithInput, TimePickerWithSearch },
+        },
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/showDuration.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { TimePicker, Label, Row } from '@/index';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+
+// CSF format story
+export const timeDuration = () => {
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker startTime="05:00" withSearch={true} showDuration={true} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker startTime="05:00" timeFormat="24-Hour" withSearch={true} showDuration={true} id="24-hour" />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>12 Hour Format</Label>
+        <TimePicker startTime="05:00" withSearch={true} showDuration={true} id="12-hour" />
+      </div>
+
+      <div className="w-25 ml-7">
+        <Label>24 Hour Format</Label>
+        <TimePicker startTime="05:00" timeFormat="24-Hour" withSearch={true} showDuration={true} id="24-hour" />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/Time Duration',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/withDatePicker.story.jsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { TimePicker, DatePicker, Row, Label } from '@/index';
+import { TimePickerWithInput } from '../TimePickerWithInput';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+
+// CSF format story
+export const withDatePicker = () => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleDateChange = (date) => {
+    if (date) {
+      setOpen(false);
+      this.window.setTimeout(() => {
+        setOpen(true);
+      }, 0);
+    }
+  };
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>Date</Label>
+        <DatePicker
+          firstDayOfWeek="saturday"
+          onDateChange={handleDateChange}
+          outputFormat="yyyy/mm/dd"
+          withInput={true}
+          inputOptions={{
+            required: true,
+          }}
+        />
+      </div>
+      <div className="w-25 ml-7">
+        <Label>Time</Label>
+        <TimePicker withSearch={true} open={open} />
+      </div>
+    </Row>
+  );
+};
+
+const customCode = `() => {
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleDateChange = (date) => {
+    if(date) {
+      setOpen(false);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
+    }
+  };
+
+  return (
+    <Row>
+      <div className="w-25">
+        <Label>Date</Label>
+        <DatePicker
+          firstDayOfWeek="saturday"
+          onDateChange={handleDateChange}
+          outputFormat="yyyy/mm/dd"
+          withInput={true}
+          inputOptions={{
+            required: true,
+          }}
+        />
+      </div>
+      <div className="w-25 ml-7">
+        <Label>Time</Label>
+        <TimePicker withSearch={true} open={open} />
+      </div>
+    </Row>
+  );
+}`;
+
+export default {
+  title: 'Components/TimePicker/With Date Picker',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'TimePicker',
+      },
+    },
+  },
+};

package/core/components/organisms/timePicker/__stories__/{index.story.jsx → withInput.story.jsx}

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { TimePicker } from '@/index';
 import { action } from '@/utils/action';
+import { TimePickerWithSearch } from '../TimePickerWithSearch';
+import { TimePickerWithInput } from '../TimePickerWithInput';
 
 // CSF format story
-export const all = () => {
+export const withInput = () => {
   const inputFormat = 'hh:mm AM';
 
   const outputFormat = 'hh:mm';
@@ -41,8 +43,9 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/TimePicker/All',
-  component: TimePicker,
+  title: 'Components/TimePicker/With Input',
+  component: TimePickerWithInput,
+  subcomponents: { TimePickerWithSearch },
   parameters: {
     docs: {
       docPage: {