1// tslint:disable max-classes-per-file
2import React from 'react';
3import * as Svg from 'react-native-svg';
4
5import Example from './Example';
6
7const {
8  ClipPath,
9  Defs,
10  RadialGradient,
11  Stop,
12  Rect,
13  Text,
14  Ellipse,
15  G,
16  Polygon,
17  Path,
18  Circle,
19  Use,
20} = Svg;
21
22class ClipPathElement extends React.Component {
23  static title = 'Clip by set clip-path with a path data';
24  render() {
25    return (
26      <Svg.Svg height="100" width="100">
27        <Defs>
28          <RadialGradient id="grad" cx="50%" cy="50%" rx="50%" ry="50%" fx="50%" fy="50%">
29            <Stop offset="0%" stopColor="#ff0" stopOpacity="1" />
30            <Stop offset="100%" stopColor="#00f" stopOpacity="1" />
31          </RadialGradient>
32          <ClipPath id="clip">
33            <G scale="0.9" x="10">
34              <Circle cx="30" cy="30" r="20" />
35              <Ellipse cx="60" cy="70" rx="20" ry="10" />
36              <Rect x="65" y="15" width="30" height="30" />
37              <Polygon points="20,60 20,80 50,70" />
38              <Text x="50" y="30" fontSize="32" fontWeight="bold" textAnchor="middle" scale="1.2">
39                Q
40              </Text>
41            </G>
42          </ClipPath>
43        </Defs>
44        <Rect x="0" y="0" width="100" height="100" fill="url(#grad)" clipPath="url(#clip)" />
45      </Svg.Svg>
46    );
47  }
48}
49
50class ClipRule extends React.Component {
51  static title = 'Clip a group with clipRule="evenodd"';
52  render() {
53    return (
54      <Svg.Svg height={200} width={200}>
55        <Defs>
56          {/*
57          // @ts-ignore */}
58          <ClipPath id="c" clipRule="nonzero">
59            <Path d="M50 5L20 99l75-60H5l75 60z" />
60          </ClipPath>
61          {/*
62          // @ts-ignore */}
63          <ClipPath id="b" clipRule="evenodd">
64            <Path d="M50 5L20 99l75-60H5l75 60z" />
65          </ClipPath>
66          <G id="a">
67            <Path fill="red" d="M0 0h50v50H0z" />
68            <Path fill="#00f" d="M50 0h50v50H50z" />
69            <Path fill="#ff0" d="M0 50h50v50H0z" />
70            <Path fill="green" d="M50 50h50v50H50z" />
71          </G>
72        </Defs>
73        <Use href="#a" clipPath="url(#b)" />
74        <Use href="#a" clipPath="url(#c)" y={100} />
75        <G transform="translate(100)">
76          <Use href="#a" clipPath="url(#b)" clipRule="evenodd" />
77          <Use href="#a" clipPath="url(#c)" y={100} />
78        </G>
79      </Svg.Svg>
80    );
81  }
82}
83
84class TextClipping extends React.Component {
85  static title = 'Transform the text';
86  render() {
87    return (
88      <Svg.Svg height="60" width="200">
89        <Defs>
90          <ClipPath id="clip">
91            <Circle cx="-20" cy="35" r="10" />
92            <Circle cx="0" cy="35" r="10" />
93            <Circle cx="20" cy="35" r="10" />
94            <Circle cx="40" cy="35" r="10" />
95            <Circle cx="60" cy="35" r="10" />
96            <Circle cx="80" cy="35" r="10" />
97            <Circle cx="100" cy="35" r="10" />
98            <Circle cx="120" cy="35" r="10" />
99            <Circle cx="140" cy="35" r="10" />
100            <Circle cx="160" cy="35" r="10" />
101            <Circle cx="180" cy="35" r="10" />
102          </ClipPath>
103        </Defs>
104        <Text
105          x="100"
106          y="40"
107          fill="red"
108          fontSize="22"
109          fontWeight="bold"
110          stroke="blue"
111          strokeWidth="1"
112          textAnchor="middle"
113          clipPath="url(#clip)">
114          NOT THE FACE
115        </Text>
116      </Svg.Svg>
117    );
118  }
119}
120
121const icon = (
122  <Svg.Svg height="20" width="20">
123    <Defs>
124      <ClipPath id="clip">
125        <Path d="M50,5L20,99L95,39L5,39L80,99z" />
126      </ClipPath>
127    </Defs>
128
129    <G clipPath="url(#clip)" clipRule="evenodd" scale="0.2">
130      <G>
131        <Rect x="0" y="0" width="50" height="50" fill="red" />
132        <Rect x="50" y="0" width="50" height="50" fill="blue" />
133        <Rect x="0" y="50" width="50" height="50" fill="yellow" />
134        <Rect x="50" y="50" width="50" height="50" fill="green" />
135      </G>
136    </G>
137  </Svg.Svg>
138);
139
140const Clipping: Example = {
141  icon,
142  samples: [ClipPathElement, ClipRule, TextClipping],
143};
144
145export default Clipping;
146