intelicoreact 0.0.7 → 0.0.8

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import {User} from 'react-feather';
+import { User } from 'react-feather';
 import Input from './Input';
 
 global.lng = 'en';
@@ -9,48 +9,65 @@ export default {
   component: Input,
   argTypes: {
     disabled: {
-      description: 'boolean',
+      description: 'boolean'
     },
     error: {
       description: 'text - coloring input if is errored'
     },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
+    },
     withDelete: {
       description: 'boolean - add clear-cross by hover'
     },
-    isNumeric: {
-      description: 'boolean - add plus/minus buttons, force input to numeric type'
-    },
-    numStep: {
-      description: 'number/text - plus/minus buttons factor (default: 1)'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    min: {
-      description: 'number/text - minimal number for numeric input'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    max: {
-      description: 'number/text - maximal number for numeric input'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
     placeholder: {
       description: 'text'
     },
     type: {
-      description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
+      description:
+        "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
       control: {
         type: 'select',
-        options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
+        options: [
+          'text',
+          'number',
+          'password',
+          'color',
+          'date',
+          'datetime-local',
+          'month',
+          'time',
+          'email',
+          'range'
+        ]
       }
     },
     icon: { description: 'JSX' },
     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' },
+    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' }
   }
 };
 
-const Template = args => {
+const Template = (args) => {
   const [value, setValue] = useState('');
   return <Input {...args} value={value} onChange={setValue} />;
 };
@@ -59,21 +76,15 @@ export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
   type: 'text',
+  isOnlyNumber: false,
+  isOnlyString: false,
+  isPriceInput: false,
+  isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
+  mask: '',
   withDelete: true,
-  isNumeric: false,
-  numStep: 1,
-  min: '0',
-  max: '5',
+  symbolsLimit: 255,
   placeholder: 'Placeholder',
-  // mask: 'nnnnn0129',
-  // maskChar: '_',
-  // formatChars: {
-  //   'n': '[0-9]',
-  //   's': '[A-Za-z]',
-  //   '*': '[A-Za-z0-9]'
-  // },
-  icon: <User />,
-  symbolsLimit: 225
+  icon: <User />
 };

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
 import moment from 'moment-timezone';
 
@@ -7,235 +7,208 @@ import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY
 import OpenedPart from './components/OpenedPart';
 import Arrow from '../../UI/Arrow/Arrow';
 
-import './InputDateRange.scss'
+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,
-        isShortWeekNames,
-        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 handleChange = input => {
-        const newValue = getActualDateRange(input);
-        const formatedValue = {
-            intervalKey: newValue.intervalKey,
-            start: newValue.start ? moment(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
-            end: newValue.end ? moment(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end,
-            ...(newValue.compare ? {compare: newValue.compare} : {}),
-            ...(newValue.startPrevDate ? {startPrevDate: moment(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
-            ...(newValue.endPrevDate ? {endPrevDate: moment(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
-        };
-
-        onChange(formatedValue);
-        return formatedValue;
+  const {
+    txt,
+    id,
+    label,
+    className,
+    value,
+    onChange = () => {},
+    error,
+    disabled,
+    isHoverable,
+    isCompact = false,
+    hideArrows = false,
+    isOptionsRight,
+    isUseAbs,
+  } = 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 handleChange = input => {
+    const newValue = getActualDateRange(input);
+    const formatedValue = {
+      intervalKey: newValue.intervalKey,
+      start: newValue.start ? moment(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
+      end: newValue.end ? moment(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end,
+      ...(newValue.compare ? { compare: newValue.compare } : {}),
+      ...(newValue.startPrevDate ? { startPrevDate: moment(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm') } : {}),
+      ...(newValue.endPrevDate ? { endPrevDate: moment(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm') } : {})
     };
 
-    const Range = () => {
-        const  SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
-        const { start, end } = actualValues;
-        if (!start || !end) return null;
+    onChange(formatedValue);
+    return formatedValue;
+  };
 
-        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 Range = () => {
+    const SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+    if (!actualValues.start && value.start) {
+      actualValues.start = value.start;
+      actualValues.end = value.end || '';
     }
+    const { start, end } = actualValues;
+    if (!start || !end) return null;
 
-    const slideInterval = (direction = 'forward') => {
-        const { start, end } = actualValues;
-        const intervalHoursCount = moment(end).diff(start, 'hours');
-        let newEnd, 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');
-        handleChange({
-            ...value,
-            intervalKey: getActualDateRange({
-                start: newStart,
-                end: newEnd,
-            })?.intervalKey,
-            start: newStart,
-            end: newEnd,
-            startPrevDate,
-            endPrevDate,
-        });
-    };
+    const startTime = moment(start).format('HH:mm');
+    const endTime = moment(end).format('HH:mm');
 
-    const handleArrowClick = type => {
-        slideInterval(type === 'right' ? 'forward' : 'back');
-        toggleOff();
-    };
+    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 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]);
+    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');
+    handleChange({
+      ...value,
+      intervalKey: getActualDateRange({
+        start: newStart,
+        end: newEnd
+      })?.intervalKey,
+      start: newStart,
+      end: newEnd,
+      startPrevDate,
+      endPrevDate
+    });
+  };
+
+  const handleArrowClick = type => {
+    slideInterval(type === 'right' ? 'forward' : 'back');
+    toggleOff();
+  };
+
+  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 : () => null}
+        onMouseLeave={isHoverable ? toggleOff : () => null}
+      >
         <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,
-            })}
+          className={cn('date-range-input__absolut-wraper', {
+            'date-range-input__absolut-wraper_right-position': isOptionsRight
+          })}
         >
-            <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__static-part')}>
+            <button
+              id={id}
+              className={cn('date-range-input__toggle-button')}
+              disabled={disabled}
+              onClick={!disabled && !isHoverable ? toggle : undefined}
             >
-                <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')}
-                            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={handleChange}
-                        />
-                    )}
+              <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>
-            </div>
-            {error && <span className="date-range-input__error-block">{error}</span>}
+              )}
+            </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={handleChange}
+            />
+          )}
         </div>
-    );
+      </div>
+      {error && <span className="date-range-input__error-block">{error}</span>}
+    </div>
+  );
 };
 
 export default React.memo(InputDateRange);

package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -1,3 +1,5 @@
+@import "../../node_modules/anme/scss/anme-mixins-media";
+
 :root {
   --input-height: 28px;
   --label-line-height: 16px;
@@ -11,14 +13,14 @@
 }
 
 .date-range-input {
-  position: relative;
+  /*position: relative;
   width: 335px;
-  height: calc(var(--input-height) + var(--label-line-height));
+  //height: calc(var(--input-height) + var(--label-line-height));
 
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: flex-start;*/
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -205,7 +207,7 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: #FFFFFF;
-
+    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
     }
@@ -222,15 +224,15 @@
     position: relative;
 
     width: 100%;
-    padding: 4px 8px 4px 32px;
+    padding: 0 20px 0 30px;
 
     text-transform: capitalize;
     white-space: nowrap;
     font-style: normal;
     font-weight: 300;
     font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--line-height);
+    font-size: 12px;
+    line-height: 24px;
     cursor: pointer;
 
     display: flex;
@@ -242,6 +244,9 @@
       // background-color: rgba(128, 128, 128, 0.1);
       background-color: #F2F2F8;
     }
+    &_active {
+      background: #f2f2f8;
+    }
 
     &-icon-active {
       position: absolute;
@@ -293,7 +298,7 @@
 
     &>div:not(.date-picker__inputs-separator) {
       width: 110px;
-      height: 100%;
+      min-height: 100%;
       margin-right: 9px;
 
       border: 1px solid var(--border-color);
@@ -323,6 +328,9 @@
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
+    input {
+      font-weight: 300;
+    }
   }
 
   &__date-input {
@@ -348,7 +356,7 @@
 
     &>.dropdown__trigger {
       width: 100%;
-      height: 100%;
+      height: 28px;
       padding-left: 10px;
       padding-right: 15px;
 
@@ -420,7 +428,7 @@
 
         font-size: calc(var(--font-size) + 2px);
         line-height: calc(var(--line-height) + 4px);
-        
+
         font-style: normal;
         font-weight: 500;
 
@@ -592,3 +600,27 @@
     height: 100%;
   }
 }
+
+@include lgDown {
+  .opened-part__intervals-list {
+    display: none;
+  }
+}
+
+@include mdDown {
+  .date-picker__inputs-block {
+    flex-flow: wrap;
+  }
+
+  .date-picker__header {
+    flex-flow: row wrap
+  }
+  .date-picker__calendars-wrapper {
+    display: block;
+    margin: auto;
+  }
+  .date-picker__calendars .range-calendar {
+    margin: 0!important;
+    width: 100%;
+  }
+}