25.03.2023 14:30

js/Project/project/package-lock.json

@@ -21,6 +21,7 @@
         "@testing-library/user-event": "^13.5.0",
         "array-move": "^4.0.0",
         "emoji-picker-react": "^4.4.8",
+        "material-ui-popup-state": "^5.0.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
@@ -6531,6 +6532,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -13223,6 +13229,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/material-ui-popup-state": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.0.8.tgz",
+      "integrity": "sha512-5ptEBQVd68QJpm0PCIYBatpX/F5QIFS+EH0lPpGqjl6HPD6uIHPt7laHbiqWDEm/6Wy5YvWF69ny+3jHXmHizQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "@mui/material": "^5.0.0",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -24405,6 +24425,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -29315,6 +29340,17 @@
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "devOptional": true
     },
+    "material-ui-popup-state": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.0.8.tgz",
+      "integrity": "sha512-5ptEBQVd68QJpm0PCIYBatpX/F5QIFS+EH0lPpGqjl6HPD6uIHPt7laHbiqWDEm/6Wy5YvWF69ny+3jHXmHizQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.6",
+        "@mui/material": "^5.0.0",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",

js/Project/project/package.json

@@ -16,6 +16,7 @@
     "@testing-library/user-event": "^13.5.0",
     "array-move": "^4.0.0",
     "emoji-picker-react": "^4.4.8",
+    "material-ui-popup-state": "^5.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

js/Project/project/src/components/post/comments.js

@@ -14,7 +14,10 @@ import {
     Typography,
     Box,
     Divider,
+    Popover,
+    Tooltip
 } from '@mui/material'
+
 import {
     FavoriteBorderRounded,
     SendRounded,
@@ -22,6 +25,8 @@ import {
     TurnedInNot,
 } from '@mui/icons-material/'
 
+import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
+
 import Grid from '@mui/material/Unstable_Grid2';
 
 import CCommentsFeed from "./comments_feed";
@@ -58,12 +63,29 @@ export function CardPost({ postData }) {
         document.getElementById('addCommentField').focus()
     }
 
-    // создание ссылки для расшаривания поста
-    function sharePost() {
-        console.log('share')
+
+
+    // отслеживание состояния текста для ToolTips
+    // const [toolTipText, setToolTipText] = useState('Нажмите для копирования')
+    const [toolTipText, setToolTipText] = useState(true)
+    let text = toolTipText ? 'Нажмите для копирования' : 'Ссылка скопирована в буфер обмена'
+
+    // функция копирования ссылки на пост
+    function copyShareLink(text) {
+        // получаем урл текущей страницы
+        const postUrl = window.location.href
+        navigator.clipboard.writeText(postUrl)
+
+        // setToolTipText('Ссылка скопирована в буфер обмена')
+        // setTimeout(() => setToolTipText('Нажмите для копирования'), 1500)
+        setToolTipText(!toolTipText)
+        setTimeout(() => setToolTipText(toolTipText), 1500)
     }
 
 
+
+
+
     return (
         <CommentContext.Provider value={[comment, setComment]}>
             <Card
@@ -204,14 +226,41 @@ export function CardPost({ postData }) {
                                 </Grid>
 
                                 <Grid>
-                                    <IconButton
-                                        aria-label="share"
-                                        onClick={sharePost}
-                                    >
-                                        <SendRounded
-                                            style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
-                                        />
-                                    </IconButton>
+                                    <PopupState variant="popover" popupId="demo-popup-popover">
+                                        {(popupState) => (
+                                            <div>
+                                                <IconButton
+                                                    aria-label="share"
+                                                    {...bindTrigger(popupState)}
+                                                >
+                                                    <SendRounded
+                                                        style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
+                                                    />
+                                                </IconButton>
+                                                <Popover
+                                                    {...bindPopover(popupState)}
+                                                    anchorOrigin={{
+                                                        vertical: 'center',
+                                                        horizontal: 'right',
+                                                    }}
+                                                    transformOrigin={{
+                                                        vertical: 'center',
+                                                        horizontal: 'left',
+                                                    }}
+                                                >
+                                                    {/* <Tooltip title={toolTipText} placement='bottom-start'> */}
+                                                    <Tooltip title={text} placement='bottom-start'>
+                                                        <Typography
+                                                            sx={{ p: 2 }}
+                                                            onClick={copyShareLink}
+                                                        >
+                                                            {window.location.href}
+                                                        </Typography>
+                                                    </Tooltip>
+                                                </Popover>
+                                            </div>
+                                        )}
+                                    </PopupState>
                                 </Grid>
                             </Grid>
 
@@ -242,6 +291,6 @@ export function CardPost({ postData }) {
                     <CommentField />
                 </CardActions>
             </Card>
-        </CommentContext.Provider>
+        </CommentContext.Provider >
     )
 }