-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
ColorPreviewInput.tsx
39 lines (30 loc) · 1.12 KB
/
ColorPreviewInput.tsx
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
import type Mithril from 'mithril';
import Component, { ComponentAttrs } from '../Component';
import classList from '../utils/classList';
import Icon from './Icon';
export default class ColorPreviewInput extends Component {
view(vnode: Mithril.Vnode<ComponentAttrs, this>) {
const { className, id, ...attrs } = this.attrs;
attrs.type ||= 'text';
attrs.onblur = () => {
if (attrs.value.length === 4) {
attrs.value = attrs.value.replace(/#([a-f0-9])([a-f0-9])([a-f0-9])/, '#$1$1$2$2$3$3');
attrs.onchange?.({ target: { value: attrs.value } });
}
// Validate the color
if (!/^#[a-f0-9]{6}$/i.test(attrs.value)) {
attrs.value = '#000000';
attrs.onchange?.({ target: { value: attrs.value } });
}
};
return (
<div className="ColorInput">
<input className={classList('FormControl', className)} id={id} {...attrs} />
<span className="ColorInput-icon" role="presentation">
<Icon name={'fas fa-exclamation-circle'} />
</span>
<input className="ColorInput-preview" {...attrs} type="color" />
</div>
);
}
}