mirror of https://github.com/jitsi/jitsi-meet
Steffen Kolmer
4 years ago
committed by
Saúl Ibarra Corretgé
parent
a9bb8e5e81
commit
ef7d425859
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,90 @@ |
||||
// @flow
|
||||
/* eslint-disable react/no-multi-comp */ |
||||
import ErrorIcon from '@atlaskit/icon/glyph/error'; |
||||
import WarningIcon from '@atlaskit/icon/glyph/warning'; |
||||
import { |
||||
Header, |
||||
Title, |
||||
titleIconWrapperStyles, |
||||
TitleText |
||||
} from '@atlaskit/modal-dialog/dist/es2019/styled/Content'; |
||||
import React from 'react'; |
||||
|
||||
import { Icon, IconClose } from '../../../icons'; |
||||
|
||||
const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => { |
||||
if (!appearance) { |
||||
return null; |
||||
} |
||||
|
||||
const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon; |
||||
|
||||
return ( |
||||
<span css = { titleIconWrapperStyles(appearance) }> |
||||
<IconSymbol label = { `${appearance} icon` } /> |
||||
</span> |
||||
); |
||||
}; |
||||
|
||||
type Props = { |
||||
id: string, |
||||
appearance?: 'danger' | 'warning', |
||||
heading: string, |
||||
onClose: Function, |
||||
showKeyline: boolean, |
||||
isHeadingMultiline: boolean, |
||||
testId: string, |
||||
t: Function |
||||
} |
||||
|
||||
/** |
||||
* A default header for modal-dialog components |
||||
* |
||||
* @export |
||||
* @class ModalHeader |
||||
* @extends {React.Component<Props>} |
||||
*/ |
||||
export default class ModalHeader extends React.Component<Props> { |
||||
static defaultProps = { |
||||
isHeadingMultiline: true |
||||
}; |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { |
||||
id, |
||||
appearance, |
||||
heading, |
||||
onClose, |
||||
showKeyline, |
||||
isHeadingMultiline, |
||||
testId |
||||
} = this.props; |
||||
|
||||
if (!heading) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<Header showKeyline = { showKeyline }> |
||||
<Title> |
||||
<TitleIcon appearance = { appearance } /> |
||||
<TitleText |
||||
data-testid = { testId && `${testId}-heading` } |
||||
id = { id } |
||||
isHeadingMultiline = { isHeadingMultiline }> |
||||
{heading} |
||||
</TitleText> |
||||
</Title> |
||||
<Icon |
||||
onClick = { onClose } |
||||
src = { IconClose } /> |
||||
</Header> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import { |
||||
Dialog, |
||||
FillScreen, |
||||
dialogWidth, |
||||
dialogHeight, |
||||
PositionerAbsolute, |
||||
PositionerRelative |
||||
} from '@atlaskit/modal-dialog/dist/es2019/styled/Modal.js'; |
||||
import { N0, DN50 } from '@atlaskit/theme/colors'; |
||||
import { themed } from '@atlaskit/theme/components'; |
||||
import React from 'react'; |
||||
|
||||
const ThemedDialog = props => { |
||||
const style = { backgroundColor: props.isChromeless ? 'transparent' : themed({ light: N0, |
||||
dark: DN50 })({ theme: { mode: 'dark' } }) }; |
||||
|
||||
return (<Dialog |
||||
{ ...props } |
||||
aria-modal = { true } |
||||
style = { style } |
||||
theme = {{ mode: 'dark' }} />); |
||||
}; |
||||
|
||||
|
||||
export { ThemedDialog as Dialog, FillScreen, dialogWidth, dialogHeight, PositionerAbsolute, PositionerRelative }; |
||||
Loading…
Reference in new issue