Files
flipper/desktop/app/src/chrome/settings/ToggledSection.tsx
Anton Nikolaev 863f89351e Yarn workspaces
Summary:
1) moved "sonar/desktop/src" to "sonar/desktop/app/src", so "app" is now a separate package containing the core Flipper app code
2) Configured yarn workspaces with the root in "sonar/desktop": app, static, pkg, doctor, headless-tests. Plugins are not included for now, I plan to do this later.

Reviewed By: jknoxville

Differential Revision: D20535782

fbshipit-source-id: 600b2301960f37c7d72166e0d04eba462bec9fc1
2020-03-20 13:37:41 -07:00

52 lines
1.2 KiB
TypeScript

/**
* 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>
);
}