@mui/icons-material#ArrowBack TypeScript Examples

export default function MessageAttachmentImage(props: {data: ArrayBuffer | Blob, name: string, type: string, partProps: MessagePartProps, tapbacks?: TapbackItem[], stickers?: StickerItem[]}) {
	const [imageURL, setImageURL] = useState<string | undefined>(undefined);
	const [previewOpen, setPreviewOpen] = useState(false);
	
	const theme = createTheme({
		palette: {
			mode: "dark",
			messageIncoming: undefined,
			messageOutgoing: undefined,
			messageOutgoingTextMessage: undefined
		}
	});
	
	useEffect(() => {
		//Creating a new image URL
		const imageURL = URL.createObjectURL(props.data instanceof Blob ? props.data : new Blob([props.data], {type: props.type}));
		
		//Setting the image URL
		setImageURL(imageURL);
		
		//Cleaning up the URL
		return () => URL.revokeObjectURL(imageURL);
	}, [props.data, props.type, setImageURL]);
	
	function downloadFile(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
		//So that we don't dismiss the backdrop
		event.stopPropagation();
		
		if(!imageURL) return;
		downloadURL(imageURL, props.type, props.name);
	}
	
	//All of the styles, without the border radius
	const buttonStyle: Partial<MessagePartProps> = {...props.partProps};
	delete buttonStyle["borderRadius"];
	
	return (
		<React.Fragment>
			<ThemeProvider theme={theme}>
				<Backdrop className={stylesImage.lightboxBackdrop} open={previewOpen} onClick={() => setPreviewOpen(false)}>
					<Toolbar className={stylesImage.lightboxToolbar}>
						<IconButton edge="start">
							<ArrowBack />
						</IconButton>
						<Typography variant="h6" color="textPrimary" style={{flexGrow: 1}}>{props.name}</Typography>
						<Tooltip title="Save">
							<IconButton onClick={downloadFile}>
								<SaveAlt />
							</IconButton>
						</Tooltip>
					</Toolbar>
					<div className={stylesImage.lightboxContainer}>
						<div style={{width: "100%", height: "100%", backgroundImage: `url("${imageURL}")`, backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundSize: "contain"}} />
					</div>
				</Backdrop>
			</ThemeProvider>
			
			<DecorativeMessageBubble element={ButtonBase} className={styles.contentBubble} style={props.partProps} onClick={() => setPreviewOpen(true)} tapbacks={props.tapbacks} stickers={props.stickers}>
				<img src={imageURL} style={{borderRadius: props.partProps.borderRadius}} alt="" />
			</DecorativeMessageBubble>
			
			{/*<ButtonBase className={styles.contentBubble} style={props.partProps} onClick={() => setPreviewOpen(true)}>*/}
			{/*	<img src={imageURL} style={{borderRadius: props.partProps.borderRadius}} alt="" />*/}
			{/*</ButtonBase>*/}
		</React.Fragment>
	);
}

MenuLayout: React.FC<MenuLayoutProps> = ({
  menu,
  menuFooter,
  basePath = '',
  showCopyright = true,
  children,
  title,
  onChange,
  ...props
}) => {
  const location = useLocation();
  const history = useNavigate();
  const [selected, setSelected] = React.useState<MenuLayoutMenu>(
    [] as unknown as MenuLayoutMenu,
  );

  React.useEffect(() => {
    const state = location?.state as RouteState;
    if (state && state?.search) {
      const sel = menu.find((i) => i.id === state?.search);
      const selected = sel ? sel : menu[0];
      setSelected(selected);
      if (onChange) onChange(selected.id, selected);
    } else {
      setSelected(menu[0]);
      if (onChange) onChange(menu[0].id, menu[0]);
    }
  }, []);

  return (
    <div className="flex h-screen bg-gray-50">
      <div
        className={classNames(
          'max-w-xs flex-grow py-7 px-7 pl-12 border-gray-200 border-r flex flex-col',
          !!menuFooter && 'pb-2',
        )}
      >
        <div className="flex items-center">
          <IconButton size="small" onClick={() => history(-1)}>
            <ArrowBack />
          </IconButton>
          <span className="text-xl font-semibold">{title}</span>
        </div>
        <List dense className="flex-grow">
          {menu.map((i, j) => (
            <MenuListItem
              key={j}
              selected={i.id === selected.id}
              onClick={() => {
                setSelected(i);
                if (onChange) onChange(i.id, i);
              }}
              icon={i.icon}
              primary={i.name}
            />
          ))}
        </List>
        <div>{menuFooter}</div>
      </div>
      <div className="flex-grow h-full flex flex-col">
        <div
          className="flex-grow overflow-y-auto pl-12 pb-8"
          style={{ scrollSnapType: 'proximity' }}
        >
          {children}
        </div>
        {showCopyright && (
          <div className="text-center h-8 max-w-4xl">
            <Copyright />
          </div>
        )}
      </div>
    </div>
  );
}

export default function PluginSettingsLayout<TSettings>(props: TPluginSettingsProps<TSettings>
    & {
        children: React.ReactNode | ((options: {
            pluginSettings: TSettings | undefined;
            setPluginSettings: (settings: TSettings) => void;
            changeSetting: <T extends keyof TSettings>(key: T, value: TSettings[T]) => void;
            saveSettings: () => Promise<void>;
        }) => JSX.Element);
        disableSave?: boolean;
        loading?: boolean;
        onSave?: (pluginSettings: TSettings) => any | Promise<any>;
    }) {
    const [isLoading] = useState(false);
    const [isSaving, setIsSaving] = useState(false);
    const [infoOpen, setInfoOpen] = useState(false);
    const [pluginSettings, setPluginSettings] = useState(props.pluginSettings ?? {} as TSettings);
    const apiClient = getRestApiClient();


    const changeSetting = <T extends keyof TSettings>(key: T, value: TSettings[T]) => {
        setPluginSettings(prev => ({
            ...prev,
            [key]: value,
        }))
    }

    const handleSave = async () => {
        setIsSaving(true);
        try {
            await apiClient?.savePluginSettings(props.pluginName, pluginSettings);
            await props.onSave?.(pluginSettings);
            toast.success('Settings saved');
        } catch (error) {
            console.error(error);
            toast.error('Failed to save settings');
        }
        setIsSaving(false);
    }

    const toggleOpenInfo = () => {
        setInfoOpen(!infoOpen);
    }

    return (
        <div className={styles.PluginSettingsLayout}>
            {isLoading || props.loading ? (
                <LoadBox />
            ) : (
                <div className={styles.content}>
                    <div className={styles.header}>
                        <div style={{ display: 'flex' }}>
                            <Link to={pluginListPageInfo.route}>
                                <IconButton
                                    style={{ marginRight: '10px' }}
                                >
                                    <ArrowBack />
                                </IconButton>
                            </Link>
                            <div className={styles.headerLeft}>
                                {props.pluginInfo?.icon && (
                                    <div className={styles.icon}
                                        style={{ backgroundImage: `url("data:image/png;base64,${props.pluginInfo.icon}")` }}
                                    ></div>
                                )}
                                <p className={styles.title}>{props.pluginInfo?.title ?? ''}</p>
                                <p className={styles.version}>v.{props.pluginInfo?.version ?? ''}</p>
                            </div>
                        </div>
                        <div >
                            {props.pluginInfo && (
                                <Tooltip title="Info">
                                    <IconButton
                                        style={{ marginRight: '10px' }}
                                        onClick={toggleOpenInfo}>
                                        <InfoIcon />
                                    </IconButton>
                                </Tooltip>
                            )}
                            <Button variant="contained" color="primary"
                                className={styles.saveBtn}
                                onClick={handleSave}
                                disabled={isSaving || props.disableSave}
                            >Save</Button>
                        </div>
                    </div>
                    <div className={styles.main}>
                        {typeof props.children === 'function' ? props.children({
                            pluginSettings,
                            setPluginSettings,
                            changeSetting,
                            saveSettings: handleSave
                        }) : props.children ? props.children : null}
                    </div>
                    <Modal
                        open={infoOpen}
                        blurSelector="#root"
                        className={commonStyles.center}
                        onClose={toggleOpenInfo}
                    >
                        {infoOpen && props.pluginInfo && (
                            <MarketModal
                                data={props.pluginInfo}
                                noInstall
                            />
                        )}
                    </Modal>
                </div>
            )}
        </div >
    )
}