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

package/distribution/index.js

@@ -1470,9 +1470,65 @@ 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;
+    line-height: 1;
     min-height: 1.1rem;
     margin-top: 1.3rem;
     margin-bottom: 0.4rem;
@@ -1483,9 +1539,12 @@ const StyledInputDescriptor = styled__default["default"].div`
 `;
 
 const InputDescriptor = properties => {
-    const {name: name, show: show, theme: theme} = properties;
+    const {name: name, show: show, theme: themeProperty, style: style, className: className} = properties;
+    const theme = themeProperty || themes.plurid;
     return React__default["default"].createElement(StyledInputDescriptor, {
-        theme: theme
+        theme: theme,
+        className: className,
+        style: Object.assign({}, style)
     }, show && React__default["default"].createElement(React__default["default"].Fragment, null, name));
 };
 
@@ -1695,9 +1754,12 @@ const StyledInputSwitch = styled__default["default"].div`
 `;
 
 const InputSwitch = properties => {
-    const {name: name, checked: checked, atChange: atChange, theme: theme, compact: compact} = properties;
+    const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, style: style, className: className} = properties;
+    const theme = themeProperty || themes.plurid;
     return React__default["default"].createElement(StyledInputSwitch, {
-        compact: compact
+        compact: compact,
+        style: Object.assign({}, style),
+        className: className
     }, React__default["default"].createElement(FormLeftRight, null, React__default["default"].createElement("div", {
         style: {
             marginLeft: "0.9rem"
@@ -2045,6 +2107,8 @@ const Slider = properties => {
 
 const inputs = {
     Dropdown: Dropdown,
+    EntityPill: EntityPill,
+    EntityPillGroup: EntityPillGroup,
     InputBox: InputBox,
     InputDescriptor: InputDescriptor,
     InputLine: InputLine,
@@ -2389,7 +2453,7 @@ const StyledData = styled__default["default"].div`
 `;
 
 const CopyableLine = properties => {
-    const {data: data, viewData: viewData, copyMessage: copyMessage, copyMessageTime: copyMessageTime, style: style, className: className} = properties;
+    const {data: data, theme: theme, viewData: viewData, copyMessage: copyMessage, copyMessageTime: copyMessageTime, style: style, className: className} = properties;
     const viewDataText = viewData || data;
     const copyMessageText = copyMessage !== null && copyMessage !== void 0 ? copyMessage : "copied";
     const copyMessageTimeValue = copyMessageTime || 2e3;
@@ -2401,7 +2465,8 @@ const CopyableLine = properties => {
         atClick: () => {
             pluridFunctions.clipboard.copy(data);
             setShowCopyMessage(true);
-        }
+        },
+        theme: theme
     }), React__default["default"].createElement(StyledData, null, showCopyMessage ? React__default["default"].createElement(React__default["default"].Fragment, null, copyMessageText) : React__default["default"].createElement(React__default["default"].Fragment, null, viewDataText)));
 };