lowcoder/client/packages/lowcoder-design/src/components/keyValueList.tsx at e43aba83a19cb955f03ba2d022ef2b9e5d294bb9 · lowcoder-org/lowcoder · 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
89
90
91
92
93
94
95
96
97
98
99
100
import styled from "styled-components";
import { ReactComponent as Bin } from "icons/v1/icon-recycle-bin.svg";
import { TacoButton } from "./button";
import { ReactNode } from "react";
import { BluePlusIcon } from "icons";
import { trans } from "i18n/design";

const KeyValueListItem = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 8px;
`;

const DelIcon = styled(Bin)<{
  $forbidden?: boolean;
}>`
  height: 16px;
  width: 16px;
  margin-left: 8px;
  flex-shrink: 0;

  g g {
    ${(props) => props.$forbidden && "stroke: #D7D9E0;"}
  }

  &:hover {
    cursor: ${(props) => (props.$forbidden ? "default" : "pointer")};
  }

  &:hover g {
    ${(props) => !props.$forbidden && "stroke: #315efb;"}
  }
`;

const AddIcon = styled(BluePlusIcon)`
  height: 8px;
  width: 8px;
  margin-right: 4px;
`;
const AddBtn = styled(TacoButton)`
  height: 13px;
  padding: 0;
  color: #4965f2;
  border: none;
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 13px;
  box-shadow: none;
  margin-bottom: 2px;

  &:hover {
    color: #315efb;
    border: none;
    background-color: #ffffff;
  }

  &:focus {
    color: #315efb;
    border: none;
    background-color: #ffffff;
  }

  &:hover ${AddIcon} g {
    stroke: #315efb;
  }

  > svg {
    height: 8px;
    width: 8px;
  }
`;

export const KeyValueList = (props: {
  list: ReactNode[];
  onAdd: () => void;
  onDelete: (item: ReactNode, index: number) => void;
  isStatic?: boolean;
}) => (
  <>
    {props.list.map((item, index) => (
      <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
        {item}
        {!props.isStatic &&
          <DelIcon
            onClick={() => props.list.length > 1 && props.onDelete(item, index)}
            $forbidden={props.list.length === 1}
          />
        }
      </KeyValueListItem>
    ))}
    {!props.isStatic &&
    <AddBtn onClick={props.onAdd}>
      <AddIcon />
      {trans("addItem")}
    </AddBtn>
    }
  </>
);