type(ui): fix locale wrapper type

packages/ui/src/DateRanger/Ranger.tsx

@@ -1,3 +1,4 @@
+import type { ElementRef } from 'react';
 import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
 import {
   Button,
@@ -88,12 +89,18 @@ export interface DateRangerProps
   defaultValue?: RangeValue;
   size?: 'small' | 'large' | 'middle';
   tooltipProps?: TooltipProps;
-  locale: any;
+  locale?: any;
 }
 
+export type DateRangerHandle = {
+  updateCurrentTime: () => void;
+};
+
+export type DateRangerHandleRef = ElementRef<typeof Ranger>;
+
 const prefix = getPrefix('date-ranger');
 
-const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
+const Ranger = React.forwardRef<DateRangerHandle, DateRangerProps>((props, ref) => {
   const {
     selects = [
       NEAR_1_MINUTES,

packages/ui/src/DateRanger/demo/basic.tsx

@@ -7,7 +7,7 @@ export default () => {
   const options = [
     { label: 'hasRewind', value: 'hasRewind' },
     { label: 'hasForward', value: 'hasForward' },
-    { label: 'hasNow', value: 'hasNow' },
+    { label: 'hasSync', value: 'hasSync' },
   ];
 
   const [state, setState] = useState(options.map(item => item.value));
@@ -36,7 +36,7 @@ export default () => {
         allowClear={true}
         hasForward={getValue('hasForward')}
         hasRewind={getValue('hasRewind')}
-        hasNow={getValue('hasNow')}
+        hasSync={getValue('hasSync')}
       />
     </div>
   );

packages/ui/src/DateRanger/demo/updateCurrentTime.tsx

@@ -8,7 +8,7 @@ type TimeRangeRef = {
 };
 
 export default () => {
-  const ref = useRef<TimeRangeRef>();
+  const ref = useRef<TimeRangeRef>(null);
   const [timeRange, setTimeRange] = useState([]);
   const format = 'YYYY-MM-DD HH:mm:ss';
   return (

packages/ui/src/FullscreenBox/demo/ListToolbarDemo.tsx

@@ -8,7 +8,7 @@ import { SimpleTable } from './SimpleTable';
 
 export default () => {
   const [fullscreen, setFullscreen] = useState(false);
-  const boxRef = useRef<typeof FullscreenBox>();
+  const boxRef = useRef<React.ElementRef<typeof FullscreenBox>>();
 
   function handleFullscreenChange(fs) {
     setFullscreen(fs);

packages/ui/src/Ranger/index.ts

@@ -30,7 +30,37 @@ import InternalRanger from './Ranger';
 export * from './QuickPicker';
 export * from './Ranger';
 
-const Ranger = InternalRanger;
+type InternalRangerType = typeof InternalRanger;
+
+export interface RangerInstance extends InternalRangerType {
+  QuickPicker: typeof QuickPicker;
+  NEAR_1_MINUTES: typeof NEAR_1_MINUTES;
+  NEAR_5_MINUTES: typeof NEAR_5_MINUTES;
+  NEAR_10_MINUTES: typeof NEAR_10_MINUTES;
+  NEAR_20_MINUTES: typeof NEAR_20_MINUTES;
+  NEAR_30_MINUTES: typeof NEAR_30_MINUTES;
+  NEAR_1_HOURS: typeof NEAR_1_HOURS;
+  NEAR_2_HOURS: typeof NEAR_2_HOURS;
+  NEAR_3_HOURS: typeof NEAR_3_HOURS;
+  NEAR_6_HOURS: typeof NEAR_6_HOURS;
+  TODAY: typeof TODAY;
+  YESTERDAY: typeof YESTERDAY;
+  TOMORROW: typeof TOMORROW;
+  THIS_WEEK: typeof THIS_WEEK;
+  LAST_WEEK: typeof LAST_WEEK;
+  NEXT_WEEK: typeof NEXT_WEEK;
+  THIS_MONTH: typeof THIS_MONTH;
+  LAST_MONTH: typeof LAST_MONTH;
+  NEXT_MONTH: typeof NEXT_MONTH;
+  THIS_QUARTER: typeof THIS_QUARTER;
+  LAST_QUARTER: typeof LAST_QUARTER;
+  NEXT_QUARTER: typeof NEXT_QUARTER;
+  THIS_YEAR: typeof THIS_YEAR;
+  LAST_YEAR: typeof LAST_YEAR;
+  NEXT_YEAR: typeof NEXT_YEAR;
+}
+
+const Ranger = InternalRanger as RangerInstance;
 
 // 内置 ranges
 Ranger.NEAR_1_MINUTES = NEAR_1_MINUTES;

packages/ui/src/TagSelect/Group.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { getPrefix } from '../_util';
-import React, { ReactNode, useMemo, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import TagSelectContext from './TagSelectContext';
 import Item from './Item';
 import useStyle from './style';
@@ -21,11 +22,11 @@ export interface TagSelectGroupProps {
   disabled?: boolean;
   className?: string;
   multiple?: boolean;
-  defaultValue?: TagSelectValueType | Array<TagSelectValueType>;
-  value?: TagSelectValueType | Array<TagSelectValueType>;
+  defaultValue?: TagSelectValueType | TagSelectValueType[];
+  value?: TagSelectValueType | TagSelectValueType[];
   size?: string;
-  options?: Array<TagSelectOptionType | string | number>;
-  onChange?: (value: Array<TagSelectValueType> | TagSelectValueType) => void;
+  options?: (TagSelectOptionType | string | number)[];
+  onChange?: (value: TagSelectValueType[] | TagSelectValueType) => void;
 }
 
 function toArray(value) {
@@ -50,10 +51,10 @@ const Group: React.FC<TagSelectGroupProps> = ({
 }) => {
   const prefix = getPrefix('tag-select');
   const { wrapSSR, hashId } = useStyle(prefix);
-  const [value, setValue] = useState<Array<TagSelectValueType>>(
+  const [value, setValue] = useState<TagSelectValueType[]>(
     toArray(defaultValue || restProps.value)
   );
-  const [registeredValues, setRegisteredValues] = React.useState<Array<TagSelectValueType>>([]);
+  const [registeredValues, setRegisteredValues] = React.useState<TagSelectValueType[]>([]);
 
   const registerValue = (val: TagSelectValueType) => {
     setRegisteredValues(prev => [...prev, val]);

packages/ui/src/locale/LocaleWrapper.tsx

@@ -12,8 +12,13 @@ export interface LocaleWrapperInput {
   defaultLocale: any;
 }
 
+type CTR<T> =
+  T extends React.ForwardRefExoticComponent<object & React.RefAttributes<infer R>> ? R : never;
+
 export default ({ componentName, defaultLocale }: LocaleWrapperInput) =>
-  <BaseProps extends LocaleWrapperProps>(BaseComponent: React.ComponentType<BaseProps>) => {
+  <BaseProps extends LocaleWrapperProps>(
+    BaseComponent: React.ForwardRefExoticComponent<BaseProps> | React.ComponentType<BaseProps>
+  ) => {
     type WrappedComponentProps = BaseProps & { forwardedRef: Ref<typeof BaseComponent> };
 
     class Hoc extends React.Component<WrappedComponentProps> {
@@ -49,7 +54,7 @@ export default ({ componentName, defaultLocale }: LocaleWrapperInput) =>
 
     // 高阶组件需要转发ref
     // 参考: https://zh-hans.reactjs.org/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components
-    const ForwardComponent = React.forwardRef<typeof BaseComponent, BaseProps>(
+    const ForwardComponent = React.forwardRef<CTR<typeof BaseComponent>, BaseProps>(
       // @ts-ignore
       (props: BaseProps, ref) => <Hoc {...(props as BaseProps)} forwardedRef={ref} />
     );