diginet-core-ui 1.3.24

package/components/form-control/checkbox/index.js

@@ -0,0 +1,306 @@
+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, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import { Typography } from '../..';
+import theme from '../../../theme/settings';
+import { randomString } from '../../../utils';
+const colors = {
+  primary: theme.colors.primary,
+  info: theme.colors.info,
+  success: theme.colors.success,
+  warning: theme.colors.warning,
+  danger: theme.colors.danger
+};
+const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
+  className,
+  disabled,
+  readOnly,
+  name,
+  label,
+  color,
+  value,
+  checked,
+  defaultChecked,
+  determinate,
+  onChange,
+  inputRef,
+  children,
+  inputProps,
+  ...props
+}, reference) => {
+  if (!inputRef) {
+    inputRef = useRef(null);
+  }
+
+  const ref = useRef(null);
+
+  if (!id) {
+    [id] = useState('DGN-UI-' + randomString(10, {
+      allowNumber: false,
+      allowSymbol: false
+    }));
+  }
+
+  const CheckBoxInput = css`
+		&:checked + span {
+			background-color: ${colors[color] || color};
+			border-color: ${colors[color] || color};
+			&.determinate {
+				&::after {
+					transform: translate(-50%, -66%) scale(1) rotate(-45deg);
+					background:
+						linear-gradient(${theme.colors.white}, ${theme.colors.white}) left bottom/2px 100%,
+						linear-gradient(${theme.colors.white}, ${theme.colors.white}) left bottom/100% 2px;
+					background-repeat: no-repeat;
+				}
+			}
+			&.indeterminate {
+				&::after {
+					transform: scale(1);
+				}
+			}
+		}
+	`;
+  const CheckBoxSquare = css`
+		display: flex;
+		position: relative;
+		width: 18px;
+		height: 18px;
+		background-color: ${theme.colors.white};
+		border: 2px solid ${theme.colors.border};
+		box-sizing: border-box;
+		border-radius: 2px;
+		&.determinate {
+			&::after {
+				content   : '';
+				display   : block;
+				height    : 7px;
+				left	  : 50%;
+				position  : absolute;
+				top		  : 43%;
+				transform : translate(-50%, -50%) scale(0) rotate(45deg);
+				transition: transform 0.3s;
+				width     : 12.6px;
+			}
+		}
+		&.indeterminate {
+			&::after {
+				content: "";
+				display: flex;
+				position: absolute;
+				background-color: white;
+				left: 2px;
+				top: 6px;
+				width: 10px;
+				height: 2px;
+				transition: transform 0.3s;
+				transform: scale(0);
+			}
+		}
+		&:hover {
+			box-shadow:
+                0 0 2px 2px ${theme.colors.focus};
+			background-color:${theme.colors.focus};
+		}
+		
+	`;
+  const CheckBoxLabel = css`
+		display: flex;
+		position: relative;
+		align-items: center;
+		padding-left: 8px;
+		box-sizing: border-box;
+	`;
+  const CheckBoxRoot = css`
+		display: flex;
+		position: relative;
+		align-items: center;
+		margin: 3px 0;
+		cursor: pointer;
+		user-select: none;
+		box-sizing: border-box;
+		&.disabled {
+			pointer-events: none;
+			.css-${CheckBoxSquare.name} {
+				border-color:${theme.colors.disabled};
+			}
+			.css-${CheckBoxInput.name} {
+				&:checked {
+					&.determinate + span::after {
+						background:
+							linear-gradient(${theme.colors.white},${theme.colors.white}) left bottom/2px 100%,
+							linear-gradient(${theme.colors.white},${theme.colors.white}) left bottom/ 100% 2px;
+						background-repeat: no-repeat;
+					}
+					&.indeterminate + span::after {
+						background-color: ${theme.colors.white};
+					}
+					& + span {
+						background-color:${theme.colors.disabled};
+					}
+				}
+			}
+		}
+		&.read-only {
+			pointer-events: none;
+			user-select: none;
+		}
+		&:not(.disabled):hover {
+			.css-${CheckBoxSquare.name} {
+				background-color:${theme.colors.hover};
+				border-color:${colors[color] || color};
+			}
+			.css-${CheckBoxInput.name} {
+				&:checked {
+					&.determinate + span::after {
+						background:
+							linear-gradient(${colors[color] || color},${colors[color] || color}) left bottom/2px 100%,
+							linear-gradient(${colors[color] || color},${colors[color] || color}) left bottom/100% 2px;
+						background-repeat: no-repeat;
+					}
+					&.indeterminate + span::after {
+						background-color: ${colors[color] || color};
+					}
+				}
+			}
+		}
+	`;
+  const CheckboxContainer = css`
+		display: block;
+		position: relative;
+		width: max-content;
+		&.disabled {
+			cursor: no-drop;
+		}
+	`;
+
+  const handleChange = () => {
+    if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
+    const checked = !inputRef.current.checked;
+    inputRef.current.checked = checked;
+    const e = {
+      value: checked,
+      target: inputRef.current
+    };
+    if (onChange) onChange(e, checked);
+  };
+
+  const setChecked = check => {
+    if (typeof check === 'boolean') {
+      inputRef.current.checked = check;
+    }
+  };
+
+  useEffect(() => {
+    setChecked(checked);
+  }, [checked]);
+  useImperativeHandle(reference, () => {
+    ref.current.determinate = determinate;
+    ref.current.setChecked = setChecked;
+
+    ref.current.getChecked = () => inputRef.current.checked;
+
+    return ref.current;
+  });
+  return jsx("div", _extends({
+    id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
+    css: CheckboxContainer,
+    className: ['DGN-UI-Checkbox', disabled ? 'disabled' : '', className].join(' ').trim(),
+    ref: ref
+  }, props, {
+    onClick: handleChange
+  }), jsx("div", {
+    css: CheckBoxRoot,
+    className: disabled ? 'disabled' : readOnly ? 'read-only' : ''
+  }, jsx("input", _extends({
+    value: value
+  }, inputProps, {
+    className: [determinate ? 'determinate' : 'indeterminate', inputProps.className || ''].join(' ').trim(),
+    readOnly: readOnly || inputProps.readOnly,
+    disabled: disabled || inputProps.disabled,
+    ref: inputRef,
+    css: CheckBoxInput,
+    id: id,
+    name: name,
+    type: "checkbox",
+    defaultChecked: checked || defaultChecked,
+    hidden: true
+  })), jsx("span", {
+    css: CheckBoxSquare,
+    className: determinate ? 'determinate' : 'indeterminate'
+  }), (children || label) && jsx("div", {
+    css: CheckBoxLabel
+  }, jsx(Typography, {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center'
+    }
+  }, children || label))));
+}));
+Checkbox.defaultProps = {
+  label: '',
+  className: '',
+  color: 'primary',
+  disabled: false,
+  readOnly: false,
+  defaultChecked: false,
+  determinate: true,
+  inputProps: {}
+};
+Checkbox.propTypes = {
+  /** value to check/uncheck square */
+  checked: PropTypes.bool,
+
+  /** value to check/uncheck square (just one time) */
+  defaultChecked: PropTypes.bool,
+
+  /** Prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** Prevent all event if true (keeping style) */
+  readOnly: PropTypes.bool,
+
+  /** display tick or hyphen icon */
+  determinate: PropTypes.bool,
+
+  /** Id is randomized randomly to avoid duplication. */
+  id: PropTypes.string,
+
+  /** value of input */
+  value: PropTypes.string,
+
+  /** class of Checkbox */
+  className: PropTypes.string,
+
+  /** The name of the Checkbox corresponds to the label displayed on the interface */
+  name: PropTypes.string,
+
+  /** The name of the Radio is displayed on the interface */
+  label: PropTypes.string,
+
+  /** color of checkbox background ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
+  color: PropTypes.string,
+
+  /** props for input */
+  inputProps: PropTypes.object,
+
+  /** The function will run to return a true or false value of Radio Component */
+  onChange: PropTypes.func,
+
+  /**
+   * named ref: get ref of Checkbox component, insist:<br />
+   * * element<br />
+   * * setChecked: the method to set checked for input<br />
+   * * getChecked: the method to get checked of input<br />
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(PropTypes.elementType)
+  })])
+};
+export default Checkbox;

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

@@ -0,0 +1,92 @@
+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 { Children, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import theme from '../../../theme/settings';
+const {
+  typography,
+  colors
+} = theme;
+const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  disabled,
+  error,
+  style,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => ref.current);
+  const classes = {
+    disabled: 'DGN-UI-Control-disabled',
+    error: 'DGN-UI-Control-error'
+  };
+  const controlRootCSS = css`
+        font-family  : ${typography.fontFamily};
+        margin-bottom: 20px;
+        position     : relative;
+        &.${classes.disabled} {
+            pointer-events: none;
+            user-select   : none;
+        }
+        &.${classes.error} {
+            * :not(label) {
+                color: ${colors.danger};
+            }
+        }
+        
+    `;
+  useLayoutEffect(() => {
+    if (disabled) {
+      ref.current.classList.add(classes.disabled);
+    }
+
+    if (!disabled && error) {
+      ref.current.classList.add(classes.error);
+      ref.current.querySelector('div.DGN-UI-InputBase').classList.add('danger');
+    }
+
+    return () => {
+      if (disabled) {
+        ref.current.classList.remove(classes.disabled);
+      }
+
+      if (!disabled && error) {
+        ref.current.classList.remove(classes.error);
+        ref.current.querySelector('div.DGN-UI-InputBase').classList.remove('danger');
+      }
+    };
+  }, [disabled, error]);
+  return jsx("div", _extends({}, props, {
+    className: ['DGN-UI-Control', className].join(' '),
+    css: controlRootCSS,
+    style: style,
+    ref: ref
+  }), children);
+}));
+Control.defaultProps = {
+  className: '',
+  disabled: false,
+  error: ''
+};
+Control.propTypes = {
+  /** children of the form control */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]).isRequired,
+
+  /** the class for the form control */
+  className: PropTypes.string,
+
+  /** prevent all event if true, hide all icon */
+  disabled: PropTypes.bool,
+
+  /** error for input */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** style of the component */
+  style: PropTypes.object
+};
+export default Control;

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

@@ -0,0 +1,953 @@
+// /** @jsxRuntime classic */
+// /** @jsx jsx */
+// import { jsx, css } from '@emotion/core';
+// import PropTypes from 'prop-types';
+// import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+// import { Calendar as CalendarIcon, Cancel as CancelIcon } from '../../../icons';
+// import { randomString, useOnClickOutside } from '../../../utils';
+// import { blue4, blue13, brand, danger5, danger8, dark, dark4, dark6, dark8, info5, info8, success5, white } from '../../../styles/colors';
+// import { fontFamily } from '../../../styles/typography';
+// // import CalendarNavigator from './calendar-navigator'
+// const getElById = (id) => {
+// 	return document.getElementById(id);
+// };
+// const addZeroToText = (number) => {
+// 	return +number < 10 ? '0' + number : number;
+// };
+// const checkActiveDay = (format, time, string) => {
+// 	let a = {}, b = {
+// 		year : time.getFullYear(),
+// 		month: time.getMonth(),
+// 		date : time.getDate(),
+// 	};
+// 	if (/^(dd|DD)[\/\-](mm|MM)[\/\-]((y|Y){4})$/.test(format)) {
+// 		if (string.split('-').length < 3) {
+// 			a.year  = string.split('/')[2];
+// 			a.month = string.split('/')[1];
+// 			a.date  = string.split('/')[0];
+// 			return Date.parse(new Date(a.year, a.month - 1, a.date)) === Date.parse(new Date(b.year, b.month, b.date));
+// 		} else if(string.split('/').length < 3) {
+// 			a.year  = string.split('-')[2];
+// 			a.month = string.split('-')[1];
+// 			a.date  = string.split('-')[0];
+// 			return Date.parse(new Date(a.year, a.month, a.date)) === Date.parse(new Date(b.year, b.month, b.date));
+// 		} else {
+// 			return false;
+// 		}
+// 	}
+// 	// if (/^(mm|MM)[\/\-](dd|DD)[\/\-]((y|Y){4})$/.test(format)) {
+// 	// }
+// 	// if (/^((y|Y){4})[\/\-](mm|MM)[\/\-](dd|DD)$/.test(format)) {
+// 	// }
+// };
+// // const cutPX = (x) => {
+// // 	return isNaN(x) ? x : x + 'px';
+// // };
+// const weekdaysLong = ['Hai', 'Ba', 'Tư', 'Năm', 'Sáu', 'Bảy', 'CN'];
+// const weekdaysShort = ['H', 'B', 'T', 'N', 'S', 'B', 'CN'];
+// const months = ['tháng 01', 'tháng 02', 'tháng 03', 'tháng 04', 'tháng 05', 'tháng 06', 'tháng 07', 'tháng 08', 'tháng 09', 'tháng 10', 'tháng 11', 'tháng 12'];
+// const validateAlert = 'Invalidate value';
+// const DatePicker = memo(forwardRef(({defaultValue, disabled, error, helperInvalid, helperValid, inputProps, inputRef, label, onChange, required, size, viewType, ...props}, ref) => {
+// 	const Id = randomString(7, { allowSymbol: false, allowNumber: false });
+// 	const IDs = {
+// 		inputTypeDate   : 'DCUI-input-type-date' + Id,
+// 		daysOfMonth     : 'DCUI-days-of-month' + Id,
+// 		daysOfThisMonth : 'DCUI-days-of-this-month' + Id,
+// 		daysOfPrevMonth : 'DCUI-days-of-prev-month' + Id,
+// 		daysOfNextMonth : 'DCUI-days-of-next-month' + Id,
+// 	};
+// 	if (!ref) {
+// 		ref = useRef(null);
+// 	}
+// 	if (!inputRef) {
+// 		inputRef = useRef(null);
+// 	}
+// 	const allDaysOfMonthRef = useRef(null);
+// 	const calendarRef		= useRef(null);
+// 	const headerRef		    = useRef(null);
+// 	const headerTitleRef    = useRef(null);
+// 	const helperRef		    = useRef(null);
+// 	const inputContainerRef = useRef(null);
+// 	const nowDate 			= !isNaN(Date.parse(defaultValue)) ? new Date(defaultValue) : new Date();
+// 	useOnClickOutside(inputContainerRef, () => onClickOutside());
+// 	const styles = {
+// 		container: css`
+// 			* {
+// 				box-sizing: border-box;
+// 				font-family: ${fontFamily};
+// 			}
+// 			border-radius: 4px;
+// 			box-sizing: border-box;
+// 			display: block;
+// 			font-family: sans-serif;
+// 			position: relative;
+// 			width: 100%;
+// 		`,
+// 		helper: css`
+// 			position: relative;
+// 			text-align: center;
+// 			.helper-text {
+// 				position: absolute;
+// 				right: 0;
+// 				top: 0;
+// 				transform: translateY(-100%);
+// 				visibility: hidden;
+// 			}
+// 			.valid {
+// 				color: ${success5};
+// 			}
+// 			.invalid {
+// 				color: ${danger5};
+// 			}
+// 		`,
+// 		label: css`
+// 			color: ${disabled ? dark4 : dark8};
+// 			display: block;
+// 			font-size: 12px;
+// 			font-weight: 700;
+// 			margin-bottom: 4px;
+// 			padding: 0;
+// 			transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
+// 			user-select: ${disabled ? 'none' : 'initial'};
+// 		`,
+// 		require: css`
+// 			color: ${danger5};
+// 			font-size: 12px;
+// 			font-weight: bold;
+// 		`,
+// 		input: {
+// 			container: {
+// 				outlined: css`
+// 					background-color: ${white};
+// 					border-radius: 4px;
+// 					box-sizing: border-box;
+// 					cursor: text;
+// 					display: flex;
+// 					flex-direction: column;
+// 					height: 40px;
+// 					max-height: 40px;
+// 					pointer-events: ${disabled ? 'none' : 'initial'};
+// 					position: relative;
+// 					transition: width 0.2s linear;
+// 					width: 100%;
+// 					.svg {
+// 						color: ${dark6};
+// 						cursor: ${disabled ? 'initial' : 'pointer'};
+// 						font-size: 20px;
+// 						position: absolute;
+// 						right: 20px;
+// 						top: 50%;
+// 						transform: translateY(-50%);
+// 						transition: color 0.3s ease, visibility 0.3s ease;
+// 					}
+// 					.svg-focus {
+// 						opacity: 0;
+// 						visibility: hidden;
+// 						:hover {
+// 							color: ${brand};
+// 						}
+// 					}
+// 					.svg-default {
+// 						height: 20px;
+// 						opacity: 1;
+// 					}
+// 					&:before {
+// 						border-radius: 4px;
+// 						border: 1px solid ${dark6};
+// 						bottom: 0;
+// 						content: '\\00a0';
+// 						left: 0;
+// 						pointer-events: none;
+// 						position: absolute;
+// 						right: 0;
+// 						top: 0;
+// 					}
+// 					&.focused {
+// 						box-shadow: none;
+// 						height: max-content;
+// 						&::before {
+// 							border: solid 2px ${info5};
+// 							bottom: -1px;
+// 							left: -1px;
+// 							right: -1px;
+// 							top: -1px;
+// 						}
+// 						input::placeholder {
+// 							color: ${brand};
+// 						}
+// 						.calendar {
+// 							opacity: 1;
+// 							transform: scale(1);
+// 						}
+// 						.svg-default {
+// 							opacity: 0;
+// 							visibility: hidden;
+// 						}
+// 						.svg-focus {
+// 							opacity: 1;
+// 							visibility: visible;
+// 						}
+// 					}
+// 					&:hover:not(.focused):not(.error-message) {
+// 						&:before {
+// 							border: solid 1px ${brand};
+// 						}
+// 						.svg {
+// 							color: ${brand};
+// 						}
+// 						input::placeholder {
+// 							color: ${brand};
+// 						}
+// 					}
+// 					&.error-message {
+// 						&:before {
+// 							border-color: ${danger5};
+// 						}
+// 						.svg-default {
+// 							color: ${danger5};
+// 						}
+// 					}
+// 				`,
+// 				underlined: css`
+// 					background-color: white;
+// 					cursor: text;
+// 					display: flex;
+// 					height: 40px;
+// 					pointer-events: ${disabled ? 'none' : 'initial'};
+// 					position: relative;
+// 					transition: all 0.2s ease-out;
+// 					width: 100%;
+// 					.svg {
+// 						cursor: ${disabled ? 'initial' : 'pointer'};
+// 						color: ${dark6};
+// 						height: 20px;
+// 						position: absolute;
+// 						right: 6px;
+// 						top: 50%;
+// 						transform: translateY(-50%);
+// 						transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
+// 					}
+// 					.svg-focus {
+// 						/* right: 4px; */
+// 						/* top: 0; */
+// 						visibility: hidden;
+// 						:hover {
+// 							color: ${brand};
+// 						}
+// 					}
+// 					.svg-default {
+// 						/* right: 4px; */
+// 						/* top: 0; */
+// 					}
+// 					&:after {
+// 						border-bottom: 2px solid ${info5};
+// 						bottom: 0;
+// 						content: '';
+// 						left: 0;
+// 						pointer-events: none;
+// 						position: absolute;
+// 						right: 0;
+// 						top: 0;
+// 						transform: scaleX(0);
+// 						transform-origin: left;
+// 						transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+// 					}
+// 					&:before {
+// 						border-bottom: solid 1px ${dark6};
+// 						bottom: 0;
+// 						content: '\\00a0';
+// 						left: 0;
+// 						position: absolute;
+// 						pointer-events: none;
+// 						right: 0;
+// 						top: 0;
+// 						transition: border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+// 					}
+// 					&.focused {
+// 						transition: width 0.3s ease-in-out;
+// 						&:after {
+// 							transform: scaleX(1);
+// 						}
+// 						input::placeholder {
+// 							color: ${brand};
+// 						}
+// 						.calendar {
+// 							opacity: 1;
+// 							display: flex;
+// 							transform: scaleY(1);
+// 						}
+// 						.svg-default {
+// 							visibility: hidden;
+// 						}
+// 						.svg-focus {
+// 							visibility: visible;
+// 						}
+// 					}
+// 					&:hover:not(.focused):not(.error-message) {
+// 						&:before {
+// 							border-bottom: solid 1px ${brand};
+// 						}
+// 						.svg {
+// 							color: ${brand};
+// 						}
+// 						input::placeholder {
+// 							color: ${brand};
+// 						}
+// 					}
+// 					&.error-message {
+// 						&:before {
+// 							border-color: ${danger5};
+// 						}
+// 						&:after {
+// 							border-color: ${danger5};
+// 						}
+// 						.svg-default {
+// 							color: ${danger5};
+// 						}
+// 					}
+// 				`,
+// 			},
+// 			input: {
+// 				outlined: css`
+// 					background-color: ${white};
+// 					border: 0;
+// 					font-size: 16px;
+// 					height: 40px;
+// 					margin: auto 0 auto 16px;
+// 					outline: none;
+// 					padding: 0;
+// 					&::placeholder {
+// 						color: ${dark6};
+// 						letter-spacing: 0.0675em;
+// 						transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
+// 					}
+// 					&:disabled {
+// 						pointer-events: none;
+// 						&::placeholder {
+// 							color: #151a30;
+// 							user-select: none;
+// 						}
+// 						.svg {
+// 							color: ${dark4};
+// 						}
+// 						&.input-container:before {
+// 							border: 1px solid ${dark4};
+// 						}
+// 					}
+// 				`,
+// 				underlined: css`
+// 					background-color: ${white};
+// 					border: none;
+// 					font-size: 16px;
+// 					height: 40px;
+// 					line-height: 20px;
+// 					margin: auto 0;
+// 					outline: none;
+// 					padding: 0;
+// 					width: 100%;
+// 					&::placeholder {
+// 						color: ${dark6};
+// 						letter-spacing: 0.0675em;
+// 						transition: color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0ms;
+// 					}
+// 					&:disabled {
+// 						pointer-events: none;
+// 						&::placeholder {
+// 							color: #151a30;
+// 							user-select: none;
+// 						}
+// 						~ .svg {
+// 							color: ${dark4};
+// 						}
+// 						~ .input-container:before {
+// 							border-bottom: 1px solid ${dark4};
+// 						}
+// 					}
+// 				`,
+// 			},
+// 		},
+// 		error: css`
+// 			color: ${danger5};
+// 			font-size: 12px;
+// 			position: absolute;
+// 			bottom: ${viewType === 'box' ? -18 : -24 }px;
+// 			font-weight: 400;
+// 			line-height: 12px;
+// 		`,
+// 		calendar: css`
+// 			align-items: center;
+// 			background-color: ${white};
+// 			border-radius: 4px;
+// 			box-shadow: 0px 2px 14px 4px rgba(0, 0, 0, 0.1);
+// 			box-sizing: border-box;
+// 			flex-direction: column;
+// 			font-size: 12px;
+// 			height: auto;
+// 			opacity: 0;
+// 			padding: 16px 10px;
+// 			position: fixed;
+// 			transform-origin: center center;
+// 			transform: scaleY(0);
+// 			transition: transform 0.2s linear, opacity 0.2s linear;
+// 			width: ${size === 'medium' ? 350 : 245}px;
+// 			z-index: 9003;
+// 		`,
+// 		header: css`
+// 			align-items: center;
+// 			display: flex;
+// 			height: 24px;
+// 			justify-content: center;
+// 			width: 100%;
+// 			.calender-header {
+// 				color: ${brand};
+// 				cursor: initial;
+// 				font-size: 16px;
+// 				font-weight: 700;
+// 				margin: 0;
+// 				user-select: none;
+// 				width: 60%;
+// 				word-break: keep-all; 
+// 			}
+// 		`,
+// 		button: css`
+// 			background-color: transparent;
+// 			border-radius: 50%;
+// 			border: 0;
+// 			box-sizing: border-box;
+// 			cursor: pointer;
+// 			display: flex;
+// 			justify-content: center;
+// 			margin: 0;
+// 			width: 10%;
+// 			&:focus {
+// 				outline: none;
+// 				path {
+// 					fill: ${brand};
+// 				}
+// 			}
+// 			&:hover:not(:focus) {
+// 				path {
+// 					fill: ${info5};
+// 				}
+// 			}
+// 		`,
+// 		days: css`
+// 			margin: 0;
+// 			margin-top: ${size === 'medium' ? 14 : 8}px;
+// 			padding: 0;
+// 			table-layout: fixed;
+// 			width: 100%;
+// 			th {
+// 				color: ${dark8};
+// 				font-weight: 500;
+// 				height: 20px;
+// 				line-height: 20px;
+// 				margin: 0;
+// 				padding: 0;
+// 				text-align: center !important;
+// 				user-select: none;
+// 			}
+// 			td {
+// 				color: ${dark};
+// 				font-size: 12px;
+// 				font-weight: 500;
+// 				line-height: 16px;
+// 			}
+// 			.days-of-month {
+// 				color: ${dark};
+// 				cursor: pointer;
+// 				line-height: ${size === 'medium' ? 26 : 22}px;
+// 				padding: 4px;
+// 				position: relative;
+// 				text-align: center;
+// 				user-select: none;
+// 				width: calc(100% / 7);
+// 				::before {
+// 					background-color: ${white};
+// 					border-radius: 50%;
+// 					content: '';
+// 					height: ${size === 'medium' ? 26 : 24}px;
+// 					left: 50%;
+// 					position: absolute;
+// 					top: 50%;
+// 					transform: translate(-50%,-50%);
+// 					transition: background-color 0.2s ease-in, color 0.2s ease-in;
+// 					width: ${size === 'medium' ? 26 : 24}px;
+// 					z-index: -1;
+// 				}
+// 				&:hover:not(.today):not(.day-active):not(.prev-date):not(.next-date) {
+// 					::before{
+// 						background-color: ${blue13};
+// 					}
+// 				}
+// 			}
+// 			.prev-date,
+// 			.next-date {
+// 				opacity: 0.4;
+// 				cursor: default;
+// 			}
+// 			.today:not(.day-active) {
+// 				font-weight: 700;
+// 				:hover {
+// 					::before {
+// 						background-color: ${blue13};
+// 					}
+// 				}
+// 				::after {
+// 					border-bottom: 2px solid ${dark};
+// 					content      : '';
+// 					left         : 16px;
+// 					bottom       : 8px;
+// 					position     : absolute;
+// 					right        : 16px;
+// 				}
+// 			}
+// 			.day-active {
+// 				::before {
+// 					background-color: ${blue4};
+// 					font-weight: bold;
+// 				}
+// 			}
+// 			td:nth-of-type(7n - 1) {
+// 				color: ${info8};
+// 			}
+// 			td:nth-of-type(7n) {
+// 				color: ${danger8};
+// 			}
+// 			th:nth-of-type(6) {
+// 				color: ${info8};
+// 			}
+// 			th:nth-of-type(7) {
+// 				color: ${danger8};
+// 			}
+// 		`,
+// 	};
+// 	const getScrollParent = element => {
+//         const style = getComputedStyle (element);
+//         let scrollParent = window;
+//         if (style.position !== 'fixed') {
+//             let parent = element.parentElement;
+//             while (parent) {
+//                 const parentStyle = getComputedStyle (parent);
+//                 if (/(auto|scroll)/.test ( parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
+//                     scrollParent = parent;
+//                     parent = undefined;
+//                 } else {
+//                     parent = parent.parentElement;
+//                 }
+//             }
+//         }
+//         return scrollParent;
+//     };
+// 	const setPosition = () => {
+// 		const el = calendarRef.current;
+// 		const target = ref.current;
+// 		if (!el || !target) {
+// 			return;
+// 		}
+// 		const { bottom, left, top } = target.getBoundingClientRect();
+// 		if (top > window.innerHeight) {
+// 			el.style.top             = null;
+//             el.style.bottom          = '5px';
+//             el.style.transformOrigin = 'bottom';
+// 		} else if (bottom < 0) {
+// 			el.style.top             = '5px';
+//             el.style.bottom          = null;
+// 			el.style.transformOrigin = 'top';
+//         } else {
+//             if (window.innerHeight - bottom < el.offsetHeight) {
+//                 if (top < el.offsetHeight) {
+//                     el.style.top             = (window.innerHeight - el.offsetHeight) / 2 + 'px';
+//                     el.style.bottom          = null;
+//                     el.style.transformOrigin = 'center center';
+//                 } else {
+//                     el.style.top 			 = top - el.offsetHeight + 'px';
+//                     el.style.bottom 		 = null;
+//                     el.style.transformOrigin = 'bottom';
+//                 }
+//             } else {
+//                 el.style.bottom 		 = null;
+//                 el.style.top 			 = bottom + 5 + 'px';
+//                 el.style.transformOrigin = 'top';
+//             }
+//         }
+// 		if (left < 0) {
+// 			el.style.left = '5px';
+// 		} else if (left + el.offsetWidth > window.innerWidth) {
+//             el.style.left = (window.innerWidth - el.offsetWidth) / 2 + 'px';
+//         } else {
+//             el.style.left = left + 'px';
+//         }
+// 	};
+// 	const escKeyFunc = (ev) => {
+// 		//call the useOnClickOutside when press esc key
+// 		if (ev.keyCode === 27) {
+// 			onClickOutside();
+// 			inputContainerRef.current.childNodes[0].blur();
+// 		}
+// 	};
+// 	const onInputBlur = () => {};
+// 	const onInputFocus = () => {
+// 		inputContainerRef.current.classList.add('focused');
+// 		// document.body.style.overflow = 'hidden';
+// 		setPosition();
+// 	};
+// 	const onClickOutside = () => {
+// 		inputContainerRef.current.classList.remove('focused');
+// 		// document.body.style.overflow = null;
+// 	};
+// 	const changeDayOfWeek = (date) => {
+// 		// get day number from 0 (monday) to 6 (sunday)
+// 		let day = date.getDay();
+// 		if (day === 0) day = 7; // make Sunday (0) the last day
+// 		return day - 1;
+// 	};
+// 	const renderCalendar = (nowDate) => {
+// 		const monthDays       = allDaysOfMonthRef.current;
+// 		const header          = headerTitleRef.current;
+// 		const input           = inputRef.current;
+// 		const newDate         = new Date(nowDate);
+// 		const date            = new Date(newDate.setDate(1));
+// 		const lastTime        = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+// 		const lastDay         = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+// 		const prevTime        = new Date(date.getFullYear(), date.getMonth(), 0);
+// 		const prevLastDay     = prevTime.getDate()
+// 		const lastDayIndex    = changeDayOfWeek(lastTime);
+// 		const firstDayIndex   = changeDayOfWeek(date);
+// 		const daysOfNextMonth = 7 - lastDayIndex;
+// 		let days = [];
+// 		let x = firstDayIndex;
+// 		for (x; x > 0; x--) {
+// 			if (prevTime.getFullYear() === +input.value.split('/')[2] && prevTime.getMonth() + 1 === +input.value.split('/')[1] && prevLastDay - x + 1 === +input.value.split('/')[0]) {
+// 				days.push(`<td id='${IDs.daysOfPrevMonth + '-' + (prevLastDay - x + 1)}' class='days-of-month day-active prev-date'>${prevLastDay - x + 1}</td>`);
+// 			}
+// 			else {
+// 				days.push(`<td id='${IDs.daysOfPrevMonth + '-' + (prevLastDay - x + 1)}' class='days-of-month prev-date'>${prevLastDay - x + 1}</td>`);
+// 			}
+// 		}
+// 		for (let i = 1; i <= lastDay; i++) {
+// 			if (i === new Date().getDate() && date.getMonth() === new Date().getMonth() && date.getFullYear() === new Date().getFullYear()) {
+// 				days.push(`<td id='${IDs.daysOfThisMonth + '-' + i}' class='days-of-month this-month today'><span>${i}</span></td>`);
+// 			} else {
+// 				days.push(`<td id='${IDs.daysOfThisMonth + '-' + i}' class='days-of-month this-month'><span>${i}</span></td>`);
+// 			}
+// 		}
+// 		for (let j = 1; j <= daysOfNextMonth - 1; j++) {
+// 			if (checkActiveDay('dd/mm/yyyy', new Date(lastTime.getFullYear(), lastTime.getMonth(), lastTime.getDate() + j), input.value)) {
+// 				days.push(`<td id='${IDs.daysOfNextMonth + '-' + j}' class='days-of-month day-active next-date'>${j}</td>`);
+// 			} else {
+// 				days.push(`<td id='${IDs.daysOfNextMonth + '-' + j}' class='days-of-month next-date'>${j}</td>`);
+// 			}
+// 		}
+// 		let table = '';
+// 		table += '<tr>';
+// 		for (let i = 0; i < weekdaysLong.length; i++){
+// 			table += `<th id="${IDs.calendarWeekday + '-' + i}" className="weekday">
+// 						${size === 'small' ? weekdaysShort[i] : weekdaysLong[i]}
+// 					</th>`;
+// 		};
+// 		table += '</tr>';
+// 		for (let r = 0; r <= 5; r++) {
+// 			table += '<tr>';
+// 			for (let d = 0; d <= 6; d++) {
+// 				if (days[7 * r + d]) {
+// 					table += days[7 * r + d];
+// 				};
+// 			}
+// 			table += '</tr>';
+// 		}
+// 		monthDays.innerHTML = table;
+// 		header.innerHTML = size === 'medium' ? `${months[date.getMonth()]} năm ${date.getFullYear()}` : addZeroToText(date.getMonth() + 1) + '/' + date.getFullYear();
+// 		monthDays.querySelectorAll('.days-of-month.this-month').forEach((dc) => {
+// 				dc.addEventListener('click', (e) => setActiveDay(e, date));
+// 			});
+// 	};
+// 	const parseStringToDateTime = (text) => {
+// 		if (text.split('/').length > 1) {
+// 			return new Date(text.split('/')[1] + ' ' + text.split('/')[0] + ' ' + text.split('/')[2]);
+// 		}
+// 		if (text.split('-').length > 1) {
+// 			return new Date(text.split('-')[1] + ' ' + text.split('-')[0] + ' ' + text.split('-')[2]);
+// 		}
+// 	};
+// 	const onChangeValue = (e) => {
+// 		const valid   = helperRef.current.childNodes[0];
+// 		const invalid = helperRef.current.childNodes[1];
+// 		const text    = e.target.value;
+// 		const time 	  = parseStringToDateTime(text);
+// 		if (text.length >= 8) {
+// 			if (onValidateDate(text)) {
+// 				const date 				 = text.split(/[\/|-]/);
+// 				e.value 				 = date[2] + '-' + date[1] + '-' + date[0];
+// 				invalid.style.visibility = 'hidden';
+// 				valid.style.visibility 	 = 'visible';
+// 				onChange && onChange(e);
+// 				setTimeout(() => { valid.style.visibility = 'hidden';}, 3000);
+// 				nowDate.setTime(time);
+// 				renderCalendar(nowDate);
+// 				getElById(`${IDs.daysOfThisMonth + '-' + time.getDate()}`).classList.add('day-active');
+// 			} else {
+// 				invalid.style.visibility = 'visible';
+// 				valid.style.visibility   = 'hidden';
+// 				onChange && onChange(e.target);
+// 			}
+// 		} else {
+// 			invalid.style.visibility = 'visible';
+// 			valid.style.visibility   = 'hidden';
+// 			onChange && onChange(e.target);
+// 		}
+// 	};
+// 	const onValidateDate = (inputText) => {
+// 		const dateformat = /^(0?[1-9]|[12][0-9]|3[01])\/(0?[1-9]|1[012])\/\d{4}$/;
+// 		// Match the date format through regular expression
+// 		if (typeof inputText === 'string' && inputText.match(dateformat)) {
+// 			//Test which separator is used '/' or '-'
+// 			let opera1 = inputText.split('/');
+// 			let opera2 = inputText.split('-');
+// 			// Extract the string into month, date and year
+// 			let pDate;
+// 			if (opera1.length > 1) {
+// 				pDate = inputText.split('/');
+// 			} else if (opera2.length > 1) {
+// 				pDate = inputText.split('-');
+// 			}
+// 			let dd = parseInt(pDate[0]);
+// 			let mm = parseInt(pDate[1]);
+// 			let yy = parseInt(pDate[2]);
+// 			// Create list of days of a month [assume there is no leap year by default]
+// 			const ListOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+// 			if (mm === 1 || mm > 2) {
+// 				if (dd > ListOfDays[mm - 1]) {
+// 					return false;
+// 				}
+// 			}
+// 			if (mm === 2) {
+// 				let lYear = false;
+// 				if ((!(yy % 4) && yy % 100) || !(yy % 400)) {
+// 					lYear = true;
+// 				}
+// 				if (lYear === false && dd >= 29) {
+// 					return false;
+// 				}
+// 				if (lYear === true && dd > 29) {
+// 					return false;
+// 				}
+// 			}
+// 			if (yy < 1900) {
+// 				return false;
+// 			}
+// 		} else {
+// 			return false;
+// 		}
+// 		return true;
+// 	};
+// 	const checkInputValue = (e) => {
+// 		if (!disabled) {
+// 			if (!/[0-9\\/]/.test(e.key)) {
+// 				e.preventDefault();
+// 			}
+// 		} else {
+// 			e.preventDefault();
+// 		}
+// 	};
+// 	const setValueInput = (e, d) => {
+// 	//set the input's value with format dd/mm/yyyy (01/02/xxxx)
+// 		helperRef.current.childNodes[0].style.visibility = 'hidden';
+// 		helperRef.current.childNodes[1].style.visibility = 'hidden';
+// 		const input = inputRef.current;
+// 		input.value = `${addZeroToText(e)}/${addZeroToText(d.getMonth() + 1)}/${d.getFullYear()}`;
+// 		let sentValue = { value: null };
+// 		sentValue.value = `${d.getFullYear()}-${addZeroToText(d.getMonth() + 1)}-${addZeroToText(e)}`;
+// 		onChange && onChange(sentValue);
+// 	};
+// 	const setActiveDay = (e, date) => {
+// 	//find the active day then remove this, add the new class active for the new day and set value for input
+// 		const find = allDaysOfMonthRef.current.querySelector('.day-active');
+// 		if (find) {
+// 			find.classList.remove('day-active');
+// 		}
+// 		e.target.classList.add('day-active');
+// 		setValueInput(e.target.textContent, date);
+// 	};
+// 	const setPrevMonth = () => {
+// 	//set month to the the previous month (month - 1) and re-render the calendar
+// 		const input = inputRef.current;
+// 		const date = parseStringToDateTime(input.value);
+// 		nowDate.setMonth(nowDate.getMonth() - 1);
+// 		renderCalendar(nowDate);
+// 		if (date && date.getFullYear() === nowDate.getFullYear() && date.getMonth() === nowDate.getMonth()) {
+// 			getElById(`${IDs.daysOfThisMonth + '-' + date.getDate()}`).classList.add('day-active');
+// 		}
+// 	};
+// 	const setPrevYear = () => {
+// 	//set year to the the previous year (year - 1) and re-render the calendar
+// 		const input = inputRef.current;
+// 		const date = parseStringToDateTime(input.value);
+// 		nowDate.setFullYear(nowDate.getFullYear() - 1);
+// 		renderCalendar(nowDate);
+// 		if (date && date.getFullYear() === nowDate.getFullYear() && date.getMonth() === nowDate.getMonth()) {
+// 			getElById(`${IDs.daysOfThisMonth + '-' + date.getDate()}`).classList.add('day-active');
+// 		}
+// 	};
+// 	const setNextMonth = () => {
+// 	//set month to the the next month (month + 1) and re-render the calendar
+// 		const input = inputRef.current;
+// 		const date = parseStringToDateTime(input.value);
+// 		nowDate.setMonth(nowDate.getMonth() + 1);
+// 		renderCalendar(nowDate);
+// 		if (date && date.getFullYear() === nowDate.getFullYear() && date.getMonth() === nowDate.getMonth()) {
+// 			getElById(`${IDs.daysOfThisMonth + '-' + date.getDate()}`).classList.add('day-active');
+// 		}
+// 	};
+// 	const setNextYear = () => {
+// 	//set year to the next year (year + 1) and re-render the calendar
+// 		const input = inputRef.current;
+// 		const date = parseStringToDateTime(input.value);
+// 		nowDate.setFullYear(nowDate.getFullYear() + 1);
+// 		renderCalendar(nowDate);
+// 		if (date && date.getFullYear() === nowDate.getFullYear() && date.getMonth() === nowDate.getMonth()) {
+// 			getElById(`${IDs.daysOfThisMonth + '-' + date.getDate()}`).classList.add('day-active');
+// 		}
+// 	};
+// 	const checkDefaultValue = (defaultTime, inputEl) => {
+// 		if (!isNaN(Date.parse(defaultValue))) {
+// 			let date  = addZeroToText(defaultTime.getDate());
+// 			let month = addZeroToText(defaultTime.getMonth() + 1);
+// 			let year  = defaultTime.getFullYear();
+// 			let time  = `${date}/${month}/${year}`;
+// 			inputEl.value = onValidateDate(defaultValue) ? defaultValue : (defaultTime && defaultTime.getDate()) ? time : validateAlert;
+// 			getElById(`${IDs.daysOfThisMonth + '-' + defaultTime.getDate()}`).classList.add('day-active');
+// 		}
+// 	};
+// 	useEffect(() => {
+// 		const input      = inputRef.current;
+// 		const container  = ref.current;
+// 		const scrollArea = getScrollParent(container);
+// 		setPosition();
+// 		renderCalendar(nowDate);
+// 		checkDefaultValue(nowDate, input);
+// 		scrollArea.addEventListener('scroll', setPosition);
+// 		window.addEventListener('resize', setPosition);
+// 		document.addEventListener('keydown', e => escKeyFunc(e));
+// 		return () => {
+// 			scrollArea.removeEventListener('scroll', setPosition);
+// 			window.removeEventListener('resize', setPosition);
+// 			document.removeEventListener('keydown', e => escKeyFunc(e));
+// 		}
+// 	}, []);
+// 	useEffect(() => {
+// 		if (error && error !== '') {
+// 			inputContainerRef.current.classList.add('error-message');
+// 		} else {
+// 			inputContainerRef.current.classList.remove('error-message')
+// 		}
+// 	},[error]);
+// 	useEffect(() => {
+// 		renderCalendar(nowDate)
+// 	}, [size]);
+// 	const RequireMemo = useMemo(() => ( required && <span css={styles.require}>*</span> ), [error, required]);
+// 	const LabelMemo = useMemo(() => (
+// 		<label css={styles.label} disabled={disabled}>
+// 			{label}{RequireMemo}
+// 		</label>
+// 	), [disabled, error, required, label]);
+// 	const HelperMemo = useMemo(() => (
+// 		<div css={styles.helper} ref={helperRef}>
+// 			<span className={'helper-text valid'}>
+// 				{helperValid}
+// 			</span>
+// 			<span className={'helper-text invalid'}>
+// 				{helperInvalid}
+// 			</span>
+// 		</div>
+// 	), [helperValid, helperInvalid]);
+// 	const InputMemo = useMemo(() => (
+// 		<input
+// 			{...inputProps}
+// 			css={styles.input.input[viewType]}
+// 			className={'input-type-date'}
+// 			disabled={disabled}
+// 			id={IDs.inputTypeDate}
+// 			placeholder={'dd/mm/yyyy'}
+// 			onBlur={onInputBlur}
+// 			onChange={(e) => onChangeValue(e)}
+// 			onFocus={(e) => onInputFocus(e)}
+// 			onKeyPress={(e) => checkInputValue(e)}
+// 			ref={inputRef}
+// 		/>
+// 	), [defaultValue, disabled, viewType]);
+// 	const IconMemo = useMemo(() => (
+// 		<React.Fragment>
+// 			<span className={'svg svg-default'} onClick={(e) => onInputFocus(e)}>
+// 				<CalendarIcon color={'currentColor'} />
+// 			</span>
+// 			<span className={'svg svg-focus'} onClick={(e) => onClickOutside(e)}>
+// 				<CancelIcon color={'currentColor'} width={'15'} height={'15'} />
+// 			</span>
+// 		</React.Fragment>
+// 	), [disabled]);
+// 	const HeaderMemo = useMemo(() => (
+// 		// <CalendarNavigator ref={headerRef} contentRef={headerTitleRef} onArrowDBLeftClick={setPrevYear}
+// 		// 	onArrowDBRightClick={setNextYear} onArrowLeftClick={setPrevMonth} onArrowRightClick={setNextMonth} />
+// 		<div></div>
+// 	), [size, viewType]);
+// 	const DaysMemo = useMemo(() => (
+// 		<table className={`${viewType}-days`} css={styles.days} ref={allDaysOfMonthRef} />
+// 	), [defaultValue, size, viewType]);
+// 	const CalendarMemo = useMemo(() => (
+// 		<div className={'calendar'} css={styles.calendar} ref={calendarRef}>
+// 			{HeaderMemo}
+// 			{DaysMemo}
+// 		</div>
+// 	), [defaultValue, size, viewType]);
+// 	const MainMemo = useMemo(() => (
+// 		<div className={'input-container'} css={styles.input.container[viewType]} disabled={disabled} ref={inputContainerRef}>
+// 			{InputMemo}
+// 			{IconMemo}
+// 			{error && <span css={styles.error}>{error}</span>}
+// 			{CalendarMemo}
+// 		</div>
+// 	), [defaultValue, disabled, error, size, viewType]);
+// 	return (
+// 		<div {...props} css={styles.container} ref={ref}>
+// 			{LabelMemo}
+// 			{HelperMemo}
+// 			{MainMemo}
+// 		</div>
+// 	);
+// }));
+// DatePicker.defaultProps = {
+// 	defaultValue  : '',
+// 	disabled      : false,
+// 	error		  : '',
+// 	helperInvalid : 'Value is invalid',
+// 	helperValid   : 'Value is valid',
+// 	required	  : false,
+// 	size   		  : 'medium',
+// 	viewType      : 'underlined',
+// }
+// DatePicker.propTypes = {
+//     /** the default value of the calendar, it exist when render */
+// 	defaultValue : PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+//     /** if 'true' the form control will be disabled */
+// 	disabled	 : PropTypes.bool,
+//     /** error of the form control */
+// 	error		 : PropTypes.string,	
+//     /** helper text when the value typed wrong */
+// 	helperInvalid: PropTypes.string,
+//     /** helper text when the value typed really right */
+// 	helperValid  : PropTypes.string,
+// 	/** inputProps is properties of the input */
+// 	inputProps	 : PropTypes.object,
+//     /** label of the form control */
+// 	label        : PropTypes.string,
+// 	/** a callback function when value input change */
+// 	onChange	 : PropTypes.func,
+// 	/** required state of the form control */
+// 	required	 : PropTypes.bool,
+//     /** size of the calendar */
+// 	size  		 : PropTypes.oneOf(['medium', 'small']),
+//     /** view type of the form control */
+// 	viewType     : PropTypes.oneOf(['outlined', 'underlined']),
+// };
+// export default DatePicker;