web/util: fix oxfordHumanJoin(React)? for two-element arrays

Signed-off-by: Sumner Evans <sumner.evans@automattic.com>
This commit is contained in:
Sumner Evans 2024-12-07 18:31:48 -07:00
parent 08f1f1b446
commit 3288d86e29
No known key found for this signature in database
2 changed files with 21 additions and 7 deletions

View file

@ -13,7 +13,12 @@
// //
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
export function humanJoin(arr: string[], sep: string = ", ", lastSep: string = " and "): string { export function humanJoin(
arr: string[],
sep: string = ", ",
sep2: string = " and ",
lastSep: string = " and ",
): string {
if (arr.length === 0) { if (arr.length === 0) {
return "" return ""
} }
@ -21,7 +26,9 @@ export function humanJoin(arr: string[], sep: string = ", ", lastSep: string = "
return arr[0] return arr[0]
} }
if (arr.length === 2) { if (arr.length === 2) {
return arr.join(lastSep) return arr.join(sep2)
} }
return arr.slice(0, -1).join(sep) + lastSep + arr[arr.length - 1] return arr.slice(0, -1).join(sep) + lastSep + arr[arr.length - 1]
} }
export const oxfordHumanJoin = (arr: string[]) => humanJoin(arr, ", ", " and ", ", and ")

View file

@ -18,13 +18,20 @@ import { Fragment, JSX } from "react"
export function humanJoinReact( export function humanJoinReact(
arr: (string | JSX.Element)[], arr: (string | JSX.Element)[],
sep: string | JSX.Element = ", ", sep: string | JSX.Element = ", ",
sep2: string | JSX.Element = " and ",
lastSep: string | JSX.Element = " and ", lastSep: string | JSX.Element = " and ",
): JSX.Element[] { ): JSX.Element[] {
return arr.map((elem, idx) => return arr.map((elem, idx) => {
<Fragment key={idx}> let separator = sep
if (idx === arr.length - 2) {
separator = (arr.length === 2) ? sep2 : lastSep
}
return <Fragment key={idx}>
{elem} {elem}
{idx < arr.length - 1 ? (idx === arr.length - 2 ? lastSep : sep) : null} {idx < arr.length - 1 ? separator : null}
</Fragment>) </Fragment>
})
} }
export const joinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, " ", " ") export const oxfordHumanJoinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, ", ", " and ", ", and ")
export const joinReact = (arr: (string | JSX.Element)[]) => humanJoinReact(arr, " ", " ", " ")