SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Создание вопросов с типом, тектом и цветом

Browse Source
This commit is contained in:
krokodilka 2022-07-13 16:57:32 +03:00
parent 85be16f551
commit 10319d4f5b
7 changed files with 422 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
package-lock.json generated
View File

@ -3456,12 +3456,12 @@
}
},
"node_modules/@emotion/cache": {
"version": "11.7.1",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
"integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
"version": "11.9.3",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz",
"integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
"dependencies": {
"@emotion/memoize": "^0.7.4",
"@emotion/sheet": "^1.1.0",
"@emotion/sheet": "^1.1.1",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"stylis": "4.0.13"
@ -3473,9 +3473,9 @@
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
"integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz",
"integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==",
"dependencies": {
"@emotion/memoize": "^0.7.4"
}
@ -3524,9 +3524,9 @@
}
},
"node_modules/@emotion/sheet": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
"integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
"integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
},
"node_modules/@emotion/styled": {
"version": "11.8.1",
@ -5296,17 +5296,17 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"node_modules/@mui/base": {
"version": "5.0.0-alpha.83",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
"integrity": "sha512-/bFcjiI36R2Epf2Y3BkZOIdxrz5uMLqOU4cRai4igJ8DHTRMZDeKbOff0SdvwJNwg8r6oPUyoeOpsWkaOOX9/g==",
"version": "5.0.0-alpha.88",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.88.tgz",
"integrity": "sha512-uL7ej2F/3GUnZewsDQSHUVHoSBT3AQcTIdfdy6QeCHy7X26mtbcIvTRcjl2PzbbNQplppavSTibPiQG/giJ+ng==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
"@emotion/is-prop-valid": "^1.1.2",
"@mui/types": "^7.1.3",
"@mui/utils": "^5.8.0",
"@emotion/is-prop-valid": "^1.1.3",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.6",
"@popperjs/core": "^2.11.5",
"clsx": "^1.1.1",
"clsx": "^1.2.0",
"prop-types": "^15.8.1",
"react-is": "^17.0.2"
},
@ -5329,20 +5329,19 @@
}
},
"node_modules/@mui/material": {
"version": "5.8.2",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
"integrity": "sha512-w/A1KG9Czf42uTyJOiRU5U1VullOz1R3xcsBvv3BtKCCWdVP+D6v/Yb8v0tJpIixMEbjeWzWGjotQBU0nd+yNA==",
"version": "5.8.7",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.7.tgz",
"integrity": "sha512-Oo62UhrgEi+BMLr3nUEASJgScE2/hhq14CbBUmrVV3GQlEGtqMZsy26Vb0AqEmphFeN3TXlsbM9aeW5yq8ZFlw==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
"@mui/base": "5.0.0-alpha.83",
"@mui/system": "^5.8.2",
"@mui/types": "^7.1.3",
"@mui/utils": "^5.8.0",
"@types/react-transition-group": "^4.4.4",
"clsx": "^1.1.1",
"@mui/base": "5.0.0-alpha.88",
"@mui/system": "^5.8.7",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.6",
"@types/react-transition-group": "^4.4.5",
"clsx": "^1.2.0",
"csstype": "^3.1.0",
"hoist-non-react-statics": "^3.3.2",
"prop-types": "^15.8.1",
"react-is": "^17.0.2",
"react-transition-group": "^4.4.2"
@ -5374,13 +5373,13 @@
}
},
"node_modules/@mui/private-theming": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.8.0.tgz",
"integrity": "sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==",
"version": "5.8.6",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.8.6.tgz",
"integrity": "sha512-yHsJk1qU9r/q0DlnxGRJPHyM0Y/nUv8FTNgDTiI9I58GWuVuZqeTUr7JRvPh6ybeP/FLtW5eXEavRK9wxVk4uQ==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
"@mui/utils": "^5.8.0",
"@mui/utils": "^5.8.6",
"prop-types": "^15.8.1"
},
"engines": {
@ -5401,13 +5400,14 @@
}
},
"node_modules/@mui/styled-engine": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.0.tgz",
"integrity": "sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==",
"version": "5.8.7",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.7.tgz",
"integrity": "sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
"@emotion/cache": "^11.7.1",
"@emotion/cache": "^11.9.3",
"csstype": "^3.1.0",
"prop-types": "^15.8.1"
},
"engines": {
@ -5432,17 +5432,17 @@
}
},
"node_modules/@mui/system": {
"version": "5.8.2",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.2.tgz",
"integrity": "sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg==",
"version": "5.8.7",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.7.tgz",
"integrity": "sha512-yFoFbfO42FWeSUDrFPixYjpqySQMqVMOSbSlAxiKnwFpvXGGn/bkfQTboCRNO31fvES29FJLQd4mwwMHd5mXng==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
"@mui/private-theming": "^5.8.0",
"@mui/styled-engine": "^5.8.0",
"@mui/types": "^7.1.3",
"@mui/utils": "^5.8.0",
"clsx": "^1.1.1",
"@mui/private-theming": "^5.8.6",
"@mui/styled-engine": "^5.8.7",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.6",
"clsx": "^1.2.0",
"csstype": "^3.1.0",
"prop-types": "^15.8.1"
},
@ -5472,9 +5472,9 @@
}
},
"node_modules/@mui/types": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz",
"integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==",
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz",
"integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==",
"peer": true,
"peerDependencies": {
"@types/react": "*"
@ -5486,9 +5486,9 @@
}
},
"node_modules/@mui/utils": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.8.0.tgz",
"integrity": "sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==",
"version": "5.8.6",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.8.6.tgz",
"integrity": "sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.17.2",
@ -6463,9 +6463,9 @@
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
"integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
"peer": true,
"dependencies": {
"@types/react": "*"
@ -8232,9 +8232,9 @@
}
},
"node_modules/clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
"engines": {
"node": ">=6"
}
@ -25989,12 +25989,12 @@
}
},
"@emotion/cache": {
"version": "11.7.1",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
"integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
"version": "11.9.3",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.9.3.tgz",
"integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
"requires": {
"@emotion/memoize": "^0.7.4",
"@emotion/sheet": "^1.1.0",
"@emotion/sheet": "^1.1.1",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"stylis": "4.0.13"
@ -26006,9 +26006,9 @@
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
"@emotion/is-prop-valid": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
"integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz",
"integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==",
"requires": {
"@emotion/memoize": "^0.7.4"
}
@ -26045,9 +26045,9 @@
}
},
"@emotion/sheet": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
"integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.1.tgz",
"integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
},
"@emotion/styled": {
"version": "11.8.1",
@ -27390,90 +27390,90 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"@mui/base": {
"version": "5.0.0-alpha.83",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
"integrity": "sha512-/bFcjiI36R2Epf2Y3BkZOIdxrz5uMLqOU4cRai4igJ8DHTRMZDeKbOff0SdvwJNwg8r6oPUyoeOpsWkaOOX9/g==",
"version": "5.0.0-alpha.88",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.88.tgz",
"integrity": "sha512-uL7ej2F/3GUnZewsDQSHUVHoSBT3AQcTIdfdy6QeCHy7X26mtbcIvTRcjl2PzbbNQplppavSTibPiQG/giJ+ng==",
"peer": true,
"requires": {
"@babel/runtime": "^7.17.2",
"@emotion/is-prop-valid": "^1.1.2",
"@mui/types": "^7.1.3",
"@mui/utils": "^5.8.0",
"@emotion/is-prop-valid": "^1.1.3",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.6",
"@popperjs/core": "^2.11.5",
"clsx": "^1.1.1",
"clsx": "^1.2.0",
"prop-types": "^15.8.1",
"react-is": "^17.0.2"
}
},
"@mui/material": {
"version": "5.8.2",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
"integrity": "sha512-w/A1KG9Czf42uTyJOiRU5U1VullOz1R3xcsBvv3BtKCCWdVP+D6v/Yb8v0tJpIixMEbjeWzWGjotQBU0nd+yNA==",
"version": "5.8.7",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.7.tgz",
"integrity": "sha512-Oo62UhrgEi+BMLr3nUEASJgScE2/hhq14CbBUmrVV3GQlEGtqMZsy26Vb0AqEmphFeN3TXlsbM9aeW5yq8ZFlw==",
"peer": true,
"requires": {
"@babel/runtime": "^7.17.2",
"@mui/base": "5.0.0-alpha.83",
"@mui/system": "^5.8.2",
"@mui/types": "^7.1.3",
"@mui/utils": "^5.8.0",
"@types/react-transition-group": "^4.4.4",
"clsx": "^1.1.1",
"@mui/base": "5.0.0-alpha.88",
"@mui/system": "^5.8.7",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.6",
"@types/react-transition-group": "^4.4.5",
"clsx": "^1.2.0",
"csstype": "^3.1.0",
"hoist-non-react-statics": "^3.3.2",
"prop-types": "^15.8.1",
"react-is": "^17.0.2",
"react-transition-group": "^4.4.2"
}
},
"@mui/private-theming": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.8.0.tgz",
"integrity": "sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==",
"version": "5.8.6",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.8.6.tgz",
"integrity": "sha512-yHsJk1qU9r/q0DlnxGRJPHyM0Y/nUv8FTNgDTiI9I58GWuVuZqeTUr7JRvPh6ybeP/FLtW5eXEavRK9wxVk4uQ==",
"peer": true,
"requires": {
"@babel/runtime": "^7.17.2",
"@mui/utils": "^5.8.0",
"@mui/utils": "^5.8.6",
"prop-types": "^15.8.1"
}
},
"@mui/styled-engine": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.0.tgz",
"integrity": "sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==",
"version": "5.8.7",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.7.tgz",
"integrity": "sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg==",
"peer": true,
"requires": {
"@babel/runtime": "^7.17.2",
"@emotion/cache": "^11.7.1",
"@emotion/cache": "^11.9.3",
"csstype": "^3.1.0",
"prop-types": "^15.8.1"
}
},
"@mui/system": {
"version": "5.8.2",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.2.tgz",
"integrity": "sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg==",
"version": "5.8.7",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.7.tgz",
"integrity": "sha512-yFoFbfO42FWeSUDrFPixYjpqySQMqVMOSbSlAxiKnwFpvXGGn/bkfQTboCRNO31fvES29FJLQd4mwwMHd5mXng==",
"peer": true,
"requires": {
"@babel/runtime": "^7.17.2",
"@mui/private-theming": "^5.8.0",
"@mui/styled-engine": "^5.8.0",
"@mui/types": "^7.1.3",
"@mui/utils": "^5.8.0",
"clsx": "^1.1.1",
"@mui/private-theming": "^5.8.6",
"@mui/styled-engine": "^5.8.7",
"@mui/types": "^7.1.4",
"@mui/utils": "^5.8.6",
"clsx": "^1.2.0",
"csstype": "^3.1.0",
"prop-types": "^15.8.1"
}
},
"@mui/types": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz",
"integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==",
"version": "7.1.4",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz",
"integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==",
"peer": true,
"requires": {}
},
"@mui/utils": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.8.0.tgz",
"integrity": "sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==",
"version": "5.8.6",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.8.6.tgz",
"integrity": "sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==",
"peer": true,
"requires": {
"@babel/runtime": "^7.17.2",
@ -28199,9 +28199,9 @@
}
},
"@types/react-transition-group": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
"integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
"peer": true,
"requires": {
"@types/react": "*"
@ -29515,9 +29515,9 @@
}
},
"clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
},
"co": {
"version": "4.6.0",

197
src/create/createQuestion.tsx
View File

@ -1,17 +1,25 @@
import React from 'react';
import { useField, Form, FormikProps, Formik } from 'formik';
import {
Input, Select, Textarea, VStack, Checkbox, Box, Text, Divider, Button, useNumberInput,
Select, Textarea, VStack, Checkbox, Button,
} from '@chakra-ui/react'
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
import Description from "./description";
import Settings from "./settings";
//Значения, собираемые для отправки на бэк
interface Values {
title: string;
lastName: string;
type: string;
children: string;
description: string;
}
//Поля объектов, используемых для отображения созданных пользователем инструментов
interface ElementsOfObject {
text: string;
desc: string;
id: number;
isFocus: boolean;
color?: string;
}
const types = [
@ -37,29 +45,164 @@ const TextField = (props: any) => {
);
};
const getFreeNumber = (array:Array<ElementsOfObject>):number => {
// Для первого элемента в списке
if (array.length === 0) {
return(0)
} else {
//Для всех последующих элементов
//Создаём массив, состоящий из id всех существующих модалок
let indexes:any = []
for (let i = 0; i < array.length; i++) {
indexes.push(array[i].id)
}
//Сортируем в порядке возрастания
indexes.sort(function compare(a:any, b:any):any {
if (a < b) { return -1;}
if (a > b) { return 1;}
return 0;
}
)
let max = indexes[indexes.length - 1]
//Создаём массив - маску от 0 до самого высокого значения id
let mask:any = []
for (let i = 0; i <= max; i++) {
mask.push(i)
}
//Ищем разницу между существующими id окон и маской. Список пропущенных значений есть список доступных имён.
let difference = indexes
.filter((num:any):any => !mask.includes(num))
.concat(mask.filter((num:any):any => !indexes.includes(num)));
// difference - массив нехватающих в списке номеров.
// Если все окна у нас по порядку, без пропусков - нужно добавить новый номер
if (difference.length === 0) {
return(max + 1)
} else {
//Иначе добавить нехватающий
return(difference[0])
}
}
}
const getIndexById = (id:number, array:Array<ElementsOfObject>):number => {
let index
for (let i = 0; i <= array.length; i++) {
if (array[i] !== undefined) {
if (array[i].id === id) {
index = i
break
}
}
}
if (typeof index === "number") {
return index
} else {
console.log("Я не нашёл нужный индекс, вывел 0")
return 0
}
}
export default () => {
const [type, setType] = React.useState<number>(0)
const [stockroom, setStockroom] = React.useState<any>([])
const stockroomHC = (value:Array<object>) => {
setStockroom([...value])
}
const typeHC = (value:number) => {
console.log(value)
const [type, setType] = React.useState<number>(4)
const [stockroom, setStockroom] = React.useState<Array<ElementsOfObject>>([])
const [focus, setFocus] = React.useState<number | undefined>() //Хранит id объекта
//При пересоздании массива для изменения фокуса объекта отменяются фокусы у всех элементов массива
const typeHC = (value:number): void => {
setType(value)
setStockroom([])
}
const changeFocus = (id: number): void => {
console.log(id)
//Не менять фокус если снова выбрано то же окно
if (focus !== id) {
//Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
let newArr = stockroom.map((e:ElementsOfObject) => {
e.isFocus = false
return e
})
//Получаем индексы фокусированных объектов. Новый и, если есть, старый
let index = getIndexById(id, stockroom)
//Устанавливаем новый фокус и пересоздаём массив
setFocus(id)
newArr[index].isFocus = true
setStockroom([...newArr])
}
}
const changeBgColor = (color: string): void => {
if (focus !== undefined) {
let index = getIndexById(focus, stockroom)
let list = stockroom
list[index].color = color
setStockroom([...list])
}
}
const changeText = (text: string): void => {
if (focus !== undefined) {
let index = getIndexById(focus, stockroom)
let list = stockroom
console.log(list[index].text)
list[index].text = text
setStockroom([...list])
}
}
const createObject = (obj:ElementsOfObject) => {
//Получаем и присваиваем первый свободный айдишник (по возрастанию)
const free = getFreeNumber(stockroom)
obj.id = free
//Хранилище с отменённым фокусом у объектов (по задумке у одного элемента)
let newArr = stockroom.map((e:ElementsOfObject) => {
e.isFocus = false
return e
})
//Мы должны вставить новый объект следующим после того, на котором фокус. Это достигается позиционированием в массив
if (focus === undefined){ //фокуса нет - добавляем в конец массива
newArr.push(obj)
setStockroom([...newArr])
} else { //фокус есть - добавляем после объекта с фокусом
let index = getIndexById(focus, stockroom)
newArr.splice(index, 0, obj)
//Говорим стейту с фокусом, что фокус изменился
setFocus(free)
}
}
const deleteObject = (id: number): void => {
console.log(id)
let index = getIndexById(id, stockroom)
//Проверка, что объект с таким id существует
if (stockroom[index] !== undefined) {
let newArr = stockroom.map((e:ElementsOfObject) => {
e.isFocus = false
return e
})
newArr.splice(index, 1)
setStockroom([...newArr])
}
}
return(
<>
<Formik
initialValues={{
text: '',
children: '',
title: '',
lastName: '',
desc:'описание',
type: '',
description:'описание',
}}
onSubmit={(values, actions) => {
@ -71,16 +214,20 @@ export default () => {
<Form>
<VStack>
<TextField placeholder="Заголовок" name="title" type="text" />
<Description name="desc"/>
<Description name="description"/>
{
type === 0 ? //Тип вопроса - текст?
<TextField name="text" placeholder="текст" type="text" />
:
type === 3 ? //Тип вопроса - файл?
<input type="file"/>
:
stockroom.length === 0 ? //В поле для юзерских данных есть что-то?
null //Ничего не внесено
:
type === 1 ? //Тип вопроса - селект?
<Select>
<Select
>
{
stockroom.map((e: any, i: number) => {
return <option key={i}>{e.text}</option>
@ -92,13 +239,17 @@ export default () => {
stockroom.map((e:any, i:number) => {
return <Checkbox key={i}>{e.text}</Checkbox>
})
:
type === 3 ? //Тип вопроса - файл?
<input type="file"/>
:
type === 4 ? //Тип вопроса - кнопка?
stockroom.map((e:any, i:number) => {
return <Button key={i}>{e.text}</Button>
return <Button
backgroundColor={e.color}
key={i}
onClick={(event: any) => {
changeFocus(e.id)
event.target.blur()
}}
>{e.text}</Button>
})
:
null //Тип вопроса - ничего
@ -107,10 +258,16 @@ export default () => {
<Settings
types={types}
stockroomHC={stockroomHC}
stockroom={stockroom}
typeHC={typeHC}
type={type}
focus={focus}
changeFocus={changeFocus}
changeBgColor={changeBgColor}
changeText={changeText}
getIndexById={getIndexById}
createObject={createObject}
deleteObject={deleteObject}
/>
</Form>

42
src/create/settings.tsx
View File

@ -1,32 +1,16 @@
import React from 'react';
// import { useFormikContext, Formik, Form, Field } from 'formik';
import {Box, Button, Checkbox, Container, Select, Textarea} from "@chakra-ui/react";
import {ChromePicker} from 'react-color';
import Buttons from "./tools/buttons"
import List from "./tools/list"
export default (props: any) => {
// const [variant, setVariant] = React.useState(0)
// const [stockroom, setStockroom] = React.useState<Array<object>>([])
const stockroomHC = (value: object, index: number, isDelete: boolean) => {
if (isDelete) {
let newArr = props.stockroom
newArr.splice(index, 1)
props.stockroomHC([...newArr])
} else {
let newArr = props.stockroom
newArr.push(value)
props.stockroomHC([...newArr])
}
}
return (
<Container
bgColor="lightgray"
padding="10px"
minWidth="100%"
maxHeight="45vh"
borderRadius="5px"
position="fixed"
bottom={0}
@ -35,7 +19,6 @@ export default (props: any) => {
placeholder='тип вопроса'
value={props.type}
onChange={e => {
// setVariant(Number(e.target.value))
props.typeHC(Number(e.target.value))
}}
>
@ -46,18 +29,17 @@ export default (props: any) => {
}
</Select>
<Box>
{
props.type === 1 ? //Тип вопроса - селект?
<List stockroom={props.stockroom} stockroomHC={stockroomHC} />
:
props.type === 2 ? //Тип вопроса - чекбокс?
<List stockroom={props.stockroom} stockroomHC={stockroomHC} />
:
props.type === 4 ? //Тип вопроса - кнопка?
<Buttons stockroom={props.stockroom} stockroomHC={stockroomHC}/>
:
null //Тип вопроса - ничего
}
<Buttons
stockroom={props.stockroom}
focus={props.focus}
changeFocus={props.changeFocus}
changeBgColor={props.changeBgColor}
changeText={props.changeText}
createObject={props.createObject}
deleteObject={props.deleteObject}
getIndexById={props.getIndexById}
/>
<Button type="submit">Создать вопрос</Button>
</Box>
</Container>
)

94
src/create/tools/buttons.tsx
View File

@ -1,34 +1,94 @@
import React from 'react';
import { Button, VStack, HStack} from "@chakra-ui/react";
import { Button, VStack, HStack, Textarea} from "@chakra-ui/react";
import {ChromePicker} from "react-color";
import Viewer from "./viewer";
import { useSnackbar } from 'notistack';
interface ElementOfObject {
text: string;
isFocus: boolean;
color?: string;
}
interface Component {
stockroom: any;
focus: number;
changeFocus: (id: number) => void;
changeBgColor: (text:string) => void;
changeText: (text:string) => void;
createObject: (obj:ElementOfObject) => void;
deleteObject: (id:number) => void;
getIndexById: (id:number, array:ElementOfObject) => number;
}
export default ({stockroom, focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: Component) => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
let current
if (focus !== undefined) {
const index = getIndexById(focus, stockroom)
export default ({stockroom, stockroomHC}: {stockroom: any, stockroomHC:any}) => {
const [color, setColor] = React.useState("#fff")
if (index !== undefined) {
current = stockroom[index]
}
}
return(
<HStack>
<HStack
overflow="auto"
padding="5px"
>
<ChromePicker
disableAlpha
color={color}
onChange={e => {
setColor(e.hex)
}}
color={
current === undefined ?
""
:
focus === undefined ?
""
:
current.color
}
onChange={e => {changeBgColor(e.hex)}}
/>
<Button
onClick={() => stockroomHC({text:"aaaa"},0 ,false)}
>Добавить</Button>
<VStack
border="1px solid gray"
>
{
stockroom.map((e:object, i:number) => {
onClick={() => {
createObject({text: "", color: "", isFocus: true})
})
}}
>Добавить</Button>
<Textarea
onChange={(e) => changeText(e.target.value)}
placeholder="Текст кнопки"
maxWidth="300px"
value={
current === undefined ?
""
:
focus === undefined ?
""
:
current.text
}
/>
{
stockroom.length === 0 ?
null
:
<VStack style={{
boxShadow:"rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px",
padding:"5px",
width:"400px",
borderRadius:"4px",
maxHeight:"30vh",
overflow:"auto",
}}>
<Viewer
stockroom={stockroom}
changeFocus={changeFocus}
deleteObject={deleteObject}
/>
</VStack>
}
</VStack>
</HStack>
)
}

4
src/create/tools/list.tsx
View File

@ -3,13 +3,13 @@ import {Button, VStack, HStack, Textarea, Container, Text, CloseButton} from "@c
export default ({stockroom, stockroomHC}: {stockroom: any, stockroomHC:any}) => {
export default ({stockroom}: {stockroom: any,}) => {
const [color, setColor] = React.useState("#fff")
return(
<HStack>
<Button
onClick={() => stockroomHC({text:"aaaa"},0 ,false)}
>Добавить</Button>
<Textarea

39
src/create/tools/viewer.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import {HStack, Button, VStack, Text} from "@chakra-ui/react";
import { DeleteIcon } from '@chakra-ui/icons'
export default (props:any) => {
return(
<>
{
props.stockroom.map((e:any, i:number) => {
return(
<HStack
key={i}
style={{
cursor:"pointer",
width:"100%",
display: "flex",
justifyContent: "center",
border: e.isFocus ? "gray 1px solid" : "none"
}}
onClick={() => {
props.changeFocus(e.id)
}}
>
<Text>{e.text}</Text>
<Button
rightIcon={<DeleteIcon />}
onClick={(e:any) => {
props.deleteObject(e.id)
e.target.blur()
}}
/>
</HStack>
)
})
}
</>
)
}

4
src/text.tsx Normal file
View File

@ -0,0 +1,4 @@
import React from 'react';
export default () => {
return <button onClick={() => {alert("внимание")}}>кнопка</button>
}