Skip to content

Commit

Permalink
Merge pull request #173 from ynput/develop
Browse files Browse the repository at this point in the history 
Release fixes
  • Loading branch information
@Innders
Innders authored Aug 15, 2024
2 parents fab69e3 + 2667e03 commit d1b702b
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 27 deletions.
65 changes: 46 additions & 19 deletions src/EntityCard/EntityCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import { forwardRef, KeyboardEvent, MouseEvent, useLayoutEffect, useRef, useState } from 'react'
import {
forwardRef,
HTMLAttributes,
KeyboardEvent,
MouseEvent,
useLayoutEffect,
useRef,
useState,
} from 'react'
import { Icon, IconType } from '../Icon'
import * as Styled from './EntityCard.styled'
import { User, UserImagesStacked } from '../User/UserImagesStacked'
import { User } from '../User/UserImagesStacked'
import clsx from 'clsx'
import useImageLoader from '../helpers/useImageLoader'
import useUserImagesLoader from './useUserImagesLoader'
import { Dropdown, DropdownRef } from '../Dropdowns/Dropdown'
import { AssigneeSelect } from '../Dropdowns/AssigneeSelect'
import { Status, StatusSelect } from '../Dropdowns/StatusSelect'
import { Dropdown, DropdownProps, DropdownRef } from '../Dropdowns/Dropdown'
import { AssigneeSelect, AssigneeSelectProps } from '../Dropdowns/AssigneeSelect'
import { Status, StatusSelect, StatusSelectProps } from '../Dropdowns/StatusSelect'
import { UserImage } from '../User/UserImage'

type NotificationType = 'comment' | 'due' | 'overdue'
Expand Down Expand Up @@ -73,13 +81,20 @@ export interface EntityCardProps extends React.HTMLAttributes<HTMLDivElement> {
assigneeOptions?: User[]
statusOptions?: Status[]
priorityOptions?: PriorityType[]
editOnHover?: boolean
// editing callbacks
onAssigneeChange?: (users: string[]) => void
onStatusChange?: (status: string[]) => void
onPriorityChange?: (priority: string[]) => void
// other functions
onThumbnailKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void
onActivate?: () => void
pt?: {
thumbnail?: HTMLAttributes<HTMLDivElement>
image?: HTMLAttributes<HTMLImageElement>
assigneeSelect?: AssigneeSelectProps
statusSelect?: StatusSelectProps
prioritySelect?: DropdownProps
}
}

export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
Expand Down Expand Up @@ -115,11 +130,12 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
assigneeOptions,
statusOptions,
priorityOptions,
editOnHover,
onAssigneeChange,
onStatusChange,
onPriorityChange,
onThumbnailKeyDown,
onActivate,
pt = {},
...props
},
ref,
Expand Down Expand Up @@ -215,8 +231,11 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(

return (
<Styled.Card
{...props}
ref={ref}
$statusColor={status?.color}
tabIndex={0}
onMouseLeave={closeEditors}
{...props}
className={clsx(
{
isLoading,
Expand All @@ -232,8 +251,6 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
variant,
props.className,
)}
$statusColor={status?.color}
tabIndex={0}
onClick={(e) => {
if (!clickedEditableElement(e)) {
onActivate && onActivate()
Expand All @@ -247,7 +264,6 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
if (!clickedEditableElement(e)) onActivate && onActivate()
}
}}
onMouseLeave={closeEditors}
>
{shouldShowTag(header, 'header') && (
<Styled.Header className={'header loading-visible'}>
Expand Down Expand Up @@ -277,12 +293,13 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
</Styled.Header>
)}
<Styled.Thumbnail
className={clsx('thumbnail', { loading: isLoading })}
{...pt.thumbnail}
className={clsx('thumbnail', { loading: isLoading }, pt?.thumbnail?.className)}
tabIndex={isDraggable ? 0 : undefined}
onKeyDown={(e) => {
if (!isDraggable) return
e.stopPropagation()
onThumbnailKeyDown && onThumbnailKeyDown(e)
pt.thumbnail?.onKeyDown && pt.thumbnail?.onKeyDown(e)
if (e.code === 'Enter' || e.code === 'Space') {
onActivate && onActivate()
}
Expand All @@ -298,8 +315,12 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
{imageUrl && (
<Styled.Image
src={imageUrl}
className={clsx({ loading: isThumbnailLoading || isThumbnailError })}
onMouseEnter={closeEditors}
{...pt.image}
className={clsx(
{ loading: isThumbnailLoading || isThumbnailError },
pt?.image?.className,
)}
/>
)}
{/* TOP ROW */}
Expand Down Expand Up @@ -346,6 +367,8 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
options={assigneeOptions}
ref={assigneesDropdownRef}
onChange={(value) => onAssigneeChange(value)}
tabIndex={0}
{...pt.assigneeSelect}
/>
)}

Expand All @@ -355,17 +378,21 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
options={statusOptions}
ref={statusDropdownRef}
onChange={(value) => onStatusChange([value])}
tabIndex={0}
{...pt.statusSelect}
/>
)}

{/* priority dropdown */}
{priorityEditable && (
<Dropdown
value={[priority.name]}
options={priorityOptions}
dataKey="name"
ref={priorityDropdownRef}
onChange={(value) => onPriorityChange(value as string[])}
value={[priority.name]}
options={priorityOptions}
tabIndex={0}
{...pt.prioritySelect}
/>
)}
</Styled.Editor>
Expand All @@ -380,7 +407,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
editable: assigneesEditable,
empty: !users?.length,
})}
onMouseEnter={(e) => handleEditableHover(e, 'assignees')}
onMouseEnter={(e) => editOnHover && handleEditableHover(e, 'assignees')}
onClick={(e) => handleEditableHover(e, 'assignees')}
>
{users?.length ? (
Expand Down Expand Up @@ -421,7 +448,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
editable: statusEditable,
isLoading,
})}
onMouseEnter={(e) => handleEditableHover(e, 'status')}
onMouseEnter={(e) => editOnHover && handleEditableHover(e, 'status')}
onClick={(e) => handleEditableHover(e, 'status')}
>
{status?.icon && (
Expand All @@ -446,7 +473,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
{shouldShowTag(priority && !hidePriority, 'priority') && (
<Styled.Tag
className={clsx('tag priority', { editable: priorityEditable, isLoading })}
onMouseEnter={(e) => handleEditableHover(e, 'priority')}
onMouseEnter={(e) => editOnHover && handleEditableHover(e, 'priority')}
onClick={(e) => handleEditableHover(e, 'priority')}
>
{priority?.icon && <Icon icon={priority.icon} />}
Expand Down
27 changes: 19 additions & 8 deletions src/primereact/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,25 @@ $prime-button-background: $color-grey-03;
margin-bottom: 40px; // to move the scrollbar at least a little bit lower
}

.p-datatable .p-datatable-tbody > tr {
// even background
background: var(--md-sys-color-surface-container-low-hover);

// odd background
&.p-row-odd {
background: var(--md-sys-color-surface-container-low);
}
}

.p-treetable .p-treetable-tbody > tr {
&:nth-child(even) {
background: var(--md-sys-color-surface-container-low-hover);
}
&:nth-child(odd) {
background: var(--md-sys-color-surface-container-low);
}
}

// table cell padding
.p-datatable .p-datatable-tbody > tr,
.p-treetable .p-treetable-tbody > tr {
Expand Down Expand Up @@ -109,14 +128,6 @@ $prime-button-background: $color-grey-03;
}
}

&:nth-child(odd) {
background: var(--md-sys-color-surface-container-low);
}

&:nth-child(even) {
background: var(--md-sys-color-surface-container-low-hover);
}

&.p-highlight {
background: var(--md-sys-color-primary-container) !important;
&:hover {
Expand Down

0 comments on commit d1b702b

Please sign in to comment.