onekijs-ui 1.0.5 → 1.0.6

package/dist/components/datetime/FormDatePicker.d.ts

@@ -0,0 +1,28 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { FormDatePickerProps } from './typings';
+export declare const FormDateValueDisplayer: React.FC<FormFieldValueDisplayerProps>;
+export declare const formDateDisplayerProps: (props: FormDatePickerProps<any>) => {
+    defaultValue: any;
+    isUndefined: (value: any) => boolean;
+    Displayer: React.FC<FormDisplayerProps> | ((displayerProps: FormDisplayerProps) => React.JSX.Element);
+};
+/**
+ * `<FormDatePicker/>` is a DataPicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+declare const FormDatePicker: FC<FormDatePickerProps<any>>;
+export default FormDatePicker;

package/dist/components/datetime/FormDateRangePicker.d.ts

@@ -0,0 +1,28 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { FormDateRangePickerProps } from './typings';
+export declare const FormDateRangeValueDisplayer: React.FC<FormFieldValueDisplayerProps>;
+export declare const formDateRangeDisplayerProps: (props: FormDateRangePickerProps<any>) => {
+    defaultValue: any;
+    isUndefined: (value: any) => boolean;
+    Displayer: React.FC<FormDisplayerProps> | ((displayerProps: FormDisplayerProps) => React.JSX.Element);
+};
+/**
+ * `<FormDateRangePicker/>` is a DataPicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+declare const FormDateRangePicker: FC<FormDateRangePickerProps<any>>;
+export default FormDateRangePicker;

package/dist/components/datetime/FormDateTimePicker.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { FormDateTimePickerProps } from './typings';
+/**
+ * `<FormDateTimePicker/>` is a DataTimePicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+declare const FormDateTimePicker: FC<FormDateTimePickerProps<any>>;
+export default FormDateTimePicker;

package/dist/components/datetime/FormDateTimeRangePicker.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { FormDateTimeRangePickerProps } from './typings';
+/**
+ * `<FormDateTimeRangePicker/>` is a DataTimeRangePicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+declare const FormDateTimeRangePicker: FC<FormDateTimeRangePickerProps<any>>;
+export default FormDateTimeRangePicker;

package/dist/components/datetime/hooks/useDateAdapter.d.ts

@@ -0,0 +1,4 @@
+import { DateAdapter } from '../typings';
+export declare const dateAdapter: DateAdapter<Date | null>;
+declare const useDateAdapter: () => DateAdapter<Date | null>;
+export default useDateAdapter;

package/dist/components/datetime/hooks/useDateRangeAdapter.d.ts

@@ -1,4 +1,9 @@
 import { DateRangeAdapter } from '../typings';
+export declare const dateRangeAdapter: DateRangeAdapter<{
+    from: Date | null;
+    to: Date | null;
+    label?: string | null;
+}>;
 declare const useDateRangeAdapter: () => DateRangeAdapter<{
     from: Date | null;
     to: Date | null;

package/dist/components/datetime/hooks/useTimestampAdapter.d.ts

@@ -0,0 +1,8 @@
+import { DateAdapter, TimestampFormat } from '../typings';
+export declare const toTimestamp: (date: string | undefined | null, format: TimestampFormat) => number | null;
+export declare const fromTimestamp: (timestamp: number | undefined | null, format: TimestampFormat) => string | null;
+export declare const timestampAdapter: (format?: TimestampFormat) => DateAdapter<number | null>;
+export declare const timestampSecondAdapter: DateAdapter<number | null>;
+export declare const timestampMilliSecondAdapter: DateAdapter<number | null>;
+declare const useTimestampAdapter: (format?: TimestampFormat) => DateAdapter<number | null>;
+export default useTimestampAdapter;

package/dist/components/datetime/hooks/useTimestampRangeAdapter.d.ts

@@ -1,5 +1,20 @@
-import { DateRangeAdapter } from '../typings';
-declare const useTimestampRangeAdapter: (format?: "seconds" | "milliseconds") => DateRangeAdapter<{
+import { DateRangeAdapter, TimestampFormat } from '../typings';
+export declare const timestampRangeAdapter: (format?: TimestampFormat) => DateRangeAdapter<{
+    from: number | null;
+    to: number | null;
+    label?: string | null;
+}>;
+export declare const timestampSecondRangeAdapter: DateRangeAdapter<{
+    from: number | null;
+    to: number | null;
+    label?: string | null;
+}>;
+export declare const timestampMilliSecondRangeAdapter: DateRangeAdapter<{
+    from: number | null;
+    to: number | null;
+    label?: string | null;
+}>;
+declare const useTimestampRangeAdapter: (format?: TimestampFormat) => DateRangeAdapter<{
     from: number | null;
     to: number | null;
     label?: string | null;

package/dist/components/datetime/index.d.ts

@@ -12,7 +12,7 @@ export declare const DatePicker: import("styled-components/dist/types").IStyledC
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateAdapter<any> | undefined;
     onChange?: ((value: any) => void) | undefined;
     value?: any;
 }, never> & Partial<Pick<import("../..").StylableProps & {
@@ -29,7 +29,7 @@ export declare const DatePicker: import("styled-components/dist/types").IStyledC
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateAdapter<any> | undefined;
     onChange?: ((value: any) => void) | undefined;
     value?: any;
 }, never>>> & string & Omit<import("react").FC<import("./typings").DatePickerProps>, keyof import("react").Component<any, {}, any>>;
@@ -47,7 +47,7 @@ export declare const DateRangePicker: import("styled-components/dist/types").ISt
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateRangeAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateRangeAdapter<any> | undefined;
     closeOnQuickSelect?: boolean;
     onChange?: ((value: any) => void) | undefined;
     quickRanges?: import("onekijs-framework").AnonymousObject<import("./typings").DateStringRange>;
@@ -66,7 +66,7 @@ export declare const DateRangePicker: import("styled-components/dist/types").ISt
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateRangeAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateRangeAdapter<any> | undefined;
     closeOnQuickSelect?: boolean;
     onChange?: ((value: any) => void) | undefined;
     quickRanges?: import("onekijs-framework").AnonymousObject<import("./typings").DateStringRange>;
@@ -86,7 +86,7 @@ export declare const DateTimePicker: import("styled-components/dist/types").ISty
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateAdapter<any> | undefined;
     onChange?: ((value: any) => void) | undefined;
     value?: any;
 } & import("./typings").DisplayTime, never> & Partial<Pick<import("../..").StylableProps & {
@@ -103,7 +103,7 @@ export declare const DateTimePicker: import("styled-components/dist/types").ISty
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateAdapter<any> | undefined;
     onChange?: ((value: any) => void) | undefined;
     value?: any;
 } & import("./typings").DisplayTime, never>>> & string & Omit<import("react").FC<import("./typings").DateTimePickerProps>, keyof import("react").Component<any, {}, any>>;
@@ -121,7 +121,7 @@ export declare const DateTimeRangePicker: import("styled-components/dist/types")
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateRangeAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateRangeAdapter<any> | undefined;
     closeOnQuickSelect?: boolean;
     onChange?: ((value: any) => void) | undefined;
     quickRanges?: import("onekijs-framework").AnonymousObject<import("./typings").DateStringRange>;
@@ -140,7 +140,7 @@ export declare const DateTimeRangePicker: import("styled-components/dist/types")
     placeholder?: string;
     placement?: import("@popperjs/core").Placement;
 } & {
-    adapter?: import("./typings").DateRangeAdapter<any> | undefined;
+    adapter?: "date" | "timestamp" | import("./typings").DateRangeAdapter<any> | undefined;
     closeOnQuickSelect?: boolean;
     onChange?: ((value: any) => void) | undefined;
     quickRanges?: import("onekijs-framework").AnonymousObject<import("./typings").DateStringRange>;

package/dist/components/datetime/typings.d.ts

@@ -1,7 +1,8 @@
-import { AnonymousObject } from 'onekijs-framework';
+import { Placement } from '@popperjs/core';
+import { AnonymousObject, FormFieldProps } from 'onekijs-framework';
 import { StylableProps } from '../../styles/typings';
 import { DropdownWidthModifier } from '../dropdown/typings';
-import { Placement } from '@popperjs/core';
+import { FieldDisplayerProps, FieldLayoutProps } from '../field/typings';
 export type BasePickerProps = StylableProps & {
     animationMs?: number;
     attachDropdownToBody?: boolean;
@@ -57,7 +58,7 @@ export type DatePickerDate = {
     second?: string;
 };
 export type DatePickerProps<T extends any = any> = BasePickerProps & {
-    adapter?: DateAdapter<T>;
+    adapter?: DateAdapter<T> | 'timestamp' | 'date';
     onChange?: (value: T | null) => void;
     value?: T | null;
 };
@@ -81,17 +82,12 @@ export type DateStringRange = {
     to: string | null;
     label?: string | null;
 };
-export type TimestampRange = {
-    from: number | null;
-    to: number | null;
-    label?: string | null;
-};
 export type DateRangeAdapter<T extends any = any> = {
     fromDateRange: (range: DateStringRange) => T;
     toDateRange: (value: T) => DateStringRange;
 };
 export type DateRangePickerProps<T extends any = any> = BasePickerProps & {
-    adapter?: DateRangeAdapter<T>;
+    adapter?: DateRangeAdapter<T> | 'timestamp' | 'date';
     closeOnQuickSelect?: boolean;
     onChange?: (value: T | null) => void;
     quickRanges?: AnonymousObject<DateStringRange>;
@@ -105,6 +101,46 @@ export type DisplayTime = {
     displayMinutes?: boolean;
     displaySeconds?: boolean;
 };
+export type FormDatePickerProps<T> = DatePickerProps<T> & FormFieldProps & FieldLayoutProps & {
+    /**
+     * The default value of the field if no specific value has been specified
+     * A value can be passed to field
+     *   * either manually by the user filling the form
+     *   * via the setValue of the form controller (if the field is inside a <Form> component)
+     *   * via an initial value transmitted to the form
+     *
+     * @remarks #important#
+     */
+    defaultValue?: T;
+    /**
+     * There are three components used to display the value of an FormInput in the summary step
+     *   * Displayer: display (label + value)
+     *   * FieldDisplayer: extract the value from the field and display it
+     *   * ValueDisplayer: customize how the value is displayed
+     */
+    FieldDisplayer?: React.FC<FieldDisplayerProps>;
+};
+export type FormDateRangePickerProps<T> = DateRangePickerProps<T> & FormFieldProps & FieldLayoutProps & {
+    /**
+     * The default value of the field if no specific value has been specified
+     * A value can be passed to field
+     *   * either manually by the user filling the form
+     *   * via the setValue of the form controller (if the field is inside a <Form> component)
+     *   * via an initial value transmitted to the form
+     *
+     * @remarks #important#
+     */
+    defaultValue?: T;
+    /**
+     * There are three components used to display the value of an FormInput in the summary step
+     *   * Displayer: display (label + value)
+     *   * FieldDisplayer: extract the value from the field and display it
+     *   * ValueDisplayer: customize how the value is displayed
+     */
+    FieldDisplayer?: React.FC<FieldDisplayerProps>;
+};
+export type FormDateTimePickerProps<T> = FormDatePickerProps<T> & DisplayTime;
+export type FormDateTimeRangePickerProps<T> = FormDateRangePickerProps<T> & DisplayTime;
 export type PickerComponentProps = BasePickerProps & DisplayTime & {
     closeOnQuickSelect?: boolean;
     type: DatePickerType;
@@ -124,6 +160,7 @@ export type TimeComponentProps = StylableProps & Required<DisplayTime> & {
     to: DatePickerDate;
     type: DatePickerType;
     onChange: (value: string, edge: 'from' | 'to') => void;
+    displayHeaders?: boolean;
 };
 export type TimePickerProps = BasePickerProps & DisplayTime & {
     onChange?: (value: string | null) => void;
@@ -134,8 +171,10 @@ export type TimeRangeComponentProps = Required<DisplayTime> & {
     value: DatePickerDate;
     type: DatePickerType;
     onChange: (value: string, edge: 'from' | 'to') => void;
+    displayHeaders?: boolean;
 };
 export type TimeSelectorComponentProps = Required<DisplayTime> & {
+    displayHeaders?: boolean;
     edge: 'from' | 'to';
     value: DatePickerDate;
     onChange: (value: string, edge: 'from' | 'to') => void;
@@ -146,4 +185,11 @@ export type TimeSelectorPartComponentProps = {
     value: string | number;
     onChange: (value: string) => void;
     size?: 'small' | 'large';
+    displayHeaders?: boolean;
+};
+export type TimestampFormat = 'seconds' | 'milliseconds';
+export type TimestampRange = {
+    from: number | null;
+    to: number | null;
+    label?: string | null;
 };