intelicoreact 0.0.93 → 0.0.94

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -102,7 +102,7 @@ var Template = function Template(args) {
 var DropdownTemplate = Template.bind({});
 exports.DropdownTemplate = DropdownTemplate;
 DropdownTemplate.args = {
-  isListTop: true,
+  // isListTop: true,
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -17,6 +17,8 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
 
 var _useClickOutside = require("../../../Functions/useClickOutside");
@@ -39,7 +41,8 @@ var InputCalendar = function InputCalendar(_ref) {
       _ref$mask = _ref.mask,
       mask = _ref$mask === void 0 ? '99/99/9999' : _ref$mask,
       isDontLimitFuture = _ref.isDontLimitFuture,
-      isListTop = _ref.isListTop;
+      isListTop = _ref.isListTop,
+      disabled = _ref.disabled;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -66,7 +69,9 @@ var InputCalendar = function InputCalendar(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "input__wrap calendar-container ".concat(className),
+    className: (0, _classnames.default)('input__wrap calendar-container', className, {
+      'calendar-container_disabled': disabled
+    }),
     ref: calendarRef
   }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
     mask: mask,
@@ -77,10 +82,9 @@ var InputCalendar = function InputCalendar(_ref) {
     },
     className: "calendar-dropdown",
     onFocus: function onFocus() {
-      return setIsOpened(!isOpened);
+      return setIsOpened(true);
     }
   }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    className: isListTop ? '' : '',
     date: getCalendarValue(value),
     setDate: function setDate(newDate) {
       return changeCalendarDay(newDate);
@@ -90,7 +94,8 @@ var InputCalendar = function InputCalendar(_ref) {
       maxDate: maxDate
     },
     isDontLimitFuture: isDontLimitFuture,
-    isListTop: isListTop
+    isListTop: isListTop,
+    setIsOpened: setIsOpened
   }) : null);
 };
 

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -2,6 +2,11 @@
   min-width: 200px;
   position: relative;
 
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   .calendar {
     position: absolute;
     z-index: 9;

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

@@ -39,18 +39,39 @@ var Template = function Template(args) {
       date = _useState2[0],
       setDate = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      disabled = _useState4[0],
+      setDisabled = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InputCalendar.default, (0, _extends2.default)({}, args, {
     value: date,
     onChange: function onChange(val) {
       return setDate(val);
+    },
+    disabled: disabled
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'row nowrap',
+      justifyContent: 'flex-end',
+      marginTop: '10px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 'solid 1px black',
+      padding: '10px',
+      width: '80px'
+    },
+    onClick: function onClick() {
+      return setDisabled(!disabled);
     }
-  }));
+  }, disabled ? 'Enable' : 'Disable')));
 };
 
 var CalendarTemplate = Template.bind({});
 exports.CalendarTemplate = CalendarTemplate;
 CalendarTemplate.args = {
-  value: '',
   minDate: '01/01/1900',
   maxDate: '01/01/2100',
   isDontLimitFuture: true // isListTop: true,

package/dist/Atomic/UI/Calendar/Calendar.js

@@ -32,6 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _default(props) {
   var date = props.date,
       setDate = props.setDate,
+      setIsOpened = props.setIsOpened,
       _props$allowPrev = props.allowPrev,
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
@@ -120,7 +121,8 @@ function _default(props) {
       key: "".concat(week, "_").concat(dayOfWeek),
       className: classNames,
       onClick: day && (isDontLimitFuture || !isFutureDay) ? function () {
-        return setDate((0, _moment.default)(day.date).format('L'));
+        setDate((0, _moment.default)(day.date).format('L'));
+        setIsOpened(false);
       } : null // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
       // onMouseLeave={() => onHover(null)}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.93",
+  "version": "0.0.94",
   "description": "fix input-calendar",
   "main": "dist/index.js",
   "scripts": {

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

@@ -54,7 +54,7 @@ const Template = (args) => {
 export const DropdownTemplate = Template.bind({});
 
 DropdownTemplate.args = {
-  isListTop: true,
+  // isListTop: true,
   entity: 'entity',
   value: 'drop6',
   placeholder: 'Placeholder',

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

@@ -1,6 +1,8 @@
 import React, { useState, useRef } from 'react';
 import moment from 'moment';
 import InputMask from 'react-input-mask';
+import cn from 'classnames';
+
 import Calendar from '../../UI/Calendar/Calendar';
 import { useClickOutside } from '../../../Functions/useClickOutside';
 
@@ -16,6 +18,7 @@ const InputCalendar = ({
   mask = '99/99/9999',
   isDontLimitFuture,
   isListTop,
+  disabled,
 }) => {
   const [isOpened, setIsOpened] = useState(false);
   const calendarRef = useRef(null);
@@ -39,23 +42,28 @@ const InputCalendar = ({
   };
 
   return (
-    <div className={`input__wrap calendar-container ${className}`} ref={calendarRef}>
+    <div
+      className={cn('input__wrap calendar-container', className, {
+        'calendar-container_disabled': disabled,
+      })}
+      ref={calendarRef}
+    >
       <InputMask
         mask={mask}
         placeholder={placeholder}
         value={value}
         onChange={(e) => changeInputValue(e.target.value)}
         className="calendar-dropdown"
-        onFocus={() => setIsOpened(!isOpened)}
+        onFocus={() => setIsOpened(true)}
       />
       {isOpened ? (
         <Calendar
-          className={isListTop ? '' : ''}
           date={getCalendarValue(value)}
           setDate={(newDate) => changeCalendarDay(newDate)}
           params={{ minDate, maxDate }}
           isDontLimitFuture={isDontLimitFuture}
           isListTop={isListTop}
+          setIsOpened={setIsOpened}
         />
       ) : null}
     </div>

package/src/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -2,6 +2,11 @@
   min-width: 200px;
   position: relative;
 
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   .calendar {
     position: absolute;
     z-index: 9;

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

@@ -15,14 +15,23 @@ export default {
 
 const Template = (args) => {
   const [date, setDate] = useState('');
+  const [disabled, setDisabled] = useState(false);
 
-  return <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} />;
+  return (
+    <>
+      <InputCalendar {...args} value={date} onChange={(val) => setDate(val)} disabled={disabled} />
+      <div style={{ display: 'flex', flexFlow: 'row nowrap', justifyContent: 'flex-end', marginTop: '10px' }}>
+        <button style={{ border: 'solid 1px black', padding: '10px', width: '80px' }} onClick={() => setDisabled(!disabled)}>
+          {disabled ? 'Enable' : 'Disable'}
+        </button>
+      </div>
+    </>
+  );
 };
 
 export const CalendarTemplate = Template.bind({});
 
 CalendarTemplate.args = {
-  value: '',
   minDate: '01/01/1900',
   maxDate: '01/01/2100',
   isDontLimitFuture: true,

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

@@ -6,7 +6,7 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params, className, isDontLimitFuture, isListTop } = props;
+  const { date, setDate, setIsOpened, allowPrev = true, allowNext = true, params, className, isDontLimitFuture, isListTop } = props;
   // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
   const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
@@ -61,7 +61,14 @@ export default function (props) {
       <div
         key={`${week}_${dayOfWeek}`}
         className={classNames}
-        onClick={day && (isDontLimitFuture || !isFutureDay) ? () => setDate(moment(day.date).format('L')) : null}
+        onClick={
+          day && (isDontLimitFuture || !isFutureDay)
+            ? () => {
+                setDate(moment(day.date).format('L'));
+                setIsOpened(false);
+              }
+            : null
+        }
         // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
         // onMouseLeave={() => onHover(null)}
       >