lodash#isDate TypeScript Examples

isScheduledTaskBase = (value: any): value is ScheduledTaskBase => {
	try {
		const ss = <ScheduledTaskBase>value;
		return (
			isNumericID(ss.id) &&
			isUUID(ss.globalID) &&
			isNumericID(ss.userID) &&
			ss.groupIDs.every(isNumericID) &&
			isString(ss.name) &&
			isString(ss.description) &&
			ss.labels.every(isString) &&
			isBoolean(ss.oneShot) &&
			isBoolean(ss.isDisabled) &&
			isDate(ss.lastUpdateDate) &&
			isDate(ss.lastRunDate) &&
			isNull(ss.lastSearchIDs) &&
			isNumber(ss.lastRunDuration) &&
			(isString(ss.lastError) || isNull(ss.lastError)) &&
			isString(ss.schedule) &&
			(isString(ss.timezone) || isNull(ss.timezone))
		);
	} catch {
		return false;
	}
}

useDateTimeInputState = (props: DateTimeInputProps): [DateTimeInputState, React.Dispatch<AllActions>] => {
  const {
    value: valueProp, format, min, max,
  } = props;

  // если сегодняшняя дата за пределами min/max - открываем календарь с датой min или max
  const todayIsMin = (min && new Date() < min) ? min : null;

  const todayIsMax = (max && new Date() > max) ? max : null;
  // сегодня, время берется равно 00:00
  const today = new Date();

  const stringValue = isDate(valueProp) || valueProp === null ? '' : valueProp;

  const initialState = {
    date: null,
    value: '',
    isValid: true,
    isFocused: false,
    isOpen: false,
    viewDate: todayIsMin
    || todayIsMax
    || stringToDate(stringValue, format)
    || today,
    viewType: VIEW_TYPES.DATES,
  };
  const [state, dispatch] = React.useReducer(stateReducer, initialState);

  return [state, dispatch];
}

getValue = ({
  valueProp,
  valueState,
  dateState,
  format = 'dd.MM.yyyy',
}: {
  valueProp?: string | Date | null,
  valueState: string,
  dateState: Date | null,
  format?: string,
}): string => {
  if (valueProp === undefined) return dateState ? formatDateTime(dateState, format) : valueState;

  if (isDate(valueProp)) return formatDateTime(valueProp, format);

  if (isString(valueProp)) return valueProp;

  return '';
}

handleMinMaxErros = ({
  type,
  value,
  min,
  max,
  format,
}: {
  type: DateTimeInputProps['type'],
  value: DateTimeInputProps['value'],
  min: DateTimeInputProps['min'],
  max: DateTimeInputProps['max'],
  format: DateTimeInputProps['format'],
}): void => {
  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isDate(value) && !isNil(min) && isDateLess(value, min)) {
    console.error(`DateTimeInput: you passed the value "${value.toLocaleString()}" that is less than min! This is probably a mistake!`);
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isDate(value) && !isNil(max) && isDateGreater(value, max)) {
    console.error(`DateTimeInput: you passed the value "${value.toLocaleString()}" that is greater than max! This is probably a mistake!`);
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isString(value) && !isNil(min)) {
    const parsedValue = stringToDate(value, format);

    if (parsedValue && isDateLess(parsedValue, min)) {
      console.error(`DateTimeInput: you passed the value "${value.toLocaleString()}" that is less than min! This is probably a mistake!`);
    }
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isString(value) && !isNil(max)) {
    const parsedValue = stringToDate(value, format);

    if (parsedValue && isDateGreater(parsedValue, max)) {
      console.error(`DateTimeInput: you passed the value "${value.toLocaleString()}" that is greater than max! This is probably a mistake!`);
    }
  }
}

handleValueErrors = (value: DateTimeInputProps['value'], format: DateTimeInputProps['format'] = 'dd.MM.yyyy'): never | void => {
  if (!isNil(value) && !isString(value) && !isDate(value)) {
    throw new Error('DateTimeInput: value prop must be a string or Date! '
     + `You passed: ${JSON.stringify(value)}`);
  }

  if (isString(value) && value.length > format.length) {
    throw new Error('DateTimeInput: value prop must fit format! '
     + `You passed: value ${JSON.stringify(value)}, format ${JSON.stringify(format)}`);
  }
}

isValidUser = (value: any): value is User => {
	try {
		const u = <User>value;
		return (
			isNumericID(u.id) &&
			u.groupIDs.every(isNumericID) &&
			isString(u.username) &&
			isString(u.name) &&
			isString(u.email) &&
			isValidUserRole(u.role) &&
			isBoolean(u.locked) &&
			(isString(u.searchGroupID) || isNull(u.searchGroupID)) &&
			(isDate(u.lastActivityDate) || isNull(u.lastActivityDate))
		);
	} catch {
		return false;
	}
}

isToken = (value: unknown): value is Token => {
	try {
		const t = <Token>value;
		return (
			isUUID(t.id) &&
			isID(t.userID) &&
			isString(t.name) &&
			(isString(t.description) || isNull(t.description)) &&
			isDate(t.createdAt) &&
			isArray(t.capabilities) &&
			t.capabilities.every(isTokenCapability) &&
			(isDate(t.expiresAt) || isNull(t.expiresAt))
		);
	} catch {
		return false;
	}
}

isTimeframe = (value: any): value is Timeframe => {
	try {
		const tf = <Timeframe>value;
		return (
			(isString(tf.durationString) || isNull(tf.durationString)) &&
			(isString(tf.timeframe) || isNull(tf.timeframe)) &&
			(isString(tf.timezone) || isNull(tf.timezone)) &&
			(isDate(tf.start) || isNull(tf.start)) &&
			(isDate(tf.end) || isNull(tf.end))
		);
	} catch {
		return false;
	}
}

isTemplate = (value: any): value is Template => {
	try {
		const t = <Template>value;
		return (
			isUUID(t.globalID) &&
			isUUID(t.id) &&
			isNumericID(t.userID) &&
			t.groupIDs.every(isNumericID) &&
			isString(t.name) &&
			(isString(t.description) || isNull(t.description)) &&
			t.labels.every(isString) &&
			isBoolean(t.isGlobal) &&
			isDate(t.lastUpdateDate) &&
			isString(t.query) &&
			t.variables.every(isTemplateVariable)
		);
	} catch {
		return false;
	}
}

isValidSearch = (value: any): value is Search => {
	try {
		const s = <Search>value;
		return (
			isNumericID(s.userID) &&
			(isUndefined(s.groupID) || isNumericID(s.groupID)) &&
			isString(s.effectiveQuery) &&
			isString(s.userQuery) &&
			isDate(s.launchDate)
		);
	} catch {
		return false;
	}
}

isResource = (value: any): value is Resource => {
	try {
		const r = <Resource>value;
		return (
			isUUID(r.id) &&
			isNumericID(r.userID) &&
			r.groupIDs.every(isNumericID) &&
			isString(r.name) &&
			isString(r.description) &&
			r.labels.every(isString) &&
			isBoolean(r.isGlobal) &&
			isDate(r.lastUpdateDate) &&
			isInteger(r.version) &&
			isString(r.hash) &&
			isInteger(r.size)
		);
	} catch {
		return false;
	}
}

isPlaybook = (value: any): value is Playbook => {
	try {
		const p = <Playbook>value;
		return (
			isUUID(p.id) &&
			isUUID(p.globalID) &&
			isNumericID(p.userID) &&
			p.groupIDs.every(isNumericID) &&
			isString(p.name) &&
			(isString(p.description) || isNull(p.description)) &&
			p.labels.every(isString) &&
			isBoolean(p.isGlobal) &&
			isDate(p.lastUpdateDate) &&
			isMarkdown(p.body) &&
			(isUUID(p.coverImageFileGlobalID) || isNull(p.coverImageFileGlobalID)) &&
			(isUUID(p.bannerImageFileGlobalID) || isNull(p.bannerImageFileGlobalID)) &&
			(isString(p.author.name) || isNull(p.author.name)) &&
			(isString(p.author.email) || isNull(p.author.email)) &&
			(isString(p.author.company) || isNull(p.author.company)) &&
			(isString(p.author.url) || isNull(p.author.url))
		);
	} catch {
		return false;
	}
}

isMacro = (value: any): value is Macro => {
	try {
		const m = <Macro>value;
		return (
			isNumericID(m.id) &&
			isNumericID(m.userID) &&
			m.groupIDs.every(isNumericID) &&
			isString(m.name) &&
			(isString(m.description) || isNull(m.description)) &&
			m.labels.every(isString) &&
			isString(m.expansion) &&
			isDate(m.lastUpdateDate)
		);
	} catch {
		return false;
	}
}

isRemoteKit = (v: any): v is RemoteKit => {
	try {
		const k = <RemoteKit>v;
		return (
			isUUID(k.customID) &&
			isUUID(k.globalID) &&
			isString(k.name) &&
			isString(k.description) &&
			k.labels.every(isString) &&
			isDate(k.creationDate) &&
			isVersion(k.version) &&
			isVersion(k.gravwellCompatibility.min) &&
			isVersion(k.gravwellCompatibility.max) &&
			isNumber(k.size) &&
			k.ingesters.every(isString) &&
			isBoolean(k.isSigned) &&
			isBoolean(k.requiresAdminPrivilege) &&
			k.assets.every(isKitAsset) &&
			k.dependencies.every(isKitDependency) &&
			k.items.every(isKitItem)
		);
	} catch {
		return false;
	}
}

isLocalKit = (v: any): v is LocalKit => {
	try {
		const k = <LocalKit>v;
		return (
			isID(k.customID) &&
			isUUID(k.globalID) &&
			isNumericID(k.userID) &&
			k.groupIDs.every(isNumericID) &&
			isString(k.name) &&
			isString(k.description) &&
			k.labels.every(isString) &&
			isDate(k.installationDate) &&
			isVersion(k.version) &&
			isVersion(k.gravwellCompatibility.min) &&
			isVersion(k.gravwellCompatibility.max) &&
			['installed', 'uploaded'].includes(k.status) &&
			isBoolean(k.isSigned) &&
			isBoolean(k.requiresAdminPrivilege) &&
			k.items.every(isKitItem) &&
			k.configMacros.every(
				s =>
					isString(s.macroName) &&
					isString(s.description) &&
					isString(s.defaultValue) &&
					(isString(s.value) || (isNull(s.value) && ['tag', 'string'].includes(s.type))),
			)
		);
	} catch {
		return false;
	}
}

isKitArchive = (v: any): v is KitArchive => {
	try {
		const k = <KitArchive>v;
		return (
			isString(k.id) &&
			isNumericID(k.userID) &&
			(isNull(k.buildDate) || isDate(k.buildDate)) &&
			isString(k.name) &&
			isString(k.description) &&
			isNumber(k.version) &&
			(isNull(k.minVersion) || isVersion(k.minVersion)) &&
			(isNull(k.maxVersion) || isVersion(k.maxVersion)) &&
			isString(k.readme) &&
			(isNil(k.icon) || isUUID(k.icon)) &&
			(isNil(k.cover) || isUUID(k.cover)) &&
			(isNil(k.banner) || isUUID(k.banner)) &&
			(isNil(k.actionables) || k.actionables.every(isUUID)) &&
			(isNil(k.dashboards) || k.dashboards.every(isNumber)) &&
			(isNil(k.extractors) || k.extractors.every(isUUID)) &&
			(isNil(k.files) || k.files.every(isUUID)) &&
			(isNil(k.macros) || k.macros.every(isNumber)) &&
			(isNil(k.playbooks) || k.playbooks.every(isUUID)) &&
			(isNil(k.savedQueries) || k.savedQueries.every(isUUID)) &&
			(isNil(k.resources) || k.resources.every(isUUID)) &&
			(isNil(k.scheduledSearches) || k.scheduledSearches.every(isUUID)) &&
			(isNil(k.templates) || k.templates.every(isUUID)) &&
			(isNil(k.configMacros) || k.configMacros.every(isConfigMacro))
		);
	} catch (e) {
		console.error(e);
		return false;
	}
}

isShard = (value: unknown): value is Shard => {
	try {
		const s = <Shard>value;

		return (
			isString(s.name) &&
			isDate(s.start) &&
			isDate(s.end) &&
			isNumber(s.entries) &&
			isNumber(s.size) &&
			isBoolean(s.cold) &&
			(isUndefined(s.remoteState) ||
				(isUUID(s.remoteState.uuid) && isNumber(s.remoteState.entries) && isNumber(s.remoteState.size)))
		);
	} catch {
		return false;
	}
}

isDashboard = (value: unknown): value is Dashboard => {
	try {
		const d = <Dashboard>value;
		return (
			isNumericID(d.id) &&
			isUUID(d.globalID) &&
			isNumericID(d.userID) &&
			isArray(d.groupIDs) &&
			d.groupIDs.every(isNumericID) &&
			isString(d.name) &&
			(isNull(d.description) || isString(d.description)) &&
			isArray(d.labels) &&
			d.labels.every(isString) &&
			isDate(d.creationDate) &&
			isDate(d.lastUpdateDate) &&
			isDate(d.lastMainUpdateDate) &&
			isVersion(d.version) &&
			isBoolean(d.updateOnZoom) &&
			isDashboardLiveUpdate(d.liveUpdate) &&
			isTimeframe(d.timeframe) &&
			isArray(d.searches) &&
			d.searches.every(isDashboardSearch) &&
			isArray(d.tiles) &&
			d.tiles.every(isDashboardTile) &&
			(isNull(d.gridOptions.gutter) || isNumber(d.gridOptions.gutter)) &&
			(isNull(d.gridOptions.margin) || isNumber(d.gridOptions.margin))
		);
	} catch {
		return false;
	}
}

isActionable = (value: any): value is Actionable => {
	try {
		const a = <Actionable>value;
		return (
			isUUID(a.globalID) &&
			isUUID(a.id) &&
			isNumericID(a.userID) &&
			a.groupIDs.every(isNumericID) &&
			isString(a.name) &&
			(isString(a.description) || isNull(a.description)) &&
			(isString(a.menuLabel) || isNull(a.menuLabel)) &&
			a.labels.every(isString) &&
			isBoolean(a.isGlobal) &&
			isBoolean(a.isDisabled) &&
			isDate(a.lastUpdateDate) &&
			a.triggers.every(isActionableTrigger) &&
			a.actions.every(isActionableAction)
		);
	} catch {
		return false;
	}
}

isDateValue = (value: DateTimeInputRangeProps['value']): value is [Date | null, Date | null] => Array.isArray(value)
  && value.length === 2
  && (isNil(value[0]) || isDate(value[0]))
  && (isNil(value[1]) || isDate(value[1]))

handleErrors = (props: DateTimeInputRangeProps): void => {
  const {
    name, placeholder, value, min, max, format = 'dd.MM.yyyy', type,
  } = props;

  if (!isNil(name) && !isString(name) && !isArrayOfTwoStrings(name)) {
    throw new Error('DateTimeInputRange: name prop must be an array of two strings or a string! '
     + `You passed: ${Array.isArray(name) ? `${name[0]}, ${name[1]}` : name}`);
  }

  if (!isNil(placeholder) && !isString(placeholder) && !isArrayOfTwoStrings(placeholder)) {
    throw new Error('DateTimeInputRange: placeholder prop must be an array of two strings or a string! '
     + `You passed: ${Array.isArray(placeholder) ? `${placeholder[0]}, ${placeholder[1]}` : placeholder}`);
  }

  if (!isNil(value) && !isArrayOfTwoStrings(value) && !isArrayOfTwoDates(value)) {
    throw new Error('DateTimeInputRange: value prop must be an array of two strings or two Dates! '
     + `You passed: ${Array.isArray(value) ? `${value[0]}, ${value[1]}` : value}`);
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isDate(value[0]) && !isNil(min) && isDateLess(value[0], min)) {
    console.error(`DateTimeInputRange: you passed the value "${value[0].toLocaleString()}" that is less than min! This is probably a mistake!`);
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isDate(value[1]) && !isNil(max) && isDateGreater(value[1], max)) {
    console.error(`DateTimeInputRange: you passed the value "${value[1].toLocaleString()}" that is greater than max! This is probably a mistake!`);
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isString(value[0]) && !isNil(min)) {
    const parsedValue = stringToDate(value[0], format);

    if (parsedValue && isDateLess(parsedValue, min)) {
      console.error(`DateTimeInputRange: you passed the value "${value[0].toLocaleString()}" that is less than min! This is probably a mistake!`);
    }
  }

  if (type !== COMPONENT_TYPES.TIME_ONLY && !isNil(value) && isString(value[1]) && !isNil(max)) {
    const parsedValue = stringToDate(value[1], format);

    if (parsedValue && isDateGreater(parsedValue, max)) {
      console.error(`DateTimeInputRange: you passed the value "${value[1].toLocaleString()}" that is greater than max! This is probably a mistake!`);
    }
  }
}

isArrayOfTwoDates = (item: [string | Date | null | undefined, string | Date | null | undefined]): boolean => Array.isArray(item)
  && item.length === 2
  && (isNil(item[0]) || isDate(item[0]))
  && (isNil(item[1]) || isDate(item[1]))

public fromKey(hash: QueryFilters<T> | HashKeyType, range?: RangeKeyType): T {
    // if the hash was passed a query filters, then extract the hash and range
    if (isObject(hash) && !isDate(hash)) {
      const filters = hash
      if (!has(filters, this.metadata.hash.propertyName)) {
        throw new QueryError('Cannot perform .get() on a PrimaryKey without specifying a hash key value')
      } else if (this.metadata.range != null && !has(filters, this.metadata.range.propertyName)) {
        throw new QueryError('Cannot perform .get() on a PrimaryKey with a range key without specifying a range value')
      } else if (Object.keys(filters).length > 2) {
        throw new QueryError('Cannot perform a .get() on a PrimaryKey with additional filters, use .query() instead')
      }

      hash = get(filters, this.metadata.hash.propertyName)

      if (isArray(hash)) {
        if (hash[0] === '=') {
          hash = hash[1]
        } else {
          throw new QueryError('DynamoDB only supports using equal operator for the HASH key')
        }
      }

      if (this.metadata.range != null) {
        range = get(filters, this.metadata.range.propertyName)

        if (isArray(hash)) {
          if (hash[0] === '=') {
            hash = hash[1]
          } else {
            throw new QueryError('DynamoDB only supports using equal operator for the RANGE key on GetItem operations')
          }
        }
      }
    }

    if (this.metadata.range != null && range == null) {
      throw new QueryError('Cannot use primaryKey.get without a range key value')
    }

    const keyMap: DynamoDB.AttributeMap = {
      [this.metadata.hash.name]: this.metadata.hash.toDynamoAssert(hash),
    }

    if (this.metadata.range != null) {
      keyMap[this.metadata.range.name] = this.metadata.range.toDynamoAssert(range)
    }

    return this.table.fromDynamo(keyMap, false)
  }

useDateTimeInputEffects = ({
  conditions,
  dispatch,
  props,
  state,
}: EffectData): void => {
  const {
    value: valueProp, format = 'dd.MM.yyyy', min, max,
  } = props;

  const {
    date: dateState, isFocused,
  } = state;

  React.useEffect(() => {
    const dateValue = isDate(valueProp) || valueProp == null ? valueProp : null;

    if (dateValue && !isFocused) {
      dispatch(setDate(dateValue));
    }
  }, [valueProp, dispatch, isFocused]);

  React.useEffect(() => {
    // синхронизируем отображение календаря с value
    if (dateState && conditions.isValueInRange) dispatch(setViewDate(dateState));
  }, [conditions.isValueInRange, dispatch, dateState]);

  React.useEffect(() => {
    // если в value пустая строка - нужно обнулить date для валидации
    if (isDate(valueProp) || isNil(valueProp) || isFocused) return;

    if (valueProp.length === 0) {
      dispatch(setDate(null));
    }

    const newDate = stringToDate(valueProp, format);
    // если в инпуте валидная дата - записываем в date, иначе - запиываем null
    if (newDate && newDate.getDate()) dispatch(setDate(newDate));
    else dispatch(setDate(null));
  }, [dispatch, format, isFocused, max, min, valueProp]);
}

/**
 * Determines if a given value is an accepted value for a hash or range key
 */
function isKeyValue(range: any): boolean {
  const type = typeof range
  return type === 'string' || type === 'boolean' || type === 'number' || type === 'bigint' || isDate(range)
}

DateTimeInput = React.forwardRef((props: DateTimeInputProps, ref: React.Ref<DateTimeInputRefCurrent>) => {
  const {
    boundingContainerRef,
    calendarHeaderRender,
    calendarWrapperRender,
    className,
    dateCellRender,
    dateViewRender,
    format = 'dd.MM.yyyy',
    hasTodayButton,
    iconRender,
    inputRender,
    invalidMessage,
    invalidMessageRender,
    isDisabled,
    isOpen: isOpenProp,
    isRequired,
    isValid: isValidProp,
    max: maxProp,
    min: minProp,
    monthViewRender,
    name,
    onEnterPress,
    placeholder,
    requiredMessage,
    shouldValidateUnmounted,
    theme: themeProp,
    type = COMPONENT_TYPES.DATE_ONLY,
    validator,
    value: valueProp,
    weeksRowRender,
    wrapperRender,
    yearViewRender,
    ...restProps
  } = useProps(props);

  handleErrors(props);

  // Преоброзвание moment в Date, если передан moment
  const min = React.useMemo(() => convertToDate(minProp), [minProp]);

  const max = React.useMemo(() => convertToDate(maxProp), [maxProp]);

  const newProps = { ...props, min, max };

  const [state, dispatch] = useDateTimeInputState(newProps);

  // реф у maskedInput, используется в валидации и для focus/blur
  const maskedInputRef = React.useRef<HTMLInputElement | null>(null);

  // набор условий для обработки событий календаря (отключенные даты, неактивные стрелочки и тд)
  const conditions = getCalendarConditions({
    min, max, viewDate: state.viewDate, viewType: state.viewType, value: state.date,
  });
  // валидируем по Date, а не по строке. Т.к. 12.__.____ - невалидная дата
  const validationValue = isDate(valueProp) || isNil(valueProp) ? valueProp : stringToDate(valueProp, format);

  const validationProps = React.useMemo(() => ({
    ...newProps,
    value: validationValue,
  }), [newProps, validationValue]);

  const validationState = React.useMemo(() => ({
    value: state.date,
  }), [state.date]);

  const {
    validateCurrent, isValid, InvalidMessage,
  } = useValidation(validationProps, validationState, {
    reset: createResetHandler({
      props, dispatch,
    }),
  });

  useDateTimeInputEffects({
    props: newProps, state, dispatch, conditions,
  });

  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.dateTimeInput);

  const mask = createMask(format, type);

  const isOpen = isNil(isOpenProp) ? state.isOpen : isOpenProp;

  const handlersData = {
    props: newProps, state, dispatch, maskedInputRef, validate: validateCurrent, conditions,
  };

  const handleBlur = createBlurHandler(handlersData);
  const handleCalendarIconMouseDown = createCalendarIconMouseDownHandler(handlersData);
  const handleCalendarKeyDown = createKeyDownHandler(handlersData);
  const handleCalendarMouseDown = createCalendarMouseDownHandler(handlersData);
  const handleCalendarClick = createCalendarClickHandler(handlersData);
  const handleChange = createChangeHandler(handlersData);
  const handleFocus = createFocusHandler(handlersData);

  const {
    Wrapper,
    Icon,
    Input,
  } = useCustomElements(props, state);

  const wrapperClassNames = getClassNames(
    className,
    theme.wrapper,
  );

  const inputValue = getValue({
    valueProp,
    valueState: state.value,
    dateState: state.date,
    format,
  });

  return (
    <Wrapper
      className={wrapperClassNames}
      onKeyDown={(ev) => handleCalendarKeyDown(ev)}
      ref={ref && ((divComponent) => bindFunctionalRef(divComponent, ref, divComponent && {
        wrapper: divComponent.wrapper,
        input: maskedInputRef.current,
      }))}
    >
      <Div
        className={getInputWrapperClassNames(theme, newProps, state, isValid)}
      >
        <Input
          {...restProps}
          aria-invalid={!isValid}
          aria-required={isRequired}
          className={theme.input}
          isDisabled={isDisabled}
          mask={mask}
          name={name}
          onBlur={handleBlur}
          onChange={handleChange}
          onFocus={handleFocus}
          placeholder={placeholder}
          ref={maskedInputRef}
          value={inputValue}
        />
        <Span className={theme.iconsWrapper}>
          {type !== COMPONENT_TYPES.TIME_ONLY && (
            <Icon
              onMouseDown={handleCalendarIconMouseDown}
              className={theme.calendarIcon}
            />
          )}
        </Span>
      </Div>
      {!state.isFocused && !isDisabled && <InvalidMessage />}
      {type !== COMPONENT_TYPES.TIME_ONLY && (
        <Calendar
          boundingContainerRef={boundingContainerRef}
          calendarHeaderRender={calendarHeaderRender}
          dateCellRender={dateCellRender}
          dateViewRender={dateViewRender}
          dispatch={dispatch}
          format={format}
          hasTodayButton={hasTodayButton}
          isDisabled={isDisabled}
          isOpen={isOpen}
          max={max}
          min={min}
          monthViewRender={monthViewRender}
          onClick={handleCalendarClick}
          onMouseDown={handleCalendarMouseDown}
          theme={theme.calendar}
          value={state.date}
          viewDate={state.viewDate}
          viewType={state.viewType}
          weeksRowRender={weeksRowRender}
          yearViewRender={yearViewRender}
          calendarWrapperRender={calendarWrapperRender}
        />
      )}
    </Wrapper>
  );
})