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

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

@@ -7,6 +7,7 @@ export interface SwitchProperties {
     round?: boolean;
     exclusive?: boolean;
     accent?: string;
+    Icon?: React.FC<any>;
     atChange: () => void;
 }
 declare const Switch: React.FC<SwitchProperties>;

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

@@ -1,2 +1,3 @@
 export declare const StyledSwitch: any;
 export declare const StyledSwitchSlider: any;
+export declare const StyledSwitchIcon: any;

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/index.es.js

@@ -1510,6 +1510,7 @@ const EntityPillGroup = properties => {
 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;
@@ -1520,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));
 };
 
@@ -1618,17 +1622,26 @@ const StyledSwitch = styled.label`
     }
 `;
 
-const StyledSwitchSlider = styled.span`
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transition: .4s ease-in-out;
-    box-shadow: inset 0 2px 3px black;
+const levelBackgroundColor = props => {
+    switch (props.level) {
+      case 0:
+        return props.theme.backgroundColorPrimary;
 
-    background-color: ${props => {
+      case 1:
+        return props.theme.backgroundColorSecondary;
+
+      case 2:
+        return props.theme.backgroundColorTertiary;
+
+      case 3:
+        return props.theme.backgroundColorQuaternary;
+
+      default:
+        return props.theme.backgroundColorPrimary;
+    }
+};
+
+const backgroundColor = props => {
     if (props.accent) {
         return props.accent;
     }
@@ -1650,23 +1663,20 @@ const StyledSwitchSlider = styled.span`
             return props.theme.backgroundColorPrimaryAlpha;
         }
     }
-    switch (props.level) {
-      case 0:
-        return props.theme.backgroundColorPrimary;
-
-      case 1:
-        return props.theme.backgroundColorSecondary;
-
-      case 2:
-        return props.theme.backgroundColorTertiary;
+    return levelBackgroundColor(props);
+};
 
-      case 3:
-        return props.theme.backgroundColorQuaternary;
+const StyledSwitchSlider = styled.span`
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: .4s ease-in-out;
+    box-shadow: inset 0 2px 3px black;
 
-      default:
-        return props.theme.backgroundColorPrimary;
-    }
-}};
+    background-color: ${props => backgroundColor(props)};
     border-radius: ${props => {
     if (props.round) {
         return "34px";
@@ -1699,25 +1709,44 @@ const StyledSwitchSlider = styled.span`
     }
 `;
 
+const StyledSwitchIcon = styled.div`
+    height: 100%;
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    transition: .4s;
+
+    svg {
+        fill: ${props => levelBackgroundColor(props)};
+    }
+`;
+
 const Switch = properties => {
-    const {checked: checked, theme: theme, level: level, round: round, exclusive: exclusive, accent: accent, atChange: atChange} = properties;
+    const {checked: checked, theme: theme, level: level, round: round, exclusive: exclusive, accent: accent, Icon: Icon, atChange: atChange} = properties;
     const _theme = theme || plurid;
     const _level = level === undefined ? 0 : level;
     const _round = round === undefined ? true : round;
+    const commonProperties = {
+        theme: _theme,
+        level: _level,
+        exclusive: exclusive,
+        checked: checked,
+        accent: accent
+    };
     return React.createElement(StyledSwitch, {
         theme: _theme
     }, React.createElement("input", {
         type: "checkbox",
         checked: checked,
         onChange: () => atChange()
-    }), React.createElement(StyledSwitchSlider, {
-        theme: _theme,
-        level: _level,
-        round: _round,
-        exclusive: exclusive,
-        checked: checked,
-        accent: accent
-    }));
+    }), React.createElement(StyledSwitchSlider, Object.assign({
+        round: _round
+    }, commonProperties)), Icon && React.createElement(StyledSwitchIcon, Object.assign({}, commonProperties, {
+        style: {
+            left: checked ? "35px" : "9px"
+        }
+    }), React.createElement(Icon, null)));
 };
 
 const StyledInputSwitch = styled.div`
@@ -1732,9 +1761,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"
@@ -2428,7 +2460,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;
@@ -2440,7 +2472,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)));
 };