1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
/* eslint-disable react/jsx-no-literals */
import type { FC } from 'react';
import type { Position } from '../../../../../../types';
export type ArrowOrientation = Exclude<Position, 'center'>;
const getArrowBarPathFrom = (orientation: ArrowOrientation) => {
switch (orientation) {
case 'bottom':
return 'm 55.749998,2e-6 v 61.764896 h -11.5 V 2e-6 Z';
case 'left':
return 'M 99.999996,44.25 H 38.2351 v 11.5 h 61.764896 z';
case 'right':
return 'm 0,44.25 h 61.764896 v 11.5 H 0 Z';
case 'top':
default:
return 'M 55.749998,99.999998 V 38.235102 h -11.5 v 61.764896 z';
}
};
const getArrowHeadPathFrom = (orientation: ArrowOrientation) => {
switch (orientation) {
case 'bottom':
return 'm 69.999998,61.764898 -20,38.2351 -20,-38.2351 z';
case 'left':
return 'M 38.2351,30 0,50 38.2351,70 Z';
case 'right':
return 'm 61.764896,30 38.2351,20 -38.2351,20 z';
case 'top':
default:
return 'm 69.999998,38.235102 -20,-38.2351 -20,38.2351 z';
}
};
export type ArrowProps = {
/**
* The arrow orientation.
*/
orientation: ArrowOrientation;
};
/**
* ArrowIconPaths
*
* Render the svg paths to make an arrow icon.
*/
export const ArrowIconPaths: FC<ArrowProps> = ({ orientation }) => (
<>
<path className="arrow-head" d={getArrowHeadPathFrom(orientation)} />
<path className="arrow-bar" d={getArrowBarPathFrom(orientation)} />
</>
);
|
