🤖 Merge PR #65395 Update react-swipeable-views prop types with action prop by @shawngustaw

* Update react-swipeable-views prop types with action prop

* Run prettier

* Remove dependency

---------

Co-authored-by: Shawn Gustaw <shawn@jump.com>
This commit is contained in:
Shawn Gustaw
2023-06-12 11:28:11 -07:00
committed by GitHub
parent 2a627f1aaa
commit 21fa6a0315
2 changed files with 30 additions and 16 deletions

View File

@@ -13,9 +13,17 @@ export type OnTransitionEndCallback = () => void;
export type OnSwitchingCallback = (index: number, type: OnSwitchingCallbackTypeDescriptor) => void;
export type OnSwitchingCallbackTypeDescriptor = "move" | "end";
export type OnSwitchingCallbackTypeDescriptor = 'move' | 'end';
export type AxisType = "x" | "x-reverse" | "y" | "y-reverse";
export type AxisType = 'x' | 'x-reverse' | 'y' | 'y-reverse';
export interface Actions {
updateHeight: UpdateHeightAction;
}
export type ActionCallback = (actions: Actions) => void;
export type UpdateHeightAction = () => void;
export interface SpringConfig {
duration: string;
@@ -23,7 +31,7 @@ export interface SpringConfig {
delay: string;
}
export interface SwipeableViewsProps extends React.HTMLProps<HTMLDivElement> {
export interface SwipeableViewsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action'> {
animateHeight?: boolean | undefined;
animateTransitions?: boolean | undefined;
axis?: AxisType | undefined;
@@ -46,6 +54,7 @@ export interface SwipeableViewsProps extends React.HTMLProps<HTMLDivElement> {
springConfig?: SpringConfig | undefined;
slideClassName?: string | undefined;
threshold?: number | undefined;
action?: ActionCallback;
}
export interface SwipeableViewsState {
@@ -57,4 +66,4 @@ export interface SwipeableViewsState {
displaySameSlide?: boolean | undefined;
}
export default class SwipeableViews extends React.Component<SwipeableViewsProps, SwipeableViewsState> { }
export default class SwipeableViews extends React.Component<SwipeableViewsProps, SwipeableViewsState> {}

View File

@@ -1,11 +1,11 @@
import * as React from 'react';
import SwipeableViews,
{
import SwipeableViews, {
OnChangeIndexCallback,
OnSwitchingCallback,
OnSwitchingCallbackTypeDescriptor,
OnTransitionEndCallback,
SpringConfig
SpringConfig,
ActionCallback,
} from 'react-swipeable-views';
const onChangeIndex: OnChangeIndexCallback = (indexNew: number, indexLatest: number) => {
@@ -17,17 +17,21 @@ const onSwitching: OnSwitchingCallback = (index: number, type: OnSwitchingCallba
};
const onTransitionEnd: OnTransitionEndCallback = () => {
console.log("Transition end.");
console.log('Transition end.');
};
const style: React.CSSProperties = {
height: 300
height: 300,
};
const springConfig: SpringConfig = {
duration: "0.5s",
easeFunction: "cubic-bezier(0.1, 0.35, 0.2, 1)",
delay: "0.5s",
duration: '0.5s',
easeFunction: 'cubic-bezier(0.1, 0.35, 0.2, 1)',
delay: '0.5s',
};
const action: ActionCallback = actions => {
console.log('Receiving actions: ', Object.keys(actions).join(', '));
};
React.createElement(SwipeableViews, {
@@ -40,12 +44,13 @@ React.createElement(SwipeableViews, {
slideStyle: style,
style,
threshold: 100,
className: "swipable-view",
title: "Carousel",
className: 'swipable-view',
title: 'Carousel',
onTransitionEnd,
axis: "x-reverse",
axis: 'x-reverse',
springConfig,
disableLazyLoading: false
disableLazyLoading: false,
action,
});
React.createElement(SwipeableViews, {});