Conversation
|
|
||
| exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = ` | ||
| Array [ | ||
| <div |
There was a problem hiding this comment.
components/auto-complete/tests/snapshots/demo.test.ts.snap
| }); | ||
|
|
||
| it('Test noop', async () => { | ||
| const { noop } = await import('../warning'); |
| const getRealHeight: MotionEventHandler = node => { | ||
| const { scrollHeight } = node; | ||
| return { height: scrollHeight, opacity: 1 }; | ||
| }; |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR adds a comprehensive set of core UI components to the codebase, including buttons, cards, badges, breadcrumbs, calendars, and more. Each component includes TypeScript definitions, tests, demos, and documentation.
- Added
components/button/button.tsxwith support for various button types (primary, ghost, dashed, link, text), loading states, and RTL - Added
components/badge/index.tsximplementing badges with animations, status indicators, and ribbon variants - Added
components/calendar/generateCalendar.tsxwith customizable calendar generation supporting different date types and localization - Added
components/breadcrumb/Breadcrumb.tsxwith route-based navigation and dropdown menu support - Added
components/card/Card.tsxfeaturing tabs, loading states, grid layouts and meta information
268 file(s) reviewed, 228 comment(s)
Edit PR Review Bot Settings | Greptile
|
|
||
| const ActionButton: React.FC<ActionButtonProps> = (props) => { | ||
| const clickedRef = React.useRef<boolean>(false); | ||
| const ref = React.useRef<HTMLInputElement>(null); |
There was a problem hiding this comment.
logic: Button ref type should be HTMLButtonElement instead of HTMLInputElement since this wraps a Button component
| const ref = React.useRef<HTMLInputElement>(null); | |
| const ref = React.useRef<HTMLButtonElement>(null); |
| setLoading(true); | ||
| returnValueOfOnOk!.then( | ||
| (...args: any[]) => { | ||
| setLoading(false, true); |
There was a problem hiding this comment.
logic: setLoading() is called with two arguments but useState's setState only accepts one argument
| setLoading(false, true); | |
| setLoading(false); |
| }, | ||
| (e: Error) => { | ||
| // See: https://github.com/ant-design/ant-design/issues/6183 | ||
| setLoading(false, true); |
There was a problem hiding this comment.
logic: setLoading() is called with two arguments but useState's setState only accepts one argument
| setLoading(false, true); | |
| setLoading(false); |
| React.useEffect(() => { | ||
| let timeoutId: ReturnType<typeof setTimeout> | null = null; | ||
| if (props.autoFocus) { | ||
| timeoutId = setTimeout(() => { | ||
| ref.current?.focus(); | ||
| }); | ||
| } | ||
| return () => { | ||
| if (timeoutId) { | ||
| clearTimeout(timeoutId); | ||
| } | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
logic: Missing dependency array for autoFocus prop in useEffect, could cause stale closure issues
| React.useEffect(() => { | |
| let timeoutId: ReturnType<typeof setTimeout> | null = null; | |
| if (props.autoFocus) { | |
| timeoutId = setTimeout(() => { | |
| ref.current?.focus(); | |
| }); | |
| } | |
| return () => { | |
| if (timeoutId) { | |
| clearTimeout(timeoutId); | |
| } | |
| }; | |
| }, []); | |
| React.useEffect(() => { | |
| let timeoutId: ReturnType<typeof setTimeout> | null = null; | |
| if (props.autoFocus) { | |
| timeoutId = setTimeout(() => { | |
| ref.current?.focus(); | |
| }); | |
| } | |
| return () => { | |
| if (timeoutId) { | |
| clearTimeout(timeoutId); | |
| } | |
| }; | |
| }, [props.autoFocus]); |
| const files = glob.sync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`); | ||
|
|
||
| files.forEach(componentTestFile => { | ||
| const componentName = componentTestFile.match(/components\/([^/]*)\//)![1]; |
There was a problem hiding this comment.
logic: Non-null assertion operator used without validation. Consider adding a check that the match exists first to avoid runtime errors
| const componentName = componentTestFile.match(/components\/([^/]*)\//)![1]; | |
| const match = componentTestFile.match(/components\/([^/]*)\//); | |
| if (!match) throw new Error(`Could not extract component name from ${componentTestFile}`); | |
| const componentName = match[1]; |
| | tabList | List of TabPane's head | Array<{key: string, tab: ReactNode}> | - | | | ||
| | tabProps | [Tabs](/components/tabs/#Tabs) | - | - | | | ||
| | title | Card title | ReactNode | - | | | ||
| | type | Card style type, can be set to `inner` or not set | string | - | | |
There was a problem hiding this comment.
style: type prop should specify literal type 'inner' instead of string since it only accepts that specific value
| &-type-inner &-extra { | ||
| padding: @card-inner-head-padding + 1.5px 0; | ||
| } |
There was a problem hiding this comment.
style: Adding 1.5px to padding may cause inconsistent rendering across browsers. Consider using a whole number
| | bodyStyle | 内容区域自定义样式 | CSSProperties | - | | | ||
| | bordered | 是否有边框 | boolean | true | | | ||
| | cover | 卡片封面 | ReactNode | - | | | ||
| | defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` | | |
There was a problem hiding this comment.
style: defaultActiveTabKey default value should be consistent with English docs - consider using 'first tab' instead of '第一个页签'
| | --- | --- | --- | --- | --- | | ||
| | className | 网格容器类名 | string | - | | | ||
| | hoverable | 鼠标移过时可浮起 | boolean | true | | | ||
| | style | 定义网格容器类名的样式 | CSSProperties | - | | |
There was a problem hiding this comment.
syntax: style prop description mentions 'className' which is incorrect - should be '定义网格容器的样式'
| | style | 定义网格容器类名的样式 | CSSProperties | - | | | |
| | style | 定义网格容器的样式 | CSSProperties | - | | |
| > .@{card-prefix-cls}-extra { | ||
| padding: @card-head-padding-sm 0; | ||
| font-size: @card-head-font-size-sm; | ||
| } |
There was a problem hiding this comment.
style: Consider moving font-size declaration to line 5 to avoid repeating the same value for both head and extra content
2 participants
No description provided.