@akinon/ui-date-picker 0.4.0 → 1.0.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,516 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type { Dayjs } from 'dayjs';
+import { ReactNode } from 'react';
+
+/**
+ * Interface representing the properties for the DatePickerGroup component.
+ */
+export interface IDatePickerGroupProps
+  extends DatePickerGeneralProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Specifies the type of picker: 'date' for DatePicker or 'range' for RangePicker.
+   * @default 'date'
+   */
+  pickerType?: 'date' | 'range';
+
+  /**
+   * Theme type
+   * @default dark
+   */
+  theme?: 'light' | 'dark' | string;
+
+  /**
+   * Customize clear button.
+   * @default true
+   */
+  allowClear?: boolean | { clearIcon?: ReactNode };
+
+  /**
+   * If get focus when component mounted.
+   * @default false
+   */
+  autoFocus?: boolean;
+
+  /**
+   * Custom panels.
+   */
+  components?: Record<Panel | 'input', React.ComponentType>;
+
+  /**
+   * Determine whether the DatePicker is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the date that cannot be selected.
+   */
+  disabledDate?: (
+    currentDate: dayjs,
+    info: { from?: dayjs; type: Picker }
+  ) => boolean;
+
+  /**
+   * To set the date format, support multi-format matching when it is an array, display the first one shall prevail. Refer to dayjs#format.
+   * @default rc-picker
+   */
+  format?: TDPFormatType;
+
+  /**
+   * Auto order date when multiple or range selection.
+   * @default true
+   */
+  order?: boolean;
+
+  /**
+   * To customize the className of the popup calendar.
+   */
+  popupClassName?: string;
+
+  /**
+   * Not clean input on blur even when the typing is invalid.
+   * @default false
+   */
+  preserveInvalidOnBlur?: boolean;
+
+  /**
+   * To set the container of the floating layer, while the default is to create a div element in body.
+   */
+  getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+
+  /**
+   * Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices).
+   * @default false
+   */
+  inputReadOnly?: boolean;
+
+  /**
+   * Localization configuration.
+   * @default default
+   */
+  locale?: object;
+
+  /**
+   * The minimum date, which also limits the range of panel switching.
+   */
+  minDate?: dayjs;
+
+  /**
+   * The maximum date, which also limits the range of panel switching.
+   */
+  maxDate?: dayjs;
+
+  /**
+   * The picker panel mode.
+   */
+  node?: 'time' | 'date' | 'month' | 'year' | 'decade';
+
+  /**
+   * Need click confirm button to trigger value change. Default false when multiple.
+   */
+  needConfirm?: boolean;
+
+  /**
+   * The custom next icon.
+   */
+  nextIcon?: ReactNode;
+
+  /**
+   * The open state of picker.
+   */
+  open?: boolean;
+
+  /**
+   * Customize panel render.
+   */
+  panelRender?: (panelNode) => ReactNode;
+
+  /**
+   * Set picker type.
+   * @default date
+   */
+  picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
+
+  /**
+   * The placeholder of date input.
+   */
+  placeholder?: string | [string, string];
+
+  /**
+   * The position where the selection box pops up.
+   * @default bottomLeft
+   */
+  placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | 'center';
+
+  /**
+   * To customize the style of the popup calendar.
+   * @default {}
+   */
+  popupStyle?: CSSProperties;
+
+  /**
+   * The custom prefix.
+   */
+  prefix?: ReactNode;
+
+  /**
+   * The preset ranges for quick selection. Since 5.8.0, preset value supports callback function.
+   */
+  presets?: { label: React.ReactNode; value: Dayjs | (() => Dayjs) }[];
+
+  /**
+   * The custom prev icon.
+   */
+  prevIcon?: ReactNode;
+
+  /**
+   * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px.
+   */
+  size?: 'large' | 'middle' | 'small';
+
+  /**
+   * Set validation status.
+   */
+  status?: 'error' | 'warning';
+
+  /**
+   * The custom suffix icon.
+   */
+  suffixIcon?: ReactNode;
+
+  /**
+   * The size of the suffix icon.
+   */
+  suffixIconSize?: string;
+
+  /**
+   * The color of the suffix icon.
+   */
+  suffixIconColor?: string;
+
+  /**
+   * The custom super next icon.
+   */
+  superNextIcon?: ReactNode;
+
+  /**
+   * The custom super prev icon.
+   */
+  superPrevIcon?: ReactNode;
+
+  /**
+   * The title of the input box.
+   */
+  inputTitle?: inputTitle;
+
+  /**
+   * Show title of input box.
+   * @default false
+   */
+  showTitle?: boolean;
+
+  /**
+   * The width of the input box
+   */
+  inputWidth?: string;
+
+  /**
+   * Variants of picker.
+   * @default outlined
+   */
+  variant?: 'outlined' | 'borderless' | 'filled';
+
+  /**
+   * Callback function, can be executed whether the popup calendar is popped up or closed.
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback when picker panel mode is changed.
+   */
+  onPanelChange?: (value: Dayjs, mode: string) => void;
+
+  /**
+   * Never use this prop. Akinon design system does not allow custom styles.
+   * @ignore
+   */
+  style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
+}
+
+/**
+ * Props for the DatePicker component.
+ */
+export interface IDatePickerProps
+  extends CommonPickerProps,
+    PickerValuesProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * To specify the time that cannot be selected.
+   */
+  disabledTime?: (date: Dayjs) => boolean;
+
+  /**
+   * Show the fast access of current datetime.
+   */
+  showNow?: boolean;
+
+  /**
+   * To provide an additional time selection
+   * @default TimePicker Options
+   */
+  showTime?: (object | boolean) & {
+    /**
+     * To set default time of selected date, demo
+     * @default dayjs()
+     */
+    defaultValue?: dayjs;
+  };
+
+  /**
+   * Show week info when in DatePicker.
+   * @default false
+   */
+  showWeek?: boolean;
+
+  /**
+   * Callback when click ok button.
+   */
+  onOk?: () => void;
+
+  /**
+   * Callback function for panel changing.
+   */
+  onPanelChange?: (value: Dayjs, mode: string) => void;
+}
+
+/**
+ * Properties for the Range Picker component.
+ */
+export interface IRangePickerProps
+  extends PickerValuesProps,
+    DatePickerGeneralProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Allow start or end input to be left empty.
+   * @default [false, false]
+   */
+  allowEmpty?: [boolean, boolean];
+
+  /**
+   * To set default date.
+   */
+  defaultValue?: [dayjs, dayjs];
+
+  /**
+   * If start or end is disabled.
+   */
+  disabled?: [boolean, boolean];
+
+  /**
+   * To specify the time that cannot be selected.
+   */
+  disabledTime?: (
+    date: dayjs,
+    partial: 'start' | 'end',
+    info: { from?: dayjs }
+  ) => void;
+
+  /**
+   * To set the date format. Refer to dayjs#format.
+   * @default YYYY-MM-DD HH:mm:ss
+   */
+  format?: TDPFormatType;
+
+  /**
+   * Config input ids.
+   */
+  id?: { start?: string; end?: string };
+
+  /**
+   * The preset ranges for quick selection. Since 5.8.0, preset value supports callback function.
+   */
+  presets?: { label: React.ReactNode; value: (Dayjs | (() => Dayjs))[] }[];
+
+  /**
+   * Render extra footer in panel.
+   */
+  renderExtraFooter?: () => React.ReactNode;
+
+  /**
+   * Set separator between inputs.
+   * @default <SwapRightOutlined />
+   */
+  separator?: React.ReactNode;
+
+  /**
+   * To provide an additional time selection.
+   * @default ITimePickerProps Options
+   */
+  showTime?: (object | boolean) & {
+    /**
+     * To set default time of selected date.
+     * @default [dayjs(), dayjs()]
+     */
+    defaultValue?: dayjs[];
+  };
+
+  /**
+   * To set date.
+   */
+  value?: [dayjs, dayjs];
+
+  /**
+   * Callback function, executed when the start time or the end time of the range is changing. Info argument added in 4.4.0.
+   */
+  onCalendarChange?: (
+    dates: [dayjs, dayjs],
+    dateStrings: [string, string],
+    info: { range: 'start' | 'end' }
+  ) => void;
+
+  /**
+   * Callback function, executed when the selected time is changing.
+   */
+  onChange?: (dates: [dayjs, dayjs], dateStrings: [string, string]) => void;
+
+  /**
+   * Triggered when the component gets focus.
+   */
+  onFocus?: (
+    event: React.FocusEvent<HTMLDivElement>,
+    info: { range: 'start' | 'end' }
+  ) => void;
+
+  /**
+   * Triggered when the component loses focus.
+   */
+  onBlur?: (
+    event: React.FocusEvent<HTMLDivElement>,
+    info: { range: 'start' | 'end' }
+  ) => void;
+}
+
+/**
+ * Represents the format type for the date picker.
+ *
+ * This type can be one of the following:
+ * - `TDPGeneric`: A generic type for the date picker.
+ * - `TDPGenericFn`: A function type for the date picker.
+ * - An array of `TDPGeneric` or `TDPGenericFn`.
+ * - An object with the following properties:
+ *   - `format`: A string representing the format.
+ *   - `type` (optional): A string with the value 'mask'.
+ */
+
+type TDPGeneric = string;
+type TDPGenericFn = (value: Dayjs) => string;
+
+export type TDPFormatType =
+  | TDPGeneric
+  | TDPGenericFn
+  | Array<TDPGeneric | TDPGenericFn>
+  | {
+      format: string;
+      type?: 'mask';
+    };
+
+interface DatePickerGeneralProps {
+  /**
+   * Custom rendering function for date cells, >= 5.4.0 use cellRender instead.
+   */
+  dateRender?: (currentDate: dayjs, today: dayjs) => React.ReactNode;
+
+  /**
+   * Custom rendering function for picker cells.
+   */
+  cellRender?: (
+    current: dayjs,
+    info: {
+      originNode: React.ReactElement;
+      today: DateType;
+      range?: 'start' | 'end';
+      type: PanelMode;
+      locale?: Locale;
+      subType?: 'hour' | 'minute' | 'second' | 'meridiem';
+    }
+  ) => React.ReactNode;
+}
+
+interface PickerValuesProps {
+  /**
+   * Default panel date, will be reset when panel open.
+   */
+  defaultPickerValue?: dayjs;
+
+  /**
+   * Panel date. Used for controlled switching of panel date. Works with onPanelChange.
+   */
+  pickerValue?: dayjs;
+}
+
+interface CommonPickerProps {
+  /**
+   * To set default date, if start time or end time is null or undefined, the date range will be an open interval.
+   */
+  defaultValue?: dayjs;
+
+  /**
+   * To set the date format. Refer to dayjs#format.
+   * If format == year @default "YYYY",
+   * If format == quarter @default "YYYY-\QQ",
+   * If format == month @default "YYYY-MM",
+   * If format == week @default "YYYY-wo",
+   * If format == date @default "YYYY-MM-DD"
+   */
+  format?: TDPFormatType;
+
+  /**
+   * Enable multiple selection. Not support showTime.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Render extra footer in panel.
+   */
+  renderExtraFooter?: () => React.ReactNode;
+
+  /**
+   * To set date.
+   */
+  value?: dayjs;
+
+  /**
+   * Callback function, can be executed when the selected time is changing.
+   * @param {dayjs} date - The selected date.
+   * @param {string} dateString - The formatted date string.
+   */
+  onChange?: (date: dayjs, dateString: string) => void;
+}
+
+/**
+ * Props for the DatePickerYear component.
+ */
+export type IDatePickerYearProps = CommonPickerProps;
+
+/**
+ * Props for the DatePickerQuarter component.
+ */
+export type IDatePickerQuarterProps = CommonPickerProps;
+
+/**
+ * Props for the DatePickerMonth component.
+ */
+export type IDatePickerMonthProps = CommonPickerProps;
+
+/**
+ * Props for the DatePickerWeek component.
+ */
+export interface IDatePickerWeekProps extends CommonPickerProps {
+  /**
+   * Show week info when in DatePicker
+   * @default true
+   */
+  showWeek?: boolean;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,22 @@
-import type { DatePickerProps as AntDatePickerProps } from 'antd';
 import * as React from 'react';
-export type DatePickerProps = AntDatePickerProps;
-export declare const DatePicker: ({ ...restDatePickerProps }: DatePickerProps) => React.JSX.Element;
+import { IDatePickerGroupProps } from './types';
+/**
+ * DatePicker component for Akinon UI.
+ *
+ * The DatePicker component provides a flexible and feature-rich solution for selecting dates, ranges, and times.
+ * It supports various configurations, including custom formats, localized options, and enhanced accessibility features.
+ * The component integrates seamlessly with the Akinon design system, offering a consistent user experience.
+ *
+ * Key Features:
+ * - Multiple picker types, including date, week, month, quarter, and year.
+ * - Customizable placeholder, size, and variant options for styling.
+ * - Flexible date and time range selection with validation support.
+ * - Event callbacks for value changes, focus, blur, and panel interactions.
+ * - Localization support for tailored user experiences.
+ *
+ * The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
+ * enterprise-level applications.
+ */
+export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
+export type { IDatePickerGroupProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAEjD,eAAO,MAAM,UAAU,+BAAgC,eAAe,sBAMrE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,+GAQpB,qBAAqB,sBAidvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}