Skip to content

Commit 8ebd1b1

Browse files
ianvexlerianvexler
committed
Added Comments
1 parent c36f99b commit 8ebd1b1

22 files changed

+231
-19
lines changed

‎dist/components/comments/Comments.d.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
export interface CommentsProps extends React.HTMLProps<HTMLDivElement> {
3+
}
4+
declare const Comments: {
5+
({ children, ...rest }: CommentsProps): React.JSX.Element;
6+
Input: ({ onSubmit, ...rest }: import("./components/CommentInput").CommentInput) => React.JSX.Element;
7+
Item: ({ inbound, text, className, createdAt, createdBy, onDelete, ...rest }: import("./components/CommentItem").CommentItemProps) => React.JSX.Element;
8+
};
9+
export default Comments;
10+
//# sourceMappingURL=Comments.d.ts.map

‎dist/components/comments/Comments.d.ts.map

+1
Original file line numberDiff line numberDiff line change

‎dist/components/comments/Commets.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
export interface CommentsProps extends React.HTMLProps<HTMLDivElement> {
3+
}
4+
declare const Comments: {
5+
({ children, ...rest }: CommentsProps): React.JSX.Element;
6+
Item: ({ inbound, text, className, ...rest }: import("./components/CommentItem").CommentItemProps) => React.JSX.Element;
7+
};
8+
export default Comments;
9+
//# sourceMappingURL=Commets.d.ts.map

‎dist/components/comments/Commets.d.ts.map

+1
Original file line numberDiff line numberDiff line change

‎dist/components/comments/components/CommentInput.d.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { FormControlProps } from 'react-bootstrap';
3+
export interface CommentInput extends FormControlProps {
4+
onSubmit: () => void;
5+
}
6+
declare const CommentInput: ({ onSubmit, ...rest }: CommentInput) => React.JSX.Element;
7+
export default CommentInput;
8+
//# sourceMappingURL=CommentInput.d.ts.map

‎dist/components/comments/components/CommentInput.d.ts.map

+1
Original file line numberDiff line numberDiff line change

‎dist/components/comments/components/CommentItem.d.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
export interface CommentItemProps extends React.HTMLProps<HTMLDivElement> {
3+
inbound: boolean;
4+
text: string;
5+
createdBy: string;
6+
createdAt: Date;
7+
onDelete: () => void;
8+
}
9+
declare const CommentItem: ({ inbound, text, className, createdAt, createdBy, onDelete, ...rest }: CommentItemProps) => React.JSX.Element;
10+
export default CommentItem;
11+
//# sourceMappingURL=CommentItem.d.ts.map

‎dist/components/comments/components/CommentItem.d.ts.map

+1
Original file line numberDiff line numberDiff line change

‎dist/index.css

+4
Original file line numberDiff line numberDiff line change
@@ -1137,6 +1137,10 @@ i.toast-icon {
11371137
}
11381138
}
11391139

1140+
.cursor-pointer {
1141+
cursor: pointer;
1142+
}
1143+
11401144
@font-face {
11411145
font-family: "kohinoor";
11421146
src: url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/l?subset_id=2&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/d?subset_id=2&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/a?subset_id=2&fvd=n5&v=3") format("opentype");

‎dist/index.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@ import Subtitle from './components/subtitle/Subtitle';
2020
import Layout from './components/layout/Layout';
2121
import Tabs from './components/tabs/Tabs';
2222
import TexmoIcon from './components/texmoIcon/TexmoIcon';
23+
import Comments from './components/comments/Comments';
2324
import TexmoProvider from './contexts/TexmoContext';
2425
import * as Icons from './icons/index';
2526
import '../scss/texmo-react-components.scss';
26-
export { Button, Table, Form, Title, Card, Chip, List, ProgressBar, SideNavbar, InfoTile, Header, UserProfile, Footer, SearchBar, Breadcrumbs, FilterButton, NavItem, Nav, Subtitle, Layout, Tabs, TexmoIcon, Icons, TexmoProvider, };
27+
export { Button, Table, Form, Title, Card, Chip, List, ProgressBar, SideNavbar, InfoTile, Header, UserProfile, Footer, SearchBar, Breadcrumbs, FilterButton, NavItem, Nav, Subtitle, Layout, Tabs, TexmoIcon, Comments, Icons, TexmoProvider, };
2728
//# sourceMappingURL=index.d.ts.map

‎dist/index.d.ts.map

+1-1
Original file line numberDiff line numberDiff line change

‎dist/index.es.css

+4
Original file line numberDiff line numberDiff line change
@@ -1137,6 +1137,10 @@ i.toast-icon {
11371137
}
11381138
}
11391139

1140+
.cursor-pointer {
1141+
cursor: pointer;
1142+
}
1143+
11401144
@font-face {
11411145
font-family: "kohinoor";
11421146
src: url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/l?subset_id=2&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/d?subset_id=2&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/a?subset_id=2&fvd=n5&v=3") format("opentype");

‎dist/index.es.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js

+47-10
Original file line numberDiff line numberDiff line change
@@ -5871,6 +5871,7 @@ const makeEventKey = (eventKey, href = null) => {
58715871
if (eventKey != null) return String(eventKey);
58725872
return href || null;
58735873
};
5874+
var SelectableContext$1 = SelectableContext;
58745875

58755876
const NavContext$1 = /*#__PURE__*/React__namespace.createContext(null);
58765877
NavContext$1.displayName = 'NavContext';
@@ -5898,7 +5899,7 @@ function useDropdownItem({
58985899
disabled,
58995900
onClick
59005901
}) {
5901-
const onSelectCtx = React.useContext(SelectableContext);
5902+
const onSelectCtx = React.useContext(SelectableContext$1);
59025903
const navContext = React.useContext(NavContext$2);
59035904
const {
59045905
activeKey
@@ -5994,7 +5995,7 @@ function Dropdown$2({
59945995
const lastShow = usePrevious(show);
59955996
const lastSourceEvent = React.useRef(null);
59965997
const focusInDropdown = React.useRef(false);
5997-
const onSelectCtx = React.useContext(SelectableContext);
5998+
const onSelectCtx = React.useContext(SelectableContext$1);
59985999
const toggle = React.useCallback((nextShow, event, source = event == null ? void 0 : event.type) => {
59996000
onToggle(nextShow, {
60006001
originalEvent: event,
@@ -6120,7 +6121,7 @@ function Dropdown$2({
61206121
break;
61216122
}
61226123
});
6123-
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
6124+
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext$1.Provider, {
61246125
value: handleSelect,
61256126
children: /*#__PURE__*/jsxRuntime.jsx(DropdownContext$3.Provider, {
61266127
value: context,
@@ -6845,7 +6846,7 @@ const Form$2 = /*#__PURE__*/React__namespace.forwardRef(({
68456846
}));
68466847
Form$2.displayName = 'Form';
68476848
Form$2.propTypes = propTypes$8;
6848-
var BootstrapForm = Object.assign(Form$2, {
6849+
var Form$3 = Object.assign(Form$2, {
68496850
Group: BootstrapFormGroup,
68506851
Control: FormControl$2,
68516852
Floating: FormFloating$1,
@@ -6929,7 +6930,7 @@ function useNavItem({
69296930
role,
69306931
disabled
69316932
}) {
6932-
const parentOnSelect = React.useContext(SelectableContext);
6933+
const parentOnSelect = React.useContext(SelectableContext$1);
69336934
const navContext = React.useContext(NavContext$2);
69346935
const tabContext = React.useContext(TabContext$1);
69356936
let isActive = active;
@@ -7021,7 +7022,7 @@ const Nav$2 = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
70217022
// and don't want to reset the set in the effect
70227023
const forceUpdate = useForceUpdate();
70237024
const needsRefocusRef = React.useRef(false);
7024-
const parentOnSelect = React.useContext(SelectableContext);
7025+
const parentOnSelect = React.useContext(SelectableContext$1);
70257026
const tabContext = React.useContext(TabContext$1);
70267027
let getControlledId, getControllerId;
70277028
if (tabContext) {
@@ -7082,7 +7083,7 @@ const Nav$2 = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
70827083
needsRefocusRef.current = false;
70837084
});
70847085
const mergedRef = useMergedRefs(ref, listNode);
7085-
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
7086+
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext$1.Provider, {
70867087
value: handleSelect,
70877088
children: /*#__PURE__*/jsxRuntime.jsx(NavContext$2.Provider, {
70887089
value: {
@@ -8453,7 +8454,7 @@ const Navbar = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
84538454
}), [bsPrefix, expanded, expand, onToggle]);
84548455
return /*#__PURE__*/jsxRuntime.jsx(NavbarContext.Provider, {
84558456
value: navbarContext,
8456-
children: /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
8457+
children: /*#__PURE__*/jsxRuntime.jsx(SelectableContext$1.Provider, {
84578458
value: handleCollapse,
84588459
children: /*#__PURE__*/jsxRuntime.jsx(Component, {
84598460
ref: ref,
@@ -23433,7 +23434,7 @@ FormRichText.Feedback = Feedback$1;
2343323434

2343423435
var FormDateTime = function (_a) {
2343523436
var className = _a.className, rest = __rest(_a, ["className"]);
23436-
return (React.createElement(BootstrapForm.Control, __assign$1({ as: "input", type: "datetime-local", className: className }, rest)));
23437+
return (React.createElement(Form$3.Control, __assign$1({ as: "input", type: "datetime-local", className: className }, rest)));
2343723438
};
2343823439
FormDateTime.Feedback = Feedback$1;
2343923440

@@ -27067,7 +27068,7 @@ FormAsyncTypeahead.Feedback = Feedback$1;
2706727068

2706827069
var Form$1 = function (_a) {
2706927070
var children = _a.children, rest = __rest(_a, ["children"]);
27070-
return React.createElement(BootstrapForm, __assign$1({}, rest), children);
27071+
return React.createElement(Form$3, __assign$1({}, rest), children);
2707127072
};
2707227073
Form$1.Group = FormGroup;
2707327074
Form$1.Label = FormLabel;
@@ -29321,10 +29322,46 @@ var Tabs = function (_a) {
2932129322
};
2932229323
Tabs.Button = TabButton;
2932329324

29325+
var CommentItem = function (_a) {
29326+
var inbound = _a.inbound, text = _a.text, className = _a.className, createdAt = _a.createdAt, createdBy = _a.createdBy, onDelete = _a.onDelete, rest = __rest(_a, ["inbound", "text", "className", "createdAt", "createdBy", "onDelete"]);
29327+
var itemClass = classNames(className, 'w-75 border rounded p-3 mt-3', inbound ? 'bg-secondary' : 'text-white bg-primary');
29328+
var localeFormat = new Intl.DateTimeFormat('default', {
29329+
dateStyle: 'short',
29330+
timeStyle: 'short',
29331+
});
29332+
return (React.createElement("div", { className: classNames('d-flex', inbound ? 'justify-content-start' : 'justify-content-end') },
29333+
React.createElement("div", __assign$1({ className: itemClass }, rest),
29334+
text,
29335+
React.createElement("div", { className: "d-flex justify-content-between mt-2 opacity-75" },
29336+
React.createElement("span", null,
29337+
"From: ",
29338+
createdBy),
29339+
React.createElement("div", null,
29340+
React.createElement("span", { className: classNames(!inbound ? "me-2" : null) }, localeFormat.format(createdAt)),
29341+
!inbound ? (React.createElement("span", { className: "text-decoration-underline cursor-pointer", onClick: onDelete }, "Delete")) : null)))));
29342+
};
29343+
29344+
var CommentInput = function (_a) {
29345+
var onSubmit = _a.onSubmit, rest = __rest(_a, ["onSubmit"]);
29346+
return (React.createElement("div", null,
29347+
React.createElement(Subtitle, { text: "Comments:", className: "mb-2" }),
29348+
React.createElement(Form$3.Control, __assign$1({ as: "textarea", placeholder: "Leave a comment..." }, rest)),
29349+
React.createElement("div", { className: "d-flex justify-content-end mt-2" },
29350+
React.createElement(Button, { onClick: onSubmit }, "Comment"))));
29351+
};
29352+
29353+
var Comments = function (_a) {
29354+
var children = _a.children, rest = __rest(_a, ["children"]);
29355+
return React.createElement("div", __assign$1({}, rest), children);
29356+
};
29357+
Comments.Input = CommentInput;
29358+
Comments.Item = CommentItem;
29359+
2932429360
exports.Breadcrumbs = Breadcrumbs;
2932529361
exports.Button = Button;
2932629362
exports.Card = Card;
2932729363
exports.Chip = Chip;
29364+
exports.Comments = Comments;
2932829365
exports.FilterButton = FilterButton;
2932929366
exports.Footer = Footer;
2933029367
exports.Form = Form$1;

‎dist/index.min.css

+4
Original file line numberDiff line numberDiff line change
@@ -1137,6 +1137,10 @@ i.toast-icon {
11371137
}
11381138
}
11391139

1140+
.cursor-pointer {
1141+
cursor: pointer;
1142+
}
1143+
11401144
@font-face {
11411145
font-family: "kohinoor";
11421146
src: url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/l?subset_id=2&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/d?subset_id=2&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/90bc9f/0000000000000000774f4a9a/30/a?subset_id=2&fvd=n5&v=3") format("opentype");

‎dist/index.min.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/pages/ListPage.tsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumbs, FilterButton, Subtitle, Tabs } from '@the-curve-consulting/texmo-react-components';
1+
import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumbs, FilterButton, Subtitle, Tabs, Comments } from '@the-curve-consulting/texmo-react-components';
22
import { Col, Row } from 'react-bootstrap';
33
import { Link } from 'react-router-dom';
44

@@ -86,6 +86,18 @@ const ListPage = () => {
8686
</List.Row>
8787
</List.Body>
8888
</List>
89+
90+
<Comments className='mt-3'>
91+
<Comments.Input onSubmit={() => {}}/>
92+
93+
<Comments.Item
94+
text='THis is a comment'
95+
inbound={false}
96+
createdAt={new Date()}
97+
createdBy='John Doe'
98+
onDelete={() => {}}
99+
/>
100+
</Comments>
89101
</div>
90102
)
91103
}

‎scss/App.scss

+4
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,7 @@ i.toast-icon {
189189
}
190190
}
191191
}
192+
193+
.cursor-pointer{
194+
cursor: pointer;
195+
}

‎src/components/comments/Comments.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import CommentItem from './components/CommentItem';
3+
import CommentInput from './components/CommentInput';
4+
5+
export interface CommentsProps extends React.HTMLProps<HTMLDivElement> {}
6+
7+
const Comments = ({ children, ...rest }: CommentsProps) => {
8+
return <div {...rest}>{children}</div>;
9+
};
10+
11+
Comments.Input = CommentInput;
12+
Comments.Item = CommentItem;
13+
14+
export default Comments;

‎src/components/comments/components/CommentInput.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Button from 'components/button/Button';
2+
import Subtitle from 'components/subtitle/Subtitle';
3+
import React from 'react';
4+
import { Form, FormControlProps } from 'react-bootstrap';
5+
6+
export interface CommentInput extends FormControlProps {
7+
onSubmit: () => void;
8+
}
9+
10+
const CommentInput = ({ onSubmit, ...rest }: CommentInput) => {
11+
return (
12+
<div>
13+
<Subtitle text="Comments:" className="mb-2" />
14+
<Form.Control as="textarea" placeholder="Leave a comment..." {...rest} />
15+
16+
<div className="d-flex justify-content-end mt-2">
17+
<Button onClick={onSubmit}>Comment</Button>
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default CommentInput;

‎src/components/comments/components/CommentItem.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import classNames from 'classnames';
2+
import React from 'react';
3+
4+
export interface CommentItemProps extends React.HTMLProps<HTMLDivElement> {
5+
inbound: boolean;
6+
text: string;
7+
createdBy: string;
8+
createdAt: Date;
9+
onDelete: () => void;
10+
}
11+
12+
const CommentItem = ({
13+
inbound,
14+
text,
15+
className,
16+
createdAt,
17+
createdBy,
18+
onDelete,
19+
...rest
20+
}: CommentItemProps) => {
21+
const itemClass = classNames(
22+
className,
23+
'w-75 border rounded p-3 mt-3',
24+
inbound ? 'bg-secondary' : 'text-white bg-primary'
25+
);
26+
27+
const localeFormat = new Intl.DateTimeFormat('default', {
28+
dateStyle: 'short',
29+
timeStyle: 'short',
30+
});
31+
32+
return (
33+
<div
34+
className={classNames(
35+
'd-flex',
36+
inbound ? 'justify-content-start' : 'justify-content-end'
37+
)}
38+
>
39+
<div className={itemClass} {...rest}>
40+
{text}
41+
42+
<div className="d-flex justify-content-between mt-2 opacity-75">
43+
<span>From: {createdBy}</span>
44+
45+
<div>
46+
<span className={classNames(!inbound ? 'me-2' : null)}>
47+
{localeFormat.format(createdAt)}
48+
</span>
49+
50+
{!inbound ? (
51+
<span
52+
className="text-decoration-underline cursor-pointer"
53+
onClick={onDelete}
54+
>
55+
Delete
56+
</span>
57+
) : null}
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
);
63+
};
64+
65+
export default CommentItem;

0 commit comments

Comments
 (0)