CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/components/labeled-row.tsx
Views: 687
1
/*

2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import React from "react";

7
import { Row, Col, Descriptions } from "antd";

8


9
interface Props {

10
  label_cols?: number;

11
  label?: string | React.ReactNode;

12
  style?: React.CSSProperties;

13
  className?: string;

14
  children: React.ReactNode;

15
  extra?: React.ReactNode;

16
  extra_cols?: number;

17
  innerStyle?: React.CSSProperties;

18
  vertical?: boolean;

19
}

20


21
export const LabeledRow: React.FC<Props> = ({

22
  children,

23
  style,

24
  label,

25
  className,

26
  label_cols = 4,

27
  extra,

28
  extra_cols = 1,

29
  innerStyle = { marginTop: "8px" },

30
  vertical = false,

31
}) => {

32
  const spanLabel = 2 * label_cols;

33
  const spanExtra = extra != null ? extra_cols : 0;

34
  const spanChildren = 24 - spanLabel - spanExtra;

35


36
  function renderExtra() {

37
    if (extra == null) return;

38
    return (

39
      <Col span={spanExtra} style={{ ...innerStyle, textAlign: "right" }}>

40
        {extra}

41
      </Col>

42
    );

43
  }

44


45
  function renderHorizontal() {

46
    return (

47
      <Row style={style} className={className}>

48
        <Col span={spanLabel} style={innerStyle}>

49
          {label}

50
        </Col>

51
        <Col span={spanChildren} style={innerStyle}>

52
          {children}

53
        </Col>

54
        {renderExtra()}

55
      </Row>

56
    );

57
  }

58


59
  function renderVertical() {

60
    return (

61
      <Descriptions style={style} layout="vertical" column={1} size={"small"}>

62
        <Descriptions.Item label={label} style={innerStyle}>

63
          {children}

64
          {extra != null ? (

65
            <div style={{ textAlign: "right" }}>{extra}</div>

66
          ) : undefined}

67
        </Descriptions.Item>

68
      </Descriptions>

69
    );

70
  }

71


72
  return vertical ? renderVertical() : renderHorizontal();

73
};

74


75