Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore

web/ASC.Web.Components/src/components/icons/svg/index.js

@@ -140,7 +140,7 @@ import OrigRadiobuttonDisabledCheckedIcon from './radiobutton.disabled.checked.r
 import OrigRadiobuttonHoverCheckedIcon from './radiobutton.hover.checked.react.svg'
 
 import OrigToggleButtonCheckedIcon from './toggle.button.checked.react.svg';
-import OrigToggleButtonUncheckedIcon from './toggle.button.unchecked.react.svg';
+import OrigToggleButtonIcon from './toggle.button.react.svg';
 
 export const AZSortingIcon = createStyledIcon(
   OrigAZSortingIcon,
@@ -694,8 +694,8 @@ export const ToggleButtonCheckedIcon = createStyledIcon(
   "rect"
 );
 
-export const ToggleButtonUncheckedIcon = createStyledIcon(
-  OrigToggleButtonUncheckedIcon,
-  'ToggleButtonUncheckedIcon',
+export const ToggleButtonIcon = createStyledIcon(
+  OrigToggleButtonIcon,
+  'ToggleButtonIcon',
   "rect"
 );

web/ASC.Web.Components/src/components/icons/svg/toggle.button.react.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="16" rx="8" fill="#A3A9AE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" fill="white"/>
+</svg>

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

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { Icons } from '../icons'
+
+const disableColor = "#ECEFF1";
+const DisableCss = css`
+    rect {
+        fill: ${disableColor};
+    }
+`;
+
+const ToggleContainer = styled.label`
+
+    position: absolute;
+    -webkit-appearance: none;
+    outline: none;
+    margin: 0;
+    display: flex;
+    align-items: center;
+
+    user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+
+    ${props => props.isDisabled ? 
+    css`
+        cursor: default !important;
+        svg {
+            ${DisableCss}
+          }
+    `  
+    : css` 
+        cursor: pointer;
+        `
+    };
+`;
+
+const HiddenInput = styled.input`
+    opacity: 0.0001;
+    position: absolute;
+    right: 0;
+    z-index: -1;
+`;
+
+const CheckboxIcon = ({ isChecked }) => {
+   
+    const iconName = isChecked ? "ToggleButtonCheckedIcon" : "ToggleButtonIcon";
+
+    return <>{React.createElement(Icons[iconName])}</>;
+};
+
+class ToggleButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            checked: this.props.isChecked
+        };
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.isChecked !== prevProps.isChecked) {
+            this.setState({ checked: this.props.isChecked });
+        }
+    }
+
+    onInputChange = (e) => {
+        this.setState({ checked: e.target.checked });
+        this.props.onChange 
+    }
+
+    render() {
+        return (
+            <ToggleContainer isDisabled={this.props.isDisabled}>
+                <HiddenInput
+                    type="checkbox"
+                    checked={this.state.checked}
+                    disabled={this.props.isDisabled}
+                    onChange={this.onInputChange}
+                    {...this.props}
+                />
+                <CheckboxIcon {...this.props} />
+            </ToggleContainer>
+        )
+    }
+}
+
+ToggleButton.propTypes = {
+    value: PropTypes.string.isRequired,
+    isChecked: PropTypes.bool.isRequired,
+    isDisabled: PropTypes.bool,
+    onChange: PropTypes.func
+};
+
+export default ToggleButton;

web/ASC.Web.Components/src/index.js

@@ -38,3 +38,4 @@ export { default as ToggleContent } from './components/toggle-content'
 export { default as RadioButtonGroup } from './components/radio-button-group'
 export { default as RadioButton } from './components/radio-button'
 export { default as TextArea } from './components/text-area'
+export { default as ToggleButton } from './components/toggle-button'

web/ASC.Web.Storybook/stories/input/toggle-button/README.md

@@ -0,0 +1,22 @@
+# ToggleButton
+
+#### Description
+
+Custom toggle button input
+
+#### Usage
+
+```js
+import { ToggleButton } from 'asc-web-components';
+
+<ToggleButton value="text" onChange={event => alert(event.target.value)}/>
+```
+
+#### Properties
+
+| Props                  | Type     | Required | Values                       | Default | Description                                                                                            |
+| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |                        
+| `value`                | `string` |    -    | -                            | -       | Value of the input      
+| `isChecked`                | `bool` |    -    | -                            | -       | The checked property sets the checked state of a ToggleButton.         
+| `isDisabled`                | `bool` |    -    | -                            | -       | Disables the ToggleButton 
+| `onChange`                | `func` |    ✅    | -                            | -       | Will be triggered whenever an ToggleButton is clicked                           

web/ASC.Web.Storybook/stories/input/toggle-button/index.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { BooleanValue } from 'react-values'
+import { withKnobs, boolean, text} from '@storybook/addon-knobs/react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import { ToggleButton } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+
+storiesOf('Components|Input', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withReadme(Readme))
+  .add('toggle button', () => {
+    return (
+      <Section>
+        <BooleanValue>
+          {({ value, toggle }) => (
+            <ToggleButton
+              value={text('value', 'value')}
+              isChecked={value}
+              isDisabled={boolean('isDisabled', false)}
+              onChange={e => {
+                action('onChange')(e);
+                toggle(e.target.checked);
+              }}
+            />
+          )}
+        </BooleanValue>
+      </Section>
+    )
+  });