196 lines
5.5 KiB
JavaScript
196 lines
5.5 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
import TagColorPreview from './tagColorPreview'
|
|
import romanize from '../modules/romanize'
|
|
import helpers from '../modules/helpers'
|
|
|
|
export const ReaderEditButton = ({onClick}) =>
|
|
<div className='edit_note_button'>
|
|
<button onClick={onClick} className='btn btn-outline-primary btn-sm'>
|
|
Edit
|
|
<i className='fa fa_inline fa-edit'></i>
|
|
</button>
|
|
</div>
|
|
|
|
export const ReaderAnnotateButton = ({onClick}) =>
|
|
<div className='annotate_note_button'>
|
|
<button onClick={onClick} className='btn btn-outline-primary btn-sm'>
|
|
Annotate
|
|
<i className='fa fa_inline fa-link'></i>
|
|
</button>
|
|
</div>
|
|
|
|
export const ChapterButton = ({chapter, currentChapter, onClick}) =>
|
|
<div className ='chapter_button text-center'>
|
|
<button onClick={onClick} className={currentChapter.id === chapter.id ? 'btn btn-dark btn-lg active_button' : 'btn btn-outline-dark btn-lg inactive_button'}>
|
|
{romanize(chapter.number)}. {chapter.title}
|
|
</button>
|
|
</div>
|
|
|
|
export const NoteButton = ({note, currentNote, onClick}) =>
|
|
<div className ='note_button'>
|
|
<button onClick={onClick} className={currentNote.id === note.id ? 'btn btn-info' : 'btn btn-outline-info inactive_button'}>
|
|
{note.title}
|
|
</button>
|
|
</div>
|
|
|
|
export const TagButton = ({tag, currentTag, onClick}) =>
|
|
<div className ='tag_button'>
|
|
<button onClick={onClick} className={currentTag.id === tag.id ? 'btn btn-info' : 'btn btn-outline-info inactive_button'}>
|
|
<TagColorPreview color={tag.color}/>
|
|
{tag.title}
|
|
</button>
|
|
</div>
|
|
|
|
export const HighlightButton = ({toggle, onClick, size='lg'}) =>
|
|
<div>
|
|
<div id='highlight_button' className='text-center'>
|
|
<button onClick={onClick} className={toggle ? 'btn btn-primary btn-' + size : 'btn btn-outline-primary btn-' + size}>
|
|
{toggle ? 'Hide Notes' : 'Highlight Notes'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
export const SearchButton = ({input, onClick}) =>
|
|
<div>
|
|
<div id='search_button' className='text-center'>
|
|
<button className='btn btn-primary btn-sm' onClick={()=>onClick(input)}>
|
|
Search <i className='fa fa_inline fa-search'></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
export const NewChapterButton = ({onClick}) =>
|
|
<div>
|
|
<div id='new_chapter_button' className='text-center'>
|
|
<button onClick={onClick} className='btn btn-outline-success btn-lg'>
|
|
New Chapter <i className='fa fa_inline fa-plus-square-o'></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
export const NewDocumentButton = ({onClick, docType}) =>
|
|
<div>
|
|
<div id='new_document_button' className='text-center'>
|
|
<button onClick={onClick} className='btn btn-outline-success btn-sm'>
|
|
New {helpers.docTypeName(docType)}
|
|
<i className='fa fa_inline fa-plus-square-o'></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
// Fairly abstracted
|
|
|
|
export const AnnotatorNewButton = ({onClick, disabled}) =>
|
|
<button type='button' onClick={onClick} disabled={disabled} className='btn btn-info btn-sm' data-toggle='modal' data-target='#annotate_modal'>
|
|
New Annotation
|
|
<i className='fa fa_inline fa-link'></i>
|
|
</button>
|
|
|
|
export const AnnotatorRemoveButton = ({onClick, disabled}) =>
|
|
<button type='button' onClick={onClick} disabled={disabled} className='btn btn-secondary btn-sm'>
|
|
Remove Annotation
|
|
<i className='fa fa_inline fa-unlink'></i>
|
|
</button>
|
|
|
|
export const EditorToolButton = ({glyph, onClick}) =>
|
|
<button type='button' onClick={onClick} className='btn btn-info btn-sm'>
|
|
<i className={'fa fa-' + glyph}></i>
|
|
</button>
|
|
|
|
|
|
export const EditorDeleteToolButton = ({disabled}) =>
|
|
<button className='btn btn-info btn-sm' disabled={disabled} data-toggle='modal' data-target='#delete_confirm_modal' type='button'>
|
|
Delete
|
|
<i className='fa fa_inline fa-trash-o'></i>
|
|
</button>
|
|
|
|
export const EditorCancelButton = ({onClick}) =>
|
|
<button type='button' onClick={onClick} className='btn btn-outline-secondary btn-sm' data-dismiss='modal'>
|
|
Cancel
|
|
<i className='fa fa_inline fa-times'></i>
|
|
</button>
|
|
|
|
export const EditorSubmitButton = ({onClick}) =>
|
|
<button id='editor_submit' onClick={onClick} type='button' className='btn btn-outline-success btn-sm'>
|
|
Submit
|
|
<i className='fa fa_inline fa-check-square-o'></i>
|
|
</button>
|
|
|
|
export const EditorDeleteButton = ({onClick}) =>
|
|
<button id='editor_delete' onClick={onClick} type='button' data-dismiss='modal' className='btn btn-outline-danger btn-sm'>
|
|
Delete
|
|
<i className='fa fa_inline fa-trash-o'></i>
|
|
</button>
|
|
|
|
ReaderEditButton.propTypes = {
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
ReaderAnnotateButton.propTypes = {
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
ChapterButton.propTypes = {
|
|
chapters: PropTypes.arrayOf(PropTypes.object),
|
|
currentChapter: PropTypes.object,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
NoteButton.propTypes = {
|
|
notes: PropTypes.arrayOf(PropTypes.object),
|
|
currentNotes: PropTypes.object,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
HighlightButton.propTypes = {
|
|
toggle: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
SearchButton.propTypes = {
|
|
searchInput: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
NewChapterButton.propTypes = {
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
NewDocumentButton.propTypes = {
|
|
docType: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
AnnotatorNewButton.propTypes = {
|
|
disabled: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
AnnotatorRemoveButton.propTypes = {
|
|
disabled: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
EditorToolButton.propTypes = {
|
|
glyph: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
EditorDeleteToolButton.propTypes = {
|
|
disabled: PropTypes.bool,
|
|
}
|
|
|
|
EditorCancelButton.propTypes = {
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
EditorSubmitButton.propTypes = {
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
EditorDeleteButton.propTypes = {
|
|
onClick: PropTypes.func,
|
|
} |