109 lines
3.0 KiB
JavaScript
109 lines
3.0 KiB
JavaScript
|
/**
|
||
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @providesModule MaskedViewIOS
|
||
|
|
* @flow
|
||
|
|
*/
|
||
|
|
|
||
|
|
const PropTypes = require('prop-types');
|
||
|
|
const React = require('React');
|
||
|
|
const StyleSheet = require('StyleSheet');
|
||
|
|
const View = require('View');
|
||
|
|
const ViewPropTypes = require('ViewPropTypes');
|
||
|
|
const requireNativeComponent = require('requireNativeComponent');
|
||
|
|
|
||
|
|
import type { ViewProps } from 'ViewPropTypes';
|
||
|
|
|
||
|
|
type Props = ViewProps & {
|
||
|
|
children: any,
|
||
|
|
/**
|
||
|
|
* Should be a React element to be rendered and applied as the
|
||
|
|
* mask for the child element.
|
||
|
|
*/
|
||
|
|
maskElement: React.Element<any>,
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders the child view with a mask specified in the `maskElement` prop.
|
||
|
|
*
|
||
|
|
* ```
|
||
|
|
* import React from 'react';
|
||
|
|
* import { MaskedViewIOS, Text, View } from 'react-native';
|
||
|
|
*
|
||
|
|
* class MyMaskedView extends React.Component {
|
||
|
|
* render() {
|
||
|
|
* return (
|
||
|
|
* <MaskedViewIOS
|
||
|
|
* style={{ flex: 1 }}
|
||
|
|
* maskElement={
|
||
|
|
* <View style={styles.maskContainerStyle}>
|
||
|
|
* <Text style={styles.maskTextStyle}>
|
||
|
|
* Basic Mask
|
||
|
|
* </Text>
|
||
|
|
* </View>
|
||
|
|
* }
|
||
|
|
* >
|
||
|
|
* <View style={{ flex: 1, backgroundColor: 'blue' }} />
|
||
|
|
* </MaskedViewIOS>
|
||
|
|
* );
|
||
|
|
* }
|
||
|
|
* }
|
||
|
|
* ```
|
||
|
|
*
|
||
|
|
* The above example will render a view with a blue background that fills its
|
||
|
|
* parent, and then mask that view with text that says "Basic Mask".
|
||
|
|
*
|
||
|
|
* The alpha channel of the view rendered by the `maskElement` prop determines how
|
||
|
|
* much of the view's content and background shows through. Fully or partially
|
||
|
|
* opaque pixels allow the underlying content to show through but fully
|
||
|
|
* transparent pixels block that content.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
class MaskedViewIOS extends React.Component<Props> {
|
||
|
|
static propTypes = {
|
||
|
|
...ViewPropTypes,
|
||
|
|
maskElement: PropTypes.element.isRequired,
|
||
|
|
};
|
||
|
|
|
||
|
|
_hasWarnedInvalidRenderMask = false;
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { maskElement, children, ...otherViewProps } = this.props;
|
||
|
|
|
||
|
|
if (!React.isValidElement(maskElement)) {
|
||
|
|
if (!this._hasWarnedInvalidRenderMask) {
|
||
|
|
console.warn(
|
||
|
|
'MaskedView: Invalid `maskElement` prop was passed to MaskedView. ' +
|
||
|
|
'Expected a React Element. No mask will render.'
|
||
|
|
);
|
||
|
|
this._hasWarnedInvalidRenderMask = true;
|
||
|
|
}
|
||
|
|
return <View {...otherViewProps}>{children}</View>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<RCTMaskedView {...otherViewProps}>
|
||
|
|
<View pointerEvents="none" style={StyleSheet.absoluteFill}>
|
||
|
|
{maskElement}
|
||
|
|
</View>
|
||
|
|
{children}
|
||
|
|
</RCTMaskedView>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const RCTMaskedView = requireNativeComponent('RCTMaskedView', {
|
||
|
|
name: 'RCTMaskedView',
|
||
|
|
displayName: 'RCTMaskedView',
|
||
|
|
propTypes: {
|
||
|
|
...ViewPropTypes,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = MaskedViewIOS;
|