intelicoreact 0.0.6 → 0.0.9

package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import InputDateRange from '.';
+import React, { /* useEffect, */ useState } from 'react';
+import InputDateRange from './InputDateRange';
 import Table from '../Table/Table';
 
 global.lng = 'en';
@@ -17,126 +17,47 @@ export default {
   }
 };
 
-const tableData = {
-  header: [
-    { id: 1, label: 'state' },
-    { id: 2, label: 'Tags' },
-    { id: 3, label: 'status' },
-    { id: 4, label: 'loanAmountApproved' },
-    { id: 5, label: 'loanAmountRejected' },
-    { id: 6, label: 'approveRate' },
-    { id: 7, label: 'actions', type: 'actions' }
-  ],
-  rows: [
-    {
-      id: 1,
-      link: { label: 'CA', link: '#s' },
-      tags: [{ label: 'Label 1' }],
-      status: { value: '90', status: 'active' },
-      loanAmountApproved: { value: '$70,000' },
-      loanAmountRejected: { value: '$30,000' },
-      approveRate: { value: '70%' }
-    },
-    {
-      id: 2,
-      link: { label: 'NY', link: '#s' },
-      advancedTags: [
-        {
-          labelLeft: 'home',
-          labelRight: 'hoods',
-          active: 3,
-          pause: 1,
-          merchants: 5
-        },
-        {
-          labelRight: 'jewelry',
-          active: 3,
-          pause: 1,
-          merchants: 5
-        },
-        {
-          labelLeft: 'home',
-          labelRight: 'improvement',
-          active: 0,
-          pause: 0,
-          warnLeft: true,
-          warnLeftMsg: 'landerNotIncluded',
-          warnRightMsg: 'noMerchants'
-        },
-        {
-          labelLeft: 'home',
-          labelRight: 'hoods',
-          active: 3,
-          pause: 1,
-          merchants: 5
-        },
-        {
-          labelRight: 'jewelry',
-          active: 3,
-          pause: 1,
-          merchants: 5
-        }
-      ],
-      status: { label: 'Active', className: 'color--green-haze' },
-      loanAmountApproved: { value: '$3,000' },
-      loanAmountRejected: { value: '$7,000' },
-      approveRate: { value: '30%' }
-    },
-    {
-      id: 3,
-      link: { label: 'NH', link: '#s' },
-      tags: [{ label: 'Label 1' }, { label: 'Label 2' }, { label: 'Label 3' }],
-      status: { status: 'error' },
-      loanAmountApproved: { value: '$70,000' },
-      loanAmountRejected: { value: '$30,000' },
-      approveRate: { value: '70%' }
-    }
-  ]
-};
-
 const Template = args => {
-    const { dateRange, ...restOfProps } = args;
-    const [value, setValue] = useState(dateRange);
-
-    const [state, setState] = useState(tableData);
-
-    const rowsWithActions = state?.rows?.map(row => ({
-      ...row,
-      actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
-    }));
-
-    // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
-    return (
-      <div>
-        <div className="mb20">
-          <InputDateRange {...restOfProps} value={value} onChange={setValue} />
-        </div>
-        <div>
-          <Table header={state.header} rows={rowsWithActions} onChange={setState} />
-        </div>
+  const { dateRange, ...restOfProps } = args;
+  const [value, setValue] = useState(dateRange);
+  // useEffect(() => console.log(value), [value]);
+
+  // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+  return (
+    <div>
+      <div className="mb20">
+        <InputDateRange {...restOfProps} value={value} onChange={setValue} />
       </div>
-    );
+    </div>
+  );
 };
 
 export const InputDateRangeTemplate = Template.bind({});
 
 InputDateRangeTemplate.args = {
-    txt: {},
-    label: 'Date Range',
-    dateRange: { intervalKey: 'today'},
-    id: 'anyToggleButtonId',
-    className: 'anyExternalContainerClassName',
-    error: false,
-    disabled: false,
-    isHoverable: false,
-    // short: true,
-    isCompact: false,
-    // isFocused: true,
-    isIntervalsHidden: false,
-    isCompareHidden: true,
-    hideArrows: false,
-    isOptionsRight: false,
-    // limitRange,
-    // isUseAbs,
-    // absTooltip
+  txt: {},
+  buttonsTypes: {
+    // apply: 'ellipse-apply',
+    cancel: 'bark-outline'
+  },
+  label: 'Date Range',
+  dateRange: { intervalKey: 'today' },
+  id: 'anyToggleButtonId',
+  className: 'anyExternalContainerClassName',
+  error: false,
+  disabled: false,
+  isHoverable: false,
+  minDate: "",
+  maxDate: "",
+  // short: true,
+  isCompact: false,
+  // isFocused: true,
+  isIntervalsHidden: false,
+  isCompareHidden: true,
+  hideArrows: false,
+  isOptionsRight: false,
+  isShortWeekNames: false
+  // limitRange,
+  // isUseAbs,
+  // absTooltip
 };

package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -3,6 +3,8 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import moment from 'moment-timezone';
 import cn from 'classnames';
 
+import { getActualDateRange } from '../dependencies';
+
 import SelectInput from '../../Dropdown/Dropdown';
 import TextInput from '../../Input/Input';
 import Btn from '../../../UI/Button/Button';
@@ -28,6 +30,7 @@ const Datepicker = props => {
     const {
         txt,
         className,
+        buttonsTypes = {},
         values = {},
         onChange,
         onChangeCompare,
@@ -36,6 +39,11 @@ const Datepicker = props => {
         onChangeInterval,
         isCompareHidden,
         limitRange,
+        handleItemClick,
+        setActiveInterval,
+        isShortWeekNames,
+        minDate = null,
+        maxDate = null
     } = props;
     const { start = null, end = null, compare = false } = values;
     const startDateInputRef = useRef(null);
@@ -64,6 +72,10 @@ const Datepicker = props => {
         [startDate, endDate, isCompare],
     );
 
+    const setInterval = () => {
+        setActiveInterval(getActualDateRange({ start: startDate, end: endDate }).intervalKey)
+    };
+
     const prevEndHour = useRef(endHour);
 
     const getStartHourItems = () =>
@@ -127,6 +139,7 @@ const Datepicker = props => {
             setDate1(moment(startDate));
             setDate2(moment(endDate));
         }
+        setInterval();
     }, [startDate, endDate]);
 
     useEffect(() => {
@@ -180,7 +193,7 @@ const Datepicker = props => {
     const handleChangeStartHour = val => {
         setStartHour(+val);
         setStartDate(
-            moment(startDate)
+            moment(startDate || moment())
                 .set('hour', +val)
                 .toDate(),
         );
@@ -189,26 +202,28 @@ const Datepicker = props => {
     const handleChangeEndHour = val => {
         const newHour = +val;
         setEndHour(newHour);
-        let newEndDate;
-        if (prevEndHour.current === 0 && newHour !== 0) {
-            newEndDate = moment(endDate).subtract(1, 'days');
-        } else if (prevEndHour.current !== 0 && newHour === 0) {
-            newEndDate = moment(endDate).add(1, 'days');
-        } else {
-            newEndDate = endDate;
+        let newEndDate = moment();
+
+        if(endDate){
+          if (prevEndHour.current === 0 && newHour !== 0) {
+              newEndDate = moment(endDate).subtract(1, 'days');
+          } else if (prevEndHour.current !== 0 && newHour === 0) {
+              newEndDate = moment(endDate).add(1, 'days');
+          }
         }
+
         prevEndHour.current = newHour;
         setEndDate(moment(newEndDate).set('hour', newHour).toDate());
     };
 
     const renderButtons = () => (
         <>
-            <Btn className="date-picker__button" onClick={() => onCancel()} variant="ellipse-cancel">
+            <Btn className="date-picker__button" onClick={() => onCancel()} variant={buttonsTypes?.cancel}>
                 {txt?.buttons?.cancel || 'cancel'}
             </Btn>
             <Btn
                 className="date-picker__button"
-                variant="ellipse-apply"
+                variant={buttonsTypes?.apply}
                 disabled={!startDate || !endDate}
                 onClick={() =>
                     onChange({
@@ -245,13 +260,22 @@ const Datepicker = props => {
 
     const handleStartDateBlur = e => {
         let newDate;
-        if (moment(startDateInput).isValid()) {
-            newDate = moment(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
-            setStartDate(newDate);
+
+        if(!moment(startDateInput).isValid()){
+          newDate = startDate;
         } else {
-            newDate = startDate;
-            setStartDateInput(newDate);
+          if(minDate && !moment(startDateInput).isSameOrAfter(minDate)){
+            newDate = minDate;
+          } else if(maxDate && !moment(startDateInput).isSameOrBefore(maxDate)){
+            newDate = maxDate;
+          } else {
+            newDate = moment(startDateInput);
+          }
         }
+
+        setStartDateInput(newDate);
+        setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
+
         doBlur('start', e);
         setDate1(
             moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate),
@@ -266,16 +290,24 @@ const Datepicker = props => {
 
     const handleEndDateBlur = e => {
         let newDate;
-        if (moment(endDateInput).isValid()) {
-            newDate = moment(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
-            setEndDate(addDay(newDate));
+
+        if(!moment(endDateInput).isValid()){
+          newDate = endDate;
         } else {
-            newDate = endDate;
-            setEndDateInput(newDate);
+          if(minDate && !moment(endDateInput).isSameOrAfter(minDate)){
+            newDate = minDate;
+          } else if(maxDate && !moment(endDateInput).isSameOrBefore(maxDate)){
+            newDate = maxDate;
+          } else {
+            newDate = moment(endDateInput);
+          }
         }
+
+        setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
+        setEndDateInput(newDate);
+
         doBlur('end', e);
         setDate2(newDate);
-        setEndDateInput();
     };
 
     const handleKeyPressed = (code, e, type) => {
@@ -283,20 +315,23 @@ const Datepicker = props => {
         if (code === 27) doBlur(type, e);
     };
 
+    const startDateValue = startDate ? moment(startDate).format('ll') : '';
+    const endDateValue = endDate ? moment(endDate).subtract(1, 'm').format('ll') : '';
+
     return (
         <div className={cn('date-picker', className)}>
             <div className="date-picker__header">
                 <div className="date-picker__inputs-block">
                     <TextInput
                         dataTest="datepicker_start-date-input"
-                        className={cn('date-picker__date-input', { 'date-picker__date-input_active': hoverStatus === 'start' })}
-                        value={isStartFocused ? startDateInput : moment(startDate).format('ll')}
-                        disabled={!startDate}
+                        className={cn( { 'date-picker__date-input_active': hoverStatus === 'start' })}
+                        value={isStartFocused ? startDateInput : startDateValue}
                         onChange={value => setStartDateInput(handleDateInputOnChange(value))}
                         onFocus={handleStartDateFocus}
+                        disabled={!startDate}
                         onBlur={handleStartDateBlur}
                         onKeyUp={(code, e) => handleKeyPressed(code, e, 'start')}
-                        ref={startDateInputRef}
+                        //ref={startDateInputRef}
                         // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
                     />
                     <SelectInput
@@ -311,14 +346,14 @@ const Datepicker = props => {
                     <div className="date-picker__inputs-separator date-picker__header--gray">—</div>
                     <TextInput
                         dataTest="datepicker_end-date-input"
-                        className={cn('date-picker__date-input', { 'date-picker__date-input_active': hoverStatus === 'end' })}
-                        value={isEndFocused ? endDateInput : moment(subtractDay(endDate)).format('ll')}
+                        className={cn({ 'date-picker__date-input_active': hoverStatus === 'end' })}
+                        value={isEndFocused ? endDateInput : endDateValue}
                         disabled={!endDate}
                         onChange={value => setEndDateInput(handleDateInputOnChange(value))}
                         onFocus={handleEndDateFocus}
                         onBlur={handleEndDateBlur}
                         onKeyUp={(code, e) => handleKeyPressed(code, e, 'end')}
-                        ref={endDateInputRef}
+                        //ref={endDateInputRef}
                     />
                     <SelectInput
                         dataTest="datepicker_end-hour-select-input"
@@ -339,31 +374,35 @@ const Datepicker = props => {
 
 
             <div className="date-picker__calendars">
-                <Calendar
-                    className="date-picker__calendar"
-                    date={date1}
-                    setDate={setDate1}
-                    allowNext={!isNearby}
-                    startDate={startDate}
-                    endDate={endDate}
-                    startPrevDate={startPrevDate}
-                    endPrevDate={endPrevDate}
-                    onClick={handleClick}
-                    onHover={handleHover}
-                    limitRange={limitRange}
-                />
-                <Calendar
-                    className="date-picker__calendar"
-                    date={date2}
-                    setDate={setDate2}
-                    allowPrev={!isNearby}
-                    startDate={startDate}
-                    endDate={endDate}
-                    startPrevDate={startPrevDate}
-                    endPrevDate={endPrevDate}
-                    onClick={handleClick}
-                    onHover={handleHover}
-                />
+                <div className="date-picker__calendars-wrapper">
+                    <Calendar
+                        className="date-picker__calendar"
+                        date={date1}
+                        setDate={setDate1}
+                        allowNext={!isNearby}
+                        startDate={startDate}
+                        endDate={endDate}
+                        startPrevDate={startPrevDate}
+                        endPrevDate={endPrevDate}
+                        onClick={handleClick}
+                        onHover={handleHover}
+                        limitRange={limitRange}
+                        isShortWeekNames={isShortWeekNames}
+                    />
+                    <Calendar
+                        className="date-picker__calendar"
+                        date={date2}
+                        setDate={setDate2}
+                        allowPrev={!isNearby}
+                        startDate={startDate}
+                        endDate={endDate}
+                        startPrevDate={startPrevDate}
+                        endPrevDate={endPrevDate}
+                        onClick={handleClick}
+                        onHover={handleHover}
+                        isShortWeekNames={isShortWeekNames}
+                    />
+                </div>
             </div>
             <div className={cn('date-picker__footer', {
                 'date-picker__footer_once-element': isCompareHidden

package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import moment from 'moment-timezone';
 import cn from 'classnames';
 
-import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey } from '..';
+import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey, CUSTOM_INTERVAL_KEY_TEXT } from '../dependencies';
 
 import SelectItem from './SelectItem';
 import Datepicker from './Datepicker';
@@ -10,6 +10,7 @@ import Datepicker from './Datepicker';
 const OpenedPart = React.forwardRef((props, ref) => {
     const {
         txt,
+        buttonsTypes,
         actualValues,
         onChange = () => {},
         isHoverable,
@@ -24,12 +25,15 @@ const OpenedPart = React.forwardRef((props, ref) => {
         isCompare,
         setIsCompare,
         toggleOff,
+        isShortWeekNames,
+        minDate = null,
+        maxDate = null
     } = props;
 
-    // const [styles, setStyles] = useState({});
-
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
 
+    const [activeInterval, setActiveInterval] = useState(actualValues.intervalKey);
+
     const handleItemClick = item => {
         if (item !== customKey) {
             onChange({
@@ -75,8 +79,8 @@ const OpenedPart = React.forwardRef((props, ref) => {
                             <SelectItem
                                 key={index}
                                 item={item}
-                                label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || item}
-                                isActive={actualValues.intervalKey === item}
+                                label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || (item === customKey ? CUSTOM_INTERVAL_KEY_TEXT : item )}
+                                isActive={activeInterval === item}
                                 onItemClick={() => handleItemClick(item.value || item)}
                                 disabled={item === customKey}
                             />
@@ -86,6 +90,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                 {!isCompact && (
                     <Datepicker
                         className={cn('opened-part__date-picker')}
+                        buttonsTypes={buttonsTypes}
                         values={actualValues}
                         onChange={data => {
                             onChange({
@@ -100,6 +105,10 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         onCancel={toggleOff}
                         isCompareHidden={isCompareHidden}
                         limitRange={limitRange}
+                        setActiveInterval={setActiveInterval}
+                        isShortWeekNames={isShortWeekNames}
+                        minDate={minDate}
+                        maxDate={maxDate}
                     />
                 )}
             </div>

package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
 
-import icon from '../../../../../../assets/icons/check.svg'
-
 const SelectItem = ({ item, label, isActive, onItemClick, onMouseEnter, disabled }) => (
     <div
         className={cn(
@@ -15,7 +13,11 @@ const SelectItem = ({ item, label, isActive, onItemClick, onMouseEnter, disabled
         onMouseEnter={onMouseEnter}
         data-item={item}
     >
-        {isActive && <object data={icon} className={cn('opened-part__intervals-item-icon-active')} />}
+        {isActive && (
+            <svg className={cn('opened-part__intervals-item-icon-active')} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+        )}
         {label}
     </div>
 );

package/src/Atomic/FormElements/InputDateRange/{index.js → dependencies.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import moment from 'moment-timezone';
 
-import InputDateRange from './components/InputDateRange';
+import InputDateRange from './InputDateRange';
 
 export const useClickOutside = (hideComponent, additionalComponent) => {
     const ref = useRef(null);
@@ -89,7 +89,7 @@ export const INTERVALS = {
         end: () => moment().startOf('month'),
     },
     last6Months: {
-        label: 'Last 6 Months',
+        label: '6 Months',
         start: () => moment().subtract(6, 'month').startOf('month'),
         end: () => moment().startOf('month'),
     },
@@ -115,10 +115,9 @@ export const CUSTOM_INTERVAL_KEY_TEXT = 'Custom Date';
 
 export const getActualDateRange = inputDateRange => {
     const actualIntervalKey = (() => {
-        if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
+        if (inputDateRange.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
             return inputDateRange.intervalKey;
-        }
-        if (inputDateRange.start && inputDateRange.end) {
+        } else if (inputDateRange.start && inputDateRange.end) {
             for (const [key, interval] of Object.entries(INTERVALS)) {
                 if (
                     moment(inputDateRange.start).isSame(interval.start()) &&
@@ -127,20 +126,29 @@ export const getActualDateRange = inputDateRange => {
                     return key;
                 }
             }
+            return CUSTOM_INTERVAL_KEY;
         }
-        return null;
+        return ALL_TIME_KEY;
     })();
+    if (actualIntervalKey === ALL_TIME_KEY) return {
+        intervalKey: ALL_TIME_KEY,
+        start: null,
+        end: null,
+        compare: inputDateRange.compare,
+        startPrevDate: null,
+        endPrevDate:null
+    };
     const actualValues = {
         // intervalKey: inputDateRange.intervalKey || customIntervalKey,
         intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,
         start:
             inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
                 ? inputDateRange?.start
-                : INTERVALS[inputDateRange.intervalKey]?.start()?.toDate(),
+                : INTERVALS[inputDateRange.intervalKey]?.start()?.format('YYYY-MM-DDTHH:mm'),
         end:
             inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
                 ? inputDateRange?.end
-                : INTERVALS[inputDateRange.intervalKey]?.end()?.toDate(),
+                : INTERVALS[inputDateRange.intervalKey]?.end()?.format('YYYY-MM-DDTHH:mm'),
         compare: inputDateRange.compare,
     };
 
@@ -151,7 +159,3 @@ export const getActualDateRange = inputDateRange => {
     }
     return actualValues;
 };
-
-const component = props => <InputDateRange {...props} />;
-export default component;
-