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

package/distribution/index.js

@@ -1640,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;
     }
@@ -1672,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";
@@ -1721,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`