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

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/InputDescriptor/index.d.ts

@@ -3,7 +3,9 @@ import { Theme } from '@plurid/plurid-themes';
 export interface InputDescriptorProperties {
     name: string;
     show: boolean;
-    theme: Theme;
+    theme?: Theme;
+    style?: React.CSSProperties;
+    className?: string;
 }
 declare const InputDescriptor: React.FC<InputDescriptorProperties>;
 export default InputDescriptor;

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

@@ -1,10 +1,13 @@
 import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
 export interface InputSwitchProperties {
     name: string;
     checked: boolean;
-    theme: any;
     atChange: () => void;
+    theme?: Theme;
     compact?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
 }
 declare const InputSwitch: React.FC<InputSwitchProperties>;
 export default InputSwitch;

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/components/universal/varia/CopyableLine/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Theme } from '@plurid/plurid-themes';
 export interface CopyableLineProperties {
     /**
      * Data to be copied.
@@ -7,6 +8,7 @@ export interface CopyableLineProperties {
     /**
      * Data to be shown.
      */
+    theme?: Theme;
     viewData?: string;
     copyMessage?: string;
     copyMessageTime?: number;

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,9 +1452,65 @@ 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;
+    line-height: 1;
     min-height: 1.1rem;
     margin-top: 1.3rem;
     margin-bottom: 0.4rem;
@@ -1465,9 +1521,12 @@ const StyledInputDescriptor = styled.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 || plurid;
     return React.createElement(StyledInputDescriptor, {
-        theme: theme
+        theme: theme,
+        className: className,
+        style: Object.assign({}, style)
     }, show && React.createElement(React.Fragment, null, name));
 };
 
@@ -1677,9 +1736,12 @@ const StyledInputSwitch = styled.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 || plurid;
     return React.createElement(StyledInputSwitch, {
-        compact: compact
+        compact: compact,
+        style: Object.assign({}, style),
+        className: className
     }, React.createElement(FormLeftRight, null, React.createElement("div", {
         style: {
             marginLeft: "0.9rem"
@@ -2027,6 +2089,8 @@ const Slider = properties => {
 
 const inputs = {
     Dropdown: Dropdown,
+    EntityPill: EntityPill,
+    EntityPillGroup: EntityPillGroup,
     InputBox: InputBox,
     InputDescriptor: InputDescriptor,
     InputLine: InputLine,
@@ -2371,7 +2435,7 @@ const StyledData = styled.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;
@@ -2383,7 +2447,8 @@ const CopyableLine = properties => {
         atClick: () => {
             clipboard.copy(data);
             setShowCopyMessage(true);
-        }
+        },
+        theme: theme
     }), React.createElement(StyledData, null, showCopyMessage ? React.createElement(React.Fragment, null, copyMessageText) : React.createElement(React.Fragment, null, viewDataText)));
 };