@bigbinary/neeto-molecules 1.1.8 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/KeyboardShortcuts.cjs.js +22 -3
- package/dist/KeyboardShortcuts.cjs.js.map +1 -1
- package/dist/KeyboardShortcuts.js +22 -3
- package/dist/KeyboardShortcuts.js.map +1 -1
- package/dist/Metadata.cjs.js +272 -0
- package/dist/Metadata.cjs.js.map +1 -0
- package/dist/Metadata.js +266 -0
- package/dist/Metadata.js.map +1 -0
- package/package.json +2 -2
- package/src/translations/en.json +7 -0
- package/types/Metadata.d.ts +108 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neeto-molecules",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.10",
|
|
4
4
|
"description": "A package of reusable molecular components for neeto products.",
|
|
5
5
|
"repository": "git@github.com:bigbinary/neeto-molecules.git",
|
|
6
6
|
"author": "Amaljith K <amaljith.k@bigbinary.com>",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@bigbinary/neeto-icons": "^1.14.0",
|
|
55
55
|
"@bigbinary/neeto-molecules": "^1.0.5",
|
|
56
56
|
"@bigbinary/neeto-time-zones": "^0.5.0",
|
|
57
|
-
"@bigbinary/neetoui": "^5.2.
|
|
57
|
+
"@bigbinary/neetoui": "^5.2.15",
|
|
58
58
|
"@faker-js/faker": "7.6.0",
|
|
59
59
|
"@fullcalendar/core": "^6.1.8",
|
|
60
60
|
"@fullcalendar/daygrid": "^6.1.8",
|
package/src/translations/en.json
CHANGED
|
@@ -555,6 +555,13 @@
|
|
|
555
555
|
},
|
|
556
556
|
"confirmationModal": {
|
|
557
557
|
"required": "Enter \"{{confirmationText}}\" to confirm"
|
|
558
|
+
},
|
|
559
|
+
"metadata": {
|
|
560
|
+
"detailsTitle": "Details",
|
|
561
|
+
"card": {
|
|
562
|
+
"viewMore": "View more",
|
|
563
|
+
"viewLess": "View less"
|
|
564
|
+
}
|
|
558
565
|
}
|
|
559
566
|
}
|
|
560
567
|
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type BlockProps = {
|
|
3
|
+
title?: string;
|
|
4
|
+
actionBlock?: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
interface BlockComposition {
|
|
8
|
+
Block: React.FC<BlockProps>;
|
|
9
|
+
DetailsBlock: React.FC<BlockProps & {
|
|
10
|
+
details: Array<{
|
|
11
|
+
label?: string;
|
|
12
|
+
value?: React.ReactNode;
|
|
13
|
+
type?: string;
|
|
14
|
+
}>;
|
|
15
|
+
style?: "inline" | "multiline";
|
|
16
|
+
truncate?: Boolean;
|
|
17
|
+
truncateAt?: number;
|
|
18
|
+
}>;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
*
|
|
22
|
+
* This is a wrapper for displaying metadata information about an entity. It can
|
|
23
|
+
*
|
|
24
|
+
* have a header block and multiple card blocks inside it.
|
|
25
|
+
*
|
|
26
|
+
* 
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
*
|
|
30
|
+
* import React from "react";
|
|
31
|
+
* import Metadata from "@bigbinary/neeto-molecules/Metadata";
|
|
32
|
+
*
|
|
33
|
+
* const MetadataComponent = () => (
|
|
34
|
+
* <Metadata headerBlock={<Header />}>
|
|
35
|
+
* <Metadata.Block>Custom content</Metadata.Block>
|
|
36
|
+
* </Metadata>
|
|
37
|
+
* );
|
|
38
|
+
* @endexample
|
|
39
|
+
* A block component that can be rendered inside the Metadata wrapper component.
|
|
40
|
+
*
|
|
41
|
+
* 
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
*
|
|
45
|
+
* const ActionBlock = ({ onAdd, onEdit }) => (
|
|
46
|
+
* <MoreDropdown
|
|
47
|
+
* menuItems={[
|
|
48
|
+
* {
|
|
49
|
+
* label: "Add",
|
|
50
|
+
* onClick: onAdd,
|
|
51
|
+
* },
|
|
52
|
+
* {
|
|
53
|
+
* label: "Edit",
|
|
54
|
+
* onClick: onEdit,
|
|
55
|
+
* },
|
|
56
|
+
* ]}
|
|
57
|
+
* />
|
|
58
|
+
* );
|
|
59
|
+
*
|
|
60
|
+
* const MetadataComponent = () => (
|
|
61
|
+
* <Metadata>
|
|
62
|
+
* <Metadata.Block actionBlock={<ActionBlock />} title="Tags">
|
|
63
|
+
* Custom content
|
|
64
|
+
* </Metadata.Block>
|
|
65
|
+
* </Metadata>
|
|
66
|
+
* );
|
|
67
|
+
* @endexample
|
|
68
|
+
* A custom block component built on top of Metadata.Block. It can be used to
|
|
69
|
+
*
|
|
70
|
+
* display some details as label-value pairs. It has a few options for rendering
|
|
71
|
+
*
|
|
72
|
+
* label and value inline or multiline. It also has the option to set a view more
|
|
73
|
+
*
|
|
74
|
+
* button to hide certain fields.
|
|
75
|
+
*
|
|
76
|
+
* 
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
*
|
|
80
|
+
* const MetadataComponent = () => (
|
|
81
|
+
* const detailsToTruncate = [
|
|
82
|
+
* { label: "Name", value: "Oliver" },
|
|
83
|
+
* { label: "Phone", value: "1234567890" },
|
|
84
|
+
* { label: "Email", value: "oliver@example.com" },
|
|
85
|
+
* { label: "Custom", value: <Input /> },
|
|
86
|
+
* ];
|
|
87
|
+
*
|
|
88
|
+
* const detailsWithDivider = [
|
|
89
|
+
* { label: "Name", value: "Oliver" },
|
|
90
|
+
* { label: "Phone", value: "1234567890" },
|
|
91
|
+
* { type: "divider" },
|
|
92
|
+
* { label: "Email", value: "oliver@example.com" },
|
|
93
|
+
* { label: "Custom", value: <Input /> },
|
|
94
|
+
* ];
|
|
95
|
+
*
|
|
96
|
+
* <Metadata>
|
|
97
|
+
* <Metadata.DetailsBlock truncate details={detailsToTruncate} truncateAt={2} />
|
|
98
|
+
* <Metadata.DetailsBlock details={detailsWithDivider} />
|
|
99
|
+
* </Metadata>
|
|
100
|
+
* );
|
|
101
|
+
* @endexample
|
|
102
|
+
*/
|
|
103
|
+
const Metadata: React.FC<{
|
|
104
|
+
className?: string;
|
|
105
|
+
headerBlock?: React.ReactNode;
|
|
106
|
+
size?: "small" | "medium";
|
|
107
|
+
}> & BlockComposition;
|
|
108
|
+
export default Metadata;
|