@bigbluebutton/tldraw 2.0.0-alpha.25 → 2.0.0-alpha.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/lib/shapes/poll/components/poll-content.js +1 -1
- package/dist-cjs/lib/shapes/poll/components/poll-content.js.map +2 -2
- package/dist-cjs/lib/ui/components/MenuZone.js +1 -23
- package/dist-cjs/lib/ui/components/MenuZone.js.map +2 -2
- package/dist-cjs/lib/ui/components/Toolbar/Toolbar.js +3 -15
- package/dist-cjs/lib/ui/components/Toolbar/Toolbar.js.map +2 -2
- package/dist-esm/lib/shapes/poll/components/poll-content.mjs +1 -1
- package/dist-esm/lib/shapes/poll/components/poll-content.mjs.map +2 -2
- package/dist-esm/lib/ui/components/MenuZone.mjs +3 -25
- package/dist-esm/lib/ui/components/MenuZone.mjs.map +2 -2
- package/dist-esm/lib/ui/components/Toolbar/Toolbar.mjs +3 -15
- package/dist-esm/lib/ui/components/Toolbar/Toolbar.mjs.map +2 -2
- package/package.json +2 -2
- package/src/lib/shapes/poll/components/poll-content.tsx +1 -1
- package/src/lib/ui/components/MenuZone.tsx +8 -15
- package/src/lib/ui/components/Toolbar/Toolbar.tsx +3 -6
|
@@ -91,7 +91,7 @@ const ChatPollContent = ({
|
|
|
91
91
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.default.PollWrapper, { "data-test": "chatPollMessageText", children: [
|
|
92
92
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.default.PollText, { children: pollData.questionText }),
|
|
93
93
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "90%", height: useHeight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data: translatedAnswers, layout: "vertical", children: [
|
|
94
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { type: "number" }),
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { type: "number", allowDecimals: false }),
|
|
95
95
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { width: 80, type: "category", dataKey: "pollAnswer" }),
|
|
96
96
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "numVotes", fill: "#0C57A7" })
|
|
97
97
|
] }) })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFG;AArFH,sBAAiE;AAEjE,oBAAmB;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuFG;AArFH,sBAAiE;AAEjE,oBAAmB;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,4CAAC,yBAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa;AAAA,MACvD,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["Styled"]
|
|
7
7
|
}
|
|
@@ -23,29 +23,7 @@ __export(MenuZone_exports, {
|
|
|
23
23
|
module.exports = __toCommonJS(MenuZone_exports);
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
25
|
var import_editor = require("@bigbluebutton/editor");
|
|
26
|
-
var import_useBreakpoint = require("../hooks/useBreakpoint");
|
|
27
|
-
var import_useReadonly = require("../hooks/useReadonly");
|
|
28
|
-
var import_ActionsMenu = require("./ActionsMenu");
|
|
29
|
-
var import_DuplicateButton = require("./DuplicateButton");
|
|
30
|
-
var import_Menu = require("./Menu");
|
|
31
|
-
var import_PageMenu = require("./PageMenu/PageMenu");
|
|
32
|
-
var import_RedoButton = require("./RedoButton");
|
|
33
|
-
var import_TrashButton = require("./TrashButton");
|
|
34
|
-
var import_UndoButton = require("./UndoButton");
|
|
35
26
|
const MenuZone = (0, import_editor.track)(function MenuZone2() {
|
|
36
|
-
|
|
37
|
-
const breakpoint = (0, import_useBreakpoint.useBreakpoint)();
|
|
38
|
-
const isReadonly = (0, import_useReadonly.useReadonly)();
|
|
39
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-buttons__horizontal", children: [
|
|
40
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu, {}),
|
|
41
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PageMenu.PageMenu, {}),
|
|
42
|
-
breakpoint >= 6 && !isReadonly && !editor.isInAny("hand", "zoom") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
43
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_UndoButton.UndoButton, {}),
|
|
44
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RedoButton.RedoButton, {}),
|
|
45
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TrashButton.TrashButton, {}),
|
|
46
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DuplicateButton.DuplicateButton, {}),
|
|
47
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenu, {})
|
|
48
|
-
] })
|
|
49
|
-
] }) });
|
|
27
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-buttons__horizontal" }) });
|
|
50
28
|
});
|
|
51
29
|
//# sourceMappingURL=MenuZone.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/components/MenuZone.tsx"],
|
|
4
|
-
"sourcesContent": ["import { track
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { track } from '@bigbluebutton/editor'\n// import { useBreakpoint } from '../hooks/useBreakpoint'\n// import { useReadonly } from '../hooks/useReadonly'\n\nexport const MenuZone = track(function MenuZone() {\n\t// const editor = useEditor()\n\n\t// const breakpoint = useBreakpoint()\n\t// const isReadonly = useReadonly()\n\n\treturn (\n\t\t<div className=\"tlui-menu-zone\">\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t{/* <Menu />\n\t\t\t\t<PageMenu />\n\t\t\t\t{breakpoint >= 6 && !isReadonly && !editor.isInAny('hand', 'zoom') && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t</>\n\t\t\t\t)} */}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYG;AAZH,oBAAsB;AAIf,MAAM,eAAW,qBAAM,SAASA,YAAW;AAMjD,SACC,4CAAC,SAAI,WAAU,kBACd,sDAAC,SAAI,WAAU,4BAYf,GACD;AAEF,CAAC;",
|
|
6
6
|
"names": ["MenuZone"]
|
|
7
7
|
}
|
|
@@ -40,11 +40,7 @@ var import_useReadonly = require("../../hooks/useReadonly");
|
|
|
40
40
|
var import_useToolbarSchema = require("../../hooks/useToolbarSchema");
|
|
41
41
|
var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
|
|
42
42
|
var import_ActionsMenu = require("../ActionsMenu");
|
|
43
|
-
var import_DuplicateButton = require("../DuplicateButton");
|
|
44
43
|
var import_MobileStylePanel = require("../MobileStylePanel");
|
|
45
|
-
var import_RedoButton = require("../RedoButton");
|
|
46
|
-
var import_TrashButton = require("../TrashButton");
|
|
47
|
-
var import_UndoButton = require("../UndoButton");
|
|
48
44
|
var import_Button = require("../primitives/Button");
|
|
49
45
|
var M = __toESM(require("../primitives/DropdownMenu"));
|
|
50
46
|
var import_shared = require("../primitives/shared");
|
|
@@ -103,16 +99,7 @@ const Toolbar = (0, import_react.memo)(function Toolbar2() {
|
|
|
103
99
|
}, [toolbarItems, activeTLUiToolbarItem, breakpoint]);
|
|
104
100
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__inner", children: [
|
|
105
101
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__left", children: [
|
|
106
|
-
!isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.
|
|
107
|
-
breakpoint < 6 && !(activeToolId === "hand" || activeToolId === "zoom") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-toolbar__extras__controls tlui-buttons__horizontal", children: [
|
|
108
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_UndoButton.UndoButton, {}),
|
|
109
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RedoButton.RedoButton, {}),
|
|
110
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TrashButton.TrashButton, {}),
|
|
111
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DuplicateButton.DuplicateButton, {}),
|
|
112
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenu, {})
|
|
113
|
-
] }),
|
|
114
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToggleToolLockedButton.ToggleToolLockedButton, { activeToolId })
|
|
115
|
-
] }),
|
|
102
|
+
!isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-toolbar__extras", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ToggleToolLockedButton.ToggleToolLockedButton, { activeToolId }) }),
|
|
116
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
117
104
|
"div",
|
|
118
105
|
{
|
|
@@ -185,7 +172,8 @@ const Toolbar = (0, import_react.memo)(function Toolbar2() {
|
|
|
185
172
|
}
|
|
186
173
|
) }),
|
|
187
174
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.Content, { side: "top", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverflowToolsContent, { toolbarItems: itemsInDropdown }) })
|
|
188
|
-
] })
|
|
175
|
+
] }),
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenu, {})
|
|
189
177
|
] }) : null
|
|
190
178
|
] })
|
|
191
179
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/Toolbar/Toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { DuplicateButton } from '../DuplicateButton'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { RedoButton } from '../RedoButton'\nimport { TrashButton } from '../TrashButton'\nimport { UndoButton } from '../UndoButton'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst geoState = useValue(\n\t\t'geo',\n\t\t() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),\n\t\t[editor]\n\t)\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t<div className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t<div className=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < 5,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tkey={laserTool.toolItem.id}\n\t\t\t\t\t\t\t\titem={laserTool.toolItem}\n\t\t\t\t\t\t\t\ttitle={getTitle(laserTool.toolItem)}\n\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={dropdownFirstItem.toolItem.id}\n\t\t\t\t\t\t\t\t\t\t\titem={dropdownFirstItem.toolItem}\n\t\t\t\t\t\t\t\t\t\t\ttitle={getTitle(dropdownFirstItem.toolItem)}\n\t\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(\n\t\t\t\t\t\t\t\t\t\t\t\tdropdownFirstItem.toolItem,\n\t\t\t\t\t\t\t\t\t\t\t\tactiveToolId,\n\t\t\t\t\t\t\t\t\t\t\t\tgeoState\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t<M.Root id=\"toolbar overflow\" modal={false}>\n\t\t\t\t\t\t\t\t\t\t\t<M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t<M.Content side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<OverflowToolsContent toolbarItems={itemsInDropdown} />\n\t\t\t\t\t\t\t\t\t\t\t</M.Content>\n\t\t\t\t\t\t\t\t\t\t</M.Root>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\t\tdata-tool={id}\n\t\t\t\t\t\tdata-geo={meta?.geo ?? ''}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype=\"tool\"\n\t\t\tdata-testid={`tools.${item.id}`}\n\t\t\tdata-tool={item.id}\n\t\t\tdata-geo={item.meta?.geo ?? ''}\n\t\t\taria-label={item.label}\n\t\t\ttitle={title}\n\t\t\ticon={item.icon}\n\t\t\tdata-state={isSelected ? 'selected' : undefined}\n\t\t\tonClick={() => item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst geoState = useValue(\n\t\t'geo',\n\t\t() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),\n\t\t[editor]\n\t)\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t<div className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{/* {breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t<div className=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)} */}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < 5,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tkey={laserTool.toolItem.id}\n\t\t\t\t\t\t\t\titem={laserTool.toolItem}\n\t\t\t\t\t\t\t\ttitle={getTitle(laserTool.toolItem)}\n\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={dropdownFirstItem.toolItem.id}\n\t\t\t\t\t\t\t\t\t\t\titem={dropdownFirstItem.toolItem}\n\t\t\t\t\t\t\t\t\t\t\ttitle={getTitle(dropdownFirstItem.toolItem)}\n\t\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(\n\t\t\t\t\t\t\t\t\t\t\t\tdropdownFirstItem.toolItem,\n\t\t\t\t\t\t\t\t\t\t\t\tactiveToolId,\n\t\t\t\t\t\t\t\t\t\t\t\tgeoState\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t<M.Root id=\"toolbar overflow\" modal={false}>\n\t\t\t\t\t\t\t\t\t\t\t<M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t<M.Content side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<OverflowToolsContent toolbarItems={itemsInDropdown} />\n\t\t\t\t\t\t\t\t\t\t\t</M.Content>\n\t\t\t\t\t\t\t\t\t\t</M.Root>\n\t\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\t\tdata-tool={id}\n\t\t\t\t\t\tdata-geo={meta?.geo ?? ''}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype=\"tool\"\n\t\t\tdata-testid={`tools.${item.id}`}\n\t\t\tdata-tool={item.id}\n\t\t\tdata-geo={item.meta?.geo ?? ''}\n\t\t\taria-label={item.label}\n\t\t\ttitle={title}\n\t\t\ticon={item.icon}\n\t\t\tdata-state={isSelected ? 'selected' : undefined}\n\t\t\tonClick={() => item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuHO;AAvHP,oBAA6E;AAC7E,wBAAuB;AACvB,mBAA4B;AAC5B,2BAA8B;AAC9B,yBAA4B;AAC5B,8BAAkD;AAElD,4BAA+B;AAC/B,yBAA4B;AAC5B,8BAAiC;AACjC,oBAAuB;AACvB,QAAmB;AACnB,oBAAuB;AACvB,oCAAuC;AAGhC,MAAM,cAAU,mBAAK,SAASA,WAAU;AAC9C,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,oCAAc;AAEjC,QAAM,kCAAkC,aAAAC,QAAM,OAAoC,MAAS;AAE3F,QAAM,iBAAa,gCAAY;AAC/B,QAAM,mBAAe,0CAAiB;AACtC,QAAM,YAAY,aAAa,KAAK,CAAC,SAAS,KAAK,SAAS,OAAO,OAAO;AAE1E,QAAM,mBAAe,wBAAS,mBAAmB,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAE1F,QAAM,eAAW;AAAA,IAChB;AAAA,IACA,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,8BAAgB;AAAA,IAC/D,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,mBAAmB,CAAC;AAE1B,QAAM,WAAW,CAAC,SACjB,KAAK,QAAQ,GAAG,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,UAAM,sBAAO,KAAK,GAAG,IAAI,EAAE,KAAK;AAEzE,QAAM,wBAAwB,aAAa,KAAK,CAAC,SAAS;AACzD,WAAO,qBAAqB,KAAK,UAAU,cAAc,QAAQ;AAAA,EAClE,CAAC;AAED,QAAM,EAAE,cAAc,iBAAiB,kBAAkB,IAAI,aAAAA,QAAM,QAAQ,MAAM;AAChF,UAAMC,gBAAkC,CAAC;AACzC,UAAMC,mBAAqC,CAAC;AAC5C,QAAIC;AAEJ,UAAM,gBAAgB,KAAK,IAAI,GAAG,IAAI,UAAU;AAEhD,aAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK;AAC7C,YAAM,OAAO,aAAa,CAAC;AAC3B,UAAI,IAAI,eAAe;AAEtB,QAAAF,cAAa,KAAK,IAAI;AAAA,MACvB,OAAO;AAGN,YAAI,SAAS,uBAAuB;AAEnC,UAAAE,qBAAoB;AAAA,QACrB;AAEA,QAAAD,iBAAgB,KAAK,IAAI;AAAA,MAC1B;AAAA,IACD;AAEA,QAAIC,oBAAmB;AAAA,IAEvB,OAAO;AAON,UAAI,CAAC,gCAAgC,SAAS;AAC7C,wCAAgC,UAAUD,iBAAgB,CAAC;AAAA,MAC5D;AAEA,MAAAC,qBAAoB,gCAAgC;AAMpD,UAAI,CAACD,iBAAgB,SAASC,kBAAiB,GAAG;AACjD,QAAAA,qBAAoBD,iBAAgB,CAAC;AAAA,MACtC;AAAA,IACD;AAIA,oCAAgC,UAAUC;AAE1C,QAAID,iBAAgB,UAAU,GAAG;AAChC,MAAAD,cAAa,KAAK,GAAGC,gBAAe;AACpC,MAAAA,iBAAgB,SAAS;AAAA,IAC1B;AAEA,WAAO,EAAE,cAAAD,eAAc,iBAAAC,kBAAiB,mBAAAC,mBAAkB;AAAA,EAC3D,GAAG,CAAC,cAAc,uBAAuB,UAAU,CAAC;AAEpD,SACC,4CAAC,SAAI,WAAU,gBACd,uDAAC,SAAI,WAAU,uBACd;AAAA,iDAAC,SAAI,WAAU,sBACb;AAAA,OAAC,cACD,4CAAC,SAAI,WAAU,wBAUd,sDAAC,wDAAuB,cAA4B,GACrD;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACA,eAAW,kBAAAC,SAAW,uBAAuB;AAAA,YAC5C,+BAA+B,aAAa;AAAA,UAC7C,CAAC;AAAA,UAGA;AAAA,yBAAa,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,SAAS,MAAM;AAC/C,qBACC;AAAA,gBAAC;AAAA;AAAA,kBAEA,MAAM;AAAA,kBACN,OAAO,SAAS,QAAQ;AAAA,kBACxB,YAAY,qBAAqB,UAAU,cAAc,QAAQ;AAAA;AAAA,gBAH5D,SAAS;AAAA,cAIf;AAAA,YAEF,CAAC;AAAA,YACA,cAAc,aACd;AAAA,cAAC;AAAA;AAAA,gBAEA,MAAM,UAAU;AAAA,gBAChB,OAAO,SAAS,UAAU,QAAQ;AAAA,gBAClC,YAAY,qBAAqB,UAAU,UAAU,cAAc,QAAQ;AAAA;AAAA,cAHtE,UAAU,SAAS;AAAA,YAIzB;AAAA,YAEA,oBACA,4EAEE;AAAA,2BAAa,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,SAAS,MACzC;AAAA,gBAAC;AAAA;AAAA,kBAEA,MAAM;AAAA,kBACN,OAAO,SAAS,QAAQ;AAAA,kBACxB,YAAY,qBAAqB,UAAU,cAAc,QAAQ;AAAA;AAAA,gBAH5D,SAAS;AAAA,cAIf,CACA;AAAA,cAEA,aAAa,IAAI,CAAC,EAAE,SAAS,MAC7B;AAAA,gBAAC;AAAA;AAAA,kBAEA,MAAM;AAAA,kBACN,OAAO,SAAS,QAAQ;AAAA,kBACxB,YAAY,qBAAqB,UAAU,cAAc,QAAQ;AAAA;AAAA,gBAH5D,SAAS;AAAA,cAIf,CACA;AAAA,cAEA,gBAAgB,SAChB,4EAEC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBAEA,MAAM,kBAAkB;AAAA,oBACxB,OAAO,SAAS,kBAAkB,QAAQ;AAAA,oBAC1C,YAAY;AAAA,sBACX,kBAAkB;AAAA,sBAClB;AAAA,sBACA;AAAA,oBACD;AAAA;AAAA,kBAPK,kBAAkB,SAAS;AAAA,gBAQjC;AAAA,gBAEA,6CAAC,EAAE,MAAF,EAAO,IAAG,oBAAmB,OAAO,OACpC;AAAA,8DAAC,EAAE,SAAF,EACA;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,MAAK;AAAA,sBACL,MAAK;AAAA,sBACL,eAAY;AAAA,sBACZ,OAAO,IAAI,iBAAiB;AAAA;AAAA,kBAC7B,GACD;AAAA,kBACA,4CAAC,EAAE,SAAF,EAAU,MAAK,OAAM,OAAM,UAC3B,sDAAC,wBAAqB,cAAc,iBAAiB,GACtD;AAAA,mBACD;AAAA,gBACA,4CAAC,kCAAY;AAAA,iBACd,IACG;AAAA,eACL;AAAA;AAAA;AAAA,MAEF;AAAA,OACD;AAAA,IACC,aAAa,KAAK,CAAC,cACnB,4CAAC,SAAI,WAAU,uBACd,sDAAC,4CAAiB,GACnB;AAAA,KAEF,GACD;AAEF,CAAC;AAED,MAAM,2BAAuB,qBAAM,SAASC,sBAAqB;AAAA,EAChE;AACD,GAEG;AACF,QAAM,UAAM,sCAAe;AAE3B,SACC,4CAAC,SAAI,WAAU,sBACb,uBAAa,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,MAAM,KAAK,OAAO,UAAU,KAAK,EAAE,MAAM;AAC7E,WACC;AAAA,MAAC,EAAE;AAAA,MAAF;AAAA,QAEA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAa,cAAc,EAAE;AAAA,QAC7B,aAAW;AAAA,QACX,YAAU,MAAM,OAAO;AAAA,QACvB,cAAY;AAAA,QACZ,SAAS,MAAM,SAAS,SAAS;AAAA,QACjC,OAAO,QAAQ,GAAG,IAAI,KAAK,CAAC,IAAI,UAAM,sBAAO,GAAG,IAAI,EAAE,KAAK;AAAA,QAC3D;AAAA;AAAA,MATK;AAAA,IAUN;AAAA,EAEF,CAAC,GACF;AAEF,CAAC;AAED,SAAS,cAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,eAAa,SAAS,KAAK,EAAE;AAAA,MAC7B,aAAW,KAAK;AAAA,MAChB,YAAU,KAAK,MAAM,OAAO;AAAA,MAC5B,cAAY,KAAK;AAAA,MACjB;AAAA,MACA,MAAM,KAAK;AAAA,MACX,cAAY,aAAa,aAAa;AAAA,MACtC,SAAS,MAAM,KAAK,SAAS,SAAS;AAAA,MACtC,cAAc,CAAC,MAAM;AACpB,0CAAe,CAAC;AAChB,aAAK,SAAS,SAAS;AAAA,MACxB;AAAA;AAAA,EACD;AAEF;AAEA,MAAM,uBAAuB,CAC5B,MACA,cACA,aACI;AACJ,SAAO,KAAK,MAAM,MACf,iBAAiB,SAAS,aAAa,KAAK,MAAM,MAClD,iBAAiB,KAAK;AAC1B;",
|
|
6
6
|
"names": ["Toolbar", "React", "itemsInPanel", "itemsInDropdown", "dropdownFirstItem", "classNames", "OverflowToolsContent"]
|
|
7
7
|
}
|
|
@@ -58,7 +58,7 @@ const ChatPollContent = ({
|
|
|
58
58
|
return /* @__PURE__ */ jsxs(Styled.PollWrapper, { "data-test": "chatPollMessageText", children: [
|
|
59
59
|
/* @__PURE__ */ jsx(Styled.PollText, { children: pollData.questionText }),
|
|
60
60
|
/* @__PURE__ */ jsx(ResponsiveContainer, { width: "90%", height: useHeight, children: /* @__PURE__ */ jsxs(BarChart, { data: translatedAnswers, layout: "vertical", children: [
|
|
61
|
-
/* @__PURE__ */ jsx(XAxis, { type: "number" }),
|
|
61
|
+
/* @__PURE__ */ jsx(XAxis, { type: "number", allowDecimals: false }),
|
|
62
62
|
/* @__PURE__ */ jsx(YAxis, { width: 80, type: "category", dataKey: "pollAnswer" }),
|
|
63
63
|
/* @__PURE__ */ jsx(Bar, { dataKey: "numVotes", fill: "#0C57A7" })
|
|
64
64
|
] }) })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
|
|
5
|
-
"mappings": "AAuFG,cAEC,YAFD;AArFH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,OAAO,YAAY;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport Styled from './styles'\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst translationKey = answer.key as TLUiTranslationKey\n\t\tconst pollAnswer = translationKey ? translationKey : answer.key\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
|
|
5
|
+
"mappings": "AAuFG,cAEC,YAFD;AArFH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,OAAO,YAAY;AAEnB,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAuBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AAEzB,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa,iBAAiB,iBAAiB,OAAO;AAC5D,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,oBAAC,SAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa;AAAA,MACvD,oBAAC,OAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,29 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { track
|
|
3
|
-
import { useBreakpoint } from "../hooks/useBreakpoint.mjs";
|
|
4
|
-
import { useReadonly } from "../hooks/useReadonly.mjs";
|
|
5
|
-
import { ActionsMenu } from "./ActionsMenu.mjs";
|
|
6
|
-
import { DuplicateButton } from "./DuplicateButton.mjs";
|
|
7
|
-
import { Menu } from "./Menu.mjs";
|
|
8
|
-
import { PageMenu } from "./PageMenu/PageMenu.mjs";
|
|
9
|
-
import { RedoButton } from "./RedoButton.mjs";
|
|
10
|
-
import { TrashButton } from "./TrashButton.mjs";
|
|
11
|
-
import { UndoButton } from "./UndoButton.mjs";
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { track } from "@bigbluebutton/editor";
|
|
12
3
|
const MenuZone = track(function MenuZone2() {
|
|
13
|
-
|
|
14
|
-
const breakpoint = useBreakpoint();
|
|
15
|
-
const isReadonly = useReadonly();
|
|
16
|
-
return /* @__PURE__ */ jsx("div", { className: "tlui-menu-zone", children: /* @__PURE__ */ jsxs("div", { className: "tlui-buttons__horizontal", children: [
|
|
17
|
-
/* @__PURE__ */ jsx(Menu, {}),
|
|
18
|
-
/* @__PURE__ */ jsx(PageMenu, {}),
|
|
19
|
-
breakpoint >= 6 && !isReadonly && !editor.isInAny("hand", "zoom") && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
20
|
-
/* @__PURE__ */ jsx(UndoButton, {}),
|
|
21
|
-
/* @__PURE__ */ jsx(RedoButton, {}),
|
|
22
|
-
/* @__PURE__ */ jsx(TrashButton, {}),
|
|
23
|
-
/* @__PURE__ */ jsx(DuplicateButton, {}),
|
|
24
|
-
/* @__PURE__ */ jsx(ActionsMenu, {})
|
|
25
|
-
] })
|
|
26
|
-
] }) });
|
|
4
|
+
return /* @__PURE__ */ jsx("div", { className: "tlui-menu-zone", children: /* @__PURE__ */ jsx("div", { className: "tlui-buttons__horizontal" }) });
|
|
27
5
|
});
|
|
28
6
|
export {
|
|
29
7
|
MenuZone
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/lib/ui/components/MenuZone.tsx"],
|
|
4
|
-
"sourcesContent": ["import { track
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { track } from '@bigbluebutton/editor'\n// import { useBreakpoint } from '../hooks/useBreakpoint'\n// import { useReadonly } from '../hooks/useReadonly'\n\nexport const MenuZone = track(function MenuZone() {\n\t// const editor = useEditor()\n\n\t// const breakpoint = useBreakpoint()\n\t// const isReadonly = useReadonly()\n\n\treturn (\n\t\t<div className=\"tlui-menu-zone\">\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t{/* <Menu />\n\t\t\t\t<PageMenu />\n\t\t\t\t{breakpoint >= 6 && !isReadonly && !editor.isInAny('hand', 'zoom') && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t</>\n\t\t\t\t)} */}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
|
|
5
|
+
"mappings": "AAYG;AAZH,SAAS,aAAa;AAIf,MAAM,WAAW,MAAM,SAASA,YAAW;AAMjD,SACC,oBAAC,SAAI,WAAU,kBACd,8BAAC,SAAI,WAAU,4BAYf,GACD;AAEF,CAAC;",
|
|
6
6
|
"names": ["MenuZone"]
|
|
7
7
|
}
|
|
@@ -7,11 +7,7 @@ import { useReadonly } from "../../hooks/useReadonly.mjs";
|
|
|
7
7
|
import { useToolbarSchema } from "../../hooks/useToolbarSchema.mjs";
|
|
8
8
|
import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
|
|
9
9
|
import { ActionsMenu } from "../ActionsMenu.mjs";
|
|
10
|
-
import { DuplicateButton } from "../DuplicateButton.mjs";
|
|
11
10
|
import { MobileStylePanel } from "../MobileStylePanel.mjs";
|
|
12
|
-
import { RedoButton } from "../RedoButton.mjs";
|
|
13
|
-
import { TrashButton } from "../TrashButton.mjs";
|
|
14
|
-
import { UndoButton } from "../UndoButton.mjs";
|
|
15
11
|
import { Button } from "../primitives/Button.mjs";
|
|
16
12
|
import * as M from "../primitives/DropdownMenu.mjs";
|
|
17
13
|
import { kbdStr } from "../primitives/shared.mjs";
|
|
@@ -70,16 +66,7 @@ const Toolbar = memo(function Toolbar2() {
|
|
|
70
66
|
}, [toolbarItems, activeTLUiToolbarItem, breakpoint]);
|
|
71
67
|
return /* @__PURE__ */ jsx("div", { className: "tlui-toolbar", children: /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__inner", children: [
|
|
72
68
|
/* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__left", children: [
|
|
73
|
-
!isReadonly && /* @__PURE__ */
|
|
74
|
-
breakpoint < 6 && !(activeToolId === "hand" || activeToolId === "zoom") && /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__extras__controls tlui-buttons__horizontal", children: [
|
|
75
|
-
/* @__PURE__ */ jsx(UndoButton, {}),
|
|
76
|
-
/* @__PURE__ */ jsx(RedoButton, {}),
|
|
77
|
-
/* @__PURE__ */ jsx(TrashButton, {}),
|
|
78
|
-
/* @__PURE__ */ jsx(DuplicateButton, {}),
|
|
79
|
-
/* @__PURE__ */ jsx(ActionsMenu, {})
|
|
80
|
-
] }),
|
|
81
|
-
/* @__PURE__ */ jsx(ToggleToolLockedButton, { activeToolId })
|
|
82
|
-
] }),
|
|
69
|
+
!isReadonly && /* @__PURE__ */ jsx("div", { className: "tlui-toolbar__extras", children: /* @__PURE__ */ jsx(ToggleToolLockedButton, { activeToolId }) }),
|
|
83
70
|
/* @__PURE__ */ jsxs(
|
|
84
71
|
"div",
|
|
85
72
|
{
|
|
@@ -152,7 +139,8 @@ const Toolbar = memo(function Toolbar2() {
|
|
|
152
139
|
}
|
|
153
140
|
) }),
|
|
154
141
|
/* @__PURE__ */ jsx(M.Content, { side: "top", align: "center", children: /* @__PURE__ */ jsx(OverflowToolsContent, { toolbarItems: itemsInDropdown }) })
|
|
155
|
-
] })
|
|
142
|
+
] }),
|
|
143
|
+
/* @__PURE__ */ jsx(ActionsMenu, {})
|
|
156
144
|
] }) : null
|
|
157
145
|
] })
|
|
158
146
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/lib/ui/components/Toolbar/Toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { DuplicateButton } from '../DuplicateButton'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { RedoButton } from '../RedoButton'\nimport { TrashButton } from '../TrashButton'\nimport { UndoButton } from '../UndoButton'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst geoState = useValue(\n\t\t'geo',\n\t\t() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),\n\t\t[editor]\n\t)\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t<div className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t<div className=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < 5,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tkey={laserTool.toolItem.id}\n\t\t\t\t\t\t\t\titem={laserTool.toolItem}\n\t\t\t\t\t\t\t\ttitle={getTitle(laserTool.toolItem)}\n\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={dropdownFirstItem.toolItem.id}\n\t\t\t\t\t\t\t\t\t\t\titem={dropdownFirstItem.toolItem}\n\t\t\t\t\t\t\t\t\t\t\ttitle={getTitle(dropdownFirstItem.toolItem)}\n\t\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(\n\t\t\t\t\t\t\t\t\t\t\t\tdropdownFirstItem.toolItem,\n\t\t\t\t\t\t\t\t\t\t\t\tactiveToolId,\n\t\t\t\t\t\t\t\t\t\t\t\tgeoState\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t<M.Root id=\"toolbar overflow\" modal={false}>\n\t\t\t\t\t\t\t\t\t\t\t<M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t<M.Content side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<OverflowToolsContent toolbarItems={itemsInDropdown} />\n\t\t\t\t\t\t\t\t\t\t\t</M.Content>\n\t\t\t\t\t\t\t\t\t\t</M.Root>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\t\tdata-tool={id}\n\t\t\t\t\t\tdata-geo={meta?.geo ?? ''}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype=\"tool\"\n\t\t\tdata-testid={`tools.${item.id}`}\n\t\t\tdata-tool={item.id}\n\t\t\tdata-geo={item.meta?.geo ?? ''}\n\t\t\taria-label={item.label}\n\t\t\ttitle={title}\n\t\t\ticon={item.icon}\n\t\t\tdata-state={isSelected ? 'selected' : undefined}\n\t\t\tonClick={() => item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst geoState = useValue(\n\t\t'geo',\n\t\t() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),\n\t\t[editor]\n\t)\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t<div className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{/* {breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t<div className=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)} */}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < 5,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tkey={laserTool.toolItem.id}\n\t\t\t\t\t\t\t\titem={laserTool.toolItem}\n\t\t\t\t\t\t\t\ttitle={getTitle(laserTool.toolItem)}\n\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={dropdownFirstItem.toolItem.id}\n\t\t\t\t\t\t\t\t\t\t\titem={dropdownFirstItem.toolItem}\n\t\t\t\t\t\t\t\t\t\t\ttitle={getTitle(dropdownFirstItem.toolItem)}\n\t\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(\n\t\t\t\t\t\t\t\t\t\t\t\tdropdownFirstItem.toolItem,\n\t\t\t\t\t\t\t\t\t\t\t\tactiveToolId,\n\t\t\t\t\t\t\t\t\t\t\t\tgeoState\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t<M.Root id=\"toolbar overflow\" modal={false}>\n\t\t\t\t\t\t\t\t\t\t\t<M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t<M.Content side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<OverflowToolsContent toolbarItems={itemsInDropdown} />\n\t\t\t\t\t\t\t\t\t\t\t</M.Content>\n\t\t\t\t\t\t\t\t\t\t</M.Root>\n\t\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\t\tdata-tool={id}\n\t\t\t\t\t\tdata-geo={meta?.geo ?? ''}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype=\"tool\"\n\t\t\tdata-testid={`tools.${item.id}`}\n\t\t\tdata-tool={item.id}\n\t\t\tdata-geo={item.meta?.geo ?? ''}\n\t\t\taria-label={item.label}\n\t\t\ttitle={title}\n\t\t\ticon={item.icon}\n\t\t\tdata-state={isSelected ? 'selected' : undefined}\n\t\t\tonClick={() => item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Toolbar", "itemsInPanel", "itemsInDropdown", "dropdownFirstItem", "OverflowToolsContent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbluebutton/tldraw",
|
|
3
3
|
"description": "BigBlueButton's fork of tldraw 2.0-alpha.19 - A tiny little drawing editor.",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.26",
|
|
5
5
|
"packageManager": "yarn@3.5.0",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "tldraw GB Ltd.",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"src"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@bigbluebutton/editor": "2.0.0-alpha.
|
|
38
|
+
"@bigbluebutton/editor": "2.0.0-alpha.25",
|
|
39
39
|
"@radix-ui/react-alert-dialog": "^1.0.0",
|
|
40
40
|
"@radix-ui/react-context-menu": "^2.1.5",
|
|
41
41
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
@@ -88,7 +88,7 @@ const ChatPollContent: React.FC<ChatPollContentProps> = ({
|
|
|
88
88
|
<Styled.PollText>{pollData.questionText}</Styled.PollText>
|
|
89
89
|
<ResponsiveContainer width="90%" height={useHeight}>
|
|
90
90
|
<BarChart data={translatedAnswers} layout="vertical">
|
|
91
|
-
<XAxis type="number" />
|
|
91
|
+
<XAxis type="number" allowDecimals={false} />
|
|
92
92
|
<YAxis width={80} type="category" dataKey="pollAnswer" />
|
|
93
93
|
<Bar dataKey="numVotes" fill="#0C57A7" />
|
|
94
94
|
</BarChart>
|
|
@@ -1,24 +1,17 @@
|
|
|
1
|
-
import { track
|
|
2
|
-
import { useBreakpoint } from '../hooks/useBreakpoint'
|
|
3
|
-
import { useReadonly } from '../hooks/useReadonly'
|
|
4
|
-
import { ActionsMenu } from './ActionsMenu'
|
|
5
|
-
import { DuplicateButton } from './DuplicateButton'
|
|
6
|
-
import { Menu } from './Menu'
|
|
7
|
-
import { PageMenu } from './PageMenu/PageMenu'
|
|
8
|
-
import { RedoButton } from './RedoButton'
|
|
9
|
-
import { TrashButton } from './TrashButton'
|
|
10
|
-
import { UndoButton } from './UndoButton'
|
|
1
|
+
import { track } from '@bigbluebutton/editor'
|
|
2
|
+
// import { useBreakpoint } from '../hooks/useBreakpoint'
|
|
3
|
+
// import { useReadonly } from '../hooks/useReadonly'
|
|
11
4
|
|
|
12
5
|
export const MenuZone = track(function MenuZone() {
|
|
13
|
-
const editor = useEditor()
|
|
6
|
+
// const editor = useEditor()
|
|
14
7
|
|
|
15
|
-
const breakpoint = useBreakpoint()
|
|
16
|
-
const isReadonly = useReadonly()
|
|
8
|
+
// const breakpoint = useBreakpoint()
|
|
9
|
+
// const isReadonly = useReadonly()
|
|
17
10
|
|
|
18
11
|
return (
|
|
19
12
|
<div className="tlui-menu-zone">
|
|
20
13
|
<div className="tlui-buttons__horizontal">
|
|
21
|
-
<Menu />
|
|
14
|
+
{/* <Menu />
|
|
22
15
|
<PageMenu />
|
|
23
16
|
{breakpoint >= 6 && !isReadonly && !editor.isInAny('hand', 'zoom') && (
|
|
24
17
|
<>
|
|
@@ -28,7 +21,7 @@ export const MenuZone = track(function MenuZone() {
|
|
|
28
21
|
<DuplicateButton />
|
|
29
22
|
<ActionsMenu />
|
|
30
23
|
</>
|
|
31
|
-
)}
|
|
24
|
+
)} */}
|
|
32
25
|
</div>
|
|
33
26
|
</div>
|
|
34
27
|
)
|
|
@@ -7,11 +7,7 @@ import { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'
|
|
|
7
7
|
import { TLUiToolItem } from '../../hooks/useTools'
|
|
8
8
|
import { useTranslation } from '../../hooks/useTranslation/useTranslation'
|
|
9
9
|
import { ActionsMenu } from '../ActionsMenu'
|
|
10
|
-
import { DuplicateButton } from '../DuplicateButton'
|
|
11
10
|
import { MobileStylePanel } from '../MobileStylePanel'
|
|
12
|
-
import { RedoButton } from '../RedoButton'
|
|
13
|
-
import { TrashButton } from '../TrashButton'
|
|
14
|
-
import { UndoButton } from '../UndoButton'
|
|
15
11
|
import { Button } from '../primitives/Button'
|
|
16
12
|
import * as M from '../primitives/DropdownMenu'
|
|
17
13
|
import { kbdStr } from '../primitives/shared'
|
|
@@ -112,7 +108,7 @@ export const Toolbar = memo(function Toolbar() {
|
|
|
112
108
|
<div className="tlui-toolbar__left">
|
|
113
109
|
{!isReadonly && (
|
|
114
110
|
<div className="tlui-toolbar__extras">
|
|
115
|
-
{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (
|
|
111
|
+
{/* {breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (
|
|
116
112
|
<div className="tlui-toolbar__extras__controls tlui-buttons__horizontal">
|
|
117
113
|
<UndoButton />
|
|
118
114
|
<RedoButton />
|
|
@@ -120,7 +116,7 @@ export const Toolbar = memo(function Toolbar() {
|
|
|
120
116
|
<DuplicateButton />
|
|
121
117
|
<ActionsMenu />
|
|
122
118
|
</div>
|
|
123
|
-
)}
|
|
119
|
+
)} */}
|
|
124
120
|
<ToggleToolLockedButton activeToolId={activeToolId} />
|
|
125
121
|
</div>
|
|
126
122
|
)}
|
|
@@ -197,6 +193,7 @@ export const Toolbar = memo(function Toolbar() {
|
|
|
197
193
|
<OverflowToolsContent toolbarItems={itemsInDropdown} />
|
|
198
194
|
</M.Content>
|
|
199
195
|
</M.Root>
|
|
196
|
+
<ActionsMenu />
|
|
200
197
|
</>
|
|
201
198
|
) : null}
|
|
202
199
|
</>
|