feat: Add Comment component (#145)

* chore: clean up * chore: tmp variables * chore: basic style * test: Update snapshot
ant-design · Oct 13, 2022 · 620ed65 · 620ed65 · vercel · Oct 13, 2022
1 parent 2c26b66
commit 620ed65
Show file tree

Hide file tree

Showing 43 changed files with 2,991 additions and 749 deletions.
diff --git a/docs/demo/AutoComplete.md b/docs/demo/AutoComplete.md
diff --git a/docs/demo/Cascader.md b/docs/demo/Cascader.md
diff --git a/docs/demo/Comment.md b/docs/demo/Comment.md
@@ -0,0 +1,4 @@
+## Comment
+
+
+<code src="../examples/Comment.tsx" />
diff --git a/docs/demo/DatePicker.md b/docs/demo/DatePicker.md
diff --git a/docs/demo/Mentions.md b/docs/demo/Mentions.md
diff --git a/docs/demo/Select.md b/docs/demo/Select.md
diff --git a/docs/demo/TimePicker.md b/docs/demo/TimePicker.md
diff --git a/docs/demo/TreeSelect.md b/docs/demo/TreeSelect.md
diff --git a/docs/examples/AutoComplete.tsx b/docs/examples/AutoComplete.tsx
diff --git a/docs/examples/Cascader.tsx b/docs/examples/Cascader.tsx
diff --git a/docs/examples/Comment.tsx b/docs/examples/Comment.tsx
@@ -0,0 +1,73 @@
+import React, { useState, createElement } from 'react';
+import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
+import { Avatar, Tooltip } from 'antd';
+import { Comment } from '../../src';
+
+import { presetPalettes } from '@ant-design/colors'
+console.log(presetPalettes);
+
+
+const lines = [];
+Object.keys(presetPalettes).forEach((key) => {
+  for (let i = 0; i < 10; i += 1) {
+  lines.push(`@${key}-${i + 1}: ${presetPalettes[key][i]};`);
+  }
+});
+
+console.log(lines.join('\n'));
+
+const App: React.FC = () => {
+  const [likes, setLikes] = useState(0);
+  const [dislikes, setDislikes] = useState(0);
+  const [action, setAction] = useState<string | null>(null);
+
+  const like = () => {
+    setLikes(1);
+    setDislikes(0);
+    setAction('liked');
+  };
+
+  const dislike = () => {
+    setLikes(0);
+    setDislikes(1);
+    setAction('disliked');
+  };
+
+  const actions = [
+    <Tooltip key="comment-basic-like" title="Like">
+      <span onClick={like}>
+        {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
+        <span className="comment-action">{likes}</span>
+      </span>
+    </Tooltip>,
+    <Tooltip key="comment-basic-dislike" title="Dislike">
+      <span onClick={dislike}>
+        {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
+        <span className="comment-action">{dislikes}</span>
+      </span>
+    </Tooltip>,
+    <span key="comment-basic-reply-to">Reply to</span>,
+  ];
+
+  return (
+    <Comment
+      actions={actions}
+      author={<a>Han Solo</a>}
+      avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
+      content={
+        <p>
+          We supply a series of design principles, practical patterns and high quality design
+          resources (Sketch and Axure), to help people create their product prototypes beautifully
+          and efficiently.
+        </p>
+      }
+      datetime={
+        <Tooltip title="2016-11-22 11:22:33">
+          <span>8 hours ago</span>
+        </Tooltip>
+      }
+    />
+  );
+};
+
+export default App;
diff --git a/docs/examples/DatePicker.tsx b/docs/examples/DatePicker.tsx
diff --git a/docs/examples/Mentions.tsx b/docs/examples/Mentions.tsx
diff --git a/docs/examples/Select.tsx b/docs/examples/Select.tsx
diff --git a/docs/examples/TimePicker.tsx b/docs/examples/TimePicker.tsx
diff --git a/docs/examples/TreeSelect.tsx b/docs/examples/TreeSelect.tsx
diff --git a/package.json b/package.json
@@ -44,11 +44,12 @@
     "dayjs": "^1.11.4"
   },
   "peerDependencies": {
-    "antd": "^5.0.0-experimental.18",
+    "antd": "^5.0.0-alpha.1",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
   "devDependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
     "@types/enzyme": "^3.10.5",
@@ -57,7 +58,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.5.2",
-    "antd": "^5.0.0-experimental.18",
+    "antd": "^5.0.0-alpha.1",
     "dumi": "^1.1.0",
     "eslint": "^7.18.0",
     "father": "^4.0.0-rc.8",

diff --git a/src/AutoComplete.tsx b/src/AutoComplete.tsx
diff --git a/src/Cascader.tsx b/src/Cascader.tsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		## Comment


		<code src="../examples/Comment.tsx" />