@innovaccer/design-system 2.13.2 → 2.13.4-1

package/core/components/organisms/pageHeader/__stories__/variants/withNavigationL1.story.jsx

@@ -59,7 +59,7 @@ export const withNavigation = () => {
     meta: <MetaList list={[{ label: 'Meta data' }]} seperator={true} />,
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -134,7 +134,7 @@ const customCode = `() => {
     )
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withStepper.story.jsx

@@ -51,7 +51,7 @@ export const withStepper = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -100,7 +100,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withStepperL1.story.jsx

@@ -65,7 +65,7 @@ export const withStepper = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -144,7 +144,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.jsx

@@ -67,7 +67,7 @@ export const withTabs = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -136,7 +136,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withTabsL1.story.jsx

@@ -78,7 +78,7 @@ export const withTabs = () => {
     meta: <MetaList list={[{ label: 'Meta data' }]} seperator={true} />,
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -174,7 +174,7 @@ const customCode = `() => {
     )
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/withFilter.story.jsx

@@ -31,7 +31,7 @@ export const level0WithFilter = () => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader title="Users" separator={true} tabs={tab} actions={actions} />
     </div>
   );
@@ -71,7 +71,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Users"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withFilterL1.story.jsx

@@ -35,7 +35,7 @@ export const level1WithFilter = () => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader title="Sender creation report" separator={true} tabs={tab} breadcrumbs={breadcrumbs} />
     </div>
   );
@@ -78,7 +78,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Sender creation report"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withNavigation.story.jsx

@@ -29,7 +29,7 @@ export const level0WithNavigation = () => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader title="Dashboard" separator={true} navigation={navigation} actions={actions} />
     </div>
   );
@@ -64,7 +64,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Dashboard"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withNavigationL1.story.jsx

@@ -42,7 +42,7 @@ export const level1WithNavigation = () => {
   );
   const meta = <MetaList list={[{ label: 'Text' }, { label: 'Email' }]} />;
   return (
-    <div className="p-5 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-5 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader
         title="Covid-19"
         separator={true}
@@ -107,7 +107,7 @@ const customCode = `() => {
     />
   );
   return (
-    <div className="p-5 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-5 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Covid-19"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withStepperL1.story.jsx

@@ -71,10 +71,10 @@ export const level1WithStepper = () => {
     />
   );
   const badge = <Badge appearance="secondary">Message</Badge>;
-  const meta = <MetaList list={[{ label: 'Draft' }]} seperator={true} />;
+  const meta = <MetaList list={[{ label: 'Draft' }]} seperator={false} />;
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader
         title="Annual Wellness Visit"
         separator={true}
@@ -163,12 +163,12 @@ const customCode = `() => {
   const meta = (
     <MetaList
       list={[{ label: 'Draft' }]}
-      seperator={true}
+      seperator={false}
     />
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'1200px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'1200px'}}>
       <PageHeader
         title="Annual Wellness Visit"
         separator={true}

package/core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx

@@ -29,7 +29,7 @@ export const tableAsDescriptionList = () => {
     {
       name: 'info',
       displayName: 'Info',
-      width: '80%',
+      width: '75%',
       cellType: 'AVATAR_WITH_META_LIST',
       translate: (a) => ({
         firstName: a.firstName,
@@ -41,7 +41,7 @@ export const tableAsDescriptionList = () => {
     {
       name: 'rights',
       displayName: 'Rights',
-      width: '20%',
+      width: '25%',
       cellRenderer: (props) => {
         const renderRights = () => {
           if (props.data.owner) {
@@ -132,7 +132,7 @@ const customCode = `() => {
     {
       name: 'info',
       displayName: 'Info',
-      width: '80%',
+      width: '75%',
       cellType: 'AVATAR_WITH_META_LIST',
       translate: a => ({
         firstName: a.firstName,
@@ -144,7 +144,7 @@ const customCode = `() => {
     {
       name: 'rights',
       displayName: 'Rights',
-      width: '20%',
+      width: '25%',
       cellRenderer: (props) => {
         const renderRights = () => {
           if (props.data.owner) {

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

@@ -1,123 +1,16 @@
 import * as React from 'react';
-import { InputMask, Utils } from '@/index';
-import { InputMaskProps } from '@/index.type';
-import { Validators } from '@/utils/types';
+import TimePickerWithSearch, { TimePickerDropdownProps } from './TimePickerWithSearch';
+import TimePickerWithInput, { TimePickerInputProps } from './TimePickerWithInput';
 
-import { translateToTime, getOutputTimeString, placeholders, isPlaceholderPresent } from './utils';
-
-export type AMPMType = 'AM' | 'PM';
-export type TimeFormat = 'hh:mm AM' | 'hh:mm';
-export type TimeType = number | string;
-
-export interface TimePickerProps {
-  /**
-   * 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: TimeFormat;
-  /**
-   * Should be used to translate `time` to desired format for `onTimeChange` callback
-   */
-  outputFormat: TimeFormat;
-  /**
-   * custom Validator for `TimePicker`
-   * `boolean | ((val?: string) => boolean)`
-   */
-  validators: Validators;
-  /**
-   * Callback function called when input field is blurred
-   */
-  onTimeChange?: (timeVal?: string) => void;
-}
+export type TimePickerProps = TimePickerInputProps & TimePickerDropdownProps;
 
 export const TimePicker = (props: TimePickerProps) => {
-  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"
-    />
-  );
+  return props.withSearch ? <TimePickerWithSearch {...props} /> : <TimePickerWithInput {...props} />;
 };
 
 TimePicker.defaultProps = {
-  inputFormat: 'hh:mm AM',
-  outputFormat: 'hh:mm AM',
-  inputOptions: {},
-  validators: [Utils.validators.time],
+  ...TimePickerWithInput.defaultProps,
+  ...TimePickerWithSearch.defaultProps,
 };
 
 TimePicker.displayName = 'TimePicker';

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;