intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.jsx

@@ -0,0 +1,183 @@
+import cn from 'classnames';
+
+import moment from 'moment-timezone';
+import { useEffect, useMemo, useState } from 'react';
+
+import Arrow from '../../UI/Arrow/Arrow';
+
+import './RangeCalendar.scss';
+
+function RangeCalendar(props) {
+  const {
+    className,
+    date,
+    setDate,
+    startDate,
+    endDate,
+    allowPrev = true,
+    allowNext = true,
+    onClick = () => {},
+    onHover = () => {},
+    startPrevDate,
+    endPrevDate,
+    limitRange,
+    isShortWeekNames,
+    minDate,
+    maxDate,
+    momentMinDate,
+    momentMaxDate,
+    isDontLimitFuture,
+    testId = 'range-calendar',
+  } = props;
+
+  const [days, setDays] = useState({});
+
+  const title = useMemo(
+    () => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`,
+    [date],
+  );
+
+  useEffect(() => {
+    const result = {};
+    const day = moment(date).startOf('month');
+    const daysInMonth = day.daysInMonth();
+    for (let d = 0; d < daysInMonth; d += 1) {
+      let week = day.week();
+      if (day.month() === 11 && week === 1) week = 53;
+      if (day.month() === 0 && week === 53) week = 0;
+      if (!Object.prototype.hasOwnProperty.call(result, week)) {
+        result[week] = {};
+      }
+      result[week][day.weekday()] = { date: day.toDate() };
+      day.add(1, 'd');
+    }
+    setDays(result);
+  }, [date]);
+
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[week][dayOfWeek];
+    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+    const isPastDay = limitRange
+      ? day
+      && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day')
+      : null;
+    const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
+    const isRangeEnd
+      = day
+        && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
+    const isRangeInside
+      = day
+        && startDate
+        && endDate
+        && moment(day.date).isAfter(startDate, 'day')
+        && moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
+    const isPrevRangeEnd
+      = day
+        && (moment(day.date).isSame(startPrevDate, 'day')
+          || moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
+    const isPrevRangeInside
+      = day
+        && startPrevDate
+        && endPrevDate
+        && moment(day.date).isAfter(startPrevDate, 'day')
+        && moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
+    const classNames = cn(
+      'range-calendar__day',
+      { 'range-calendar__day--clickable': day },
+      {
+        'range-calendar__day--disabled':
+          isPastDay
+          || (minDate && moment(day?.date).isBefore(momentMinDate, 'day'))
+          || (!isDontLimitFuture
+            && (maxDate ? moment(day?.date).isAfter(momentMaxDate) : isFutureDay)),
+      },
+      { 'range-calendar__day--range-start': isRangeStart },
+      { 'range-calendar__day--range-end': isRangeEnd },
+      { 'range-calendar__day--range-inside': isRangeInside },
+      { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
+      { 'range-calendar__day--prev-range-inside': isPrevRangeInside },
+    );
+
+    return (
+      <div
+        key={`${week}_${dayOfWeek}`}
+        className={classNames}
+        onClick={day ? e => onClick(day.date, e) : null}
+        onMouseOver={day ? () => onHover(day.date) : null}
+        onMouseLeave={() => onHover(null)}
+      >
+        <span className="calendar__day-num">{day && day.date.getDate()}</span>
+      </div>
+    );
+  };
+
+  const handlePrev = () => {
+    setDate(moment(date).subtract(1, 'month').toDate());
+  };
+
+  const handleNext = () => {
+    setDate(moment(date).add(1, 'month').toDate());
+  };
+
+  const getFormatedWeekName = input =>
+    isShortWeekNames ? input.charAt(0) : input;
+
+  return (
+    <div className={cn('range-calendar', className)} data-testid={testId}>
+      <div className="range-calendar-header">
+        <Arrow
+          type="left"
+          disabled={
+            !allowPrev
+            || (minDate
+              && moment(date)
+                .startOf('month')
+                .isSameOrBefore(momentMinDate, 'months'))
+          }
+          onClick={handlePrev}
+          className="range-calendar-header__prev"
+        />
+
+        <div className="range-calendar-header__title">{title}</div>
+
+        <Arrow
+          type="right"
+          disabled={
+            !allowNext
+            || (!isDontLimitFuture
+              && moment(date)
+                .startOf('month')
+                .isSameOrAfter(
+                  maxDate
+                    ? momentMaxDate
+                    : moment().add(1, 'day').startOf('day'),
+                  'months',
+                ))
+          }
+          onClick={handleNext}
+          className="range-calendar-header__next"
+        />
+      </div>
+
+      <div className="range-calendar__week range-calendar__week-title">
+        {[...Array.from({ length: 7 }).keys()].map((dayOfWeek) => {
+          return (
+            <div
+              key={`day-of-week_${dayOfWeek}`}
+              className="range-calendar__day range-calendar__day--title"
+            >
+              {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
+            </div>
+          );
+        })}
+      </div>
+      {Object.keys(days).map((week, index) => (
+        <div key={`week_${index}`} className="range-calendar__week">
+          {[...Array.from({ length: 7 }).keys()].map(dayOfWeek => renderDay(week, dayOfWeek))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default RangeCalendar;

package/dist/Atomic/FormElements/RangeList/RangeList.jsx

@@ -0,0 +1,181 @@
+import cn from 'classnames';
+
+import { useRef, useState } from 'react';
+
+// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
+import { addRangeDefault } from '../../../Functions/operations';
+import Button from '../../UI/Button/Button';
+import Input from '../Input/Input';
+
+import RangeListRow, { RangeListCell } from './partial/RangeListRow';
+
+import './RangeList.scss';
+
+const RC = 'range-list';
+const DEFAULT_STATE = { from: '', to: '' };
+
+function RangeList(props) {
+  const {
+    className,
+    value = [],
+    disabled,
+    validateErrors,
+    onChange,
+    isFloatValues,
+    decimalPlaces,
+    error,
+    defaultErrorText,
+    nullValueText,
+    isOnlyOneRow = false,
+    testId = 'range-list',
+  } = props;
+
+  const NULL_VALUE_TEXT = nullValueText ?? 'No data';
+
+  const [state, setState] = useState(DEFAULT_STATE);
+  const [innerError, setInnerError] = useState('');
+  const [outerError, setOuterError] = useState('');
+
+  const inputFromRef = useRef(null);
+  const inputToRef = useRef(null);
+
+  const isValidRange = Boolean(
+    state?.from && state?.to && Number(state?.from) <= Number(state?.to),
+  );
+  const isShowRow = (isOnlyOneRow && value?.length === 0) || !isOnlyOneRow;
+
+  const handle = {
+    inputsChange: (val, prop) => setState({ ...state, [prop]: val }),
+    addRange: () => {
+      if (
+        isValidRange
+        && (!validateErrors?.(Number(state.from), Number(state.to)) ?? true)
+      ) {
+        onChange(
+          addRangeDefault(
+            Number(state.from),
+            Number(state.to),
+            value,
+            isFloatValues ? decimalPlaces : null,
+          ),
+        );
+        setState(DEFAULT_STATE);
+        setInnerError('');
+        setOuterError('');
+      }
+      else if (!isValidRange) {
+        setInnerError(defaultErrorText);
+      }
+      else if (validateErrors) {
+        setOuterError(validateErrors(Number(state.from), Number(state.to)));
+      }
+    },
+    removeRange: index =>
+      onChange(value.filter((item, idx) => idx !== index)),
+    rangeValidation: (e, key) => {
+      const oppositeKey = key === 'from' ? 'to' : 'from';
+
+      if (!state?.from && !state?.to) {
+        setInnerError('');
+        setOuterError('');
+        return e;
+      }
+      if (!state[oppositeKey]) {
+        const mustToFocus
+          = key === 'from' ? inputToRef.current : inputFromRef.current;
+        mustToFocus.focus();
+      }
+      else if (!isValidRange) {
+        setInnerError(defaultErrorText);
+        if (validateErrors)
+          setOuterError(validateErrors(Number(state.from), Number(state.to)));
+      }
+      else {
+        setInnerError('');
+        if (validateErrors)
+          setOuterError(validateErrors(Number(state.from), Number(state.to)));
+      }
+      return null;
+    },
+    onKeyUpFromInput: (code) => {
+      if (code === 13) {
+        if (isValidRange) inputFromRef.current.blur();
+        else if (!state.to) inputToRef.current.focus();
+        else if (state.from) inputFromRef.current.select();
+      }
+    },
+    onKeyUpToInput: (code) => {
+      if (code === 13) inputToRef.current.blur();
+    },
+  };
+
+  const renderInputsAndAddButtonRow = () => (
+    <div className={cn(`${RC}__row`, `${RC}__inputs`)}>
+      <RangeListCell className={`${RC}__cell-input`}>
+        <Input
+          ref={inputFromRef}
+          onlyNumbers={
+            isFloatValues
+              ? { type: 'float', decimalPlaces: decimalPlaces || 0 }
+              : { type: 'int' }
+          }
+          value={state.from}
+          onBlur={e => handle.rangeValidation(e, 'from')}
+          onChange={val => handle.inputsChange(val, 'from')}
+          onKeyUp={code => handle.onKeyUpFromInput(code)}
+        />
+      </RangeListCell>
+      <RangeListCell className={`${RC}__cell-input`}>
+        <Input
+          ref={inputToRef}
+          onlyNumbers={
+            isFloatValues
+              ? { type: 'float', decimalPlaces: decimalPlaces || 0 }
+              : { type: 'int' }
+          }
+          value={state.to}
+          onBlur={e => handle.rangeValidation(e, 'to')}
+          onChange={val => handle.inputsChange(val, 'to')}
+          onKeyUp={code => handle.onKeyUpToInput(code)}
+        />
+      </RangeListCell>
+      <RangeListCell className={`${RC}__cell-button`}>
+        <Button onClick={handle.addRange}>Add</Button>
+      </RangeListCell>
+    </div>
+  );
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn(RC, className, { [`${RC}_disabled`]: disabled })}
+    >
+      <div className={cn(`${RC}__row`, `${RC}__labels`)}>
+        <RangeListCell className={`${RC}__cell-label`}>From</RangeListCell>
+        <RangeListCell className={`${RC}__cell-label`}>To</RangeListCell>
+      </div>
+      {isShowRow && renderInputsAndAddButtonRow()}
+      {(innerError || outerError || error) && (
+        <span className={`${RC}__error`}>
+          {innerError || error || outerError}
+        </span>
+      )}
+      {!value?.length && (
+        <div className={cn(`${RC}__row`, `${RC}__values`, `${RC}__null-value`)}>
+          {NULL_VALUE_TEXT}
+        </div>
+      )}
+      {value.map((row, idx) => (
+        <RangeListRow
+          data-testid={`${testId}-row-${idx}`}
+          key={`idx-${idx}-from-${row.from}-to${row.to}`}
+          {...row}
+          idx={idx}
+          actionClick={() => handle.removeRange(idx)}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default RangeList;

package/dist/Atomic/FormElements/RangeList/partial/RangeListRow.jsx

@@ -0,0 +1,41 @@
+import cn from 'classnames';
+import { Trash2 } from 'react-feather';
+
+const RC = 'range-list';
+
+export function RangeListCell({ children, idx, className, onClick }) {
+  return (
+    <div
+      className={cn(`${RC}__cell`, className, { [`${RC}__cell-${idx}`]: idx })}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+function RangeListRow({ from, to, idx, actionClick }) {
+  return (
+    <div
+      className={cn(`${RC}__row`, `${RC}__values`, {
+        [`${RC}__values_first-value`]: idx === 0,
+      })}
+    >
+      <RangeListCell idx={1} className={`${RC}__cell-value`}>
+        {from}
+      </RangeListCell>
+      <RangeListCell idx={2} className={`${RC}__cell-value`}>
+        {to}
+      </RangeListCell>
+      <RangeListCell
+        idx={3}
+        className={`${RC}__cell-action`}
+        onClick={() => actionClick(idx)}
+      >
+        <Trash2 />
+      </RangeListCell>
+    </div>
+  );
+}
+
+export default RangeListRow;