Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

References updates #12

Merged
merged 13 commits into from
Apr 4, 2022
Next Next commit
Make references self-numbering based on rendered order
katamartin committed Mar 23, 2022
commit ad2ed9fa6c2cea3e40a540677c365e2e8f37cb52
27 changes: 11 additions & 16 deletions src/cite.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Box } from 'theme-ui'
import { useState } from 'react'
import { useReferences } from './references'
import { useReference, useReferences } from './references'

const Wrapper = ({ url, children, sx }) => {
if (url) {
@@ -20,12 +20,10 @@ const Wrapper = ({ url, children, sx }) => {
}

const CiteInner = ({ id, data, hide = false, sx, sxReference, sxLabel }) => {
const { references, color } = useReferences()
if (!Object.keys(references).includes(id)) {
throw Error(`referencee ${id} not found`)
}
data = references[id] || data
data.offset = data.offset || 0
const { reference, number, color } = useReference(id)
const { url, note, authors, year, title, journal, editors } =
reference || data

const [selected, setSelected] = useState(false)
const [selectedMobile, setSelectedMobile] = useState(false)

@@ -57,10 +55,10 @@ const CiteInner = ({ id, data, hide = false, sx, sxReference, sxLabel }) => {
...sxLabel,
}}
>
<sup>{data.number}</sup>
<sup>{number}</sup>
</Box>
<Wrapper
url={data.url}
url={url}
sx={{
float: ['none', 'none', 'right', 'right'],
clear: ['none', 'none', 'right', 'right'],
@@ -118,7 +116,7 @@ const CiteInner = ({ id, data, hide = false, sx, sxReference, sxLabel }) => {
display: ['none', 'none', 'initial'],
}}
>
{data.number}
{number}
</Box>
<Box
as='span'
@@ -130,10 +128,9 @@ const CiteInner = ({ id, data, hide = false, sx, sxReference, sxLabel }) => {
letterSpacing: '0.0125em',
}}
>
{data.note}
{data.authors} {data.year ? `(${data.year})` : ''} {data.title}{' '}
<i>{data.journal}</i>{' '}
{data.editors ? `edited by ${data.editors}` : ''}
{note}
{authors} {year ? `(${year})` : ''} {title} <i>{journal}</i>{' '}
{editors ? `edited by ${editors}` : ''}
</Box>
</Box>
</Box>
@@ -162,8 +159,6 @@ const CiteSeparator = ({ sep = ',' }) => {
}

const Cite = ({ id, ids, ...props }) => {
const { references, color } = useReferences()

if (!id && !ids) {
throw Error('either id or ids must be specified')
}
31 changes: 24 additions & 7 deletions src/references.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,36 @@
import React, { createContext, useContext } from 'react'
import React, { createContext, useCallback, useContext, useRef } from 'react'

const References = createContext(null)

export const useReferences = () => {
return useContext(References)
}

export const ReferencesProvider = ({ references, color, children }) => {
if (references) {
Object.keys(references).map((d, i) => {
references[d] = { ...references[d], number: i + 1 }
})
export const useReference = (id) => {
const { references, color, getNumber } = useContext(References)
const reference = references[id]
if (!reference) {
throw Error(`referencee ${id} not found`)
}

return { reference, number: getNumber(id), color }
}

export const ReferencesProvider = ({ references, color, children }) => {
const { current: numbers } = useRef({})

const getNumber = useCallback(
(id) => {
if (!numbers[id]) {
numbers[id] = Object.keys(numbers).length + 1
}
return numbers[id]
},
[numbers]
)

return (
<References.Provider value={{ references: references, color: color }}>
<References.Provider value={{ references, color, numbers, getNumber }}>
{children}
</References.Provider>
)