[fix] some CSS & Props detail bugs

idea2app · Oct 18, 2024 · 41ccd88 · 41ccd88 · github-actions · Oct 18, 2024
1 parent 96ceb2a
commit 41ccd88
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 43 deletions.
diff --git a/preview/content.tsx b/preview/content.tsx
@@ -9,6 +9,7 @@ import {
     CodeBlock,
     Dialog,
     DialogClose,
+    HorizontalMarquee,
     Icon,
     Loading,
     MonthCalendar,
@@ -21,7 +22,8 @@ import {
     SpinnerButton,
     TimeDistance,
     TypeEcho,
-    UserRankView
+    UserRankView,
+    VerticalMarquee
 } from '../source';
 import { CodeExample, Section } from './utility';
 
@@ -93,6 +95,22 @@ export class Content extends Component {
                     </CodeExample>
                 </Section>
 
+                <Section title="Horizontal Marquee">
+                    <CodeExample>
+                        <HorizontalMarquee>
+                            {'idea2app '.repeat(15).trim()}
+                        </HorizontalMarquee>
+                    </CodeExample>
+                </Section>
+
+                <Section title="Vertical Marquee">
+                    <CodeExample>
+                        <VerticalMarquee style={{ height: '10rem' }}>
+                            <img src="https://tech-query.me/medias/featureimages/22.jpg" />
+                        </VerticalMarquee>
+                    </CodeExample>
+                </Section>
+
                 <Section title="Time Distance">
                     <CodeExample>
                         <TimeDistance date="1989-06-04" />
@@ -225,7 +243,7 @@ export class Content extends Component {
                     <CodeExample>
                         <UserRankView
                             title="GitHub"
-                            value={[
+                            rank={[
                                 'Five-great',
                                 'TechQuery',
                                 'stevending1st',
@@ -237,6 +255,7 @@ export class Content extends Component {
                                 website: `https://github.com/${name}`,
                                 score: 100 - index
                             }))}
+                            linkOf={({ id }) => `/user/${id}`}
                         />
                     </CodeExample>
                 </Section>

diff --git a/source/HorizontalMarquee/index.tsx b/source/HorizontalMarquee/index.tsx
@@ -1,18 +1,19 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import * as style from './index.module.less';
 
-export type HorizontalMarqueeProps = PropsWithChildren<
-    Partial<Record<'maxWidth' | 'duration' | 'height', string>>
->;
+export type HorizontalMarqueeProps = HTMLAttributes<HTMLDivElement> &
+    Partial<Record<'maxWidth' | 'duration' | 'height', string>>;
 
 export const HorizontalMarquee: FC<HorizontalMarqueeProps> = ({
+    className = '',
     children,
     maxWidth = '100%',
     duration,
-    height
+    height,
+    ...props
 }) => (
-    <div className="overflow-hidden mw-100">
+    <div className={`overflow-hidden mw-100 ${className}`} {...props}>
         <div
             className={`d-inline-block align-top text-nowrap ${style.scrollWrap}`}
             style={{

diff --git a/source/Icon.tsx b/source/Icon.tsx
@@ -14,7 +14,7 @@ export const Icon: FC<IconProps> = ({
     size,
     ...props
 }) => (
-    <i
+    <span
         className={classNames(`bi-${name}`, className)}
         style={{ fontSize: size && `${size}rem`, ...style }}
         {...props}

diff --git a/source/UserRank/Address.tsx b/source/UserRank/Address.tsx
@@ -5,14 +5,14 @@ import { Icon } from '../Icon';
 export type UserAddressProps = Partial<Record<'email' | 'website', string>>;
 
 export const UserAddress: FC<UserAddressProps> = ({ email, website }) => (
-    <address className="mb-0">
+    <address className="mb-0 d-flex justify-content-around gap-2">
         {email && (
             <a rel="noreferrer" target="_blank" href={'mailto:' + email}>
                 <Icon name="envelope" />
             </a>
         )}
         {website && (
-            <a rel="noreferrer" className="ms-2" target="_blank" href={website}>
+            <a rel="noreferrer" target="_blank" href={website}>
                 <Icon name="globe2" />
             </a>
         )}

diff --git a/source/UserRank/index.module.less b/source/UserRank/index.module.less
@@ -17,6 +17,7 @@
     --logo-image: url('https://github.com/idea2app.png');
     --title-background-image: url('https://hackathon-api.static.kaiyuanshe.cn/6342619375fa1817e0f56ce1/2022/10/09/rrrr.png');
     a {
+        color: inherit;
         text-decoration: none;
     }
     .imgBox {
@@ -212,6 +213,7 @@
         }
         td {
             cursor: default;
+            background-color: transparent;
             .usernameBox {
                 font-size: 0;
                 &:hover {

diff --git a/source/UserRank/index.tsx b/source/UserRank/index.tsx
@@ -13,16 +13,17 @@ export interface UserRank extends UserAddressProps {
 
 export interface UserRankViewProps {
     title: string;
-    value: UserRank[];
+    rank: UserRank[];
+    linkOf?: (user: UserRank) => string;
 }
 
 export class UserRankView extends PureComponent<UserRankViewProps> {
-    renderMedal = ({ id, name, avatar, email, website, score }: UserRank) => (
-        <Col as="li" key={id}>
+    renderMedal = (user: UserRank) => (
+        <Col as="li" key={user.id}>
             <div
                 className={`shadow-lg overflow-hidden rounded-circle m-auto ${style.imgBox}`}
             >
-                <Image fluid src={avatar} alt={name} loading="lazy" />
+                <Image fluid src={user.avatar} alt={user.name} loading="lazy" />
             </div>
             <div
                 className={`position-relative overflow-hidden ${style.showBox}`}
@@ -31,23 +32,19 @@ export class UserRankView extends PureComponent<UserRankViewProps> {
                     <i className="d-block overflow-hidden m-auto mb-1 rounded-circle" />
                     <a
                         className="d-block mb-0 stretched-link"
-                        href={`/user/${id}`}
+                        href={this.props.linkOf?.(user) || '#'}
                     >
-                        {name}
+                        {user.name}
                     </a>
-                    <strong>{score}</strong>
+                    <strong>{user.score}</strong>
                 </div>
-                <UserAddress {...{ email, website }} />
+                <UserAddress {...user} />
             </div>
         </Col>
     );
 
-    renderRow = (
-        { id, name, avatar, email, website, score }: UserRank,
-        index: number,
-        { length }: UserRank[]
-    ) => (
-        <tr key={id} className="position-relative">
+    renderRow = (user: UserRank, index: number, { length }: UserRank[]) => (
+        <tr key={user.id} className="position-relative">
             <td className="align-middle">
                 <Badge className="fw-bold fst-italic">
                     {(index + 4 + '').padStart(length, '0')}
@@ -59,27 +56,32 @@ export class UserRankView extends PureComponent<UserRankViewProps> {
                 <div
                     className={`d-inline-block overflow-hidden align-middle rounded-circle ${style.imgBox}`}
                 >
-                    <Image fluid src={avatar} alt={name} loading="lazy" />
+                    <Image
+                        fluid
+                        src={user.avatar}
+                        alt={user.name}
+                        loading="lazy"
+                    />
                 </div>
                 <a
                     className="ms-2 d-inline-block align-middle stretched-link"
                     style={{
                         color: `rgb(248, ${(index + 2) * 15}, ${(index + 2) * 35})`
                     }}
-                    href={`/user/${id}`}
+                    href={this.props.linkOf?.(user) || '#'}
                 >
-                    {name}
+                    {user.name}
                 </a>
             </td>
-            <td className="align-middle">{score}</td>
+            <td className="align-middle">{user.score}</td>
             <td className="align-middle">
-                <UserAddress {...{ email, website }} />
+                <UserAddress {...user} />
             </td>
         </tr>
     );
 
     render() {
-        const { title, value = [] } = this.props;
+        const { title, rank = [] } = this.props;
 
         return (
             <Row className={style.topUserRow}>
@@ -101,15 +103,15 @@ export class UserRankView extends PureComponent<UserRankViewProps> {
                         as="ul"
                         className={`mt-2 g-0 align-items-end text-center ps-0 pt-2 list-unstyled ${style.topUserUl}`}
                     >
-                        {value.slice(0, 3).map(this.renderMedal)}
+                        {rank.slice(0, 3).map(this.renderMedal)}
                     </Row>
                 </Col>
                 <Col xs={12} sm={12} lg={5}>
                     <Table
                         responsive
                         className={`my-3 pt-2 ${style.topUserList}`}
                     >
-                        <tbody>{value.slice(3, 10).map(this.renderRow)}</tbody>
+                        <tbody>{rank.slice(3, 10).map(this.renderRow)}</tbody>
                     </Table>
                 </Col>
             </Row>

diff --git a/source/VerticalMarquee/index.module.less b/source/VerticalMarquee/index.module.less
@@ -27,7 +27,6 @@
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     font-size: 0;
-    max-width: 100%;
     &:hover {
         animation-play-state: paused;
         .scrollItem {

diff --git a/source/VerticalMarquee/index.tsx b/source/VerticalMarquee/index.tsx
@@ -1,18 +1,26 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import * as style from './index.module.less';
 
-export type VerticalMarqueeProps = PropsWithChildren<{ duration?: string }>;
+export interface VerticalMarqueeProps extends HTMLAttributes<HTMLDivElement> {
+    duration?: string;
+}
 
 export const VerticalMarquee: FC<VerticalMarqueeProps> = ({
+    className = '',
     children,
-    duration
+    duration,
+    ...props
 }) => (
-    <div
-        className={`d-inline-block mh-100 ${style.scrollWrap}`}
-        // @ts-expect-error remove after React 19 released
-        style={{ '--duration': duration }}
-    >
-        <div className={`d-inline-block ${style.scrollItem}`}>{children}</div>
+    <div className={`overflow-hidden ${className}`} {...props}>
+        <div
+            className={`d-inline-block mw-100 mh-100 ${style.scrollWrap}`}
+            // @ts-expect-error remove after React 19 released
+            style={{ '--duration': duration }}
+        >
+            <div className={`d-inline-block ${style.scrollItem}`}>
+                {children}
+            </div>
+        </div>
     </div>
 );