Remove the concept of a label colour row to simplify colour selection in labels
This commit is contained in:
Jackson Harper
@ -1,9 +1,6 @@
|
||||
import React, { useState } from 'react'
|
||||
import { styled } from '../tokens/stitches.config'
|
||||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
|
||||
import { HexColorPicker } from 'react-colorful'
|
||||
import { HStack, SpanBox } from './LayoutPrimitives'
|
||||
import { CaretDown } from 'phosphor-react'
|
||||
import { Box, HStack, SpanBox } from './LayoutPrimitives'
|
||||
import { StyledText } from './StyledText'
|
||||
import {
|
||||
LabelColorDropdownProps,
|
||||
@ -11,9 +8,10 @@ import {
|
||||
LabelOptionProps,
|
||||
} from '../../utils/settings-page/labels/types'
|
||||
import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
|
||||
import { DropdownOption } from './DropdownElements'
|
||||
import { isDarkTheme } from '../../lib/themeUpdater'
|
||||
import { LabelColor } from '../../lib/networking/fragments/labelFragment'
|
||||
import { TwitterPicker } from 'react-color'
|
||||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
|
||||
borderRadius: 6,
|
||||
@ -23,31 +21,6 @@ const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
|
||||
'0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
|
||||
})
|
||||
|
||||
const itemStyles = {
|
||||
all: 'unset',
|
||||
fontSize: '$3',
|
||||
lineHeight: 1,
|
||||
borderRadius: 3,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: 25,
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
}
|
||||
|
||||
const DropdownMenuTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, {
|
||||
'&[data-state="open"]': {
|
||||
outline: 'none',
|
||||
backgroundColor: '$grayBgHover',
|
||||
},
|
||||
...itemStyles,
|
||||
padding: '$2 0',
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
backgroundColor: '$grayBgHover',
|
||||
},
|
||||
})
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = styled(DropdownMenuPrimitive.Trigger, {
|
||||
@ -56,64 +29,75 @@ const DropdownMenuTrigger = styled(DropdownMenuPrimitive.Trigger, {
|
||||
padding: 0,
|
||||
marginRight: '$2',
|
||||
})
|
||||
const Box = styled('div', {})
|
||||
|
||||
const MainContainer = styled(Box, {
|
||||
fontFamily: 'inter',
|
||||
fontSize: '$2',
|
||||
lineHeight: '1.25',
|
||||
color: '$grayText',
|
||||
// const MainContainer = styled(Box, {
|
||||
// fontFamily: 'inter',
|
||||
// fontSize: '$2',
|
||||
// lineHeight: '1.25',
|
||||
// color: '$grayText',
|
||||
// display: 'flex',
|
||||
// justifyContent: 'space-between',
|
||||
// alignItems: 'center',
|
||||
// backgroundColor: '$grayBg',
|
||||
// border: '1px solid $grayBorder',
|
||||
// width: '180px',
|
||||
// borderRadius: '$3',
|
||||
// px: '$3',
|
||||
// py: '0px',
|
||||
// cursor: 'pointer',
|
||||
// '&:hover': {
|
||||
// border: '1px solid $grayBorderHover',
|
||||
// },
|
||||
// '@mdDown': {
|
||||
// width: '100%',
|
||||
// },
|
||||
// })
|
||||
|
||||
const StyledLabel = styled('label', {
|
||||
position: 'relative',
|
||||
width: '154px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '$grayBg',
|
||||
border: '1px solid $grayBorder',
|
||||
width: '180px',
|
||||
borderRadius: '$3',
|
||||
px: '$3',
|
||||
py: '0px',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
border: '1px solid $grayBorderHover',
|
||||
},
|
||||
'@mdDown': {
|
||||
width: '100%',
|
||||
},
|
||||
})
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
fontSize: '13px',
|
||||
borderRadius: '50px',
|
||||
overflow: 'hidden',
|
||||
|
||||
const CustomLabelWrapper = styled(Box, {
|
||||
fontSize: 13,
|
||||
padding: 24,
|
||||
borderRadius: 3,
|
||||
cursor: 'default',
|
||||
color: '$grayText',
|
||||
'>input': {
|
||||
position: 'absolute',
|
||||
width: '154px',
|
||||
height: '40px',
|
||||
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
backgroundColor: '$grayBgHover',
|
||||
appearance: 'none',
|
||||
'-moz-appearance': 'none',
|
||||
'-webkit-appearance': 'none',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
|
||||
'::-webkit-color-swatch': {
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
},
|
||||
|
||||
'::-moz-focus-inner': {
|
||||
padding: 0,
|
||||
},
|
||||
})
|
||||
|
||||
export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
|
||||
const {
|
||||
isCreateMode,
|
||||
canEdit,
|
||||
labelColorHexRowId,
|
||||
labelId,
|
||||
labelColor,
|
||||
labelColorHexValue,
|
||||
setLabelColorHex,
|
||||
} = props
|
||||
const { isCreateMode, canEdit, labelId, labelColor, setLabelColor } = props
|
||||
|
||||
const isDarkMode = isDarkTheme()
|
||||
const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
|
||||
const [colorPickerValue, setColorPickerValue] = useState(props.labelColor)
|
||||
const [open, setOpen] = useState<boolean | undefined>(false)
|
||||
|
||||
const handleCustomColorChange = (color: string) => {
|
||||
setLabelColorHex({
|
||||
rowId: labelId,
|
||||
value: color.toUpperCase() as LabelColor,
|
||||
})
|
||||
setLabelColor(color.toUpperCase())
|
||||
}
|
||||
|
||||
const handleOpen = (open: boolean) => {
|
||||
@ -134,86 +118,112 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MainContainer>
|
||||
<SpanBox css={{ paddingRight: '$3' }}>
|
||||
{labelId !== '' && labelId === labelColorHexRowId ? (
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={labelId}
|
||||
color={labelColorHexValue}
|
||||
isDropdownOption={false}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{labelId ? (
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={labelId}
|
||||
color={labelColor}
|
||||
isDropdownOption={false}
|
||||
/>
|
||||
) : (
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={''}
|
||||
color={labelColorHexValue}
|
||||
isDropdownOption={false}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SpanBox>
|
||||
|
||||
<CaretDown size={16} color={iconColor} weight="bold" />
|
||||
</MainContainer>
|
||||
<SpanBox css={{ paddingRight: '$3' }}>
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={''}
|
||||
color={labelColor}
|
||||
isDropdownOption={false}
|
||||
/>
|
||||
</SpanBox>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent sideOffset={5}>
|
||||
{Object.keys(labelColorObjects)
|
||||
.filter((labelColor) => labelColor !== 'custom color')
|
||||
.map((labelColor) => (
|
||||
<DropdownOption
|
||||
key={labelColor}
|
||||
onSelect={() =>
|
||||
setLabelColorHex({
|
||||
rowId: labelId,
|
||||
value: labelColor as LabelColor,
|
||||
})
|
||||
}
|
||||
>
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={labelId}
|
||||
color={labelColor}
|
||||
isDropdownOption
|
||||
/>
|
||||
</DropdownOption>
|
||||
))}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTriggerItem>
|
||||
<CustomLabelWrapper onSelect={() => null}>
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={labelId}
|
||||
color="custom color"
|
||||
isDropdownOption
|
||||
/>
|
||||
</CustomLabelWrapper>
|
||||
</DropdownMenuTriggerItem>
|
||||
<DropdownMenuContent
|
||||
sideOffset={-25}
|
||||
alignOffset={-5}
|
||||
css={{ minWidth: 'unset' }}
|
||||
>
|
||||
<HexColorPicker
|
||||
color={labelColor}
|
||||
onChange={handleCustomColorChange}
|
||||
/>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenuContent align="start" sideOffset={-10}>
|
||||
<TwitterPicker />
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
|
||||
return (
|
||||
<Box
|
||||
css={{
|
||||
display: 'flex',
|
||||
flexFlow: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<StyledLabel>
|
||||
<input
|
||||
type="color"
|
||||
value={colorPickerValue}
|
||||
onChange={(event) => {
|
||||
// setColorPickerValue(event.target.value)
|
||||
handleCustomColorChange(event.target.value)
|
||||
event.preventDefault()
|
||||
}}
|
||||
/>
|
||||
<SpanBox css={{ zIndex: '19', gap: '5px' }}>
|
||||
{labelId ? (
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={labelId}
|
||||
color={labelColor}
|
||||
isDropdownOption={false}
|
||||
/>
|
||||
) : (
|
||||
<LabelOption
|
||||
isCreateMode={isCreateMode}
|
||||
labelId={''}
|
||||
color={labelColor}
|
||||
isDropdownOption={false}
|
||||
/>
|
||||
)}
|
||||
</SpanBox>
|
||||
</StyledLabel>
|
||||
</Box>
|
||||
)
|
||||
|
||||
// return (
|
||||
// <DropdownMenu onOpenChange={handleOpen} open={open}>
|
||||
// <DropdownMenuTrigger
|
||||
// css={{
|
||||
// minWidth: '64px',
|
||||
// width: '100%',
|
||||
// '@md': {
|
||||
// minWidth: '170px',
|
||||
// width: 'auto',
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// <MainContainer>
|
||||
// <SpanBox css={{ paddingRight: '$3' }}>
|
||||
// {labelId !== '' && labelId === labelColorHexRowId ? (
|
||||
// <LabelOption
|
||||
// isCreateMode={isCreateMode}
|
||||
// labelId={labelId}
|
||||
// color={labelColorHexValue}
|
||||
// isDropdownOption={false}
|
||||
// />
|
||||
// ) : (
|
||||
// <>
|
||||
// {labelId ? (
|
||||
// <LabelOption
|
||||
// isCreateMode={isCreateMode}
|
||||
// labelId={labelId}
|
||||
// color={labelColor}
|
||||
// isDropdownOption={false}
|
||||
// />
|
||||
// ) : (
|
||||
// <LabelOption
|
||||
// isCreateMode={isCreateMode}
|
||||
// labelId={''}
|
||||
// color={labelColorHexValue}
|
||||
// isDropdownOption={false}
|
||||
// />
|
||||
// )}
|
||||
// </>
|
||||
// )}
|
||||
// </SpanBox>
|
||||
|
||||
// <CaretDown size={16} color={iconColor} weight="bold" />
|
||||
// </MainContainer>
|
||||
// </DropdownMenuTrigger>
|
||||
|
||||
// <DropdownMenuContent sideOffset={5}>
|
||||
// <input type="color"></input>
|
||||
// </DropdownMenuContent>
|
||||
// </DropdownMenu>
|
||||
// )
|
||||
}
|
||||
|
||||
function LabelOption(props: LabelOptionProps): JSX.Element {
|
||||
@ -265,26 +275,12 @@ function LabelOption(props: LabelOptionProps): JSX.Element {
|
||||
color: '$grayText',
|
||||
fontSize: '$3',
|
||||
whiteSpace: 'nowrap',
|
||||
textTransform: 'capitalize',
|
||||
'@md': {
|
||||
display: 'unset',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{colorNameText}
|
||||
</StyledText>
|
||||
<StyledText
|
||||
css={{
|
||||
m: '$1',
|
||||
color: '$grayText',
|
||||
fontSize: '$3',
|
||||
whiteSpace: 'nowrap',
|
||||
'@md': {
|
||||
display: 'unset',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{colorNameText === 'custom color' ? '' : colorHex}
|
||||
{colorHex}
|
||||
</StyledText>
|
||||
{isDropdownOption ? <Box css={{ pr: '$2' }} /> : null}
|
||||
</HStack>
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
"phosphor-react": "^1.4.0",
|
||||
"pspdfkit": "^2022.2.3",
|
||||
"react": "^17.0.2",
|
||||
"react-color": "^2.19.3",
|
||||
"react-colorful": "^5.5.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-dropzone": "^14.2.3",
|
||||
@ -88,7 +89,9 @@
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/markdown-it": "^12.2.3",
|
||||
"@types/react": "17.0.2",
|
||||
"@types/react-color": "^3.0.6",
|
||||
"@types/react-dom": "^17.0.2",
|
||||
"@types/react-input-autosize": "^2.2.1",
|
||||
"@types/segment-analytics": "^0.0.34",
|
||||
"@types/uuid": "^8.3.1",
|
||||
"babel-jest": "^27.4.5",
|
||||
|
||||
@ -146,10 +146,7 @@ const TextArea = styled('textarea', { ...inputStyles })
|
||||
|
||||
export default function LabelsPage(): JSX.Element {
|
||||
const { labels, revalidate } = useGetLabelsQuery()
|
||||
const [labelColorHex, setLabelColorHex] = useState<LabelColorHex>({
|
||||
rowId: '',
|
||||
value: '#000000',
|
||||
})
|
||||
const [labelColorHex, setLabelColorHex] = useState('#000000')
|
||||
const [editingLabelId, setEditingLabelId] = useState<string | null>(null)
|
||||
const [nameInputText, setNameInputText] = useState<string>('')
|
||||
const [descriptionInputText, setDescriptionInputText] = useState<string>('')
|
||||
@ -184,13 +181,13 @@ export default function LabelsPage(): JSX.Element {
|
||||
setEditingLabelId('')
|
||||
setNameInputText('')
|
||||
setDescriptionInputText('')
|
||||
setLabelColorHex({ rowId: '', value: '#000000' })
|
||||
setLabelColorHex('#000000')
|
||||
}
|
||||
|
||||
async function createLabel(): Promise<void> {
|
||||
const res = await createLabelMutation(
|
||||
nameInputText.trim(),
|
||||
labelColorHex.value,
|
||||
labelColorHex,
|
||||
descriptionInputText
|
||||
)
|
||||
if (res) {
|
||||
@ -206,7 +203,7 @@ export default function LabelsPage(): JSX.Element {
|
||||
await updateLabelMutation({
|
||||
labelId: id,
|
||||
name: nameInputText,
|
||||
color: labelColorHex.value,
|
||||
color: labelColorHex,
|
||||
description: descriptionInputText,
|
||||
})
|
||||
revalidate()
|
||||
@ -217,7 +214,7 @@ export default function LabelsPage(): JSX.Element {
|
||||
setEditingLabelId(label.id)
|
||||
setNameInputText(label.name)
|
||||
setDescriptionInputText(label.description || '')
|
||||
setLabelColorHex({ rowId: '', value: label.color })
|
||||
setLabelColorHex(label.color)
|
||||
} else {
|
||||
resetLabelState()
|
||||
}
|
||||
@ -244,11 +241,7 @@ export default function LabelsPage(): JSX.Element {
|
||||
) as LabelColor[]
|
||||
const randomColorHex =
|
||||
colorHexes[Math.floor(Math.random() * colorHexes.length)]
|
||||
setLabelColorHex((prevState) => ({
|
||||
...prevState,
|
||||
rowId: rowId || '',
|
||||
value: randomColorHex,
|
||||
}))
|
||||
setLabelColorHex(randomColorHex)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -459,8 +452,7 @@ function GenericTableCard(
|
||||
resetState,
|
||||
} = props
|
||||
const showInput = editingLabelId === label?.id || (isCreateMode && !label)
|
||||
const labelColor =
|
||||
editingLabelId === label?.id ? labelColorHex.value : label?.color
|
||||
const labelColor = editingLabelId === label?.id ? labelColorHex : label?.color
|
||||
const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
|
||||
|
||||
const handleEdit = () => {
|
||||
@ -649,11 +641,9 @@ function GenericTableCard(
|
||||
<LabelColorDropdown
|
||||
isCreateMode={isCreateMode && !label}
|
||||
canEdit={editingLabelId === label?.id}
|
||||
labelColorHexRowId={labelColorHex.rowId}
|
||||
labelColorHexValue={labelColorHex.value}
|
||||
labelColor={labelColorHex}
|
||||
setLabelColor={setLabelColorHex}
|
||||
labelId={label?.id || ''}
|
||||
labelColor={label?.color || '#000000'}
|
||||
setLabelColorHex={setLabelColorHex}
|
||||
/>
|
||||
)}
|
||||
{showInput && (
|
||||
@ -809,7 +799,7 @@ function MobileEditCard(props: any) {
|
||||
<VStack distribution="center" css={{ width: '100%', margin: '8px' }}>
|
||||
{nameInputText && (
|
||||
<SpanBox css={{ ml: '-2px', mt: '0px' }}>
|
||||
<LabelChip color={labelColorHex.value} text={nameInputText} />
|
||||
<LabelChip color={labelColorHex} text={nameInputText} />
|
||||
</SpanBox>
|
||||
)}
|
||||
<Input
|
||||
@ -821,11 +811,9 @@ function MobileEditCard(props: any) {
|
||||
<LabelColorDropdown
|
||||
isCreateMode={isCreateMode && !label}
|
||||
canEdit={editingLabelId === label?.id}
|
||||
labelColorHexRowId={labelColorHex.rowId}
|
||||
labelColorHexValue={labelColorHex.value}
|
||||
labelId={label?.id || ''}
|
||||
labelColor={label?.color || '#000000'}
|
||||
setLabelColorHex={setLabelColorHex}
|
||||
setLabelColor={setLabelColorHex}
|
||||
/>
|
||||
<TextArea
|
||||
placeholder="Description (optional)"
|
||||
@ -900,7 +888,7 @@ function DesktopEditCard(props: any) {
|
||||
>
|
||||
{nameInputText && (
|
||||
<SpanBox css={{ px: '11px', mt: '3px' }}>
|
||||
<LabelChip color={labelColorHex.value} text={nameInputText} />
|
||||
<LabelChip color={labelColorHex} text={nameInputText} />
|
||||
</SpanBox>
|
||||
)}
|
||||
<HStack
|
||||
@ -917,11 +905,9 @@ function DesktopEditCard(props: any) {
|
||||
<LabelColorDropdown
|
||||
isCreateMode={isCreateMode && !label}
|
||||
canEdit={editingLabelId === label?.id}
|
||||
labelColorHexRowId={labelColorHex.rowId}
|
||||
labelColorHexValue={labelColorHex.value}
|
||||
labelId={label?.id || ''}
|
||||
labelColor={label?.color || '#000000'}
|
||||
setLabelColorHex={setLabelColorHex}
|
||||
setLabelColor={setLabelColorHex}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
|
||||
@ -1,61 +1,57 @@
|
||||
import { Label, LabelColor } from "../../../lib/networking/fragments/labelFragment";
|
||||
import {
|
||||
Label,
|
||||
LabelColor,
|
||||
} from '../../../lib/networking/fragments/labelFragment'
|
||||
|
||||
export type LabelOptionProps = {
|
||||
color: string;
|
||||
isDropdownOption?: boolean;
|
||||
isCreateMode: boolean | undefined;
|
||||
labelId: string;
|
||||
};
|
||||
color: string
|
||||
isDropdownOption?: boolean
|
||||
isCreateMode: boolean | undefined
|
||||
labelId: string
|
||||
}
|
||||
|
||||
export type ColorDetailsProps = {
|
||||
colorName: string;
|
||||
color: string;
|
||||
icon: JSX.Element;
|
||||
};
|
||||
colorName: string
|
||||
color: string
|
||||
icon: JSX.Element
|
||||
}
|
||||
|
||||
export type LabelColorObject = {
|
||||
colorName: string;
|
||||
text: string;
|
||||
border: string;
|
||||
background: string;
|
||||
};
|
||||
colorName: string
|
||||
text: string
|
||||
border: string
|
||||
background: string
|
||||
}
|
||||
|
||||
export type LabelColorObjects = {
|
||||
[key: string]: LabelColorObject;
|
||||
};
|
||||
|
||||
export type LabelColorHex = {
|
||||
rowId: string;
|
||||
value: LabelColor;
|
||||
};
|
||||
[key: string]: LabelColorObject
|
||||
}
|
||||
|
||||
export type GenericTableCardProps = {
|
||||
label: Label | null;
|
||||
editingLabelId: string | null;
|
||||
labelColorHex: LabelColorHex;
|
||||
isCreateMode: boolean;
|
||||
nameInputText: string,
|
||||
descriptionInputText: string,
|
||||
isMobileView?: boolean;
|
||||
handleGenerateRandomColor: (rowId?: string) => void;
|
||||
setEditingLabelId: (id: string | null) => void;
|
||||
setLabelColorHex: (color: LabelColorHex) => void;
|
||||
deleteLabel: (id: string) => void;
|
||||
setNameInputText: (text: string) => void,
|
||||
setDescriptionInputText: (text: string) => void,
|
||||
resetState: () => void,
|
||||
createLabel: () => void,
|
||||
updateLabel: (id: string) => void;
|
||||
setIsCreateMode: (isCreateMode: boolean) => void,
|
||||
onEditPress: (label: Label | null) => void,
|
||||
};
|
||||
label: Label | null
|
||||
editingLabelId: string | null
|
||||
labelColorHex: string
|
||||
isCreateMode: boolean
|
||||
nameInputText: string
|
||||
descriptionInputText: string
|
||||
isMobileView?: boolean
|
||||
handleGenerateRandomColor: (rowId?: string) => void
|
||||
setEditingLabelId: (id: string | null) => void
|
||||
setLabelColorHex: (color: string) => void
|
||||
deleteLabel: (id: string) => void
|
||||
setNameInputText: (text: string) => void
|
||||
setDescriptionInputText: (text: string) => void
|
||||
resetState: () => void
|
||||
createLabel: () => void
|
||||
updateLabel: (id: string) => void
|
||||
setIsCreateMode: (isCreateMode: boolean) => void
|
||||
onEditPress: (label: Label | null) => void
|
||||
}
|
||||
|
||||
export type LabelColorDropdownProps = {
|
||||
isCreateMode: boolean;
|
||||
canEdit: boolean;
|
||||
labelColorHexRowId: string;
|
||||
labelColorHexValue: string;
|
||||
labelId: string;
|
||||
labelColor: LabelColor;
|
||||
setLabelColorHex: (color: LabelColorHex) => void;
|
||||
};
|
||||
isCreateMode: boolean
|
||||
canEdit: boolean
|
||||
labelId: string
|
||||
labelColor: string
|
||||
setLabelColor: (color: string) => void
|
||||
}
|
||||
|
||||
56
yarn.lock
56
yarn.lock
@ -3245,6 +3245,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
|
||||
integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
|
||||
|
||||
"@icons/material@^0.2.4":
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
|
||||
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
|
||||
|
||||
"@istanbuljs/load-nyc-config@^1.0.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
|
||||
@ -8703,6 +8708,14 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
|
||||
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
|
||||
|
||||
"@types/react-color@^3.0.6":
|
||||
version "3.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
|
||||
integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
"@types/reactcss" "*"
|
||||
|
||||
"@types/react-dom@^17.0.2":
|
||||
version "17.0.11"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
|
||||
@ -8741,6 +8754,13 @@
|
||||
"@types/prop-types" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/reactcss@*":
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
|
||||
integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/request@*":
|
||||
version "2.48.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.7.tgz#a962d11a26e0d71d9a9913d96bb806dc4d4c2f19"
|
||||
@ -19029,7 +19049,7 @@ locate-path@^6.0.0:
|
||||
dependencies:
|
||||
p-locate "^5.0.0"
|
||||
|
||||
lodash-es@^4.17.11:
|
||||
lodash-es@^4.17.11, lodash-es@^4.17.15:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
@ -19174,7 +19194,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
|
||||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
|
||||
lodash@^4.0.1, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
@ -19576,6 +19596,11 @@ match-sorter@^6.3.1:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
remove-accents "0.4.2"
|
||||
|
||||
material-colors@^1.2.1:
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
|
||||
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
|
||||
|
||||
md5.js@^1.3.4:
|
||||
version "1.3.5"
|
||||
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
||||
@ -22776,7 +22801,7 @@ promzard@^0.3.0:
|
||||
dependencies:
|
||||
read "1"
|
||||
|
||||
prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.8.1:
|
||||
prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -23653,6 +23678,19 @@ rc@^1.2.8:
|
||||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
react-color@^2.19.3:
|
||||
version "2.19.3"
|
||||
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
|
||||
integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
|
||||
dependencies:
|
||||
"@icons/material" "^0.2.4"
|
||||
lodash "^4.17.15"
|
||||
lodash-es "^4.17.15"
|
||||
material-colors "^1.2.1"
|
||||
prop-types "^15.5.10"
|
||||
reactcss "^1.2.0"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
react-colorful@^5.1.2, react-colorful@^5.5.1:
|
||||
version "5.5.1"
|
||||
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
|
||||
@ -23948,6 +23986,13 @@ react@^17.0.2:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
reactcss@^1.2.0:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
|
||||
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
|
||||
dependencies:
|
||||
lodash "^4.0.1"
|
||||
|
||||
read-cmd-shim@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
|
||||
@ -26460,6 +26505,11 @@ tiny-invariant@^1.2.0:
|
||||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
|
||||
integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
|
||||
|
||||
tinycolor2@^1.4.1:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
|
||||
integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
|
||||
|
||||
title-case@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
|
||||
|
||||
Reference in New Issue
Block a user