Commit 2fd096ba authored by Kyle Keating's avatar Kyle Keating Committed by Kyle Keating

Improve typechecking for components

- annotation-user
- annotation-header
- filter-status
parent 96081234
...@@ -12,10 +12,27 @@ import Button from './button'; ...@@ -12,10 +12,27 @@ import Button from './button';
import SvgIcon from '../../shared/components/svg-icon'; import SvgIcon from '../../shared/components/svg-icon';
import Timestamp from './timestamp'; import Timestamp from './timestamp';
/**
* @typedef {import("../../types/api").Annotation} Annotation
*/
/**
* @typedef AnnotationHeaderProps
* @prop {Annotation} annotation
* @prop {boolean} [isEditing] - Whether the annotation is actively being edited
* @prop {number} [replyCount] - How many replies this annotation currently has
* @prop {boolean} [showDocumentInfo] -
* Should document metadata be rendered? Hint: this is enabled for single annotation
* and stream views.
* @prop {boolean} threadIsCollapsed - Is this thread currently collapsed?
*/
/** /**
* Render an annotation's header summary, including metadata about its user, * Render an annotation's header summary, including metadata about its user,
* sharing status, document and timestamp. It also allows the user to * sharing status, document and timestamp. It also allows the user to
* toggle sub-threads/replies in certain cases. * toggle sub-threads/replies in certain cases.
*
* @param {AnnotationHeaderProps} props
*/ */
export default function AnnotationHeader({ export default function AnnotationHeader({
annotation, annotation,
...@@ -109,19 +126,9 @@ export default function AnnotationHeader({ ...@@ -109,19 +126,9 @@ export default function AnnotationHeader({
} }
AnnotationHeader.propTypes = { AnnotationHeader.propTypes = {
/* The annotation */
annotation: propTypes.object.isRequired, annotation: propTypes.object.isRequired,
/* Whether the annotation is actively being edited */
isEditing: propTypes.bool, isEditing: propTypes.bool,
/* How many replies this annotation currently has */
replyCount: propTypes.number, replyCount: propTypes.number,
/**
* Should document metadata be rendered? Hint: this is enabled for single-
* annotation and stream views
*/
showDocumentInfo: propTypes.bool, showDocumentInfo: propTypes.bool,
/**
* Is this thread currently collapsed?
*/
threadIsCollapsed: propTypes.bool.isRequired, threadIsCollapsed: propTypes.bool.isRequired,
}; };
...@@ -4,9 +4,25 @@ import propTypes from 'prop-types'; ...@@ -4,9 +4,25 @@ import propTypes from 'prop-types';
import { isThirdPartyUser, username } from '../util/account-id'; import { isThirdPartyUser, username } from '../util/account-id';
import { withServices } from '../util/service-context'; import { withServices } from '../util/service-context';
/**
* @typedef {import("../../types/api").Annotation} Annotation
* @typedef {import('../../types/config').MergedConfig} MergedConfig
* @typedef {import('../services/service-url').ServiceUrlGetter} ServiceUrlGetter
*/
/**
* @typedef AnnotationUserProps
* @prop {Annotation} annotation - The annotation whose user is relevant
* @prop {Object} features - Injected service
* @prop {ServiceUrlGetter} serviceUrl - Injected service
* @prop {MergedConfig} settings - Injected service
*/
/** /**
* Display information about an annotation's user. Link to the user's * Display information about an annotation's user. Link to the user's
* activity if it is a first-party user or `settings.usernameUrl` is present. * activity if it is a first-party user or `settings.usernameUrl` is present.
*
* @param {AnnotationUserProps} props
*/ */
function AnnotationUser({ annotation, features, serviceUrl, settings }) { function AnnotationUser({ annotation, features, serviceUrl, settings }) {
const user = annotation.user; const user = annotation.user;
...@@ -53,10 +69,7 @@ function AnnotationUser({ annotation, features, serviceUrl, settings }) { ...@@ -53,10 +69,7 @@ function AnnotationUser({ annotation, features, serviceUrl, settings }) {
} }
AnnotationUser.propTypes = { AnnotationUser.propTypes = {
/** The annotation whose user is relevant */
annotation: propTypes.object.isRequired, annotation: propTypes.object.isRequired,
/** services */
features: propTypes.object.isRequired, features: propTypes.object.isRequired,
serviceUrl: propTypes.func.isRequired, serviceUrl: propTypes.func.isRequired,
settings: propTypes.object.isRequired, settings: propTypes.object.isRequired,
......
...@@ -125,9 +125,12 @@ export default function FilterStatus() { ...@@ -125,9 +125,12 @@ export default function FilterStatus() {
const buttonProps = { const buttonProps = {
buttonText, buttonText,
onClick: () => clearSelection(), onClick: () => clearSelection(),
icon: filterMode !== 'focusOnly' ? 'cancel' : null,
}; };
if (filterMode !== 'focusOnly') {
buttonProps.icon = 'cancel';
}
// In most cases, the action button will clear the current (filter) selection, // In most cases, the action button will clear the current (filter) selection,
// but when in 'focusOnly' mode, it will toggle activation of the focus // but when in 'focusOnly' mode, it will toggle activation of the focus
if (filterMode === 'focusOnly' && !filterState.forcedVisibleCount) { if (filterMode === 'focusOnly' && !filterState.forcedVisibleCount) {
......
...@@ -628,6 +628,7 @@ const threadState = createSelector( ...@@ -628,6 +628,7 @@ const threadState = createSelector(
* // Selectors * // Selectors
* @prop {() => Object<string,boolean>} expandedMap * @prop {() => Object<string,boolean>} expandedMap
* @prop {() => string|null} filterQuery * @prop {() => string|null} filterQuery
* @prop {() => FilterState} filterState
* @prop {() => boolean} focusModeActive * @prop {() => boolean} focusModeActive
* @prop {() => boolean} focusModeConfigured * @prop {() => boolean} focusModeConfigured
* @prop {() => string|null} focusModeUserFilter * @prop {() => string|null} focusModeUserFilter
......
...@@ -25,11 +25,9 @@ ...@@ -25,11 +25,9 @@
// Files in `src/sidebar/components` that may still have errors. // Files in `src/sidebar/components` that may still have errors.
// Remove them from this list as they are resolved. // Remove them from this list as they are resolved.
"sidebar/components/hooks/use-root-thread.js", "sidebar/components/hooks/use-root-thread.js",
"sidebar/components/annotation-header.js",
"sidebar/components/annotation-share-info.js", "sidebar/components/annotation-share-info.js",
"sidebar/components/annotation-viewer-content.js", "sidebar/components/annotation-viewer-content.js",
"sidebar/components/annotation.js", "sidebar/components/annotation.js",
"sidebar/components/filter-status.js",
"sidebar/components/hypothesis-app.js", "sidebar/components/hypothesis-app.js",
"sidebar/components/share-annotations-panel.js", "sidebar/components/share-annotations-panel.js",
"sidebar/components/sidebar-content-error.js", "sidebar/components/sidebar-content-error.js",
......
...@@ -74,6 +74,9 @@ ...@@ -74,6 +74,9 @@
* @prop {string} [links.incontext] * @prop {string} [links.incontext]
* @prop {string} [links.html] * @prop {string} [links.html]
* *
* @prop {Object} [user_info]
* @prop {string|null} user_info.display_name
*
* // Properties not present on API objects, but added by utilities in the client. * // Properties not present on API objects, but added by utilities in the client.
* @prop {boolean} [$highlight] * @prop {boolean} [$highlight]
* @prop {boolean} [$orphan] * @prop {boolean} [$orphan]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment