├── .eslintrc.js
├── .gitattributes
├── .github
    └── workflows
    │   ├── ci.yml
    │   └── docs.yml
├── .gitignore
├── .npmignore
├── .tool-versions
├── LICENSE
├── README.md
├── babel.config.json
├── docs
    ├── api.md
    ├── demos
    │   ├── alert-container
    │   │   ├── code.example
    │   │   ├── description.md
    │   │   └── index.js
    │   ├── alert-list
    │   │   ├── code.example
    │   │   ├── description.md
    │   │   └── index.js
    │   ├── alert
    │   │   ├── code.example
    │   │   ├── description.md
    │   │   └── index.js
    │   ├── code-example.js
    │   ├── index.js
    │   └── themed
    │   │   ├── code.example
    │   │   ├── description.md
    │   │   └── index.js
    ├── header.js
    ├── index.html
    ├── index.js
    ├── intro.md
    ├── root.js
    └── scroll-text.js
├── package-lock.json
├── package.json
├── src
    ├── alert-list.js
    ├── alert-timer.js
    ├── alert-transition.js
    ├── alert
    │   ├── icon.js
    │   └── index.js
    ├── container.js
    ├── index.js
    └── transition-styles.js
└── webpack.config.js


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-commonjs */
 2 | 
 3 | module.exports = {
 4 | 	env: {
 5 | 		es6: true,
 6 | 		node: true,
 7 | 		browser: true
 8 | 	},
 9 | 	extends: ["@runly"],
10 | 	rules: {
11 | 		"react/jsx-no-bind": "off"
12 | 	}
13 | };
14 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | *		text=auto


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on: push
 3 | 
 4 | jobs:
 5 |   lint:
 6 |     name: Lint
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |     - uses: actions/checkout@v2
11 |     - uses: actions/setup-node@v1
12 |       with:
13 |         node-version: '12.x'
14 | 
15 |     - name: Cache Dependencies
16 |       uses: actions/cache@v2
17 |       with:
18 |         path: '**/node_modules'
19 |         key: ${{ runner.os }}-deps-${{ hashFiles('package-lock.json') }}
20 |         restore-keys: |
21 |           ${{ runner.os }}-deps-
22 | 
23 |     - name: Install dependencies
24 |       run: npm i
25 | 
26 |     - run: npm run lint
27 | 
28 |   build_docs:
29 |     name: Build Docs
30 |     runs-on: ubuntu-latest
31 | 
32 |     steps:
33 |     - uses: actions/checkout@v2
34 |     - uses: actions/setup-node@v1
35 |       with:
36 |         node-version: '12.x'
37 | 
38 |     - name: Cache Dependencies
39 |       uses: actions/cache@v2
40 |       with:
41 |         path: '**/node_modules'
42 |         key: ${{ runner.os }}-deps-${{ hashFiles('package-lock.json') }}
43 |         restore-keys: |
44 |           ${{ runner.os }}-deps-
45 | 
46 |     - name: Install dependencies
47 |       run: npm i
48 | 
49 |     - run: npm run build --production
50 | 


--------------------------------------------------------------------------------
/.github/workflows/docs.yml:
--------------------------------------------------------------------------------
 1 | name: Documentation
 2 | on:
 3 |   release:
 4 |     types: [published]
 5 | 
 6 | jobs:
 7 |   docfx:
 8 |     name: Deploy Docs
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |     - name: Checkout Main Branch
13 |       uses: actions/checkout@v2
14 | 
15 |     - name: Get Version
16 |       id: get_version
17 |       run: echo ::set-output name=version::${GITHUB_REF/refs\/tags\//}
18 | 
19 |     - uses: actions/setup-node@v1
20 |       with:
21 |         node-version: '12.x'
22 | 
23 |     - name: Cache Dependencies
24 |       uses: actions/cache@v2
25 |       with:
26 |         path: '**/node_modules'
27 |         key: ${{ runner.os }}-deps-${{ hashFiles('package-lock.json') }}
28 |         restore-keys: |
29 |           ${{ runner.os }}-deps-
30 | 
31 |     - name: Install dependencies
32 |       run: npm i
33 | 
34 |     - name: Build Documentation
35 |       run: npm run build --production
36 | 
37 |     - name: Checkout gh-pages Branch
38 |       uses: actions/checkout@v2
39 |       with:
40 |         ref: gh-pages
41 |         path: gh-pages
42 | 
43 |     - name: Stage files for commit
44 |       working-directory: gh-pages
45 |       run: |
46 |         cp ../docs/index.html .
47 |         cp ../docs/build.js .
48 |         cp ../docs/build.js.map .
49 | 
50 |     - name: Commit doc assets
51 |       working-directory: gh-pages
52 |       run: |
53 |         git config user.name "${GITHUB_ACTOR}"
54 |         git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
55 |         git add .
56 |         git diff-index --quiet HEAD || git commit -m "Documentation ${{ steps.get_version.outputs.version }}"
57 |         git push
58 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /lib
3 | /es
4 | npm-debug.log
5 | docs/build.*
6 | yarn.lock
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /src
2 | /docs
3 | babel.config.json
4 | webpack.config.js
5 | .eslintrc.js
6 | 


--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | nodejs 18.12.1
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Chad Lee
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Bootstrap Notifier
  2 | 
  3 | > A react component to show growl-like notifications using [bootstrap alerts](https://getbootstrap.com/docs/4.5/components/alerts/).
  4 | 
  5 | See a [live demo](https://chadly.github.io/react-bs-notifier/).
  6 | 
  7 | ## Usage
  8 | 
  9 | ```
 10 | npm install react-bs-notifier --save
 11 | ```
 12 | 
 13 | To show a list of different types of alerts in the top right corner of the page:
 14 | 
 15 | ```js
 16 | import React from "react";
 17 | import ReactDOM from "react-dom";
 18 | import { AlertList } from "react-bs-notifier";
 19 | 
 20 | const alerts = [{
 21 | 	id: 1,
 22 | 	type: "info",
 23 | 	message: "Hello, world"
 24 | }, {
 25 | 	id: 2,
 26 | 	type: "success",
 27 | 	message: "Oh, hai"
 28 | }]
 29 | 
 30 | ReactDOM.render((
 31 | 	<AlertList alerts={alerts} />
 32 | ), document.getElementById("myApp"));
 33 | ```
 34 | 
 35 | Or to show a single inline-alert:
 36 | 
 37 | ```js
 38 | import React from "react";
 39 | import ReactDOM from "react-dom";
 40 | import { Alert } from "react-bs-notifier";
 41 | 
 42 | ReactDOM.render((
 43 | 	<Alert type="danger" headline="Error!">
 44 | 		Holy cow, man!
 45 | 	</Alert>
 46 | ), document.getElementById("myApp"));
 47 | ```
 48 | 
 49 | Or show alerts without creating an array (equivalent to first example):
 50 | 
 51 | ```js
 52 | import React from "react";
 53 | import ReactDOM from "react-dom";
 54 | import { Alert, AlertContainer } from "react-bs-notifier";
 55 | 
 56 | ReactDOM.render((
 57 | 	<AlertContainer>
 58 | 		<Alert type="info">Hello, world</Alert>
 59 | 		<Alert type="success">Oh, hai</Alert>
 60 | 	</AlertContainer>
 61 | ), document.getElementById("myApp"));
 62 | ```
 63 | 
 64 | [Read the documentation](https://chadly.github.io/react-bs-notifier/) for more in-depth, interactive examples and live demos.
 65 | 
 66 | ## Contributing
 67 | 
 68 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 69 | 
 70 | If you have a new feature or change you'd like to submit, please submit an issue first to talk about the change you want to make. When you are finished making your change, please make sure to also update the documentation. Once you clone this repo, you can run the docs & example app locally:
 71 | 
 72 | ```
 73 | npm install
 74 | npm start
 75 | ```
 76 | 
 77 | This will spin up a webpack dev server on port 1341. Open your browser to [localhost:1341](http://localhost:1341/) and any changes you make will build & refresh the page automatically.
 78 | 
 79 | ### Linting
 80 | 
 81 | To run the linter:
 82 | 
 83 | ```
 84 | npm run lint
 85 | ```
 86 | 
 87 | This project uses [prettier for formatting](https://github.com/prettier/prettier) and will fail linting if the code doesn't conform to prettier's output. To automatically fix any formatting issues, run:
 88 | 
 89 | ```
 90 | npm run lint -- --fix
 91 | ```
 92 | 
 93 | Or, if you are using an editor that supports [ESLint](http://eslint.org/), just make sure to enable automatically fixing lint errors on save. E.g., in [Visual Studio Code](https://code.visualstudio.com/) with the [ESLint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), make sure this is in your `settings.json`:
 94 | 
 95 | ```json
 96 | {
 97 |   "eslint.autoFixOnSave": true
 98 | }
 99 | ```
100 | 


--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"presets": [
 3 | 		[
 4 | 			"@babel/preset-env",
 5 | 			{
 6 | 				"targets": {
 7 | 					"browsers": "defaults"
 8 | 				},
 9 | 				"modules": false
10 | 			}
11 | 		],
12 | 		"@babel/preset-react"
13 | 	],
14 | 	"plugins": ["@babel/proposal-export-default-from"],
15 | 	"env": {
16 | 		"cjs": {
17 | 			"presets": [
18 | 				[
19 | 					"@babel/preset-env",
20 | 					{
21 | 						"targets": {
22 | 							"node": true
23 | 						}
24 | 					}
25 | 				],
26 | 				"@babel/preset-react"
27 | 			]
28 | 		}
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/docs/api.md:
--------------------------------------------------------------------------------
  1 | ### `AlertList` Props
  2 | 
  3 | The `AlertList` component will render an array of `alerts` into one of the corners of the page. It takes the following `props`:
  4 | 
  5 | ---
  6 | 
  7 | #### `alerts`
  8 | 
  9 | These are the alerts that the component should render. It expects an object with fields `id` & `message` with an optional `type` & `headline`.
 10 | 
 11 | Hint: if you don't have anything good to make an `id` out of, try using: `new Date()).getTime()`
 12 | 
 13 | If no `headline` is specified, only the message will show up in the alert.
 14 | 
 15 | The supported values for `type` are one of _info_, _warning_, _danger_, or _success_. If no `type` is specified, it is assumed to be _info_.
 16 | 
 17 | The `message` can be plain text or any arbitrary React component. Please note though that although the `message` can accept arbitrary content, the height animation on the alerts is static and based on the assumption that the content won't exceed `20em` vertically. You probably want to avoid putting anything that long in an alert which overlaps your UI anyway as opposed to linking to more detail.
 18 | 
 19 | ---
 20 | 
 21 | #### `position`
 22 | 
 23 | The corner in which alerts appear. One of _top-right_ (default), _top-left_, _bottom-right_, _bottom-left_.
 24 | 
 25 | ---
 26 | 
 27 | #### `timeout`
 28 | 
 29 | An optional timeout (in milliseconds) before alerts are automatically dismissed. If not specified, an alert will not be dismissed until the user dismisses it. If a timeout is specified but no `onDismiss` function, it is equivalent to specifying no timeout. There is no timeout by default.
 30 | 
 31 | ---
 32 | 
 33 | #### `onDismiss`
 34 | 
 35 | When a user clicks the &times; icon to dismiss the alert, this function will be called. The function is optional. If no `onDismiss` function is specified, the component will not render a close button for the alert and it will be undismissable by the user. The dismiss function will receive the `alert` that was dismissed as its sole argument.
 36 | 
 37 | ---
 38 | 
 39 | #### `showIcon`
 40 | 
 41 | A boolean value which indicates whether or not the alert type icon should be rendered. It is `true` by default.
 42 | 
 43 | ---
 44 | 
 45 | #### `dismissTitle`
 46 | 
 47 | The title text for the dismiss-alert button. By default, it is _Dismiss_.
 48 | 
 49 | ---
 50 | 
 51 | ### `Alert` Props
 52 | 
 53 | An `Alert` component by itself will render an alert inline. It takes the following `props`:
 54 | 
 55 | #### `type`
 56 | 
 57 | An optional type for the alert. The supported values for `type` are one of _info_, _warning_, _danger_, or _success_. If no `type` is specified, it is assumed to be _info_.
 58 | 
 59 | ---
 60 | 
 61 | #### `headline`
 62 | 
 63 | An optional larger headline text to show in the alert. If no `headline` is specified, only the child content will show up in the alert.
 64 | 
 65 | ---
 66 | 
 67 | #### `onDismiss`
 68 | 
 69 | When a user clicks the &times; icon to dismiss the alert, this function will be called. The function is optional. If no `onDismiss` function is specified, the component will not render a close button for the alert and it will be undismissable by the user. The `onDismiss` function is called with no arguments.
 70 | 
 71 | ---
 72 | 
 73 | #### `showIcon`
 74 | 
 75 | A boolean value which indicates whether or not the alert type icon should be rendered. It is `true` by default.
 76 | 
 77 | ---
 78 | 
 79 | #### `dismissTitle`
 80 | 
 81 | The title text for the dismiss-alert button. By default, it is _Dismiss_.
 82 | 
 83 | ---
 84 | 
 85 | #### `timeout`
 86 | 
 87 | An optional timeout (in milliseconds) before this alert will be automatically dismissed. If not specified, an alert will not be dismissed until the user dismisses it. If a timeout is specified but no `onDismiss` function, it is equivalent to specifying no timeout. There is no timeout by default.
 88 | 
 89 | ---
 90 | 
 91 | #### `classes`
 92 | 
 93 | JSS style overrides for the component. The following classes can be overridden:
 94 | 
 95 | * `alert`: CSS class applied to the root `div` of the `Alert`
 96 | * `info`: CSS class applied to the root `div` for `info` alerts
 97 | * `success`: CSS class applied to the root `div` for `success` alerts
 98 | * `warning`: CSS class applied to the root `div` for `warning` alerts
 99 | * `danger`: CSS class applied to the root `div` for `danger` alerts
100 | * `dismissable`: CSS class applied to the root `div` for alerts that can be dismissed
101 | * `close`: CSS class applied to the _dismiss_ button
102 | * `icon`: CSS class applied to the alert type icon
103 | * `msgContainer`: CSS class applied to the container holding the headline and message
104 | * `headline`: CSS class applied to the headline element (if provided)
105 | * `body`: CSS class applied to the message element itself
106 | 
107 | See the _Themed Alert_ example above.
108 | 
109 | ---
110 | 
111 | ### `AlertContainer` Props
112 | 
113 | The `AlertContainer` will render it's child `Alert`s in one of the corners of the page. It takes the following `props`:
114 | 
115 | ---
116 | 
117 | #### `position`
118 | 
119 | The corner in which alerts appear. One of _top-right_ (default), _top-left_, _bottom-right_, _bottom-left_.


--------------------------------------------------------------------------------
/docs/demos/alert-container/code.example:
--------------------------------------------------------------------------------
 1 | function MyComponent() {
 2 | 	const [showing, setShowing] = React.useState({
 3 | 		info: false,
 4 | 		success: false,
 5 | 		warning: false,
 6 | 		danger: false
 7 | 	});
 8 | 
 9 | 	const onAlertToggle = React.useCallback(
10 | 		type => setShowing(s => ({ ...s, [type]: !s[type] })),
11 | 		[]
12 | 	);
13 | 
14 | 	return (
15 | 		<div>
16 | 			<AlertContainer position="top-left">
17 | 				{showing.info ? (
18 | 					<Alert type="info" headline="Oh Some Info">
19 | 						Something happened of only moderate importance.
20 | 					</Alert>
21 | 				) : null}
22 | 
23 | 				{showing.success ? (
24 | 					<Alert type="success" headline="Oh My Something Nice">
25 | 						Something amazing has happened!
26 | 					</Alert>
27 | 				) : null}
28 | 
29 | 				{showing.warning ? (
30 | 					<Alert type="warning" headline="Oh Uhh Hmm">
31 | 						Something bad may be about to happen.
32 | 					</Alert>
33 | 				) : null}
34 | 
35 | 				{showing.danger ? (
36 | 					<Alert type="danger" headline="Oh Shit">
37 | 						Something bad has happened. Panic!
38 | 					</Alert>
39 | 				) : null}
40 | 			</AlertContainer>
41 | 
42 | 			<div className="btn-group">
43 | 				<button className="btn btn-info" onClick={() => onAlertToggle("info")}>
44 | 					Toggle Info Alert
45 | 				</button>
46 | 
47 | 				<button
48 | 					className="btn btn-success"
49 | 					onClick={() => onAlertToggle("success")}
50 | 				>
51 | 					Toggle Success Alert
52 | 				</button>
53 | 
54 | 				<button
55 | 					className="btn btn-warning"
56 | 					onClick={() => onAlertToggle("warning")}
57 | 				>
58 | 					Toggle Warning Alert
59 | 				</button>
60 | 
61 | 				<button
62 | 					className="btn btn-danger"
63 | 					onClick={() => onAlertToggle("danger")}
64 | 				>
65 | 					Toggle Danger Alert
66 | 				</button>
67 | 			</div>
68 | 		</div>
69 | 	);
70 | }
71 | 


--------------------------------------------------------------------------------
/docs/demos/alert-container/description.md:
--------------------------------------------------------------------------------
1 | You can use the `AlertContainer` in combination with individual `Alert` components to recreate the functionality of the `AlertList`. If you'd rather not have a central list of alerts and you want to control which alerts appear inline, this is a nice option. 


--------------------------------------------------------------------------------
/docs/demos/alert-container/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import CodeExample from "../code-example";
 3 | 
 4 | import ex from "./code.example";
 5 | import desc from "./description.md";
 6 | 
 7 | const AlertContainerDemo = props => (
 8 | 	<CodeExample
 9 | 		title={<code>AlertContainer</code>}
10 | 		code={ex}
11 | 		description={desc}
12 | 		{...props}
13 | 	/>
14 | );
15 | 
16 | export default AlertContainerDemo;
17 | 


--------------------------------------------------------------------------------
/docs/demos/alert-list/code.example:
--------------------------------------------------------------------------------
  1 | function NotifierGenerator() {
  2 | 	const [position, setPosition] = React.useState("top-right");
  3 | 	const [alerts, setAlerts] = React.useState([]);
  4 | 	const [alertTimeout, setAlertTimeout] = React.useState(0);
  5 | 	const [newMessage, setNewMessage] = React.useState(
  6 | 		"This is a test of the Emergency Broadcast System. This is only a test."
  7 | 	);
  8 | 
  9 | 	const generate = React.useCallback(
 10 | 		type => {
 11 | 			setAlerts(alerts => [
 12 | 				...alerts,
 13 | 				{
 14 | 					id: new Date().getTime(),
 15 | 					type: type,
 16 | 					headline: `Whoa, ${type}!`,
 17 | 					message: newMessage
 18 | 				}
 19 | 			]);
 20 | 		},
 21 | 		[newMessage]
 22 | 	);
 23 | 
 24 | 	const onDismissed = React.useCallback(alert => {
 25 | 		setAlerts(alerts => {
 26 | 			const idx = alerts.indexOf(alert);
 27 | 			if (idx < 0) return alerts;
 28 | 			return [...alerts.slice(0, idx), ...alerts.slice(idx + 1)];
 29 | 		});
 30 | 	}, []);
 31 | 
 32 | 	const clearAlerts = React.useCallback(() => setAlerts([]), []);
 33 | 
 34 | 	const onTimeoutChange = React.useCallback(
 35 | 		({ target: { value } }) => setAlertTimeout(+value * 1000),
 36 | 		[]
 37 | 	);
 38 | 
 39 | 	const onNewMessageChange = React.useCallback(
 40 | 		({ target: { value } }) => setNewMessage(value),
 41 | 		[]
 42 | 	);
 43 | 
 44 | 	const onPositionChange = React.useCallback(
 45 | 		({ target: { value } }) => setPosition(value),
 46 | 		[]
 47 | 	);
 48 | 
 49 | 	const clearAllButton = alerts.length ? (
 50 | 		<button className="btn btn-link" onClick={clearAlerts}>
 51 | 			Clear all alerts
 52 | 		</button>
 53 | 	) : null;
 54 | 
 55 | 	return (
 56 | 		<>
 57 | 			<AlertList
 58 | 				position={position}
 59 | 				alerts={alerts}
 60 | 				timeout={alertTimeout}
 61 | 				dismissTitle="Begone!"
 62 | 				onDismiss={onDismissed}
 63 | 			/>
 64 | 
 65 | 			<div className="form-group">
 66 | 				<label htmlFor="new-message-control">Message</label>
 67 | 				<textarea
 68 | 					id="new-message-control"
 69 | 					placeholder="Something happened, here are the deets"
 70 | 					className="form-control"
 71 | 					value={newMessage}
 72 | 					onChange={onNewMessageChange}
 73 | 				/>
 74 | 			</div>
 75 | 
 76 | 			<div className="form-row">
 77 | 				<div className="form-group col-md-6">
 78 | 					<label htmlFor="timeout-control" className="control-label">
 79 | 						Auto-dismiss after
 80 | 					</label>
 81 | 					<div className="input-group">
 82 | 						<input
 83 | 							id="timeout-control"
 84 | 							className="form-control"
 85 | 							type="number"
 86 | 							value={alertTimeout / 1000}
 87 | 							onChange={onTimeoutChange}
 88 | 						/>
 89 | 						<div className="input-group-append">
 90 | 							<span className="input-group-text">seconds</span>
 91 | 						</div>
 92 | 					</div>
 93 | 				</div>
 94 | 
 95 | 				<div className="form-group col-md-6">
 96 | 					<label htmlFor="position-control">Position</label>
 97 | 					<select
 98 | 						onChange={onPositionChange}
 99 | 						className="form-control"
100 | 						id="position-control"
101 | 					>
102 | 						{["top-right", "top-left", "bottom-right", "bottom-left"].map(p => (
103 | 							<option key={p} value={p}>
104 | 								{p}
105 | 							</option>
106 | 						))}
107 | 					</select>
108 | 				</div>
109 | 			</div>
110 | 
111 | 			<div className="form-group text-right">
112 | 				{clearAllButton}
113 | 				<div className="btn-group">
114 | 					{["info", "success", "warning", "danger"].map(type => (
115 | 						<button
116 | 							key={type}
117 | 							type="button"
118 | 							className={`btn btn-${type}`}
119 | 							onClick={() => generate(type)}
120 | 						>
121 | 							generate {type}
122 | 						</button>
123 | 					))}
124 | 				</div>
125 | 			</div>
126 | 		</>
127 | 	);
128 | }
129 | 


--------------------------------------------------------------------------------
/docs/demos/alert-list/description.md:
--------------------------------------------------------------------------------
1 | Use the `AlertList` component to easily create alerts from an array. You can customize the component by setting the screen `position` and setting an auto-dismiss `timeout`. 


--------------------------------------------------------------------------------
/docs/demos/alert-list/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import CodeExample from "../code-example";
 3 | 
 4 | import ex from "./code.example";
 5 | import desc from "./description.md";
 6 | 
 7 | const AlertListDemo = props => (
 8 | 	<CodeExample
 9 | 		title={<code>AlertList</code>}
10 | 		code={ex}
11 | 		description={desc}
12 | 		{...props}
13 | 	/>
14 | );
15 | 
16 | export default AlertListDemo;
17 | 


--------------------------------------------------------------------------------
/docs/demos/alert/code.example:
--------------------------------------------------------------------------------
1 | <Alert type="info" headline="Optional Headline">
2 | 	This is a message that explains what happened in a little more detail.
3 | 	You can include <a href="http://example.com/" className="alert-link" target="_blank">arbitrary markup</a> here.
4 | </Alert>


--------------------------------------------------------------------------------
/docs/demos/alert/description.md:
--------------------------------------------------------------------------------
1 | You can use the `Alert` component to render an inline-alert. Since we don't pass an `onDismiss` function here, the alert is undismissable.


--------------------------------------------------------------------------------
/docs/demos/alert/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import CodeExample from "../code-example";
 3 | 
 4 | import ex from "./code.example";
 5 | import desc from "./description.md";
 6 | 
 7 | const AlertDemo = props => (
 8 | 	<CodeExample
 9 | 		title={
10 | 			<span>
11 | 				Inline <code>Alert</code>
12 | 			</span>
13 | 		}
14 | 		code={ex}
15 | 		description={desc}
16 | 		{...props}
17 | 		noRender
18 | 	/>
19 | );
20 | 
21 | export default AlertDemo;
22 | 


--------------------------------------------------------------------------------
/docs/demos/code-example.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | 
 4 | import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 5 | import theme from "prism-react-renderer/themes/vsDark";
 6 | 
 7 | import { Alert, AlertList, AlertContainer } from "../../src";
 8 | import { createUseStyles } from "react-jss";
 9 | import Markdown from "react-remarkable";
10 | 
11 | const CodeExample = ({ title, description, ...props }) => {
12 | 	const classes = useStyles();
13 | 
14 | 	return (
15 | 		<div className={classes.root}>
16 | 			<h3 className={classes.title}>{title}</h3>
17 | 
18 | 			<LiveProvider
19 | 				scope={{
20 | 					React,
21 | 					ReactDOM,
22 | 					Alert,
23 | 					AlertList,
24 | 					AlertContainer,
25 | 					createUseStyles
26 | 				}}
27 | 				theme={theme}
28 | 				{...props}
29 | 			>
30 | 				<div className="mb-5">
31 | 					<LivePreview />
32 | 				</div>
33 | 
34 | 				<LiveError className="alert alert-danger" />
35 | 
36 | 				<div className={classes.code}>
37 | 					<LiveEditor />
38 | 				</div>
39 | 			</LiveProvider>
40 | 
41 | 			<Markdown source={description} />
42 | 		</div>
43 | 	);
44 | };
45 | 
46 | const useStyles = createUseStyles({
47 | 	root: {
48 | 		composes: "my-5"
49 | 	},
50 | 	title: {
51 | 		composes: "mb-3"
52 | 	},
53 | 	example: {
54 | 		composes: ["row", "my-5"]
55 | 	},
56 | 	code: {
57 | 		composes: "my-5",
58 | 		maxHeight: 500,
59 | 		overflowY: "scroll"
60 | 	}
61 | });
62 | 
63 | export default CodeExample;
64 | 


--------------------------------------------------------------------------------
/docs/demos/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import AlertListDemo from "./alert-list";
 4 | import AlertDemo from "./alert";
 5 | import AlertContainerDemo from "./alert-container";
 6 | import ThemedAlertDemo from "./themed";
 7 | 
 8 | const Demos = () => (
 9 | 	<div>
10 | 		<p>You can view and edit the code for each demo inline.</p>
11 | 
12 | 		<AlertListDemo />
13 | 		<hr />
14 | 
15 | 		<AlertDemo />
16 | 		<hr />
17 | 
18 | 		<AlertContainerDemo />
19 | 		<hr />
20 | 
21 | 		<ThemedAlertDemo />
22 | 		<hr />
23 | 	</div>
24 | );
25 | 
26 | export default Demos;
27 | 


--------------------------------------------------------------------------------
/docs/demos/themed/code.example:
--------------------------------------------------------------------------------
 1 | const ThemedAlert = props => {
 2 | 	const classes = useStyleOverrides();
 3 | 	return <Alert {...props} classes={classes} />;
 4 | };
 5 | 
 6 | const useStyleOverrides = createUseStyles({
 7 | 	success: {
 8 | 		color: "#efd8f0",
 9 | 		background: "#8f2ba1",
10 | 		borderColor: "#80237f",
11 | 		borderWidth: 15,
12 | 		borderRadius: 60
13 | 	}
14 | });
15 | 
16 | render(
17 | 	<ThemedAlert type="success" headline="What have I done">
18 | 		This terrible power should have never been unleashed
19 | 	</ThemedAlert>
20 | );
21 | 


--------------------------------------------------------------------------------
/docs/demos/themed/description.md:
--------------------------------------------------------------------------------
1 | To customize the theme of an `Alert`, create a style hook with [react-jss](https://github.com/cssinjs/react-jss) and pass the resulting classes to the `Alert` component.
2 | 
3 | Expand and play with the code example above.
4 | 


--------------------------------------------------------------------------------
/docs/demos/themed/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import CodeExample from "../code-example";
 3 | 
 4 | import ex from "./code.example";
 5 | import desc from "./description.md";
 6 | 
 7 | const ThemedAlertDemo = props => (
 8 | 	<CodeExample
 9 | 		title={
10 | 			<span>
11 | 				Themed <code>Alert</code>
12 | 			</span>
13 | 		}
14 | 		code={ex}
15 | 		description={desc}
16 | 		noInline
17 | 		{...props}
18 | 	/>
19 | );
20 | 
21 | export default ThemedAlertDemo;
22 | 


--------------------------------------------------------------------------------
/docs/header.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Header = () => (
 4 | 	<header className="jumbotron">
 5 | 		<div className="container">
 6 | 			<h1>React Bootstrap Notifier</h1>
 7 | 			<p>
 8 | 				A react component to show bootstrap alert notifications.
 9 | 				<a href="https://github.com/chadly/react-bs-notifier">View on GitHub</a>
10 | 			</p>
11 | 		</div>
12 | 	</header>
13 | );
14 | 
15 | export default Header;
16 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<title>React Bootstrap Notifier</title>
 5 | 		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
 6 | 		<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
 7 | 
 8 | 		<script async defer data-domain="chadly.github.io" src="https://plausible.io/js/plausible.js"></script>
 9 | 
10 | 		<meta charset="utf-8" />
11 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
12 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
13 | 	</head>
14 | 	<body>
15 | 		<div id="docsApp">
16 | 			<div class="container well" style="margin-top: 50px">Loading documentation...</div>
17 | 		</div>
18 | 
19 | 		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
20 | 		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
21 | 		<script src="build.js"></script>
22 | 	</body>
23 | </html>


--------------------------------------------------------------------------------
/docs/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { createRoot } from "react-dom/client";
3 | import Root from "./root";
4 | 
5 | const root = createRoot(document.getElementById("docsApp"));
6 | root.render(<Root />);
7 | 


--------------------------------------------------------------------------------
/docs/intro.md:
--------------------------------------------------------------------------------
 1 | ```
 2 | npm install react-bs-notifier --save
 3 | ```
 4 | 
 5 | and then
 6 | 
 7 | ```js
 8 | import { AlertList, Alert, AlertContainer } from "react-bs-notifier";
 9 | ```
10 | 
11 | This package exports three components, `AlertList`, `Alert`, & `AlertContainer`. Depending on your use-case, one or a combination of these components might work better for you.
12 | 
13 | These components makes use of [Bootstrap](https://getbootstrap.com/) & [Font Awesome](http://fontawesome.io/), but do not take direct dependencies on either. It assumes the CSS classes are available (e.g. just include the stylesheets). If bootstrap isn't available, the component won't look like much. If font awesome isn't available, it just won't add the icons to the alerts.


--------------------------------------------------------------------------------
/docs/root.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Markdown from "react-remarkable";
 3 | 
 4 | import Header from "./header";
 5 | import Demos from "./demos";
 6 | 
 7 | import intro from "./intro.md";
 8 | import api from "./api.md";
 9 | 
10 | const Root = () => (
11 | 	<>
12 | 		<Header />
13 | 		<main className="container">
14 | 			<section>
15 | 				<Markdown source={intro} />
16 | 			</section>
17 | 
18 | 			<section>
19 | 				<h2>Demos</h2>
20 | 				<Demos />
21 | 			</section>
22 | 
23 | 			<section>
24 | 				<h2>API</h2>
25 | 				<Markdown source={api} />
26 | 			</section>
27 | 		</main>
28 | 	</>
29 | );
30 | 
31 | export default Root;
32 | 


--------------------------------------------------------------------------------
/docs/scroll-text.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | 
  3 | const ScrollText = () => (
  4 | 	<section>
  5 | 		<h3>Text for Scrolling</h3>
  6 | 		<p>
  7 | 			This is boilerplate text to show how the alert stays fixed to the top of
  8 | 			the page as you scroll.
  9 | 		</p>
 10 | 
 11 | 		<p>
 12 | 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae
 13 | 			justo vel tellus ultricies luctus. Mauris ac malesuada tellus. Morbi
 14 | 			gravida pellentesque ultricies. Praesent hendrerit cursus lectus commodo
 15 | 			malesuada. Pellentesque elit ex, accumsan ut velit suscipit, pellentesque
 16 | 			interdum augue. Vestibulum quis nisl ut nisl varius hendrerit. Proin
 17 | 			facilisis luctus ipsum, vitae molestie tellus mattis dapibus.
 18 | 		</p>
 19 | 		<p>
 20 | 			Duis eget urna vel nulla auctor ullamcorper at sit amet enim. Proin sed
 21 | 			pretium risus. Aenean ac quam at dui tincidunt tristique. Class aptent
 22 | 			taciti sociosqu ad litora torquent per conubia nostra, per inceptos
 23 | 			himenaeos. Donec viverra quam quam. Etiam mattis quam et venenatis auctor.
 24 | 			Maecenas lectus ipsum, luctus et varius a, pharetra id risus. Curabitur ac
 25 | 			nibh vitae mauris volutpat varius id eget risus. Donec sem quam, dapibus
 26 | 			vitae convallis ut, tempus eget dolor. Nulla facilisi. Phasellus eget
 27 | 			viverra odio. Aenean finibus justo vitae dui ornare ultrices.
 28 | 		</p>
 29 | 		<p>
 30 | 			Sed sed dapibus diam. Suspendisse in viverra orci. Aliquam eu velit orci.
 31 | 			Nunc interdum odio id dolor sodales vehicula nec sit amet tortor. Morbi
 32 | 			efficitur tristique ipsum hendrerit vehicula. Aenean nec semper lectus.
 33 | 			Vivamus efficitur velit massa, vitae condimentum eros tristique vitae.
 34 | 			Vivamus cursus est magna, a scelerisque massa ultricies eget. Duis dictum
 35 | 			nibh lectus, in venenatis est vehicula ut. Nam interdum magna in tortor
 36 | 			bibendum suscipit. Nullam at luctus nisl.
 37 | 		</p>
 38 | 		<p>
 39 | 			Integer ornare tellus non nisl porta, non lacinia ex eleifend. Donec ex
 40 | 			nisi, maximus id justo nec, condimentum rutrum metus. Pellentesque
 41 | 			scelerisque molestie diam, sed dignissim lacus. Nulla vestibulum efficitur
 42 | 			egestas. Ut ut nisi eu augue dignissim tincidunt eu quis turpis.
 43 | 			Pellentesque in egestas sem. Suspendisse non nunc sed nulla commodo
 44 | 			laoreet. Pellentesque gravida sit amet enim eget vestibulum. Integer sed
 45 | 			sollicitudin turpis, eget aliquam neque. Ut sit amet eros lorem. Aliquam
 46 | 			aliquet eleifend enim. Nullam vulputate libero vel lectus placerat, et
 47 | 			pretium ipsum cursus. Cras vel velit purus. Fusce laoreet augue ac nibh
 48 | 			varius ultricies.
 49 | 		</p>
 50 | 		<p>
 51 | 			Proin risus risus, vehicula semper augue vel, aliquet tincidunt arcu. Sed
 52 | 			at luctus libero, vel varius urna. Donec fermentum sodales sem, vel
 53 | 			bibendum mauris tempor a. Proin consectetur risus at massa rutrum
 54 | 			ultricies. Sed sagittis dictum pretium. Nam congue libero in nisl
 55 | 			vestibulum sollicitudin. Fusce pharetra sollicitudin orci, eget viverra
 56 | 			nisl. Duis finibus finibus vehicula. Vivamus efficitur, nunc eu tincidunt
 57 | 			consequat, massa sapien bibendum nibh, et placerat ante ante vel ligula.
 58 | 			Suspendisse potenti. Mauris malesuada consequat porttitor.
 59 | 		</p>
 60 | 		<p>
 61 | 			Donec in lorem in nibh tincidunt pulvinar. Aenean eget egestas magna.
 62 | 			Morbi sit amet ligula imperdiet, volutpat nunc venenatis, porttitor nisl.
 63 | 			Sed nec tortor a quam aliquam volutpat ut vitae nibh. Maecenas in mollis
 64 | 			risus, in auctor enim. Aenean consectetur dui ut eros cursus pellentesque.
 65 | 			Morbi facilisis vitae sem non imperdiet. Phasellus eget blandit enim.
 66 | 		</p>
 67 | 		<p>
 68 | 			Duis varius et sapien in consequat. Cras ex ex, efficitur ac tellus vel,
 69 | 			ornare volutpat turpis. Suspendisse finibus in purus eget pharetra.
 70 | 			Pellentesque risus dui, cursus non fringilla eu, egestas a felis. Etiam
 71 | 			vulputate scelerisque felis id mollis. Ut auctor tristique eros, a finibus
 72 | 			augue vehicula at. Phasellus consectetur sagittis est, a fermentum quam
 73 | 			rutrum et. Etiam finibus commodo sem vel fringilla.
 74 | 		</p>
 75 | 		<p>
 76 | 			Duis vel felis imperdiet, feugiat nulla id, fermentum velit. Ut pretium
 77 | 			dapibus eros quis feugiat. Etiam nec vulputate purus. Suspendisse sit amet
 78 | 			leo in enim cursus semper sagittis eget enim. Integer vestibulum pulvinar
 79 | 			dui ac lobortis. Nam euismod lectus id nibh cursus pulvinar vel et risus.
 80 | 			Curabitur sit amet interdum orci, at imperdiet ex. Ut cursus est sed ex
 81 | 			ultricies, a pulvinar tellus volutpat. Sed lacus lorem, mollis et
 82 | 			malesuada sit amet, pulvinar non libero. Aliquam viverra et mi sed
 83 | 			dignissim. Quisque vel facilisis augue. Nam vel imperdiet ipsum, at
 84 | 			sagittis nunc. Duis tincidunt libero ac elementum bibendum. Nulla quis
 85 | 			auctor neque. Nullam ac tempor velit.
 86 | 		</p>
 87 | 		<p>
 88 | 			Pellentesque vitae ante vestibulum, rutrum est quis, pellentesque erat.
 89 | 			Praesent fringilla ac ex ac aliquam. Nulla venenatis risus eget velit
 90 | 			maximus porta. In venenatis orci ut nibh lacinia commodo. Fusce euismod
 91 | 			egestas libero nec cursus. Ut faucibus porttitor auctor. Nam fringilla
 92 | 			condimentum imperdiet.
 93 | 		</p>
 94 | 		<p>
 95 | 			Donec bibendum convallis sem in sodales. Aenean eget ultrices enim, ac
 96 | 			suscipit eros. Sed laoreet urna sem, sit amet sagittis enim bibendum non.
 97 | 			Vivamus quis dignissim dolor. Sed est metus, bibendum at mi ut, tincidunt
 98 | 			ultricies ligula. Nam a pharetra dolor, nec laoreet ligula. Nunc fermentum
 99 | 			massa a nisi posuere, ut semper velit volutpat. Maecenas convallis, neque
100 | 			et tempus aliquam, enim elit scelerisque diam, in malesuada odio enim non
101 | 			tellus. Duis porttitor ipsum erat, ac fringilla diam egestas pretium.
102 | 			Maecenas molestie venenatis arcu sed mollis. Pellentesque pulvinar odio
103 | 			dolor, placerat pharetra elit tempor eu. Maecenas venenatis dignissim
104 | 			velit a ornare. Integer sapien risus, commodo eu velit quis, finibus
105 | 			malesuada velit. Mauris eget dui eu tortor bibendum pharetra vel quis
106 | 			lectus.
107 | 		</p>
108 | 	</section>
109 | );
110 | 
111 | export default ScrollText;
112 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-bs-notifier",
 3 |   "version": "7.0.0",
 4 |   "description": "A react component to show growl-like notifications using bootstrap alerts",
 5 |   "keywords": [
 6 |     "react-component",
 7 |     "react",
 8 |     "growl",
 9 |     "toaster",
10 |     "notifier",
11 |     "notifications",
12 |     "bootstrap",
13 |     "alerts"
14 |   ],
15 |   "main": "lib/index.js",
16 |   "module": "es/index.js",
17 |   "sideEffects": false,
18 |   "author": "Chad Lee <npm@chadly.net>",
19 |   "license": "MIT",
20 |   "scripts": {
21 |     "start": "webpack-dev-server --progress --inline --hot --content-base docs/ --port 1341",
22 |     "compile-cjs": "rimraf lib && cross-env BABEL_ENV=cjs babel src -d lib",
23 |     "compile-es": "rimraf es && babel src -d es",
24 |     "compile": "npm run compile-cjs && npm run compile-es",
25 |     "prepublishOnly": "npm run lint && npm run compile",
26 |     "build": "webpack --progress --bail",
27 |     "lint": "eslint --ignore-pattern lib --ignore-pattern es ."
28 |   },
29 |   "repository": {
30 |     "type": "git",
31 |     "url": "https://github.com/chadly/react-bs-notifier"
32 |   },
33 |   "bugs": {
34 |     "url": "https://github.com/chadly/react-bs-notifier/issues"
35 |   },
36 |   "dependencies": {
37 |     "prop-types": "^15.7.2",
38 |     "react-jss": "^10.4.0",
39 |     "react-transition-group": "^4.4.1",
40 |     "toetag": "^3.3.7"
41 |   },
42 |   "peerDependencies": {
43 |     "react": ">=18"
44 |   },
45 |   "devDependencies": {
46 |     "@babel/cli": "^7.10.5",
47 |     "@babel/core": "^7.11.1",
48 |     "@babel/plugin-proposal-export-default-from": "^7.10.4",
49 |     "@babel/preset-env": "^7.11.0",
50 |     "@babel/preset-react": "^7.10.4",
51 |     "@runly/eslint-config": "^2.0.1",
52 |     "babel-loader": "^8.1.0",
53 |     "cross-env": "^7.0.2",
54 |     "css-loader": "^4.2.1",
55 |     "eslint": "^7.7.0",
56 |     "json-loader": "~0.5.7",
57 |     "prettier": "^2.0.5",
58 |     "prism-react-renderer": "^1.1.1",
59 |     "raw-loader": "^4.0.1",
60 |     "react": "^18.2.0",
61 |     "react-dom": "^18.2.0",
62 |     "react-live": "^3.1.1",
63 |     "react-remarkable": "^1.1.3",
64 |     "rimraf": "^3.0.2",
65 |     "style-loader": "^1.2.1",
66 |     "webpack": "^4.44.1",
67 |     "webpack-cli": "^3.3.12",
68 |     "webpack-dev-server": "^3.11.0"
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/alert-list.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { TransitionGroup } from "react-transition-group";
 3 | import {
 4 | 	any,
 5 | 	arrayOf,
 6 | 	func,
 7 | 	node,
 8 | 	object,
 9 | 	oneOfType,
10 | 	shape,
11 | 	string
12 | } from "prop-types";
13 | 
14 | import Container, {
15 | 	PropTypes as ContainerPropTypes,
16 | 	useStyles
17 | } from "./container";
18 | 
19 | import Alert, { PropTypes as AlertPropTypes } from "./alert-timer";
20 | import AlertTransition from "./alert-transition";
21 | 
22 | const AlertList = ({ position, alerts, onDismiss, ...props }) => {
23 | 	const classes = useStyles();
24 | 
25 | 	return (
26 | 		<Container position={position} className={classes.container}>
27 | 			<TransitionGroup>
28 | 				{alerts.map(item => {
29 | 					const dismiss = onDismiss ? () => onDismiss(item) : null;
30 | 
31 | 					const { message, ...alertProps } = item;
32 | 
33 | 					return (
34 | 						<AlertTransition key={item.id}>
35 | 							<Alert {...props} {...alertProps} onDismiss={dismiss}>
36 | 								{message}
37 | 							</Alert>
38 | 						</AlertTransition>
39 | 					);
40 | 				})}
41 | 			</TransitionGroup>
42 | 		</Container>
43 | 	);
44 | };
45 | 
46 | const { timeout, type, headline } = AlertPropTypes;
47 | 
48 | AlertList.propTypes = {
49 | 	...ContainerPropTypes,
50 | 	alerts: arrayOf(
51 | 		shape({
52 | 			id: any.isRequired,
53 | 			type,
54 | 			headline,
55 | 			message: oneOfType([string, node, object]).isRequired
56 | 		})
57 | 	).isRequired,
58 | 	onDismiss: func,
59 | 	timeout
60 | };
61 | 
62 | export default AlertList;
63 | 


--------------------------------------------------------------------------------
/src/alert-timer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { oneOf, string, func, bool, number } from "prop-types";
 3 | 
 4 | import Alert from "./alert";
 5 | 
 6 | import { ENTER_TIMEOUT, EXIT_TIMEOUT } from "./container";
 7 | 
 8 | export default class AlertTimer extends Component {
 9 | 	constructor(props) {
10 | 		super(props);
11 | 	}
12 | 
13 | 	componentDidMount() {
14 | 		this.setupTimer(this.props.timeout, this.props.onDismiss);
15 | 	}
16 | 
17 | 	componentDidUpdate(prevProps) {
18 | 		if (
19 | 			this.props.timeout != prevProps.timeout ||
20 | 			this.props.onDismiss != prevProps.onDismiss
21 | 		) {
22 | 			this.setupTimer(this.props.timeout, this.props.onDismiss);
23 | 		}
24 | 	}
25 | 
26 | 	componentWillUnmount() {
27 | 		// need to clean up after ourselves
28 | 		this.setupTimer(/* passing nothing will clear the timer */);
29 | 	}
30 | 
31 | 	setupTimer(timeout, onDismiss) {
32 | 		if (!timeout || !onDismiss) {
33 | 			// clear any timer we currently have
34 | 			clearTimeout(this.timer);
35 | 			this.timer = null;
36 | 			this.timerTimeout = null;
37 | 		} else {
38 | 			if (this.timer && this.timerTimeout != timeout) {
39 | 				// the timeout value has changed, setup a new timer
40 | 				clearTimeout(this.timer);
41 | 				this.timer = null;
42 | 			}
43 | 
44 | 			// add new timer if we don't already have one
45 | 			if (!this.timer) {
46 | 				this.timer = setTimeout(
47 | 					this.dismissAlert.bind(this, onDismiss),
48 | 					timeout + ENTER_TIMEOUT + EXIT_TIMEOUT
49 | 				);
50 | 				this.timerTimeout = timeout;
51 | 			}
52 | 		}
53 | 	}
54 | 
55 | 	dismissAlert(onDismiss) {
56 | 		// clear the timer if it hasn't fired yet
57 | 		clearTimeout(this.timer);
58 | 
59 | 		// we don't need to keep track of any timers for this alert anymore
60 | 		this.timer = null;
61 | 		this.timerTimeout = null;
62 | 
63 | 		// actually dismiss the alert
64 | 		onDismiss();
65 | 	}
66 | 
67 | 	render() {
68 | 		const onDismiss = this.props.onDismiss
69 | 			? this.dismissAlert.bind(this, this.props.onDismiss)
70 | 			: null;
71 | 		return <Alert {...this.props} onDismiss={onDismiss} />;
72 | 	}
73 | }
74 | 
75 | export const PropTypes = {
76 | 	type: oneOf(["info", "success", "warning", "danger"]),
77 | 	headline: string,
78 | 	onDismiss: func,
79 | 	dismissTitle: string,
80 | 	showIcon: bool,
81 | 	timeout: number
82 | };
83 | 
84 | AlertTimer.propTypes = PropTypes;
85 | 


--------------------------------------------------------------------------------
/src/alert-transition.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import transitionStyles from "./transition-styles";
 3 | import { CSSTransition } from "react-transition-group";
 4 | import { ENTER_TIMEOUT, EXIT_TIMEOUT } from "./container";
 5 | import { createUseStyles } from "react-jss";
 6 | 
 7 | const AlertTransition = props => {
 8 | 	const classes = useStyles();
 9 | 
10 | 	const timeout = { enter: ENTER_TIMEOUT, exit: EXIT_TIMEOUT };
11 | 	return <CSSTransition timeout={timeout} classNames={classes} {...props} />;
12 | };
13 | 
14 | const useStyles = createUseStyles(transitionStyles);
15 | 
16 | export default AlertTransition;
17 | 


--------------------------------------------------------------------------------
/src/alert/icon.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Icon = ({ type, className = "" }) => {
 4 | 	const faType = iconType(type);
 5 | 
 6 | 	if (faType) {
 7 | 		return <i className={`${faType} ${className}`} aria-hidden="true" />;
 8 | 	}
 9 | 
10 | 	return null;
11 | };
12 | 
13 | function iconType(type) {
14 | 	switch (type) {
15 | 		case "warning":
16 | 			return "fa fa-warning";
17 | 
18 | 		case "info":
19 | 			return "fa fa-info";
20 | 
21 | 		case "success":
22 | 			return "fa fa-check";
23 | 
24 | 		case "danger":
25 | 			return "fa fa-exclamation-circle";
26 | 	}
27 | }
28 | 
29 | export default Icon;
30 | 


--------------------------------------------------------------------------------
/src/alert/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { createUseStyles } from "react-jss";
 3 | 
 4 | import { bootstrap } from "toetag";
 5 | import Icon from "./icon";
 6 | import transitionStyles from "../transition-styles";
 7 | 
 8 | const Alert = ({
 9 | 	type = "info",
10 | 	children,
11 | 	headline,
12 | 	onDismiss,
13 | 	dismissTitle = "Dismiss",
14 | 	showIcon = true,
15 | 	classes: classOverrides
16 | }) => {
17 | 	let classes = useStyles();
18 | 	classes = { ...classes, ...classOverrides };
19 | 
20 | 	const isDismissable = !!onDismiss;
21 | 	const css = `${isDismissable ? classes.dismissable : ""} ${classes[type]} ${
22 | 		classes.alert
23 | 	}`;
24 | 	const dismiss = isDismissable ? (
25 | 		<button
26 | 			type="button"
27 | 			className={classes.close}
28 | 			title={dismissTitle}
29 | 			onClick={onDismiss}
30 | 		>
31 | 			×
32 | 		</button>
33 | 	) : null;
34 | 
35 | 	return (
36 | 		<div>
37 | 			{/* this classless container div is used by the transition group above... don't delete it */}
38 | 			<div className={css}>
39 | 				{dismiss}
40 | 
41 | 				{showIcon ? <Icon className={classes.icon} type={type} /> : null}
42 | 				<div className={classes.msgContainer}>
43 | 					{headline ? <h4 className={classes.headline}>{headline}</h4> : null}
44 | 					<div className={classes.body}>{children}</div>
45 | 				</div>
46 | 			</div>
47 | 		</div>
48 | 	);
49 | };
50 | 
51 | const useStyles = createUseStyles({
52 | 	...transitionStyles,
53 | 	alert: {
54 | 		composes: "alert",
55 | 		marginBottom: bootstrap.paddingBaseVertical,
56 | 		display: "inline-block",
57 | 		textAlign: "left"
58 | 	},
59 | 	info: {
60 | 		composes: "alert-info"
61 | 	},
62 | 	success: {
63 | 		composes: "alert-success"
64 | 	},
65 | 	warning: {
66 | 		composes: "alert-warning"
67 | 	},
68 | 	danger: {
69 | 		composes: "alert-danger"
70 | 	},
71 | 	dismissable: {
72 | 		composes: "alert-dismissable"
73 | 	},
74 | 	close: {
75 | 		composes: "close"
76 | 	},
77 | 	msgContainer: {
78 | 		display: "inline-block"
79 | 	},
80 | 	icon: {
81 | 		verticalAlign: "top",
82 | 		fontSize: bootstrap.fontSizeH4,
83 | 		paddingRight: bootstrap.paddingLargeHorizontal,
84 | 		opacity: 0.2
85 | 	},
86 | 	headline: {
87 | 		margin: 0,
88 | 		marginBottom: bootstrap.paddingBaseVertical
89 | 	},
90 | 	body: {
91 | 		maxWidth: "40em"
92 | 	}
93 | });
94 | 
95 | export default Alert;
96 | 


--------------------------------------------------------------------------------
/src/container.js:
--------------------------------------------------------------------------------
 1 | import React, { Children, cloneElement } from "react";
 2 | import { oneOf } from "prop-types";
 3 | import { TransitionGroup } from "react-transition-group";
 4 | import AlertTransition from "./alert-transition";
 5 | 
 6 | import { createUseStyles } from "react-jss";
 7 | import { bootstrap } from "toetag";
 8 | import transitionStyles from "./transition-styles";
 9 | 
10 | export const ENTER_TIMEOUT = 500;
11 | export const EXIT_TIMEOUT = 300;
12 | 
13 | const AlertContainer = ({ position = "top-right", children }) => {
14 | 	const classes = useStyles();
15 | 
16 | 	return (
17 | 		<div className={`${classes.container} ${classes[position]}`}>
18 | 			<TransitionGroup>
19 | 				{Children.map(children, child =>
20 | 					child ? (
21 | 						<AlertTransition key={child.props.id}>
22 | 							{cloneElement(child)}
23 | 						</AlertTransition>
24 | 					) : null
25 | 				)}
26 | 			</TransitionGroup>
27 | 		</div>
28 | 	);
29 | };
30 | 
31 | export const useStyles = createUseStyles({
32 | 	container: {
33 | 		position: "fixed",
34 | 		paddingTop: bootstrap.paddingBaseVertical,
35 | 		paddingRight: bootstrap.paddingBaseHorizontal,
36 | 		paddingBottom: bootstrap.paddingBaseVertical,
37 | 		paddingLeft: bootstrap.paddingBaseHorizontal,
38 | 		zIndex: bootstrap.zindexNavbarFixed + 1
39 | 	},
40 | 	"top-right": {
41 | 		top: 0,
42 | 		right: 0,
43 | 		textAlign: "right"
44 | 	},
45 | 	"top-left": {
46 | 		top: 0,
47 | 		left: 0
48 | 	},
49 | 	"bottom-right": {
50 | 		bottom: 0,
51 | 		right: 0,
52 | 		textAlign: "right"
53 | 	},
54 | 	"bottom-left": {
55 | 		bottom: 0,
56 | 		left: 0
57 | 	},
58 | 	...transitionStyles
59 | });
60 | 
61 | export const PropTypes = {
62 | 	position: oneOf(["top-right", "top-left", "bottom-right", "bottom-left"])
63 | };
64 | 
65 | AlertContainer.propTypes = PropTypes;
66 | 
67 | export default AlertContainer;
68 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export AlertList from "./alert-list";
2 | export AlertTransition from "./alert-transition";
3 | export Alert from "./alert-timer";
4 | export AlertContainer from "./container";
5 | 


--------------------------------------------------------------------------------
/src/transition-styles.js:
--------------------------------------------------------------------------------
 1 | export const MAGICAL_MAX_HEIGHT = "20em";
 2 | 
 3 | export default {
 4 | 	enter: {
 5 | 		opacity: 0.01,
 6 | 		transform: "translateX(-25%)",
 7 | 		maxHeight: 0,
 8 | 		overflow: "hidden",
 9 | 		transition: ".25s ease-in"
10 | 	},
11 | 	enterActive: {
12 | 		opacity: 1,
13 | 		transform: "translateX(0)",
14 | 		maxHeight: MAGICAL_MAX_HEIGHT
15 | 	},
16 | 	exit: {
17 | 		opacity: 1,
18 | 		transform: "translateX(0)",
19 | 		maxHeight: MAGICAL_MAX_HEIGHT,
20 | 		overflow: "hidden",
21 | 		transition: ".25s ease-out"
22 | 	},
23 | 	exitActive: {
24 | 		opacity: 0.01,
25 | 		transform: "translateX(25%)",
26 | 		maxHeight: 0
27 | 	}
28 | };
29 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-commonjs */
 2 | 
 3 | const path = require("path");
 4 | 
 5 | module.exports = {
 6 | 	entry: "./docs/index.js",
 7 | 	output: {
 8 | 		path: path.resolve("./docs"),
 9 | 		filename: "build.js"
10 | 	},
11 | 	devtool: "source-map",
12 | 	resolve: {
13 | 		extensions: [".js", ".json"]
14 | 	},
15 | 	module: {
16 | 		rules: [
17 | 			{
18 | 				test: /\.js$/,
19 | 				loader: "babel-loader",
20 | 				include: [path.resolve("./src"), path.resolve("./docs")]
21 | 			},
22 | 			{
23 | 				test: /\.css$/,
24 | 				use: ["style-loader", "css-loader"]
25 | 			},
26 | 			{
27 | 				test: /\.(md|example)$/,
28 | 				use: ["raw-loader"]
29 | 			}
30 | 		]
31 | 	}
32 | };
33 | 


--------------------------------------------------------------------------------