intelicoreact 0.0.6 → 0.0.7

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';
@@ -105,6 +105,8 @@ const Template = args => {
       actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
     }));
 
+    // useEffect(() => console.log(value), [value]);
+
     // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
     return (
       <div>
@@ -122,6 +124,10 @@ export const InputDateRangeTemplate = Template.bind({});
 
 InputDateRangeTemplate.args = {
     txt: {},
+    buttonsTypes: {
+      // apply: 'ellipse-apply',
+      cancel: 'bark-outline'
+    },
     label: 'Date Range',
     dateRange: { intervalKey: 'today'},
     id: 'anyToggleButtonId',
@@ -136,6 +142,7 @@ InputDateRangeTemplate.args = {
     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,9 @@ const Datepicker = props => {
         onChangeInterval,
         isCompareHidden,
         limitRange,
+        handleItemClick,
+        setActiveInterval,
+        isShortWeekNames
     } = props;
     const { start = null, end = null, compare = false } = values;
     const startDateInputRef = useRef(null);
@@ -64,6 +70,10 @@ const Datepicker = props => {
         [startDate, endDate, isCompare],
     );
 
+    const setInterval = () => {
+        setActiveInterval(getActualDateRange({ start: startDate, end: endDate }).intervalKey)
+    };
+
     const prevEndHour = useRef(endHour);
 
     const getStartHourItems = () =>
@@ -127,6 +137,7 @@ const Datepicker = props => {
             setDate1(moment(startDate));
             setDate2(moment(endDate));
         }
+        setInterval();
     }, [startDate, endDate]);
 
     useEffect(() => {
@@ -203,12 +214,12 @@ const Datepicker = props => {
 
     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({
@@ -339,31 +350,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,11 +25,12 @@ const OpenedPart = React.forwardRef((props, ref) => {
         isCompare,
         setIsCompare,
         toggleOff,
+        isShortWeekNames
     } = 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) {
@@ -75,8 +77,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 +88,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                 {!isCompact && (
                     <Datepicker
                         className={cn('opened-part__date-picker')}
+                        buttonsTypes={buttonsTypes}
                         values={actualValues}
                         onChange={data => {
                             onChange({
@@ -100,6 +103,8 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         onCancel={toggleOff}
                         isCompareHidden={isCompareHidden}
                         limitRange={limitRange}
+                        setActiveInterval={setActiveInterval}
+                        isShortWeekNames={isShortWeekNames}
                     />
                 )}
             </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" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="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);
@@ -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;
-

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -19,7 +19,8 @@ const RangeCalendar = props => {
         onHover = () => {},
         startPrevDate,
         endPrevDate,
-        limitRange
+        limitRange,
+        isShortWeekNames
     } = props;
 
     const [days, setDays] = useState({});
@@ -100,6 +101,8 @@ const RangeCalendar = props => {
         setDate(moment(date).add(1, 'month').toDate());
     };
 
+    const getFormatedWeekName = input => isShortWeekNames ? input.charAt(0) : input;
+
     return (
         <div className={cn('range-calendar', className)}>
             <div className="range-calendar-header">
@@ -126,7 +129,7 @@ const RangeCalendar = props => {
                 {[...Array(7).keys()].map(dayOfWeek => {
                     return (
                         <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
-                            {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+                            {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
                         </div>
                     );
                 })}

package/src/Atomic/FormElements/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/anme/anme-vars';
+@import '~anme/scss/anme-vars';
 
 .table-header {
     &--weight-actions {

package/src/Atomic/FormElements/Textarea/Textarea.scss

@@ -1,5 +1,5 @@
 @import "../../../scss/vars";
-@import "../../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-mixins";
 
 .textarea {
   border: 1px solid #e2e5ec;

package/src/Atomic/MainMenu/MainMenu.scss

@@ -1,5 +1,5 @@
-@import "../../scss/anme/anme-vars";
-@import "../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-vars";
+@import "~anme/scss/anme-mixins";
 
 .main-menu {
   display: flex;

package/src/Atomic/UI/Accordion/Accordion.scss

@@ -1,5 +1,5 @@
-@import '../../../scss/anme/anme-vars';
-@import '../../../scss/anme/anme-mixins';
+@import '~anme/scss/anme-vars';
+@import '~anme/scss/anme-mixins';
 
 .accordion {
     &--item {

package/src/Atomic/UI/Arrow/Arrow.scss

@@ -1,9 +1,6 @@
 .arrow {
   width: 24px;
   height: 24px;
-  color: #1F7499;
-  // cursor: pointer;
-  // border: 1px solid #EAF2FF;
 
   &_disabled {
     pointer-events: none;

package/src/Atomic/UI/Calendar/Calendar.js

@@ -5,7 +5,7 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params } = props;
+  const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
   const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
@@ -70,7 +70,7 @@ export default function (props) {
   };
 
   return (
-    <div className="calendar">
+    <div className={`calendar ${className}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (

package/src/Atomic/UI/Calendar/Calendar.stories.js

@@ -4,7 +4,7 @@ import Calendar from './Calendar';
 global.lng = 'en';
 
 export default {
-  title: 'UI/Calendar',
+  title: 'Calendar',
   component: Calendar,
 };
 
@@ -20,4 +20,5 @@ CalendarTemplate.args = {
   date: '12/03/2021',
   params: {},
   setDate: () => null,
+  className: ''
 };

package/src/Atomic/UI/Status/Status.scss

@@ -1,4 +1,4 @@
-@import "../../../scss/anme/anme-vars";
+@import "~anme/scss/anme-vars";
 
 .status {
   display: inline-flex;