Skip to content

Commit

Permalink
feat(transition): No longer use findDOMNode for transitions
Browse files Browse the repository at this point in the history
chore(transition): updated packages and documentation for new transition API

chore(transition): Update states and tree to new transition API

chore(transition): update menu for new transition API

chore(transition): converted most of the remaining packages for new transition API

chore(transition): partially converted tabs package to new transition API

chore(transition): Removed the temporary transition2 package

chore(transition): Update tabs to use new transition API
  • Loading branch information
mlaursen committed Nov 24, 2021
1 parent 2d79f93 commit cb952da
Show file tree
Hide file tree
Showing 124 changed files with 7,721 additions and 3,831 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
"@types/react": "^17.0.36",
"@types/react-dom": "^17.0.11",
"@types/react-test-renderer": "^17.0.1",
"@types/react-transition-group": "^4.4.3",
"chokidar": "^3.5.2",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "^3.3.0",
Expand Down
3 changes: 1 addition & 2 deletions packages/alert/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@
"@react-md/transition": "^3.1.0",
"@react-md/typography": "^3.1.0",
"@react-md/utils": "^3.1.0",
"classnames": "^2.3.1",
"react-transition-group": "^4.4.2"
"classnames": "^2.3.1"
},
"devDependencies": {
"react": "^17.0.2",
Expand Down
17 changes: 9 additions & 8 deletions packages/alert/src/Toast.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { forwardRef, HTMLAttributes, ReactNode } from "react";
import cn from "classnames";
import CSSTransition from "react-transition-group/CSSTransition";
import { OverridableCSSTransitionProps } from "@react-md/transition";
import {
CSSTransition,
CSSTransitionComponentProps,
} from "@react-md/transition";
import { bem } from "@react-md/utils";

import { DEFAULT_TOAST_CLASSNAMES, DEFAULT_TOAST_TIMEOUT } from "./constants";

export interface ToastProps
extends HTMLAttributes<HTMLDivElement>,
Omit<OverridableCSSTransitionProps, "mountOnEnter" | "unmountOnExit"> {
Omit<CSSTransitionComponentProps, "temporary"> {
/**
* Boolean if the main message content should be stacked above the action
* button. This prop is invalid if an `action` is not provided.
Expand Down Expand Up @@ -62,12 +64,14 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
visible,
...props
},
ref
nodeRef
) {
return (
<CSSTransition
in={visible}
appear
nodeRef={nodeRef}
temporary
transitionIn={visible}
onEnter={onEnter}
onEntering={onEntering}
onEntered={onEntered}
Expand All @@ -76,12 +80,9 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
onExited={onExited}
timeout={timeout}
classNames={classNames}
mountOnEnter
unmountOnExit
>
<div
{...props}
ref={ref}
className={cn(
block({
stacked,
Expand Down
30 changes: 20 additions & 10 deletions packages/alert/src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
import { TransitionTimeout } from "@react-md/transition";
import type {
CSSTransitionClassNamesObject,
TransitionTimeout,
} from "@react-md/transition";

/**
* @remarks \@since 2.4.0
*/
export const DEFAULT_TOAST_TIMEOUT: TransitionTimeout = 150;
export const DEFAULT_TOAST_CLASSNAMES: CSSTransitionClassNames = {
appear: "rmd-toast--enter",
appearActive: "rmd-toast--enter-active",
enter: "rmd-toast--enter",
enterActive: "rmd-toast--enter-active",
exit: "rmd-toast--exit",
exitActive: "rmd-toast--exit-active",
};

/**
* @remarks \@since 2.4.0
*/
export const DEFAULT_TOAST_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =
{
appear: "rmd-toast--enter",
appearActive: "rmd-toast--enter-active",
enter: "rmd-toast--enter",
enterActive: "rmd-toast--enter-active",
exit: "rmd-toast--exit",
exitActive: "rmd-toast--exit-active",
};
12 changes: 4 additions & 8 deletions packages/autocomplete/src/AutoComplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -173,20 +173,16 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
}}
/>
<ScaleTransition
nodeRef={listboxRef}
portal={portal}
portalInto={portalInto}
portalIntoId={portalIntoId}
vertical
visible={visible}
transitionIn={visible}
{...transitionHooks}
className={cn(listbox({ temporary: true }), listboxClassName)}
>
<List
id={suggestionsId}
role="listbox"
ref={listboxRef}
style={fixedStyle}
className={cn(listbox({ temporary: true }), listboxClassName)}
>
<List id={suggestionsId} role="listbox" style={fixedStyle}>
{beforeResultsChildren}
{filteredData.map((datum, i) => {
const resultId = getResultId(suggestionsId, i);
Expand Down
15 changes: 9 additions & 6 deletions packages/autocomplete/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { CSSProperties, ReactNode } from "react";
import { ListboxOptionProps, TextFieldProps } from "@react-md/form";
import { RenderConditionalPortalProps } from "@react-md/portal";
import { OptionalFixedPositionOptions } from "@react-md/transition";
import { CaseInsensitiveOptions, PositionWidth } from "@react-md/utils";
import type { CSSProperties, ReactNode } from "react";
import type { ListboxOptionProps, TextFieldProps } from "@react-md/form";
import type { RenderConditionalPortalProps } from "@react-md/portal";
import type {
CalculateFixedPositionOptions,
CaseInsensitiveOptions,
PositionWidth,
} from "@react-md/utils";

/**
* The supported autocompletion types.
Expand Down Expand Up @@ -102,7 +105,7 @@ export interface AutoCompleteResult {
export type AutoCompleteHandler = (result: AutoCompleteResult) => void;

export interface AutoCompleteListboxPositionOptions
extends Omit<OptionalFixedPositionOptions, "width"> {
extends Omit<CalculateFixedPositionOptions, "width"> {
/**
* The sizing behavior for the listbox. It will default to have the same width
* as the select button, but it is also possible to either have the
Expand Down
66 changes: 34 additions & 32 deletions packages/autocomplete/src/useAutoComplete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ import {
HTMLAttributes,
KeyboardEventHandler,
MouseEventHandler,
MutableRefObject,
Ref,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { ListElement } from "@react-md/list";
import { TransitionHooks, useFixedPositioning } from "@react-md/transition";
import {
FixedPositioningTransitionCallbacks,
useFixedPositioning,
} from "@react-md/transition";
import {
ItemRefList,
MovementPresets,
Expand Down Expand Up @@ -77,15 +79,15 @@ export interface AutoCompleteReturnValue {
activeId: string;
itemRefs: ItemRefList<HTMLLIElement>;
filteredData: readonly AutoCompleteData[];
listboxRef: MutableRefObject<ListElement | null>;
listboxRef: Ref<ListElement>;
handleBlur: FocusEventHandler<HTMLInputElement>;
handleFocus: FocusEventHandler<HTMLInputElement>;
handleClick: MouseEventHandler<HTMLInputElement>;
handleChange: ChangeEventHandler<HTMLInputElement>;
handleKeyDown: KeyboardEventHandler<HTMLInputElement>;
handleAutoComplete: (index: number) => void;
fixedStyle: CSSProperties | undefined;
transitionHooks: Required<TransitionHooks>;
transitionHooks: Required<FixedPositioningTransitionCallbacks>;
}

/**
Expand Down Expand Up @@ -308,7 +310,7 @@ export function useAutoComplete({
]
);

const listboxRef = useRef<ListElement | null>(null);
const nodeRef = useRef<ListElement | null>(null);
const {
activeId,
itemRefs,
Expand All @@ -330,7 +332,7 @@ export function useAutoComplete({
// the input element instead of the listbox. So need to implement the
// scroll into view behavior manually from the listbox instead.
const item = itemRefs[index] && itemRefs[index].current;
const { current: listbox } = listboxRef;
const { current: listbox } = nodeRef;
if (item && listbox && listbox.scrollHeight > listbox.offsetHeight) {
scrollIntoView(listbox, item);
}
Expand Down Expand Up @@ -418,26 +420,31 @@ export function useAutoComplete({
onOutsideClick: hide,
});

const { style, onEnter, onEntering, onEntered, onExited, updateStyle } =
useFixedPositioning({
fixedTo: () => ref.current,
anchor,
onScroll(_event, { visible }) {
if (closeOnScroll || !visible) {
hide();
}
},
onResize: closeOnResize ? hide : undefined,
width: listboxWidth,
xMargin,
yMargin,
vwMargin,
vhMargin,
transformOrigin,
preventOverlap,
disableSwapping,
disableVHBounds,
});
const {
ref: listboxRef,
style,
callbacks,
updateStyle,
} = useFixedPositioning({
fixedTo: ref,
nodeRef,
anchor,
onScroll(_event, { visible }) {
if (closeOnScroll || !visible) {
hide();
}
},
onResize: closeOnResize ? hide : undefined,
width: listboxWidth,
xMargin,
yMargin,
vwMargin,
vhMargin,
transformOrigin,
preventOverlap,
disableSwapping,
disableVHBounds,
});

useEffect(() => {
if (!focused.current || autocompleted.current) {
Expand Down Expand Up @@ -477,12 +484,7 @@ export function useAutoComplete({
itemRefs,
filteredData,
fixedStyle: { ...style, ...listboxStyle },
transitionHooks: {
onEnter,
onEntering,
onEntered,
onExited,
},
transitionHooks: callbacks,
listboxRef,
handleBlur,
handleFocus,
Expand Down
5 changes: 4 additions & 1 deletion packages/dev-utils/src/sandbox/createPackageJson.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ function toDependencyJson(
);
}

const SIMPLE_AT_TYPES = ["qs", "react-transition-group", "react-virtualized"];
const SIMPLE_AT_TYPES = [
"qs",
"react-virtualized",
];

function getTypesPackage(packageName: string): string | null {
if (SIMPLE_AT_TYPES.includes(packageName)) {
Expand Down
3 changes: 1 addition & 2 deletions packages/dialog/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,7 @@
"@react-md/transition": "^3.1.0",
"@react-md/typography": "^3.1.0",
"@react-md/utils": "^3.1.0",
"classnames": "^2.3.1",
"react-transition-group": "^4.4.2"
"classnames": "^2.3.1"
},
"devDependencies": {
"react": "^17.0.2",
Expand Down

0 comments on commit cb952da

Please sign in to comment.