@mui/material#Fade TypeScript Examples

/** @internal */
export function Popper(props: BasePopperProps) {
  const onClose = () => {
    props.onClose?.();
  }
  return (
    <MuiPopper open={!!(props.open && props.children)}
      anchorEl={props.anchorEl}
      style={{ zIndex: 10000 }}
      transition
    >
      {({ TransitionProps }) => (
        <Fade {...TransitionProps} timeout={350}>
          {/* ClickAwayListener directly inside Fade crashes the app, we need div wrapper */}
          <div>
            <ClickAwayListener onClickAway={onClose}>
              <div>{props.children}</div>
            </ClickAwayListener>
          </div>
        </Fade>
      )}
    </MuiPopper>
  )
}

export default function ThreePoints({ items }: ThreePointsProps) {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  const internClick = useCallback(
    (index: number) => {
      items[index].onClick();
      setOpen(false);
    },
    [items],
  );

  return (
    <ClickAwayListener onClickAway={() => setOpen(false)}>
      <div>
        <IconButton size="small" ref={buttonRef} onClick={() => setOpen((v) => !v)}>
          <MoreHoriz fontSize="small" />
        </IconButton>
        <Popper
          open={open}
          anchorEl={buttonRef.current}
          popperOptions={{ placement: 'auto-start' }}
          transition>
          {({ TransitionProps }) => (
            // eslint-disable-next-line react/jsx-props-no-spreading
            <Fade {...TransitionProps}>
              <div className={s.popper}>
                {items.map((item, index) => (
                  <Tooltip title={(item.disabled && item.disabledTooltip) || ''}>
                    <Button
                      // eslint-disable-next-line react/no-array-index-key
                      key={index}
                      variant="text"
                      disabled={item.disabled}
                      className={clsx({
                        [s.item]: true,
                        [s[item.style ?? 'normal']]: true,
                      })}
                      onClick={() => internClick(index)}>
                      {item.label}
                    </Button>
                  </Tooltip>
                ))}
                {items.length === 0 && (
                  <Button
                    // eslint-disable-next-line react/no-array-index-key
                    variant="text"
                    disabled>
                    No action available
                  </Button>
                )}
              </div>
            </Fade>
          )}
        </Popper>
      </div>
    </ClickAwayListener>
  );
}

render() {
        const { isLoading, searchItems, searchOpen } = this.state;

        return (
            <>
                <TextField label="Search..."
                    variant="outlined" size="small"
                    ref={this.searchAnchorRef}
                    // onBlur={handleSearchClose}
                    onChange={(event) => this.handleSearchInput(event.currentTarget.value)} />
                <Popper open={searchOpen} anchorEl={this.searchAnchorRef.current}
                    style={{ zIndex: 9999 }}
                    transition>
                    {({ TransitionProps }) => (
                        <Fade {...TransitionProps} timeout={350}>
                            <div>
                                <ClickAwayListener onClickAway={this.handleSearchClose}>
                                    <div className={styles.searchContent} onClick={this.handleSearchClose}>
                                        {isLoading && (
                                            <LoadBox size={100} />
                                        )}
                                        {!isLoading && searchItems.length === 0 && (
                                            <p className={styles.notFoundText}>No items found</p>
                                        )}
                                        {!isLoading && searchItems.map(post => {
                                            return (
                                                <Grid container className={styles.listItem} key={post.id}>
                                                    <Link href={`/post/${post.slug}`} >
                                                        <Grid item xs={12} className={styles.itemMain}>
                                                            <div
                                                                style={{ backgroundImage: `url(${post?.mainImage})` }}
                                                                className={styles.itemImage}
                                                            ></div>
                                                            <div className={styles.itemMainInfo}>
                                                                <p className={styles.itemTitle}>{post.title ?? ''}</p>
                                                            </div>
                                                        </Grid>
                                                    </Link>
                                                </Grid>
                                            )
                                        })}
                                    </div>
                                </ClickAwayListener>
                            </div>
                        </Fade>
                    )}
                </Popper>
            </>
        );
    }

Dialog: React.FC<DialogProps> = ({
  open,
  title,
  onOk,
  onCancel,
  okText,
  cancelText,
  children,
  container,
  width = 520,
  showFooter = true,
}) => {
  const { t } = useTranslation();

  return (
    <MModal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      open={open}
      onClose={onCancel}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
      container={container}
      disableAutoFocus
    >
      <Fade in={open}>
        <div
          className={classnames(
            'rounded transform mx-auto relative top-28',
            css`
              width: ${typeof width === 'number' ? width + 'px' : width};
              max-width: calc(100vw - 32px);
              background-color: rgba(255, 255, 255, 0.9);
              backdrop-filter: blur(8px);
            `,
          )}
        >
          <div className="p-3 py-2 font-bold text-base flex justify-between items-center">
            {title}
            <IconButton size="small" onClick={onCancel}>
              <Close />
            </IconButton>
          </div>
          <div className="p-4">{children}</div>
          {showFooter && (
            <div className="p-2 flex justify-end gap-2">
              <Button variant="text" onClick={onCancel}>
                {cancelText ? cancelText : t('cancel')}
              </Button>
              <Button variant="text" onClick={onOk}>
                {okText ? okText : t('submit')}
              </Button>
            </div>
          )}
        </div>
      </Fade>
    </MModal>
  );
}

/**
 * Use this component to render a login view, that updates
 * the state of the {@link AuthController} based on the result
 * @constructor
 * @category Firebase
 */
export function FirebaseLoginView({
                                      allowSkipLogin,
                                      logo,
                                      signInOptions,
                                      firebaseApp,
                                      authDelegate,
                                      NoUserComponent,
                                      disableSignupScreen = false
                                  }: FirebaseLoginViewProps) {
    const classes = useStyles();
    const authController = useAuthController();
    const modeState = useModeState();

    const [passwordLoginSelected, setPasswordLoginSelected] = useState(false);

    const [phoneLoginSelected, setPhoneLoginSelected] = useState(false);

    const resolvedSignInOptions: FirebaseSignInProvider[] = signInOptions.map((o) => {
        if (typeof o === "object") {
            return o.provider;
        } else return o as FirebaseSignInProvider;
    })

    function buildErrorView() {
        let errorView: any;
        const ignoredCodes = ["auth/popup-closed-by-user", "auth/cancelled-popup-request"];
        if (authDelegate.authError) {
            if (authDelegate.authError.code === "auth/operation-not-allowed") {
                errorView =
                    <>
                        <Box p={1}>
                            <ErrorView
                                error={"You need to enable the corresponding login provider in your Firebase project"}/>
                        </Box>

                        {firebaseApp &&
                        <Box p={1}>
                            <a href={`https://console.firebase.google.com/project/${firebaseApp.options.projectId}/authentication/providers`}
                               rel="noopener noreferrer"
                               target="_blank">
                                <Button variant="text"
                                        color="primary">
                                    Open Firebase configuration
                                </Button>
                            </a>
                        </Box>}
                    </>;
            } else if (!ignoredCodes.includes(authDelegate.authError.code)) {
                console.error(authDelegate.authError);
                errorView =
                    <Box p={1}>
                        <ErrorView error={authDelegate.authError.message}/>
                    </Box>;
            }
        }
        return errorView;
    }

    let logoComponent;
    if (logo) {
        logoComponent = <img className={classes.logo}
                             src={logo}
                             alt={"Logo"}/>;
    } else {
        logoComponent = <div className={classes.logo}>
            <FireCMSLogo/>
        </div>;
    }

    let notAllowedMessage: string | undefined;
    if (authController.notAllowedError) {
        if (typeof authController.notAllowedError === "string") {
            notAllowedMessage = authController.notAllowedError;
        } else if (authController.notAllowedError instanceof Error) {
            notAllowedMessage = authController.notAllowedError.message;
        } else {
            notAllowedMessage = "It looks like you don't have access to the CMS, based on the specified Authenticator configuration";
        }
    }


    return (
        <Fade
            in={true}
            timeout={500}
            mountOnEnter
            unmountOnExit>
            <Box sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                minHeight: "100vh",
                p: 2
            }}>
                <Box sx={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    width: "100%",
                    maxWidth: 340
                }}>

                    <Box m={1}>
                        {logoComponent}
                    </Box>

                    {notAllowedMessage &&
                    <Box p={2}>
                        <ErrorView
                            error={notAllowedMessage}/>
                    </Box>}

                    {buildErrorView()}

                    {(!passwordLoginSelected && !phoneLoginSelected) && <>

                        {buildOauthLoginButtons(authDelegate, resolvedSignInOptions, modeState.mode)}

                        {resolvedSignInOptions.includes("password") &&
                        <LoginButton
                            text={"Email/password"}
                            icon={<EmailIcon fontSize={"large"}/>}
                            onClick={() => setPasswordLoginSelected(true)}/>}

                        {resolvedSignInOptions.includes("phone") &&
                        <LoginButton
                            text={"Phone number"}
                            icon={<Phone fontSize={"large"}/>}
                            onClick={() => setPhoneLoginSelected(true) }/>}

                        {resolvedSignInOptions.includes("anonymous") &&
                        <LoginButton
                            text={"Log in anonymously"}
                            icon={<PersonOutlineIcon fontSize={"large"}/>}
                            onClick={authDelegate.anonymousLogin}/>}

                        {allowSkipLogin &&
                        <Box m={1}>
                            <Button onClick={authDelegate.skipLogin}>
                                Skip login
                            </Button>
                        </Box>
                        }

                    </>}

                    {passwordLoginSelected && <LoginForm
                        authDelegate={authDelegate}
                        onClose={() => setPasswordLoginSelected(false)}
                        mode={modeState.mode}
                        NoUserComponent={NoUserComponent}
                        disableSignupScreen={disableSignupScreen}
                    />}

                    {phoneLoginSelected && <PhoneLoginForm
                        authDelegate={authDelegate}
                        onClose={() => setPhoneLoginSelected(false)}
                    />}

                </Box>
            </Box>
        </Fade>
    );
}

render() {
        const { searchOpen, pickedItems, pickedText } = this.state;
        const { multiple } = this.props;

        return (
            <>
                <MuiAutocomplete
                    className={this.props.className}
                    multiple={multiple}
                    options={pickedItems ?? []}
                    getOptionLabel={(option) => option as any}
                    value={multiple ? (pickedItems ?? []) : (pickedText ?? '')}
                    onChange={(event, newValue) => {
                        if (!newValue) {
                            this.handleClear();
                        }
                        if (multiple && newValue) {
                            const pickedItems = [...new Set([...(newValue as any)])];
                            this.props.onSelect?.(pickedItems.map(item => this.pickedData[item]));
                            Object.values(this.multiSelectionListeners).forEach(func => func(pickedItems));
                            this.setState({
                                pickedItems,
                            });
                        }
                    }}
                    PopperComponent={() => <></>}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            value={this.state.searchText ?? ''}
                            onChange={(event) => this.handleSearchInput(event.currentTarget.value)}
                            onFocus={() => this.handleSearchInput(this.state.searchText)}
                            onBlur={() => !multiple && this.handleSearchClose()}
                            label={this.props.label ?? "Search..."}
                            fullWidth={this.props.fullWidth}
                            ref={this.searchAnchorRef}
                            size="small"
                            variant={this.props.variant ?? 'standard'}
                        />
                    )}
                />
                <Popper open={searchOpen} anchorEl={this.searchAnchorRef.current}
                    style={{ zIndex: 9999 }}
                    transition>
                    {({ TransitionProps }) => (
                        <Fade {...TransitionProps} timeout={350}>
                            <div className={styles.searchContent}>
                                <ClickAwayListener onClickAway={this.handleSearchClose}>
                                    {/* {isLoading && (
                                    <LoadBox size={100} />
                                )}
                                {!isLoading && searchItems.length === 0 && (
                                    <p className={styles.notFoundText}>No items found</p>
                                )}
                                {!isLoading && ( */}
                                    <CList<TItemData, ListItemProps<TItemData>>
                                        useAutoLoading
                                        className={styles.list}
                                        id={this.listId}
                                        loader={this.loadMore}
                                        elements={{ preloader: <div className={styles.listPreloader}>{this.listSkeleton}</div> }}
                                        ListItem={ListItem}
                                        listItemProps={{
                                            handleItemClick: this.handleItemClick,
                                            getOptionLabel: this.props.getOptionLabel,
                                            getOptionValue: this.props.getOptionValue,
                                            pickedItems: this.state?.pickedItems,
                                            multiple,
                                            ItemComponent: this.props.itemComponent,
                                            addMultiSelectListener: this.addMultiSelectListener,
                                            removeMultiSelectListener: this.removeMultiSelectListener,
                                        }}
                                    />
                                    {/* )} */}
                                </ClickAwayListener>
                            </div>
                        </Fade>
                    )}
                </Popper>
            </>
        );
    }

export default function AttributesTab(props: {
    product: TProduct;
    attributes: TAttribute[];
    setProdData: (data: TProduct) => void;
    forceUpdate: () => void;
}) {
    const { product, attributes, setProdData, forceUpdate } = props;
    const [popperAnchorEl, setPopperAnchorEl] = React.useState<HTMLButtonElement | null>(null);
    const [popperOpen, setPopperOpen] = React.useState(false);

    const leftAttributesToAdd: TAttribute[] = [];

    attributes.forEach(attr => {
        if (product) {
            const hasAttr = product.attributes ? product.attributes.some(a => a.key === attr.key) : false;
            if (!hasAttr) {
                leftAttributesToAdd.push(attr);
            }
        }
    });

    const addAttribute = (key: string) => {
        const prod: TProduct = JSON.parse(JSON.stringify(product));
        if (!prod.attributes) prod.attributes = [];
        prod.attributes.push({
            key,
            values: []
        })
        setPopperOpen(false);
        setProdData(prod);
        forceUpdate();
    }

    const deleteAttribute = (index: number) => {
        const prod: TProduct = JSON.parse(JSON.stringify(product));
        if (prod.attributes) {
            prod.attributes = prod.attributes.filter((a, i) => i !== index);
            setProdData(prod);
            forceUpdate();
        }
    }

    return (
        <div>
            {product.attributes && attributes && (
                product.attributes.map((prodAttr, prodAttrIdx) => {
                    let origAttr: TAttribute | undefined = undefined;
                    for (const attr of attributes) {
                        if (attr.key === prodAttr.key) origAttr = attr;
                    }
                    if (origAttr) {
                        const leftValues = origAttr.values.filter(v => !prodAttr.values.some(pv => pv.value === v.value))
                        const rightValues = prodAttr.values.map(v => v.value);
                        return (
                            <div className={styles.attributeBlock} key={prodAttr.key}>
                                <div className={styles.attributeHeader}>
                                    <p className={styles.tag}>{prodAttr.key}</p>
                                    <Tooltip title="Delete attribute">
                                        <IconButton
                                            aria-label="delete attribute"
                                            onClick={() => deleteAttribute(prodAttrIdx)}
                                        ><DeleteForeverIcon />
                                        </IconButton>
                                    </Tooltip>
                                </div>
                                <TransferList
                                    left={leftValues.map(v => v.value)}
                                    setLeft={() => { }}
                                    right={rightValues}
                                    itemComp={(props) => (
                                        <div className={styles.attributeInstanceValue}>
                                            <p>{props.value}</p>
                                        </div>
                                    )}
                                    setRight={(val) => {
                                        const prod: TProduct = JSON.parse(JSON.stringify(product));
                                        if (!prod.attributes) prod.attributes = [];

                                        const newVals: TAttributeInstanceValue[] = [];
                                        val.forEach(newVal => {
                                            let hasVal = false;
                                            prod.attributes[prodAttrIdx].values.forEach(prodVal => {
                                                if (prodVal.value === newVal) {
                                                    newVals.push(prodVal);
                                                    hasVal = true;
                                                }
                                            })
                                            if (!hasVal) {
                                                newVals.push({
                                                    value: newVal
                                                });
                                            }
                                        });

                                        prod.attributes[prodAttrIdx].values = newVals.sort((a, b) => a.value > b.value ? 1 : -1);
                                        setProdData(prod);
                                        forceUpdate();
                                    }}
                                />
                            </div>
                        )
                    }
                })
            )}
            <Box sx={{ my: 4 }} style={{ width: '100%', display: 'flex' }}>
                <Button
                    sx={{ mx: 'auto', display: 'block' }}
                    variant="contained"
                    color="primary"
                    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
                        setPopperAnchorEl(event.currentTarget);
                        setPopperOpen((prev) => !prev);
                    }}
                    disabled={!leftAttributesToAdd.length}
                >Add attribute</Button>
            </Box>
            <Popper open={popperOpen} anchorEl={popperAnchorEl} placement={'bottom-start'} transition>
                {({ TransitionProps }) => (
                    <Fade {...TransitionProps} timeout={350}>
                        <Paper className={styles.newAttributesList}>
                            {leftAttributesToAdd.map(attr => {
                                return (
                                    <MenuItem
                                        key={attr.key}
                                        onClick={() => addAttribute(attr.key)}
                                        className={styles.newAttributeOption}
                                    >{attr.key}</MenuItem>
                                )
                            })}
                        </Paper>
                    </Fade>
                )}
            </Popper>
        </div>
    )
}

WalletMultiButton: FC<ButtonProps> = ({
    color = 'primary',
    variant = 'contained',
    type = 'button',
    children,
    ...props
}) => {
    const { publicKey, wallet, disconnect } = useWallet();
    const { setOpen } = useWalletDialog();
    const [anchor, setAnchor] = useState<HTMLElement>();

    const base58 = useMemo(() => publicKey?.toBase58(), [publicKey]);
    const content = useMemo(() => {
        if (children) return children;
        if (!wallet || !base58) return null;
        return base58.slice(0, 4) + '..' + base58.slice(-4);
    }, [children, wallet, base58]);

    if (!wallet) {
        return (
            <WalletDialogButton color={color} variant={variant} type={type} {...props}>
                {children}
            </WalletDialogButton>
        );
    }
    if (!base58) {
        return (
            <WalletConnectButton color={color} variant={variant} type={type} {...props}>
                {children}
            </WalletConnectButton>
        );
    }

    return (
        <>
            <Button
                color={color}
                variant={variant}
                type={type}
                startIcon={<WalletIcon wallet={wallet} />}
                onClick={(event) => setAnchor(event.currentTarget)}
                aria-controls="wallet-menu"
                aria-haspopup="true"
                {...props}
            >
                {content}
            </Button>
            <StyledMenu
                id="wallet-menu"
                anchorEl={anchor}
                open={!!anchor}
                onClose={() => setAnchor(undefined)}
                marginThreshold={0}
                TransitionComponent={Fade}
                transitionDuration={250}
                keepMounted
                anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'left',
                }}
            >
                <WalletMenuItem onClick={() => setAnchor(undefined)}>
                    <Button
                        color={color}
                        variant={variant}
                        type={type}
                        startIcon={<WalletIcon wallet={wallet} />}
                        onClick={(event) => setAnchor(undefined)}
                        fullWidth
                        {...props}
                    >
                        {wallet.adapter.name}
                    </Button>
                </WalletMenuItem>
                <Collapse in={!!anchor}>
                    <WalletActionMenuItem
                        onClick={async () => {
                            setAnchor(undefined);
                            await navigator.clipboard.writeText(base58);
                        }}
                    >
                        <ListItemIcon>
                            <CopyIcon />
                        </ListItemIcon>
                        Copy address
                    </WalletActionMenuItem>
                    <WalletActionMenuItem
                        onClick={() => {
                            setAnchor(undefined);
                            setOpen(true);
                        }}
                    >
                        <ListItemIcon>
                            <SwitchIcon />
                        </ListItemIcon>
                        Change wallet
                    </WalletActionMenuItem>
                    <WalletActionMenuItem
                        onClick={() => {
                            setAnchor(undefined);
                            // eslint-disable-next-line @typescript-eslint/no-empty-function
                            disconnect().catch(() => {
                                // Silently catch because any errors are caught by the context `onError` handler
                            });
                        }}
                    >
                        <ListItemIcon>
                            <DisconnectIcon />
                        </ListItemIcon>
                        Disconnect
                    </WalletActionMenuItem>
                </Collapse>
            </StyledMenu>
        </>
    );
}