10 |
{props.text || 'label'}
11 |
52 |
61 | )
62 | }
63 |
64 | export default RadioInput;
--------------------------------------------------------------------------------
/src/toast.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render, unmountComponentAtNode } from 'react-dom'
3 |
4 | /**
5 | * Author: Ashwani Arya
6 | */
7 |
8 | // Hey, I am toast component
9 |
10 | const config = {
11 | success: {
12 | primaryColor: '#2CC51F',
13 | secondaryColor: 'green',
14 | label: 'Success notification!'
15 | },
16 | info: {
17 | primaryColor: 'grey',
18 | secondaryColor: 'grey',
19 | label: 'Info notification!'
20 | },
21 | error: {
22 | primaryColor: '#F55C2C',
23 | secondaryColor: 'red',
24 | label: 'Error notification!'
25 | },
26 | warn: {
27 | primaryColor: 'orange',
28 | secondaryColor: 'orange',
29 | label: 'Warning notification!'
30 | }
31 | }
32 | class ToastBottom extends React.Component {
33 | componentDidMount() {
34 |
35 | this.timeout = setTimeout(()=>{
36 | let tId = this.props.targetId;
37 | this.remove(tId); }, this.props.duration*1000);
38 | }
39 | componentWillUnmount(){
40 | if(this.timeout){
41 | clearTimeout(this.timeout)
42 | }
43 | }
44 | remove = (id) => {
45 | unmountComponentAtNode(document.getElementById(id))
46 | if(this.props.onRemove){
47 | this.props.onRemove();
48 | }
49 | }
50 | render(){
51 | let props = this.props;
52 | return (
53 |
54 | {/*
*/}
55 |
56 | {/* Message to be added here */}
57 | {props.title &&
{props.title}
}
58 |
{ props.message }
59 | {/* // TODO */}
60 | {/* Actions buttons */}
61 | {/*
62 |
63 |
*/}
64 |
65 | {/* Static Styling */}
66 |
95 | {/* Dynamic Styling */}
96 |
130 |
131 | )
132 | }
133 | }
134 | class ToastTop extends React.Component {
135 | componentDidMount() {
136 | this.timeout = setTimeout(()=>{
137 | let tId = this.props.targetId;
138 | this.remove(tId); }, this.props.duration*1000);
139 | }
140 | componentWillUnmount(){
141 | if(this.timeout){
142 | clearTimeout(this.timeout)
143 | }
144 | }
145 | remove = (id) => {
146 | unmountComponentAtNode(document.getElementById(id))
147 | if(this.props.onRemove){
148 | this.props.onRemove();
149 | }
150 | }
151 | render(){
152 | let props = this.props;
153 | return (
154 |
155 | {/*
*/}
156 |
157 | {/* Message to be added here */}
158 | {props.title &&
{props.title}
}
159 |
{ props.message }
160 | {/* // TODO */}
161 | {/* Actions buttons */}
162 | {/*
163 |
164 |
*/}
165 |
166 | {/* Static Styling */}
167 |
194 | {/* Dynamic Styling */}
195 |
230 |
231 | )
232 | }
233 | }
234 | // toast object
235 | export const toast = {
236 | remove: (id) => {
237 | let comId = id || 'toast-container'
238 | let doc = document.getElementById(comId)
239 | if(doc)
240 | unmountComponentAtNode(doc)
241 | },
242 | notify: ( message , options = null) => {
243 | let duration = 5
244 | let type = 'info'
245 | let targetId = "toast-container"
246 | let title = null
247 | let position = 'bottom'
248 | let onRemove = null
249 | if( options ){
250 | if( options.duration)
251 | duration = options.duration
252 | if(options.type){
253 | type = options.type;
254 | }
255 | if(options.targetId) {
256 | targetId = options.targetId;
257 | }
258 | if(options.title) {
259 | title = options.title
260 | }
261 | if(options.position) {
262 | position = options.position
263 | }
264 | if(options.onRemove) {
265 | onRemove = options.onRemove
266 | }
267 | }
268 | let trasitionPercentage = 0.3*(100/duration)
269 | if(position === 'bottom') {
270 | render(
, document.getElementById(targetId));
279 | }
280 | else {
281 | render(
, document.getElementById(targetId));
290 | }
291 |
292 | }
293 | }
294 |
295 | // Toast container
296 | export const ToastContainer = ( props ) => {
297 | let id = props.id || 'toast-container'
298 | return (
299 |
300 |
334 |
335 | )
336 | }
337 |
338 |
339 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Webpack config
2 | const path = require('path')
3 | const webpack = require('webpack');
4 | module.exports = (env, argv) => {
5 | if(argv.mode === "development") {
6 | return module.exports = {
7 | entry: "./src/index.js",
8 | mode: "production",
9 | module: {
10 | rules: [
11 | {
12 | test: /\.(js|jsx)$/,
13 | exclude: /(node_modules|bower_components)/,
14 | loader: "babel-loader",
15 | }
16 | ]
17 | },
18 | resolve: { extensions: ["*", ".js", ".jsx"] },
19 | output: {
20 | path: path.resolve(__dirname, "dist/"),
21 | publicPath: "/dist/",
22 | filename: "bundle.js"
23 | },
24 | devServer: {
25 | contentBase: __dirname,
26 | port: 3000,
27 | publicPath: "http://192.168.0.102:3000/dist/",
28 | hotOnly: true
29 | },
30 | plugins: [new webpack.HotModuleReplacementPlugin()]
31 | };
32 | }
33 | if(argv.mode === 'production') {
34 | if(argv.type === 'package') {
35 | return {
36 | mode: 'production',
37 | entry: './src/toast.js',
38 | output: {
39 | path: path.resolve('lib'),
40 | filename: 'toast.js',
41 | libraryTarget: 'commonjs2'
42 | },
43 | module: {
44 | rules: [
45 | {
46 | test: /\.jsx?$/,
47 | exclude: /(node_modules)/,
48 | use: 'babel-loader'
49 | }
50 | ]
51 | }
52 | }
53 | }
54 | if(argv.type === "demo") {
55 | return module.exports = {
56 | entry: "./src/index.js",
57 | mode: "production",
58 | module: {
59 | rules: [
60 | {
61 | test: /\.(js|jsx)$/,
62 | exclude: /(node_modules|bower_components)/,
63 | loader: "babel-loader",
64 | }
65 | ]
66 | },
67 | resolve: { extensions: ["*", ".js", ".jsx"] },
68 | output: {
69 | path: path.resolve(__dirname, "dist/"),
70 | publicPath: "/dist/",
71 | filename: "bundle.js"
72 | }
73 | };
74 | }
75 | }
76 | }
--------------------------------------------------------------------------------