Commit cb895b14 authored by Robert Knight's avatar Robert Knight

Improve readability of `Excerpt` implementation per CR feedback

 - Use `is` prefix for boolean vars consistently

 - Note that the inline controls are optional

 - Clarify units of numeric props

 - Use parens to clarify precedence in a couple of expressions. This
   required overruling Prettier's formatting of these.
parent 060b73e1
...@@ -15,8 +15,8 @@ const { withServices } = require('../util/service-context'); ...@@ -15,8 +15,8 @@ const { withServices } = require('../util/service-context');
const observeElementSize = require('../util/observe-element-size'); const observeElementSize = require('../util/observe-element-size');
/** /**
* A toggle link at the bottom of an excerpt which controls whether it is * An optional toggle link at the bottom of an excerpt which controls whether
* expanded or collapsed. * it is expanded or collapsed.
*/ */
function InlineControls({ isCollapsed, setCollapsed, linkStyle = {} }) { function InlineControls({ isCollapsed, setCollapsed, linkStyle = {} }) {
const toggleTitle = isCollapsed const toggleTitle = isCollapsed
...@@ -81,8 +81,9 @@ function Excerpt({ ...@@ -81,8 +81,9 @@ function Excerpt({
const newContentHeight = contentElement.current.clientHeight; const newContentHeight = contentElement.current.clientHeight;
setContentHeight(newContentHeight); setContentHeight(newContentHeight);
// prettier-ignore
const isCollapsible = const isCollapsible =
newContentHeight > collapsedHeight + overflowHysteresis; newContentHeight > (collapsedHeight + overflowHysteresis);
onCollapsibleChanged({ collapsible: isCollapsible }); onCollapsibleChanged({ collapsible: isCollapsible });
}, [collapsedHeight, onCollapsibleChanged, overflowHysteresis]); }, [collapsedHeight, onCollapsibleChanged, overflowHysteresis]);
...@@ -97,9 +98,10 @@ function Excerpt({ ...@@ -97,9 +98,10 @@ function Excerpt({
// Render the (possibly truncated) content and controls for // Render the (possibly truncated) content and controls for
// expanding/collapsing the content. // expanding/collapsing the content.
const overflowing = contentHeight > collapsedHeight + overflowHysteresis; // prettier-ignore
const isOverflowing = contentHeight > (collapsedHeight + overflowHysteresis);
const isCollapsed = inlineControls ? collapsedByInlineControls : collapse; const isCollapsed = inlineControls ? collapsedByInlineControls : collapse;
const isExpandable = overflowing && isCollapsed; const isExpandable = isOverflowing && isCollapsed;
const contentStyle = {}; const contentStyle = {};
if (contentHeight !== 0) { if (contentHeight !== 0) {
...@@ -125,7 +127,7 @@ function Excerpt({ ...@@ -125,7 +127,7 @@ function Excerpt({
})} })}
title="Show the full excerpt" title="Show the full excerpt"
/> />
{overflowing && inlineControls && ( {isOverflowing && inlineControls && (
<InlineControls <InlineControls
isCollapsed={collapsedByInlineControls} isCollapsed={collapsedByInlineControls}
setCollapsed={setCollapsed} setCollapsed={setCollapsed}
...@@ -158,7 +160,7 @@ Excerpt.propTypes = { ...@@ -158,7 +160,7 @@ Excerpt.propTypes = {
collapse: propTypes.bool, collapse: propTypes.bool,
/** /**
* Maximum height of the container when it is collapsed. * Maximum height of the container, in pixels, when it is collapsed.
*/ */
collapsedHeight: propTypes.number, collapsedHeight: propTypes.number,
......
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