@expo/vector-icons#SimpleLineIcons JavaScript Examples
The following examples show how to use
@expo/vector-icons#SimpleLineIcons.
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: styles.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
Icon = styled(SimpleLineIcons)`
font-size: 25px;
color: #24292e;
position: absolute;
left: 6px;
top: 2px;
z-index: 5;
`
Example #2
| Source File: Review.js From juken with MIT License | 4 votes |
|
Review = ({ demo = false, stopDemo } = {}) => {
const [ srsStages, setSrsStages ] = useState({});
const [ menuOpen, setMenuOpen ] = useState(false);
// only ask unfinished reviews
const [ wrapUpMode, setWrapUpMode ] = useState(false);
const logout = useStoreActions(actions => actions.session.logout);
const submitReview = useStoreActions(actions => actions.reviews.submitReview);
const retrySubmission = useStoreActions(actions => actions.reviews.retrySubmission);
const ignoreSubmissionErrors = useStoreActions(actions => actions.reviews.ignoreSubmissionErrors);
const submissionQueue = useStoreState(state => state.reviews.submissionQueue);
const submissionErrors = useStoreState(state => state.reviews.submissionErrors);
const userSettings = useStoreState(state => state.session.userSettings);
// Allow answering without revealing
const skipMode = _.get(userSettings, SKIP_MODE);
// Tap anywhere on the card to reveal
const quickMode = _.get(userSettings, QUICK_MODE);
const colorScheme = useColorScheme();
const iconcolor = colorScheme === 'light' ? "black":"white";
useScrollLock();
useLeaveWarning();
// load reviews
const {
loadReviews,
loadingReviews,
reviews,
subjects,
} = useLoadReviews(demo);
// manage review session
const {
queue,
submitAnswer,
subjectsDict,
totalCards,
totalReviews,
stats,
unfinishedReviews,
} = useReviewSession(
reviews,
subjects,
);
// TODO: refactor
const queueFiltered = useMemo(() => (
// wrap up mode filter
queue.filter(i => wrapUpMode
? !_.isNil(_.get(unfinishedReviews, i.review.id))
: true
)
), [
queue,
wrapUpMode,
])
// are all queue items asked
const isQueueClear = !loadingReviews && queueFiltered.length === 0;
return (
<>
{/** subject details modal
<SubjectDetailsModal
visible={true}
close={() => {}}
/>
*/}
{/** display srs stages toasts */}
<SrsStages stages={srsStages} />
{loadingReviews && (
<Overlay>
<Message loading />
</Overlay>
)}
<Page
style={[
styles.page,
colorScheme === 'light' ? null: styles.page_dark,
isQueueClear && (colorScheme === 'light' && isQueueClear ? styles.pageNoReviews : styles.pageNoReviews_dark)
]}
>
<View style={styles.deckWrapper}>
{/** top bar */}
<ReviewTopBar
demo={demo}
logout={logout}
stopDemo={stopDemo}
submissionQueue={submissionQueue}
submissionErrors={submissionErrors}
ignoreSubmissionErrors={ignoreSubmissionErrors}
retrySubmission={retrySubmission}
isQueueClear={isQueueClear}
setMenuOpen={setMenuOpen}
/>
{/** menu */}
<ReviewMenu
menuOpen={menuOpen}
setMenuOpen={setMenuOpen}
demo={demo}
logout={logout}
stopDemo={stopDemo}
loadReviews={loadReviews}
wrapUpMode={wrapUpMode}
setWrapUpMode={setWrapUpMode}
/>
{/* render deck */}
{queueFiltered.length > 0 && (
<Deck
style={styles.deck}
cards={queueFiltered}
allowSkipping={skipMode}
dismissCard={direction => {
submitAnswer(
// item that was submitted: the top item
// of the processed queue list
queueFiltered[0],
// right direction means correct answer
direction === 'right',
// callback for when the submit answer causes
// the review to be completed
res => {
const {
review,
incorrectMeanings,
incorrectReadings,
} = res;
// review was correct when there are
// no incorrect readings or meanings
const isCorrect = (
!incorrectMeanings &&
!incorrectReadings
);
// increase srs stage if the answer was correct
if (isCorrect) {
const currentStage = _.get(review, 'data.srs_stage');
setSrsStages({ current: currentStage, next: currentStage + 1 })
}
// submit review
submitReview({
demo,
subjectId: _.get(review, 'data.subject_id'),
reviewId: review.id,
incorrectMeanings,
incorrectReadings,
});
}
);
}}
renderCard={(item, props) => {
// empty cards
if (!item) return <Card empty />
const { id, review, reviewType } = item;
const subjectId = _.get(review, 'data.subject_id');
const subject = _.get(subjectsDict, subjectId);
const subjectType = _.get(subject, 'object');
const meaningMnemonic = _.get(subject, 'data.meaning_mnemonic');
const readingMnemonic = _.get(subject, 'data.reading_mnemonic');
const {
question,
questionComponent,
answer,
} = extractSubject(subject, reviewType);
return (
<Card
key={`${id}_${reviewType}`}
deckProps={props}
subjectType={subjectType}
reviewType={reviewType}
reviewQuestion={question}
reviewQuestionComponent={questionComponent}
reviewAnswer={answer}
meaningMnemonic={meaningMnemonic}
readingMnemonic={readingMnemonic}
quickMode={quickMode}
/>
)
}}
/>
)}
{/* no reviews notice */}
{isQueueClear && (
<View style={styles.noReviewsContainer}>
<AntDesign name="smileo" size={32} color={theme.palette.white} />
{!wrapUpMode && <Text style={styles.noReviewsText}>Review queue clear!</Text>}
{wrapUpMode && <Text style={styles.noReviewsText}>Wrap-up queue clear!</Text>}
{wrapUpMode && (
<Text style={styles.noReviewsDesc}>
You can now end your review session
</Text>
)}
</View>
)}
{/* stats */}
{totalReviews > 0 && (
<View style={[ styles.box, colorScheme === "light" ? null :styles.box_dark, styles.bars ]}>
{/* review bar */}
<View style={styles.barWrapper}>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, styles.barTextLabel, { marginRight: 8 } ]}>Reviews</Text>
<Bar
style={[styles.bar, colorScheme === "light" ? null : styles.bar_dark]}
values={[ _.get(stats, 'reviews.incorrectPercent', 0), _.get(stats, 'reviews.correctPercent', 0) ]}
colors={colorScheme === "light" ? [ theme.palette.red, theme.palette.green] : [ theme.palette_dark.red, theme.palette_dark.green]}
/>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, { marginLeft: 8 } ]}>{_.get(stats, 'reviews.completed')}</Text>
{_.get(stats, 'reviews.unfinished') > 0 && (
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, styles.barTextOpac, { fontSize: 8, marginTop: -12 } ]}>{_.get(stats, 'reviews.unfinished')}</Text>
)}
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, styles.barTextOpac, { marginLeft: 4, marginRight: 4 } ]}>of</Text>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark ]}>{totalReviews}</Text>
</View>
{/* card bar */}
<View style={[ styles.barWrapper, { marginTop: 4 } ]}>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, styles.barTextLabel, { marginRight: 8 } ]}>Cards</Text>
<Bar
style={[styles.bar,colorScheme === "light" ? null : styles.bar_dark]}
values={[ _.get(stats, 'cards.incorrectPercent', 0), _.get(stats, 'cards.correctPercent', 0) ]}
colors={colorScheme === "light" ? [ theme.palette.red, theme.palette.green] : [ theme.palette_dark.red, theme.palette_dark.green]}
/>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, { marginLeft: 8 } ]}>{_.get(stats, 'cards.completed')}</Text>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark, styles.barTextOpac, { marginLeft: 4, marginRight: 4 } ]}>of</Text>
<Text style={[ styles.barText, colorScheme === "light" ? null : styles.barTextDark ]}>{totalCards}</Text>
</View>
</View>
)}
{/* controls */}
{isQueueClear && (
<>
<View style={{ height: 6 }} />
{wrapUpMode && (
<Button
text="Disable Wrap-up Mode"
style={{ marginTop: 8 }}
iconLeft={<SimpleLineIcons name="clock" size={18} color={iconcolor} />}
onPress={() => setWrapUpMode(false)}
/>
)}
{!wrapUpMode && (
<Button
text="Refresh"
style={{ marginTop: 8 }}
iconLeft={<SimpleLineIcons name="refresh" size={18} color={iconcolor} />}
onPress={() => loadReviews()}
/>
)}
<Button
text="Logout"
style={{ marginTop: 8, backgroundColor: 'transparent' }}
textStyle={{ color: theme.palette.white }}
onPress={() => {
if (demo) stopDemo()
else logout();
}}
/>
</>
)}
</View>
</Page>
</>
)}
Example #3
| Source File: ReviewMenu.js From juken with MIT License | 4 votes |
|
ReviewMenu = ({
demo,
logout,
stopDemo,
loadReviews,
menuOpen,
setMenuOpen,
wrapUpMode,
setWrapUpMode,
}) => {
const colorScheme = useColorScheme();
const iconcolor = colorScheme === 'light' ? "black":"white";
const saveSetting = useStoreActions(actions => actions.session.saveSetting);
const userSettings = useStoreState(state => state.session.userSettings);
const skipMode = _.get(userSettings, SKIP_MODE);
const quickMode = _.get(userSettings, QUICK_MODE);
const darkMode = _.get(userSettings, DARK_MODE);
const backToBackMode = _.get(userSettings, BACK_TO_BACK_MODE);
const meaningFirst = _.get(userSettings, MEANING_FIRST);
const reviewOrder = _.get(userSettings, REVIEW_ORDER, RANDOM_ORDER);
return (
<Modal
visible={menuOpen}
close={() => setMenuOpen(false)}
>
<List
lists={[
{
title: 'Review',
items: [
{
id: 'ses-refresh',
title: 'Refresh',
leftIcon: <SimpleLineIcons name="refresh" size={18} color={iconcolor} />,
onPress: () => {
dialog({
webTitle: 'Half completed reviews will be lost. Are you sure ?',
mobileTitle: 'Are you sure ?',
mobileMessage: 'Half completed reviews will be lost',
onConfirm: () => {
setMenuOpen(false);
setTimeout(() => {
loadReviews();
}, DURATION_SAFE);
}
});
},
},
{
id: 'ses-wrap',
title: 'Wrap-Up Mode',
subtitle: 'Ask only reviews with unfinished pairs',
leftIcon: <SimpleLineIcons name="clock" size={18} color={iconcolor} />,
switch: {
value: wrapUpMode,
onValueChange: () => {
setWrapUpMode(!wrapUpMode);
setMenuOpen(false);
},
}
},
{
id: 'ses-quick',
title: 'Quick Reveal',
subtitle: 'Reveal by tapping anywhere on the card',
leftIcon: <SimpleLineIcons name="energy" size={18} color={iconcolor} />,
switch: {
value: quickMode,
onValueChange: () => {
saveSetting({ key: QUICK_MODE, value: !quickMode });
},
}
},
{
id: 'ses-skip',
title: 'Answer Without Revealing',
subtitle: 'Allows you to answer without revealing. Use wisely!',
leftIcon: <SimpleLineIcons name="control-forward" size={18} color={iconcolor} />,
switch: {
value: skipMode,
onValueChange: () => {
saveSetting({ key: SKIP_MODE, value: !skipMode });
},
}
},
{
id: 'ses-back-to-back',
title: 'Back To Back',
subtitle: 'Reorder cards so reading and meaning are back-to-back',
leftIcon: <SimpleLineIcons name="layers" size={18} color={iconcolor} />,
switch: {
value: backToBackMode,
onValueChange: () => {
saveSetting({ key: BACK_TO_BACK_MODE, value: !backToBackMode });
},
}
},
{
id: 'ses-meaning-first',
title: 'Meaning First',
subtitle: 'Show meaning first when back-to-back is enabled',
leftIcon: <SimpleLineIcons name="direction" size={18} color={iconcolor} />,
switch: {
value: meaningFirst,
onValueChange: () => {
saveSetting({ key: MEANING_FIRST, value: !meaningFirst });
},
}
},
{
id: 'ses-review-order',
title: 'Review Order',
leftIcon: <SimpleLineIcons name="shuffle" size={18} color={iconcolor} />,
picker: {
onValueChange: (value) => {
saveSetting({ key: REVIEW_ORDER, value: value });
},
placeholder: {},
value: reviewOrder,
items:
[
{ value: RANDOM_ORDER, label: "Random Order" },
{ value: LOWEST_LEVEL_FIRST, label: "Lowest Level First" },
{ value: CURRENT_LEVEL_FIRST, label: "Current Level First" },
{ value: ASCENDING_SRS_STAGE, label: "Ascending SRS Stage" },
{ value: DESCENDING_SRS_STAGE, label: "Descending SRS Stage" },
],
},
},
{
id: 'ses-dark',
title: 'Dark Mode',
subtitle: isWeb() ? null : (darkMode
? 'Disable to use system default'
: null
),
leftIcon: <SimpleLineIcons name="bulb" size={18} color={iconcolor} />,
switch: {
value: darkMode,
onValueChange: () => {
saveSetting({ key: DARK_MODE, value: !darkMode });
},
}
}
],
},
{
title: 'General',
items: [
/*
{
id: 'gen-settings',
title: 'Settings',
leftIcon: <SimpleLineIcons name="settings" size={18} color="black" />,
onPress: () => {},
chevron: true,
},
*/
{
id: 'gen-fb',
title: 'Feedback',
leftIcon: <SimpleLineIcons name="bubble" size={18} color={iconcolor} />,
onPress: async () => {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
},
},
{
id: 'gen-bugs',
title: 'Report Issues',
leftIcon: <SimpleLineIcons name="ghost" size={18} color={iconcolor} />,
onPress: async () => {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
},
},
{
id: 'gen-code',
title: 'Source Code',
leftIcon: <SimpleLineIcons name="social-github" size={18} color={iconcolor} />,
onPress: async () => {
await WebBrowser.openBrowserAsync('https://github.com/oguzgelal/juken')
},
},
{
id: 'gen-logout',
title: 'Log Out',
leftIcon: <SimpleLineIcons name="logout" size={18} color="red" />,
onPress: () => {
setMenuOpen(false);
if (demo) stopDemo();
else logout();
},
}
]
}
]}
/>
<View style={{ height: 32 }} />
</Modal>
)
}
