All files / app/src/entities/change-log/ui/change-log-custom-property change-log-custom-property.tsx

100% Statements 24/24
10% Branches 1/10
100% Functions 1/1
100% Lines 24/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 401x                       1x 1x 1x 1x 1x 1x 1x 1x 1x   1x   1x 1x 1x 1x 1x   1x 1x 1x 1x 1x 1x 1x   1x  
import { FC } from 'react'
import dayjs from 'dayjs'
import { DEFAULT_DATE_FORMAT } from '@tmk/ui-kit'
import { MassEditPropertyValue, usePropertyById } from '@/entities/property'
import { Tooltip } from '@/shared/ui'
 
export interface ChangeLogCustomPropertyProps {
  massValue?: MassEditPropertyValue
  propertyName?: string
  propertyValue?: string
}
 
export const ChangeLogCustomProperty: FC<ChangeLogCustomPropertyProps> = ({
  massValue,
  propertyName,
  propertyValue,
}) => {
  const { data: customProperty } = usePropertyById(massValue?.property as string, {
    enabled: !!massValue?.property && !propertyName,
    key: ['customProperty', (massValue?.property as string) || (propertyValue as string)],
  })
 
  const displayName = propertyName || customProperty?.name
 
  const displayValue =
    propertyValue ||
    massValue?.valueNumber ||
    massValue?.valueString ||
    (massValue?.valueDateTime && dayjs(massValue?.valueDateTime).format(DEFAULT_DATE_FORMAT))
 
  return (
    <div className='w-40 p-2 truncate bg-gray-tertiary rounded-base'>
      <Tooltip label={displayName as string}>
        <p className='text-left text-text-secondary truncate'>{displayName}</p>
      </Tooltip>
      <span className='text-black text-min-semibold'>{displayValue || '-'}</span>
    </div>
  )
}