@akinon/ui-time-picker 0.5.0 → 1.0.1

package/dist/cjs/index.d.ts

@@ -1,5 +1,23 @@
 import type { TimePickerProps as AntTimePickerProps } from 'antd';
 import * as React from 'react';
 export type TimePickerProps = AntTimePickerProps;
+/**
+ * TimePicker component for Akinon UI.
+ *
+ * The TimePicker component provides a robust and customizable solution for selecting time values.
+ * It supports various configurations, such as 12/24-hour formats, custom steps for hours, minutes, and seconds,
+ * and flexible placement and styles for popup panels.
+ *
+ * Key Features:
+ * - Multiple display formats including 12-hour and 24-hour clocks.
+ * - Customizable intervals for hours, minutes, and seconds.
+ * - Support for enabling/disabling specific time ranges or values.
+ * - Callback functions for value changes, panel open/close events, and validation.
+ * - Options for customizing clear icons, placeholder texts, and additional panel footers.
+ * - Fully integrated with the Akinon design system to ensure consistent styling and behavior.
+ *
+ * The TimePicker component is designed for both simple and advanced use cases, making it suitable for
+ * enterprise-grade applications requiring precise time input functionality.
+ */
 export declare const TimePicker: ({ ...restTimePickerProps }: TimePickerProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/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":"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;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,+BAAgC,eAAe,sBAMrE,CAAC"}

package/dist/cjs/index.js

@@ -14,6 +14,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 const antd_1 = require("antd");
 const React = require("react");
+/**
+ * TimePicker component for Akinon UI.
+ *
+ * The TimePicker component provides a robust and customizable solution for selecting time values.
+ * It supports various configurations, such as 12/24-hour formats, custom steps for hours, minutes, and seconds,
+ * and flexible placement and styles for popup panels.
+ *
+ * Key Features:
+ * - Multiple display formats including 12-hour and 24-hour clocks.
+ * - Customizable intervals for hours, minutes, and seconds.
+ * - Support for enabling/disabling specific time ranges or values.
+ * - Callback functions for value changes, panel open/close events, and validation.
+ * - Options for customizing clear icons, placeholder texts, and additional panel footers.
+ * - Fully integrated with the Akinon design system to ensure consistent styling and behavior.
+ *
+ * The TimePicker component is designed for both simple and advanced use cases, making it suitable for
+ * enterprise-grade applications requiring precise time input functionality.
+ */
 const TimePicker = (_a) => {
     var restTimePickerProps = __rest(_a, []);
     return (React.createElement(antd_1.TimePicker, Object.assign({}, restTimePickerProps)));

package/dist/cjs/types.d.ts

@@ -0,0 +1,207 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type { Dayjs } from 'dayjs';
+import { ReactNode } from 'react';
+
+type DisabledTime = (now: Dayjs) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+  disabledMilliseconds?: (
+    selectedHour: number,
+    selectedMinute: number,
+    selectedSecond: number
+  ) => number[];
+};
+
+/**
+ * Interface representing the properties for the TimePicker component.
+ */
+export interface ITimePickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Customize clear icon.
+   * @default true
+   */
+  allowClear?: boolean | { clearIcon?: ReactNode };
+
+  /**
+   * If get focus when component mounted.
+   * @default false
+   */
+  autoFocus?: boolean;
+
+  /**
+   * Custom rendering function for picker cells
+   */
+  cellRender?: (
+    current: number,
+    info: {
+      originNode: React.ReactElement;
+      today: dayjs;
+      range?: 'start' | 'end';
+      subType: 'hour' | 'minute' | 'second' | 'meridiem';
+    }
+  ) => React.ReactNode;
+
+  /**
+   * Trigger selection when scroll the column
+   * @default false
+   */
+  changeOnScroll?: boolean;
+
+  /**
+   * To set default time
+   */
+  defaultValue?: Dayjs;
+
+  /**
+   * Determine whether the TimePicker is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * To specify the time that cannot be selected
+   */
+  disabledTime?: DisabledTime;
+
+  /**
+   * To set the time format
+   * @default 'HH:mm:ss'
+   */
+  format?: string;
+
+  /**
+   * To set the container of the floating layer, while the default is to create a div element in body
+   */
+  getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+
+  /**
+   * Whether hide the options that can not be selected
+   * @default false
+   */
+  hideDisabledOptions?: boolean;
+
+  /**
+   * Interval between hours in picker
+   * @default 1
+   */
+  hourStep?: number;
+
+  /**
+   * Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)
+   * @default false
+   */
+  inputReadOnly?: boolean;
+
+  /**
+   * Interval between minutes in picker
+   * @default 1
+   */
+  minuteStep?: number;
+
+  /**
+   * Need click confirm button to trigger value change
+   */
+  needConfirm?: boolean;
+
+  /**
+   * Whether to popup panel
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Display when there's no value
+   * @default 'Select a time'
+   */
+  placeholder?: string | [string, string];
+
+  /**
+   * The position where the selection box pops up
+   * @default 'bottomLeft'
+   */
+  placement: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+
+  /**
+   * The className of panel
+   */
+  popupClassName?: string;
+
+  /**
+   * The style of panel
+   */
+  popupStyle?: React.CSSProperties;
+
+  /**
+   * Called from time picker panel to render some addon to its bottom
+   */
+  renderExtraFooter?: () => ReactNode;
+
+  /**
+   * Interval between seconds in picker
+   * @default 1
+   */
+  secondStep?: number;
+
+  /**
+   * Whether to show Now button on panel
+   */
+  showNow?: boolean;
+
+  /**
+   * 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?: 'small' | 'middle' | 'large';
+
+  /**
+   * Set validation status
+   */
+  status: 'error' | 'warning' | 'success' | 'validating';
+
+  /**
+   * The custom suffix icon
+   */
+  suffixIcon?: ReactNode;
+
+  /**
+   * Display as 12 hours format, with default format h:mm:ss a
+   * @default false
+   */
+  use12Hours?: boolean;
+
+  /**
+   * To set time
+   */
+  value?: Dayjs;
+
+  /**
+   * Variants of picker
+   * @default 'outlined'
+   */
+  variant: 'outlined' | 'borderless' | 'filled';
+
+  /**
+   * Callback function, can be executed when the start time or the end time of the range is changing. info argument is added in 4.4.0
+   */
+  onCalendarChange?: (
+    dates: [Dayjs, Dayjs],
+    dateStrings: [string, string],
+    info: { range: 'start' | 'end' }
+  ) => void;
+
+  /**
+   * A callback function, can be executed when the selected time is changing
+   */
+  onChange?: (time: Dayjs, timeString: string) => void;
+
+  /**
+   * A callback function which will be called while panel opening/closing
+   */
+  onOpenChange: (open: boolean) => 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;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,23 @@
 import type { TimePickerProps as AntTimePickerProps } from 'antd';
 import * as React from 'react';
 export type TimePickerProps = AntTimePickerProps;
+/**
+ * TimePicker component for Akinon UI.
+ *
+ * The TimePicker component provides a robust and customizable solution for selecting time values.
+ * It supports various configurations, such as 12/24-hour formats, custom steps for hours, minutes, and seconds,
+ * and flexible placement and styles for popup panels.
+ *
+ * Key Features:
+ * - Multiple display formats including 12-hour and 24-hour clocks.
+ * - Customizable intervals for hours, minutes, and seconds.
+ * - Support for enabling/disabling specific time ranges or values.
+ * - Callback functions for value changes, panel open/close events, and validation.
+ * - Options for customizing clear icons, placeholder texts, and additional panel footers.
+ * - Fully integrated with the Akinon design system to ensure consistent styling and behavior.
+ *
+ * The TimePicker component is designed for both simple and advanced use cases, making it suitable for
+ * enterprise-grade applications requiring precise time input functionality.
+ */
 export declare const TimePicker: ({ ...restTimePickerProps }: TimePickerProps) => React.JSX.Element;
 //# 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":"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;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,+BAAgC,eAAe,sBAMrE,CAAC"}

package/dist/esm/index.js

@@ -11,6 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { TimePicker as AntTimePicker } from 'antd';
 import * as React from 'react';
+/**
+ * TimePicker component for Akinon UI.
+ *
+ * The TimePicker component provides a robust and customizable solution for selecting time values.
+ * It supports various configurations, such as 12/24-hour formats, custom steps for hours, minutes, and seconds,
+ * and flexible placement and styles for popup panels.
+ *
+ * Key Features:
+ * - Multiple display formats including 12-hour and 24-hour clocks.
+ * - Customizable intervals for hours, minutes, and seconds.
+ * - Support for enabling/disabling specific time ranges or values.
+ * - Callback functions for value changes, panel open/close events, and validation.
+ * - Options for customizing clear icons, placeholder texts, and additional panel footers.
+ * - Fully integrated with the Akinon design system to ensure consistent styling and behavior.
+ *
+ * The TimePicker component is designed for both simple and advanced use cases, making it suitable for
+ * enterprise-grade applications requiring precise time input functionality.
+ */
 export const TimePicker = (_a) => {
     var restTimePickerProps = __rest(_a, []);
     return (React.createElement(AntTimePicker, Object.assign({}, restTimePickerProps)));

package/dist/esm/types.d.ts

@@ -0,0 +1,207 @@
+import { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
+import type { Dayjs } from 'dayjs';
+import { ReactNode } from 'react';
+
+type DisabledTime = (now: Dayjs) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+  disabledMilliseconds?: (
+    selectedHour: number,
+    selectedMinute: number,
+    selectedSecond: number
+  ) => number[];
+};
+
+/**
+ * Interface representing the properties for the TimePicker component.
+ */
+export interface ITimePickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Customize clear icon.
+   * @default true
+   */
+  allowClear?: boolean | { clearIcon?: ReactNode };
+
+  /**
+   * If get focus when component mounted.
+   * @default false
+   */
+  autoFocus?: boolean;
+
+  /**
+   * Custom rendering function for picker cells
+   */
+  cellRender?: (
+    current: number,
+    info: {
+      originNode: React.ReactElement;
+      today: dayjs;
+      range?: 'start' | 'end';
+      subType: 'hour' | 'minute' | 'second' | 'meridiem';
+    }
+  ) => React.ReactNode;
+
+  /**
+   * Trigger selection when scroll the column
+   * @default false
+   */
+  changeOnScroll?: boolean;
+
+  /**
+   * To set default time
+   */
+  defaultValue?: Dayjs;
+
+  /**
+   * Determine whether the TimePicker is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * To specify the time that cannot be selected
+   */
+  disabledTime?: DisabledTime;
+
+  /**
+   * To set the time format
+   * @default 'HH:mm:ss'
+   */
+  format?: string;
+
+  /**
+   * To set the container of the floating layer, while the default is to create a div element in body
+   */
+  getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+
+  /**
+   * Whether hide the options that can not be selected
+   * @default false
+   */
+  hideDisabledOptions?: boolean;
+
+  /**
+   * Interval between hours in picker
+   * @default 1
+   */
+  hourStep?: number;
+
+  /**
+   * Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)
+   * @default false
+   */
+  inputReadOnly?: boolean;
+
+  /**
+   * Interval between minutes in picker
+   * @default 1
+   */
+  minuteStep?: number;
+
+  /**
+   * Need click confirm button to trigger value change
+   */
+  needConfirm?: boolean;
+
+  /**
+   * Whether to popup panel
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Display when there's no value
+   * @default 'Select a time'
+   */
+  placeholder?: string | [string, string];
+
+  /**
+   * The position where the selection box pops up
+   * @default 'bottomLeft'
+   */
+  placement: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+
+  /**
+   * The className of panel
+   */
+  popupClassName?: string;
+
+  /**
+   * The style of panel
+   */
+  popupStyle?: React.CSSProperties;
+
+  /**
+   * Called from time picker panel to render some addon to its bottom
+   */
+  renderExtraFooter?: () => ReactNode;
+
+  /**
+   * Interval between seconds in picker
+   * @default 1
+   */
+  secondStep?: number;
+
+  /**
+   * Whether to show Now button on panel
+   */
+  showNow?: boolean;
+
+  /**
+   * 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?: 'small' | 'middle' | 'large';
+
+  /**
+   * Set validation status
+   */
+  status: 'error' | 'warning' | 'success' | 'validating';
+
+  /**
+   * The custom suffix icon
+   */
+  suffixIcon?: ReactNode;
+
+  /**
+   * Display as 12 hours format, with default format h:mm:ss a
+   * @default false
+   */
+  use12Hours?: boolean;
+
+  /**
+   * To set time
+   */
+  value?: Dayjs;
+
+  /**
+   * Variants of picker
+   * @default 'outlined'
+   */
+  variant: 'outlined' | 'borderless' | 'filled';
+
+  /**
+   * Callback function, can be executed when the start time or the end time of the range is changing. info argument is added in 4.4.0
+   */
+  onCalendarChange?: (
+    dates: [Dayjs, Dayjs],
+    dateStrings: [string, string],
+    info: { range: 'start' | 'end' }
+  ) => void;
+
+  /**
+   * A callback function, can be executed when the selected time is changing
+   */
+  onChange?: (time: Dayjs, timeString: string) => void;
+
+  /**
+   * A callback function which will be called while panel opening/closing
+   */
+  onOpenChange: (open: boolean) => 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-time-picker",
-  "version": "0.5.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,14 +9,14 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.22.6"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",