Design system.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

95 lines
2.0 KiB

  1. import * as React from 'react';
  2. import clsx from 'clsx';
  3. /**
  4. * Derived HTML element of the {@link KeyValueTable} component.
  5. */
  6. export type KeyValueTableDerivedElement = HTMLDListElement;
  7. /**
  8. * Individual property of the {@link KeyValueTable} component.
  9. */
  10. export interface KeyValueTableProperty {
  11. /**
  12. * Key of the property.
  13. */
  14. key: string;
  15. /**
  16. * Class name of the property.
  17. */
  18. className?: string;
  19. /**
  20. * Value of the property.
  21. */
  22. valueProps?: React.HTMLProps<HTMLElement>;
  23. }
  24. /**
  25. * Props of the {@link KeyValueTable} component.
  26. */
  27. export interface KeyValueTableProps extends Omit<React.HTMLProps<KeyValueTableDerivedElement>, 'children'> {
  28. /**
  29. * Should the keys be hidden?
  30. */
  31. hiddenKeys?: boolean;
  32. /**
  33. * Properties displayed on the component.
  34. */
  35. properties?: (KeyValueTableProperty | boolean | null | undefined)[];
  36. }
  37. /**
  38. * Component for displaying key-value pairs.
  39. */
  40. export const KeyValueTable = React.forwardRef<KeyValueTableDerivedElement, KeyValueTableProps>((
  41. {
  42. hiddenKeys = false,
  43. properties = [],
  44. className,
  45. style,
  46. ...etcProps
  47. },
  48. forwardedRef,
  49. ) => (
  50. <dl
  51. {...etcProps}
  52. className={clsx(
  53. 'grid gap-y-1 grid-cols-3',
  54. className,
  55. )}
  56. ref={forwardedRef}
  57. style={style}
  58. >
  59. {properties.map((property) => typeof property === 'object' && property && (
  60. <div
  61. key={property.key}
  62. className={clsx('contents', property.className)}
  63. >
  64. <dt
  65. className={clsx(hiddenKeys && 'sr-only', 'pr-4')}
  66. >
  67. {property.key}
  68. </dt>
  69. <dd
  70. {...(property.valueProps ?? {})}
  71. className={clsx(
  72. 'm-0 text-ellipsis overflow-hidden',
  73. !hiddenKeys && 'col-span-2',
  74. hiddenKeys && 'col-span-3',
  75. property.valueProps?.className,
  76. )}
  77. >
  78. {property.valueProps?.children}
  79. </dd>
  80. </div>
  81. ))}
  82. </dl>
  83. ));
  84. KeyValueTable.displayName = 'KeyValueTable';
  85. KeyValueTable.defaultProps = {
  86. hiddenKeys: false,
  87. properties: [],
  88. };