carbon-react 111.9.1 → 111.10.0
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/esm/components/note/__internal__/status-icon/index.d.ts +1 -0
- package/esm/components/note/__internal__/status-icon/index.js +1 -0
- package/esm/components/note/__internal__/status-icon/status-icon.component.d.ts +9 -0
- package/esm/components/note/__internal__/{status-with-tooltip/status.component.js → status-icon/status-icon.component.js} +4 -6
- package/esm/components/note/__internal__/status-icon/status-icon.style.d.ts +2 -0
- package/esm/components/note/__internal__/{status-with-tooltip/status.style.js → status-icon/status-icon.style.js} +0 -0
- package/esm/components/note/index.d.ts +2 -2
- package/esm/components/note/note.component.d.ts +28 -0
- package/esm/components/note/note.component.js +188 -46
- package/esm/components/note/note.style.d.ts +13 -0
- package/esm/components/note/note.style.js +0 -5
- package/esm/components/numeral-date/index.d.ts +2 -1
- package/esm/components/numeral-date/numeral-date.component.d.ts +81 -0
- package/esm/components/numeral-date/numeral-date.component.js +237 -128
- package/esm/components/numeral-date/numeral-date.style.d.ts +11 -0
- package/esm/components/sidebar/sidebar.component.d.ts +2 -2
- package/esm/components/sidebar/sidebar.component.js +106 -2
- package/esm/components/sidebar/sidebar.style.d.ts +1 -6
- package/esm/components/sidebar/sidebar.style.js +7 -2
- package/esm/components/text-editor/__internal__/decorators/index.d.ts +3 -0
- package/esm/components/text-editor/__internal__/decorators/link-decorator.d.ts +7 -0
- package/esm/components/text-editor/__internal__/utils/index.d.ts +1 -0
- package/esm/components/text-editor/__internal__/utils/utils.d.ts +28 -0
- package/esm/components/text-editor/text-editor.component.d.ts +8 -0
- package/esm/components/text-editor/text-editor.style.d.ts +3 -0
- package/esm/style/utils/width.d.ts +1 -1
- package/lib/components/note/__internal__/status-icon/index.d.ts +1 -0
- package/lib/components/note/__internal__/{status-with-tooltip → status-icon}/index.js +2 -2
- package/lib/components/note/__internal__/{status-with-tooltip → status-icon}/package.json +1 -1
- package/lib/components/note/__internal__/status-icon/status-icon.component.d.ts +9 -0
- package/lib/components/note/__internal__/{status-with-tooltip/status.component.js → status-icon/status-icon.component.js} +5 -7
- package/lib/components/note/__internal__/status-icon/status-icon.style.d.ts +2 -0
- package/lib/components/note/__internal__/{status-with-tooltip/status.style.js → status-icon/status-icon.style.js} +0 -0
- package/lib/components/note/index.d.ts +2 -2
- package/lib/components/note/note.component.d.ts +28 -0
- package/lib/components/note/note.component.js +195 -55
- package/lib/components/note/note.style.d.ts +13 -0
- package/lib/components/note/note.style.js +0 -6
- package/lib/components/numeral-date/index.d.ts +2 -1
- package/lib/components/numeral-date/numeral-date.component.d.ts +81 -0
- package/lib/components/numeral-date/numeral-date.component.js +237 -128
- package/lib/components/numeral-date/numeral-date.style.d.ts +11 -0
- package/lib/components/sidebar/sidebar.component.d.ts +2 -2
- package/lib/components/sidebar/sidebar.component.js +106 -2
- package/lib/components/sidebar/sidebar.style.d.ts +1 -6
- package/lib/components/sidebar/sidebar.style.js +8 -2
- package/lib/components/text-editor/__internal__/decorators/index.d.ts +3 -0
- package/lib/components/text-editor/__internal__/decorators/link-decorator.d.ts +7 -0
- package/lib/components/text-editor/__internal__/utils/index.d.ts +1 -0
- package/lib/components/text-editor/__internal__/utils/utils.d.ts +28 -0
- package/lib/components/text-editor/text-editor.component.d.ts +8 -0
- package/lib/components/text-editor/text-editor.style.d.ts +3 -0
- package/lib/style/utils/width.d.ts +1 -1
- package/package.json +3 -2
- package/esm/components/note/__internal__/status-with-tooltip/index.js +0 -1
- package/esm/components/note/note.d.ts +0 -30
- package/esm/components/numeral-date/numeral-date.d.ts +0 -97
- package/lib/components/note/note.d.ts +0 -30
- package/lib/components/numeral-date/numeral-date.d.ts +0 -97
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./status-icon.component";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./status-icon.component";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface StatusIconProps {
|
|
3
|
+
/** renders a control for the Note */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/** Content for the tooltip */
|
|
6
|
+
tooltipMessage: string;
|
|
7
|
+
}
|
|
8
|
+
declare const StatusIcon: React.ForwardRefExoticComponent<StatusIconProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
export default StatusIcon;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
|
-
import StyledStatusIconWrapper from "./status.style";
|
|
3
|
+
import StyledStatusIconWrapper from "./status-icon.style";
|
|
4
4
|
import Tooltip from "../../../tooltip";
|
|
5
5
|
const StatusIcon = /*#__PURE__*/React.forwardRef(({
|
|
6
6
|
tooltipMessage,
|
|
@@ -14,10 +14,8 @@ const StatusIcon = /*#__PURE__*/React.forwardRef(({
|
|
|
14
14
|
}, children));
|
|
15
15
|
});
|
|
16
16
|
StatusIcon.propTypes = {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
/** Content for the tooltip */
|
|
21
|
-
tooltipMessage: PropTypes.string.isRequired
|
|
17
|
+
"children": PropTypes.node,
|
|
18
|
+
"tooltipMessage": PropTypes.string.isRequired
|
|
22
19
|
};
|
|
20
|
+
StatusIcon.displayName = "StatusIcon";
|
|
23
21
|
export default StatusIcon;
|
|
File without changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./note";
|
|
2
|
-
export
|
|
1
|
+
export { default } from "./note.component";
|
|
2
|
+
export type { NoteProps } from "./note.component";
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { EditorState } from "draft-js";
|
|
3
|
+
import { MarginProps } from "styled-system";
|
|
4
|
+
export interface NoteProps extends MarginProps {
|
|
5
|
+
/** Adds a created on date to the Note footer */
|
|
6
|
+
createdDate: string;
|
|
7
|
+
/** renders a control for the Note */
|
|
8
|
+
inlineControl?: React.ReactNode;
|
|
9
|
+
/** Adds a name to the Note footer */
|
|
10
|
+
name?: string;
|
|
11
|
+
/** The rich text content to display in the Note */
|
|
12
|
+
noteContent: EditorState;
|
|
13
|
+
/** Callback to report a url when a link is added */
|
|
14
|
+
onLinkAdded?: (url: string) => void;
|
|
15
|
+
/** The previews to display of any links added to the Editor */
|
|
16
|
+
previews?: React.ReactNode;
|
|
17
|
+
/** Adds a status and tooltip to the Note footer */
|
|
18
|
+
status?: {
|
|
19
|
+
text: string;
|
|
20
|
+
timeStamp: string;
|
|
21
|
+
};
|
|
22
|
+
/** Adds a Title to the Note */
|
|
23
|
+
title?: string;
|
|
24
|
+
/** Set a percentage-based width for the whole Note component, relative to its parent. */
|
|
25
|
+
width?: number;
|
|
26
|
+
}
|
|
27
|
+
export declare const Note: ({ createdDate, inlineControl, name, noteContent, onLinkAdded, previews, status, title, width, ...rest }: NoteProps) => JSX.Element;
|
|
28
|
+
export default Note;
|
|
@@ -3,26 +3,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
5
|
import { Editor } from "draft-js";
|
|
6
|
-
import styledSystemPropTypes from "@styled-system/prop-types";
|
|
7
6
|
import invariant from "invariant";
|
|
8
|
-
import { StyledNote, StyledNoteContent, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent } from "./note.style
|
|
9
|
-
import
|
|
7
|
+
import { StyledNote, StyledNoteContent, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent } from "./note.style";
|
|
8
|
+
import StatusIcon from "./__internal__/status-icon";
|
|
10
9
|
import { ActionPopover } from "../action-popover";
|
|
11
|
-
import { filterStyledSystemMarginProps } from "../../style/utils";
|
|
12
10
|
import { getDecoratedValue } from "../text-editor/__internal__/utils";
|
|
13
11
|
import { EditorContext } from "../text-editor/text-editor.component";
|
|
14
|
-
|
|
12
|
+
import LinkPreview from "../link-preview";
|
|
13
|
+
|
|
14
|
+
function hasExpectedDisplayName(child, displayName) {
|
|
15
|
+
return child.type.displayName === displayName;
|
|
16
|
+
}
|
|
15
17
|
|
|
16
18
|
const Note = ({
|
|
17
|
-
|
|
18
|
-
width = 100,
|
|
19
|
+
createdDate,
|
|
19
20
|
inlineControl,
|
|
20
|
-
title,
|
|
21
21
|
name,
|
|
22
|
-
|
|
23
|
-
status,
|
|
24
|
-
previews,
|
|
22
|
+
noteContent,
|
|
25
23
|
onLinkAdded,
|
|
24
|
+
previews,
|
|
25
|
+
status,
|
|
26
|
+
title,
|
|
27
|
+
width = 100,
|
|
26
28
|
...rest
|
|
27
29
|
}) => {
|
|
28
30
|
!(width > 0) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> width must be greater than 0") : invariant(false) : void 0;
|
|
@@ -30,7 +32,7 @@ const Note = ({
|
|
|
30
32
|
!noteContent ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> noteContent is required") : invariant(false) : void 0;
|
|
31
33
|
!(!status || status.text) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.text is required") : invariant(false) : void 0;
|
|
32
34
|
!(!status || status.timeStamp) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> status.timeStamp is required") : invariant(false) : void 0;
|
|
33
|
-
!(!inlineControl || inlineControl.type === ActionPopover) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> inlineControl must be an instance of <ActionPopover>") : invariant(false) : void 0;
|
|
35
|
+
!(!inlineControl || /*#__PURE__*/React.isValidElement(inlineControl) && inlineControl.type === ActionPopover) ? process.env.NODE_ENV !== "production" ? invariant(false, "<Note> inlineControl must be an instance of <ActionPopover>") : invariant(false) : void 0;
|
|
34
36
|
|
|
35
37
|
const renderStatus = () => {
|
|
36
38
|
if (!status) {
|
|
@@ -44,7 +46,7 @@ const Note = ({
|
|
|
44
46
|
return /*#__PURE__*/React.createElement(StyledFooterContent, {
|
|
45
47
|
hasName: !!name,
|
|
46
48
|
"data-component": "note-status"
|
|
47
|
-
}, /*#__PURE__*/React.createElement(
|
|
49
|
+
}, /*#__PURE__*/React.createElement(StatusIcon, {
|
|
48
50
|
tooltipMessage: timeStamp
|
|
49
51
|
}, text));
|
|
50
52
|
};
|
|
@@ -60,11 +62,14 @@ const Note = ({
|
|
|
60
62
|
"data-component": "note"
|
|
61
63
|
}), title && /*#__PURE__*/React.createElement(StyledTitle, null, title), inlineControl && /*#__PURE__*/React.createElement(StyledInlineControl, null, inlineControl), /*#__PURE__*/React.createElement(StyledNoteContent, null, /*#__PURE__*/React.createElement(Editor, {
|
|
62
64
|
readOnly: true,
|
|
63
|
-
editorState: getDecoratedValue(noteContent)
|
|
64
|
-
|
|
65
|
+
editorState: getDecoratedValue(noteContent),
|
|
66
|
+
onChange:
|
|
67
|
+
/* istanbul ignore next */
|
|
68
|
+
() => {}
|
|
69
|
+
})), React.Children.map(previews, preview => /*#__PURE__*/React.isValidElement(preview) && hasExpectedDisplayName(preview, LinkPreview.displayName) ? /*#__PURE__*/React.cloneElement(preview, {
|
|
65
70
|
as: "a",
|
|
66
71
|
onClose: undefined
|
|
67
|
-
})), createdDate && /*#__PURE__*/React.createElement(StyledNoteContent, {
|
|
72
|
+
}) : preview), createdDate && /*#__PURE__*/React.createElement(StyledNoteContent, {
|
|
68
73
|
hasPreview: !!React.Children.count(previews)
|
|
69
74
|
}, /*#__PURE__*/React.createElement(StyledFooter, null, name && /*#__PURE__*/React.createElement(StyledFooterContent, {
|
|
70
75
|
hasName: !!name
|
|
@@ -73,36 +78,173 @@ const Note = ({
|
|
|
73
78
|
}, createdDate), renderStatus()))));
|
|
74
79
|
};
|
|
75
80
|
|
|
76
|
-
Note.propTypes = {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
81
|
+
Note.propTypes = {
|
|
82
|
+
"createdDate": PropTypes.string.isRequired,
|
|
83
|
+
"inlineControl": PropTypes.node,
|
|
84
|
+
"m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
85
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
86
|
+
"description": PropTypes.string,
|
|
87
|
+
"toString": PropTypes.func.isRequired,
|
|
88
|
+
"valueOf": PropTypes.func.isRequired
|
|
89
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
90
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
91
|
+
"description": PropTypes.string,
|
|
92
|
+
"toString": PropTypes.func.isRequired,
|
|
93
|
+
"valueOf": PropTypes.func.isRequired
|
|
94
|
+
}), PropTypes.string]),
|
|
95
|
+
"margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
96
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
97
|
+
"description": PropTypes.string,
|
|
98
|
+
"toString": PropTypes.func.isRequired,
|
|
99
|
+
"valueOf": PropTypes.func.isRequired
|
|
100
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
101
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
102
|
+
"description": PropTypes.string,
|
|
103
|
+
"toString": PropTypes.func.isRequired,
|
|
104
|
+
"valueOf": PropTypes.func.isRequired
|
|
105
|
+
}), PropTypes.string]),
|
|
106
|
+
"marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
107
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
108
|
+
"description": PropTypes.string,
|
|
109
|
+
"toString": PropTypes.func.isRequired,
|
|
110
|
+
"valueOf": PropTypes.func.isRequired
|
|
111
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
112
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
113
|
+
"description": PropTypes.string,
|
|
114
|
+
"toString": PropTypes.func.isRequired,
|
|
115
|
+
"valueOf": PropTypes.func.isRequired
|
|
116
|
+
}), PropTypes.string]),
|
|
117
|
+
"marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
118
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
119
|
+
"description": PropTypes.string,
|
|
120
|
+
"toString": PropTypes.func.isRequired,
|
|
121
|
+
"valueOf": PropTypes.func.isRequired
|
|
122
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
123
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
124
|
+
"description": PropTypes.string,
|
|
125
|
+
"toString": PropTypes.func.isRequired,
|
|
126
|
+
"valueOf": PropTypes.func.isRequired
|
|
127
|
+
}), PropTypes.string]),
|
|
128
|
+
"marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
129
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
130
|
+
"description": PropTypes.string,
|
|
131
|
+
"toString": PropTypes.func.isRequired,
|
|
132
|
+
"valueOf": PropTypes.func.isRequired
|
|
133
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
134
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
135
|
+
"description": PropTypes.string,
|
|
136
|
+
"toString": PropTypes.func.isRequired,
|
|
137
|
+
"valueOf": PropTypes.func.isRequired
|
|
138
|
+
}), PropTypes.string]),
|
|
139
|
+
"marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
140
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
141
|
+
"description": PropTypes.string,
|
|
142
|
+
"toString": PropTypes.func.isRequired,
|
|
143
|
+
"valueOf": PropTypes.func.isRequired
|
|
144
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
145
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
146
|
+
"description": PropTypes.string,
|
|
147
|
+
"toString": PropTypes.func.isRequired,
|
|
148
|
+
"valueOf": PropTypes.func.isRequired
|
|
149
|
+
}), PropTypes.string]),
|
|
150
|
+
"marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
151
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
152
|
+
"description": PropTypes.string,
|
|
153
|
+
"toString": PropTypes.func.isRequired,
|
|
154
|
+
"valueOf": PropTypes.func.isRequired
|
|
155
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
156
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
157
|
+
"description": PropTypes.string,
|
|
158
|
+
"toString": PropTypes.func.isRequired,
|
|
159
|
+
"valueOf": PropTypes.func.isRequired
|
|
160
|
+
}), PropTypes.string]),
|
|
161
|
+
"marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
162
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
163
|
+
"description": PropTypes.string,
|
|
164
|
+
"toString": PropTypes.func.isRequired,
|
|
165
|
+
"valueOf": PropTypes.func.isRequired
|
|
166
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
167
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
168
|
+
"description": PropTypes.string,
|
|
169
|
+
"toString": PropTypes.func.isRequired,
|
|
170
|
+
"valueOf": PropTypes.func.isRequired
|
|
171
|
+
}), PropTypes.string]),
|
|
172
|
+
"mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
173
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
174
|
+
"description": PropTypes.string,
|
|
175
|
+
"toString": PropTypes.func.isRequired,
|
|
176
|
+
"valueOf": PropTypes.func.isRequired
|
|
177
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
178
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
179
|
+
"description": PropTypes.string,
|
|
180
|
+
"toString": PropTypes.func.isRequired,
|
|
181
|
+
"valueOf": PropTypes.func.isRequired
|
|
182
|
+
}), PropTypes.string]),
|
|
183
|
+
"ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
184
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
185
|
+
"description": PropTypes.string,
|
|
186
|
+
"toString": PropTypes.func.isRequired,
|
|
187
|
+
"valueOf": PropTypes.func.isRequired
|
|
188
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
189
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
190
|
+
"description": PropTypes.string,
|
|
191
|
+
"toString": PropTypes.func.isRequired,
|
|
192
|
+
"valueOf": PropTypes.func.isRequired
|
|
193
|
+
}), PropTypes.string]),
|
|
194
|
+
"mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
195
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
196
|
+
"description": PropTypes.string,
|
|
197
|
+
"toString": PropTypes.func.isRequired,
|
|
198
|
+
"valueOf": PropTypes.func.isRequired
|
|
199
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
200
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
201
|
+
"description": PropTypes.string,
|
|
202
|
+
"toString": PropTypes.func.isRequired,
|
|
203
|
+
"valueOf": PropTypes.func.isRequired
|
|
204
|
+
}), PropTypes.string]),
|
|
205
|
+
"mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
206
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
207
|
+
"description": PropTypes.string,
|
|
208
|
+
"toString": PropTypes.func.isRequired,
|
|
209
|
+
"valueOf": PropTypes.func.isRequired
|
|
210
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
211
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
212
|
+
"description": PropTypes.string,
|
|
213
|
+
"toString": PropTypes.func.isRequired,
|
|
214
|
+
"valueOf": PropTypes.func.isRequired
|
|
215
|
+
}), PropTypes.string]),
|
|
216
|
+
"mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
217
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
218
|
+
"description": PropTypes.string,
|
|
219
|
+
"toString": PropTypes.func.isRequired,
|
|
220
|
+
"valueOf": PropTypes.func.isRequired
|
|
221
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
222
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
223
|
+
"description": PropTypes.string,
|
|
224
|
+
"toString": PropTypes.func.isRequired,
|
|
225
|
+
"valueOf": PropTypes.func.isRequired
|
|
226
|
+
}), PropTypes.string]),
|
|
227
|
+
"my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
|
|
228
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
229
|
+
"description": PropTypes.string,
|
|
230
|
+
"toString": PropTypes.func.isRequired,
|
|
231
|
+
"valueOf": PropTypes.func.isRequired
|
|
232
|
+
}), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
|
|
233
|
+
"__@toStringTag": PropTypes.string.isRequired,
|
|
234
|
+
"description": PropTypes.string,
|
|
235
|
+
"toString": PropTypes.func.isRequired,
|
|
236
|
+
"valueOf": PropTypes.func.isRequired
|
|
237
|
+
}), PropTypes.string]),
|
|
238
|
+
"name": PropTypes.string,
|
|
239
|
+
"noteContent": PropTypes.object.isRequired,
|
|
240
|
+
"onLinkAdded": PropTypes.func,
|
|
241
|
+
"previews": PropTypes.node,
|
|
242
|
+
"status": PropTypes.shape({
|
|
243
|
+
"text": PropTypes.string.isRequired,
|
|
244
|
+
"timeStamp": PropTypes.string.isRequired
|
|
100
245
|
}),
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
previews: PropTypes.arrayOf(PropTypes.node),
|
|
104
|
-
|
|
105
|
-
/** Callback to report a url when a link is added */
|
|
106
|
-
onLinkAdded: PropTypes.func
|
|
246
|
+
"title": PropTypes.string,
|
|
247
|
+
"width": PropTypes.number
|
|
107
248
|
};
|
|
249
|
+
export { Note };
|
|
108
250
|
export default Note;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare const StyledNoteContent: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
hasPreview?: boolean | undefined;
|
|
3
|
+
}, never>;
|
|
4
|
+
declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
|
|
6
|
+
declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
|
|
7
|
+
hasName: boolean;
|
|
8
|
+
}, never>;
|
|
9
|
+
declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
|
|
11
|
+
width: number;
|
|
12
|
+
}, never>;
|
|
13
|
+
export { StyledNote, StyledNoteContent, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
-
import PropTypes from "prop-types";
|
|
3
2
|
import { margin } from "styled-system";
|
|
4
3
|
import baseTheme from "../../style/themes/base";
|
|
5
4
|
import { StyledLinkPreview } from "../link-preview/link-preview.style";
|
|
@@ -126,10 +125,6 @@ const StyledNote = styled.div`
|
|
|
126
125
|
|
|
127
126
|
${margin}
|
|
128
127
|
`;
|
|
129
|
-
StyledNote.propTypes = {
|
|
130
|
-
padding: PropTypes.string,
|
|
131
|
-
width: PropTypes.number
|
|
132
|
-
};
|
|
133
128
|
StyledNote.defaultProps = {
|
|
134
129
|
theme: baseTheme
|
|
135
130
|
};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default } from "./numeral-date";
|
|
1
|
+
export { default } from "./numeral-date.component";
|
|
2
|
+
export type { NumeralDateProps } from "./numeral-date.component";
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MarginProps } from "styled-system";
|
|
3
|
+
import { ValidationProps } from "../../__internal__/validations";
|
|
4
|
+
export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
|
|
5
|
+
export interface DayMonthDate {
|
|
6
|
+
dd: string;
|
|
7
|
+
mm: string;
|
|
8
|
+
}
|
|
9
|
+
export interface MonthYearDate {
|
|
10
|
+
mm: string;
|
|
11
|
+
yyyy: string;
|
|
12
|
+
}
|
|
13
|
+
export interface FullDate extends DayMonthDate {
|
|
14
|
+
yyyy: string;
|
|
15
|
+
}
|
|
16
|
+
export declare type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
|
|
17
|
+
export interface NumeralDateEvent<DateType extends NumeralDateObject = FullDate> {
|
|
18
|
+
target: {
|
|
19
|
+
name?: string;
|
|
20
|
+
id: string;
|
|
21
|
+
value: DateType;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate> extends ValidationProps, MarginProps {
|
|
25
|
+
/** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
|
|
26
|
+
adaptiveLabelBreakpoint?: number;
|
|
27
|
+
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
28
|
+
"data-component"?: string;
|
|
29
|
+
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
30
|
+
"data-element"?: string;
|
|
31
|
+
/** Identifier used for testing purposes, applied to the root element of the component. */
|
|
32
|
+
"data-role"?: string;
|
|
33
|
+
/** If true, the component will be disabled */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/** If true, the component will be read-only */
|
|
36
|
+
readOnly?: boolean;
|
|
37
|
+
dateFormat?: ValidDateFormat;
|
|
38
|
+
/** Default value for use in uncontrolled mode */
|
|
39
|
+
defaultValue?: DateType;
|
|
40
|
+
/** Value for use in controlled mode */
|
|
41
|
+
value?: DateType;
|
|
42
|
+
/** When true, enables the internal errors to be displayed */
|
|
43
|
+
enableInternalError?: boolean;
|
|
44
|
+
/** When true, enables the internal warnings to be displayed */
|
|
45
|
+
enableInternalWarning?: boolean;
|
|
46
|
+
/** Help content to be displayed under an input */
|
|
47
|
+
fieldHelp?: React.ReactNode;
|
|
48
|
+
/** `id` for events */
|
|
49
|
+
id?: string;
|
|
50
|
+
/** `name` for events */
|
|
51
|
+
name?: string;
|
|
52
|
+
/** Label */
|
|
53
|
+
label?: string;
|
|
54
|
+
/** Label alignment. Works only when labelInline is true */
|
|
55
|
+
labelAlign?: "left" | "right";
|
|
56
|
+
/** Text applied to label help tooltip */
|
|
57
|
+
labelHelp?: React.ReactNode;
|
|
58
|
+
/** When true, label is placed in line with an input */
|
|
59
|
+
labelInline?: boolean;
|
|
60
|
+
/** Label width */
|
|
61
|
+
labelWidth?: number;
|
|
62
|
+
/** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
|
|
63
|
+
labelSpacing?: 1 | 2;
|
|
64
|
+
/** Blur event handler */
|
|
65
|
+
onBlur?: (ev: NumeralDateEvent<DateType>) => void;
|
|
66
|
+
/** Change event handler */
|
|
67
|
+
onChange?: (ev: NumeralDateEvent<DateType>) => void;
|
|
68
|
+
/** Flag to configure component as mandatory */
|
|
69
|
+
required?: boolean;
|
|
70
|
+
/** Size of an input */
|
|
71
|
+
size?: "small" | "medium" | "large";
|
|
72
|
+
/** When true, validation icons will be placed on labels instead of being placed on the inputs */
|
|
73
|
+
validationOnLabel?: boolean;
|
|
74
|
+
/** Overrides the default tooltip position */
|
|
75
|
+
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
76
|
+
/** Aria label for rendered help component */
|
|
77
|
+
helpAriaLabel?: string;
|
|
78
|
+
}
|
|
79
|
+
export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
|
|
80
|
+
export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, ...rest }: NumeralDateProps<DateType>) => JSX.Element;
|
|
81
|
+
export default NumeralDate;
|