react-icons/bs#BsCheckCircle JavaScript Examples
The following examples show how to use
react-icons/bs#BsCheckCircle.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: MobileLineageTree.jsx From covince with MIT License | 4 votes |
|
MobileLineageTree = (props) => {
const {
darkMode,
info,
initialValues,
lineageTree,
// nextColourIndex,
onClose
} = props
const [tempValues, setTempValues] = React.useState(initialValues)
const [, updateQuery] = useQueryAsState()
const numberSelected = React.useMemo(() => Object.keys(tempValues).length, [tempValues])
const submit = React.useCallback((lineages, queryUpdate) => {
updateQuery(queryUpdate)
setTempValues(lineages)
}, [tempValues])
const nextColourIndex = React.useMemo(() =>
getNextColourIndex(tempValues, lineageTree.colourPalette)
, [tempValues])
return (
<>
{ <lineageTree.TreeComponent
className='flex-grow px-3'
lineageToColourIndex={tempValues}
submit={submit}
maxLineages={info.maxLineages}
nextColourIndex={nextColourIndex}
{...lineageTree}
darkMode={darkMode}
isMobile
numberSelected={numberSelected}
action={
<div className='space-x-3 flex items-center'>
<LineageLimit
className='text-base my-2.5'
numberSelected={numberSelected}
maxLineages={info.maxLineages}
/>
<Menu as='div' className='relative z-10'>
<Menu.Button as={Button} className='!p-2'>
<BsThreeDotsVertical className='w-6 h-6' />
</Menu.Button>
{/* Use the Transition component. */}
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items
className={`
w-48
absolute z-20 top-full right-0 mt-2 origin-top-right
bg-white rounded-md shadow-xl ring-1 ring-black ring-opacity-5
divide-y divide-gray-200 focus:outline-none
dark:bg-gray-600 dark:text-white dark:ring-gray-500 dark:divide-gray-500
`}
>
<div className='py-1'>
{lineagePresets.map(({ value, label }) => (
<Menu.Item key={value}>
<button
className={classNames(
'px-4 py-2 whitespace-nowrap w-full text-right flex items-center justify-end',
'no-webkit-tap focus:outline-none active:bg-gray-100 dark:active:bg-gray-700',
{ 'font-bold': value === lineageTree.preset }
)}
onClick={() => lineageTree.setPreset(value)}
>
{ value === lineageTree.preset &&
<BsCheckCircle className='flex-shrink-0 fill-current text-primary w-5 h-5 mr-2' /> }
{label}
</button>
</Menu.Item>
))}
</div>
<div className='py-1'>
<Menu.Item>
<button
className={`
px-4 py-2 whitespace-nowrap w-full text-right
no-webkit-tap focus:outline-none active:bg-gray-100 dark:active:bg-gray-700
`}
onClick={() => setTempValues({})}
>
Clear selection
</button>
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div>
}
/> }
<footer className='absolute bottom-4 right-3'>
<PrimaryPillButton className='shadow-lg' onClick={() => onClose(tempValues)}>Continue</PrimaryPillButton>
</footer>
</>
)
}
Example #2
| Source File: MutationsList.jsx From covince with MIT License | 4 votes |
|
MutationsList = props => {
const {
api_url,
dates,
filter,
gene,
isLarge,
lineagesForApi,
pangoClade,
queryParams,
selected,
selectMutation
} = props
const [state, actions] = useMutationsList(api_url, queryParams, pangoClade, lineagesForApi, gene, filter, dates)
const [listSize, setListSize] = useState({ width: 0, height: 0 })
const hasNextPage = state.rows.length < state.total
const itemCount = hasNextPage ? state.rows.length + 1 : state.rows.length
const isItemLoaded = index => !hasNextPage || index < state.rows.length
const loaderRef = useRef()
const showFrequency = useMemo(() => {
return !!state.denominator
}, [state.denominator])
useEffect(() => {
if (state.loading === 'LIST' && loaderRef.current) {
loaderRef.current._listRef.scrollTo(0)
}
}, [state.loading])
return (
<div className='flex-grow flex flex-col bg-white dark:bg-gray-700'>
<div className='flex border-b border-solid dark:border-gray-500'>
<div className='flex flex-grow space-x-4 lg:space-x-6 px-4 lg:px-6'>
<TableHeader
key='not-searching'
className='mr-auto'
sorted={state.sortColumn === 'name'}
onClick={() => actions.sortBy('name')}
>
<span className={classNames({ 'mr-1': state.sortColumn !== 'name' })}>Mutation</span>
{state.sortColumn === 'name' && <TableSort active ascending={state.sortAscending} /> }
</TableHeader>
<TableHeader
sorted={state.sortColumn === 'prop'}
className='w-1/4'
align='right'
onClick={() => actions.sortBy('prop')}
>
<TableSort active={state.sortColumn === 'prop'} ascending={state.sortAscending} />
<span className='whitespace-nowrap'>
Proportion
</span>
</TableHeader>
<TableHeader
sorted={state.sortColumn === 'change'}
className='w-1/4 lg:w-1/5'
align='right'
onClick={() => actions.sortBy('change')}
>
<TableSort active={state.sortColumn === 'change'} ascending={state.sortAscending} />
<span>
{/* Growth */}
Recent<br/> Change
</span>
</TableHeader>
</div>
<div>
<div className='overflow-y-scroll heron-styled-scrollbars opacity-0' />
</div>
</div>
<Measure
bounds
onResize={rect => {
setListSize({
width: rect.bounds.width,
height: rect.bounds.height
})
}}
>
{({ measureRef }) => (
<div ref={measureRef} className='flex-grow relative'>
<div className='absolute w-full' style={{ height: listSize.height }}>
<InfiniteLoader
ref={loaderRef}
isItemLoaded={isItemLoaded}
itemCount={itemCount}
loadMoreItems={actions.loadMoreItems}
threshold={state.rows.length ? 0 : undefined}
>
{({ onItemsRendered, ref }) => (
<List
className='!overflow-y-scroll heron-styled-scrollbars'
height={listSize.height}
itemCount={itemCount}
itemSize={36}
onItemsRendered={onItemsRendered}
ref={ref}
width={listSize.width}
>
{({ index, style }) => {
if (index < state.rows.length) {
const row = state.rows[index]
const isSelected = selected.includes(row.mutation)
// const previous = state.rows[index - 1]
return (
<div
style={style}
className={classNames(
'px-4 space-x-4 lg:px-6 lg:space-x-6 flex items-baseline cursor-pointer text-sm leading-9 big:text-base big:leading-9 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-sm',
{ 'font-bold': isSelected }
)}
onClick={() => selectMutation(row.mutation)}
>
{ row &&
<>
<span className='flex-grow flex items-baseline'>
<span>{row.mutation}</span>
{ isSelected && <BsCheckCircle className='flex-shrink-0 fill-current text-primary w-4 h-4 ml-2 self-center' /> }
</span>
<span className='w-1/4 text-right whitespace-nowrap' title={!isLarge && `${row.count.toLocaleString()} sample${row.count === 1 ? '' : 's'}`}>
{ isLarge && <span className='text-subheading'>{row.count.toLocaleString()}<span className='mx-2'>/</span></span> }
{showFrequency ? `${formatFrequency(row.count / state.denominator)}%` : ''}
</span>
<span className='w-1/4 lg:w-1/5 text-right whitespace-nowrap'>
{`${formatFrequency(row.growth)}%`}
</span>
</> }
</div>
)
}
if (state.rows.length > 0 && hasNextPage) {
return (
<div style={style} className='grid place-items-center'>
<Spinner className='block h-5 w-5 text-gray-600 dark:text-gray-300' />
</div>
)
}
return null
}}
</List>
)}
</InfiniteLoader>
</div>
<FadeTransition in={state.loading === 'LIST'}>
<div className='absolute inset-0 z-10 flex justify-center items-center bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50'>
<Spinner className='block h-6 w-6 text-gray-600 dark:text-gray-300' />
</div>
</FadeTransition>
</div>
)}
</Measure>
</div>
)
}
