GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add onKeydown and onBlur handler for the color picker.

Browse Source
This commit is contained in:
Orpheus Peng 2020-07-18 18:41:45 -07:00
parent a762beacef
commit 047368889d
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/components/src/controls/Color.tsx
View File

@ -1,4 +1,4 @@
import React, { FC, useState } from 'react';
import React, { FC, useState, MouseEvent, KeyboardEvent } from 'react';
import { SketchPicker, ColorResult } from 'react-color';
import { styled } from '@storybook/theming';
@ -46,12 +46,18 @@ export const ColorControl: FC<ColorProps> = ({
type="button"
name={name}
onClick={() => setShowPicker(!showPicker)}
onKeyDown={(e: KeyboardEvent) => {
if (e.key === 'Enter') {
setShowPicker(!showPicker);
}
}}
onBlur={() => setShowPicker(!showPicker)}
size="flex"
>
{value ? value.toUpperCase() : 'Choose color'}
<Swatch style={{ background: value }} />
{showPicker ? (
<Popover>
<Popover onClick={(e: MouseEvent) => e.stopPropagation()}>
<SketchPicker
color={value}
onChange={(color: ColorResult) => onChange(name, format(color))}