intelicoreact 0.0.6 → 0.0.9

package/src/Atomic/FormElements/Dropdown/components/Loader.scss

@@ -0,0 +1,57 @@
+@mixin fill-parent {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-loader-box {
+  position: absolute;
+  @include fill-parent;
+  background: #fff;
+  opacity: 0.1;
+  z-index: 100;
+}
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+.lds-ring.lds-ring_little {
+  width: 20px;
+  height: 20px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 84px;
+  height: 84px;
+  margin: 8px;
+  border: 8px solid #000;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #000 transparent transparent transparent;
+}
+.lds-ring_little div {
+  width: 20px;
+  height: 20px;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -1,62 +1,132 @@
 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 './Input.scss';
 
 const Input = ({
   onChange,
+  onBlur,
+  onFocus,
+  onKeyUp,
+  isNotBlinkErrors,
+  isPriceInput,
+  isOnlyNumber,
+  isOnlyString,
+  isTwoDigitAfterDot,
   disabled,
   withDelete,
-  isNumeric,
-  numStep = 1,
-  min = 0,
-  max,
   value,
   placeholder,
   className,
   type = 'text',
-  onBlur,
-  onFocus,
-  onKeyUp,
   mask,
+  maskChar,
+  formatChars,
   error,
   icon,
   symbolsLimit,
+  blinkTime,
+  isFocusDefault = false,
 }) => {
+  const DEFAULT_BLINK_TIME = 100;
   // STATES
   const [isFocused, setIsFocused] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const inputRef = useRef(null);
+  const previousValueRef = useRef(value);
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
+  const { onlyNumbers, onlyString } = formatInput;
+  const { addCommas, removeComma } = formatInput.priceInput;
+  const isUseErrorsBlink = !isNotBlinkErrors && !mask;
+
   // HANDLES
   const handle = {
-    change: e => {
+    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);
+      if (symbolsLimit && inputValue.length > +symbolsLimit) {
+        inputValue = inputValue.substring(0, +symbolsLimit);
+      }
+
+      if (isOnlyNumber && !isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue);
+      if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
+      if (isOnlyString) inputValue = onlyString(inputValue);
+
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
       setEditing(!isEditing);
       onChange('');
     },
-    focus: e => {
+    focus: (e) => {
       setIsFocused(true);
+      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
+
       if (onFocus) onFocus(e);
     },
-    blur: e => {
+    blur: (e) => {
       setIsFocused(false);
       setEditing(false);
+      if (isTwoDigitAfterDot) {
+        onChange(cutOffsingleDot(value));
+      }
+      if (isPriceInput && isOnlyNumber) {
+        onChange(addCommas(value));
+      }
       if (onBlur) onBlur(e);
     },
-    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode, event) : null)
+    keyUp: (e) => {
+      if (isUseErrorsBlink) {
+        const changedValue = '' + (value ?? '');
+        const previousValue = '' + (previousValueRef.current ?? '');
+
+        const short = previousValue.length <= changedValue.length ? previousValue : changedValue;
+        const long = previousValue.length > changedValue.length ? previousValue : changedValue;
+
+        const infoAboutDifferencesSameness = short.split('').reduce(
+          (acc, symbol, idx) => {
+            if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);
+            else {
+              acc.countOn = false;
+              acc.differences.push([idx, symbol]);
+            }
+            return acc;
+          },
+          { same: [], countOn: true, differences: [] }
+        );
+
+        const samePart = infoAboutDifferencesSameness.same.join('');
+        const differencesLength = infoAboutDifferencesSameness.differences.length;
+        const currentSet = changedValue.replace(samePart, '');
+
+        const getNext = (inputPartToAdd, correctedSamePart) => {
+          const partToAdd = inputPartToAdd || currentSet;
+          const currentSamePart = correctedSamePart || samePart;
+          return changedValue.includes(e.key) && e.key !== changedValue[changedValue.length - 1]
+            ? currentSamePart + (partToAdd[0] || '')
+            : changedValue;
+        };
+
+        if (!KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue)
+          setIsAttemptToChange(!(!differencesLength && e.key === changedValue[changedValue.length - 2]));
+
+        if (!previousValueRef.current || KEYBOARD_SERVICE_KEYS.includes(e.key)) previousValueRef.current = getNext();
+        else if (changedValue === samePart) previousValueRef.current = getNext(changedValue, changedValue.slice(0, -1));
+        else previousValueRef.current = getNext();
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e);
+    },
   };
 
+  function cutOffsingleDot(value) {
+    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
+  }
+
   useEffect(() => {
     if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
@@ -70,8 +140,8 @@ const Input = ({
     onFocus: handle.focus,
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
-    min,
-    max,
+    ...(maskChar ? { maskChar } : {}),
+    ...(formatChars ? { formatChars } : {}),
   };
 
   function renderInput() {
@@ -79,35 +149,36 @@ const Input = ({
       return <InputMask {...uniProps} ref={inputRef} mask={mask} />;
     }
 
-    return (
-      <>
-        <input {...uniProps} ref={inputRef} type={isNumeric ? 'number' : type} />
-        {isNumeric && (
-          <div className="input__nums">
-            <button onClick={() => handle.change(value - numStep)} className={cn(`input__num-btn`, { disabled: value <= min })}>
-              <Minus />
-            </button>
-            <button onClick={() => handle.change(+value + +numStep)} className={cn(`input__num-btn`, { disabled: value >= max })}>
-              <Plus />
-            </button>
-          </div>
-        )}
-      </>
-    );
+    return <input {...uniProps} ref={inputRef} type={isPriceInput ? 'text' : type} />;
   }
 
+  useEffect(() => {
+    if (isUseErrorsBlink && isAttemptToChange) {
+      setIsAttemptToChange(null);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean') setIsFocused(isFocusDefault);
+    setEditing(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
+
   return (
     <div
       className={cn(
         `input__wrap`,
         { [`input__wrap_focus`]: isFocused },
-        { [`input__wrap_error`]: error },
+        { [`input__wrap_error`]: error || isToHighlightError },
         { [`input__wrap_disabled`]: disabled }
       )}
     >
       {renderInput()}
       {icon}
-      {withDelete && !isNumeric && <span className={cn(`input__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
+      {withDelete && <span className={cn(`input__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
     </div>
   );
 };

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,68 @@ 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'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    numStep: {
-      description: 'number/text - plus/minus buttons factor (default: 1)'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    min: {
-      description: 'number/text - minimal number for numeric input'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
-    max: {
-      description: 'number/text - maximal number for numeric input'
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
     },
     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,15 +79,16 @@ export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
   type: 'text',
+  isFocusDefault: false,
+  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: '',
-  icon: <User />,
-  symbolsLimit: 225
+  icon: <User />
 };

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

@@ -4,38 +4,39 @@ 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 InputCalendar = ({ value, minDate, maxDate, onChange, className = '', placeholder = 'mm/dd/yyyy', mask = '99/99/9999' }) => {
   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 changeInputValue = val => {
+    if (onChange) onChange(val);
   };
 
-  const changeCalendarDay = value => {
-    setDate(value);
-    setInputValue(value);
+  const changeCalendarDay = val => {
+    if (onChange) onChange(val);
   };
 
+  const getCalendarValue = (value) => {
+    const date = moment(value).format('L');
+
+    if(date !== "Invalid date") return date;
+
+    return moment(new Date()).format('L');
+  }
+
   return (
-    <div className="calendar-container" ref={calendarRef}>
+    <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
       <InputMask
-        mask="99/99/9999"
-        value={inputValue}
+        mask={mask}
+        placeholder={placeholder}
+        value={value}
         onChange={e => changeInputValue(e.target.value)}
         className="calendar-dropdown"
         onFocus={() => setIsOpened(!isOpened)}
       />
-      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+      {isOpened ? <Calendar date={getCalendarValue(value)} setDate={newDate => changeCalendarDay(newDate)} params={{ minDate, maxDate }} /> : null}
     </div>
   );
 };

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

@@ -1,27 +1,30 @@
-import React, { useRef, useState } from 'react';
-import { ref } from 'yup';
+import React, { useState } from 'react';
 import InputCalendar from './InputCalendar';
 
 global.lng = 'en';
 
+
 export default {
-  title: 'Form Elements/InputCalendar',
+  title: 'Form Elements/Input Calendar',
   component: InputCalendar,
+  argTypes: {
+    value: {
+      description: 'string (mm.dd.yyyy)'
+    },
+  }
 };
 
-const Template = (args) => {
-  const params = {
-    minDate: args?.minDate,
-    maxDate: args?.maxDate,
-  };
+const Template = args => {
+  const [date, setDate] = useState('');
 
-  return <InputCalendar data={args.date} params={params} />;
+  return <InputCalendar {...args} value={date} onChange={val => setDate(val)} />;
 };
 
-export const Calendar = Template.bind({});
+export const CalendarTemplate = Template.bind({});
+
+CalendarTemplate.args = {
+  value: '',
+  minDate: '10/14/2020',
+  maxDate: '10/14/2022',
 
-Calendar.args = {
-  date: '10/14/2021',
-  minDate: '10/11/2021',
-  maxDate: '10/25/2021',
 };