@fortawesome/free-solid-svg-icons#faFolderOpen TypeScript Examples

export default function Empty() {

  return (
    <div className={style.empty}>
      <div>
        <div className={style.logo}>
          <FontAwesomeIcon icon={faFolderOpen}/>
        </div>
        <h3>Open File</h3>
        <h5>You can open file to write DSL code!</h5>
      </div>
    </div>
  )
}

export function Folder(props: IFolderProps) {
  const [open, setOpen] = useState(false);
  const fileCount = Array.isArray(props.children) ? props.children.length : 1;

  const indent = props.indent || 1;
  const active = props.active || false;

  const handleFolderOpen = () => {
    setOpen(open => !open);
    props.onClick();
  };

  const btnStyle = {
    textIndent: indent * 10 + 'px'
  };

  return (
    <div className={style.folder}>
      <button className={cls(active && style.active)} onClick={handleFolderOpen} style={btnStyle}>
        <span>
          <FontAwesomeIcon icon={open ? faFolderOpen : faFolder}/>
        </span>
        {props.name}
      </button>
      <div className={cls(style.folder_files, !open && style.hidden)}>
        {props.children}
      </div>
    </div>
  );
}

export default function FileSavingControl({
    fileSavingState,
    onLoadFromFile,
    onSaveToFile,
}: Props) {
    return (
        <div className="FileSavingControl">
            <IconButton
                title="Load from file"
                icon={faFolderOpen}
                onClick={() => {
                    if (
                        // When the Deck is not being saved to any file, since
                        // loading from a file will discard the current Deck,
                        // ask the user for confirmation
                        (!fileSavingState &&
                            // TODO: only show the warning for non-empty decks
                            window.confirm(
                                "Loading from a file will discard your current deck. Continue?"
                            )) ||
                        // When the Deck is being saved to any file, but there
                        // are unsaved changes, since loading from a file will
                        // discard the current changes, ask the user for
                        // confirmation
                        (!!fileSavingState &&
                            (fileSavingState.areAllChangesSaved ||
                                window.confirm(
                                    "There are some unsaved changes. Loading from a file will discard them. Continue?"
                                )))
                    ) {
                        onLoadFromFile();
                    }
                }}
            />
            <IconButton
                title="Save to file"
                disabled={
                    !!fileSavingState &&
                    (fileSavingState.areAllChangesSaved ||
                        fileSavingState.isSavingInProgress)
                }
                icon={faSave}
                onClick={onSaveToFile}
            />
            <FileSavingStateIndicator fileSavingState={fileSavingState} />
        </div>
    );
}

DomApp: FunctionComponent = () => {
	const { level } = useStore();

	function onSave(): void {
		// don't want invalid entities to end up in the snapshot
		level.cleanInvalidEntities();

		const snapshot = getSnapshot(level);

		try {
			validateLevel(snapshot);
		} catch (err) {
			// eslint-disable-next-line no-console
			alert(`Error: your level contains invalid elements. Come to https://discord.gg/KEb4wSN for help!

${err instanceof Error ? err.message : JSON.stringify(err)}`);
		}

		const filename = toFilename(level.name, 'json');
		const snapshotStr = JSON.stringify(snapshot, null, '\t') + '\n';

		const blob = new Blob([snapshotStr], { type: 'application/json; charset=utf-8' });
		saveAs(blob, filename);
	}

	function onLoad(ev: ChangeEvent<HTMLInputElement>): void {
		if (ev.target.files === null || ev.target.files.length < 1) return;

		const reader = new FileReader();
		reader.addEventListener('load', (ev_) => {
			if (ev_.target === null) return;

			try {
				const snapshot = JSON.parse(ev_.target.result as string);
				const actualSnapshot = levelPreProcessor(snapshot);
				// we have to patch the snapshot here because of this bug https://github.com/mobxjs/mobx-state-tree/issues/1317
				// @ts-expect-error
				applySnapshot(level, actualSnapshot);
			} catch (err) {
				// eslint-disable-next-line no-console
				console.error(err);
				alert('Invalid file');
			}
		});
		reader.readAsText(ev.target.files[0]);
	}

	type SendParams = {
		type: 'loadLevel' | 'uploadLevel'
	};

	function sendLevelToGame(params: SendParams): void {
		// don't want invalid entities to end up in the snapshot
		level.cleanInvalidEntities();

		const snapshot = getSnapshot(level);

		try {
			validateLevel(snapshot);
		} catch (err) {
			// eslint-disable-next-line no-console
			console.error(err);
			alert(`Error: your level contains invalid elements. Come to https://discord.gg/KEb4wSN for help!

${err instanceof Error ? err.message : JSON.stringify(err)}`);
			return;
		}

		postMessage({
			...params,
			level: snapshot,
		});
	}

	function onTest(): void {
		sendLevelToGame({
			type: 'loadLevel',
		});
	}

	function onUpload(): void {
		sendLevelToGame({
			type: 'uploadLevel',
		});
	}

	return (
		<Fragment>
			{inIframe && (
				<Fragment>
					<Button onClick={onTest}>
						<FontAwesomeIcon icon={faPlay}/>
						&#32;
						Test
					</Button>
					<Button onClick={onUpload}>
						<FontAwesomeIcon icon={faUpload}/>
						&#32;
						Upload
					</Button>
				</Fragment>
			)}
			<FilePicker>
				<FontAwesomeIcon icon={faFolderOpen}/>
				&#32;
				Import<input accept="application/json" type="file" onChange={onLoad}/></FilePicker>
			<Button onClick={onSave}>
				<FontAwesomeIcon icon={faSave}/>
				&#32;
				Export
			</Button>
		</Fragment>
	);
}