Skip to content

Commit

Permalink
Added Comments
Browse files Browse the repository at this point in the history
  • Loading branch information
ianvexler committed Apr 26, 2024
1 parent ba44631 commit 710252e
Show file tree
Hide file tree
Showing 22 changed files with 231 additions and 19 deletions.
10 changes: 10 additions & 0 deletions dist/components/comments/Comments.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
export interface CommentsProps extends React.HTMLProps<HTMLDivElement> {
}
declare const Comments: {
({ children, ...rest }: CommentsProps): React.JSX.Element;
Input: ({ onSubmit, ...rest }: import("./components/CommentInput").CommentInput) => React.JSX.Element;
Item: ({ inbound, text, className, createdAt, createdBy, onDelete, ...rest }: import("./components/CommentItem").CommentItemProps) => React.JSX.Element;
};
export default Comments;
//# sourceMappingURL=Comments.d.ts.map
1 change: 1 addition & 0 deletions dist/components/comments/Comments.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions dist/components/comments/Commets.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from "react";
export interface CommentsProps extends React.HTMLProps<HTMLDivElement> {
}
declare const Comments: {
({ children, ...rest }: CommentsProps): React.JSX.Element;
Item: ({ inbound, text, className, ...rest }: import("./components/CommentItem").CommentItemProps) => React.JSX.Element;
};
export default Comments;
//# sourceMappingURL=Commets.d.ts.map
1 change: 1 addition & 0 deletions dist/components/comments/Commets.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions dist/components/comments/components/CommentInput.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import { FormControlProps } from 'react-bootstrap';
export interface CommentInput extends FormControlProps {
onSubmit: () => void;
}
declare const CommentInput: ({ onSubmit, ...rest }: CommentInput) => React.JSX.Element;
export default CommentInput;
//# sourceMappingURL=CommentInput.d.ts.map
1 change: 1 addition & 0 deletions dist/components/comments/components/CommentInput.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions dist/components/comments/components/CommentItem.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
export interface CommentItemProps extends React.HTMLProps<HTMLDivElement> {
inbound: boolean;
text: string;
createdBy: string;
createdAt: Date;
onDelete: () => void;
}
declare const CommentItem: ({ inbound, text, className, createdAt, createdBy, onDelete, ...rest }: CommentItemProps) => React.JSX.Element;
export default CommentItem;
//# sourceMappingURL=CommentItem.d.ts.map
1 change: 1 addition & 0 deletions dist/components/comments/components/CommentItem.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions dist/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -1137,6 +1137,10 @@ i.toast-icon {
}
}

.cursor-pointer {
cursor: pointer;
}

@font-face {
font-family: "kohinoor";
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");
Expand Down
3 changes: 2 additions & 1 deletion dist/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ import Subtitle from './components/subtitle/Subtitle';
import Layout from './components/layout/Layout';
import Tabs from './components/tabs/Tabs';
import TexmoIcon from './components/texmoIcon/TexmoIcon';
import Comments from './components/comments/Comments';
import TexmoProvider from './contexts/TexmoContext';
import * as Icons from './icons/index';
import '../scss/texmo-react-components.scss';
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, };
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, };
//# sourceMappingURL=index.d.ts.map
2 changes: 1 addition & 1 deletion dist/index.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions dist/index.es.css
Original file line number Diff line number Diff line change
Expand Up @@ -1137,6 +1137,10 @@ i.toast-icon {
}
}

.cursor-pointer {
cursor: pointer;
}

@font-face {
font-family: "kohinoor";
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");
Expand Down
4 changes: 2 additions & 2 deletions dist/index.es.js

Large diffs are not rendered by default.

57 changes: 47 additions & 10 deletions dist/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5871,6 +5871,7 @@ const makeEventKey = (eventKey, href = null) => {
if (eventKey != null) return String(eventKey);
return href || null;
};
var SelectableContext$1 = SelectableContext;

const NavContext$1 = /*#__PURE__*/React__namespace.createContext(null);
NavContext$1.displayName = 'NavContext';
Expand Down Expand Up @@ -5898,7 +5899,7 @@ function useDropdownItem({
disabled,
onClick
}) {
const onSelectCtx = React.useContext(SelectableContext);
const onSelectCtx = React.useContext(SelectableContext$1);
const navContext = React.useContext(NavContext$2);
const {
activeKey
Expand Down Expand Up @@ -5994,7 +5995,7 @@ function Dropdown$2({
const lastShow = usePrevious(show);
const lastSourceEvent = React.useRef(null);
const focusInDropdown = React.useRef(false);
const onSelectCtx = React.useContext(SelectableContext);
const onSelectCtx = React.useContext(SelectableContext$1);
const toggle = React.useCallback((nextShow, event, source = event == null ? void 0 : event.type) => {
onToggle(nextShow, {
originalEvent: event,
Expand Down Expand Up @@ -6120,7 +6121,7 @@ function Dropdown$2({
break;
}
});
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext$1.Provider, {
value: handleSelect,
children: /*#__PURE__*/jsxRuntime.jsx(DropdownContext$3.Provider, {
value: context,
Expand Down Expand Up @@ -6845,7 +6846,7 @@ const Form$2 = /*#__PURE__*/React__namespace.forwardRef(({
}));
Form$2.displayName = 'Form';
Form$2.propTypes = propTypes$8;
var BootstrapForm = Object.assign(Form$2, {
var Form$3 = Object.assign(Form$2, {
Group: BootstrapFormGroup,
Control: FormControl$2,
Floating: FormFloating$1,
Expand Down Expand Up @@ -6929,7 +6930,7 @@ function useNavItem({
role,
disabled
}) {
const parentOnSelect = React.useContext(SelectableContext);
const parentOnSelect = React.useContext(SelectableContext$1);
const navContext = React.useContext(NavContext$2);
const tabContext = React.useContext(TabContext$1);
let isActive = active;
Expand Down Expand Up @@ -7021,7 +7022,7 @@ const Nav$2 = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
// and don't want to reset the set in the effect
const forceUpdate = useForceUpdate();
const needsRefocusRef = React.useRef(false);
const parentOnSelect = React.useContext(SelectableContext);
const parentOnSelect = React.useContext(SelectableContext$1);
const tabContext = React.useContext(TabContext$1);
let getControlledId, getControllerId;
if (tabContext) {
Expand Down Expand Up @@ -7082,7 +7083,7 @@ const Nav$2 = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
needsRefocusRef.current = false;
});
const mergedRef = useMergedRefs(ref, listNode);
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
return /*#__PURE__*/jsxRuntime.jsx(SelectableContext$1.Provider, {
value: handleSelect,
children: /*#__PURE__*/jsxRuntime.jsx(NavContext$2.Provider, {
value: {
Expand Down Expand Up @@ -8453,7 +8454,7 @@ const Navbar = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
}), [bsPrefix, expanded, expand, onToggle]);
return /*#__PURE__*/jsxRuntime.jsx(NavbarContext.Provider, {
value: navbarContext,
children: /*#__PURE__*/jsxRuntime.jsx(SelectableContext.Provider, {
children: /*#__PURE__*/jsxRuntime.jsx(SelectableContext$1.Provider, {
value: handleCollapse,
children: /*#__PURE__*/jsxRuntime.jsx(Component, {
ref: ref,
Expand Down Expand Up @@ -23433,7 +23434,7 @@ FormRichText.Feedback = Feedback$1;

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

Expand Down Expand Up @@ -27067,7 +27068,7 @@ FormAsyncTypeahead.Feedback = Feedback$1;

var Form$1 = function (_a) {
var children = _a.children, rest = __rest(_a, ["children"]);
return React.createElement(BootstrapForm, __assign$1({}, rest), children);
return React.createElement(Form$3, __assign$1({}, rest), children);
};
Form$1.Group = FormGroup;
Form$1.Label = FormLabel;
Expand Down Expand Up @@ -29321,10 +29322,46 @@ var Tabs = function (_a) {
};
Tabs.Button = TabButton;

var CommentItem = function (_a) {
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"]);
var itemClass = classNames(className, 'w-75 border rounded p-3 mt-3', inbound ? 'bg-secondary' : 'text-white bg-primary');
var localeFormat = new Intl.DateTimeFormat('default', {
dateStyle: 'short',
timeStyle: 'short',
});
return (React.createElement("div", { className: classNames('d-flex', inbound ? 'justify-content-start' : 'justify-content-end') },
React.createElement("div", __assign$1({ className: itemClass }, rest),
text,
React.createElement("div", { className: "d-flex justify-content-between mt-2 opacity-75" },
React.createElement("span", null,
"From: ",
createdBy),
React.createElement("div", null,
React.createElement("span", { className: classNames(!inbound ? "me-2" : null) }, localeFormat.format(createdAt)),
!inbound ? (React.createElement("span", { className: "text-decoration-underline cursor-pointer", onClick: onDelete }, "Delete")) : null)))));
};

var CommentInput = function (_a) {
var onSubmit = _a.onSubmit, rest = __rest(_a, ["onSubmit"]);
return (React.createElement("div", null,
React.createElement(Subtitle, { text: "Comments:", className: "mb-2" }),
React.createElement(Form$3.Control, __assign$1({ as: "textarea", placeholder: "Leave a comment..." }, rest)),
React.createElement("div", { className: "d-flex justify-content-end mt-2" },
React.createElement(Button, { onClick: onSubmit }, "Comment"))));
};

var Comments = function (_a) {
var children = _a.children, rest = __rest(_a, ["children"]);
return React.createElement("div", __assign$1({}, rest), children);
};
Comments.Input = CommentInput;
Comments.Item = CommentItem;

exports.Breadcrumbs = Breadcrumbs;
exports.Button = Button;
exports.Card = Card;
exports.Chip = Chip;
exports.Comments = Comments;
exports.FilterButton = FilterButton;
exports.Footer = Footer;
exports.Form = Form$1;
Expand Down
4 changes: 4 additions & 0 deletions dist/index.min.css
Original file line number Diff line number Diff line change
Expand Up @@ -1137,6 +1137,10 @@ i.toast-icon {
}
}

.cursor-pointer {
cursor: pointer;
}

@font-face {
font-family: "kohinoor";
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");
Expand Down
8 changes: 4 additions & 4 deletions dist/index.min.js

Large diffs are not rendered by default.

14 changes: 13 additions & 1 deletion example/pages/ListPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumbs, FilterButton, Subtitle, Tabs } from '@the-curve-consulting/texmo-react-components';
import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumbs, FilterButton, Subtitle, Tabs, Comments } from '@the-curve-consulting/texmo-react-components';
import { Col, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';

Expand Down Expand Up @@ -86,6 +86,18 @@ const ListPage = () => {
</List.Row>
</List.Body>
</List>

<Comments className='mt-3'>
<Comments.Input onSubmit={() => {}}/>

<Comments.Item
text='THis is a comment'
inbound={false}
createdAt={new Date()}
createdBy='John Doe'
onDelete={() => {}}
/>
</Comments>
</div>
)
}
Expand Down
4 changes: 4 additions & 0 deletions scss/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -189,3 +189,7 @@ i.toast-icon {
}
}
}

.cursor-pointer{
cursor: pointer;
}
14 changes: 14 additions & 0 deletions src/components/comments/Comments.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import CommentItem from './components/CommentItem';
import CommentInput from './components/CommentInput';

export interface CommentsProps extends React.HTMLProps<HTMLDivElement> {}

const Comments = ({ children, ...rest }: CommentsProps) => {
return <div {...rest}>{children}</div>;
};

Comments.Input = CommentInput;
Comments.Item = CommentItem;

export default Comments;
23 changes: 23 additions & 0 deletions src/components/comments/components/CommentInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Button from 'components/button/Button';
import Subtitle from 'components/subtitle/Subtitle';
import React from 'react';
import { Form, FormControlProps } from 'react-bootstrap';

export interface CommentInput extends FormControlProps {
onSubmit: () => void;
}

const CommentInput = ({ onSubmit, ...rest }: CommentInput) => {
return (
<div>
<Subtitle text="Comments:" className="mb-2" />
<Form.Control as="textarea" placeholder="Leave a comment..." {...rest} />

<div className="d-flex justify-content-end mt-2">
<Button onClick={onSubmit}>Comment</Button>
</div>
</div>
);
};

export default CommentInput;
65 changes: 65 additions & 0 deletions src/components/comments/components/CommentItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import classNames from 'classnames';
import React from 'react';

export interface CommentItemProps extends React.HTMLProps<HTMLDivElement> {
inbound: boolean;
text: string;
createdBy: string;
createdAt: Date;
onDelete: () => void;
}

const CommentItem = ({
inbound,
text,
className,
createdAt,
createdBy,
onDelete,
...rest
}: CommentItemProps) => {
const itemClass = classNames(
className,
'w-75 border rounded p-3 mt-3',
inbound ? 'bg-secondary' : 'text-white bg-primary'
);

const localeFormat = new Intl.DateTimeFormat('default', {
dateStyle: 'short',
timeStyle: 'short',
});

return (
<div
className={classNames(
'd-flex',
inbound ? 'justify-content-start' : 'justify-content-end'
)}
>
<div className={itemClass} {...rest}>
{text}

<div className="d-flex justify-content-between mt-2 opacity-75">
<span>From: {createdBy}</span>

<div>
<span className={classNames(!inbound ? 'me-2' : null)}>
{localeFormat.format(createdAt)}
</span>

{!inbound ? (
<span
className="text-decoration-underline cursor-pointer"
onClick={onDelete}
>
Delete
</span>
) : null}
</div>
</div>
</div>
</div>
);
};

export default CommentItem;
Loading

0 comments on commit 710252e

Please sign in to comment.