Skip to content
This repository has been archived by the owner on Oct 4, 2022. It is now read-only.

updated to react 18 #110

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

updated to react 18 #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f34af0
updated to react 18
hasanm95 Aug 25, 2022
64ea001
updated readme
hasanm95 Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions CODE_OF_CONDUCT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
Examples of behavior that contributes to creating a positive environment
include:

* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting

## Our Responsibilities

Expand Down
38 changes: 20 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<p align="center"><a href="https://cogoport.github.io/cogo-toast/" target="_blank"><img src="https://cogoport.github.io/cogo-toast/meta/android-chrome-96x96.png" alt="cogo-toast" title="cogo-toast" width="120"></a></p>
<h1 align="center">Cogo Toast</h1>
<p><strong>It is React 18 supported version of Cogo Toast. It won't work without React 18</strong></p>
<p align="center" style="font-size: 1.2rem;">Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons)</p>
<p align="center"><a href="https://cogoport.github.io/cogo-toast/">https://cogoport.github.io/cogo-toast/</a></p>

Expand Down Expand Up @@ -68,10 +69,10 @@ cogoToast.error('This is a error message');

```javascript
cogoToast.info(
<div>
<b>Awesome!</b>
<div>Isn't it?</div>
</div>,
<div>
<b>Awesome!</b>
<div>Isn't it?</div>
</div>,
);
```

Expand All @@ -83,17 +84,17 @@ This can be useful to do some action when the toast has completed showing.

```javascript
cogoToast.loading('Loading your data...').then(() => {
cogoToast.success('Data Successfully Loaded');
cogoToast.success('Data Successfully Loaded');
});
```

### Hide on Click

```javascript
const { hide } = cogoToast.success('This is a success message.', {
onClick: () => {
hide();
},
onClick: () => {
hide();
},
});
```

Expand All @@ -109,16 +110,16 @@ cogoToast.info('This is an info message', options);

Here's a list of all the available options, to customize the toast to your needs.

| Options | Type | Default |
| :-----------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------------------: |
| hideAfter | Number in Seconds | `3` <br />(Can be `0` to disable auto-hiding of the toast) |
| position | `'top-left', 'top-center', 'top-right',` <br /> `'bottom-left', 'bottom-center', 'bottom-right'` | `'top-center'` |
| heading | String | `''` |
| renderIcon | Function<ReactNode> | Icon Based on the Type |
| bar | Object <br /> `{ size: '2px', style: 'solid/dashed/dotted', color: '#hex' }` | Based on the Type |
| onClick() | Function | `null` |
| role | aria-role | `status` |
| toastContainerID | The dom element in which the toast container is added | `ct-container` |
| Options | Type | Default |
| :--------------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------------------: |
| hideAfter | Number in Seconds | `3` <br />(Can be `0` to disable auto-hiding of the toast) |
| position | `'top-left', 'top-center', 'top-right',` <br /> `'bottom-left', 'bottom-center', 'bottom-right'` | `'top-center'` |
| heading | String | `''` |
| renderIcon | Function<ReactNode> | Icon Based on the Type |
| bar | Object <br /> `{ size: '2px', style: 'solid/dashed/dotted', color: '#hex' }` | Based on the Type |
| onClick() | Function | `null` |
| role | aria-role | `status` |
| toastContainerID | The dom element in which the toast container is added | `ct-container` |

### Custom Styling

Expand Down Expand Up @@ -160,6 +161,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
8 changes: 4 additions & 4 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
"react-dom": "^16.13.1"
},
"devDependencies": {
"@types/node": "^14.0.1",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"typescript": "3.9.2",
"@types/node": "^14.0.1",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"typescript": "3.9.2",
"serve": "11.3.0"
}
}
12 changes: 6 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
},
"peerDependencies": {
"prop-types": "^15.6.2",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
"react": ">18.0.0",
"react-dom": ">18.0.0"
},
"devDependencies": {
"@babel/core": "7.9.6",
Expand All @@ -30,13 +30,13 @@
"@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-typescript": "^2.1.0",
"@rollup/plugin-url": "^5.0.0",
"@svgr/rollup": "5.4.0",
"@types/jest": "^25.2.2",
"@types/prop-types": "^15.7.3",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@svgr/rollup": "5.4.0",
"all-contributors-cli": "^6.14.2",
"babel-eslint": "10.1.0",
"concurrently": "5.2.0",
Expand All @@ -55,15 +55,15 @@
"prettier": "^2.0.5",
"prettier-eslint-cli": "^5.0.0",
"prop-types": "^15.7.2",
"react": "16.12.0",
"react-dom": "16.12.0",
"react": ">18.0.0",
"react-dom": ">18.0.0",
"react-scripts": "3.4.1",
"rollup": "^2.10.2",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "3.1.1",
"terser": "4.6.13",
"typescript": "^3.9.2",
"tslib": "^2.0.0",
"typescript": "^3.9.2",
"uglify-js": "^3.9.3"
},
"main": "dist/index.js",
Expand Down
5 changes: 3 additions & 2 deletions src/components/Toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,9 @@ const Toast: React.FC<CToastProps> = (props) => {
props.onClick ? ' ct-cursor-pointer' : '',
`ct-toast-${props.type}`,
].join(' ');
const borderLeft = `${props.bar?.size || '3px'} ${props.bar?.style || 'solid'} ${props.bar
?.color || colors[props.type]}`;
const borderLeft = `${props.bar?.size || '3px'} ${props.bar?.style || 'solid'} ${
props.bar?.color || colors[props.type]
}`;

const CurrentIcon = Icons[props.type];

Expand Down
2 changes: 1 addition & 1 deletion src/components/ToastContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const ToastContainer: React.FC<CToastContainerProps> = ({ toast, hiddenID }) =>
});
typeof callback === 'function' && callback(id, position);
};
}
};

const rows = ['top', 'bottom'];
const groups = ['Left', 'Center', 'Right'];
Expand Down
11 changes: 8 additions & 3 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';

import ToastContainer from './components/ToastContainer';
import Toast from './components/Toast';
Expand All @@ -9,6 +9,7 @@ import { CToast, CTReturn } from '../index.d';
import './styles/styles.css';

let ctToastCount = 0;
let root;

const cogoToast: CToast = (text, options?) => {
let rootContainer = document.getElementById(options?.toastContainerID || 'ct-container');
Expand All @@ -19,15 +20,19 @@ const cogoToast: CToast = (text, options?) => {
document.body.appendChild(rootContainer);
}

if (ctToastCount === 0) {
root = ReactDOM.createRoot(rootContainer);
}

ctToastCount += 1;

const hideTime = (options?.hideAfter === undefined ? 3 : options.hideAfter) * 1000;
const toast = { id: ctToastCount, text, ...options };

ReactDOM.render(<ToastContainer toast={toast} />, rootContainer);
root.render(<ToastContainer toast={toast} />);

const hide = () => {
ReactDOM.render(<ToastContainer hiddenID={toast.id} />, rootContainer);
root.render(<ToastContainer hiddenID={toast.id} />);
};

const completePromise: CTReturn = new Promise<void>((resolve) => {
Expand Down
33 changes: 14 additions & 19 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9267,7 +9267,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.4"

prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -9468,15 +9468,13 @@ react-dev-utils@^10.2.1:
strip-ansi "6.0.0"
text-table "0.2.0"

react-dom@16.12.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
react-dom@>18.0.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.18.0"
scheduler "^0.23.0"

react-error-overlay@^6.0.7:
version "6.0.7"
Expand Down Expand Up @@ -9548,14 +9546,12 @@ [email protected]:
optionalDependencies:
fsevents "2.1.2"

react@16.12.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
react@>18.0.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"

read-pkg-up@^2.0.0:
version "2.0.0"
Expand Down Expand Up @@ -10101,13 +10097,12 @@ saxes@^3.1.9:
dependencies:
xmlchars "^2.1.1"

scheduler@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
scheduler@^0.23.0:
version "0.23.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

schema-utils@^1.0.0:
version "1.0.0"
Expand Down