Skip to content

Commit

Permalink
Merge pull request #554 from fkhadra/next
Browse files Browse the repository at this point in the history
## 💥 Breaking changes

- dependency to react-transition-group has been removed #514
- the `duration` parameter has been removed from `cssTransition`. Css animations just works now out of the box. Check the codesanbox below  
- the border-radius has been increased a bit

##  🚀 Features

- Css animation just works! 
[![View](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-toastify-animatecss-jxrx9?fontsize=14&hidenavigation=1&theme=dark&view=preview)

- add a way to load the CSS without a CSS loader
[![Edit react-toastify-inject-style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-toastify-inject-style-qfg0l?fontsize=14&hidenavigation=1&theme=dark)
- specify swipe direction, close #512 . Thanks to @denydavy
[![Edit react-toastify-drag-y](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-toastify-drag-y-lh88i?fontsize=14&hidenavigation=1&theme=dark)
- bundle size reduced from ~7k to ~5k!
- remove the dependency on prop-types.

## 🐛 Bugfix

- fix #541 apply pauseOnFocusLoss on first render
- fix #538 react-dom should be a peer dep
- fix #530 change id generation
- fix #534 #483 toastId cannot be reused
- fix #511 by removing react-transition-group
- fix #550 Unable to select text inside inputs when a toast is open
- fix #555 The toast timer starts after you click on the toast
  • Loading branch information
fkhadra committed Jan 25, 2021
2 parents eac7f7b + 9feeef5 commit cc011ea
Show file tree
Hide file tree
Showing 34 changed files with 1,659 additions and 1,285 deletions.
26 changes: 23 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,26 @@ $ npm install --save react-toastify
$ yarn add react-toastify
```

## Features

- Easy to set up for real, you can make it work in less than 10sec!
- Super easy to customize
- RTL support
- Swipe to close 👌
- Can choose swipe direction
- Super easy to use an animation of your choice. Works well with animate.css for example
- Can display a react component inside the toast!
- Has ```onOpen``` and ```onClose``` hooks. Both can access the props passed to the react component rendered inside the toast
- Can remove a toast programmatically
- Define behavior per toast
- Pause toast when the window loses focus 👁
- Fancy progress bar to display the remaining time
- Possibility to update a toast
- You can control the progress bar a la `nprogress` 😲
- You can limit the number of toast displayed at the same time
- Dark mode 🌒
- And much more !

## The gist

```jsx
Expand All @@ -26,11 +46,11 @@ $ yarn add react-toastify
import 'react-toastify/dist/ReactToastify.css';

function App(){
const notify = () => toast("Wow so easy !");
const notify = () => toast("Wow so easy!");

return (
<div>
<button onClick={notify}>Notify !</button>
<button onClick={notify}>Notify!</button>
<ToastContainer />
</div>
);
Expand All @@ -43,7 +63,7 @@ $ yarn add react-toastify

## Documentation

Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started !
Check the [documentation](https://fkhadra.github.io/react-toastify/introduction) to get you started!

## Contribute

Expand Down
46 changes: 30 additions & 16 deletions example/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';

import {Header} from './Header';
import {Radio} from './Radio';
import {Checkbox} from './Checkbox';
import {ContainerCode} from './ContainerCode';
import {ToastCode} from './ToastCode';
import { Header } from './Header';
import { Radio } from './Radio';
import { Checkbox } from './Checkbox';
import { ContainerCode } from './ContainerCode';
import { ToastCode } from './ToastCode';

import {
ToastContainer,
Expand All @@ -13,7 +13,8 @@ import {
Slide,
Flip,
Zoom,
Id
Id,
cssTransition
} from '../../src/index';
import '../../scss/main.scss';

Expand Down Expand Up @@ -53,7 +54,7 @@ const flags = [
{
id: 'draggable',
label: 'Allow to drag and close the toast'
},
}
];

const transitions = {
Expand All @@ -63,10 +64,15 @@ const transitions = {
flip: Flip
};

// const animateCss = cssTransition({
// enter: 'animate__animated animate__bounceIn',
// exit: 'animate__animated animate__bounceOut'
// });

class App extends React.Component {
state = App.getDefaultState();
toastId: Id;

static getDefaultState() {
return {
...ToastContainer.defaultProps,
Expand All @@ -86,12 +92,16 @@ class App extends React.Component {
clearAll = () => toast.dismiss();

showToast = () => {
this.toastId = this.state.type === 'default'
? toast('🦄 Wow so easy !', { progress: this.state.progress })
: toast[this.state.type]('🚀 Wow so easy !', { progress: this.state.progress });
}
this.toastId =
this.state.type === 'default'
? toast('🦄 Wow so easy !', { progress: this.state.progress })
: toast[this.state.type]('🚀 Wow so easy !', {
progress: this.state.progress
});
};

updateToast = () => toast.update(this.toastId, { progress: this.state.progress })
updateToast = () =>
toast.update(this.toastId, { progress: this.state.progress });

handleAutoCloseDelay = e =>
this.setState({
Expand All @@ -101,7 +111,8 @@ class App extends React.Component {
isDefaultProps() {
return (
this.state.position === 'top-right' &&
(this.state.autoClose === 5000 && !this.state.disableAutoClose) &&
this.state.autoClose === 5000 &&
!this.state.disableAutoClose &&
!this.state.hideProgressBar &&
!this.state.newestOnTop &&
!this.state.rtl &&
Expand All @@ -114,7 +125,10 @@ class App extends React.Component {

handleRadioOrSelect = e =>
this.setState({
[e.target.name]: e.target.name === 'limit' ? parseInt(e.target.value,10) : e.target.value
[e.target.name]:
e.target.name === 'limit'
? parseInt(e.target.value, 10)
: e.target.value
});

toggleCheckbox = e =>
Expand Down Expand Up @@ -273,4 +287,4 @@ class App extends React.Component {
}
}

export {App};
export { App };
4 changes: 4 additions & 0 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Playground</title>
</head>

Expand Down
20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "6.2.0",
"version": "7.0.0-rc3",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
Expand Down Expand Up @@ -31,10 +31,12 @@
"sass-minimal": "sass scss/minimal.scss dist/ReactToastify.minimal.css",
"postsass": "postcss dist/ReactToastify.css --use autoprefixer -m -o dist/ReactToastify.css",
"postsass-minimal": "cssnano dist/ReactToastify.minimal.css dist/ReactToastify.minimal.css --no-zindex --no-reduceIdents",
"style": "npm run sass && npm run sass-minimal && cssnano dist/ReactToastify.css dist/ReactToastify.min.css --no-zindex --no-reduceIdents"
"style": "npm run sass && npm run sass-minimal && cssnano dist/ReactToastify.css dist/ReactToastify.min.css --no-zindex --no-reduceIdents && npm run style-injector",
"style-injector": "style2js --out-dir dist dist/ReactToastify.min.css"
},
"peerDependencies": {
"react": ">=16"
"react": ">=16",
"react-dom": ">=16"
},
"husky": {
"hooks": {
Expand All @@ -48,7 +50,7 @@
},
"eslint": {
"rules": {
"react-hooks/exhaustive-deps": "off"
"react-hooks/exhaustive-deps": "warn"
}
},
"jest": {
Expand Down Expand Up @@ -77,23 +79,21 @@
"@types/jest": "^24.9.0",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"@types/react-transition-group": "^4.2.4",
"coveralls": "^3.0.9",
"cssnano": "^4.1.10",
"cssnano-cli": "^1.0.5",
"husky": "^4.2.0",
"postcss": "^7.0.27",
"postcss-cli": "^7.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass": "^1.26.0",
"style2js": "^1.0.0",
"tsdx": "^0.12.3",
"tslib": "^1.10.0",
"typescript": "^3.7.5"
},
"dependencies": {
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-transition-group": "^4.4.1"
"clsx": "^1.1.1"
}
}
91 changes: 48 additions & 43 deletions scss/_toast.scss
Original file line number Diff line number Diff line change
@@ -1,49 +1,54 @@
.#{$rt-namespace}__toast {
position: relative;
min-height: $rt-toast-min-height;
box-sizing: border-box;
margin-bottom: 1rem;
padding: 8px;
border-radius: 1px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
display: flex;
justify-content: space-between;
max-height: $rt-toast-max-height;
overflow: hidden;
font-family: $rt-font-family;
cursor: pointer;
direction: ltr;
&--rtl {
direction: rtl;
}
&--dark {
background: $rt-color-dark;
color: $rt-text-color-dark;
}
&--default {
background: $rt-color-default;
color: $rt-text-color-default;
}
&--info {
background: $rt-color-info;
}
&--success {
background: $rt-color-success;
}
&--warning {
background: $rt-color-warning;
}
&--error {
background: $rt-color-error;
}
&-body {
margin: auto 0;
flex: 1 1 auto;
}
position: relative;
min-height: $rt-toast-min-height;
box-sizing: border-box;
margin-bottom: 1rem;
padding: 8px;
border-radius: 4px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
max-height: $rt-toast-max-height;
overflow: hidden;
font-family: $rt-font-family;
cursor: pointer;
direction: ltr;
&--rtl {
direction: rtl;
}
&--dark {
background: $rt-color-dark;
color: $rt-text-color-dark;
}
&--default {
background: $rt-color-default;
color: $rt-text-color-default;
}
&--info {
background: $rt-color-info;
}
&--success {
background: $rt-color-success;
}
&--warning {
background: $rt-color-warning;
}
&--error {
background: $rt-color-error;
}
&-body {
margin: auto 0;
padding: 6px;
}
}

.#{$rt-namespace}--animate {
animation-fill-mode: both;
animation-duration: 0.7s;
}

@media #{$rt-mobile} {
.#{$rt-namespace}__toast{
margin-bottom: 0;
.#{$rt-namespace}__toast {
margin-bottom: 0;
}
}
4 changes: 2 additions & 2 deletions src/components/CloseButton.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { DEFAULT } from '../utils';
import { Default } from '../utils';
import { TypeOptions } from '../types';

export interface CloseButtonProps {
Expand All @@ -15,7 +15,7 @@ export function CloseButton({
}: CloseButtonProps) {
return (
<button
className={`${DEFAULT.CSS_NAMESPACE}__close-button ${DEFAULT.CSS_NAMESPACE}__close-button--${type}`}
className={`${Default.CSS_NAMESPACE}__close-button ${Default.CSS_NAMESPACE}__close-button--${type}`}
type="button"
onClick={e => {
e.stopPropagation();
Expand Down
31 changes: 20 additions & 11 deletions src/components/ProgressBar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import cx from 'clsx';

import { TYPE, DEFAULT, isFn } from './../utils';
import { TYPE, Default, isFn } from './../utils';
import { TypeOptions, ToastClassName } from '../types';

export interface ProgressBarProps {
Expand Down Expand Up @@ -82,23 +82,23 @@ export function ProgressBar({
};

if (controlledProgress) style.transform = `scaleX(${progress})`;
const defaultClassArr = [
`${DEFAULT.CSS_NAMESPACE}__progress-bar`,
const defaultClassName = cx(
`${Default.CSS_NAMESPACE}__progress-bar`,
controlledProgress
? `${DEFAULT.CSS_NAMESPACE}__progress-bar--controlled`
: `${DEFAULT.CSS_NAMESPACE}__progress-bar--animated`,
`${DEFAULT.CSS_NAMESPACE}__progress-bar--${type}`,
? `${Default.CSS_NAMESPACE}__progress-bar--controlled`
: `${Default.CSS_NAMESPACE}__progress-bar--animated`,
`${Default.CSS_NAMESPACE}__progress-bar--${type}`,
{
[`${DEFAULT.CSS_NAMESPACE}__progress-bar--rtl`]: rtl
[`${Default.CSS_NAMESPACE}__progress-bar--rtl`]: rtl
}
];
);
const classNames = isFn(className)
? className({
rtl,
type,
defaultClassName: cx(...defaultClassArr)
defaultClassName
})
: cx(...[...defaultClassArr, className]);
: cx(defaultClassName, className);

// 🧐 controlledProgress is derived from progress
// so if controlledProgress is set
Expand All @@ -114,7 +114,16 @@ export function ProgressBar({
}
};

return <div className={classNames} style={style} {...animationEvent} />;
// TODO: add aria-valuenow, aria-valuemax, aria-valuemin

return (
<div
role="progressbar"
className={classNames}
style={style}
{...animationEvent}
/>
);
}

ProgressBar.defaultProps = {
Expand Down
Loading

0 comments on commit cc011ea

Please sign in to comment.