diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/timeline/TimelineItem.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/app/timeline/TimelineItem.tsx | 181 | 
1 files changed, 0 insertions, 181 deletions
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx deleted file mode 100644 index 33f0741e..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 BlobImage from "../common/BlobImage"; -import { useAvatar } from "../data/user"; -import { TimelinePostInfo } from "../data/timeline"; - -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; -  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 avatar = useAvatar(props.post.author.username); - -  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} -          > -            <BlobImage -              onLoad={onResize} -              blob={avatar} -              className="avatar rounded" -            /> -          </Link> -          {(() => { -            const { content } = props.post; -            if (content.type === "text") { -              return content.text; -            } else { -              return ( -                <BlobImage -                  onLoad={onResize} -                  blob={content.data} -                  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;  | 
