-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Examples.tsx
45 lines (40 loc) 路 1.31 KB
/
Examples.tsx
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
40
41
42
43
44
45
import * as React from 'react';
import { FieldLabel, ExampleValue } from '../../common-elements/fields';
import { getSerializedValue, isArray } from '../../utils';
import { l } from '../../services/Labels';
import { FieldModel } from '../../services';
import styled from '../../styled-components';
export function Examples({ field }: { field: FieldModel }) {
if (!field.examples) {
return null;
}
return (
<>
<FieldLabel> {l('examples')}: </FieldLabel>
{isArray(field.examples) ? (
field.examples.map((example, idx) => {
const value = getSerializedValue(field, example);
const stringifyValue = field.in ? String(value) : JSON.stringify(value);
return (
<React.Fragment key={idx}>
<ExampleValue>{stringifyValue}</ExampleValue>{' '}
</React.Fragment>
);
})
) : (
<ExamplesList>
{Object.values(field.examples).map((example, idx) => (
<li key={idx + example.value}>
<ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> -{' '}
{example.summary || example.description}
</li>
))}
</ExamplesList>
)}
</>
);
}
const ExamplesList = styled.ul`
margin-top: 1em;
list-style-position: outside;
`;