@nayan-ui/react-native/dist/module/components/NDatePicker.js

React Native Component Library for smooth and faster mobile application development.

"use strict";

import React, { useCallback, useMemo, useState } from 'react';
import { View } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { format } from 'date-fns';
import { NPress } from "./NPress.js";
import { NText } from "./NText.js";
import { useNTheme } from "../hooks/useNTheme.js";
import { Calendar } from "../lib/icons/Calender.js";
import { cn } from "../lib/utils.js";
import { jsx as _jsx, jsxs as _jsxs } from "react-native-css-interop/jsx-runtime";
export const NDatePicker = /*#__PURE__*/React.memo(({
  label = '',
  type = 'date',
  disabled = false,
  className = '',
  labelClassName = '',
  inputClassName = '',
  inputTextClassName = '',
  inputIconClassName = '',
  value,
  onChange,
  icon,
  isDarkMode: propIsDarkMode
}) => {
  const {
    isDarkMode: themeIsDarkMode
  } = useNTheme();
  const isDarkMode = propIsDarkMode ?? themeIsDarkMode;
  const [isVisible, setIsVisible] = useState(false);
  const hideDatePicker = useCallback(() => {
    setIsVisible(false);
  }, []);
  const showDatePicker = useCallback(() => {
    if (!disabled) {
      setIsVisible(true);
    }
  }, [disabled]);
  const handleConfirm = useCallback(date => {
    onChange(date);
    hideDatePicker();
  }, [onChange, hideDatePicker]);
  const formatValue = useCallback(date => {
    if (type === 'time') {
      return format(date, 'HH:mm:ss');
    }
    if (type === 'date') {
      return format(date, 'yyyy-MM-dd');
    }
    return format(date, 'yyy-MM-dd HH:mm:ss');
  }, [type]);
  const dateIcon = useMemo(() => {
    if (icon) {
      if (/*#__PURE__*/React.isValidElement(icon)) {
        return icon;
      }
      const IconComponent = icon;
      return _jsx(IconComponent, {
        strokeWidth: 1,
        className: cn('w-5 h-5 text-text', inputIconClassName)
      });
    }
    return _jsx(Calendar, {
      strokeWidth: 1,
      className: cn('w-5 h-5 text-text', inputIconClassName)
    });
  }, [icon, inputIconClassName]);
  return _jsxs(View, {
    className: cn('w-full mb-3', className),
    children: [label && _jsx(NText, {
      className: cn('mb-1', labelClassName),
      children: label
    }), _jsx(DateTimePickerModal, {
      isVisible: isVisible,
      mode: type,
      date: value,
      disabled: disabled,
      isDarkModeEnabled: isDarkMode,
      onConfirm: handleConfirm,
      onCancel: hideDatePicker
    }), _jsxs(NPress, {
      onPress: showDatePicker,
      className: cn('flex-row justify-between items-center bg-card border border-border rounded px-3 py-2.5', disabled && 'opacity-50', inputClassName),
      children: [_jsx(NText, {
        className: cn('text-lg', inputTextClassName),
        children: formatValue(value)
      }), dateIcon]
    })]
  });
});
NDatePicker.displayName = 'NDatePicker';
//# sourceMappingURL=NDatePicker.js.map