Socket
Socket
Sign inDemoInstall

@react-md/transition

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-md/transition - npm Package Compare versions

Comparing version 2.0.0-alpha.9 to 2.0.0-alpha.10

es/ScaleTransition.js
es/ScaleTransition.js.map
lib/ScaleTransition.js
lib/ScaleTransition.js.map
src/ScaleTransition.tsx
types/ScaleTransition.d.ts

4

dist/scssVariables.d.ts

@@ -13,2 +13,6 @@ declare const _default: {

"rmd-cross-fade-transition-duration": string;
"rmd-transition-scale-enter-duration": string;
"rmd-transition-scale-leave-duration": string;
"rmd-transition-scale-y-enter-duration": string;
"rmd-transition-scale-y-leave-duration": string;
"rmd-transition-theme-values": {

@@ -15,0 +19,0 @@ sharp: string;

4

dist/scssVariables.js

@@ -16,2 +16,6 @@ "use strict";

"rmd-cross-fade-transition-duration": "0.3s",
"rmd-transition-scale-enter-duration": "0.2s",
"rmd-transition-scale-leave-duration": "0.15s",
"rmd-transition-scale-y-enter-duration": "0.2s",
"rmd-transition-scale-y-leave-duration": "0.15s",
"rmd-transition-theme-values": {

@@ -18,0 +22,0 @@ sharp: "cubic-bezier(0.4, 0, 0.6, 1)",

2

es/CrossFade.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {

import React from "react";
import { CSSTransition } from "react-transition-group";
import CSSTransition from "react-transition-group/CSSTransition";
/**

@@ -27,0 +27,0 @@ * This is a very simpel wrapper for the CSSTransition component from

2

es/index.js

@@ -5,2 +5,4 @@ export { default as Collapse } from "./Collapse";

export * from "./CrossFade";
export { default as ScaleTransition } from "./ScaleTransition";
export * from "./ScaleTransition";
export { useCollapseTransition, useCollapsibleElement, } from "./useCollapseTransition";

@@ -7,0 +9,0 @@ export { default as useFixedPositioning } from "./useFixedPositioning";

37

es/useFixedPositioning.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {

import { useCallback, useRef, useState } from "react";
import { getFixedPosition, useRefCache, useResizeListener, useScrollListener, } from "@react-md/utils";
import { getFixedPosition, useRefCache, useResizeListener, useScrollListener, getViewportSize, } from "@react-md/utils";
function getFixedTo(fixedTo) {

@@ -59,4 +59,2 @@ if (!fixedTo) {

var element = useRef(null);
/* eslint-disable react-hooks/exhaustive-deps */
// these are all guarenteed to not change since using refs or non-updating callbacks
var updateStyle = useCallback(function () {

@@ -80,7 +78,7 @@ var node = element.current;

setStyle(style);
}, []);
}, [options]);
var updateNodeAndStyle = useCallback(function (node) {
element.current = node;
updateStyle();
}, []);
}, [updateStyle]);
var handleEnter = useCallback(function (node, appear) {

@@ -92,3 +90,3 @@ var onEnter = handlers.current.onEnter;

updateNodeAndStyle(node);
}, []);
}, [handlers, updateNodeAndStyle]);
var handleEntering = useCallback(function (node, appear) {

@@ -100,3 +98,3 @@ var onEntering = handlers.current.onEntering;

updateNodeAndStyle(node);
}, []);
}, [handlers, updateNodeAndStyle]);
var handleEntered = useCallback(function (node, appear) {

@@ -108,3 +106,3 @@ var onEntered = handlers.current.onEntered;

updateNodeAndStyle(node);
}, []);
}, [handlers, updateNodeAndStyle]);
var handleExited = useCallback(function (node) {

@@ -116,3 +114,3 @@ var onExited = handlers.current.onExited;

element.current = null;
}, []);
}, [handlers]);
useResizeListener({

@@ -131,3 +129,21 @@ enabled: !!element.current,

if (onScroll) {
onScroll(event, element.current, getFixedTo(fixedTo));
var container = getFixedTo(fixedTo);
var rect = container && container.getBoundingClientRect();
var visible = false;
if (rect) {
var _a = remainingOptions.vhMargin, vhMargin = _a === void 0 ? 16 : _a, _b = remainingOptions.vwMargin, vwMargin = _b === void 0 ? 16 : _b;
var vh = getViewportSize("height");
var vw = getViewportSize("width");
var top_1 = rect.top, left = rect.left;
visible =
top_1 >= vhMargin &&
top_1 <= vh - vhMargin &&
left >= vwMargin &&
left <= vw - vwMargin;
}
onScroll(event, {
element: element.current,
fixedTo: container,
visible: visible,
});
}

@@ -139,2 +155,3 @@ updateStyle();

style: style,
updateStyle: updateStyle,
onEnter: handleEnter,

@@ -141,0 +158,0 @@ onEntering: handleEntering,

4

lib/CrossFade.js

@@ -29,3 +29,3 @@ "use strict";

var react_1 = __importDefault(require("react"));
var react_transition_group_1 = require("react-transition-group");
var CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
/**

@@ -41,3 +41,3 @@ * This is a very simpel wrapper for the CSSTransition component from

var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
return react_1.default.createElement(react_transition_group_1.CSSTransition, __assign({}, props), children);
return react_1.default.createElement(CSSTransition_1.default, __assign({}, props), children);
};

@@ -44,0 +44,0 @@ var defaultProps = {

3

lib/index.js

@@ -12,2 +12,5 @@ "use strict";

__export(require("./CrossFade"));
var ScaleTransition_1 = require("./ScaleTransition");
exports.ScaleTransition = ScaleTransition_1.default;
__export(require("./ScaleTransition"));
var useCollapseTransition_1 = require("./useCollapseTransition");

@@ -14,0 +17,0 @@ exports.useCollapseTransition = useCollapseTransition_1.useCollapseTransition;

35

lib/useFixedPositioning.js

@@ -60,4 +60,2 @@ "use strict";

var element = react_1.useRef(null);
/* eslint-disable react-hooks/exhaustive-deps */
// these are all guarenteed to not change since using refs or non-updating callbacks
var updateStyle = react_1.useCallback(function () {

@@ -81,7 +79,7 @@ var node = element.current;

setStyle(style);
}, []);
}, [options]);
var updateNodeAndStyle = react_1.useCallback(function (node) {
element.current = node;
updateStyle();
}, []);
}, [updateStyle]);
var handleEnter = react_1.useCallback(function (node, appear) {

@@ -93,3 +91,3 @@ var onEnter = handlers.current.onEnter;

updateNodeAndStyle(node);
}, []);
}, [handlers, updateNodeAndStyle]);
var handleEntering = react_1.useCallback(function (node, appear) {

@@ -101,3 +99,3 @@ var onEntering = handlers.current.onEntering;

updateNodeAndStyle(node);
}, []);
}, [handlers, updateNodeAndStyle]);
var handleEntered = react_1.useCallback(function (node, appear) {

@@ -109,3 +107,3 @@ var onEntered = handlers.current.onEntered;

updateNodeAndStyle(node);
}, []);
}, [handlers, updateNodeAndStyle]);
var handleExited = react_1.useCallback(function (node) {

@@ -117,3 +115,3 @@ var onExited = handlers.current.onExited;

element.current = null;
}, []);
}, [handlers]);
utils_1.useResizeListener({

@@ -132,3 +130,21 @@ enabled: !!element.current,

if (onScroll) {
onScroll(event, element.current, getFixedTo(fixedTo));
var container = getFixedTo(fixedTo);
var rect = container && container.getBoundingClientRect();
var visible = false;
if (rect) {
var _a = remainingOptions.vhMargin, vhMargin = _a === void 0 ? 16 : _a, _b = remainingOptions.vwMargin, vwMargin = _b === void 0 ? 16 : _b;
var vh = utils_1.getViewportSize("height");
var vw = utils_1.getViewportSize("width");
var top_1 = rect.top, left = rect.left;
visible =
top_1 >= vhMargin &&
top_1 <= vh - vhMargin &&
left >= vwMargin &&
left <= vw - vwMargin;
}
onScroll(event, {
element: element.current,
fixedTo: container,
visible: visible,
});
}

@@ -140,2 +156,3 @@ updateStyle();

style: style,
updateStyle: updateStyle,
onEnter: handleEnter,

@@ -142,0 +159,0 @@ onEntering: handleEntering,

9

package.json
{
"name": "@react-md/transition",
"version": "2.0.0-alpha.9",
"version": "2.0.0-alpha.10",
"description": "A package for working with react-md to use some simple transitions.",

@@ -39,4 +39,5 @@ "scripts": {

"dependencies": {
"@react-md/theme": "^2.0.0-alpha.9",
"@react-md/utils": "^2.0.0-alpha.9",
"@react-md/portal": "^2.0.0-alpha.10",
"@react-md/theme": "^2.0.0-alpha.10",
"@react-md/utils": "^2.0.0-alpha.10",
"classnames": "^2.2.6"

@@ -53,3 +54,3 @@ },

},
"gitHead": "5dc105d777dd95c5ab6b38509d9c002993bbf4b0"
"gitHead": "d42497f9e2e5c6e7f37774e140a5bf80c644081d"
}

3

src/index.ts

@@ -7,2 +7,5 @@ export { default as Collapse } from "./Collapse";

export { default as ScaleTransition } from "./ScaleTransition";
export * from "./ScaleTransition";
export {

@@ -9,0 +12,0 @@ useCollapseTransition,

4

src/scssVariables.ts

@@ -14,2 +14,6 @@ /** this is an auto-generated file from @react-md/dev-utils */

"rmd-cross-fade-transition-duration": "0.3s",
"rmd-transition-scale-enter-duration": "0.2s",
"rmd-transition-scale-leave-duration": "0.15s",
"rmd-transition-scale-y-enter-duration": "0.2s",
"rmd-transition-scale-y-leave-duration": "0.15s",
"rmd-transition-theme-values": {

@@ -16,0 +20,0 @@ sharp: "cubic-bezier(0.4, 0, 0.6, 1)",

100

src/types.ts

@@ -1,82 +0,30 @@

// these were copied from @types/react-transition-group and renamed to be prefixed with Transition
// since they currently aren't exported
export type TransitionEnterHandler = (
node: HTMLElement,
appearing: boolean
) => void;
export type TransitionExitHandler = (node: HTMLElement) => void;
import { TransitionProps } from "react-transition-group/Transition";
import { CSSTransitionProps } from "react-transition-group/CSSTransition";
export type TransitionTimeout = number | { enter?: number; exit?: number };
export type TransitionTimeout = TransitionProps["timeout"];
// this was copied over just for simplicity and not requiring adding react-transition-group for this
export type CSSTransitionClassNames =
| string
| {
appear?: string;
appearActive?: string;
enter?: string;
enterActive?: string;
enterDone?: string;
exit?: string;
exitActive?: string;
exitDone?: string;
};
// Don't want the children stuff when overriding/reusing in react-md components
// as well as the [prop: string]: any, so pick the reusable ones
type TransitionKeys =
| "appear"
| "enter"
| "exit"
| "mountOnEnter"
| "unmountOnExit"
| "onEnter"
| "onEntering"
| "onEntering"
| "onEntered"
| "onExit"
| "onExiting"
| "onExited";
export interface TransitionProps {
/**
* The transition duration for the overlay. This should not be changed unless you manually change the
* `$rmd-overlay-transition-duration` scss variable.
*/
// timeout is required in the Transition props, but 99% of the time it'll be added
// with defaultProps in overrides
export interface OverridableTransitionProps
extends Pick<TransitionProps, TransitionKeys> {
timeout?: TransitionTimeout;
/**
* Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
* not be rendered in the DOM until the `visible` prop is `true` but this can be changed by setting this
* prop to `false`.
*/
mountOnEnter?: boolean;
/**
* Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
* be removed from the DOM when the `visible` prop is `false` but this can be changed by setting this
* prop to `false`.
*/
unmountOnExit?: boolean;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onEnter?: TransitionEnterHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onEntering?: TransitionEnterHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onEntered?: TransitionEnterHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onExit?: TransitionExitHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onExiting?: TransitionExitHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onExited?: TransitionExitHandler;
}
export interface CSSTransitionProps extends TransitionProps {
/**
* The class names to use during the different parts of the animation.
*/
classNames?: CSSTransitionClassNames;
}
export type OverridableCSSTransitionProps = OverridableTransitionProps &
Pick<CSSTransitionProps, "classNames">;

131

src/useFixedPositioning.ts
import { CSSProperties, useCallback, useRef, useState } from "react";
import { TransitionProps } from "react-transition-group/Transition";
import {
FixedPositionOptions,
getFixedPosition,
Omit,
PositionAnchor,

@@ -10,4 +10,4 @@ useRefCache,

useScrollListener,
getViewportSize,
} from "@react-md/utils";
import { TransitionProps } from "react-transition-group/Transition";

@@ -29,9 +29,17 @@ export type FixedToFunction = () => HTMLElement | null;

export type OnFixedPositionScroll = (
event: Event,
element: HTMLElement | null,
fixedTo: HTMLElement | null
) => void;
export interface ScrollData {
element: HTMLElement | null;
fixedTo: HTMLElement | null;
type TransitionHooks = Pick<
/**
* Boolean if the `fixedTo` element is visible within the viewport. This is useful
* if you'd like to hide the element only once the user scrolls these elements
* out of view.
*/
visible: boolean;
}
export type OnFixedPositionScroll = (event: Event, data: ScrollData) => void;
export type TransitionHooks = Pick<
TransitionProps,

@@ -101,2 +109,3 @@ "onEnter" | "onEntering" | "onEntered" | "onExited"

style?: CSSProperties;
updateStyle: () => void;
}

@@ -132,4 +141,2 @@

/* eslint-disable react-hooks/exhaustive-deps */
// these are all guarenteed to not change since using refs or non-updating callbacks
const updateStyle = useCallback(() => {

@@ -171,44 +178,59 @@ const node = element.current;

setStyle(style);
}, []);
}, [options]);
const updateNodeAndStyle = useCallback((node: HTMLElement) => {
element.current = node;
updateStyle();
}, []);
const updateNodeAndStyle = useCallback(
(node: HTMLElement) => {
element.current = node;
updateStyle();
},
[updateStyle]
);
const handleEnter = useCallback((node: HTMLElement, appear: boolean) => {
const { onEnter } = handlers.current;
if (onEnter) {
onEnter(node, appear);
}
const handleEnter = useCallback(
(node: HTMLElement, appear: boolean) => {
const { onEnter } = handlers.current;
if (onEnter) {
onEnter(node, appear);
}
updateNodeAndStyle(node);
}, []);
updateNodeAndStyle(node);
},
[handlers, updateNodeAndStyle]
);
const handleEntering = useCallback((node: HTMLElement, appear: boolean) => {
const { onEntering } = handlers.current;
if (onEntering) {
onEntering(node, appear);
}
const handleEntering = useCallback(
(node: HTMLElement, appear: boolean) => {
const { onEntering } = handlers.current;
if (onEntering) {
onEntering(node, appear);
}
updateNodeAndStyle(node);
}, []);
updateNodeAndStyle(node);
},
[handlers, updateNodeAndStyle]
);
const handleEntered = useCallback((node: HTMLElement, appear: boolean) => {
const { onEntered } = handlers.current;
if (onEntered) {
onEntered(node, appear);
}
const handleEntered = useCallback(
(node: HTMLElement, appear: boolean) => {
const { onEntered } = handlers.current;
if (onEntered) {
onEntered(node, appear);
}
updateNodeAndStyle(node);
}, []);
updateNodeAndStyle(node);
},
[handlers, updateNodeAndStyle]
);
const handleExited = useCallback((node: HTMLElement) => {
const { onExited } = handlers.current;
if (onExited) {
onExited(node);
}
const handleExited = useCallback(
(node: HTMLElement) => {
const { onExited } = handlers.current;
if (onExited) {
onExited(node);
}
element.current = null;
}, []);
element.current = null;
},
[handlers]
);

@@ -230,3 +252,23 @@ useResizeListener({

if (onScroll) {
onScroll(event, element.current, getFixedTo(fixedTo));
const container = getFixedTo(fixedTo);
const rect = container && container.getBoundingClientRect();
let visible = false;
if (rect) {
const { vhMargin = 16, vwMargin = 16 } = remainingOptions;
const vh = getViewportSize("height");
const vw = getViewportSize("width");
const { top, left } = rect;
visible =
top >= vhMargin &&
top <= vh - vhMargin &&
left >= vwMargin &&
left <= vw - vwMargin;
}
onScroll(event, {
element: element.current,
fixedTo: container,
visible,
});
}

@@ -240,2 +282,3 @@

style,
updateStyle,
onEnter: handleEnter,

@@ -242,0 +285,0 @@ onEntering: handleEntering,

4

types/CrossFade.d.ts
import { FC } from "react";
import { CSSTransition } from "react-transition-group";
export declare type CrossFadeProps = Partial<CSSTransition.CSSTransitionProps>;
import { CSSTransitionProps } from "react-transition-group/CSSTransition";
export declare type CrossFadeProps = Partial<CSSTransitionProps>;
/**

@@ -5,0 +5,0 @@ * This is a very simpel wrapper for the CSSTransition component from

2

types/index.d.ts

@@ -5,2 +5,4 @@ export { default as Collapse } from "./Collapse";

export * from "./CrossFade";
export { default as ScaleTransition } from "./ScaleTransition";
export * from "./ScaleTransition";
export { useCollapseTransition, useCollapsibleElement, } from "./useCollapseTransition";

@@ -7,0 +9,0 @@ export { default as useFixedPositioning } from "./useFixedPositioning";

70

types/types.d.ts

@@ -1,65 +0,9 @@

export declare type TransitionEnterHandler = (node: HTMLElement, appearing: boolean) => void;
export declare type TransitionExitHandler = (node: HTMLElement) => void;
export declare type TransitionTimeout = number | {
enter?: number;
exit?: number;
};
export declare type CSSTransitionClassNames = string | {
appear?: string;
appearActive?: string;
enter?: string;
enterActive?: string;
enterDone?: string;
exit?: string;
exitActive?: string;
exitDone?: string;
};
export interface TransitionProps {
/**
* The transition duration for the overlay. This should not be changed unless you manually change the
* `$rmd-overlay-transition-duration` scss variable.
*/
import { TransitionProps } from "react-transition-group/Transition";
import { CSSTransitionProps } from "react-transition-group/CSSTransition";
export declare type TransitionTimeout = TransitionProps["timeout"];
declare type TransitionKeys = "appear" | "enter" | "exit" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited";
export interface OverridableTransitionProps extends Pick<TransitionProps, TransitionKeys> {
timeout?: TransitionTimeout;
/**
* Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
* not be rendered in the DOM until the `visible` prop is `true` but this can be changed by setting this
* prop to `false`.
*/
mountOnEnter?: boolean;
/**
* Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
* be removed from the DOM when the `visible` prop is `false` but this can be changed by setting this
* prop to `false`.
*/
unmountOnExit?: boolean;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onEnter?: TransitionEnterHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onEntering?: TransitionEnterHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onEntered?: TransitionEnterHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onExit?: TransitionExitHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onExiting?: TransitionExitHandler;
/**
* Pass-down prop to the `Transition` component from react-transition-group.
*/
onExited?: TransitionExitHandler;
}
export interface CSSTransitionProps extends TransitionProps {
/**
* The class names to use during the different parts of the animation.
*/
classNames?: CSSTransitionClassNames;
}
export declare type OverridableCSSTransitionProps = OverridableTransitionProps & Pick<CSSTransitionProps, "classNames">;
export {};

17

types/useFixedPositioning.d.ts
import { CSSProperties } from "react";
import { FixedPositionOptions, Omit, PositionAnchor } from "@react-md/utils";
import { TransitionProps } from "react-transition-group/Transition";
import { FixedPositionOptions, PositionAnchor } from "@react-md/utils";
export declare type FixedToFunction = () => HTMLElement | null;

@@ -9,4 +9,14 @@ export declare type FixedTo = string | HTMLElement | null | FixedToFunction;

export declare type PositionChange = (wanted: PositionAnchor, actual: PositionAnchor) => void;
export declare type OnFixedPositionScroll = (event: Event, element: HTMLElement | null, fixedTo: HTMLElement | null) => void;
declare type TransitionHooks = Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExited">;
export interface ScrollData {
element: HTMLElement | null;
fixedTo: HTMLElement | null;
/**
* Boolean if the `fixedTo` element is visible within the viewport. This is useful
* if you'd like to hide the element only once the user scrolls these elements
* out of view.
*/
visible: boolean;
}
export declare type OnFixedPositionScroll = (event: Event, data: ScrollData) => void;
export declare type TransitionHooks = Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExited">;
export interface FixedPositioningOptions extends OptionalFixedPositionOptions, TransitionHooks {

@@ -45,2 +55,3 @@ /**

style?: CSSProperties;
updateStyle: () => void;
}

@@ -47,0 +58,0 @@ /**

dist/_mixins.scss

Sorry, the diff of this file is not supported yet

dist/_variables.scss

Sorry, the diff of this file is not supported yet

dist/scss/_mixins.scss

Sorry, the diff of this file is not supported yet

dist/scss/_variables.scss

Sorry, the diff of this file is not supported yet

dist/scssVariables.js.map

Sorry, the diff of this file is not supported yet

es/Collapse.js.map

Sorry, the diff of this file is not supported yet

es/CrossFade.js.map

Sorry, the diff of this file is not supported yet

es/index.js.map

Sorry, the diff of this file is not supported yet

es/useFixedPositioning.js.map

Sorry, the diff of this file is not supported yet

lib/Collapse.js.map

Sorry, the diff of this file is not supported yet

lib/CrossFade.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/useFixedPositioning.js.map

Sorry, the diff of this file is not supported yet

src/_mixins.scss

Sorry, the diff of this file is not supported yet

src/_variables.scss

Sorry, the diff of this file is not supported yet

src/Collapse.tsx

Sorry, the diff of this file is not supported yet

src/CrossFade.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc