intelicoreact 0.0.82 → 0.0.86

package/dist/Atomic/UI/Calendar/Calendar.scss

@@ -425,7 +425,17 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
+.calendar-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
+}
 .calendar {
   background: #ffffff;
     border: 1px solid #e2e5ec;
@@ -507,15 +517,21 @@
   }
 
   &-container {
-    width: 200px;
+    min-width: 200px;
+    position: relative;
+    .calendar {
+      position: absolute;
+      z-index: 9;
+      top: 100%;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color);
+    }
   }
 
   &-dropdown {
     appearance: none;
     background-color: white;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;
 

package/dist/Functions/inputExecutor.js

@@ -21,7 +21,7 @@ var formatInput = {
       return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
     },
     removeComma: function removeComma(value) {
-      return parseFloat(value.toString().replace(/\,/g, ''));
+      return parseInt(value.toString().replace(/\,/g, ''));
     }
   },
   onlyNumbers: function onlyNumbers(value) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.82",
-  "description": "",
+  "version": "0.0.86",
+  "description": "fix input-calendar",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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

@@ -28,7 +28,8 @@ const Input = ({
   error,
   icon,
   symbolsLimit,
-  blinkTime
+  blinkTime,
+  isFocusDefault = false
 }) => {
   const DEFAULT_BLINK_TIME = 100;
   // STATES
@@ -62,20 +63,19 @@ const Input = ({
     },
     focus: (e) => {
       setIsFocused(true);
-      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot)
-        onChange(removeComma(value));
+      if (isPriceInput && isOnlyNumber) onChange(removeComma(value));
 
       if (onFocus) onFocus(e);
     },
     blur: (e) => {
       setIsFocused(false);
       setEditing(false);
-      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
-        onChange(addCommas(value));
-      }
-      if (isTwoDigitAfterDot && !isPriceInput) {
+      if (isTwoDigitAfterDot) {
         onChange(cutOffsingleDot(value));
       }
+      if (isPriceInput && isOnlyNumber) {
+        onChange(addCommas(value));
+      }
       if (onBlur) onBlur(e);
     },
     keyUp: (e) => {
@@ -94,7 +94,6 @@ const Input = ({
         )
           setIsAttemptToChange(true);
 
-        console.log(changedValue, previousValue);
         if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
           previousValueRef.current = value;
         else previousValueRef.current = previousValue + currentSet[0];
@@ -105,7 +104,7 @@ const Input = ({
   };
 
   function cutOffsingleDot(value) {
-    return value.slice(-1) === '.' ? value.slice(0, -1) : value;
+    return value.toString().slice(-1) === '.' ? value.slice(0, -1) : value;
   }
 
   useEffect(() => {
@@ -145,6 +144,11 @@ const Input = ({
     }
   }, [isAttemptToChange]);
 
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean')
+      setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
+
   return (
     <div
       className={cn(

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

@@ -29,6 +29,9 @@ export default {
     isTwoDigitAfterDot: {
       description: 'boolean - only two digits after dot'
     },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
     placeholder: {
       description: 'text'
     },
@@ -76,6 +79,7 @@ export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
   type: 'text',
+  isFocusDefault: false,
   isOnlyNumber: false,
   isOnlyString: false,
   isPriceInput: false,

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

@@ -4,38 +4,40 @@ 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}
+      {console.log(value, getCalendarValue(value))}
+      {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',
 };

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

@@ -7,6 +7,9 @@ import { formatInput } from '../../../Functions/inputExecutor';
 
 import './NumericInput.scss';
 
+let timerOutside;
+let timerFocus;
+
 const NumericInput = ({
   onChange,
   disabled,
@@ -17,7 +20,6 @@ const NumericInput = ({
   value,
   placeholder,
   className,
-  type = 'number',
   onBlur,
   onFocus,
   onKeyUp,
@@ -29,21 +31,30 @@ const NumericInput = ({
   symbolsLimit,
   isNotBlinkErrors,
   blinkTime,
-  isPriceInput
+  isPriceInput,
+  isFocusDefault = false
 }) => {
   const DEFAULT_BLINK_TIME = 200;
-  // STATES
-  const [isFocused, setIsFocused] = useState(false);
-  const [isEditing, setEditing] = useState(false);
+
+  //REFS
   const inputRef = useRef(null);
   const decRef = useRef(null);
   const incRef = useRef(null);
+  const wrapRef = useRef(null);
+
   const previousValueRef = useRef(value);
-  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
-  const [isToHighlightError, setIsToHighlightError] = useState(false);
 
+  // STATES
+  const [inputValue, setInputValue] = useState(value || min || '');
+  const [inputValueFormated, setInputValueFormated] = useState(inputValue);
   const [intMemoVal, setIntMemoVal] = useState(0);
 
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
   const { onlyNumbers } = formatInput;
   const { addCommas, removeComma } = formatInput.priceInput;
 
@@ -51,8 +62,12 @@ const NumericInput = ({
   const handle = {
     change: (e) => {
       let inputValue = e.target ? onlyNumbers(e.target.value) : e;
-      if (inputValue !== '') {
-        inputValue = parseFloat(inputValue) || '';
+
+      if (
+        inputValue &&
+        (decRef.current.contains(e.target) || incRef.current.contains(e.target))
+      ) {
+        inputValue = parseFloat(inputValue);
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
@@ -60,28 +75,21 @@ const NumericInput = ({
       if (symbolsLimit) {
         inputValue = inputValue.toString().substring(0, +symbolsLimit);
       }
-
-      setIntMemoVal(parseFloat(inputValue));
-      onChange(inputValue.toString());
+      setInputValue(inputValue.toString());
     },
-    toggleEdit: () => {
-      setEditing(!isEditing);
-      onChange('');
+    clear: () => {
+      handle.change(min || '');
     },
     focus: (e) => {
+      if (isFocused) return;
       setIsFocused(true);
-      if (isPriceInput) onChange(removeComma(value));
       if (onFocus) onFocus(e);
     },
     blur: (e) => {
+      if (!isFocused) return;
+
       setIsFocused(false);
       setEditing(false);
-      if (isPriceInput) {
-        if (!isFinite(value)) {
-          value = intMemoVal;
-        }
-        onChange(addCommas(value));
-      }
 
       if (onBlur) onBlur(e);
     },
@@ -110,27 +118,26 @@ const NumericInput = ({
 
       if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
     },
-    decrement: () => {
+    decrement: (e) => {
       handle.change(intMemoVal - +numStep);
     },
-    increment: () => {
+    increment: (e) => {
       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);
-    }
-  };
+  //Check Outside Click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!wrapRef.current.contains(event.target)) {
+        setIsFocused(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('mousedown', handleClickOutside, true);
+  }, []);
 
   useEffect(() => {
     if (!isNotBlinkErrors && isAttemptToChange) {
@@ -142,51 +149,85 @@ const NumericInput = ({
     }
   }, [isAttemptToChange]);
 
+  //On Input Value Change
   useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () =>
-      document.removeEventListener('click', handleClickOutside, true);
-  }, []);
+    if (inputValue !== value) setIsFocused(true);
 
+    setInputValueFormated(
+      isPriceInput
+        ? isFocused
+          ? removeComma(inputValue)
+          : addCommas(inputValue)
+        : inputValue
+    );
+    setIntMemoVal(parseInt(inputValue));
+
+    if (typeof onChange === 'function') onChange(inputValue?.toString());
+  }, [inputValue]);
+
+  //On Integer Value Change
   useEffect(() => {
-    if (isNaN(intMemoVal)) setIntMemoVal(min || '');
+    if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
   }, [intMemoVal]);
 
+  //On Focuse Change
   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 } : {})
-  };
+    setInputValueFormated(
+      isPriceInput
+        ? isFocused
+          ? removeComma(inputValue)
+          : addCommas(inputValue)
+        : inputValue
+    );
+
+    if (isFocused) {
+      if (typeof onFocus === 'function') onFocus({ target: inputRef?.current });
+      inputRef?.current?.focus();
+    } else {
+      if (typeof onBlur === 'function') onBlur({ target: inputRef?.current });
+      inputRef?.current?.blur();
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean')
+      setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
 
   function renderInput() {
+    const uniProps = {
+      className: `input ${className || ''}`,
+      placeholder,
+      value: inputValueFormated,
+      disabled,
+      onChange: handle.change,
+      onFocus: () => {
+        setIsFocused(true);
+        setEditing(true);
+      },
+      onBlur: () => setEditing(false),
+      onKeyUp: handle.keyUp,
+      min,
+      max,
+      ...(maskChar ? { maskChar } : {}),
+      ...(formatChars ? { formatChars } : {})
+    };
+
     return (
       <>
-        <input {...uniProps} ref={inputRef} type={type} />
+        <input {...uniProps} ref={inputRef} type='text' />
 
         <div className='input__nums'>
           <button
             ref={decRef}
-            onClick={() => handle.decrement()}
+            onMouseDown={(e) => handle.decrement(e)}
             className={cn(`input__num-btn`, { disabled: +value <= min })}
           >
             <Minus />
           </button>
           <button
             ref={incRef}
-            onClick={() => handle.increment()}
+            onMouseDown={(e) => handle.increment(e)}
             className={cn(`input__num-btn`, { disabled: +value >= max })}
           >
             <Plus />
@@ -198,6 +239,7 @@ const NumericInput = ({
 
   return (
     <div
+      ref={wrapRef}
       className={cn(
         `input__wrap`,
         { [`input__wrap_focus`]: isFocused },
@@ -209,8 +251,8 @@ const NumericInput = ({
       {icon}
       {withDelete && (
         <span
-          className={cn(`input__close`, { hidden: !value })}
-          onClick={handle.toggleEdit}
+          className={cn(`input__close`, { hidden: !inputValue })}
+          onClick={() => handle.clear()}
         />
       )}
     </div>

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

@@ -11,6 +11,9 @@ export default {
     disabled: {
       description: 'boolean'
     },
+    isFocusDefault: {
+      description: 'boolean - if true, input will be focused on mount'
+    },
     isInitialFocus: {
       description: 'boolean - if true, the input will be focused on mount'
     },
@@ -35,25 +38,6 @@ export default {
     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' },
@@ -71,15 +55,15 @@ export default {
 };
 
 const Template = (args) => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState('15000');
   return <NumericInput {...args} value={value} onChange={setValue} />;
 };
 
 export const NumericInputTemplate = Template.bind({});
 
 NumericInputTemplate.args = {
-  type: 'text',
   disabled: false,
+  isFocusDefault: false,
   error: '',
   isPriceInput: false,
   mask: '',
@@ -88,7 +72,7 @@ NumericInputTemplate.args = {
   numStep: 100,
   min: '0',
   max: '15000',
-  symbolsLimit: 2,
+  symbolsLimit: 5,
   placeholder: 'Placeholder',
   icon: <User />
 };

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -1,4 +1,4 @@
-.range-calendar {
+.range-calendar, .calendar {
   width: 195px;
   min-height: 195px;
   display: flex;
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  
+
     &__title {
       line-height: 20px;
       font-weight: 500;
@@ -27,7 +27,7 @@
     &__next, &__prev {
       width: 16px;
       height: 16px;
-      background-color: #E2E6F8;
+      //background-color: #E2E6F8;
       border-radius: 5px;
       color: #171D33;
     }
@@ -98,4 +98,4 @@
       }
     }
   }
-}
+}

package/src/Atomic/UI/Calendar/Calendar.js

@@ -6,7 +6,7 @@ import './Calendar.scss';
 
 export default function (props) {
   const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
-  const { minDate, maxDate } = params;
+  const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
 
@@ -70,7 +70,7 @@ export default function (props) {
   };
 
   return (
-    <div className={`calendar ${className}`}>
+    <div className={`calendar ${className ? className : ""}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (
@@ -92,7 +92,7 @@ export default function (props) {
         {[...Array(7).keys()].map((dayOfWeek) => {
           return (
             <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
-              {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+              {moment().weekday(dayOfWeek).format('dd')}
             </div>
           );
         })}

package/src/Atomic/UI/Calendar/Calendar.scss

@@ -425,7 +425,17 @@
 //     box-shadow: 0 0 3px 0 rgb(0 123 255 / 50%);
 //   }
 // }
+.calendar-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+  &__prev,
+  &__next{
+    display: flex;
+    height: auto;
+  }
+}
 .calendar {
   background: #ffffff;
     border: 1px solid #e2e5ec;
@@ -507,15 +517,21 @@
   }
 
   &-container {
-    width: 200px;
+    min-width: 200px;
+    position: relative;
+    .calendar {
+      position: absolute;
+      z-index: 9;
+      top: 100%;
+      padding: 10px 16px;
+      border: 1px solid var(--border-color);
+    }
   }
 
   &-dropdown {
     appearance: none;
     background-color: white;
     cursor: pointer;
-    color: gray;
-
     width: 100%;
     height: 28px;