1import { css } from '@emotion/react';
2import { theme, spacing } from '@expo/styleguide';
3import React from 'react';
4import ReactMarkdown from 'react-markdown';
5
6import { B } from '~/components/base/paragraph';
7import { CommentData } from '~/components/plugins/api/APIDataTypes';
8import { getTagData, mdInlineComponents } from '~/components/plugins/api/APISectionUtils';
9import { Callout } from '~/ui/components/Callout';
10
11type Props = {
12  comment?: CommentData;
13};
14
15export const APISectionDeprecationNote = ({ comment }: Props) => {
16  const deprecation = getTagData('deprecated', comment);
17  return deprecation ? (
18    <div css={deprecationNoticeStyle}>
19      <Callout type="warning" key="deprecation-note">
20        {deprecation.text.trim().length ? (
21          <ReactMarkdown
22            components={mdInlineComponents}>{`**Deprecated.** ${deprecation.text}`}</ReactMarkdown>
23        ) : (
24          <B>Deprecated</B>
25        )}
26      </Callout>
27    </div>
28  ) : null;
29};
30
31const deprecationNoticeStyle = css({
32  marginTop: spacing[4],
33
34  code: {
35    backgroundColor: theme.palette.yellow['000'],
36    borderColor: theme.palette.yellow[300],
37  },
38
39  '[data-expo-theme="dark"] & code': {
40    backgroundColor: theme.palette.yellow[100],
41    borderColor: theme.palette.yellow[200],
42  },
43
44  'table &': {
45    marginTop: 0,
46    marginBottom: spacing[3],
47
48    span: {
49      fontSize: '90%',
50    },
51  },
52});
53