From e69190abb09661caa19fa3905a0d8f3b7e72648b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 13 Jul 2020 20:59:52 +0800
Subject: Move front end to a submodule.

---
 .../ClientApp/src/app/timeline/TimelineItem.tsx    | 181 ---------------------
 1 file changed, 181 deletions(-)
 delete mode 100644 Timeline/ClientApp/src/app/timeline/TimelineItem.tsx

(limited to 'Timeline/ClientApp/src/app/timeline/TimelineItem.tsx')

diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
deleted file mode 100644
index 43e206f1..00000000
--- a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import {
-  Row,
-  Col,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Button,
-} from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import Svg from 'react-inlinesvg';
-
-import chevronDownIcon from 'bootstrap-icons/icons/chevron-down.svg';
-import trashIcon from 'bootstrap-icons/icons/trash.svg';
-
-import { TimelinePostInfo } from '../data/timeline';
-import { useAvatarUrlWithGivenVersion } from '../user/api';
-
-const TimelinePostDeleteConfirmDialog: React.FC<{
-  toggle: () => void;
-  onConfirm: () => void;
-}> = ({ toggle, onConfirm }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal toggle={toggle} isOpen centered>
-      <ModalHeader className="text-danger">
-        {t('timeline.post.deleteDialog.title')}
-      </ModalHeader>
-      <ModalBody>{t('timeline.post.deleteDialog.prompt')}</ModalBody>
-      <ModalFooter>
-        <Button color="secondary" onClick={toggle}>
-          {t('operationDialog.cancel')}
-        </Button>
-        <Button
-          color="danger"
-          onClick={() => {
-            onConfirm();
-            toggle();
-          }}
-        >
-          {t('operationDialog.confirm')}
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export interface TimelineItemProps {
-  post: TimelinePostInfo;
-  current?: boolean;
-  more?: {
-    isOpen: boolean;
-    toggle: () => void;
-    onDelete: () => void;
-  };
-  onClick?: () => void;
-  avatarVersion?: number;
-  onResize?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const TimelineItem: React.FC<TimelineItemProps> = (props) => {
-  const { i18n } = useTranslation();
-
-  const current = props.current === true;
-
-  const { more, onResize } = props;
-
-  const avatarUrl = useAvatarUrlWithGivenVersion(
-    props.avatarVersion,
-    props.post.author._links.avatar
-  );
-
-  const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
-  const toggleDeleteDialog = React.useCallback(
-    () => setDeleteDialog((old) => !old),
-    []
-  );
-
-  return (
-    <Row
-      className={clsx(
-        'position-relative flex-nowrap',
-        current && 'current',
-        props.className
-      )}
-      onClick={props.onClick}
-      style={props.style}
-    >
-      <Col className="timeline-line-area">
-        <div className="timeline-line-segment start"></div>
-        <div className="timeline-line-node-container">
-          <div className="timeline-line-node"></div>
-        </div>
-        <div className="timeline-line-segment end"></div>
-        {current && <div className="timeline-line-segment current-end" />}
-      </Col>
-      <Col className="timeline-pt-start">
-        <Row className="flex-nowrap">
-          <div className="col-auto flex-shrink-1 px-0">
-            <Row className="ml-n3 mr-0 align-items-center">
-              <span className="ml-3 text-primary white-space-no-wrap">
-                {props.post.time.toLocaleString(i18n.languages)}
-              </span>
-              <small className="text-dark ml-3">
-                {props.post.author.nickname}
-              </small>
-            </Row>
-          </div>
-          {more != null ? (
-            <div className="col-auto px-2 d-flex justify-content-center align-items-center">
-              <Svg
-                src={chevronDownIcon}
-                className="text-info icon-button"
-                onClick={(e: Event) => {
-                  more.toggle();
-                  e.stopPropagation();
-                }}
-              />
-            </div>
-          ) : null}
-        </Row>
-        <div className="row d-block timeline-content">
-          <Link
-            className="float-right float-sm-left mx-2"
-            to={'/users/' + props.post.author.username}
-          >
-            <img onLoad={onResize} src={avatarUrl} className="avatar rounded" />
-          </Link>
-          {(() => {
-            const { content } = props.post;
-            if (content.type === 'text') {
-              return content.text;
-            } else {
-              return (
-                <img
-                  onLoad={onResize}
-                  src={content.url}
-                  className="timeline-content-image"
-                />
-              );
-            }
-          })()}
-        </div>
-      </Col>
-      {more != null && more.isOpen ? (
-        <>
-          <div
-            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
-            onClick={more.toggle}
-          >
-            <Svg
-              src={trashIcon}
-              className="text-danger large-icon-button"
-              onClick={(e: Event) => {
-                toggleDeleteDialog();
-                e.stopPropagation();
-              }}
-            />
-          </div>
-          {deleteDialog ? (
-            <TimelinePostDeleteConfirmDialog
-              toggle={() => {
-                toggleDeleteDialog();
-                more.toggle();
-              }}
-              onConfirm={more.onDelete}
-            />
-          ) : null}
-        </>
-      ) : null}
-    </Row>
-  );
-};
-
-export default TimelineItem;
-- 
cgit v1.2.3