use reflow to migrate from flow to typescript

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import {
+  Change,
+  Diff as DiffComponent,
+  DiffObjectProps,
+  File,
+  getChangeKey,
+  Hunk,
+} from 'react-diff-view';
+import { Button, ButtonGroup } from '../buttons';
+import Tag from '../Tag';
+import Icon from '../Icon';
+
+type Props = DiffObjectProps & {
+  file: File;
+  defaultCollapse: boolean;
+
+  // context props
+  t: (p: string) => string;
+};
+
+type State = {
+  collapsed: boolean;
+  sideBySide: boolean;
+};
+
+const DiffFilePanel = styled.div`
+  /* remove bottom border for collapsed panels */
+  ${props => (props.collapsed ? 'border-bottom: none;' : '')};
+`;
+
+const FlexWrapLevel = styled.div`
+  /* breaks into a second row
+     when buttons and title become too long */
+  flex-wrap: wrap;
+`;
+
+const FullWidthTitleHeader = styled.div`
+  max-width: 100%;
+`;
+
+const TitleWrapper = styled.span`
+  margin-left: 0.25rem;
+`;
+
+const ButtonWrapper = styled.div`
+  /* align child to right */
+  margin-left: auto;
+`;
+
+const HunkDivider = styled.hr`
+  margin: 0.5rem 0;
+`;
+
+const ChangeTypeTag = styled(Tag)`
+  margin-left: 0.75rem;
+`;
+
+const ModifiedDiffComponent = styled(DiffComponent)`
+  /* column sizing */
+  > colgroup .diff-gutter-col {
+    width: 3.25rem;
+  }
+  /* prevent following content from moving down */
+  > .diff-gutter:empty:hover::after {
+    font-size: 0.7rem;
+  }
+  /* smaller font size for code */
+  & .diff-line {
+    font-size: 0.75rem;
+  }
+  /* comment padding for sidebyside view */
+  &.split .diff-widget-content .is-indented-line {
+    padding-left: 3.25rem;
+  }
+  /* comment padding for combined view */
+  &.unified .diff-widget-content .is-indented-line {
+    padding-left: 6.5rem;
+  }
+`;
+
+class DiffFile extends React.Component<Props, State> {
+  static defaultProps = {
+    defaultCollapse: false,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      collapsed: this.props.defaultCollapse,
+      sideBySide: false,
+    };
+  }
+
+  // collapse diff by clicking collapseDiffs button
+  componentDidUpdate(prevProps) {
+    const { defaultCollapse } = this.props;
+    if (prevProps.defaultCollapse !== defaultCollapse) {
+      this.setState({
+        collapsed: defaultCollapse,
+      });
+    }
+  }
+
+  toggleCollapse = () => {
+    const { file } = this.props;
+    if (file && !file.isBinary) {
+      this.setState(state => ({
+        collapsed: !state.collapsed,
+      }));
+    }
+  };
+
+  toggleSideBySide = () => {
+    this.setState(state => ({
+      sideBySide: !state.sideBySide,
+    }));
+  };
+
+  setCollapse = (collapsed: boolean) => {
+    this.setState({
+      collapsed,
+    });
+  };
+
+  createHunkHeader = (hunk: Hunk, i: number) => {
+    if (i > 0) {
+      return <HunkDivider />;
+    }
+    return null;
+  };
+
+  collectHunkAnnotations = (hunk: Hunk) => {
+    const { annotationFactory, file } = this.props;
+    if (annotationFactory) {
+      return annotationFactory({
+        hunk,
+        file,
+      });
+    }
+  };
+
+  handleClickEvent = (change: Change, hunk: Hunk) => {
+    const { file, onClick } = this.props;
+    const context = {
+      changeId: getChangeKey(change),
+      change,
+      hunk,
+      file,
+    };
+    if (onClick) {
+      onClick(context);
+    }
+  };
+
+  createCustomEvents = (hunk: Hunk) => {
+    const { onClick } = this.props;
+    if (onClick) {
+      return {
+        gutter: {
+          onClick: (change: Change) => {
+            this.handleClickEvent(change, hunk);
+          },
+        },
+      };
+    }
+  };
+
+  renderHunk = (hunk: Hunk, i: number) => {
+    return (
+      <Hunk
+        key={hunk.content}
+        hunk={hunk}
+        header={this.createHunkHeader(hunk, i)}
+        widgets={this.collectHunkAnnotations(hunk)}
+        customEvents={this.createCustomEvents(hunk)}
+      />
+    );
+  };
+
+  renderFileTitle = (file: any) => {
+    if (
+      file.oldPath !== file.newPath &&
+      (file.type === 'copy' || file.type === 'rename')
+    ) {
+      return (
+        <>
+          {file.oldPath} <Icon name="arrow-right" color="inherit" />{' '}
+          {file.newPath}
+        </>
+      );
+    } else if (file.type === 'delete') {
+      return file.oldPath;
+    }
+    return file.newPath;
+  };
+
+  hoverFileTitle = (file: any) => {
+    if (
+      file.oldPath !== file.newPath &&
+      (file.type === 'copy' || file.type === 'rename')
+    ) {
+      return (
+        <>
+          {file.oldPath} > {file.newPath}
+        </>
+      );
+    } else if (file.type === 'delete') {
+      return file.oldPath;
+    }
+    return file.newPath;
+  };
+
+  renderChangeTag = (file: any) => {
+    const { t } = this.props;
+    if (!file.type) {
+      return;
+    }
+    const key = 'diff.changes.' + file.type;
+    let value = t(key);
+    if (key === value) {
+      value = file.type;
+    }
+    const color =
+      value === 'added'
+        ? 'success is-outlined'
+        : value === 'deleted'
+        ? 'danger is-outlined'
+        : 'info is-outlined';
+
+    return (
+      <ChangeTypeTag
+        className={classNames('is-rounded', 'has-text-weight-normal')}
+        color={color}
+        label={value}
+      />
+    );
+  };
+
+  render() {
+    const { file, fileControlFactory, fileAnnotationFactory, t } = this.props;
+    const { collapsed, sideBySide } = this.state;
+    const viewType = sideBySide ? 'split' : 'unified';
+
+    let body = null;
+    let icon = 'angle-right';
+    if (!collapsed) {
+      const fileAnnotations = fileAnnotationFactory
+        ? fileAnnotationFactory(file)
+        : null;
+      icon = 'angle-down';
+      body = (
+        <div className="panel-block is-paddingless">
+          {fileAnnotations}
+          <ModifiedDiffComponent className={viewType} viewType={viewType}>
+            {file.hunks.map(this.renderHunk)}
+          </ModifiedDiffComponent>
+        </div>
+      );
+    }
+    const collapseIcon =
+      file && !file.isBinary ? <Icon name={icon} color="inherit" /> : null;
+
+    const fileControls = fileControlFactory
+      ? fileControlFactory(file, this.setCollapse)
+      : null;
+    return (
+      <DiffFilePanel
+        className={classNames('panel', 'is-size-6')}
+        collapsed={(file && file.isBinary) || collapsed}
+      >
+        <div className="panel-heading">
+          <FlexWrapLevel className="level">
+            <FullWidthTitleHeader
+              className={classNames(
+                'level-left',
+                'is-flex',
+                'has-cursor-pointer',
+              )}
+              onClick={this.toggleCollapse}
+              title={this.hoverFileTitle(file)}
+            >
+              {collapseIcon}
+              <TitleWrapper
+                className={classNames('is-ellipsis-overflow', 'is-size-6')}
+              >
+                {this.renderFileTitle(file)}
+              </TitleWrapper>
+              {this.renderChangeTag(file)}
+            </FullWidthTitleHeader>
+            <ButtonWrapper className={classNames('level-right', 'is-flex')}>
+              <ButtonGroup>
+                <Button
+                  action={this.toggleSideBySide}
+                  icon={sideBySide ? 'align-left' : 'columns'}
+                  label={t(sideBySide ? 'diff.combined' : 'diff.sideBySide')}
+                  reducedMobile={true}
+                />
+                {fileControls}
+              </ButtonGroup>
+            </ButtonWrapper>
+          </FlexWrapLevel>
+        </div>
+        {body}
+      </DiffFilePanel>
+    );
+  }
+}
+
+export default translate('repos')(DiffFile);