feat(ui): add image component

DevCloudFE · Jul 23, 2022 · 4e03e12 · 4e03e12
1 parent 9ff78cc
commit 4e03e12
Show file tree

Hide file tree

Showing 92 changed files with 1,858 additions and 545 deletions.
diff --git a/.gitattributes b/.gitattributes
diff --git a/packages/site/src/app/styles/_app.scss b/packages/site/src/app/styles/_app.scss
@@ -185,7 +185,8 @@ h3 {
   section[id^='Compose'],
   section[id^='Cascader'],
   section[id^='Select'] {
-    .d-selectbox {
+    .d-select,
+    .d-cascader {
       width: 400px;
     }
   }
@@ -225,7 +226,8 @@ h3 {
         'Switch': 'switch',
         'Time-picker': 'time-picker',
         'Date-picker': 'date-picker',
-        'Auto-complete': 'input'
+        'Auto-complete': 'input',
+        'Image': 'image'
       )
   {
     section[id^='#{$id}'] {

diff --git a/packages/site/src/assets/imgs/image-1.jpg b/packages/site/src/assets/imgs/image-1.jpg
diff --git a/packages/site/src/assets/imgs/image-2.jpg b/packages/site/src/assets/imgs/image-2.jpg
diff --git a/packages/site/src/assets/imgs/image-3.jpg b/packages/site/src/assets/imgs/image-3.jpg
diff --git a/packages/site/src/assets/imgs/image-4.jpg b/packages/site/src/assets/imgs/image-4.jpg
diff --git a/packages/ui/src/components/_alert-dialog/index.ts b/packages/ui/src/components/_alert-dialog/index.ts
diff --git a/.../components/_alert-dialog/AlertDialog.tsx → packages/ui/src/components/_alert/Alert.tsx b/.../components/_alert-dialog/AlertDialog.tsx → packages/ui/src/components/_alert/Alert.tsx
@@ -3,19 +3,21 @@ import { useRef } from 'react';
 import { useAsync, useMount, usePrefixConfig } from '../../hooks';
 import { getClassName } from '../../utils';
 
-export interface DAlertDialogProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  dClassNamePrefix: string;
   dDuration: number;
   dEscClosable?: boolean;
-  dDialogRef?: React.Ref<HTMLDivElement>;
+  dAlertRef?: React.Ref<HTMLDivElement>;
   onClose?: () => void;
 }
 
-export function DAlertDialog(props: DAlertDialogProps): JSX.Element | null {
+export function DAlert(props: DAlertProps): JSX.Element | null {
   const {
     children,
+    dClassNamePrefix,
     dDuration,
     dEscClosable = true,
-    dDialogRef,
+    dAlertRef,
     onClose,
 
     ...restProps
@@ -29,6 +31,8 @@ export function DAlertDialog(props: DAlertDialogProps): JSX.Element | null {
     clearTid?: () => void;
   }>({});
 
+  const prefix = `${dPrefix}${dClassNamePrefix}`;
+
   const asyncCapture = useAsync();
 
   useMount(() => {
@@ -42,8 +46,8 @@ export function DAlertDialog(props: DAlertDialogProps): JSX.Element | null {
   return (
     <div
       {...restProps}
-      className={getClassName(restProps.className, `${dPrefix}alert-dialog`)}
-      ref={dDialogRef}
+      className={getClassName(restProps.className, prefix)}
+      ref={dAlertRef}
       tabIndex={restProps.tabIndex ?? -1}
       role={restProps.role ?? 'alert'}
       onMouseEnter={(e) => {

diff --git a/packages/ui/src/components/_alert/index.ts b/packages/ui/src/components/_alert/index.ts
@@ -0,0 +1 @@
+export * from './Alert';
diff --git a/packages/ui/src/components/_date-input/DateInput.tsx b/packages/ui/src/components/_date-input/DateInput.tsx
@@ -34,6 +34,7 @@ export interface DDateInputRenderProps {
 
 export interface DDateInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   children: (props: DDateInputRenderProps) => JSX.Element | null;
+  dClassNamePrefix: string;
   dFormControl?: DFormControl;
   dVisible?: boolean;
   dPlacement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
@@ -53,6 +54,7 @@ export interface DDateInputProps extends Omit<React.HTMLAttributes<HTMLDivElemen
 function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef>): JSX.Element | null {
   const {
     children,
+    dClassNamePrefix,
     dFormControl,
     dVisible,
     dPlacement = 'bottom-left',
@@ -87,6 +89,8 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
     clearTid?: () => void;
   }>({});
 
+  const prefix = `${dPrefix}${dClassNamePrefix}`;
+
   const [dInputRefLeft, dInputRefRight] = dInputRef ?? [];
   const combineInputRefLeft = useForkRef(inputRefLeft, dInputRefLeft);
   const combineInputRefRight = useForkRef(inputRefRight, dInputRefRight);
@@ -112,10 +116,10 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
   const clearable = dClearable && !dVisible && !dDisabled;
 
   const containerEl = useElement(() => {
-    let el = document.getElementById(`${dPrefix}date-input-root`);
+    let el = document.getElementById(`${prefix}-root`);
     if (!el) {
       el = document.createElement('div');
-      el.id = `${dPrefix}date-input-root`;
+      el.id = `${prefix}-root`;
       document.body.appendChild(el);
     }
     return el;
@@ -199,7 +203,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
       <DBaseInput
         {...inputProps}
         ref={isLeft ? combineInputRefLeft : combineInputRefRight}
-        className={getClassName(inputProps?.className, `${dPrefix}date-input__input`)}
+        className={getClassName(inputProps?.className, `${prefix}__input`)}
         type="text"
         autoComplete="off"
         disabled={dDisabled}
@@ -253,8 +257,8 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
         <div
           {...restProps}
           ref={boxRef}
-          className={getClassName(restProps.className, `${dPrefix}date-input`, {
-            [`${dPrefix}date-input--${dSize}`]: dSize,
+          className={getClassName(restProps.className, prefix, {
+            [`${prefix}--${dSize}`]: dSize,
             'is-disabled': dDisabled,
             'is-focus': isFocus,
           })}
@@ -280,14 +284,14 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
           {getInputNode(true)}
           {dRange && (
             <>
-              <div ref={indicatorRef} className={`${dPrefix}date-input__indicator`}></div>
-              <SwapRightOutlined className={`${dPrefix}date-input__separator`} />
+              <div ref={indicatorRef} className={`${prefix}__indicator`}></div>
+              <SwapRightOutlined className={`${prefix}__separator`} />
               {getInputNode(false)}
             </>
           )}
           {clearable && (
             <button
-              className={getClassName(`${dPrefix}icon-button`, `${dPrefix}date-input__clear`)}
+              className={`${prefix}__clear`}
               aria-label={t('Clear')}
               onClick={(e) => {
                 e.stopPropagation();
@@ -299,7 +303,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
             </button>
           )}
           {dSuffix && (
-            <div className={`${dPrefix}date-input__icon`} style={{ opacity: clearable ? 0 : 1 }}>
+            <div className={`${prefix}__icon`} style={{ opacity: clearable ? 0 : 1 }}>
               {dSuffix}
             </div>
           )}

diff --git a/packages/ui/src/components/_footer/Footer.tsx b/packages/ui/src/components/_footer/Footer.tsx
@@ -7,6 +7,7 @@ import { getClassName } from '../../utils';
 import { DButton } from '../button';
 
 export interface DFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  dClassNamePrefix: string;
   dAlign?: 'left' | 'center' | 'right';
   dActions?: React.ReactNode[];
   dCancelProps?: DButtonProps;
@@ -18,6 +19,7 @@ export interface DFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 
 export function DFooter(props: DFooterProps): JSX.Element | null {
   const {
+    dClassNamePrefix,
     dAlign = 'right',
     dActions = ['cancel', 'ok'],
     dCancelProps,
@@ -33,6 +35,8 @@ export function DFooter(props: DFooterProps): JSX.Element | null {
   const dPrefix = usePrefixConfig();
   //#endregion
 
+  const prefix = `${dPrefix}${dClassNamePrefix}`;
+
   const [t] = useTranslation();
 
   const [cancelLoading, setCancelLoading] = useState(false);
@@ -77,20 +81,20 @@ export function DFooter(props: DFooterProps): JSX.Element | null {
   };
 
   return (
-    <div {...restProps} className={getClassName(restProps.className, `${dPrefix}footer`, `${dPrefix}footer--${dAlign}`)}>
-      {dActions.map((action, index) => (
-        <React.Fragment key={index}>
-          {action === 'cancel' ? (
-            <DButton {...cancelProps} dType={cancelProps.dType ?? 'secondary'}>
-              {cancelProps.children ?? t('Footer', 'Cancel')}
-            </DButton>
-          ) : action === 'ok' ? (
-            <DButton {...okProps}>{okProps.children ?? t('Footer', 'OK')}</DButton>
-          ) : (
-            action
-          )}
-        </React.Fragment>
-      ))}
+    <div {...restProps} className={getClassName(restProps.className, `${prefix}__footer`, `${prefix}__footer--${dAlign}`)}>
+      {React.Children.map(dActions, (action) =>
+        action === 'cancel' ? (
+          <DButton {...cancelProps} key="$$cancel" dType={cancelProps.dType ?? 'secondary'}>
+            {cancelProps.children ?? t('Footer', 'Cancel')}
+          </DButton>
+        ) : action === 'ok' ? (
+          <DButton {...okProps} key="$$ok">
+            {okProps.children ?? t('Footer', 'OK')}
+          </DButton>
+        ) : (
+          action
+        )
+      )}
     </div>
   );
 }
diff --git a/packages/ui/src/components/_header/Header.tsx b/packages/ui/src/components/_header/Header.tsx
@@ -8,6 +8,7 @@ import { getClassName } from '../../utils';
 import { DButton } from '../button';
 
 export interface DHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  dClassNamePrefix: string;
   dActions?: React.ReactNode[];
   dCloseProps?: DButtonProps;
   onCloseClick?: () => void | boolean | Promise<void | boolean>;
@@ -17,6 +18,7 @@ export interface DHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 export function DHeader(props: DHeaderProps): JSX.Element | null {
   const {
     children,
+    dClassNamePrefix,
     dActions = ['close'],
     dCloseProps,
     onCloseClick,
@@ -29,6 +31,8 @@ export function DHeader(props: DHeaderProps): JSX.Element | null {
   const dPrefix = usePrefixConfig();
   //#endregion
 
+  const prefix = `${dPrefix}${dClassNamePrefix}`;
+
   const [t] = useTranslation();
 
   const [closeLoading, setCloseLoading] = useState(false);
@@ -53,23 +57,22 @@ export function DHeader(props: DHeaderProps): JSX.Element | null {
   };
 
   return (
-    <div {...restProps} className={getClassName(restProps.className, `${dPrefix}header`)}>
-      <div className={`${dPrefix}header__title`}>{children}</div>
-      <div className={`${dPrefix}header__actions`}>
-        {dActions.map((action, index) => (
-          <React.Fragment key={index}>
-            {action === 'close' ? (
-              <DButton
-                {...closeProps}
-                aria-label={closeProps['aria-label'] ?? t('Close')}
-                dType={closeProps.dType ?? 'text'}
-                dIcon={closeProps.dIcon ?? <CloseOutlined />}
-              ></DButton>
-            ) : (
-              action
-            )}
-          </React.Fragment>
-        ))}
+    <div {...restProps} className={getClassName(restProps.className, `${prefix}__header`)}>
+      <div className={`${prefix}__header-title`}>{children}</div>
+      <div className={`${prefix}__header-actions`}>
+        {React.Children.map(dActions, (action) =>
+          action === 'close' ? (
+            <DButton
+              {...closeProps}
+              key="$$close"
+              aria-label={closeProps['aria-label'] ?? t('Close')}
+              dType={closeProps.dType ?? 'text'}
+              dIcon={closeProps.dIcon ?? <CloseOutlined />}
+            ></DButton>
+          ) : (
+            action
+          )
+        )}
       </div>
     </div>
   );

diff --git a/packages/ui/src/components/_selectbox/Selectbox.tsx b/packages/ui/src/components/_selectbox/Selectbox.tsx
@@ -36,6 +36,7 @@ export interface DSelectboxRenderProps {
 
 export interface DSelectboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   children: (props: DSelectboxRenderProps) => JSX.Element | null;
+  dClassNamePrefix: string;
   dFormControl?: DFormControl;
   dVisible?: boolean;
   dContent?: React.ReactNode;
@@ -60,6 +61,7 @@ export interface DSelectboxProps extends Omit<React.HTMLAttributes<HTMLDivElemen
 function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef>): JSX.Element | null {
   const {
     children,
+    dClassNamePrefix,
     dFormControl,
     dVisible = false,
     dContent,
@@ -93,6 +95,8 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
   const inputRef = useRef<HTMLInputElement>(null);
   //#endregion
 
+  const prefix = `${dPrefix}${dClassNamePrefix}`;
+
   const combineInputRef = useForkRef(inputRef, dInputRef);
 
   const asyncCapture = useAsync();
@@ -104,10 +108,10 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
   const clearable = dClearable && !dVisible && !dLoading && !dDisabled && dContent;
 
   const containerEl = useElement(() => {
-    let el = document.getElementById(`${dPrefix}selectbox-root`);
+    let el = document.getElementById(`${prefix}-root`);
     if (!el) {
       el = document.createElement('div');
-      el.id = `${dPrefix}selectbox-root`;
+      el.id = `${prefix}-root`;
       document.body.appendChild(el);
     }
     return el;
@@ -174,8 +178,8 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
         <div
           {...restProps}
           ref={boxRef}
-          className={getClassName(restProps.className, `${dPrefix}selectbox`, {
-            [`${dPrefix}selectbox--${dSize}`]: dSize,
+          className={getClassName(restProps.className, prefix, {
+            [`${prefix}--${dSize}`]: dSize,
             'is-expanded': dVisible,
             'is-focus': isFocus,
             'is-disabled': dDisabled,
@@ -197,13 +201,13 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
             inputRef.current?.focus({ preventScroll: true });
           }}
         >
-          <div className={`${dPrefix}selectbox__container`} title={dContentTitle}>
+          <div className={`${prefix}__container`} title={dContentTitle}>
             <DFocusVisible onFocusVisibleChange={onFocusVisibleChange}>
               {({ fvOnFocus, fvOnBlur, fvOnKeyDown }) => (
                 <DBaseInput
                   {...dInputProps}
                   ref={combineInputRef}
-                  className={getClassName(`${dPrefix}selectbox__search`, dInputProps?.className)}
+                  className={getClassName(`${prefix}__search`, dInputProps?.className)}
                   style={{
                     ...dInputProps?.style,
                     opacity: inputable ? undefined : 0,
@@ -259,16 +263,16 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
             </DFocusVisible>
             {!inputable &&
               (dContent ? (
-                <div className={`${dPrefix}selectbox__content`}>{dContent}</div>
+                <div className={`${prefix}__content`}>{dContent}</div>
               ) : dPlaceholder ? (
-                <div className={`${dPrefix}selectbox__placeholder-wrapper`}>
-                  <div className={`${dPrefix}selectbox__placeholder`}>{dPlaceholder}</div>
+                <div className={`${prefix}__placeholder-wrapper`}>
+                  <div className={`${prefix}__placeholder`}>{dPlaceholder}</div>
                 </div>
               ) : null)}
           </div>
           {dSuffix && (
             <div
-              className={`${dPrefix}selectbox__suffix`}
+              className={`${prefix}__suffix`}
               onClick={(e) => {
                 e.stopPropagation();
               }}
@@ -278,7 +282,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
           )}
           {clearable && (
             <button
-              className={getClassName(`${dPrefix}icon-button`, `${dPrefix}selectbox__clear`)}
+              className={`${prefix}__clear`}
               aria-label={t('Clear')}
               onClick={(e) => {
                 e.stopPropagation();
@@ -290,7 +294,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
             </button>
           )}
           <div
-            className={getClassName(`${dPrefix}selectbox__icon`, {
+            className={getClassName(`${prefix}__icon`, {
               'is-arrow-up': !dLoading && !inputable && dVisible,
             })}
             style={{