57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { SNNote } from '@standardnotes/snjs'
|
|
import React, { useContext } from 'react'
|
|
import { ThemeContext } from 'styled-components'
|
|
import styled from 'styled-components/native'
|
|
|
|
type NoteFlag = {
|
|
text: string
|
|
color: string
|
|
}
|
|
|
|
const FlagsContainer = styled.View`
|
|
flex-direction: row;
|
|
margin-bottom: 8px;
|
|
`
|
|
const FlagContainer = styled.View<{ color: string; selected: boolean }>`
|
|
background-color: ${({ theme, selected, color }) => {
|
|
return selected ? theme.stylekitInfoContrastColor : color
|
|
}};
|
|
padding: 4px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
border-radius: 3px;
|
|
margin-right: 4px;
|
|
`
|
|
const FlagLabel = styled.Text<{ selected: boolean }>`
|
|
color: ${({ theme, selected }) => {
|
|
return selected ? theme.stylekitInfoColor : theme.stylekitInfoContrastColor
|
|
}};
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
`
|
|
|
|
export const NoteCellFlags = ({ note, highlight }: { note: SNNote; highlight: boolean }) => {
|
|
const theme = useContext(ThemeContext)
|
|
|
|
const flags: NoteFlag[] = []
|
|
|
|
if (note.conflictOf) {
|
|
flags.push({
|
|
text: 'Conflicted Copy',
|
|
color: theme.stylekitDangerColor,
|
|
})
|
|
}
|
|
|
|
return flags.length > 0 ? (
|
|
<FlagsContainer>
|
|
{flags.map((flag) => (
|
|
<FlagContainer key={flag.text.concat(flag.color)} color={flag.color} selected={highlight}>
|
|
<FlagLabel selected={highlight}>{flag.text}</FlagLabel>
|
|
</FlagContainer>
|
|
))}
|
|
</FlagsContainer>
|
|
) : (
|
|
<></>
|
|
)
|
|
}
|