web: components: Radiobutton re-written to Icons components + removed useless svg checkbox icons with different states

web/ASC.Web.Components/src/components/radio-button/index.js

@@ -1,29 +1,16 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Icons } from '../icons';
 import { getCssFromSvg } from '../icons/get-css-from-svg';
 import { Text } from '../text';
 
 const activeColor = '#000000',
   disableColor = '#A3A9AE';
-
+const hoverColor = disableColor;
-var radiobuttonIcon,
+const internalCircleDisabledColor = '#D0D5DA';
-  radiobuttonHoveredIcon,
+const externalCircleDisabledColor = '#eceef1';
-  radiobuttonСheckedIcon,
-  radiobuttonCheckedHoveredIcon,
-  radiobuttonDisabledIcon,
-  radiobuttonDisabledCheckedIcon;
-
-(function () {
-  radiobuttonIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.RadiobuttonIcon />));
-  radiobuttonHoveredIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.RadiobuttonHoverIcon />));
-  radiobuttonСheckedIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.RadiobuttonCheckedIcon />));
-  radiobuttonCheckedHoveredIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.RadiobuttonHoverCheckedIcon />));
-  radiobuttonDisabledIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.RadiobuttonDisabledIcon />));
-  radiobuttonDisabledCheckedIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.RadiobuttonDisabledCheckedIcon />));
-}());
 
 const Span = styled.span`
   display: flex;
@@ -34,37 +21,31 @@ const Span = styled.span`
   cursor: ${props => !props.isDisabled && 'pointer'};
 
   .radiobutton {
-    line-height: 16px;
+    margin-right: 4px;  
-    margin-bottom: 2px;
-    display: inline-block;
-    vertical-align: middle;
-    border: 0 none;
-    outline: none;
-    width: 16px;
-    height: 16px;
-    background-repeat: no-repeat;
-    background-image: url("data:image/svg+xml,${radiobuttonIcon}");
-
-    &:hover {
-      background-image: url("data:image/svg+xml,${radiobuttonHoveredIcon}");
-    }
-
-    &.checked {
-      background-image: url("data:image/svg+xml,${radiobuttonСheckedIcon}");
-
-        &:hover {
-          background-image: url("data:image/svg+xml,${radiobuttonCheckedHoveredIcon}");
-                }
-
-        &.disabled {
-          background-image: url("data:image/svg+xml,${radiobuttonDisabledCheckedIcon}");
-                  }
-    }
-
-    &.disabled {
-      background-image: url("data:image/svg+xml,${radiobuttonDisabledIcon}");
-    }
   }
+
+  ${props =>
+    props.isDisabled
+      ? css`
+          cursor: default;
+          path:first-child {
+            stroke: ${externalCircleDisabledColor};
+              }
+          path:nth-child(even) {
+            fill: ${internalCircleDisabledColor};
+          }
+        `
+      : css`
+          cursor: pointer;
+
+          &:hover {
+            svg {
+              path:first-child {
+                stroke: ${hoverColor};
+              }
+            }
+          }
+        `}
 `;
 
 const Input = styled.input`
@@ -76,7 +57,6 @@ const Input = styled.input`
 const TextBody = ({ isDisabled, ...props }) => <Text.Body {...props} />;
 
 const StyledText = styled(TextBody)`
-  margin-left: 4px;
   color: ${props => props.isDisabled ? disableColor : activeColor};
 `;
 
@@ -86,6 +66,24 @@ const StyledSpan = styled.span`
   }
 `;
 
+const RadiobuttonIcon = ({ isChecked, isDisabled }) => {
+  const iconName = isChecked
+    ? "RadiobuttonCheckedIcon"
+    : "RadiobuttonIcon";
+
+  let newProps = {
+    size: "medium",
+    className: "radiobutton"
+  };
+
+  if (isDisabled) {
+    newProps.isfill = true;
+    newProps.color = "#F8F9F9";
+  };
+
+  return <>{React.createElement(Icons[iconName], { ...newProps })}</>;
+};
+
 class RadioButton extends React.Component {
 
   constructor(props) {
@@ -105,10 +103,6 @@ class RadioButton extends React.Component {
 
 
   render() {
-    const rbtnClassName = 'radiobutton' +
-      (this.state.isChecked ? ' checked' : '') +
-      (this.props.isDisabled ? ' disabled' : '');
-
     return (
       <StyledSpan spacing={this.props.spacing}>
         <label>
@@ -122,8 +116,7 @@ class RadioButton extends React.Component {
                 this.props.onClick && this.props.onClick(e);
               }}
               disabled={this.props.isDisabled} />
-
+            <RadiobuttonIcon {...this.props} />
-            <span className={rbtnClassName} />
             <StyledText tag='span' isDisabled={this.props.isDisabled}>{this.props.label || this.props.value}</StyledText>
           </Span>
         </label>