feat(Toggle): add prop 'child' and 'childPosition'

packages/react-ui/components/Toggle/Toggle.md

@@ -7,3 +7,18 @@ let toggle = () => setState(state => ({ checked: !state.checked }));
   <Toggle checked={state.checked} onValueChange={toggle} /> {state.checked ? 'On' : 'Off'}
 </div>;
 ```
+
+В компонент можно передать `children`, который будет отображаться рядом с переключателем.
+Положение `children` относительно переключателя указывается в `captionPosition`.
+
+```jsx harmony
+let initialState = { checked: false };
+
+let toggle = () => setState(state => ({ checked: !state.checked }));
+
+<div>
+  <Toggle checked={state.checked} onValueChange={toggle} captionPosition="left">
+    <span>Показывать уведомления</span>
+  </Toggle>
+</div>;
+```

packages/react-ui/components/Toggle/Toggle.styles.ts

@@ -2,6 +2,29 @@ import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
 
 const styles = {
+  root(t: Theme) {
+    const disabled = cssName(styles.disabled(t));
+    const handleWidthWithBorders = t.toggleHeight;
+    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;
+    return css`
+      display: inline-flex;
+      cursor: pointer;
+
+      &:hover:not(${disabled}) {
+        ${cssName(styles.handle(t))} {
+          background: ${t.toggleBgHover};
+        }
+      }
+      &:active:not(${disabled}) ${cssName(styles.handle(t))} {
+        width: ${handleActiveWidth};
+      }
+      &:active:not(${disabled}) ${cssName(styles.input(t))}:checked ~ ${cssName(styles.handle(t))} {
+        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})
+          translateX(-${t.toggleHandleActiveWidthIncrement});
+      }
+    `;
+  },
+
   handle(t: Theme) {
     const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;
     return css`
@@ -114,45 +137,42 @@ const styles = {
   },
 
   wrapper(t: Theme) {
-    const wrapperDisabled = cssName(styles.wrapperDisabled(t));
-    const handleWidthWithBorders = t.toggleHeight;
-    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;
     return css`
-      cursor: pointer;
       display: inline-block;
       height: ${t.toggleHeight};
       position: relative;
       width: ${t.toggleWidth};
+      min-width: ${t.toggleWidth};
 
-      &:hover:not(${wrapperDisabled}) {
-        ${cssName(styles.handle(t))} {
-          background: ${t.toggleBgHover};
-        }
-      }
       &::after {
         content: '';
         display: inline-block;
       }
-      &:active:not(${wrapperDisabled}) ${cssName(styles.handle(t))} {
-        width: ${handleActiveWidth};
-      }
-      &:active:not(${wrapperDisabled}) ${cssName(styles.input(t))}:checked ~ ${cssName(styles.handle(t))} {
-        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})
-          translateX(-${t.toggleHandleActiveWidthIncrement});
-      }
     `;
   },
 
-  wrapperDisabled(t: Theme) {
+  disabled(t: Theme) {
     return css`
       opacity: 0.3;
-      cursor: default;
+      cursor: default !important;
 
       ${cssName(styles.container(t))} {
         background: ${t.toggleBgDisabled};
       }
     `;
   },
+
+  captionLeft(t: Theme) {
+    return css`
+      padding-right: ${t.toggleCaptionGap};
+    `;
+  },
+
+  captionRight(t: Theme) {
+    return css`
+      padding-left: ${t.toggleCaptionGap};
+    `;
+  },
 };
 
 export const jsStyles = memoizeStyle(styles);

packages/react-ui/components/Toggle/Toggle.tsx

@@ -9,6 +9,12 @@ import { Theme } from '../../lib/theming/Theme';
 import { jsStyles } from './Toggle.styles';
 
 export interface ToggleProps {
+  children?: React.ReactNode;
+  /**
+   * Положение children справа или слева от переключателя
+   * @default 'right'
+   */
+  captionPosition: 'left' | 'right';
   checked?: boolean;
   defaultChecked?: boolean;
   disabled?: boolean;
@@ -44,6 +50,7 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
   public static defaultProps = {
     disabled: false,
     loading: false,
+    captionPosition: 'right',
   };
 
   private theme!: Theme;
@@ -87,7 +94,7 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
   }
 
   private renderMain() {
-    const { warning, error, loading, color } = this.props;
+    const { children, captionPosition, warning, error, loading, color } = this.props;
     const disabled = this.props.disabled || loading;
     const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
 
@@ -98,40 +105,53 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
       [jsStyles.isError(this.theme)]: !color && !!error,
     });
 
+    let caption = null;
+    if (children) {
+      const captionClass = cn({
+        [jsStyles.captionLeft(this.theme)]: captionPosition === 'left',
+        [jsStyles.captionRight(this.theme)]: captionPosition === 'right',
+      });
+      caption = <span className={captionClass}>{children}</span>;
+    }
+
     return (
       <label
-        className={cn(jsStyles.wrapper(this.theme), {
-          [jsStyles.wrapperDisabled(this.theme)]: !!disabled,
+        className={cn(jsStyles.root(this.theme), {
+          [jsStyles.disabled(this.theme)]: !!disabled,
         })}
       >
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={this.handleChange}
-          className={jsStyles.input(this.theme)}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-          ref={this.inputRef}
-          disabled={disabled}
-        />
-        <div
-          className={containerClassNames}
-          style={
-            checked && color
-              ? {
-                  backgroundColor: color,
-                  borderColor: color,
-                  boxShadow: `inset 0 0 0 1px ${color}`,
-                }
-              : undefined
-          }
-        >
-          <div
-            className={jsStyles.activeBackground()}
-            style={checked && color ? { backgroundColor: color } : undefined}
+        {captionPosition === 'left' ? caption : null}
+        <span className={jsStyles.wrapper(this.theme)}>
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={this.handleChange}
+            className={jsStyles.input(this.theme)}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            ref={this.inputRef}
+            disabled={disabled}
           />
-        </div>
-        <div className={jsStyles.handle(this.theme)} />
+          <div
+            className={containerClassNames}
+            style={
+              checked && color
+                ? {
+                    backgroundColor: color,
+                    borderColor: color,
+                    boxShadow: `inset 0 0 0 1px ${color}`,
+                  }
+                : undefined
+            }
+          >
+            <div
+              className={jsStyles.activeBackground()}
+              style={checked && color ? { backgroundColor: color } : undefined}
+            />
+          </div>
+          <div className={jsStyles.handle(this.theme)} />
+        </span>
+        {captionPosition === 'right' ? caption : null}
       </label>
     );
   }