intelicoreact 0.0.49 → 0.0.61

package/src/Atomic/FormElements/Input/Input.js

@@ -23,6 +23,7 @@ const Input = ({
   mask,
   error,
   icon,
+  symbolsLimit,
 }) => {
   // STATES
   const [isFocused, setIsFocused] = useState(false);
@@ -30,30 +31,30 @@ const Input = ({
   const inputRef = useRef(null);
   // HANDLES
   const handle = {
-    change: event => {
-      let inputValue = event.target?.value || event;
+    change: e => {
+      let inputValue = e.target ? e.target.value : e;
       if (isNumeric || (type === 'number' && inputValue !== '')) {
         inputValue = parseFloat(inputValue) || '';
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
       setEditing(!isEditing);
       onChange('');
     },
-    focus: () => {
+    focus: e => {
       setIsFocused(true);
-      if (onFocus) onFocus();
+      if (onFocus) onFocus(e);
     },
-    blur: () => {
+    blur: e => {
       setIsFocused(false);
       setEditing(false);
-      if (onBlur) onBlur();
+      if (onBlur) onBlur(e);
     },
-    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode) : null)
+    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode, event) : null)
   };
 
   useEffect(() => {
@@ -70,7 +71,7 @@ const Input = ({
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
     min,
-    max
+    max,
   };
 
   function renderInput() {

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

@@ -43,6 +43,7 @@ export default {
     value: { description: '(* - required prop)' },
     className: { description: 'string' },
     mask: { description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask' },
+    symbolsLimit: { description: 'Set limit of symbols in input, overhead will be ignored' },
     onBlur: { description: 'custom callback on blur' },
     onFocus: { description: 'custom callback on focus' },
     onKeyUp: { description: 'custom callback on keyup, returns event keyCode' }
@@ -67,5 +68,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: <User />
+  icon: <User />,
+  symbolsLimit: 225
 };

package/src/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -0,0 +1,43 @@
+import React, { useState, useRef } from 'react';
+import moment from 'moment';
+import InputMask from 'react-input-mask';
+import Calendar from '../../UI/Calendar/Calendar';
+import { useClickOutside } from '../../../Functions/useClickOutside';
+
+const InputCalendar = ({ data, params }) => {
+  const [date, setDate] = useState(data);
+  const [inputValue, setInputValue] = useState(date);
+  const [isOpened, setIsOpened] = useState(false);
+  const calendarRef = useRef(null);
+
+  useClickOutside(calendarRef, () => setIsOpened(false));
+
+  const changeInputValue = value => {
+    if (!value.includes('_') && value) {
+      setDate(moment(value).format('L'));
+      setInputValue(moment(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const changeCalendarDay = value => {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return (
+    <div className="calendar-container" ref={calendarRef}>
+      <InputMask
+        mask="99/99/9999"
+        value={inputValue}
+        onChange={e => changeInputValue(e.target.value)}
+        className="calendar-dropdown"
+        onFocus={() => setIsOpened(!isOpened)}
+      />
+      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+    </div>
+  );
+};
+
+export default InputCalendar;

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

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react';
+import { ref } from 'yup';
+import InputCalendar from './InputCalendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputCalendar',
+  component: InputCalendar,
+};
+
+const Template = (args) => {
+  const params = {
+    minDate: args?.minDate,
+    maxDate: args?.maxDate,
+  };
+
+  return <InputCalendar data={args.date} params={params} />;
+};
+
+export const Calendar = Template.bind({});
+
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021',
+};

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

@@ -0,0 +1,234 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import cn from 'classnames';
+import moment from 'moment-timezone';
+
+import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY, CUSTOM_INTERVAL_KEY_TEXT } from './dependencies';
+
+import OpenedPart from './components/OpenedPart';
+import Arrow from '../../UI/Arrow/Arrow';
+
+import './InputDateRange.scss';
+
+const InputDateRange = props => {
+  const {
+    txt,
+    id,
+    label,
+    className,
+    buttonsTypes,
+    value,
+    onChange = () => {},
+    error,
+    disabled,
+    isHoverable,
+    short,
+    isCompact = false,
+    // isFocused = false,
+    isIntervalsHidden = false,
+    isCompareHidden = false,
+    hideArrows = false,
+    isOptionsRight,
+    limitRange,
+    isUseAbs,
+    absTooltip
+  } = props;
+
+  const actualValues = getActualDateRange(value);
+  const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
+  const [current, setCurrent] = useState(actualValues?.intervalKey);
+  const [isCompare, setIsCompare] = useState(actualValues?.compare);
+
+  const ref = !isUseAbs ? useClickOutside(toggleOff) : useRef(null);
+  const internalContainerRef = useRef(null);
+  const isEndDateNearFuture = moment(actualValues?.end).isSameOrAfter(moment());
+
+  const Range = () => {
+    const SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+    const { start, end } = actualValues;
+    if (!start || !end) return null;
+
+    const startTime = moment(start).format('HH:mm');
+    const endTime = moment(end).format('HH:mm');
+
+    const firstPart = `${moment(start).format('ll')} ${startTime !== '00:00' ? `(${startTime})` : ''}`;
+    const secondPart = `${(endTime !== '00:00' ? moment(end) : moment(end).subtract(1, 'days')).format('ll')} ${
+      endTime !== '00:00' ? `(${endTime})` : ''
+    }`;
+
+    const getClasses = base =>
+      cn('date-range-input__range-text', {
+        'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
+      });
+
+    return (
+      <>
+        <span className={getClasses(firstPart)}>
+          {firstPart}
+          {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? '' : ` - `}
+        </span>
+        {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? null : (
+          <span className={getClasses(secondPart)}>{secondPart}</span>
+        )}
+      </>
+    );
+  };
+
+  const slideInterval = (direction = 'forward') => {
+    const { start, end } = actualValues;
+    const intervalHoursCount = moment(end).diff(start, 'hours');
+    let newEnd;
+    let newStart;
+    const endHours = moment(end).hours();
+    const startHours = moment(start).hours();
+    if (direction === 'forward') {
+      newStart = moment(end)
+        .add(endHours === 0 ? 0 : 1, 'day')
+        .hours(startHours)
+        .toDate();
+      newEnd = moment(newStart).add(intervalHoursCount, 'hours');
+    } else {
+      newEnd = moment(start)
+        .subtract(endHours === 0 ? 0 : 1, 'day')
+        .hours(endHours)
+        .toDate();
+      newStart = moment(newEnd).subtract(intervalHoursCount, 'hours');
+    }
+    const startPrevDate = moment(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
+    const endPrevDate = moment(newEnd).subtract(1, 'seconds');
+    onChange({
+      ...value,
+      intervalKey: getActualDateRange({
+        start: newStart,
+        end: newEnd
+      })?.intervalKey,
+      start: newStart,
+      end: newEnd,
+      startPrevDate,
+      endPrevDate
+    });
+  };
+
+  const handleArrowClick = type => {
+    slideInterval(type === 'right' ? 'forward' : 'back');
+    toggleOff();
+  };
+
+  const absData = useMemo(
+    () => ({
+      body: OpenedPart,
+      props: {
+        ...props,
+        key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
+        actualValues,
+        current,
+        setCurrent,
+        isCompare,
+        setIsCompare,
+        toggleOff,
+        onChange
+      },
+      clickOutsideCallback: () => toggleOff(),
+      top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
+      left: internalContainerRef.current?.getBoundingClientRect()?.left || 0
+    }),
+    [isToggled, value, actualValues, current, isCompare]
+  );
+
+  useEffect(() => {
+    if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
+  }, [current]);
+
+  useEffect(() => {
+    if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
+  }, [isToggled]);
+
+  return (
+    <div
+      ref={internalContainerRef}
+      className={cn('date-range-input', className, {
+        'date-range-input_compact': isCompact,
+        'date-range-input_hide-arrows': hideArrows,
+        'date-range-input_focused': isToggled,
+        'date-range-input_error': error,
+        'date-range-input_disabled': disabled
+      })}
+    >
+      <span className="date-range-input__label">{label}</span>
+      <div className="date-range-input__wraper" ref={ref} onMouseEnter={isHoverable && toggleOn} onMouseLeave={isHoverable && toggleOff}>
+        <div
+          className={cn('date-range-input__absolut-wraper', {
+            'date-range-input__absolut-wraper_right-position': isOptionsRight
+          })}
+        >
+          <div className={cn('date-range-input__static-part')}>
+            <button
+              id={id}
+              className={cn('date-range-input__toggle-button')}
+              // className={cn(
+              //     'date-range-input__toggle-button',
+              //     { 'form-select__input--disabled': disabled },
+              //     { 'form-select__input--opened': isToggled },
+              //     { 'form-select__input--focused': isToggled },
+              //     className,
+              // )}
+              disabled={disabled}
+              onClick={!disabled && !isHoverable ? toggle : undefined}
+            >
+              <div className="date-range-input__interval-key">
+                <span>
+                  {(txt?.labels && txt.labels[actualValues?.intervalKey]) ??
+                    (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
+                </span>
+                {current !== ALL_TIME_KEY && <span>:</span>}
+              </div>
+              {!isCompact && (
+                <div className={cn('date-range-input__range', {})}>
+                  <Range />
+                </div>
+              )}
+            </button>
+            {!isCompact && !hideArrows && (
+              <div className={cn('date-range-input__arrows-block')}>
+                <Arrow
+                  type="left"
+                  className="date-range-input__arrow"
+                  onClick={() => handleArrowClick('left')}
+                  disabled={disabled || actualValues?.intervalKey === ALL_TIME_KEY}
+                />
+                <Arrow
+                  type="right"
+                  className="date-range-input__arrow"
+                  onClick={() => handleArrowClick('right')}
+                  disabled={
+                    disabled ||
+                    actualValues?.intervalKey === ALL_TIME_KEY ||
+                    actualValues?.intervalKey === 'today' ||
+                    moment(actualValues?.end)
+                      .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                      .isAfter(moment().add(1, 'day').startOf('day'))
+                  }
+                />
+              </div>
+            )}
+          </div>
+          {isToggled && !isUseAbs && (
+            <OpenedPart
+              {...props}
+              ref={internalContainerRef}
+              actualValues={actualValues}
+              current={current}
+              setCurrent={setCurrent}
+              isCompare={isCompare}
+              setIsCompare={setIsCompare}
+              toggleOff={toggleOff}
+              onChange={onChange}
+            />
+          )}
+        </div>
+      </div>
+      {error && <span className="date-range-input__error-block">{error}</span>}
+    </div>
+  );
+};
+
+export default React.memo(InputDateRange);