Figma-Database-Table/plugin-src/column.tsx at 8836c460ae9e903d9c8cdbe044d94c28f6bda27f · PillFall/Figma-Database-Table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
const { widget } = figma;
const {
  // Components
  AutoLayout,
  Text,
} = widget;

import { KeyType, getKeyDecorator } from "./key";

export interface Column {
  name: string;
  type: string;
  nullable: boolean;
  keyType: KeyType | "normal";
  description?: string;
}

export function KeyColumn(props) {
  const { column } = props;
  const { icon, color } = getKeyDecorator(column);

  return (
    <AutoLayout
      width="fill-parent"
      fill="#ffffff"
      verticalAlignItems="center"
      horizontalAlignItems="center"
      direction="vertical"
      padding={{
        right: 16,
      }}
    >
      <AutoLayout
        width="fill-parent"
        height={48}
        padding={{
          right: 16,
        }}
        fill="#ffffff"
        verticalAlignItems="center"
        horizontalAlignItems="center"
        tooltip={column.description}
      >
        <Text
          width={32}
          height={32}
          fontSize={18}
          fontFamily="Font Awesome 6 Free"
          fontWeight={900}
          fill={color}
          verticalAlignText="center"
          horizontalAlignText="center"
        >
          {icon}
        </Text>

        <Text width="fill-parent" fontFamily="Roboto Mono" fontSize={18}>
          {column.name}
        </Text>
        <Text fontFamily="Roboto Mono" fontSize={18}>
          {column.type}
          {column.nullable ? "?" : ""}
        </Text>
      </AutoLayout>
      {column.description && (
        <AutoLayout
          width="fill-parent"
          padding={{
            left: 32,
            bottom: 8,
          }}
        >
          <Text
            width="fill-parent"
            fontFamily="Roboto Mono"
            fontSize={14}
            italic
            fill="#666"
          >
            {column.description}
          </Text>
        </AutoLayout>
      )}
    </AutoLayout>
  );
}

export default KeyColumn;