intelicoreact 0.0.7 → 0.0.8

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

@@ -1,4 +1,4 @@
-import React, { /*useEffect,*/ useState } from 'react';
+import React, { /* useEffect, */ useState } from 'react';
 import InputDateRange from './InputDateRange';
 import Table from '../Table/Table';
 
@@ -17,133 +17,45 @@ 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' }]
-    }));
-
-    // 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>
-          <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: {},
-    buttonsTypes: {
-      // apply: 'ellipse-apply',
-      cancel: 'bark-outline'
-    },
-    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,
-    isShortWeekNames: 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,
+  // 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

@@ -294,20 +294,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
@@ -322,14 +325,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"

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

@@ -27,9 +27,9 @@ const OpenedPart = React.forwardRef((props, ref) => {
         toggleOff,
         isShortWeekNames
     } = props;
-  
+
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
-    
+
     const [activeInterval, setActiveInterval] = useState(actualValues.intervalKey);
 
     const handleItemClick = item => {

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

@@ -15,7 +15,7 @@ const SelectItem = ({ item, label, isActive, onItemClick, onMouseEnter, disabled
     >
         {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"/>
+                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
         )}
         {label}

package/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -0,0 +1,220 @@
+import React, { useState, useEffect, useRef } from 'react';
+import cn from 'classnames';
+import { Minus, Plus } from 'react-feather';
+import InputMask from 'react-input-mask';
+import { KEYBOARD_SERVICE_KEYS } from '../../../Constants/index.constants';
+import { formatInput } from '../../../Functions/inputExecutor';
+
+import './NumericInput.scss';
+
+const NumericInput = ({
+  onChange,
+  disabled,
+  withDelete,
+  numStep = 1,
+  min = 0,
+  max,
+  value,
+  placeholder,
+  className,
+  type = 'number',
+  onBlur,
+  onFocus,
+  onKeyUp,
+  mask,
+  maskChar,
+  formatChars,
+  error,
+  icon,
+  symbolsLimit,
+  isNotBlinkErrors,
+  blinkTime,
+  isPriceInput
+}) => {
+  const DEFAULT_BLINK_TIME = 200;
+  // STATES
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  const decRef = useRef(null);
+  const incRef = useRef(null);
+  const previousValueRef = useRef(value);
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
+  const [intMemoVal, setIntMemoVal] = useState(0);
+
+  const { onlyNumbers } = formatInput;
+  const { addCommas, removeComma } = formatInput.priceInput;
+
+  // HANDLES
+  const handle = {
+    change: (e) => {
+      let inputValue = e.target ? onlyNumbers(e.target.value) : e;
+      if (inputValue !== '') {
+        inputValue = parseFloat(inputValue) || '';
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      }
+      if (symbolsLimit) {
+        inputValue = inputValue.toString().substring(0, +symbolsLimit);
+      }
+
+      setIntMemoVal(parseFloat(inputValue));
+      onChange(inputValue.toString());
+    },
+    toggleEdit: () => {
+      setEditing(!isEditing);
+      onChange('');
+    },
+    focus: (e) => {
+      setIsFocused(true);
+      if (isPriceInput) onChange(removeComma(value));
+      if (onFocus) onFocus(e);
+    },
+    blur: (e) => {
+      setIsFocused(false);
+      setEditing(false);
+      if (isPriceInput) {
+        if (!isFinite(value)) {
+          value = intMemoVal;
+        }
+        onChange(addCommas(value));
+      }
+
+      if (onBlur) onBlur(e);
+    },
+    keyUp: (e) => {
+      if (!isNotBlinkErrors) {
+        const changedValue = '' + (value ?? '');
+        const previousValue = '' + (previousValueRef.current ?? '');
+        const currentSet = (() => {
+          if (previousValue.length < changedValue.length)
+            return value
+              .toString()
+              .slice(previousValue.length - changedValue.length);
+          else return changedValue.toString().includes(e.key) ? e.key : '';
+        })();
+
+        if (
+          !KEYBOARD_SERVICE_KEYS.includes(e.key) &&
+          changedValue === previousValue
+        )
+          setIsAttemptToChange(true);
+
+        if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
+          previousValueRef.current = value;
+        else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
+    },
+    decrement: () => {
+      handle.change(intMemoVal - +numStep);
+    },
+    increment: () => {
+      handle.change(intMemoVal + +numStep);
+    }
+  };
+
+  const handleClickOutside = (event) => {
+    if (
+      inputRef.current &&
+      !inputRef.current.contains(event.target) &&
+      !decRef.current.contains(event.target) &&
+      !incRef.current.contains(event.target)
+    ) {
+      setTimeout(() => {
+        inputRef.current.focus();
+        inputRef.current.blur();
+      }, 0);
+    }
+  };
+
+  useEffect(() => {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(false);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('click', handleClickOutside, true);
+  }, []);
+
+  useEffect(() => {
+    if (isNaN(intMemoVal)) setIntMemoVal(min || '');
+  }, [intMemoVal]);
+
+  useEffect(() => {
+    if (isEditing || isFocused) inputRef.current.focus();
+  }, [isEditing, isFocused]);
+
+  const uniProps = {
+    className: `input ${className}`,
+    placeholder,
+    value: value || '',
+    disabled,
+    onChange: handle.change,
+    onFocus: handle.focus,
+    onBlur: handle.blur,
+    onKeyUp: handle.keyUp,
+    min,
+    max,
+    ...(maskChar ? { maskChar } : {}),
+    ...(formatChars ? { formatChars } : {})
+  };
+
+  function renderInput() {
+    return (
+      <>
+        <input {...uniProps} ref={inputRef} type={type} />
+
+        <div className='input__nums'>
+          <button
+            ref={decRef}
+            onClick={() => handle.decrement()}
+            className={cn(`input__num-btn`, { disabled: +value <= min })}
+          >
+            <Minus />
+          </button>
+          <button
+            ref={incRef}
+            onClick={() => handle.increment()}
+            className={cn(`input__num-btn`, { disabled: +value >= max })}
+          >
+            <Plus />
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        `input__wrap`,
+        { [`input__wrap_focus`]: isFocused },
+        { [`input__wrap_error`]: error || isToHighlightError },
+        { [`input__wrap_disabled`]: disabled }
+      )}
+    >
+      {renderInput()}
+      {icon}
+      {withDelete && (
+        <span
+          className={cn(`input__close`, { hidden: !value })}
+          onClick={handle.toggleEdit}
+        />
+      )}
+    </div>
+  );
+};
+
+export default NumericInput;

package/src/Atomic/FormElements/NumericInput/NumericInput.scss

@@ -0,0 +1,135 @@
+.input {
+  position: relative;
+  word-break: break-all;
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &__wrap {
+    display: flex;
+    align-items: center;
+    border: 1px solid #e2e5ec;
+    box-sizing: border-box;
+    background-color: #fff;
+    height: 28px;
+    border-radius: 4px;
+
+    &_focus {
+      border-color: #6b81dd;
+      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
+    }
+
+    &_disabled {
+      background: #f7f8fa;
+      opacity: 0.5;
+      border-color: #a6acb1;
+      pointer-events: none;
+    }
+
+    &_error {
+      border-color: #f06d8d;
+    }
+  }
+
+  &_disabled {
+    background: #f7f8fa;
+    opacity: 0.5;
+    border-color: #a6acb1;
+    pointer-events: none;
+  }
+
+  &_error {
+    border-color: #f06d8d;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 13px;
+    font-weight: 400;
+    color: #1e1e2d;
+    border: none;
+    padding: 0 5px;
+    border-radius: 4px;
+  }
+
+  &__close {
+    position: relative;
+    opacity: 0.6;
+    width: 14px;
+    height: 14px;
+    background: none;
+    cursor: pointer;
+    margin-right: 4px;
+    visibility: hidden;
+    pointer-events: none;
+    &:hover {
+      opacity: 1;
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      height: 14px;
+      width: 2px;
+      background-color: #9aa0b9;
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__nums {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__num-btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 24px;
+    border-left: 1px solid #e2e5ec;
+    background: none;
+    font-size: 20px;
+    user-select: none;
+    &.disabled {
+      opacity: 0.3;
+    }
+    svg {
+      margin-right: 0;
+    }
+  }
+
+  &-label {
+    margin-bottom: 5px;
+  }
+}
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { User } from 'react-feather';
+import NumericInput from './NumericInput';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/NumericInput',
+  component: NumericInput,
+  argTypes: {
+    disabled: {
+      description: 'boolean'
+    },
+    isInitialFocus: {
+      description: 'boolean - if true, the input will be focused on mount'
+    },
+    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'
+    },
+    numStep: {
+      description: 'number/text - plus/minus buttons factor (default: 1)'
+    },
+    min: {
+      description: 'number/text - minimal number for numeric input'
+    },
+    max: {
+      description: 'number/text - maximal number for numeric input'
+    },
+    placeholder: {
+      description: 'text'
+    },
+    type: {
+      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'
+        ]
+      }
+    },
+    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'
+    },
+    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 [value, setValue] = useState('');
+  return <NumericInput {...args} value={value} onChange={setValue} />;
+};
+
+export const NumericInputTemplate = Template.bind({});
+
+NumericInputTemplate.args = {
+  type: 'text',
+  disabled: false,
+  error: '',
+  isPriceInput: false,
+  mask: '',
+  withDelete: true,
+  isNumeric: false,
+  numStep: 100,
+  min: '0',
+  max: '15000',
+  symbolsLimit: 2,
+  placeholder: 'Placeholder',
+  icon: <User />
+};