@material-ui/core#ExpansionPanel TypeScript Examples
The following examples show how to use
@material-ui/core#ExpansionPanel.
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: CreateRoom.tsx From cards-against-formality-pwa with BSD 2-Clause "Simplified" License | 5 votes |
|
function DeckSelector({ decks, onChange }: { decks: any[], onChange: (decks: string[]) => void }) {
const [deckOptions, setDeckOptions] = useState<{ name: string; _id: string, value?: boolean }[]>([]);
const [isExpanded, setIsExpanded] = useState(false);
const [isAllSelected, setIsAllSelected] = useState(false);
const toggleSelectAll = useCallback(() => {
setDeckOptions(prevDeck => {
prevDeck.forEach(deck => deck.value = !isAllSelected);
return [...prevDeck];
});
setIsAllSelected(!isAllSelected);
}, [isAllSelected])
useEffect(() => {
if (decks) {
setDeckOptions(decks.map(deck => {
return { value: deck.name.includes('Base'), ...deck }
}));
}
}, [decks]);
useEffect(() => {
onChange(deckOptions.filter(deck => deck.value).map(deck => deck._id));
}, [deckOptions, onChange]);
function _onChange(e: React.ChangeEvent<HTMLInputElement>) {
setDeckOptions(prevDeck => {
const deck = prevDeck.find(deck => deck._id === e.target.name);
if (deck) {
deck.value = e.target.checked;
}
return [...prevDeck];
});
}
if (!decks?.length) {
return null;
}
return <ExpansionPanel expanded={isExpanded} onChange={() => { setIsExpanded(prev => !prev) }}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography>Available Decks!</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<FormControl required component="fieldset" error={!deckOptions.some(deck => deck.value)}>
<FormControlLabel
control={<Checkbox checked={isAllSelected} onChange={toggleSelectAll} name="Select all" />}
label="Select all"
/>
<Divider />
<FormLabel component="legend">Select which decks you would like to play with</FormLabel>
<FormGroup className="deck-checkbox-group">
{deckOptions.map(deck => {
return <FormControlLabel
key={deck._id}
control={<Checkbox checked={deck.value} onChange={_onChange} name={deck._id} />}
label={deck.name}
/>
})}
</FormGroup>
<FormHelperText>You must select at least one</FormHelperText>
</FormControl>
</ExpansionPanelDetails>
</ExpansionPanel>
}
Example #2
| Source File: RiskCriteria.tsx From listo with MIT License | 5 votes |
|
RiskCriteria = ({
text,
options,
handleRiskOption,
description,
}: Props) => {
const classes = useStyles({});
if (!options) {
// TODO: this should be moved to pre-validation
return null;
}
const selectedOption = options.find(o => o.selected);
const value = selectedOption ? selectedOption.text : UNSELECTED_KEY;
const ExpansionPanelDetails = withStyles(theme => ({
root: {
padding: theme.spacing(2),
backgroundColor: '#f5f9fe',
},
}))(MuiExpansionPanelDetails);
return (
<React.Fragment>
<Paper className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
>
<Typography>{text}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>{description}</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
<Grid item xs={12}>
<FormControl>
<RadioGroup onChange={handleRiskOption} value={value}>
{options.map(option => (
<FormControlLabel
key={option.text}
value={option.text}
control={<Radio />}
label={option.text}
/>
))}
<FormControlLabel
value={UNSELECTED_KEY}
control={<Radio />}
style={{ display: 'none' }}
label="Hidden"
/>
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
</React.Fragment>
);
}
Example #3
| Source File: index.tsx From Demae with MIT License | 4 votes |
|
ShippingAddresses = ({ user }: { user: Commerce.User }) => {
const [shippingAddresses, isLoading] = useUserShippingAddresses()
const history = useHistory()
const [showDialog, close] = useDialog()
if (isLoading) {
return (
<Paper>
<DataLoading />
</Paper>
)
}
return (
<Paper>
<AppBar position="static" color="transparent" elevation={0}>
<Toolbar>
<Typography variant="h6">
Shippingg Addresses
</Typography>
</Toolbar>
</AppBar>
{
shippingAddresses.map(shipping => {
return (
<ExpansionPanel key={shipping.id} >
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<FormControlLabel
onClick={async (event) => {
event.stopPropagation()
user.defaultShipping = shipping
await user.save()
}}
onFocus={(event) => event.stopPropagation()}
control={<Checkbox checked={user.defaultShipping?.id === shipping.id} />}
label={
<Typography>{shipping.format(["postal_code", "line1"])}</Typography>
}
/>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
{shipping.formatted()}
</Typography>
</ExpansionPanelDetails>
<Divider />
<ExpansionPanelActions>
<Button size="small" onClick={async () => {
showDialog("Delete", "Do you want to remove it?", [
{
title: "Cancel",
handler: close
},
{
title: "OK",
handler: async () => {
if (user?.defaultShipping?.id === shipping.id) {
showDialog("Selected shipping address", "This shipping address is currently selected. To delete this shipping address, please select another shipping address first.",
[
{
title: "OK"
}])
} else {
await shipping?.delete()
}
}
}])
}}>Delete</Button>
<Button size="small" color="primary" onClick={() => {
history.push(`/checkout/shipping/${shipping.id}`)
}}>
Edit
</Button>
</ExpansionPanelActions>
</ExpansionPanel>
)
})
}
<List>
<ListItem button component={Link} to="/checkout/shipping">
<ListItemIcon>
<AddIcon color="secondary" />
</ListItemIcon>
<ListItemText primary={`Add new shpping address`} />
</ListItem>
</List>
</Paper>
)
}
Example #4
| Source File: index.tsx From Demae with MIT License | 4 votes |
|
PaymentMethods = ({ user }: { user: Commerce.User }) => {
const [setProcessing] = useProcessing()
const [paymentMethods, isLoading, error, setPaymentMethods] = useFetchList<PaymentMethod>("stripe-v1-paymentMethod-list", { type: "card" })
const [showDialog, close] = useDialog()
const [setMessage] = useSnackbar()
if (error) {
console.error(error)
}
const setDefaultPaymentMethod = async (paymentMethod: PaymentMethod) => {
setProcessing(true)
const customerUpdate = firebase.functions().httpsCallable("stripe-v1-customer-update")
try {
const response = await customerUpdate({
// payment_method: paymentMethod.id,
invoice_settings: {
default_payment_method: paymentMethod.id
}
})
const { result, error } = response.data
if (error) {
console.error(error)
setProcessing(false)
setMessage("error", error.message)
return
}
const card = new Commerce.Card(paymentMethod.id)
card.brand = paymentMethod.card!.brand
card.expMonth = paymentMethod.card!.exp_month
card.expYear = paymentMethod.card!.exp_year
card.last4 = paymentMethod.card!.last4
await user.documentReference.set({
defaultCard: card.convert()
}, { merge: true })
console.log("[APP] set default payment method", result)
} catch (error) {
console.error(error)
}
setProcessing(false)
}
const paymentMethodDetach = async (deletePaymentMethod: PaymentMethod) => {
if (!deletePaymentMethod) {
return
}
setProcessing(true)
try {
const detach = firebase.functions().httpsCallable("stripe-v1-paymentMethod-detach")
const response = await detach({
paymentMethodID: deletePaymentMethod.id
})
const { result, error } = response.data
console.log("[APP] detach payment method", result)
const data = paymentMethods.filter(method => method.id !== deletePaymentMethod.id)
if (deletePaymentMethod.id === user.defaultCard?.id) {
if (data.length > 0) {
const method = data[0]
await setDefaultPaymentMethod(method)
} else {
await user.documentReference.set({
defaultCard: null
}, { merge: true })
}
}
setPaymentMethods(data)
} catch (error) {
console.error(error)
}
setProcessing(false)
}
if (isLoading) {
return (
<Paper>
<DataLoading />
</Paper>
)
}
return (
<Paper>
<AppBar position="static" color="transparent" elevation={0}>
<Toolbar>
<Box fontSize={18} fontWeight={600}>
Payments
</Box>
</Toolbar>
</AppBar>
{
paymentMethods.map(method => {
return (
<ExpansionPanel key={method.id} >
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<FormControlLabel
onClick={async (event) => {
event.stopPropagation()
await setDefaultPaymentMethod(method)
}}
onFocus={(event) => event.stopPropagation()}
control={<Checkbox checked={user?.defaultCard?.id === method.id} />}
label={
<Box display="flex" alignItems="center" flexGrow={1} style={{ width: "140px" }}>
<Box display="flex" alignItems="center" flexGrow={1}>
<i className={`pf ${CardBrand[method.card!.brand]}`}></i>
</Box>
<Box justifySelf="flex-end">
{`• • • • ${method.card?.last4}`}
</Box>
</Box>
}
/>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
expire {`${method.card?.exp_year}/${method.card?.exp_month}`}
</Typography>
</ExpansionPanelDetails>
<Divider />
<ExpansionPanelActions>
<Button size="small" onClick={async () => {
showDialog("Delete", "Do you want to remove it?", [
{
title: "Cancel",
handler: close
},
{
title: "OK",
handler: async () => {
await paymentMethodDetach(method)
}
}])
}}>Delete</Button>
</ExpansionPanelActions>
</ExpansionPanel>
)
})
}
<List>
<ListItem button component={Link} to="/checkout/paymentMethod">
<ListItemIcon>
<AddIcon color="secondary" />
</ListItemIcon>
<ListItemText primary={`Add new payment method`} />
</ListItem>
</List>
</Paper>
)
}
Example #5
| Source File: SettingsSection.tsx From fishbowl with MIT License | 4 votes |
|
function SettingsSection(props: {
cardPlayStyle: GameCardPlayStyleEnum
setCardPlayStyle?: (cardPlayStyle: GameCardPlayStyleEnum) => void
debouncedSetWordList?: (wordList: string) => void
}) {
const { t } = useTranslation()
const currentGame = React.useContext(CurrentGameContext)
const currentPlayer = React.useContext(CurrentPlayerContext)
const titleClasses = useTitleStyle()
const [expanded, setExpanded] = React.useState(false)
return (
<ExpansionPanel
style={{
boxShadow: "none",
background: "none",
}}
expanded={expanded}
>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
style={{ padding: 0 }}
aria-controls="panel1a-content"
id="panel1a-header"
onClick={() => {
setExpanded(!expanded)
}}
>
<Box display="flex" flexDirection="column">
<Typography variant="h4" className={titleClasses.title}>
{t("settings.heading", "Settings")}
</Typography>
{!expanded && (
<Box mt={2} pr={4} style={{ color: grey[600] }}>
<SettingsSummary></SettingsSummary>
</Box>
)}
</Box>
</ExpansionPanelSummary>
<ExpansionPanelDetails style={{ padding: 0 }}>
<Grid item>
<Grid container spacing={2} direction="column">
<Grid item>
{currentPlayer.role === PlayerRole.Participant && (
<div style={{ color: grey[600] }}>
{t(
"settings.playerClarification",
"(Only your host can set these)"
)}
</div>
)}
</Grid>
<Grid item>
<Typography variant="h6" className={titleClasses.title}>
{t("settings.cards.heading", "Cards")}
</Typography>
</Grid>
<CardSettings {...props}></CardSettings>
<Grid item>
<Typography variant="h6" className={titleClasses.title}>
{t("settings.turns.heading", "Turns")}
</Typography>
</Grid>
<Grid item>
<SecondsPerTurnInput
value={String(currentGame.seconds_per_turn || "")}
/>
</Grid>
<Grid item>
<AllowCardSkipsCheckbox
value={Boolean(currentGame.allow_card_skips)}
/>
</Grid>
<Grid item>
<Typography variant="h6" className={titleClasses.title}>
{t("settings.rounds.heading", "Rounds")}
</Typography>
<Box pl={2} pt={1} fontSize="0.75rem" color={grey[600]}>
{currentPlayer.role === PlayerRole.Host &&
t(
"settings.rounds.description",
"You can add, remove, or reorder rounds. By default, cards submitted will be re-used across rounds of Taboo, Charades, and Password."
)}
</Box>
</Grid>
<Grid item>
{currentPlayer.role === PlayerRole.Host ? (
<ControllableRoundSettings />
) : (
<RoundSettings />
)}
</Grid>
<Grid item />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
)
}
Example #6
| Source File: Module.tsx From listo with MIT License | 4 votes |
|
ModuleComponent = ({
moduleObject,
handleSelectModule,
categoryKey,
moduleKey,
readOnlyMode = false,
}: Props) => {
const { tools } = useContext(AppContext);
const classes = useStyles();
const numberOfAnsweredQuestions = getNumberOfAnsweredQuestions(
moduleObject,
tools,
);
const numberOfCheckListItems = getNumberOfCheckListItems(moduleObject);
return (
<ExpansionPanel square={true}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon color="secondary" />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography component="div" className={classes.column}>
<Box className={classes.checklistSummary}>
{readOnlyMode && (
<Typography >
{moduleObject.title}
</Typography>
)}
{!readOnlyMode && (
<FormControlLabel
onClick={event => event.stopPropagation()}
control={
<Checkbox
checked={Boolean(moduleObject.response)}
onChange={event => {
handleSelectModule(
categoryKey,
moduleKey,
event.target.checked,
);
}}
color="primary"
/>
}
label={moduleObject.title}
/>
)}
{readOnlyMode || Boolean(moduleObject.response) ? (
<Chip
label={`${numberOfAnsweredQuestions}/${numberOfCheckListItems}`}
color="secondary"
variant="outlined"
className={
numberOfAnsweredQuestions > 0
? classes.answeredQuestionsChip
: ''
}
/>
) : null}
</Box>
<Typography variant="caption" gutterBottom>
{moduleObject.assessmentQuestion}
</Typography>
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails >
<Grid
container
direction="column"
justify="flex-start"
alignItems="flex-start"
>
{moduleObject.guidance ?
(
<Typography paragraph gutterBottom >
<ReactMarkdown source={moduleObject.guidance} />
</Typography>
) : null
}
<Checklists checklists={moduleObject.checkLists} readOnlyMode={true}/>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
}
