@itcase/ui 1.0.10 → 1.0.11

package/dist/components/DateRangePicker.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var reactDateRange = require('react-date-range');
+var luxon = require('luxon');
+var index$1 = require('../index-738f53f6.js');
+var index$2 = require('./Button.js');
+var Modal = require('../Modal-375ef8c3.js');
+require('./Loader.js');
+var index = require('./Input.js');
+require('../typeof-6dd323c6.js');
+require('prop-types');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/horizontalResizeMode.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/width.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-e4accb53.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('./Text.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('react-dom');
+require('./Fader.js');
+require('../constants/componentProps/fillGradient.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var DateRangePickerInput = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  var onChange = props.onChange,
+    onFocus = props.onFocus,
+    toFormat = props.toFormat,
+    value = props.value,
+    _props$initialDate = props.initialDate,
+    initialDate = _props$initialDate === void 0 ? new Date() : _props$initialDate,
+    modalIsOpen = props.modalIsOpen,
+    modalIsFader = props.modalIsFader,
+    modalIsOutsideClose = props.modalIsOutsideClose,
+    modalShape = props.modalShape,
+    modalElevation = props.modalElevation,
+    modalPadding = props.modalPadding,
+    dateRangeProps = props.dateRangeProps,
+    primaryButtonShape = props.primaryButtonShape,
+    secondaryButtonShape = props.secondaryButtonShape,
+    primaryButtonFill = props.primaryButtonFill,
+    primaryButtonFillHover = props.primaryButtonFillHover,
+    primaryButtonSize = props.primaryButtonSize,
+    primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
+    primaryButtonLabelSize = props.primaryButtonLabelSize,
+    primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
+    primaryButtonLabel = props.primaryButtonLabel,
+    secondaryButtonFill = props.secondaryButtonFill,
+    secondaryButtonFillHover = props.secondaryButtonFillHover,
+    secondaryButtonSize = props.secondaryButtonSize,
+    secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
+    secondaryButtonLabelSize = props.secondaryButtonLabelSize,
+    secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
+    secondaryButtonLabel = props.secondaryButtonLabel,
+    placeholder = props.placeholder,
+    inputProps = props.inputProps;
+  var rangeRef = React.useRef(null);
+  var modalRef = React.useRef(null);
+  var onClickSave = React.useCallback(function () {
+    var _rangeRef$current;
+    var value = (_rangeRef$current = rangeRef.current) == null ? void 0 : _rangeRef$current.value;
+    if (onChange) {
+      onChange(value);
+    }
+    modalRef.current.closeModal();
+  }, [onChange]);
+  var onClickCancel = React.useCallback(function () {
+    modalRef.current.closeModal();
+  }, []);
+
+  // Create JS Date object for Calendar component
+  var _useState = React.useState(function () {
+      var startDate = initialDate.startDate,
+        endDate = initialDate.endDate;
+      if (typeof initialDate === 'string' && initialDate.includes('-')) {
+        var _initialDate$split = initialDate.split(' - ');
+        startDate = _initialDate$split[0];
+        endDate = _initialDate$split[1];
+      }
+      var state = {
+        startDate: null,
+        endDate: null,
+        key: 'date'
+      };
+      if (!startDate && !endDate) {
+        return state;
+      }
+      if (typeof startDate === 'string' && typeof endDate === 'string') {
+        state.startDate = luxon.DateTime.fromISO(startDate).toJSDate();
+        state.endDate = luxon.DateTime.fromISO(endDate).toJSDate();
+      }
+      if (startDate instanceof Date && endDate instanceof Date) {
+        state.startDate = startDate;
+        state.endDate = endDate;
+      }
+      return state;
+    }),
+    dateRanges = _useState[0],
+    setDateRanges = _useState[1];
+  React.useImperativeHandle(ref, function () {
+    var startDate = luxon.DateTime.fromJSDate(dateRanges.startDate).toISODate();
+    var endDate = luxon.DateTime.fromJSDate(dateRanges.endDate).toISODate();
+    return {
+      value: startDate + " - " + endDate
+    };
+  });
+  var onChangeDate = React.useCallback(function (range) {
+    setDateRanges(function (prevState) {
+      var _range$date, _range$date2;
+      return Object.assign({}, prevState, {
+        startDate: (_range$date = range.date) == null ? void 0 : _range$date.startDate,
+        endDate: (_range$date2 = range.date) == null ? void 0 : _range$date2.endDate
+      });
+    });
+  }, []);
+  var onFocusInput = React.useCallback(function () {
+    onFocus && onFocus();
+    modalRef.current.openModal();
+  }, [onFocus]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({
+    readonly: "true",
+    type: "text",
+    onFocus: onFocusInput,
+    value: value
+    // onBlur={input.onBlur}
+    ,
+    onChange: function onChange() {
+      /* set empty function for disable react warning */
+    },
+    placeholder: placeholder
+  }, inputProps)), /*#__PURE__*/React__default.default.createElement(Modal.Modal, {
+    ref: modalRef,
+    isOpen: modalIsOpen,
+    isFader: modalIsFader,
+    isOutsideClose: modalIsOutsideClose,
+    shape: modalShape,
+    elevation: modalElevation,
+    padding: modalPadding
+  }, /*#__PURE__*/React__default.default.createElement(reactDateRange.DateRange, Object.assign({
+    locale: index$1.ru,
+    className: clsx__default.default('date-range-picker'),
+    ranges: [dateRanges],
+    toFormat: toFormat,
+    weekdayDisplayFormat: "EEEEEE",
+    dayDisplayFormat: "d",
+    showDateDisplay: false,
+    onChange: onChangeDate
+  }, dateRangeProps)), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
+    width: "fill",
+    fill: primaryButtonFill,
+    fillHover: primaryButtonFillHover,
+    size: primaryButtonSize,
+    labelTextColor: primaryButtonLabelTextColor,
+    labelSize: primaryButtonLabelSize,
+    labelTextWeight: primaryButtonLabelTextWeight,
+    label: primaryButtonLabel,
+    shape: primaryButtonShape,
+    onClick: onClickSave
+  }), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
+    width: "fill",
+    fill: secondaryButtonFill,
+    fillHover: secondaryButtonFillHover,
+    size: secondaryButtonSize,
+    labelTextColor: secondaryButtonLabelTextColor,
+    labelSize: secondaryButtonLabelSize,
+    shape: secondaryButtonShape,
+    labelTextWeight: secondaryButtonLabelTextWeight,
+    label: secondaryButtonLabel,
+    onClick: onClickCancel
+  })));
+});
+DateRangePickerInput.displayName = 'DateRangePickerInput';
+DateRangePickerInput.defaultProps = {
+  primaryButtonFill: 'accentPrimary',
+  primaryButtonFillHover: 'accentPrimaryHover',
+  primaryButtonSize: 'xl',
+  primaryButtonShape: 'rounded',
+  primaryButtonLabelTextColor: 'accentTextPrimary',
+  primaryButtonLabelSize: 'l',
+  primaryButtonLabel: 'OK',
+  secondaryButtonFill: 'surfaceSecondary',
+  secondaryButtonFillHover: 'surfaceSecondaryHover',
+  secondaryButtonSize: 'xl',
+  secondaryButtonShape: 'rounded',
+  secondaryButtonLabelTextColor: 'surfaceTextPrimary',
+  secondaryButtonLabelSize: 'l',
+  secondaryButtonLabel: 'Отмена'
+};
+
+exports.DateRangePickerInput = DateRangePickerInput;

package/dist/components/FormField.js

@@ -37,7 +37,8 @@ require('../constants/componentProps/textGradient.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
 require('react-select');
-require('../objectWithoutProperties-ea190611.js');
+require('../defineProperty-72768a50.js');
+require('../typeof-6dd323c6.js');
 require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Input.js

@@ -33,6 +33,7 @@ function Input(props) {
     value = props.value,
     onBlur = props.onBlur,
     onChange = props.onChange,
+    onFocus = props.onFocus,
     onKeyDown = props.onKeyDown;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -87,6 +88,7 @@ function Input(props) {
     value: value,
     onBlur: onBlur,
     onChange: onChange,
+    onFocus: onFocus,
     onKeyDown: onKeyDown
   });
 }

package/dist/components/Logo.js

@@ -14,14 +14,14 @@ require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
-require('lodash/castArray');
 require('lodash/camelCase');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/dist/components/Modal.js

@@ -1,20 +1,21 @@
 'use strict';
 
+var Modal = require('../Modal-375ef8c3.js');
 var React = require('react');
-var PropTypes = require('prop-types');
-var require$$2 = require('react-dom');
-var clsx = require('clsx');
-var index = require('./Fader.js');
-var useStyles = require('../useStyles-e4accb53.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$1 = require('./Loader.js');
+var index = require('./Loader.js');
+require('prop-types');
+require('react-dom');
+require('clsx');
+require('./Fader.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/fillGradient.js');
+require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../useStyles-e4accb53.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -29,233 +30,14 @@ require('../constants/componentProps/textWeight.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var require$$2__default = /*#__PURE__*/_interopDefault(require$$2);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
-var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
-  if (className === void 0) {
-    className = '';
-  }
-  // prettier-ignore
-  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
-  var modalElement = document.querySelector(modalQuerySelector);
-  if (!modalElement) {
-    // Add modal element into the DOM on mount.
-    modalElement = document.createElement('div');
-    modalElement.setAttribute('id', 'modal-global');
-    modalElement.classList.add('modal');
-    if (classList.length) {
-      var _modalElement$classLi;
-      (_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
-    }
-    document.body.prepend(modalElement);
-  }
-  return modalElement;
-};
-
-// Modal component that is an abstraction around the portal API.
-var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
-  var children = props.children,
-    className = props.className,
-    closeButton = props.closeButton,
-    contentClassName = props.contentClassName,
-    id = props.id,
-    isFader = props.isFader,
-    faderFill = props.faderFill,
-    faderFillGradient = props.faderFillGradient,
-    faderOpacity = props.faderOpacity,
-    initialIsOpen = props.isOpen,
-    isScrollOnOpen = props.isScrollOnOpen,
-    isSetFocusOnOpen = props.isSetFocusOnOpen,
-    modalQuerySelector = props.modalQuerySelector,
-    isOutsideClose = props.isOutsideClose,
-    onCloseModal = props.onCloseModal,
-    onOpenModal = props.onOpenModal;
-
-  // Query DOM element
-  var _useState = React.useState(null),
-    modalElement = _useState[0],
-    setModalElement = _useState[1];
-  React.useLayoutEffect(function () {
-    var element = getOrCreateModalElement(modalQuerySelector, className);
-    setModalElement(element);
-    if (element) {
-      addModalProps(element);
-    }
-  }, []);
-  var modalContentRef = React.useRef(null);
-  var modalFaderRef = React.useRef(null);
-  var _useState2 = React.useState(initialIsOpen),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var addModalProps = React.useCallback(function (element) {
-    // Change class need in "useEffect"
-    if (isOpen) {
-      // Show modal
-      element.classList.add('modal_state_visible');
-      // Scroll to opened modal
-      if (isScrollOnOpen) {
-        // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
-        element.scrollIntoView({
-          block: 'center',
-          behavior: 'smooth'
-        });
-      }
-
-      // "setTimeout" in this implementation is needs for set focus on modal
-      // after "onMouseDown" event on button
-      if (isSetFocusOnOpen) {
-        setTimeout(function () {
-          return modalContentRef.current.focus();
-        }, 0);
-      }
-    } else if (!element.children.length) {
-      // Hide modal if has no children
-      element.classList.remove('modal_state_visible');
-    }
-  }, [isOpen, isSetFocusOnOpen]);
-  React.useEffect(function () {
-    if (!modalElement) {
-      return;
-    }
-    addModalProps(modalElement);
-  }, [isOpen]); // eslint-disable-line
-
-  // Show modal with children content
-  var openModal = React.useCallback(function () {
-    setIsOpen(true);
-
-    // Callback
-    if (typeof onOpenModal === 'function') {
-      onOpenModal();
-    }
-
-    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
-      // If current modal is already opened
-      // Move content to end of modal root container. For order in DOM.
-      const modalContentElement = modalContentRef.current
-      if (modalContentElement) {
-        modalContentElement.parentNode.appendChild(modalContentElement)
-      }
-      // Also move fader to end of modal root container after container
-      const modalFaderElement = modalFaderRef.current
-      if (modalFaderElement) {
-        modalFaderElement.parentNode.appendChild(modalFaderElement)
-      }
-    */
-  }, [onOpenModal]);
-
-  // Hide modal and unmount children content
-  var closeModal = React.useCallback(function (event) {
-    if (event === void 0) {
-      event = {};
-    }
-    var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
-    if (hasRelatedTarget) {
-      return event;
-    }
-    setIsOpen(false);
-
-    // Callback
-    if (typeof onCloseModal === 'function') {
-      onCloseModal();
-    }
-  }, [modalElement, onCloseModal]);
-
-  // Save ref things
-  React.useImperativeHandle(ref, function () {
-    return {
-      isOpen: isOpen,
-      openModal: openModal,
-      closeModal: closeModal,
-      modalElement: modalElement
-    };
-  });
-  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'contentFill'
-  });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'modal-shape_',
-    propsKey: 'shape'
-  });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'borderColor'
-  });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-width_',
-    propsKey: 'borderWidth'
-  });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-type_',
-    propsKey: 'borderType'
-  });
-  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'elevation_',
-    propsKey: 'elevation'
-  });
-  var _useStyles = useStyles.useStyles(props),
-    modalStyles = _useStyles.styles;
-
-  // Use a portal to render the children into the element
-  return modalElement && /*#__PURE__*/require$$2__default.default.createPortal(
-  // Any valid React child: JSX, strings, arrays, etc.
-  isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('modal-content', contentClassName, contentFillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
-    id: id,
-    ref: modalContentRef,
-    tabIndex: 0,
-    onBlur: isOutsideClose ? undefined : closeModal,
-    style: modalStyles
-  }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "modal-content__close",
-    onClick: closeModal
-  }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
-    ref: modalFaderRef,
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    opacity: faderOpacity,
-    className: "modal__fader",
-    isFader: isFader
-  })) : null,
-  // A DOM element
-  modalElement);
-});
-Modal.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  closeIcon: PropTypes__default.default.string,
-  closeText: PropTypes__default.default.string,
-  faderFill: PropTypes__default.default.string,
-  faderFillGradient: PropTypes__default.default.string,
-  faderOpacity: PropTypes__default.default.string,
-  contentClassName: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.bool,
-  isScrollOnOpen: PropTypes__default.default.bool,
-  isSetFocusOnOpen: PropTypes__default.default.bool,
-  modalQuerySelector: PropTypes__default.default.string,
-  isOutsideClose: PropTypes__default.default.bool,
-  onCloseModal: PropTypes__default.default.func,
-  onOpenModal: PropTypes__default.default.func
-};
-Modal.defaultProps = {
-  isFader: true,
-  isOpen: false,
-  isScrollOnOpen: true,
-  isSetFocusOnOpen: true,
-  modalQuerySelector: '#modal-global'
-};
 
 function ModalLoader(props) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-loading"
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-loading__inner"
-  }, /*#__PURE__*/React__default.default.createElement(index$1.Loader, null)));
+  }, /*#__PURE__*/React__default.default.createElement(index.Loader, null)));
 }
 
-exports.Modal = Modal;
+exports.Modal = Modal.Modal;
 exports.ModalLoader = ModalLoader;