UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 5.23 kB
{ "version": 3, "sources": ["../../../src/components/collab-sidebar/comment-indicator-toolbar.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from './utils';\n\nconst { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nconst CommentAvatarIndicator = ( { onClick, thread } ) => {\n\tconst threadParticipants = useMemo( () => {\n\t\tif ( ! thread ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst participantsMap = new Map();\n\t\tconst allComments = [ thread, ...thread.reply ];\n\n\t\t// Sort by date to show participants in chronological order.\n\t\tallComments.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) );\n\n\t\tallComments.forEach( ( comment ) => {\n\t\t\t// Track thread participants (original commenter + repliers).\n\t\t\tif ( comment.author_name && comment.author_avatar_urls ) {\n\t\t\t\tif ( ! participantsMap.has( comment.author ) ) {\n\t\t\t\t\tparticipantsMap.set( comment.author, {\n\t\t\t\t\t\tname: comment.author_name,\n\t\t\t\t\t\tavatar:\n\t\t\t\t\t\t\tcomment.author_avatar_urls?.[ '48' ] ||\n\t\t\t\t\t\t\tcomment.author_avatar_urls?.[ '96' ],\n\t\t\t\t\t\tid: comment.author,\n\t\t\t\t\t\tdate: comment.date,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\treturn Array.from( participantsMap.values() );\n\t}, [ thread ] );\n\n\tif ( ! threadParticipants.length ) {\n\t\treturn null;\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 = threadParticipants.length > maxAvatars;\n\tconst visibleParticipants = isOverflow\n\t\t? threadParticipants.slice( 0, maxAvatars - 1 )\n\t\t: threadParticipants;\n\tconst overflowCount = Math.max(\n\t\t0,\n\t\tthreadParticipants.length - visibleParticipants.length\n\t);\n\tconst threadHasMoreParticipants = threadParticipants.length > 100;\n\n\t// If we hit the comment 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<CommentIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\tclassName=\"comment-avatar-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<HStack spacing=\"1\">\n\t\t\t\t\t{ visibleParticipants.map( ( participant ) => (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tkey={ participant.id }\n\t\t\t\t\t\t\tsrc={ participant.avatar }\n\t\t\t\t\t\t\talt={ participant.name }\n\t\t\t\t\t\t\tclassName=\"comment-avatar\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tborderColor: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tparticipant.id\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) ) }\n\t\t\t\t\t{ overflowCount > 0 && (\n\t\t\t\t\t\t<Text weight={ 500 }>{ overflowText }</Text>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</ToolbarButton>\n\t\t</CommentIconToolbarSlotFill.Fill>\n\t);\n};\n\nexport default CommentAvatarIndicator;\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,kBAA4B;AAC5B,qBAAwB;AACxB,0BAAsD;AAKtD,yBAAuB;AACvB,mBAAqC;AAqEjC;AAnEJ,IAAM,EAAE,2BAA2B,QAAI,2BAAQ,oBAAAA,WAAuB;AAEtE,IAAM,yBAAyB,CAAE,EAAE,SAAS,OAAO,MAAO;AACzD,QAAM,yBAAqB,wBAAS,MAAM;AACzC,QAAK,CAAE,QAAS;AACf,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,kBAAkB,oBAAI,IAAI;AAChC,UAAM,cAAc,CAAE,QAAQ,GAAG,OAAO,KAAM;AAG9C,gBAAY,KAAM,CAAE,GAAG,MAAO,IAAI,KAAM,EAAE,IAAK,IAAI,IAAI,KAAM,EAAE,IAAK,CAAE;AAEtE,gBAAY,QAAS,CAAE,YAAa;AAEnC,UAAK,QAAQ,eAAe,QAAQ,oBAAqB;AACxD,YAAK,CAAE,gBAAgB,IAAK,QAAQ,MAAO,GAAI;AAC9C,0BAAgB,IAAK,QAAQ,QAAQ;AAAA,YACpC,MAAM,QAAQ;AAAA,YACd,QACC,QAAQ,qBAAsB,IAAK,KACnC,QAAQ,qBAAsB,IAAK;AAAA,YACpC,IAAI,QAAQ;AAAA,YACZ,MAAM,QAAQ;AAAA,UACf,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM,KAAM,gBAAgB,OAAO,CAAE;AAAA,EAC7C,GAAG,CAAE,MAAO,CAAE;AAEd,MAAK,CAAE,mBAAmB,QAAS;AAClC,WAAO;AAAA,EACR;AAGA,QAAM,aAAa;AACnB,QAAM,aAAa,mBAAmB,SAAS;AAC/C,QAAM,sBAAsB,aACzB,mBAAmB,MAAO,GAAG,aAAa,CAAE,IAC5C;AACH,QAAM,gBAAgB,KAAK;AAAA,IAC1B;AAAA,IACA,mBAAmB,SAAS,oBAAoB;AAAA,EACjD;AACA,QAAM,4BAA4B,mBAAmB,SAAS;AAG9D,QAAM,eACL,6BAA6B,gBAAgB,QAC1C,gBAAI,MAAO,QACX;AAAA;AAAA,QAEA,gBAAI,KAAM;AAAA,IACV;AAAA,EACA;AAEJ,SACC,4CAAC,2BAA2B,MAA3B,EACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,YAAa;AAAA,MACzB,SAAU,MAAM,QAAQ;AAAA,MACxB,aAAW;AAAA,MAEX,uDAAC,kBAAAC,sBAAA,EAAO,SAAQ,KACb;AAAA,4BAAoB,IAAK,CAAE,gBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,KAAM,YAAY;AAAA,YAClB,KAAM,YAAY;AAAA,YAClB,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,iBAAa;AAAA,gBACZ,YAAY;AAAA,cACb;AAAA,YACD;AAAA;AAAA,UARM,YAAY;AAAA,QASnB,CACC;AAAA,QACA,gBAAgB,KACjB,4CAAC,kBAAAC,oBAAA,EAAK,QAAS,KAAQ,wBAAc;AAAA,SAEvC;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,oCAAQ;", "names": ["blockEditorPrivateApis", "HStack", "Text"] }