ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-14 17:41:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3743 from tylershuster/sigil-color-picker

Browse Source 
profile: add html color picker
This commit is contained in:
matildepark 2020-10-16 17:24:16 -04:00 committed by GitHub
commit 4f2e18dc3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pkg/interface/src/views/components/ColorInput.tsx
View File

@ -22,11 +22,12 @@ export function ColorInput(props: ColorInputProps) {
const { id, label, caption, disabled, ...rest } = props;
const [{ value, onBlur }, meta, { setValue }] = useField(id);
const hex = value.substr(2).replace(".", "");
const hex = value.replace('#', '').substr(2).replace(".", "");
const padded = hex.padStart(6, "0");
const onChange = (e: any) => {
const { value: newValue } = e.target as HTMLInputElement;
let { value: newValue } = e.target as HTMLInputElement;
newValue = newValue.replace('#', '');
const valid = newValue.match(/^(\d|[a-f]|[A-F]){0,6}$/);
if (!valid) {
@ -52,6 +53,7 @@ export function ColorInput(props: ColorInputProps) {
onChange={onChange}
value={hex}
disabled={disabled || false}
borderRight={0}
/>
<Box
borderBottomRightRadius={1}
@ -62,7 +64,19 @@ export function ColorInput(props: ColorInputProps) {
width="32px"
alignSelf="stretch"
bg={`#${padded}`}
/>
>
<Input
width="100%"
height="100%"
alignSelf="stretch"
onInput={onChange}
value={`#${padded}`}
disabled={disabled || false}
type="color"
opacity={0}
overflow="hidden"
/>
</Box>
</Row>
<ErrorLabel mt="2" hasError={!!(meta.touched && meta.error)}>
{meta.error}