@material-ui/core#ExpansionPanelDetails TypeScript Examples

The following examples show how to use @material-ui/core#ExpansionPanelDetails. 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 vote down vote up 
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: index.tsx    From Demae with MIT License 4 votes vote down vote up 
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 #3
Source File: index.tsx    From Demae with MIT License 4 votes vote down vote up 
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 #4
Source File: SettingsSection.tsx    From fishbowl with MIT License 4 votes vote down vote up 
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 #5
Source File: Module.tsx    From listo with MIT License 4 votes vote down vote up 
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>
  );
}