1
This commit is contained in:
+5
@@ -0,0 +1,5 @@
|
||||
export declare const WEEK: "week", WEEKPICKER: "WeekPicker";
|
||||
export declare const MONTH: "month", MONTHPICKER: "MonthPicker";
|
||||
export declare const YEAR: "year", YEARPICKER: "YearPicker";
|
||||
export declare const QUARTER: "quarter", QUARTERPICKER: "QuarterPicker";
|
||||
export declare const TIME: "time", TIMEPICKER: "TimePicker";
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
export const [WEEK, WEEKPICKER] = ['week', 'WeekPicker'];
|
||||
export const [MONTH, MONTHPICKER] = ['month', 'MonthPicker'];
|
||||
export const [YEAR, YEARPICKER] = ['year', 'YearPicker'];
|
||||
export const [QUARTER, QUARTERPICKER] = ['quarter', 'QuarterPicker'];
|
||||
export const [TIME, TIMEPICKER] = ['time', 'TimePicker'];
|
||||
Generated
Vendored
+20
@@ -0,0 +1,20 @@
|
||||
import * as React from 'react';
|
||||
import type { PickerRef } from '@rc-component/picker';
|
||||
import type { GenerateConfig } from '@rc-component/picker/generate/index';
|
||||
import type { AnyObject } from '../../_util/type';
|
||||
import type { PickerLocale } from './interface';
|
||||
declare const generateRangePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => React.ForwardRefExoticComponent<Omit<import("@rc-component/picker").RangePickerProps<DateType>, "classNames" | "styles" | "locale" | "generateConfig" | "hideHeader"> & {
|
||||
locale?: PickerLocale;
|
||||
size?: import("../../button").ButtonSize;
|
||||
placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
|
||||
bordered?: boolean;
|
||||
status?: import("../../_util/statusUtils").InputStatus;
|
||||
variant?: import("../../config-provider").Variant;
|
||||
dropdownClassName?: string;
|
||||
popupClassName?: string;
|
||||
rootClassName?: string;
|
||||
popupStyle?: React.CSSProperties;
|
||||
classNames?: import("./interface").DatePickerPickerClassNames<import("@rc-component/picker").RangePickerProps<DateType>> | undefined;
|
||||
styles?: import("./interface").DatePickerStylesType<import("@rc-component/picker").RangePickerProps<DateType>> | undefined;
|
||||
} & React.RefAttributes<PickerRef>>;
|
||||
export default generateRangePicker;
|
||||
Generated
Vendored
+179
@@ -0,0 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import { forwardRef, useContext, useImperativeHandle } from 'react';
|
||||
import SwapRightOutlined from "@ant-design/icons/es/icons/SwapRightOutlined";
|
||||
import { RangePicker as RCRangePicker } from '@rc-component/picker';
|
||||
import { merge } from '@rc-component/util';
|
||||
import { clsx } from 'clsx';
|
||||
import ContextIsolator from '../../_util/ContextIsolator';
|
||||
import { useZIndex } from '../../_util/hooks';
|
||||
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
|
||||
import { devUseWarning } from '../../_util/warning';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import DisabledContext from '../../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../../config-provider/hooks/useSize';
|
||||
import { FormItemInputContext } from '../../form/context';
|
||||
import useVariant from '../../form/hooks/useVariants';
|
||||
import { useLocale } from '../../locale';
|
||||
import { useCompactItemContext } from '../../space/Compact';
|
||||
import useMergedPickerSemantic from '../hooks/useMergedPickerSemantic';
|
||||
import enUS from '../locale/en_US';
|
||||
import useStyle from '../style';
|
||||
import { getRangePlaceholder, useIcons } from '../util';
|
||||
import { TIME } from './constant';
|
||||
import useSuffixIcon from './useSuffixIcon';
|
||||
import useComponents from './useComponents';
|
||||
const generateRangePicker = generateConfig => {
|
||||
const RangePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
getPopupContainer: customGetPopupContainer,
|
||||
components,
|
||||
className,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
placement,
|
||||
size: customizeSize,
|
||||
disabled: customDisabled,
|
||||
bordered = true,
|
||||
placeholder,
|
||||
status: customStatus,
|
||||
variant: customVariant,
|
||||
picker,
|
||||
dropdownClassName,
|
||||
popupClassName,
|
||||
popupStyle,
|
||||
rootClassName,
|
||||
suffixIcon,
|
||||
separator,
|
||||
...restProps
|
||||
} = props;
|
||||
const pickerType = picker === TIME ? 'timePicker' : 'datePicker';
|
||||
// ====================== Warning =======================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('DatePicker.RangePicker');
|
||||
const deprecatedProps = {
|
||||
dropdownClassName: 'classNames.popup.root',
|
||||
popupClassName: 'classNames.popup.root',
|
||||
popupStyle: 'styles.popup.root',
|
||||
bordered: 'variant',
|
||||
onSelect: 'onCalendarChange'
|
||||
};
|
||||
Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
|
||||
warning.deprecated(!(oldProp in props), oldProp, newProp);
|
||||
});
|
||||
}
|
||||
const [mergedClassNames, mergedStyles] = useMergedPickerSemantic(pickerType, classNames, styles, popupClassName || dropdownClassName, popupStyle);
|
||||
const innerRef = React.useRef(null);
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
getPopupContainer,
|
||||
rangePicker
|
||||
} = useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
||||
const {
|
||||
compactSize,
|
||||
compactItemClassnames
|
||||
} = useCompactItemContext(prefixCls, direction);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const mergedSeparator = separator ?? rangePicker?.separator;
|
||||
const [variant, enableVariantCls] = useVariant('rangePicker', customVariant, bordered);
|
||||
const rootCls = useCSSVarCls(prefixCls);
|
||||
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||
const mergedRootClassName = clsx(hashId, cssVarCls, rootCls, rootClassName);
|
||||
// ===================== Icon =====================
|
||||
const [mergedAllowClear] = useIcons(props, prefixCls);
|
||||
// ================== components ==================
|
||||
const mergedComponents = useComponents(components);
|
||||
// ===================== Size =====================
|
||||
const mergedSize = useSize(ctx => customizeSize ?? compactSize ?? ctx);
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
// ===================== FormItemInput =====================
|
||||
const formItemContext = useContext(FormItemInputContext);
|
||||
const {
|
||||
hasFeedback,
|
||||
status: contextStatus,
|
||||
feedbackIcon
|
||||
} = formItemContext;
|
||||
const mergedSuffixIcon = useSuffixIcon({
|
||||
picker,
|
||||
hasFeedback,
|
||||
feedbackIcon,
|
||||
suffixIcon
|
||||
});
|
||||
useImperativeHandle(ref, () => innerRef.current);
|
||||
const [contextLocale] = useLocale('Calendar', enUS);
|
||||
const locale = merge(contextLocale, props.locale || {});
|
||||
// ============================ zIndex ============================
|
||||
const [zIndex] = useZIndex('DatePicker', mergedStyles?.popup?.root?.zIndex);
|
||||
return /*#__PURE__*/React.createElement(ContextIsolator, {
|
||||
space: true
|
||||
}, /*#__PURE__*/React.createElement(RCRangePicker, {
|
||||
separator: /*#__PURE__*/React.createElement("span", {
|
||||
"aria-label": "to",
|
||||
className: `${prefixCls}-separator`
|
||||
}, mergedSeparator ?? /*#__PURE__*/React.createElement(SwapRightOutlined, null)),
|
||||
disabled: mergedDisabled,
|
||||
ref: innerRef,
|
||||
placement: placement,
|
||||
placeholder: getRangePlaceholder(locale, picker, placeholder),
|
||||
suffixIcon: mergedSuffixIcon,
|
||||
prevIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-prev-icon`
|
||||
}),
|
||||
nextIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-next-icon`
|
||||
}),
|
||||
superPrevIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-super-prev-icon`
|
||||
}),
|
||||
superNextIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-super-next-icon`
|
||||
}),
|
||||
transitionName: `${rootPrefixCls}-slide-up`,
|
||||
picker: picker,
|
||||
...restProps,
|
||||
locale: locale.lang,
|
||||
getPopupContainer: customGetPopupContainer || getPopupContainer,
|
||||
generateConfig: generateConfig,
|
||||
components: mergedComponents,
|
||||
direction: direction,
|
||||
// Style
|
||||
prefixCls: prefixCls,
|
||||
rootClassName: mergedRootClassName,
|
||||
className: clsx({
|
||||
[`${prefixCls}-large`]: mergedSize === 'large',
|
||||
[`${prefixCls}-small`]: mergedSize === 'small',
|
||||
[`${prefixCls}-${variant}`]: enableVariantCls
|
||||
}, getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback), compactItemClassnames, className, rangePicker?.className),
|
||||
style: {
|
||||
...rangePicker?.style,
|
||||
...style
|
||||
},
|
||||
// Semantic Style
|
||||
classNames: mergedClassNames,
|
||||
styles: {
|
||||
...mergedStyles,
|
||||
popup: {
|
||||
...mergedStyles.popup,
|
||||
root: {
|
||||
...mergedStyles.popup.root,
|
||||
zIndex
|
||||
}
|
||||
}
|
||||
},
|
||||
allowClear: mergedAllowClear
|
||||
}));
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
RangePicker.displayName = 'RangePicker';
|
||||
}
|
||||
return RangePicker;
|
||||
};
|
||||
export default generateRangePicker;
|
||||
Generated
Vendored
+25
@@ -0,0 +1,25 @@
|
||||
import * as React from 'react';
|
||||
import type { GenerateConfig } from '@rc-component/picker/generate/index';
|
||||
import type { AnyObject } from '../../_util/type';
|
||||
import type { GenericTimePickerProps, PickerProps, PickerPropsWithMultiple } from './interface';
|
||||
declare const generatePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => {
|
||||
DatePicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: PickerPropsWithMultiple<DateType, PickerProps<DateType>, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
WeekPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: PickerPropsWithMultiple<DateType, Omit<PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
MonthPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: PickerPropsWithMultiple<DateType, Omit<PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
YearPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: PickerPropsWithMultiple<DateType, Omit<PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
TimePicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: PickerPropsWithMultiple<DateType, Omit<GenericTimePickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
QuarterPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: PickerPropsWithMultiple<DateType, Omit<PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
};
|
||||
export default generatePicker;
|
||||
Generated
Vendored
+223
@@ -0,0 +1,223 @@
|
||||
"use client";
|
||||
|
||||
import * as React from 'react';
|
||||
import { forwardRef, useContext, useImperativeHandle } from 'react';
|
||||
import RCPicker from '@rc-component/picker';
|
||||
import { merge } from '@rc-component/util';
|
||||
import { clsx } from 'clsx';
|
||||
import ContextIsolator from '../../_util/ContextIsolator';
|
||||
import { useZIndex } from '../../_util/hooks';
|
||||
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
|
||||
import { devUseWarning } from '../../_util/warning';
|
||||
import { ConfigContext } from '../../config-provider';
|
||||
import { useComponentConfig } from '../../config-provider/context';
|
||||
import DisabledContext from '../../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../../config-provider/hooks/useSize';
|
||||
import { FormItemInputContext } from '../../form/context';
|
||||
import useVariant from '../../form/hooks/useVariants';
|
||||
import { useLocale } from '../../locale';
|
||||
import { useCompactItemContext } from '../../space/Compact';
|
||||
import useMergedPickerSemantic from '../hooks/useMergedPickerSemantic';
|
||||
import enUS from '../locale/en_US';
|
||||
import useStyle from '../style';
|
||||
import { getPlaceholder, useIcons } from '../util';
|
||||
import { MONTH, MONTHPICKER, QUARTER, QUARTERPICKER, TIME, TIMEPICKER, WEEK, WEEKPICKER, YEAR, YEARPICKER } from './constant';
|
||||
import useComponents from './useComponents';
|
||||
import useSuffixIcon from './useSuffixIcon';
|
||||
const generatePicker = generateConfig => {
|
||||
const getPicker = (picker, displayName) => {
|
||||
const pickerType = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
|
||||
const Picker = /*#__PURE__*/forwardRef((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
getPopupContainer: customizeGetPopupContainer,
|
||||
components,
|
||||
style,
|
||||
className,
|
||||
size: customizeSize,
|
||||
bordered,
|
||||
placement,
|
||||
placeholder,
|
||||
disabled: customDisabled,
|
||||
status: customStatus,
|
||||
variant: customVariant,
|
||||
onCalendarChange,
|
||||
classNames,
|
||||
styles,
|
||||
dropdownClassName,
|
||||
popupClassName,
|
||||
popupStyle,
|
||||
rootClassName,
|
||||
suffixIcon,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
suffixIcon: contextSuffixIcon
|
||||
} = useComponentConfig(displayName === TIMEPICKER ? 'timePicker' : 'datePicker');
|
||||
// ====================== Warning =======================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning(displayName || 'DatePicker');
|
||||
process.env.NODE_ENV !== "production" ? warning(picker !== 'quarter', 'deprecated', `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`) : void 0;
|
||||
const deprecatedProps = {
|
||||
dropdownClassName: 'classNames.popup.root',
|
||||
popupClassName: 'classNames.popup.root',
|
||||
popupStyle: 'styles.popup.root',
|
||||
bordered: 'variant',
|
||||
onSelect: 'onCalendarChange'
|
||||
};
|
||||
Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
|
||||
warning.deprecated(!(oldProp in props), oldProp, newProp);
|
||||
});
|
||||
}
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
getPopupContainer,
|
||||
// Consume different styles according to different names
|
||||
[pickerType]: contextPickerConfig
|
||||
} = useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
||||
// ===================== Size =====================
|
||||
const {
|
||||
compactSize,
|
||||
compactItemClassnames
|
||||
} = useCompactItemContext(prefixCls, direction);
|
||||
const mergedSize = useSize(ctx => customizeSize ?? compactSize ?? ctx);
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
// =========== Merged Props for Semantic ===========
|
||||
const mergedProps = {
|
||||
...props,
|
||||
size: mergedSize,
|
||||
disabled: mergedDisabled,
|
||||
status: customStatus,
|
||||
variant: customVariant
|
||||
};
|
||||
// ========================= Style ==========================
|
||||
// Use original useMergedPickerSemantic for proper popup handling
|
||||
const [mergedClassNames, mergedStyles] = useMergedPickerSemantic(pickerType, classNames, styles, popupClassName || dropdownClassName, popupStyle, mergedProps);
|
||||
const innerRef = React.useRef(null);
|
||||
const [variant, enableVariantCls] = useVariant('datePicker', customVariant, bordered);
|
||||
const rootCls = useCSSVarCls(prefixCls);
|
||||
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
|
||||
const mergedRootClassName = clsx(hashId, cssVarCls, rootCls, rootClassName);
|
||||
useImperativeHandle(ref, () => innerRef.current);
|
||||
const additionalProps = {
|
||||
showToday: true
|
||||
};
|
||||
const mergedPicker = picker || props.picker;
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
// ==================== Legacy =====================
|
||||
const {
|
||||
onSelect,
|
||||
multiple
|
||||
} = restProps;
|
||||
const hasLegacyOnSelect = onSelect && picker === 'time' && !multiple;
|
||||
const onInternalCalendarChange = (date, dateStr, info) => {
|
||||
onCalendarChange?.(date, dateStr, info);
|
||||
if (hasLegacyOnSelect) {
|
||||
onSelect(date);
|
||||
}
|
||||
};
|
||||
// ===================== Icon =====================
|
||||
const [mergedAllowClear, removeIcon] = useIcons(props, prefixCls);
|
||||
// ================== components ==================
|
||||
const mergedComponents = useComponents(components);
|
||||
// ===================== FormItemInput =====================
|
||||
const formItemContext = useContext(FormItemInputContext);
|
||||
const {
|
||||
hasFeedback,
|
||||
status: contextStatus,
|
||||
feedbackIcon
|
||||
} = formItemContext;
|
||||
const mergedSuffixIcon = useSuffixIcon({
|
||||
picker: mergedPicker,
|
||||
hasFeedback,
|
||||
feedbackIcon,
|
||||
suffixIcon: suffixIcon === undefined ? contextSuffixIcon : suffixIcon
|
||||
});
|
||||
const [contextLocale] = useLocale('DatePicker', enUS);
|
||||
const locale = merge(contextLocale, props.locale || {});
|
||||
// ============================ zIndex ============================
|
||||
const [zIndex] = useZIndex('DatePicker', mergedStyles?.popup?.root?.zIndex);
|
||||
return /*#__PURE__*/React.createElement(ContextIsolator, {
|
||||
space: true
|
||||
}, /*#__PURE__*/React.createElement(RCPicker, {
|
||||
ref: innerRef,
|
||||
placeholder: getPlaceholder(locale, mergedPicker, placeholder),
|
||||
suffixIcon: mergedSuffixIcon,
|
||||
placement: placement,
|
||||
prevIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-prev-icon`
|
||||
}),
|
||||
nextIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-next-icon`
|
||||
}),
|
||||
superPrevIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-super-prev-icon`
|
||||
}),
|
||||
superNextIcon: /*#__PURE__*/React.createElement("span", {
|
||||
className: `${prefixCls}-super-next-icon`
|
||||
}),
|
||||
transitionName: `${rootPrefixCls}-slide-up`,
|
||||
picker: picker,
|
||||
onCalendarChange: onInternalCalendarChange,
|
||||
...additionalProps,
|
||||
...restProps,
|
||||
locale: locale.lang,
|
||||
getPopupContainer: customizeGetPopupContainer || getPopupContainer,
|
||||
generateConfig: generateConfig,
|
||||
components: mergedComponents,
|
||||
direction: direction,
|
||||
disabled: mergedDisabled,
|
||||
// Style
|
||||
prefixCls: prefixCls,
|
||||
rootClassName: mergedRootClassName,
|
||||
className: clsx({
|
||||
[`${prefixCls}-large`]: mergedSize === 'large',
|
||||
[`${prefixCls}-small`]: mergedSize === 'small',
|
||||
[`${prefixCls}-${variant}`]: enableVariantCls
|
||||
}, getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback), compactItemClassnames, contextPickerConfig?.className, className),
|
||||
style: {
|
||||
...contextPickerConfig?.style,
|
||||
...style
|
||||
},
|
||||
// Semantic Style
|
||||
classNames: mergedClassNames,
|
||||
styles: {
|
||||
...mergedStyles,
|
||||
popup: {
|
||||
...mergedStyles.popup,
|
||||
root: {
|
||||
...mergedStyles.popup.root,
|
||||
zIndex
|
||||
}
|
||||
}
|
||||
},
|
||||
allowClear: mergedAllowClear,
|
||||
removeIcon: removeIcon
|
||||
}));
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production' && displayName) {
|
||||
Picker.displayName = displayName;
|
||||
}
|
||||
return Picker;
|
||||
};
|
||||
const DatePicker = getPicker();
|
||||
const WeekPicker = getPicker(WEEK, WEEKPICKER);
|
||||
const MonthPicker = getPicker(MONTH, MONTHPICKER);
|
||||
const YearPicker = getPicker(YEAR, YEARPICKER);
|
||||
const QuarterPicker = getPicker(QUARTER, QUARTERPICKER);
|
||||
const TimePicker = getPicker(TIME, TIMEPICKER);
|
||||
return {
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
QuarterPicker
|
||||
};
|
||||
};
|
||||
export default generatePicker;
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
import type { GenerateConfig } from '@rc-component/picker/generate/index';
|
||||
import type { AnyObject } from '../../_util/type';
|
||||
export type { DatePickerPanelSemanticClassNames, DatePickerPanelSemanticName, DatePickerPanelSemanticStyles, DatePickerSemanticClassNames, DatePickerSemanticName, DatePickerSemanticStyles, PickerLocale, PickerProps, } from './interface';
|
||||
declare const generatePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => (<ValueType = DateType, IsMultiple extends boolean = false>(props: import("./interface").PickerPropsWithMultiple<DateType, import("./interface").PickerProps<DateType>, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
} & {
|
||||
displayName?: string;
|
||||
WeekPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: import("./interface").PickerPropsWithMultiple<DateType, Omit<import("./interface").PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
MonthPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: import("./interface").PickerPropsWithMultiple<DateType, Omit<import("./interface").PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
YearPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: import("./interface").PickerPropsWithMultiple<DateType, Omit<import("./interface").PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
RangePicker: import("react").ForwardRefExoticComponent<Omit<import("@rc-component/picker").RangePickerProps<DateType>, "classNames" | "styles" | "locale" | "generateConfig" | "hideHeader"> & {
|
||||
locale?: import("./interface").PickerLocale;
|
||||
size?: import("../../button").ButtonSize;
|
||||
placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
|
||||
bordered?: boolean;
|
||||
status?: import("../../_util/statusUtils").InputStatus;
|
||||
variant?: import("../../config-provider").Variant;
|
||||
dropdownClassName?: string;
|
||||
popupClassName?: string;
|
||||
rootClassName?: string;
|
||||
popupStyle?: React.CSSProperties;
|
||||
classNames?: import("./interface").DatePickerPickerClassNames<import("@rc-component/picker").RangePickerProps<DateType>> | undefined;
|
||||
styles?: import("./interface").DatePickerStylesType<import("@rc-component/picker").RangePickerProps<DateType>> | undefined;
|
||||
} & import("react").RefAttributes<import("@rc-component/picker").PickerRef>>;
|
||||
TimePicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: import("./interface").PickerPropsWithMultiple<DateType, Omit<import("./interface").GenericTimePickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
QuarterPicker: (<ValueType = DateType, IsMultiple extends boolean = false>(props: import("./interface").PickerPropsWithMultiple<DateType, Omit<import("./interface").PickerProps<DateType>, "picker">, ValueType, IsMultiple>) => React.ReactElement) & {
|
||||
displayName?: string;
|
||||
};
|
||||
};
|
||||
export default generatePicker;
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import generateRangePicker from './generateRangePicker';
|
||||
import generateSinglePicker from './generateSinglePicker';
|
||||
const generatePicker = generateConfig => {
|
||||
// =========================== Picker ===========================
|
||||
const {
|
||||
DatePicker,
|
||||
WeekPicker,
|
||||
MonthPicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
QuarterPicker
|
||||
} = generateSinglePicker(generateConfig);
|
||||
// ======================== Range Picker ========================
|
||||
const RangePicker = generateRangePicker(generateConfig);
|
||||
const MergedDatePicker = DatePicker;
|
||||
MergedDatePicker.WeekPicker = WeekPicker;
|
||||
MergedDatePicker.MonthPicker = MonthPicker;
|
||||
MergedDatePicker.YearPicker = YearPicker;
|
||||
MergedDatePicker.RangePicker = RangePicker;
|
||||
MergedDatePicker.TimePicker = TimePicker;
|
||||
MergedDatePicker.QuarterPicker = QuarterPicker;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
MergedDatePicker.displayName = 'DatePicker';
|
||||
}
|
||||
return MergedDatePicker;
|
||||
};
|
||||
export default generatePicker;
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
import type { PickerRef, PickerProps as RcPickerProps, RangePickerProps as RcRangePickerProps } from '@rc-component/picker';
|
||||
import type { Locale as RcPickerLocale } from '@rc-component/picker/interface';
|
||||
import type { SemanticClassNamesType, SemanticStylesType } from '../../_util/hooks';
|
||||
import type { InputStatus } from '../../_util/statusUtils';
|
||||
import type { AnyObject } from '../../_util/type';
|
||||
import type { Variant } from '../../config-provider';
|
||||
import type { SizeType } from '../../config-provider/SizeContext';
|
||||
import type { TimePickerLocale } from '../../time-picker';
|
||||
declare const _DataPickerPlacements: readonly ["bottomLeft", "bottomRight", "topLeft", "topRight"];
|
||||
type DataPickerPlacement = (typeof _DataPickerPlacements)[number];
|
||||
export type DatePickerSemanticName = keyof DatePickerSemanticClassNames & keyof DatePickerSemanticStyles;
|
||||
export type DatePickerPanelSemanticName = keyof DatePickerPanelSemanticClassNames & keyof DatePickerPanelSemanticStyles;
|
||||
export type DatePickerSemanticClassNames = {
|
||||
root?: string;
|
||||
prefix?: string;
|
||||
input?: string;
|
||||
suffix?: string;
|
||||
};
|
||||
export type DatePickerSemanticStyles = {
|
||||
root?: React.CSSProperties;
|
||||
prefix?: React.CSSProperties;
|
||||
input?: React.CSSProperties;
|
||||
suffix?: React.CSSProperties;
|
||||
};
|
||||
export type DatePickerPanelSemanticClassNames = {
|
||||
root?: string;
|
||||
header?: string;
|
||||
body?: string;
|
||||
content?: string;
|
||||
item?: string;
|
||||
footer?: string;
|
||||
container?: string;
|
||||
};
|
||||
export type DatePickerPanelSemanticStyles = {
|
||||
root?: React.CSSProperties;
|
||||
header?: React.CSSProperties;
|
||||
body?: React.CSSProperties;
|
||||
content?: React.CSSProperties;
|
||||
item?: React.CSSProperties;
|
||||
footer?: React.CSSProperties;
|
||||
container?: React.CSSProperties;
|
||||
};
|
||||
export type DatePickerClassNamesType<P> = SemanticClassNamesType<InjectDefaultProps<P>, DatePickerSemanticClassNames, {
|
||||
popup?: string | DatePickerPanelSemanticClassNames;
|
||||
}>;
|
||||
export type DatePickerStylesType<P> = SemanticStylesType<InjectDefaultProps<P>, DatePickerSemanticStyles, {
|
||||
popup?: DatePickerPanelSemanticStyles;
|
||||
}>;
|
||||
export type PickerLocale = {
|
||||
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
|
||||
timePickerLocale: TimePickerLocale;
|
||||
} & AdditionalPickerLocaleProps;
|
||||
/** @deprecated **Useless**. */
|
||||
export type AdditionalPickerLocaleProps = {
|
||||
/**
|
||||
* @deprecated **Invalid**, Please use `lang.fieldDateFormat` instead.
|
||||
* @see [Migration Guide](https://github.com/ant-design/ant-design/discussions/53011)
|
||||
*/
|
||||
dateFormat?: string;
|
||||
/**
|
||||
* @deprecated **Invalid**, Please use `lang.fieldDateTimeFormat` instead,
|
||||
* @see [Migration Guide](https://github.com/ant-design/ant-design/discussions/53011)
|
||||
*/
|
||||
dateTimeFormat?: string;
|
||||
/**
|
||||
* @deprecated **Invalid**, Please use `lang.fieldWeekFormat` instead,
|
||||
* @see [Migration Guide](https://github.com/ant-design/ant-design/discussions/53011)
|
||||
*/
|
||||
weekFormat?: string;
|
||||
/**
|
||||
* @deprecated **Invalid**, Please use `lang.fieldWeekFormat` instead,
|
||||
* @see [Migration Guide](https://github.com/ant-design/ant-design/discussions/53011)
|
||||
*/
|
||||
monthFormat?: string;
|
||||
};
|
||||
export type AdditionalPickerLocaleLangProps = {
|
||||
placeholder: string;
|
||||
yearPlaceholder?: string;
|
||||
quarterPlaceholder?: string;
|
||||
monthPlaceholder?: string;
|
||||
weekPlaceholder?: string;
|
||||
rangeYearPlaceholder?: [string, string];
|
||||
rangeQuarterPlaceholder?: [string, string];
|
||||
rangeMonthPlaceholder?: [string, string];
|
||||
rangeWeekPlaceholder?: [string, string];
|
||||
rangePlaceholder?: [string, string];
|
||||
};
|
||||
export type PickerClassNames = Omit<NonNullable<RcPickerProps['classNames']>, 'popup'> & {
|
||||
popup?: string | NonNullable<RcPickerProps['classNames']>['popup'];
|
||||
};
|
||||
export type DatePickerPickerClassNames<T> = DatePickerClassNamesType<T>;
|
||||
export type RequiredSemanticPicker = Readonly<[
|
||||
classNames: DatePickerSemanticClassNames & {
|
||||
popup: DatePickerPanelSemanticClassNames;
|
||||
},
|
||||
styles: DatePickerSemanticStyles & {
|
||||
popup: DatePickerPanelSemanticStyles;
|
||||
}
|
||||
]>;
|
||||
export type InjectDefaultProps<Props> = Omit<Props, 'locale' | 'generateConfig' | 'hideHeader' | 'classNames' | 'styles'> & {
|
||||
locale?: PickerLocale;
|
||||
size?: SizeType;
|
||||
placement?: DataPickerPlacement;
|
||||
/** @deprecated Use `variant` instead */
|
||||
bordered?: boolean;
|
||||
status?: InputStatus;
|
||||
/**
|
||||
* @since 5.13.0
|
||||
* @default "outlined"
|
||||
*/
|
||||
variant?: Variant;
|
||||
/**
|
||||
* @deprecated `dropdownClassName` is deprecated which will be removed in next major
|
||||
* version.Please use `classNames.popup.root` instead.
|
||||
*/
|
||||
dropdownClassName?: string;
|
||||
/**
|
||||
* @deprecated please use `classNames.popup.root` instead
|
||||
*/
|
||||
popupClassName?: string;
|
||||
rootClassName?: string;
|
||||
/**
|
||||
* @deprecated please use `styles.popup.root` instead
|
||||
*/
|
||||
popupStyle?: React.CSSProperties;
|
||||
classNames?: DatePickerPickerClassNames<Props>;
|
||||
styles?: DatePickerStylesType<Props>;
|
||||
};
|
||||
/** Base Single Picker props */
|
||||
export type PickerProps<DateType extends AnyObject = any> = InjectDefaultProps<RcPickerProps<DateType>>;
|
||||
/** Base Range Picker props */
|
||||
export type RangePickerProps<DateType extends AnyObject = any> = InjectDefaultProps<RcRangePickerProps<DateType>>;
|
||||
export type GenericTimePickerProps<DateType extends AnyObject = any> = Omit<PickerProps<DateType>, 'picker' | 'showTime'> & {
|
||||
/** @deprecated Please use `onCalendarChange` instead */
|
||||
onSelect?: (value: DateType) => void;
|
||||
};
|
||||
type MultiValueType<ValueType, IsMultiple extends boolean = false> = IsMultiple extends true ? ValueType[] : ValueType;
|
||||
/**
|
||||
* Single Picker has the `multiple` prop,
|
||||
* which will make the `value` be `DateType[]` type.
|
||||
* Here to be a generic which accept the `ValueType` for developer usage.
|
||||
*/
|
||||
export type PickerPropsWithMultiple<DateType extends AnyObject = any, InnerPickerProps extends PickerProps<DateType> = PickerProps<DateType>, ValueType = DateType, IsMultiple extends boolean = false> = Omit<InnerPickerProps, 'defaultValue' | 'value' | 'onChange' | 'onOk'> & React.RefAttributes<PickerRef> & {
|
||||
multiple?: IsMultiple;
|
||||
defaultValue?: MultiValueType<ValueType, IsMultiple> | null;
|
||||
value?: MultiValueType<ValueType, IsMultiple> | null;
|
||||
onChange?: (date: MultiValueType<ValueType, IsMultiple> | null, dateString: MultiValueType<string, IsMultiple> | null) => void;
|
||||
onOk?: (date: MultiValueType<ValueType, IsMultiple>) => void;
|
||||
};
|
||||
export {};
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
const _DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'];
|
||||
export {};
|
||||
Generated
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
import type { Components } from '@rc-component/picker/interface';
|
||||
export default function useComponents(components?: Components): {
|
||||
time?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
date?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
month?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
week?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
year?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
quarter?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
decade?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
datetime?: import("react").ComponentType<import("@rc-component/picker/interface").SharedPanelProps<any>> | undefined;
|
||||
button: string | import("react").ComponentClass<any, any> | import("react").FC<Readonly<import("../..").ButtonProps>>;
|
||||
input?: React.ComponentType<any> | string;
|
||||
};
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
import { useMemo } from 'react';
|
||||
import PickerButton from '../PickerButton';
|
||||
export default function useComponents(components) {
|
||||
return useMemo(() => ({
|
||||
button: PickerButton,
|
||||
...components
|
||||
}), [components]);
|
||||
}
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import type { PickerMode } from '@rc-component/picker/interface';
|
||||
interface UseSuffixIconProps {
|
||||
picker?: PickerMode;
|
||||
hasFeedback?: boolean;
|
||||
feedbackIcon?: React.ReactNode;
|
||||
suffixIcon?: React.ReactNode;
|
||||
}
|
||||
declare const useSuffixIcon: ({ picker, hasFeedback, feedbackIcon, suffixIcon }: UseSuffixIconProps) => string | number | bigint | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null;
|
||||
export default useSuffixIcon;
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import CalendarOutlined from "@ant-design/icons/es/icons/CalendarOutlined";
|
||||
import ClockCircleOutlined from "@ant-design/icons/es/icons/ClockCircleOutlined";
|
||||
import { TIME } from './constant';
|
||||
const useSuffixIcon = ({
|
||||
picker,
|
||||
hasFeedback,
|
||||
feedbackIcon,
|
||||
suffixIcon
|
||||
}) => {
|
||||
if (suffixIcon === null || suffixIcon === false) {
|
||||
return null;
|
||||
}
|
||||
if (suffixIcon === true || suffixIcon === undefined) {
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null, picker === TIME ? /*#__PURE__*/React.createElement(ClockCircleOutlined, null) : /*#__PURE__*/React.createElement(CalendarOutlined, null), hasFeedback && feedbackIcon);
|
||||
}
|
||||
return suffixIcon;
|
||||
};
|
||||
export default useSuffixIcon;
|
||||
Reference in New Issue
Block a user