mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent 505c87e9f1
commit d7344da484
13 changed files with 1063 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 246
      package-lock.json
  2. 4
      package.json
  3. 46
      src/App.js
  4. 248
      src/components/Alert/index.js
  5. 255
      src/components/Alert/index.scss
  6. 157
      src/components/Toast/index.js
  7. 11
      src/index.scss
  8. 15
      src/redux/actions/modalActions.js
  9. 2
      src/redux/actions/types.js
  10. 44
      src/redux/reducers/modalReducer.js
  11. 10
      src/redux/reducers/rootReducer.js
  12. 34
      src/redux/reducers/toastReducer.js
  13. 6
      src/redux/store.js

246
package-lock.json generated
Unescape View File

@ -11,15 +11,19 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16", "@fortawesome/react-fontawesome": "^0.1.16",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"react-tooltip": "^4.2.21", "react-tooltip": "^4.2.21",
"redux": "^4.1.2",
"sass": "^1.45.0", "sass": "^1.45.0",
"sweetalert2": "^11.3.4",
"web-vitals": "^2.1.2" "web-vitals": "^2.1.2"
}, },
"devDependencies": { "devDependencies": {
@ -2751,6 +2755,29 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@reduxjs/toolkit": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.7.1.tgz",
"integrity": "sha512-wXwXYjBVz/ItxB7SMzEAMmEE/FBiY1ze18N+VVVX7NtVbRUrdOGKhpQMHivIJfkbJvSdLUU923a/yAagJQzY0Q==",
"dependencies": {
"immer": "^9.0.7",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"reselect": "^4.1.5"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || 18.0.0-beta",
"react-redux": "^7.2.1 || ^8.0.0-beta"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@rollup/plugin-babel": { "node_modules/@rollup/plugin-babel": {
"version": "5.3.0", "version": "5.3.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@ -3401,6 +3428,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"node_modules/@types/html-minifier-terser": { "node_modules/@types/html-minifier-terser": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -3469,11 +3505,37 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.2.tgz", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.2.tgz",
"integrity": "sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA==" "integrity": "sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA=="
}, },
"node_modules/@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"node_modules/@types/q": { "node_modules/@types/q": {
"version": "1.5.5", "version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
}, },
"node_modules/@types/react": {
"version": "17.0.38",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-redux": {
"version": "7.1.21",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.21.tgz",
"integrity": "sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==",
"dependencies": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
"version": "1.17.1", "version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -3487,6 +3549,11 @@
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
"integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==" "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
}, },
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/stack-utils": { "node_modules/@types/stack-utils": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@ -5656,6 +5723,11 @@
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
}, },
"node_modules/csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
},
"node_modules/damerau-levenshtein": { "node_modules/damerau-levenshtein": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@ -7871,6 +7943,19 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hoist-non-react-statics/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/hoopy": { "node_modules/hoopy": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -13213,6 +13298,30 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
}, },
"node_modules/react-redux": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
"integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@types/react-redux": "^7.1.20",
"hoist-non-react-statics": "^3.3.2",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
},
"peerDependencies": {
"react": "^16.8.3 || ^17"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -13364,6 +13473,22 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/redux": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
"integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/redux-thunk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
"peerDependencies": {
"redux": "^4"
}
},
"node_modules/regenerate": { "node_modules/regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -13505,6 +13630,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
}, },
"node_modules/reselect": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
"integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.20.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@ -14527,6 +14657,14 @@
"boolbase": "~1.0.0" "boolbase": "~1.0.0"
} }
}, },
"node_modules/sweetalert2": {
"version": "11.3.4",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.4.tgz",
"integrity": "sha512-o7owEtVtpqnB8y3BDCRn2taYb7URcf6RIUm120LjFxt8IHfPIm0UeHuiS3nEp5r9RKm5GlSSJOh/yuapUQcYcQ==",
"funding": {
"url": "https://sweetalert2.github.io/#donations"
}
},
"node_modules/symbol-tree": { "node_modules/symbol-tree": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@ -17990,6 +18128,17 @@
} }
} }
}, },
"@reduxjs/toolkit": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.7.1.tgz",
"integrity": "sha512-wXwXYjBVz/ItxB7SMzEAMmEE/FBiY1ze18N+VVVX7NtVbRUrdOGKhpQMHivIJfkbJvSdLUU923a/yAagJQzY0Q==",
"requires": {
"immer": "^9.0.7",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"reselect": "^4.1.5"
}
},
"@rollup/plugin-babel": { "@rollup/plugin-babel": {
"version": "5.3.0", "version": "5.3.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
@ -18439,6 +18588,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/html-minifier-terser": { "@types/html-minifier-terser": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -18507,11 +18665,37 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.2.tgz", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.2.tgz",
"integrity": "sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA==" "integrity": "sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA=="
}, },
"@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"@types/q": { "@types/q": {
"version": "1.5.5", "version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==" "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
}, },
"@types/react": {
"version": "17.0.38",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
"integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-redux": {
"version": "7.1.21",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.21.tgz",
"integrity": "sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==",
"requires": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"@types/resolve": { "@types/resolve": {
"version": "1.17.1", "version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -18525,6 +18709,11 @@
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
"integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==" "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
}, },
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/stack-utils": { "@types/stack-utils": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@ -20139,6 +20328,11 @@
} }
} }
}, },
"csstype": {
"version": "3.0.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
},
"damerau-levenshtein": { "damerau-levenshtein": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
@ -21748,6 +21942,21 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
}, },
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
},
"dependencies": {
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
}
},
"hoopy": { "hoopy": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -25463,6 +25672,19 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
}, },
"react-redux": {
"version": "7.2.6",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
"integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
"requires": {
"@babel/runtime": "^7.15.4",
"@types/react-redux": "^7.1.20",
"hoist-non-react-statics": "^3.3.2",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
}
},
"react-refresh": { "react-refresh": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -25574,6 +25796,20 @@
"strip-indent": "^3.0.0" "strip-indent": "^3.0.0"
} }
}, },
"redux": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
"integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
"requires": {
"@babel/runtime": "^7.9.2"
}
},
"redux-thunk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
"requires": {}
},
"regenerate": { "regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@ -25684,6 +25920,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
}, },
"reselect": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
"integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
},
"resolve": { "resolve": {
"version": "1.20.0", "version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@ -26453,6 +26694,11 @@
} }
} }
}, },
"sweetalert2": {
"version": "11.3.4",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.4.tgz",
"integrity": "sha512-o7owEtVtpqnB8y3BDCRn2taYb7URcf6RIUm120LjFxt8IHfPIm0UeHuiS3nEp5r9RKm5GlSSJOh/yuapUQcYcQ=="
},
"symbol-tree": { "symbol-tree": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

4
package.json
Unescape View File

@ -6,15 +6,19 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16", "@fortawesome/react-fontawesome": "^0.1.16",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.16.1", "@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2", "@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"react-tooltip": "^4.2.21", "react-tooltip": "^4.2.21",
"redux": "^4.1.2",
"sass": "^1.45.0", "sass": "^1.45.0",
"sweetalert2": "^11.3.4",
"web-vitals": "^2.1.2" "web-vitals": "^2.1.2"
}, },
"scripts": { "scripts": {

46
src/App.js
Unescape View File

@ -1,4 +1,8 @@
import "./App.scss"; import "./App.scss";
import { Provider } from "react-redux";
import store from "./redux/store";
import ButtonDesign from "./components/buttonDesign/ButtonDesign"; import ButtonDesign from "./components/buttonDesign/ButtonDesign";
import ProductDesign from "./components/productDesign/ProductDesign"; import ProductDesign from "./components/productDesign/ProductDesign";
import ProductTags from "./components/productTags/ProductTags"; import ProductTags from "./components/productTags/ProductTags";
@ -18,30 +22,36 @@ import Testttt from "./components/testtttt/Testttt";
import Design2D from "./components/Design2D/Design2D"; import Design2D from "./components/Design2D/Design2D";
import Features from "./components/Features/index"; import Features from "./components/Features/index";
import Feedback from "./components/Feedback/index"; import Feedback from "./components/Feedback/index";
import Alert from "./components/Alert";
import Toast from "./components/Toast";
function App() { function App() {
return ( return (
<Provider store={store}>
<div className="App"> <div className="App">
<ProductDesign /> {/* <ProductDesign /> */}
<VodProductDesign /> {/* <VodProductDesign /> */}
<BookDesign /> {/* <BookDesign /> */}
<ButtonDesign /> {/* <ButtonDesign /> */}
<ProductTags /> {/* <ProductTags /> */}
<CounterDesign /> {/* <CounterDesign /> */}
<BlogDesign1 /> {/* <BlogDesign1 /> */}
<BlogDesign2 /> {/* <BlogDesign2 /> */}
<BlogDesign3 /> {/* <BlogDesign3 /> */}
<BlogDesign4 /> {/* <BlogDesign4 /> */}
<BlogDesign5 /> {/* <BlogDesign5 /> */}
<BlogDesign6 /> {/* <BlogDesign6 /> */}
<HeaderDesign1 /> {/* <HeaderDesign1 /> */}
<ContactInfoSection /> {/* <ContactInfoSection /> */}
<FooterDesign1 /> {/* <FooterDesign1 /> */}
{/* <Testttt /> */} {/* <Testttt /> */}
<Design2D /> {/* <Design2D /> */}
<Features /> {/* <Features /> */}
<Feedback /> {/* <Feedback /> */}
<Alert />
<Toast />
</div> </div>
</Provider>
); );
} }

248
src/components/Alert/index.js
Unescape View File

@ -0,0 +1,248 @@
import React from "react";
import "./index.scss";
import { infoAlert } from "../../redux/actions/modalActions";
import { connect } from "react-redux";
function Alert(props) {
return (
<div className="">
{/* 1 */}
<button
className="bg-red-600 p-4 rounded text-white "
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "متوجه شدم",
showCloseButton: true,
showCancelButton: false,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
},
})
}
>
alert1
</button>
{/* 2 */}
<button
className="bg-red-600"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-1",
confirmButton: "confirm-button-1",
cancelButton: "cancle-button1",
},
})
}
>
alert2
</button>
{/* 3 */}
<button
className="bg-red-600"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-2",
closeButton: "close-button-2",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
},
})
}
>
alert3
</button>
{/* 4 */}
<button
className="bg-red-600"
onClick={() =>
props.customAlert({
icon: "success",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-4",
confirmButton: "confirm-button-2",
cancelButton: "cancle-button2",
popup: "alert-popup4",
},
})
}
>
alert4
</button>
{/* 5 */}
<button
className="bg-red-600"
onClick={() =>
props.customAlert({
input: "email",
inputPlaceholder: "ایمیل خود را اینجا بنویسید",
imageUrl: "https://unsplash.it/400/200",
imageAlt: "Custom image",
imageWidth: 400,
imageHeight: 200,
html: "<p> این یک پیام تستی است <span style='color:#3ee924;'> که میتوان استایل دلخواه با استفاده از کدهای اچ تی ام ال داد و من اول یه تگ پی گذاشتم و بعد داخل تگ یه اسپن گذاشتم و به این استایل اینلاین دادم</span></p>",
confirmButtonText: "عضو شوید",
showCancelButton: false,
showCloseButton: true,
cancelButtonText: "متوجه شدم",
customClass: {
confirmButton: "confirm-button-5",
input: "input-error-5",
closeButton: "close-button-2",
},
})
}
>
alert5
</button>
{/* 6 */}
<button
className="bg-red-600"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: false,
showCloseButton: true,
customClass: {
title: "title-error-1",
closeButton: "close-button-6",
confirmButton: "confirm-button-1",
},
})
}
>
alert6
</button>
{/* 7 */}
<button
className="bg-red-500"
onClick={() =>
props.customAlert({
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
cancelButtonText: "متوجه شدم",
showCloseButton: true,
customClass: {
title: "title-error-7",
closeButton: "close-button-7",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
},
})
}
>
alert7
</button>
{/* 8 */}
<button
className="bg-red-500"
onClick={() =>
props.customAlert({
icon: "error",
title: "اررور شماره 1",
text: "متن تستی توضیح بیشتر که برای کاربر نمایش خواهد داده شد و اینکه متن تستی است.",
confirmButtonText: "توضیح بیشتر",
showCancelButton: true,
showCloseButton: false,
cancelButtonText: "متوجه شدم",
customClass: {
title: "title-error-8",
confirmButton: "confirm-button-7",
cancelButton: "cancle-button7",
popup: "alert-popup8",
},
})
}
>
alert8
</button>
{/* 9 */}
<button
className="bg-red-500"
onClick={() =>
props.customAlert({
title: "این ارور بسیار مهم ",
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
confirmButtonText: "رد کردن",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
footer: '<a href="">یک لینک در این قسمت است</a>',
customClass: {
title: "title-error-9",
closeButton: "close-button-9",
confirmButton: "confirm-button-9",
cancelButton: "cancle-button9",
popup: "alert-popup9",
footer: "footer-error-9",
},
})
}
>
alert9
</button>
{/* 10 */}
<button
className="bg-red-500"
onClick={() =>
props.customAlert({
title: "این ارور بسیار مهم ",
html: "<p style='color:#fff;'>در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد شد. طراح سعی می کند تا این متن را بیشتر از حدانتظار بلند کند تا دیگران متوجه مفهوم شوند</p>",
confirmButtonText: "رد کردن",
showCloseButton: true,
showCancelButton: true,
cancelButtonText: "متوجه شدم",
footer: '<a href="">یک لینک در این قسمت است</a>',
customClass: {
title: "title-error-9",
closeButton: "close-button-10",
confirmButton: "confirm-button-10",
cancelButton: "cancle-button10",
popup: "alert-popup10",
footer: "footer-error-9",
},
})
}
>
alert10
</button>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
// export default Alert;
export default connect(mapStateToProps, { customAlert: infoAlert })(Alert);

255
src/components/Alert/index.scss
Unescape View File

@ -0,0 +1,255 @@
/* TODO common styles */
.swal2-container.swal2-center > .swal2-popup {
border: solid 2px #707070 !important;
padding: 10px !important;
}
/* ? کلاس تمامی تایتل ها */
.swal2-title {
text-align: right !important;
font-size: 26px !important;
}
/* ? کلاس متن داخل الرت باکس */
.swal2-html-container {
text-align: justify !important;
line-height: 1.8 !important;
color: $contentcolor !important;
font-weight: 600 !important;
}
/* ? کلاس ایکن کنسل یا ضربدر بالا سمت چپ الرت باکس */
.swal2-rtl .swal2-close {
border-radius: 10px !important;
margin-left: 10px !important;
margin-top: 13px !important;
transition: all 0.4s !important;
}
/* ? کلاس کانفرم باتن */
.swal2-styled.swal2-confirm {
transition: all 0.4s !important;
outline: none !important;
}
/* ? کلاس هاور کانفرم باتن */
.swal2-styled.swal2-confirm:hover {
transform: translateY(-5px) !important;
}
/* ? کلاس کنسل باتن */
.swal2-styled.swal2-cancel {
transition: all 0.4s !important;
}
/* ? کلاس هاور کنسل باتن */
.swal2-styled.swal2-cancel:hover {
transform: translateY(-5px) !important;
}
/* ? ایکن اررور */
.swal2-icon.swal2-error {
border-color: var(--error-color7-button) !important;
color: var(--error-color7-button) !important;
}
/* !error 1 */
/* به اررور های ابی رنگ کلاس هایی دادم که اخرش با 1 تمام میشود */
/* TODO باکس اول از سمت راست در فایل پی اس دی */
/* ? تایتل */
.title-error-1 {
color: var(--error-color1) !important;
}
.eroorr:focus {
outline: none !important;
box-shadow: 0px 0px 0px black !important;
border: 0px !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
border: solid 4px var(--error-color1) !important;
}
/* ? کانفرم باتن */
.confirm-button-1 {
background-color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
color: var(--error-color1) !important;
text-align: left !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-1:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
}
/* !error 2 */
/* ? کنسل باتن */
.cancle-button1 {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 2px var(--error-color1) !important;
}
/* ? هاور کنسل باتن */
.cancle-button1:hover {
background-color: var(--white) !important;
color: var(--error-color1) !important;
}
/* !error3 */
/* ? تایتل */
.title-error-2 {
color: var(--error-color2) !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-2:hover {
background-color: var(--white) !important;
color: var(--error-color2) !important;
border: solid 4px var(--error-color2) !important;
}
/* ? کانفرم باتن */
.confirm-button-2 {
background-color: var(--white) !important;
border: solid 2px var(--error-color2) !important;
color: var(--error-color2) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-2:hover {
background-color: var(--error-color2) !important;
color: var(--white) !important;
}
/* ? کنسل باتن */
.cancle-button2 {
background-color: var(--error-color2) !important;
color: var(--white) !important;
border: solid 2px var(--error-color2) !important;
}
/* ? هاور کنسل باتن */
.cancle-button2:hover {
background-color: var(--white) !important;
color: var(--error-color2) !important;
}
/* !error4 */
/* ? تایتل */
.title-error-4 {
text-align: center !important;
color: var(--error-color2) !important;
}
.alert-popup4 {
width: 440px !important;
}
/* !error5 */
/* ? کانفرم باتن */
.confirm-button-5 {
background-color: var(--error-color2) !important;
margin-top: -81px !important;
margin-left: -260px !important;
padding: 12px 15px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
/* ? اینپوت فیلد */
.input-error-5 {
width: 70% !important;
height: 47px !important ;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
/* !error6 */
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-6 {
color: var(--error-color1) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-6:hover {
background-color: var(--error-color1) !important;
color: var(--white) !important;
border: solid 4px var(--error-color1) !important;
}
/* !error7 */
/* ? تایتل */
.title-error-7 {
color: var(--error-color7) !important;
}
/* ? دکمه ضربدر بالا سمت چپ */
.close-button-7 {
background-color: var(--error-color7-button) !important;
color: var(--white) !important;
}
/* ? هاور دکمه ضربدر بالا سمت چپ */
.close-button-7:hover {
background-color: var(--white) !important;
color: var(--error-color7) !important;
border: solid 4px var(--error-color7-button) !important;
}
/* ? کانفرم باتن */
.confirm-button-7 {
background-color: var(--white) !important;
border: solid 2px var(--error-color7-button) !important;
color: var(--error-color7) !important;
}
/* ? هاور کانفرم باتن */
.confirm-button-7:hover {
background-color: var(--error-color7-button) !important;
color: var(--white) !important;
}
/* ? کنسل باتن */
.cancle-button7 {
background-color: var(--error-color7-button) !important;
color: var(--white) !important;
border: solid 2px var(--error-color7-button) !important;
}
/* ? هاور کنسل باتن */
.cancle-button7:hover {
background-color: var(--white) !important;
color: var(--error-color7-button) !important;
}
/* !error8 */
.title-error-8 {
color: var(--error-color7-button) !important;
text-align: center !important;
}
.alert-popup8 {
width: 440px !important;
}
/* !error9 */
.title-error-9 {
color: var(--white) !important;
}
.alert-popup9 {
background-color: var(--error-color2) !important;
border-color: var(--error-color2) !important;
}
.close-button-9 {
background-color: var(--toast-bg-success) !important;
color: var(--toast-success-color) !important;
}
.confirm-button-9 {
background-color: #35bb20 !important;
}
.cancle-button9 {
background-color: var(--white) !important;
color: var(--error-color2) !important;
}
.footer-error-9 a {
color: var(--white) !important;
border-bottom-color: var(--white) !important;
font-size: 18px !important;
}
/* !error10 */
.alert-popup10 {
background-color: var(--error-color7-button) !important;
border-color: var(--error-color7-button) !important;
}
.close-button-10 {
background-color: #fd6a6a !important;
color: var(--white) !important;
}
.confirm-button-10 {
background-color: #bb2020 !important;
}
.cancle-button10 {
background-color: var(--white) !important;
color: var(--error-color7-button) !important;
}

157
src/components/Toast/index.js
Unescape View File

@ -0,0 +1,157 @@
import React from "react";
// import "./SweetAlert.css";
import { toastAlert } from "../../redux/actions/modalActions";
import { connect } from "react-redux";
function Toast(props) {
return (
<div className="mt-5">
{/* toast1 */}
<button
className="bg-blue-600"
onClick={() =>
props.customAlert({
icon: "error",
title: "ارور شماره 1",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "error-toast-title",
closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox",
iconColor: "icon-color",
},
})
}
>
toast1
</button>
{/* toast2 */}
<button
className="bg-blue-600"
onClick={() =>
props.customAlert({
icon: "success",
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "success-toast-title",
closeButton: "success-toast-closeButton",
popup: "success-toast-modalBox",
},
})
}
>
toast2
</button>
{/* toast3 */}
<button
className="bg-blue-600"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 1",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "error-toast-title",
closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox",
iconColor: "icon-color",
},
})
}
>
toast3
</button>
{/* toast4 */}
<button
className="bg-blue-600"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: false,
timerProgressBar: false,
customClass: {
title: "success-toast-title",
closeButton: "success-toast-closeButton",
popup: "success-toast-modalBox",
},
})
}
>
toast4
</button>
{/* toast5 */}
<button
className="bg-blue-600"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
customClass: {
title: "error-toast-title",
closeButton: "error-toast-closeButton",
popup: "error-toast-modalBox-timer",
},
})
}
>
toast5
</button>
{/* toast6 */}
<button
className="bg-blue-600"
onClick={() =>
props.customAlert({
icon: false,
title: "ارور شماره 2",
showCloseButton: true,
toast: true,
position: "top-end",
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
customClass: {
title: "success-toast-title",
closeButton: "success-toast-closeButton",
popup: "success-toast-modalBox-timer",
},
})
}
>
toast6
</button>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
export default connect(mapStateToProps, { customAlert: toastAlert })(Toast);

11
src/index.scss
Unescape View File

@ -23,3 +23,14 @@ body {
padding-right: 4px; padding-right: 4px;
border-radius: 50%; border-radius: 50%;
} }
$errorcolor1: #06bace;
$errorcolor2: #3ee924;
$errorcolor7: #c70000;
$errorcolor7button: #e92424;
$white: #fff;
$black: #000;
$contentcolor: #646464;
$toastbgerror: #ffeaea;
$toastbgsuccess: #c3ffb9;
$toastsuccesscolor: #21ae0b;

15
src/redux/actions/modalActions.js
Unescape View File

@ -0,0 +1,15 @@
import { INFO_ALERT, TOAST_ALERT } from "./types";
export const infoAlert = (data) => (dispatch) => {
dispatch({
type: INFO_ALERT,
data: data,
});
};
export const toastAlert = (data) => (dispatch) => {
dispatch({
type: TOAST_ALERT,
data: data,
});
};

2
src/redux/actions/types.js
Unescape View File

@ -0,0 +1,2 @@
export const INFO_ALERT = "INFO_ALERT";
export const TOAST_ALERT = "TOAST_ALERT";

44
src/redux/reducers/modalReducer.js
Unescape View File

@ -0,0 +1,44 @@
import { INFO_ALERT } from "../actions/types";
import Swal from "sweetalert2";
const initialState = {};
const modalReducer = (state = initialState, action) => {
const { type, data } = action;
switch (type) {
case INFO_ALERT:
Swal.fire({
icon: data.icon,
title: data.title,
text: data.text,
input: data.input,
inputPlaceholder: data.inputPlaceholder,
imageUrl: data.imageUrl,
imageAlt: data.imageAlt,
imageWidth: data.imageWidth,
imageHeight: data.imageHeight,
confirmButtonText: data.confirmButtonText,
showCloseButton: data.showCloseButton,
showCancelButton: data.showCancelButton,
cancelButtonText: data.cancelButtonText,
html: data.html,
footer: data.footer,
customClass: {
title: data.customClass.title,
closeButton: data.customClass.closeButton,
confirmButton: data.customClass.confirmButton,
cancelButton: data.customClass.cancelButton,
popup: data.customClass.popup,
input: data.customClass.input,
footer: data.customClass.footer,
},
});
return {
...state,
};
default:
return state;
}
};
export default modalReducer;

10
src/redux/reducers/rootReducer.js
Unescape View File

@ -0,0 +1,10 @@
import modalReducer from "./modalReducer";
import toastReducer from "./toastReducer";
import { combineReducers } from "redux";
const rootReducer = combineReducers({
modalReducer: modalReducer,
toastReducer: toastReducer,
});
export default rootReducer;

34
src/redux/reducers/toastReducer.js
Unescape View File

@ -0,0 +1,34 @@
import { INFO_ALERT, TOAST_ALERT } from "../actions/types";
import Swal from "sweetalert2";
const initialState = {};
const toastReducer = (state = initialState, action) => {
const { type, data } = action;
switch (type) {
case TOAST_ALERT:
Swal.fire({
icon: data.icon,
title: data.title,
showCloseButton: data.showCloseButton,
toast: data.toast,
position: data.position,
showConfirmButton: data.showConfirmButton,
timer: data.timer,
timerProgressBar: data.timerProgressBar,
customClass: {
title: data.customClass.title,
closeButton: data.customClass.closeButton,
popup: data.customClass.popup,
footer: data.customClass.footer,
},
});
return {
...state,
};
default:
return state;
}
};
export default toastReducer;

6
src/redux/store.js
Unescape View File

@ -0,0 +1,6 @@
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
Write Preview
Loading…
Cancel
Save