feat(ui): add breadcrumb component

DevCloudFE · Jul 25, 2022 · ae97c22 · ae97c22
1 parent 40c07ca
commit ae97c22
Show file tree

Hide file tree

Showing 24 changed files with 227 additions and 17 deletions.
diff --git a/packages/site/src/assets/imgs/bg-1.png b/packages/site/src/assets/imgs/bg-1.png
diff --git a/packages/site/src/assets/imgs/card-bg.jpg b/packages/site/src/assets/imgs/card-bg.jpg
diff --git a/packages/ui/src/components/_virtual-scroll/VirtualScroll.tsx b/packages/ui/src/components/_virtual-scroll/VirtualScroll.tsx
@@ -335,9 +335,9 @@ function VirtualScroll<T>(props: DVirtualScrollProps<T>, ref: React.ForwardedRef
         dEmpty
       ) : (
         <>
-          <div style={{ [dHorizontal ? 'width' : 'height']: fillSize[0] }} aria-hidden={true}></div>
+          <div style={{ [dHorizontal ? 'width' : 'height']: fillSize[0] }} aria-hidden></div>
           {list}
-          <div style={{ [dHorizontal ? 'width' : 'height']: fillSize[1] }} aria-hidden={true}></div>
+          <div style={{ [dHorizontal ? 'width' : 'height']: fillSize[1] }} aria-hidden></div>
         </>
       )}
     </ul>

diff --git a/packages/ui/src/components/affix/Affix.tsx b/packages/ui/src/components/affix/Affix.tsx
@@ -140,7 +140,7 @@ function Affix(props: DAffixProps, ref: React.ForwardedRef<DAffixRef>): JSX.Elem
             ...referenceStyle,
             visibility: 'hidden',
           }}
-          aria-hidden={true}
+          aria-hidden
         ></div>
       )}
       <div

diff --git a/packages/ui/src/components/breadcrumb/Breadcrumb.tsx b/packages/ui/src/components/breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,62 @@
+import type { DId } from '../../utils/global';
+
+import React from 'react';
+
+import { usePrefixConfig, useComponentConfig } from '../../hooks';
+import { getClassName, registerComponentMate } from '../../utils';
+
+export interface DBreadcrumbOption<ID extends DId> {
+  id: ID;
+  title: React.ReactNode;
+  link?: boolean;
+  separator?: React.ReactNode;
+}
+
+export interface DBreadcrumbProps<ID extends DId, T extends DBreadcrumbOption<ID>>
+  extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+  dList: T[];
+  dSeparator?: React.ReactNode;
+  onItemClick?: (id: ID, link: T) => void;
+}
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DBreadcrumb' });
+export function DBreadcrumb<ID extends DId, T extends DBreadcrumbOption<ID>>(props: DBreadcrumbProps<ID, T>): JSX.Element | null {
+  const {
+    dList,
+    dSeparator,
+    onItemClick,
+
+    ...restProps
+  } = useComponentConfig(COMPONENT_NAME, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return (
+    <nav {...restProps} className={getClassName(restProps.className, `${dPrefix}breadcrumb`)}>
+      <ol className={`${dPrefix}breadcrumb__list`}>
+        {dList.map((item, index) => (
+          <React.Fragment key={item.id}>
+            <li
+              className={getClassName(`${dPrefix}breadcrumb__item`, {
+                [`${dPrefix}breadcrumb__item--link`]: item.link,
+                [`${dPrefix}breadcrumb__item--last`]: index === dList.length - 1,
+              })}
+              onClick={() => {
+                onItemClick?.(item.id, item);
+              }}
+            >
+              {item.title}
+            </li>
+            {index !== dList.length - 1 && (
+              <li className={`${dPrefix}breadcrumb__separator`} aria-hidden>
+                {item.separator ?? dSeparator ?? '/'}
+              </li>
+            )}
+          </React.Fragment>
+        ))}
+      </ol>
+    </nav>
+  );
+}
diff --git a/packages/ui/src/components/breadcrumb/README.md b/packages/ui/src/components/breadcrumb/README.md
@@ -0,0 +1,7 @@
+---
+group: Navigation
+title: Breadcrumb
+aria: breadcrumb
+---
+
+## API
diff --git a/packages/ui/src/components/breadcrumb/README.zh-Hant.md b/packages/ui/src/components/breadcrumb/README.zh-Hant.md
@@ -0,0 +1,5 @@
+---
+title: 面包屑
+---
+
+## API
diff --git a/packages/ui/src/components/breadcrumb/demos/1.Basic.md b/packages/ui/src/components/breadcrumb/demos/1.Basic.md
@@ -0,0 +1,45 @@
+---
+title:
+  en-US: Basic
+  zh-Hant: 基本
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+最简单的用法。
+
+```tsx
+import { DBreadcrumb } from '@react-devui/ui';
+import { HomeOutlined } from '@react-devui/ui/icons';
+
+export default function Demo() {
+  return (
+    <DBreadcrumb
+      dList={[
+        {
+          id: 0,
+          title: (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0 4px' }}>
+              <HomeOutlined />
+              Home
+            </div>
+          ),
+        },
+        {
+          id: 1,
+          title: <a>Component</a>,
+          link: true,
+        },
+        {
+          id: 2,
+          title: 'Breadcrumb',
+        },
+      ]}
+    ></DBreadcrumb>
+  );
+}
+```
diff --git a/packages/ui/src/components/breadcrumb/demos/2.Separator.md b/packages/ui/src/components/breadcrumb/demos/2.Separator.md
@@ -0,0 +1,47 @@
+---
+title:
+  en-US: Custom separator
+  zh-Hant: 自定义分隔符
+---
+
+# en-US
+
+Configure the separator globally or configure each item individually.
+
+# zh-Hant
+
+全局配置分隔符或者单独配置每一项。
+
+```tsx
+import { DBreadcrumb } from '@react-devui/ui';
+import { HomeOutlined, RightOutlined } from '@react-devui/ui/icons';
+
+export default function Demo() {
+  return (
+    <DBreadcrumb
+      dList={[
+        {
+          id: 0,
+          title: (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0 4px' }}>
+              <HomeOutlined />
+              Home
+            </div>
+          ),
+          separator: '-',
+        },
+        {
+          id: 1,
+          title: <a>Component</a>,
+          link: true,
+        },
+        {
+          id: 2,
+          title: 'Breadcrumb',
+        },
+      ]}
+      dSeparator={<RightOutlined dSize="0.9em" />}
+    ></DBreadcrumb>
+  );
+}
+```
diff --git a/packages/ui/src/components/breadcrumb/index.ts b/packages/ui/src/components/breadcrumb/index.ts
@@ -0,0 +1 @@
+export * from './Breadcrumb';
diff --git a/packages/ui/src/components/card/demos/3.Media.md b/packages/ui/src/components/card/demos/3.Media.md
@@ -35,8 +35,8 @@ export default function Demo() {
       <div style={{ margin: '-1px -1px 0 -1px' }}>
         <img
           style={{ width: '100%', borderRadius: 'var(--d-border-radius) var(--d-border-radius) 0 0' }}
-          src="/assets/imgs/card-bg.jpg"
-          alt="card-bg"
+          src="/assets/imgs/bg-1.png"
+          alt="bg-1"
         />
       </div>
       <DCardContent>

diff --git a/packages/ui/src/components/dropdown/DropdownSub.tsx b/packages/ui/src/components/dropdown/DropdownSub.tsx
@@ -161,7 +161,7 @@ export function DDropdownSub(props: DDropdownSubProps): JSX.Element | null {
                 })}
                 style={{ paddingLeft: 12 + dLevel * 16 }}
                 role="menuitem"
-                aria-haspopup={true}
+                aria-haspopup
                 aria-expanded={dPopupVisible}
                 aria-disabled={dDisabled}
                 onClick={pOnClick}

diff --git a/packages/ui/src/components/image/ImagePreview.tsx b/packages/ui/src/components/image/ImagePreview.tsx
@@ -324,12 +324,12 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
                 <li className={`${dPrefix}image-preview__toolbar-page`}>
                   <DInput
                     className={`${dPrefix}image-preview__toolbar-page-input`}
+                    dModel={(activeIndex + 1).toString()}
                     dType="number"
                     dSize="smaller"
                     dMin={1}
                     dMax={dList.length}
-                    dInteger={true}
-                    dModel={(activeIndex + 1).toString()}
+                    dInteger
                     onModelChange={(val) => {
                       if (val) {
                         changeActiveIndex(Number(val) - 1);
@@ -366,12 +366,12 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
                 <li className={`${dPrefix}image-preview__toolbar-zoom`}>
                   <DInput
                     className={`${dPrefix}image-preview__toolbar-zoom-input`}
+                    dModel={Math.round(activeScale * 100).toString()}
                     dType="number"
                     dSize="smaller"
                     dMin={100}
                     dStep={10}
-                    dInteger={true}
-                    dModel={Math.round(activeScale * 100).toString()}
+                    dInteger
                     onModelChange={(val) => {
                       if (val) {
                         setScale((draft) => {
@@ -435,6 +435,12 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
                   onTouchEnd={() => {
                     setIsDragging(false);
                   }}
+                  onWheel={(e) => {
+                    setScale((draft) => {
+                      const oldScale = draft.get(activeSrc) ?? 1;
+                      draft.set(activeSrc, e.deltaY < 0 ? oldScale + 0.1 : Math.max(oldScale - 0.1, 1));
+                    });
+                  }}
                 />
               }
               <ul className={`${dPrefix}image-preview__thumbnail-list`}>
@@ -467,7 +473,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
               </ul>
               {dMask && (
                 <DMask
-                  dVisible={true}
+                  dVisible
                   onClose={() => {
                     if (dMaskClosable) {
                       changeVisible(false);

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -16,6 +16,9 @@ export { DAvatar } from './avatar';
 export type { DBadgeProps } from './badge';
 export { DBadge } from './badge';
 
+export type { DBreadcrumbProps } from './breadcrumb';
+export { DBreadcrumb } from './breadcrumb';
+
 export type { DButtonProps } from './button';
 export { DButton } from './button';
 

diff --git a/packages/ui/src/components/menu/MenuSub.tsx b/packages/ui/src/components/menu/MenuSub.tsx
@@ -216,7 +216,7 @@ export function DMenuSub(props: DMenuSubProps): JSX.Element | null {
                       })}
                       style={{ paddingLeft: dSpace + dLevel * dStep }}
                       role="menuitem"
-                      aria-haspopup={true}
+                      aria-haspopup
                       aria-expanded={dMode === 'vertical' ? dExpand : dPopupVisible}
                       aria-disabled={dDisabled}
                       onClick={(e) => {

diff --git a/packages/ui/src/components/popover/demos/3.AutoPlace.md b/packages/ui/src/components/popover/demos/3.AutoPlace.md
@@ -20,7 +20,7 @@ export default function Demo() {
     <div className="auto-place-container">
       <div className="overflow">
         <DPopover
-          dVisible={true}
+          dVisible
           dContent={
             <>
               <div>Some contents...</div>

diff --git a/packages/ui/src/components/tooltip/demos/3.AutoPlace.md b/packages/ui/src/components/tooltip/demos/3.AutoPlace.md
@@ -19,7 +19,7 @@ export default function Demo() {
   return (
     <div className="auto-place-container">
       <div className="overflow">
-        <DTooltip dVisible={true} dTitle="Auto Place" dContainer=".auto-place-container">
+        <DTooltip dVisible dTitle="Auto Place" dContainer=".auto-place-container">
           <DButton>Auto Place</DButton>
         </DTooltip>
       </div>

diff --git a/packages/ui/src/hooks/d-config/contex.ts b/packages/ui/src/hooks/d-config/contex.ts
@@ -5,6 +5,7 @@ import type {
   DAutoCompleteProps,
   DAvatarProps,
   DBadgeProps,
+  DBreadcrumbProps,
   DButtonProps,
   DCardProps,
   DCardHeaderProps,
@@ -75,6 +76,7 @@ export type DComponentConfig = {
   DAutoComplete: DAutoCompleteProps<any>;
   DAvatar: DAvatarProps;
   DBadge: DBadgeProps;
+  DBreadcrumb: DBreadcrumbProps<any, any>;
   DButton: DButtonProps;
   DCard: DCardProps;
   DCardHeader: DCardHeaderProps;

diff --git a/packages/ui/src/styles/_components.scss b/packages/ui/src/styles/_components.scss
@@ -3,6 +3,7 @@
 @import 'components/auto-complete';
 @import 'components/avatar';
 @import 'components/badge';
+@import 'components/breadcrumb';
 @import 'components/button';
 @import 'components/card';
 @import 'components/cascader';

diff --git a/packages/ui/src/styles/_variables.scss b/packages/ui/src/styles/_variables.scss
@@ -90,6 +90,7 @@ $colors: (
   /** component **/
   --#{$variable-prefix}mask-background-color: rgb(0 0 0 / 20%);
   --#{$variable-prefix}avatar-background-color: #bdbdbd;
+  --#{$variable-prefix}breadcrumb-color: #b1b1b1;
   --#{$variable-prefix}slides-navigation-background-color-hover: rgb(245 245 245);
   --#{$variable-prefix}switch-background-color: #d4d6d9;
   --#{$variable-prefix}tabs-slider-background-color: hsl(0deg 0% 97%);

diff --git a/packages/ui/src/styles/components/breadcrumb.scss b/packages/ui/src/styles/components/breadcrumb.scss
@@ -0,0 +1,32 @@
+@include b(breadcrumb) {
+  @include e(list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 8px;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  @include e(item) {
+    color: var(--#{$variable-prefix}breadcrumb-color);
+
+    @include m(link) {
+      cursor: pointer;
+      transition: color var(--#{$variable-prefix}animation-duration-base) linear;
+
+      &:hover {
+        color: var(--#{$variable-prefix}text-color);
+      }
+    }
+
+    @include m(last) {
+      color: var(--#{$variable-prefix}text-color);
+    }
+  }
+
+  @include e(separator) {
+    color: var(--#{$variable-prefix}breadcrumb-color);
+  }
+}
diff --git a/packages/ui/src/styles/components/tabs.scss b/packages/ui/src/styles/components/tabs.scss
@@ -354,7 +354,6 @@
     flex-shrink: 0;
     padding: 0;
     margin: 0;
-    color: var(--#{$variable-prefix}color-icon-decorator);
     background-color: var(--#{$variable-prefix}background-color);
     border: none;
     transition: color var(--#{$variable-prefix}animation-duration-base) linear;
@@ -449,7 +448,6 @@
 
     padding: 0;
     margin: 0 0 0 4px;
-    color: var(--#{$variable-prefix}color-icon-decorator);
     background-color: transparent;
     border: none;
     transition: color var(--#{$variable-prefix}animation-duration-base) linear;

diff --git a/packages/ui/src/styles/components/upload.scss b/packages/ui/src/styles/components/upload.scss
@@ -242,7 +242,6 @@
 
   @include e(picture-button-icon) {
     font-size: 1.1em;
-    color: var(--#{$variable-prefix}color-icon-decorator);
   }
 
   @include e(picture-button-text) {

diff --git a/packages/ui/src/styles/theme-dark.scss b/packages/ui/src/styles/theme-dark.scss
@@ -55,6 +55,7 @@ body.dark {
   /** component **/
   --#{$variable-prefix}mask-background-color: rgb(0 0 0 / 40%);
   --#{$variable-prefix}avatar-background-color: #666;
+  --#{$variable-prefix}breadcrumb-color: #787878;
   --#{$variable-prefix}slides-navigation-background-color-hover: rgb(45 45 45);
   --#{$variable-prefix}switch-background-color: #5f6164;
   --#{$variable-prefix}tabs-slider-background-color: hsl(0deg 0% 26%);