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

package/distribution/components/universal/index.d.ts

@@ -17,6 +17,8 @@ declare const universal: {
     };
     inputs: {
         Dropdown: import("react").FC<import("./inputs/Dropdown").DropdownProperties>;
+        EntityPill: import("react").FC<import("./inputs/EntityPill").EntityPillProperties>;
+        EntityPillGroup: import("react").FC<import("./inputs/EntityPillGroup").EntityPillGroupProperties>;
         InputBox: import("react").FC<import("./inputs/InputBox").InputBoxProperties>;
         InputDescriptor: import("react").FC<import("./inputs/InputDescriptor").InputDescriptorProperties>;
         InputLine: import("react").FC<import("./inputs/InputLine").InputLineProperties>;

package/distribution/components/universal/inputs/EntityPill/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+export interface EntityPillProperties {
+    id: string;
+    remove: (id: string) => void;
+    text?: string;
+    theme?: Theme;
+    style?: React.CSSProperties;
+}
+declare const EntityPill: React.FC<EntityPillProperties>;
+export default EntityPill;

package/distribution/components/universal/inputs/EntityPill/styled.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@plurid/plurid-themes';
+export interface IStyledEntityPill {
+    theme: Theme;
+}
+export declare const StyledEntityPill: import("styled-components").StyledComponent<"div", any, IStyledEntityPill, never>;

package/distribution/components/universal/inputs/EntityPillGroup/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
+import { PluridUIEntityPillData } from "../../../../data/interfaces";
+export interface EntityPillGroupProperties {
+    entities: (string | PluridUIEntityPillData)[];
+    remove: (id: string) => void;
+    keyFix?: string;
+    theme?: Theme;
+    style?: React.CSSProperties;
+    pillStyle?: React.CSSProperties;
+}
+declare const EntityPillGroup: React.FC<EntityPillGroupProperties>;
+export default EntityPillGroup;

package/distribution/components/universal/inputs/EntityPillGroup/styled.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@plurid/plurid-themes';
+export interface IStyledEntityPillGroup {
+    theme: Theme;
+}
+export declare const StyledEntityPillGroup: import("styled-components").StyledComponent<"div", any, IStyledEntityPillGroup, never>;

package/distribution/components/universal/inputs/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 declare const inputs: {
     Dropdown: import("react").FC<import("./Dropdown").DropdownProperties>;
+    EntityPill: import("react").FC<import("./EntityPill").EntityPillProperties>;
+    EntityPillGroup: import("react").FC<import("./EntityPillGroup").EntityPillGroupProperties>;
     InputBox: import("react").FC<import("./InputBox").InputBoxProperties>;
     InputDescriptor: import("react").FC<import("./InputDescriptor").InputDescriptorProperties>;
     InputLine: import("react").FC<import("./InputLine").InputLineProperties>;

package/distribution/data/interfaces/index.d.ts

@@ -3,6 +3,10 @@ export interface PluridUIDropdownSelectable {
     id: string;
     value: string;
 }
+export interface PluridUIEntityPillData {
+    id: string;
+    text?: string;
+}
 export declare type Small = 'small';
 export declare type Normal = 'normal';
 export declare type Large = 'large';

package/distribution/index.es.js

@@ -4,7 +4,7 @@ import themes, { plurid } from "@plurid/plurid-themes";
 
 import styled, { createGlobalStyle, keyframes } from "styled-components";
 
-import { PluridIconReset, PluridIconObliterate, PluridIconCopy, PluridIconInfo, PluridIconDelete, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
+import { PluridIconReset, PluridIconObliterate, PluridIconDelete, PluridIconCopy, PluridIconInfo, PluridIconPlay, PluridIconBranch, PluridIconNewStateline, PluridIconStateShareImage, PluridIconCopyCurrentState, PluridIconCopyStateHistory, PluridIconSittings, PluridIconSpeak } from "@plurid/plurid-icons-react";
 
 import { mergeReferences, useMounted, useFalseAfterTimedTrue, createMarkup } from "@plurid/plurid-functions-react";
 
@@ -1452,6 +1452,61 @@ const Dropdown = properties => {
     })))));
 };
 
+const StyledEntityPill = styled.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.createElement(StyledEntityPill, {
+        theme: theme || plurid,
+        style: Object.assign({}, style)
+    }, React.createElement("div", {
+        style: {
+            marginRight: "0.5rem"
+        }
+    }, textValue), React.createElement(PluridIconDelete, {
+        theme: theme,
+        atClick: () => remove(id)
+    }));
+};
+
+const StyledEntityPillGroup = styled.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.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.createElement(EntityPill, {
+            key: `entity-pill-${id}${keyFix || ""}`,
+            id: id,
+            text: text,
+            remove: remove,
+            theme: theme || plurid,
+            style: pillStyle
+        });
+    })));
+};
+
 const StyledInputDescriptor = styled.div`
     text-align: left;
     font-size: 0.9rem;
@@ -2027,6 +2082,8 @@ const Slider = properties => {
 
 const inputs = {
     Dropdown: Dropdown,
+    EntityPill: EntityPill,
+    EntityPillGroup: EntityPillGroup,
     InputBox: InputBox,
     InputDescriptor: InputDescriptor,
     InputLine: InputLine,