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

package/distribution/index.js

@@ -1528,6 +1528,7 @@ const EntityPillGroup = properties => {
 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;
@@ -1538,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));
 };
 
@@ -1636,17 +1640,26 @@ const StyledSwitch = styled__default["default"].label`
     }
 `;
 
-const StyledSwitchSlider = styled__default["default"].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;
     }
@@ -1668,23 +1681,20 @@ const StyledSwitchSlider = styled__default["default"].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__default["default"].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";
@@ -1717,25 +1727,44 @@ const StyledSwitchSlider = styled__default["default"].span`
     }
 `;
 
+const StyledSwitchIcon = styled__default["default"].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 || themes.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__default["default"].createElement(StyledSwitch, {
         theme: _theme
     }, React__default["default"].createElement("input", {
         type: "checkbox",
         checked: checked,
         onChange: () => atChange()
-    }), React__default["default"].createElement(StyledSwitchSlider, {
-        theme: _theme,
-        level: _level,
-        round: _round,
-        exclusive: exclusive,
-        checked: checked,
-        accent: accent
-    }));
+    }), React__default["default"].createElement(StyledSwitchSlider, Object.assign({
+        round: _round
+    }, commonProperties)), Icon && React__default["default"].createElement(StyledSwitchIcon, Object.assign({}, commonProperties, {
+        style: {
+            left: checked ? "35px" : "9px"
+        }
+    }), React__default["default"].createElement(Icon, null)));
 };
 
 const StyledInputSwitch = styled__default["default"].div`
@@ -1750,9 +1779,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"
@@ -2446,7 +2478,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;
@@ -2458,7 +2490,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)));
 };