@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 5.54 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/collab-sidebar/note-indicator-toolbar.js"],
"sourcesContent": ["import { ToolbarButton } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from './utils';\n\nconst { NoteIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nfunction ThreadParticipants( { participants } ) {\n\tconst defaultAvatar = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\treturn __experimentalDiscussionSettings?.avatarURL;\n\t}, [] );\n\n\t// If there are more than 3 participants, show 2 avatars and a \"+n\" number.\n\tconst maxAvatars = 3;\n\tconst isOverflow = participants.length > maxAvatars;\n\tconst visibleParticipants = isOverflow\n\t\t? participants.slice( 0, maxAvatars - 1 )\n\t\t: participants;\n\tconst overflowCount = Math.max(\n\t\t0,\n\t\tparticipants.length - visibleParticipants.length\n\t);\n\tconst threadHasMoreParticipants = participants.length > 100;\n\n\t// If we hit the note limit, show \"100+\" instead of exact overflow count.\n\tconst overflowText =\n\t\tthreadHasMoreParticipants && overflowCount > 0\n\t\t\t? __( '100+' )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: Number of participants.\n\t\t\t\t\t__( '+%s' ),\n\t\t\t\t\toverflowCount\n\t\t\t );\n\n\treturn (\n\t\t<Stack direction=\"row\" align=\"center\" gap=\"xs\">\n\t\t\t{ visibleParticipants.map( ( participant ) => (\n\t\t\t\t<img\n\t\t\t\t\tkey={ participant.id }\n\t\t\t\t\tsrc={ participant.avatar || defaultAvatar }\n\t\t\t\t\talt={ participant.name }\n\t\t\t\t\tclassName=\"editor-note-indicator__avatar\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tborderColor: getAvatarBorderColor( participant.id ),\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ overflowCount > 0 && (\n\t\t\t\t<span className=\"editor-note-indicator__overflow\">\n\t\t\t\t\t{ overflowText }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n\nexport function NoteAvatarIndicator( { onClick, note } ) {\n\tconst threadParticipants = useMemo( () => {\n\t\tif ( ! note ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// Track thread participants (original author + repliers), sorted by\n\t\t// date so they appear in chronological order.\n\t\tconst participantsMap = new Map();\n\t\tconst allNotes = [ note, ...note.reply ].sort(\n\t\t\t( a, b ) => new Date( a.date ) - new Date( b.date )\n\t\t);\n\n\t\tfor ( const entry of allNotes ) {\n\t\t\tif ( ! entry.author_name || participantsMap.has( entry.author ) ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tparticipantsMap.set( entry.author, {\n\t\t\t\tid: entry.author,\n\t\t\t\tname: entry.author_name,\n\t\t\t\tavatar:\n\t\t\t\t\tentry.author_avatar_urls?.[ '48' ] ||\n\t\t\t\t\tentry.author_avatar_urls?.[ '96' ],\n\t\t\t} );\n\t\t}\n\n\t\treturn Array.from( participantsMap.values() );\n\t}, [ note ] );\n\n\tif ( ! threadParticipants.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NoteIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName=\"editor-note-indicator\"\n\t\t\t\tlabel={ __( 'View notes' ) }\n\t\t\t\tonClick={ () => onClick() }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t<ThreadParticipants participants={ threadParticipants } />\n\t\t\t</ToolbarButton>\n\t\t</NoteIconToolbarSlotFill.Fill>\n\t);\n}\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA8B;AAC9B,gBAAsB;AACtB,kBAA4B;AAC5B,qBAAwB;AACxB,0BAGO;AACP,kBAA0B;AAC1B,yBAAuB;AACvB,mBAAqC;AAkCnC;AAhCF,IAAM,EAAE,wBAAwB,QAAI,2BAAQ,oBAAAA,WAAuB;AAEnE,SAAS,mBAAoB,EAAE,aAAa,GAAI;AAC/C,QAAM,oBAAgB,uBAAW,CAAE,WAAY;AAC9C,UAAM,EAAE,YAAY,IAAI,OAAQ,oBAAAC,KAAiB;AACjD,UAAM,EAAE,iCAAiC,IAAI,YAAY;AACzD,WAAO,kCAAkC;AAAA,EAC1C,GAAG,CAAC,CAAE;AAGN,QAAM,aAAa;AACnB,QAAM,aAAa,aAAa,SAAS;AACzC,QAAM,sBAAsB,aACzB,aAAa,MAAO,GAAG,aAAa,CAAE,IACtC;AACH,QAAM,gBAAgB,KAAK;AAAA,IAC1B;AAAA,IACA,aAAa,SAAS,oBAAoB;AAAA,EAC3C;AACA,QAAM,4BAA4B,aAAa,SAAS;AAGxD,QAAM,eACL,6BAA6B,gBAAgB,QAC1C,gBAAI,MAAO,QACX;AAAA;AAAA,QAEA,gBAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,SACC,6CAAC,mBAAM,WAAU,OAAM,OAAM,UAAS,KAAI,MACvC;AAAA,wBAAoB,IAAK,CAAE,gBAC5B;AAAA,MAAC;AAAA;AAAA,QAEA,KAAM,YAAY,UAAU;AAAA,QAC5B,KAAM,YAAY;AAAA,QAClB,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,iBAAa,mCAAsB,YAAY,EAAG;AAAA,QACnD;AAAA;AAAA,MANM,YAAY;AAAA,IAOnB,CACC;AAAA,IACA,gBAAgB,KACjB,4CAAC,UAAK,WAAU,mCACb,wBACH;AAAA,KAEF;AAEF;AAEO,SAAS,oBAAqB,EAAE,SAAS,KAAK,GAAI;AACxD,QAAM,yBAAqB,wBAAS,MAAM;AACzC,QAAK,CAAE,MAAO;AACb,aAAO,CAAC;AAAA,IACT;AAIA,UAAM,kBAAkB,oBAAI,IAAI;AAChC,UAAM,WAAW,CAAE,MAAM,GAAG,KAAK,KAAM,EAAE;AAAA,MACxC,CAAE,GAAG,MAAO,IAAI,KAAM,EAAE,IAAK,IAAI,IAAI,KAAM,EAAE,IAAK;AAAA,IACnD;AAEA,eAAY,SAAS,UAAW;AAC/B,UAAK,CAAE,MAAM,eAAe,gBAAgB,IAAK,MAAM,MAAO,GAAI;AACjE;AAAA,MACD;AAEA,sBAAgB,IAAK,MAAM,QAAQ;AAAA,QAClC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,QACC,MAAM,qBAAsB,IAAK,KACjC,MAAM,qBAAsB,IAAK;AAAA,MACnC,CAAE;AAAA,IACH;AAEA,WAAO,MAAM,KAAM,gBAAgB,OAAO,CAAE;AAAA,EAC7C,GAAG,CAAE,IAAK,CAAE;AAEZ,MAAK,CAAE,mBAAmB,QAAS;AAClC,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,wBAAwB,MAAxB,EACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,YAAa;AAAA,MACzB,SAAU,MAAM,QAAQ;AAAA,MACxB,aAAW;AAAA,MAEX,sDAAC,sBAAmB,cAAe,oBAAqB;AAAA;AAAA,EACzD,GACD;AAEF;",
"names": ["blockEditorPrivateApis", "blockEditorStore"]
}