|
| 1 | +import { |
| 2 | + SpringConfig, |
| 3 | + SpringBaseProps, |
| 4 | + TransitionKeyProps, |
| 5 | + State, |
| 6 | +} from './universal' |
| 7 | +export { SpringConfig, SpringBaseProps, TransitionKeyProps, State } |
| 8 | + |
| 9 | +/** List from `function getForwardProps` in `src/shared/helpers` */ |
| 10 | +type ExcludedProps = |
| 11 | + | 'to' |
| 12 | + | 'from' |
| 13 | + | 'config' |
| 14 | + | 'native' |
| 15 | + | 'onStart' |
| 16 | + | 'onRest' |
| 17 | + | 'onFrame' |
| 18 | + | 'children' |
| 19 | + | 'reset' |
| 20 | + | 'reverse' |
| 21 | + | 'force' |
| 22 | + | 'immediate' |
| 23 | + | 'impl' |
| 24 | + | 'inject' |
| 25 | + | 'delay' |
| 26 | + | 'attach' |
| 27 | + | 'destroyed' |
| 28 | + | 'track' |
| 29 | + | 'interpolateTo' |
| 30 | + | 'autoStart' |
| 31 | + | 'ref' |
| 32 | +export type ForwardedProps<T> = Pick<T, Exclude<keyof T, ExcludedProps>> |
| 33 | +// NOTE: because of the Partial, this makes a weak type, which can have excess props |
| 34 | +type InferFrom<T extends object> = T extends { to: infer TTo } |
| 35 | + ? Partial<TTo> |
| 36 | + : Partial<ForwardedProps<T>> |
| 37 | + |
| 38 | +// This is similar to "Omit<A, keyof B> & B", |
| 39 | +// but with a delayed evaluation that still allows A to be inferrable |
| 40 | +type Merge<A, B> = { [K in keyof A]: K extends keyof B ? B[K] : A[K] } & B |
| 41 | + |
| 42 | +export type SetUpdateFn<DS extends object> = (ds: DS) => void |
| 43 | + |
| 44 | +// The hooks do emulate React's 'ref' by accepting { ref?: React.RefObject<Controller> } and |
| 45 | +// updating it. However, there are no types for Controller, and I assume it is intentionally so. |
| 46 | +export interface HooksBaseProps |
| 47 | + extends Pick<SpringBaseProps, Exclude<keyof SpringBaseProps, 'config'>> { |
| 48 | + // there is an undocumented onKeyframesHalt which passes the controller instance, |
| 49 | + // so it also cannot be typed unless Controller types are written |
| 50 | +} |
| 51 | + |
| 52 | +export interface UseSpringBaseProps extends HooksBaseProps { |
| 53 | + config?: SpringBaseProps['config'] |
| 54 | +} |
| 55 | + |
| 56 | +export type UseSpringProps<DS extends UseSpringBaseProps> = Merge< |
| 57 | + DS, |
| 58 | + { |
| 59 | + from?: InferFrom<DS> |
| 60 | + /** |
| 61 | + * Callback when the animation comes to a still-stand |
| 62 | + */ |
| 63 | + onRest?(ds: InferFrom<DS>): void |
| 64 | + } |
| 65 | +> |
| 66 | + |
| 67 | +// there's a third value in the tuple but it's not public API (?) |
| 68 | +export function useSpring<DS extends object>( |
| 69 | + getProps: () => UseSpringProps<DS> |
| 70 | +): [ForwardedProps<DS>, SetUpdateFn<DS>] |
| 71 | +export function useSpring<DS extends object>( |
| 72 | + values: UseSpringProps<DS> |
| 73 | +): ForwardedProps<DS> |
| 74 | + |
| 75 | +// there's a third value in the tuple but it's not public API (?) |
| 76 | +export function useTrail<DS extends object>( |
| 77 | + count: number, |
| 78 | + getProps: () => UseSpringProps<DS> |
| 79 | +): [ForwardedProps<DS>[], SetUpdateFn<DS>] |
| 80 | +export function useTrail<DS extends object>( |
| 81 | + count: number, |
| 82 | + values: UseSpringProps<DS> |
| 83 | +): ForwardedProps<DS>[] // safe to modify (result of .map) |
| 84 | + |
| 85 | +export interface UseTransitionProps<TItem, DS extends object> |
| 86 | + extends HooksBaseProps { |
| 87 | + items: ReadonlyArray<TItem> | null | undefined |
| 88 | + /** |
| 89 | + * Spring config, or for individual items: fn(item => config) |
| 90 | + * @default config.default |
| 91 | + */ |
| 92 | + config?: SpringConfig | ((item: TItem) => SpringConfig) |
| 93 | + /** |
| 94 | + * The same keys you would normally hand over to React in a list. Keys can be specified as a key-accessor function, an array of keys, or a single value |
| 95 | + */ |
| 96 | + keys?: |
| 97 | + | ((item: TItem) => TransitionKeyProps) |
| 98 | + | ReadonlyArray<TransitionKeyProps> |
| 99 | + | TransitionKeyProps |
| 100 | + |
| 101 | + /** |
| 102 | + * When true enforces that an item can only occur once instead of allowing two or more items with the same key to co-exist in a stack |
| 103 | + * @default false |
| 104 | + */ |
| 105 | + unique?: boolean |
| 106 | + /** |
| 107 | + * Trailing delay in ms |
| 108 | + */ |
| 109 | + trail?: number |
| 110 | + |
| 111 | + from?: InferFrom<DS> |
| 112 | + /** |
| 113 | + * Values that apply to new elements, or: item => values |
| 114 | + * @default {} |
| 115 | + */ |
| 116 | + enter?: InferFrom<DS> | ((item: TItem) => InferFrom<DS>) |
| 117 | + /** |
| 118 | + * Values that apply to leaving elements, or: item => values |
| 119 | + * @default {} |
| 120 | + */ |
| 121 | + leave?: InferFrom<DS> | ((item: TItem) => InferFrom<DS>) |
| 122 | + /** |
| 123 | + * Values that apply to elements that are neither entering nor leaving (you can use this to update present elements), or: item => values |
| 124 | + */ |
| 125 | + update?: InferFrom<DS> | ((item: TItem) => InferFrom<DS>) |
| 126 | +} |
| 127 | + |
| 128 | +export interface UseTransitionResult<TItem, DS extends object> { |
| 129 | + item: TItem |
| 130 | + key: string |
| 131 | + state: State |
| 132 | + props: ForwardedProps<DS> |
| 133 | +} |
| 134 | + |
| 135 | +export function useTransition<TItem, DS extends object>( |
| 136 | + values: Merge<DS, UseTransitionProps<TItem, DS>> |
| 137 | +): UseTransitionResult<TItem, ForwardedProps<DS>>[] // result array is safe to modify |
| 138 | + |
| 139 | +// higher order hooks 🤯 |
| 140 | +export namespace useKeyframes { |
| 141 | + // this kind of higher order hook requires higher kinded types to type correctly at all |
| 142 | + // this is the best approximation I can get to....... and there sure are anys around 🤯 |
| 143 | + |
| 144 | + // the docs says it receives a 3rd argument with the component's own props, but it's only |
| 145 | + // ever called with two (https://github.com/react-spring/react-spring/blob/v7.1.3/src/hooks/KeyframesHook.js#L25) |
| 146 | + export type KeyframeFn<DS extends object> = ( |
| 147 | + next: (props: UseSpringProps<DS>) => Promise<void>, |
| 148 | + cancel: () => void |
| 149 | + ) => Promise<void> |
| 150 | + export interface SpringKeyframeSlotsConfig extends HooksBaseProps { |
| 151 | + // this is way too self-referential to type correctly |
| 152 | + // both onRest and config have to have vague types... 😭 |
| 153 | + |
| 154 | + /** |
| 155 | + * Callback when the animation comes to a still-stand |
| 156 | + */ |
| 157 | + onRest?(ds: any): void |
| 158 | + config?: |
| 159 | + | SpringConfig |
| 160 | + | ReadonlyArray<SpringConfig> |
| 161 | + | ((slot: string) => SpringConfig | ReadonlyArray<SpringConfig>) |
| 162 | + } |
| 163 | + export interface TrailKeyframeSlotsConfig<TItem> |
| 164 | + extends SpringKeyframeSlotsConfig { |
| 165 | + items: ReadonlyArray<TItem> |
| 166 | + } |
| 167 | + |
| 168 | + export type ResolveKeyframeSlotValue<T> = T extends KeyframeFn<infer V> |
| 169 | + ? V |
| 170 | + : T extends ReadonlyArray<infer U> |
| 171 | + ? U extends KeyframeFn<infer V> |
| 172 | + ? V |
| 173 | + : U extends Function // guard against accidentally putting in a KeyframeFn function |
| 174 | + ? never |
| 175 | + : U |
| 176 | + : T extends Function // same guard, but when the function is not in an array |
| 177 | + ? never |
| 178 | + : T |
| 179 | + |
| 180 | + // fun fact: the state is literally named "undefined" if you're using this overload |
| 181 | + // the docs are vague but it seems this just loops the one animation forever? |
| 182 | + export function spring<DS extends object>( |
| 183 | + animation: |
| 184 | + | ReadonlyArray<DS> |
| 185 | + | ReadonlyArray<KeyframeFn<DS>> |
| 186 | + | KeyframeFn<DS>, |
| 187 | + initialProps?: UseSpringProps<DS> |
| 188 | + ): UseSpringKeyframes<DS> |
| 189 | + // unfortunately, it's not possible to infer the type of the callback functions (if any are given) |
| 190 | + // while also remaining possible to infer the slot names. Callback functions have to be cast with |
| 191 | + // `as useKeyframes.KeyframeFn<{ ... }>`. |
| 192 | + // it's also not possible to specify the types of the values inside TSlots. This is a mess. |
| 193 | + export function spring<TSlots extends object>( |
| 194 | + slots: TSlots & SpringKeyframeSlotsConfig, |
| 195 | + // also unfortunately not possible to strongly type this either |
| 196 | + initialProps?: UseSpringProps<any> |
| 197 | + ): UseSpringKeyframesWithSlots<TSlots> |
| 198 | + |
| 199 | + export function trail<DS extends object>( |
| 200 | + animation: |
| 201 | + | ReadonlyArray<DS> |
| 202 | + | ReadonlyArray<KeyframeFn<DS>> |
| 203 | + | KeyframeFn<DS>, |
| 204 | + initialProps?: UseSpringProps<DS> |
| 205 | + ): UseTrailKeyframes<DS> |
| 206 | + export function trail<TItem, TSlots extends object>( |
| 207 | + slots: TSlots & TrailKeyframeSlotsConfig<TItem>, |
| 208 | + initialProps?: UseSpringProps<any> |
| 209 | + ): UseTrailKeyframesWithSlots<TSlots> |
| 210 | + |
| 211 | + export type UseSpringKeyframesWithSlots<TSlots extends object> = |
| 212 | + // there's a bug in the implementation that actually should cause a crash |
| 213 | + // because there is no second argument, but because it is built with babel on loose mode, |
| 214 | + // it doesn't... |
| 215 | + <TSlot extends Exclude<keyof TSlots, keyof SpringKeyframeSlotsConfig>>( |
| 216 | + slot: TSlot |
| 217 | + ) => ForwardedProps<ResolveKeyframeSlotValue<TSlots[TSlot]>> |
| 218 | + // this one crashes "even more" because both values are undefined |
| 219 | + export type UseSpringKeyframes<DS extends object> = () => ForwardedProps<DS> |
| 220 | + |
| 221 | + export type UseTrailKeyframesWithSlots<TSlots extends object> = < |
| 222 | + TSlot extends Exclude<keyof TSlots, keyof TrailKeyframeSlotsConfig<any>> |
| 223 | + >( |
| 224 | + count: number, |
| 225 | + slot: TSlot |
| 226 | + ) => ForwardedProps<ResolveKeyframeSlotValue<TSlots[TSlot]>>[] |
| 227 | + |
| 228 | + export type UseTrailKeyframes<DS extends object> = ( |
| 229 | + count: number |
| 230 | + ) => ForwardedProps<DS>[] |
| 231 | +} |
0 commit comments