forked from maplibre/maputnik
-
Notifications
You must be signed in to change notification settings - Fork 0
/
InputUrl.jsx
103 lines (91 loc) · 2 KB
/
InputUrl.jsx
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import InputString from './InputString'
import SmallError from './SmallError'
function validate (url) {
if (url === "") {
return;
}
let error;
const getProtocol = (url) => {
try {
const urlObj = new URL(url);
return urlObj.protocol;
}
catch (err) {
return undefined;
}
};
const protocol = getProtocol(url);
const isSsl = window.location.protocol === "https:";
if (!protocol) {
error = (
<SmallError>
Must provide protocol {
isSsl
? <code>https://</code>
: <><code>http://</code> or <code>https://</code></>
}
</SmallError>
);
}
else if (
protocol &&
protocol === "http:" &&
window.location.protocol === "https:"
) {
error = (
<SmallError>
CORS policy won't allow fetching resources served over http from https, use a <code>https://</code> domain
</SmallError>
);
}
return error;
}
export default class FieldUrl extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
value: PropTypes.string,
style: PropTypes.object,
default: PropTypes.string,
onChange: PropTypes.func,
onInput: PropTypes.func,
multi: PropTypes.bool,
required: PropTypes.bool,
'aria-label': PropTypes.string,
}
static defaultProps = {
onInput: () => {},
}
constructor (props) {
super(props);
this.state = {
error: validate(props.value)
};
}
onInput = (url) => {
this.setState({
error: validate(url)
});
this.props.onInput(url);
}
onChange = (url) => {
this.setState({
error: validate(url)
});
this.props.onChange(url);
}
render () {
return (
<div>
<InputString
{...this.props}
onInput={this.onInput}
onChange={this.onChange}
aria-label={this.props['aria-label']}
/>
{this.state.error}
</div>
);
}
}