diginet-core-ui 1.3.24

package/components/form-control/date-picker/index.js

@@ -0,0 +1,676 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { render } from 'react-dom';
+import { getGlobal } from '../../../global';
+import { date as moment, capitalizeSentenceCase, randomString, updatePosition } from '../../../utils';
+import CalendarComp from '../calendar';
+import ControlComp from '../control';
+import theme from '../../../theme/settings';
+import Icon from '../../../icons/';
+import { HelperText, InputBase, Label } from '../../index';
+import Button from '../../button';
+import Tooltip from '../../tooltip';
+const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  actionIconAt,
+  clearAble,
+  controls,
+  defaultValue,
+  disabled,
+  displayAnotherMonth,
+  displayFormat,
+  error,
+  errorProps,
+  inputProps,
+  inputStyle,
+  label,
+  labelProps,
+  max,
+  min,
+  onChange,
+  placeholder,
+  pressESCToClose,
+  readOnly,
+  required,
+  returnFormat,
+  style,
+  textAlign,
+  value,
+  viewType,
+  ...props
+}, reference) => {
+  var _ipRef$current, _ipRef$current2;
+
+  const [id] = useState(randomString(6, {
+    allowSymbol: false
+  }));
+  const unique = {
+    disabled: 'DGN-UI-DatePicker-disabled',
+    error: 'DGN-UI-DatePicker-error',
+    focus: 'DGN-UI-DatePicker-focus',
+    footer: 'DGN-UI-DatePicker-Footer',
+    cancel: 'DGN-UI-DatePicker-cancel',
+    confirm: 'DGN-UI-DatePicker-confirm',
+    backGr: 'DGN-UI-DatePicker-Background',
+    icon: 'DGN-UI-DatePicker-Icon',
+    picker: `DGN-UI-DatePicker-Picker-${id}`,
+    portal: 'DGN-UI-Portal'
+  };
+  const calRef = useRef(null);
+  const footerRef = useRef(null);
+  const iconRef = useRef(null);
+  const ipConRef = useRef(null);
+  const ipRef = useRef(null);
+  const ref = useRef(null);
+  const displayValue = useRef();
+  const focusedValue = useRef(null);
+  const [, setDisplayValue] = useState(Date.now());
+  const [, setFocusedValue] = useState(Date.now()); // const [actionsState, setActionsState] = useState(true);
+
+  useImperativeHandle(reference, () => ({
+    get: () => {
+      return ref.current;
+    },
+    getInputContainer: () => {
+      return ipConRef.current;
+    },
+    getInput: () => {
+      return ipRef.current;
+    },
+    getCalendar: () => {
+      return calRef.current;
+    },
+    getIcon: () => {
+      return iconRef.current;
+    }
+  }));
+  const confirmText = getGlobal(['confirm']);
+  const cancelText = getGlobal(['cancel']);
+  const iconAreaCSS = css`
+        align-items : center;
+        color       : inherit;
+        display     : flex;
+        width       : 24px;
+        & span {
+            padding: 0;
+        }
+        .${unique.icon} {
+            cursor     : pointer;
+            opacity    : 0;
+            transition : visibility 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+            visibility : hidden;
+            will-change: visibility, opacity;
+        }
+        .${unique.icon}-cancel {
+            transform : translateX(-100%);
+        }
+        .${unique.icon}-accept {
+            opacity	  : 1;
+            visibility: visible;
+        }
+    `;
+  const hiddenStyle = {
+    opacity: 0,
+    visibility: 'hidden'
+  };
+  const activeStyle = {
+    opacity: 1,
+    pointerEvents: 'none',
+    visibility: 'visible'
+  };
+  const pickerCSS = {
+    backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
+    picker: (position, left, width) => css`
+            background-color: ${theme.colors.white};
+            border-radius   : ${theme.border.radius};
+            height          : max-content;
+            left            : ${left}px;
+            max-width       : 400px;
+            min-width       : ${window.innerWidth <= 599 ? 280 : 314}px;
+            opacity         : 0;
+            position        : fixed;
+            top             : ${position.top}px;
+            transform       : scale(0);
+            transform-origin: ${position.transformOrigin};
+            transition      : opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+            width           : ${width}px;
+            z-index         : 9002;
+        `,
+    active: {
+      opacity: 1,
+      transform: 'scale(1)'
+    },
+    remove: {
+      opacity: 0,
+      pointerEvents: 'none',
+      transform: 'scale(0)'
+    }
+  };
+  const controlContainerCSS = css`
+        display        : flex;
+        justify-content: flex-end;
+        margin         : 0 16px 16px;
+    `;
+  const buttonProps = {
+    style: {
+      margin: '0 2px',
+      padding: '7px 8px'
+    }
+  };
+
+  const isValid = time => {
+    return !isNaN(Date.parse(typeof time !== 'date' ? new Date(time) : time));
+  };
+
+  const handleDisplayValue = useCallback(value => {
+    displayValue.current = new Date(value);
+    setDisplayValue();
+  }, [displayValue]);
+  const handleFocusedValue = useCallback(value => {
+    focusedValue.current = new Date(value);
+    setFocusedValue();
+  }, [focusedValue]);
+
+  const setButtonState = () => {
+    if (!footerRef.current || focusedValue.current === undefined || !isValid(focusedValue.current)) return;
+    const isEqual = focusedValue.current === null || Date.parse(new Date(focusedValue.current)) === Date.parse(new Date(displayValue.current));
+    footerRef.current.querySelector(`.${unique.cancel}`).disabled = isEqual;
+    footerRef.current.querySelector(`.${unique.confirm}`).disabled = isEqual;
+  };
+
+  const onConfirm = () => {
+    displayValue.current = focusedValue.current;
+    setButtonState();
+    onChangeValue({
+      value: focusedValue.current
+    });
+    closePicker();
+  };
+
+  const onCancel = () => {
+    focusedValue.current = null;
+    setButtonState();
+    closePicker();
+  };
+
+  const formatValue = (value, format, utc = false) => {
+    return moment(value).format(format, utc);
+  };
+
+  const setInputValue = e => {
+    ipRef.current.value = capitalizeSentenceCase(formatValue(e.value, displayFormat));
+    if (clearAble) onSwap(false);
+  };
+
+  const onChangeValue = e => {
+    setInputValue(e);
+    !!onChange && onChange({
+      value: formatValue(e.value, returnFormat)
+    });
+  };
+
+  const onCalendarClick = e => {
+    handleFocusedValue(e.value);
+    controls ? setButtonState() : onChangeValue(e);
+  };
+
+  const getPickerStyle = () => {
+    const {
+      innerHeight
+    } = window;
+    const {
+      left,
+      height,
+      top,
+      width
+    } = ipConRef.current.getBoundingClientRect();
+    const pickerHeight = controls ? 310 : 256;
+    let style = {};
+    style.top = top + height + 4;
+    style.transformOrigin = '50% 20%';
+
+    if (style.top + pickerHeight > innerHeight) {
+      if (top - pickerHeight > 0) {
+        style.top = top - pickerHeight - 4;
+        style.transformOrigin = '50% 80%';
+      }
+    }
+
+    return pickerCSS.picker(style, left, width).styles;
+  }; // const createPortal = () => {
+  //     let portal = document.getElementById(unique.portal);
+  //     if (!portal) {
+  //         portal = document.createElement('div');
+  //         portal.id = unique.portal;
+  //         document.body.appendChild(portal);
+  //     }
+  //     portal.style.cssText = pickerCSS.portal;
+  //     return portal;
+  // };
+
+
+  const createBackground = () => {
+    let background = document.getElementById(unique.backGr);
+
+    if (!background) {
+      background = document.createElement('div');
+      background.id = unique.backGr;
+      background.classList.add(unique.portal, unique.backGr);
+      document.body.appendChild(background);
+    }
+
+    background.style.cssText = pickerCSS.backGr;
+    return background;
+  };
+
+  const createPicker = () => {
+    const picker = document.createElement('div');
+    picker.id = unique.picker;
+    picker.style.cssText = getPickerStyle();
+    return picker;
+  };
+
+  const pressESCHandler = event => {
+    if (event.key === 'Escape') {
+      onClickOutside({
+        target: null
+      });
+    }
+
+    ;
+  };
+
+  const onScroll = () => {
+    const node = document.getElementById(unique.picker);
+
+    if (!ipConRef.current || !node) {
+      window.removeEventListener('scroll', onScroll);
+      return;
+    }
+
+    updatePosition(ipConRef.current, node, closePicker);
+  };
+
+  const onResize = () => {
+    if (!ref.current) return;
+    const {
+      width
+    } = ref.current.getBoundingClientRect();
+    const node = document.getElementById(unique.picker);
+
+    if (node) {
+      node.style.width = width + 'px';
+    }
+
+    onScroll();
+  };
+
+  const openPicker = () => {
+    const backGr = createBackground();
+    const picker = createPicker();
+    render(jsx(CalendarComp, {
+      ref: calRef,
+      actions: controls && footerMemo,
+      defaultValue: displayValue.current,
+      value: focusedValue.current,
+      max: max,
+      min: min,
+      displayAnotherMonth: displayAnotherMonth,
+      onClick: onCalendarClick
+    }), backGr.appendChild(picker));
+    setTimeout(() => {
+      Object.assign(picker.style, { ...pickerCSS.active
+      });
+      window.addEventListener('resize', onResize);
+      window.addEventListener('scroll', onScroll);
+      document.addEventListener('mousedown', onClickOutside);
+
+      if (pressESCToClose) {
+        document.addEventListener('keydown', pressESCHandler);
+      }
+
+      setButtonState();
+    });
+  };
+
+  const closePicker = () => {
+    const backGr = document.getElementById(unique.backGr);
+    if (!backGr) return;
+    const picker = backGr.querySelector(`#${unique.picker}`);
+    if (!picker) return;
+    Object.assign(picker.style, { ...pickerCSS.remove
+    });
+
+    if (pressESCToClose) {
+      document.removeEventListener('keydown', pressESCHandler);
+    }
+
+    document.removeEventListener('mousedown', onClickOutside);
+    window.removeEventListener('scroll', onScroll);
+    window.removeEventListener('resize', onResize);
+    setTimeout(() => {
+      backGr.remove();
+    }, 200);
+
+    if (ipConRef.current) {
+      ipConRef.current.classList.remove(unique.focus);
+      ipConRef.current.style.zIndex = null;
+    } // iconRef.current && onSwap(true);
+
+
+    ipRef.current && ipRef.current.blur();
+  }; // const updatePicker = () => {
+  //     const portal = document.body.querySelector(`#${unique.portal}`);
+  //     if (!portal) return;
+  //     const backGr = portal.querySelector(`#${unique.backGr}`);
+  //     if (!backGr) return;
+  //     const node = portal.querySelector(`#${unique.picker}`);
+  //     if (!node || !node.firstChild) return;
+  //     unmountComponentAtNode(node);
+  //     render(
+  //         <CalendarComp
+  //             ref={calRef}
+  //             actions={footerMemo}
+  //             defaultValue={displayValue.current}
+  //             value={focusedValue.current}
+  //             max={max}
+  //             min={min}
+  //             displayAnotherMonth={displayAnotherMonth}
+  //             onClick={onCalendarClick}
+  //         />, node);
+  // };
+
+
+  const onSwap = open => {
+    const t = iconRef.current.childNodes[+open];
+
+    if (open) {
+      Object.assign(t.style, { ...hiddenStyle
+      });
+      Object.assign(t.previousSibling.style, { ...activeStyle
+      });
+      setTimeout(() => {
+        t.previousSibling.style.pointerEvents = null;
+      }, 200);
+    } else {
+      Object.assign(t.style, { ...hiddenStyle
+      });
+      Object.assign(t.nextSibling.style, { ...activeStyle
+      });
+      setTimeout(() => {
+        t.nextSibling.style.pointerEvents = null;
+      }, 200);
+    }
+  };
+
+  const onInputFocus = () => {
+    const el = ipConRef.current;
+
+    if (!el.classList.contains(unique.focus)) {
+      el.classList.add(unique.focus);
+      el.style.zIndex = 9001;
+      openPicker();
+    }
+  };
+
+  const onClickOutside = e => {
+    if (ipConRef.current && !ipConRef.current.contains(e.target) && ipRef.current && !ipRef.current.contains(e.target) && calRef.current && !calRef.current.contains(e.target)) {
+      controls ? onCancel() : closePicker();
+    }
+  };
+
+  const triggerFocus = () => {
+    if (!ipConRef.current.classList.contains(unique.focus)) {
+      ipRef.current.focus();
+    } else {
+      onClickOutside({
+        target: null
+      });
+    }
+  };
+
+  const onClear = () => {
+    if (!clearAble && !ipRef.current) return;
+    ipRef.current.value = '';
+    focusedValue.current = null;
+    setButtonState();
+    const e = {
+      value: null
+    };
+    !!onChange && onChange(e);
+    onSwap(true);
+  };
+
+  const iconComp = jsx("div", {
+    css: iconAreaCSS,
+    ref: iconRef
+  }, jsx(Icon, {
+    onClick: triggerFocus,
+    className: `${unique.icon} ${unique.icon}-accept`,
+    viewBox: true,
+    name: 'CalendarNew'
+  }), jsx(Icon, {
+    onClick: onClear,
+    className: `${unique.icon} ${unique.icon}-cancel`,
+    viewBox: true,
+    name: 'Close'
+  }));
+  const endIcon = actionIconAt === 'end' && iconComp;
+  const startIcon = actionIconAt === 'start' && iconComp;
+  const footerMemo = jsx("div", {
+    css: controlContainerCSS,
+    className: unique.footer,
+    ref: footerRef
+  }, jsx(Button, _extends({}, buttonProps, {
+    className: unique.cancel,
+    onClick: onCancel
+  }), cancelText), jsx(Button, _extends({}, buttonProps, {
+    color: 'info',
+    className: unique.confirm,
+    onClick: onConfirm
+  }), confirmText));
+  const isError = !!error && (!value || !isValid(value));
+  useEffect(() => {
+    if (defaultValue && isValid(defaultValue)) {
+      handleDisplayValue(defaultValue);
+      setInputValue({
+        value: displayValue.current
+      });
+    }
+
+    return () => {
+      closePicker();
+    };
+  }, []);
+  useEffect(() => {
+    if (value && isValid(value)) {
+      handleFocusedValue(value);
+      handleDisplayValue(value);
+      setInputValue({
+        value: displayValue.current
+      });
+      setButtonState();
+      closePicker();
+    } else {
+      if (ipRef.current) ipRef.current.value = '';
+
+      if (clearAble) {
+        onSwap(true);
+      }
+
+      setButtonState();
+      closePicker();
+    }
+  }, [value]);
+  useEffect(() => {
+    if (!readOnly) {
+      ipRef.current.addEventListener('focus', onInputFocus);
+    }
+
+    return () => {
+      if (!ipRef.current) return;
+
+      if (!readOnly) {
+        ipRef.current.removeEventListener('focus', onInputFocus);
+      }
+    };
+  }, [onChange]);
+  useEffect(() => {
+    if (ipRef.current.value !== '') {
+      const e = {
+        value: focusedValue.current || displayValue.current
+      };
+      setInputValue(e, displayFormat);
+    }
+
+    if (disabled) {
+      iconRef.current.childNodes[0].style.pointerEvents = 'none';
+      closePicker();
+    } else if (!readOnly) {
+      ipRef.current.addEventListener('focus', onInputFocus);
+    } else {
+      iconRef.current.childNodes[0].style.pointerEvents = 'none';
+      closePicker();
+    }
+
+    return () => {
+      if (!iconRef.current || !ipRef.current) return;
+
+      if (disabled) {
+        iconRef.current.childNodes[0].style.pointerEvents = null;
+      } else if (!readOnly) {
+        ipRef.current.removeEventListener('focus', onInputFocus);
+      } else {
+        iconRef.current.childNodes[0].style.pointerEvents = null;
+      }
+
+      closePicker();
+    };
+  }, [actionIconAt, clearAble, controls, disabled, displayFormat, displayAnotherMonth, max, min, readOnly, returnFormat, viewType]);
+  return jsx(ControlComp, _extends({}, props, {
+    disabled: disabled,
+    error: isError,
+    ref: ref,
+    style: style
+  }), !!label && jsx(Label, _extends({}, labelProps, {
+    disabled: disabled,
+    required: required
+  }), label), jsx(Tooltip, {
+    title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : '',
+    style: {
+      width: 'none'
+    }
+  }, jsx(InputBase, _extends({
+    placeholder: placeholder
+  }, inputProps, {
+    readOnly: true,
+    ref: ipConRef,
+    inputRef: ipRef,
+    disabled: disabled,
+    viewType: viewType,
+    inputStyle: {
+      textAlign: textAlign,
+      ...inputStyle
+    },
+    startIcon: startIcon,
+    startIconProps: {
+      className: 'non-effect allow-disabled'
+    },
+    endIcon: endIcon
+  }))), isError && jsx(HelperText, _extends({}, errorProps, {
+    disabled: disabled
+  }), error));
+}));
+DatePicker.defaultProps = {
+  actionIconAt: 'end',
+  clearAble: false,
+  controls: false,
+  disabled: false,
+  displayAnotherMonth: true,
+  displayFormat: 'dddd, DD MMMM YYYY',
+  pressESCToClose: true,
+  readOnly: false,
+  required: false,
+  textAlign: 'start',
+  returnFormat: 'YYYY-MM-DD',
+  viewType: 'underlined'
+};
+DatePicker.propTypes = {
+  /** action icons position */
+  actionIconAt: PropTypes.oneOf(['end', 'start']),
+
+  /** display the clear icon if true */
+  clearAble: PropTypes.bool,
+
+  /** if 'true' the calendar will have a footer controls */
+  controls: PropTypes.bool,
+
+  /** the default value of the component */
+  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /** if 'true' the form control will be disabled */
+  disabled: PropTypes.bool,
+
+  /** format to display value   */
+  displayFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
+
+  /** view days of previous or next month */
+  displayAnotherMonth: PropTypes.bool,
+
+  /** error of the form control */
+  error: PropTypes.string,
+
+  /** inputProps are properties of the input element */
+  inputProps: PropTypes.object,
+
+  /** inputStyle is style of input element */
+  inputStyle: PropTypes.object,
+
+  /** content of the label element */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** labelProps are properties if the label element */
+  labelProps: PropTypes.object,
+
+  /** min value of date picker */
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /** max value of date picker */
+  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /** a callback function when value input change */
+  onChange: PropTypes.func,
+
+  /** hints for input */
+  placeholder: PropTypes.string,
+
+  /** allow close Popup when press ESC */
+  pressESCToClose: PropTypes.bool,
+
+  /** status read only of input */
+  readOnly: PropTypes.bool,
+
+  /** required state of the form control */
+  required: PropTypes.bool,
+
+  /** format of the returned value   */
+  returnFormat: PropTypes.oneOfType([PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']), PropTypes.string]),
+
+  /** style of the component */
+  style: PropTypes.object,
+
+  /** text align of the input */
+  textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+
+  /** value of the component */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
+
+  /** view type of the form control */
+  viewType: PropTypes.oneOf(['outlined', 'underlined'])
+};
+export default DatePicker;