@plurid/plurid-ui-components-react 0.0.0-4 → 0.0.0-5

package/distribution/index.js

@@ -1470,6 +1470,61 @@ const Dropdown = properties => {
     })))));
 };
 
+const StyledEntityPill = styled__default["default"].div`
+    background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
+    box-shadow: ${({theme: theme}) => theme.boxShadowUmbra};
+
+    padding: 0.5rem 1rem;
+    margin: 0.5rem;
+    border-radius: 20px;
+
+    display: flex;
+    align-items: center;
+`;
+
+const EntityPill = properties => {
+    const {id: id, remove: remove, text: text, theme: theme, style: style} = properties;
+    const textValue = text || id;
+    return React__default["default"].createElement(StyledEntityPill, {
+        theme: theme || themes.plurid,
+        style: Object.assign({}, style)
+    }, React__default["default"].createElement("div", {
+        style: {
+            marginRight: "0.5rem"
+        }
+    }, textValue), React__default["default"].createElement(pluridIconsReact.PluridIconDelete, {
+        theme: theme,
+        atClick: () => remove(id)
+    }));
+};
+
+const StyledEntityPillGroup = styled__default["default"].div`
+    display: flex;
+    flex-flow: wrap;
+    margin: 0 auto;
+    justify-content: center;
+`;
+
+const EntityPillGroup = properties => {
+    const {entities: entities, remove: remove, keyFix: keyFix, theme: theme, style: style, pillStyle: pillStyle} = properties;
+    return React__default["default"].createElement(StyledEntityPillGroup, {
+        theme: theme,
+        style: Object.assign({}, style)
+    }, entities.map((entity => {
+        const stringEntity = typeof entity === "string";
+        const id = stringEntity ? entity : entity.id;
+        const text = stringEntity ? undefined : entity.text;
+        return React__default["default"].createElement(EntityPill, {
+            key: `entity-pill-${id}${keyFix || ""}`,
+            id: id,
+            text: text,
+            remove: remove,
+            theme: theme || themes.plurid,
+            style: pillStyle
+        });
+    })));
+};
+
 const StyledInputDescriptor = styled__default["default"].div`
     text-align: left;
     font-size: 0.9rem;
@@ -2045,6 +2100,8 @@ const Slider = properties => {
 
 const inputs = {
     Dropdown: Dropdown,
+    EntityPill: EntityPill,
+    EntityPillGroup: EntityPillGroup,
     InputBox: InputBox,
     InputDescriptor: InputDescriptor,
     InputLine: InputLine,