1 | import React from 'react';
|
2 | import extractTransform from '../lib/extract/extractTransform';
|
3 | import { withoutXY } from '../lib/extract/extractProps';
|
4 | import { NumberProp, TransformProps } from '../lib/extract/types';
|
5 | import units from '../lib/units';
|
6 | import Shape from './Shape';
|
7 | import { RNSVGMask } from './NativeComponents';
|
8 |
|
9 | export default class Mask extends Shape<{
|
10 | x?: NumberProp;
|
11 | y?: NumberProp;
|
12 | width?: NumberProp;
|
13 | height?: NumberProp;
|
14 | transform?: number[] | string | TransformProps;
|
15 | maskTransform?: number[] | string | TransformProps;
|
16 | maskUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
|
17 | maskContentUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
|
18 | }> {
|
19 | static displayName = 'Mask';
|
20 |
|
21 | static defaultProps = {
|
22 | x: '0%',
|
23 | y: '0%',
|
24 | width: '100%',
|
25 | height: '100%',
|
26 | };
|
27 |
|
28 | render() {
|
29 | const { props } = this;
|
30 | const {
|
31 | maskTransform,
|
32 | transform,
|
33 | x,
|
34 | y,
|
35 | width,
|
36 | height,
|
37 | maskUnits,
|
38 | maskContentUnits,
|
39 | children,
|
40 | } = props;
|
41 | const maskProps = {
|
42 | x,
|
43 | y,
|
44 | width,
|
45 | height,
|
46 | maskTransform: extractTransform(maskTransform || transform || props),
|
47 | maskUnits: maskUnits !== undefined ? units[maskUnits] : 0,
|
48 | maskContentUnits:
|
49 | maskContentUnits !== undefined ? units[maskContentUnits] : 1,
|
50 | };
|
51 | return (
|
52 | <RNSVGMask
|
53 | ref={this.refMethod}
|
54 | {...withoutXY(this, props)}
|
55 | {...maskProps}
|
56 | >
|
57 | {children}
|
58 | </RNSVGMask>
|
59 | );
|
60 | }
|
61 | }
|