SCM-Manager/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx

import React from "react";
import { Interpolate, translate } from "react-i18next";
import classNames from "classnames";
import styled from "styled-components";
import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { Changeset, Repository } from "@scm-manager/ui-types";
import DateFromNow from "../../DateFromNow";
import { AvatarWrapper, AvatarImage } from "../../avatar";
import { parseDescription } from "./changesets";
import ChangesetId from "./ChangesetId";
import ChangesetAuthor from "./ChangesetAuthor";
import ChangesetTags from "./ChangesetTags";
import ChangesetButtonGroup from "./ChangesetButtonGroup";

type Props = {
  repository: Repository;
  changeset: Changeset;

  // context props
  t: (p: string) => string;
};

const Wrapper = styled.div`
  // & references parent rule
  // have a look at https://cssinjs.org/jss-plugin-nested?v=v10.0.0-alpha.9
  & + & {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(219, 219, 219, 0.5);
  }
`;

const AvatarFigure = styled.figure`
  margin-top: 0.5rem;
  margin-right: 0.5rem;
`;

const FixedSizedAvatar = styled.div`
  width: 35px;
  height: 35px;
`;

const Metadata = styled.div`
  margin-left: 0;
  width: 100%;
`;

const AuthorWrapper = styled.p`
  margin-top: 0.5rem;
`;

const VCenteredColumn = styled.div`
  align-self: center;
`;

const VCenteredChildColumn = styled.div`
  align-items: center;
  justify-content: flex-end;
`;

class ChangesetRow extends React.Component<Props> {
  createChangesetId = (changeset: Changeset) => {
    const { repository } = this.props;
    return <ChangesetId changeset={changeset} repository={repository} />;
  };

  render() {
    const { repository, changeset } = this.props;
    const description = parseDescription(changeset.description);
    const changesetId = this.createChangesetId(changeset);
    const dateFromNow = <DateFromNow date={changeset.date} />;

    return (
      <Wrapper>
        <div className="columns is-gapless is-mobile">
          <div className="column is-three-fifths">
            <div className="columns is-gapless">
              <div className="column is-four-fifths">
                <div className="media">
                  <AvatarWrapper>
                    <AvatarFigure className="media-left">
                      <FixedSizedAvatar className="image">
                        <AvatarImage person={changeset.author} />
                      </FixedSizedAvatar>
                    </AvatarFigure>
                  </AvatarWrapper>
                  <Metadata className="media-right">
                    <h4 className="has-text-weight-bold is-ellipsis-overflow">
                      <ExtensionPoint
                        name="changeset.description"
                        props={{
                          changeset,
                          value: description.title
                        }}
                        renderAll={false}
                      >
                        {description.title}
                      </ExtensionPoint>
                    </h4>
                    <p className="is-hidden-touch">
                      <Interpolate i18nKey="changeset.summary" id={changesetId} time={dateFromNow} />
                    </p>
                    <p className="is-hidden-desktop">
                      <Interpolate i18nKey="changeset.shortSummary" id={changesetId} time={dateFromNow} />
                    </p>
                    <AuthorWrapper className="is-size-7">
                      <ChangesetAuthor changeset={changeset} />
                    </AuthorWrapper>
                  </Metadata>
                </div>
              </div>
              <VCenteredColumn className="column">
                <ChangesetTags changeset={changeset} />
              </VCenteredColumn>
            </div>
          </div>
          <VCenteredChildColumn className={classNames("column", "is-flex")}>
            <ChangesetButtonGroup repository={repository} changeset={changeset} />
            <ExtensionPoint
              name="changeset.right"
              props={{
                repository,
                changeset
              }}
              renderAll={true}
            />
          </VCenteredChildColumn>
        </div>
      </Wrapper>
    );
  }
}

export default translate("repos")(ChangesetRow);