/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
import React from 'react';

const IndentedSection = styled(FlexColumn)({
  paddingLeft: 50,
});
const GreyedOutOverlay = styled('div')({
  backgroundColor: '#EFEEEF',
  borderRadius: 4,
  opacity: 0.6,
  height: '100%',
  position: 'absolute',
  left: 0,
  right: 0,
});

export default function ToggledSection(props: {
  label: string;
  toggled: boolean;
  onChange?: (value: boolean) => void;
  children?: React.ReactNode;
  // Whether to disallow interactions with this toggle
  frozen?: boolean;
}) {
  return (
    <FlexColumn>
      <FlexRow>
        <ToggleButton
          label={props.label}
          onClick={() => props.onChange && props.onChange(!props.toggled)}
          toggled={props.toggled}
        />
        {props.frozen && <GreyedOutOverlay />}
      </FlexRow>
      <IndentedSection>
        {props.children}
        {props.toggled || props.frozen ? null : <GreyedOutOverlay />}
      </IndentedSection>
    </FlexColumn>
  );
}

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
import React from 'react';

const IndentedSection = styled(FlexColumn)({
  paddingLeft: 50,
  paddingBottom: 10,
});
const GreyedOutOverlay = styled('div')({
  backgroundColor: '#EFEEEF',
  borderRadius: 4,
  opacity: 0.6,
  height: '100%',
  position: 'absolute',
  left: 0,
  right: 0,
});

export default function ToggledSection(props: {
  label: string;
  toggled: boolean;
  onChange?: (value: boolean) => void;
  children?: React.ReactNode;
  // Whether to disallow interactions with this toggle
  frozen?: boolean;
}) {
  return (
    <FlexColumn>
      <FlexRow>
        <ToggleButton
          label={props.label}
          onClick={() => props.onChange && props.onChange(!props.toggled)}
          toggled={props.toggled}
        />
        {props.frozen && <GreyedOutOverlay />}
      </FlexRow>
      <IndentedSection>
        {props.children}
        {props.toggled || props.frozen ? null : <GreyedOutOverlay />}
      </IndentedSection>
    </FlexColumn>
  );
}

Add some padding between sections in settings
Add some padding between sections in settings

Reviewed By: priteshrnandgaonkar

Differential Revision: D18085724

fbshipit-source-id: d874a21399e86f0079bf1cc86d4b83be6ce5a5d7
