x-ui-design 1.0.31-gamma.1 → 1.0.33

package/lib/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,97 @@
+import React, { ReactElement } from 'react';
+import { clsx, createArray } from '../../helpers';
+import { SkeletonProps } from '../../types/skeleton';
+import { prefixClsSkeleton } from '../../utils';
+import { SkeletonButton } from './Button';
+import { SkeletonAvatar } from './Avatar';
+import { GET_AVATAR_SKELETON_PROPS } from './Avatar/Avatar';
+import { SkeletonImage } from './Image';
+import { SkeletonInput } from './Input';
+import './style.css';
+
+const PARAGRAPH_AVATAR_ROWS = 2;
+const PARAGRAPH_DEFAULT_ROWS = 3;
+
+const SkeletonComponent = ({
+  prefixCls = prefixClsSkeleton,
+  active,
+  className,
+  style,
+  avatar,
+  paragraph,
+  round,
+  title,
+  teamLogo = true
+}: SkeletonProps): ReactElement => {
+  const GET_TITLE_SKELETON_PROPS =
+    typeof title !== 'boolean'
+      ? {
+          style: { width: title?.width, ...title?.style },
+          className: title?.className || ''
+        }
+      : {};
+
+  const PARAGRAPH_ROWS = avatar
+    ? PARAGRAPH_AVATAR_ROWS
+    : PARAGRAPH_DEFAULT_ROWS;
+
+  const HAS_PHARAGRAPH =
+    typeof paragraph === 'boolean' || !paragraph
+      ? PARAGRAPH_ROWS
+      : paragraph?.rows ?? PARAGRAPH_ROWS;
+
+  return (
+    <div
+      className={clsx([
+        prefixCls,
+        {
+          [`${prefixCls}__withAvatar`]: avatar,
+          [`${prefixCls}-active`]: active,
+          [`${prefixCls}-round`]: round
+        },
+        className
+      ])}
+      style={style}
+    >
+      {avatar && teamLogo && (
+        <div className={`${prefixCls}__header`}>
+          <SkeletonAvatar {...GET_AVATAR_SKELETON_PROPS(avatar)} />
+        </div>
+      )}
+
+      <div className={`${prefixCls}-content`}>
+        <h3
+          className={clsx([
+            `${prefixCls}-title ${GET_TITLE_SKELETON_PROPS.className}`,
+            { [`${prefixCls}-title-avatar`]: avatar }
+          ])}
+          style={GET_TITLE_SKELETON_PROPS.style}
+        />
+
+        {paragraph !== false && (
+          <ul
+            className={`${prefixCls}-paragraph`}
+            style={{
+              ...(typeof paragraph !== 'boolean' && paragraph
+                ? paragraph.style
+                : {})
+            }}
+          >
+            {createArray(HAS_PHARAGRAPH).map(key => (
+              <li key={key}></li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const Skeleton = Object.assign(SkeletonComponent, {
+  Image: SkeletonImage,
+  Input: SkeletonInput,
+  Avatar: SkeletonAvatar,
+  Button: SkeletonButton
+})
+
+export default Skeleton

package/lib/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton'

package/lib/components/Skeleton/style.css

@@ -0,0 +1,84 @@
+@keyframes xUi-skeleton-loading {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+.xUi-skeleton {
+    width: 100%;
+    display: table;
+}
+
+.xUi-skeleton__withAvatar {
+    display: flex;
+    gap: 12px;
+}
+
+.xUi-skeleton-content {
+    width: 100%;
+    display: table-cell;
+    vertical-align: top;
+}
+
+.xUi-skeleton__header {
+    display: table-cell;
+    vertical-align: top;
+}
+
+.xUi-skeleton-title {
+    width: 38%;
+    height: 16px;
+    margin-top: 16px;
+    border-radius: 4px;
+    background: rgba(190, 190, 190, 0.2);
+}
+
+.xUi-skeleton-title-avatar {
+    width: 100%;
+    margin-top: 12px;
+}
+
+.xUi-skeleton-title + .xUi-skeleton-paragraph {
+    margin-top: 24px;
+}
+
+.xUi-skeleton-paragraph {
+    padding: 0;
+}
+
+.xUi-skeleton-paragraph li {
+    width: 100%;
+    height: 16px;
+    list-style: none;
+    border-radius: 4px;
+    background: rgba(190, 190, 190, 0.2);
+}
+
+.xUi-skeleton-paragraph li + li {
+    margin-top: 16px;
+}
+
+.xUi-skeleton-paragraph li:last-child:not(:first-child) {
+    width: 61%;
+}
+
+.xUi-skeleton-active .xUi-skeleton-title,
+.xUi-skeleton-active .xUi-skeleton-paragraph > li {
+    background: linear-gradient(
+        90deg,
+        rgba(190, 190, 190, 0.2) 25%,
+        rgba(129, 129, 129, 0.24) 37%,
+        rgba(190, 190, 190, 0.2) 63%
+    );
+    background-size: 400% 100%;
+    animation: xUi-skeleton-loading 1.4s ease infinite;
+}
+
+.xUi-skeleton-round .xUi-skeleton-title,
+.xUi-skeleton-round .xUi-skeleton-content,
+.xUi-skeleton-round .xUi-skeleton-paragraph > li {
+    border-radius: 100px;
+}

package/lib/components/Switch/Switch.tsx

@@ -0,0 +1,68 @@
+import React, { MouseEvent, useEffect, useState } from 'react';
+import { SyntheticBaseEvent } from '../../types';
+import { SwitchProps } from '../../types/switch';
+import { prefixClsSwitch, prefixClsSwitchV3 } from '../../utils';
+import './index.css';
+
+const Switch = ({
+  prefixCls = prefixClsSwitch,
+  prefixClsV3 = prefixClsSwitchV3,
+  checked,
+  onChange,
+  onClick,
+  disabled = false,
+  className = '',
+  style = {},
+  defaultChecked,
+  value,
+  controlled = false
+}: SwitchProps) => {
+  const isChecked = checked !== undefined ? checked : defaultChecked || value;
+  const [internalChecked, setInternalChecked] = useState(isChecked);
+
+  const handleClick = (
+    e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
+  ) => {
+    e.stopPropagation();
+
+    if (disabled) {
+      return;
+    }
+
+    if (!controlled) {
+      setInternalChecked(!internalChecked);
+      e.target.value = !internalChecked;
+    } else {
+      e.target.value = !checked;
+    }
+
+    onClick?.(e.target.value);
+    onChange?.(e.target.value);
+  };
+
+  useEffect(() => {
+    if (checked !== undefined) {
+      setInternalChecked(checked);
+    }
+  }, [checked]);
+
+  return (
+    <div
+      tabIndex={0}
+      role="button"
+      className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper ${className} ${disabled ? `${prefixCls}__disabled ${prefixClsV3}__disabled` : ''}`}
+      style={style}
+    >
+      <div
+        className={`${prefixCls} ${prefixClsV3} ${internalChecked ? `${prefixCls}__checked ${prefixClsV3}__checked` : ''}`}
+        onClick={handleClick}
+      >
+        <div className={`${prefixCls}__slider ${prefixClsV3}__slider`}></div>
+      </div>
+    </div>
+  );
+};
+
+Switch.displayName = 'Switch';
+
+export default Switch

package/lib/components/Switch/index.css

@@ -0,0 +1,50 @@
+.xUi-switch {
+  border: 0;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #000000d9;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  height: 22px;
+  list-style: none;
+  margin: 0;
+  min-width: 44px;
+  padding: 0;
+  position: relative;
+  transition: all 0.2s;
+  user-select: none;
+  vertical-align: middle;
+  background-color: var(--xui-color-disabled);
+}
+
+.xUi-switch-wrapper {
+  &:has([tabindex="0"]:focus-visible) {
+    border-color: var(--xui-primary-color);
+  }
+}
+
+.xUi-switch.xUi-switch__disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.xUi-switch .xUi-switch__slider {
+  position: absolute;
+  height: 18px;
+  left: 2px;
+  top: 2px;
+  width: 18px;
+  border-radius: 50%;
+  background-color: white;
+  transition: transform 0.3s;
+}
+
+.xUi-switch__checked .xUi-switch__slider {
+  transform: translateX(21px);
+}
+
+.xUi-switch__checked {
+  background-color: var(--xui-primary-color);
+}

package/lib/components/Switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch'

package/lib/components/Upload/Upload.tsx

@@ -0,0 +1,291 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { clsx } from '../../helpers';
+import { RuleType } from '../../types';
+import {
+  RcFile,
+  UploadChangeParam,
+  UploadFile,
+  UploadProps
+} from '../../types/upload';
+import { prefixClsUpload, prefixClsUploadV3 } from '../../utils';
+import './style.css';
+import { StampleIcon, TrashIcon } from '../Icons/Icons';
+
+const IMAGE_SIZE = 40;
+const IMAGE_PROGRESS_PERCENT = 100;
+
+const Upload = ({
+  prefixCls = prefixClsUpload,
+  prefixClsV3 = prefixClsUploadV3,
+  multiple = false,
+  style,
+  className,
+  onChange,
+  action,
+  name = 'file',
+  method = 'POST',
+  headers,
+  directory,
+  beforeUpload,
+  rootClassName,
+  onRemove,
+  disabled,
+  withCredentials,
+  openFileDialogOnClick = true,
+  maxCount,
+  fileList: controlledFileList,
+  customRequest,
+  accept,
+  listType = 'text',
+  showUploadList = true,
+  children,
+  noStyle,
+  defaultFileList
+}: UploadProps) => {
+  const uploadRef = useRef<HTMLInputElement>(null);
+  const [fileList, setFileList] = useState<UploadFile<RuleType>[]>(() =>
+    (controlledFileList || defaultFileList || []).map((file, idx) => ({
+      ...file,
+      uid: file.uid || `${Date.now()}-${idx}`,
+      status: file.status || 'done',
+      percent: file.percent || IMAGE_PROGRESS_PERCENT
+    }))
+  );
+
+  const updateFileList = (newList: UploadFile<RuleType>[]) => {
+    setFileList(newList);
+
+    if (onChange) {
+      onChange({
+        fileList: newList,
+        file: newList[0] || {}
+      } as UploadChangeParam);
+    }
+  };
+
+  const handleFileChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const rawFiles: File[] = Array.from(event.target.files || []);
+    let uploadFiles: UploadFile<RuleType>[] = rawFiles.map((file, i) => ({
+      uid: `${Date.now()}-${i}`,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      status: 'uploading',
+      percent: 0,
+      originFileObj: file
+    }));
+
+    if (beforeUpload) {
+      const filtered: UploadFile<RuleType>[] = [];
+
+      for (let i = 0; i < uploadFiles.length; i++) {
+        const file = uploadFiles[i].originFileObj as RcFile;
+        const result = await beforeUpload(file, rawFiles);
+
+        if (result === false) {
+          continue;
+        }
+
+        filtered.push(uploadFiles[i]);
+      }
+
+      uploadFiles = filtered;
+    }
+
+    const newList = (
+      multiple ? [...fileList, ...uploadFiles] : uploadFiles
+    ).slice(0, maxCount);
+
+    updateFileList(newList);
+
+    uploadFiles.forEach(file => {
+      const rcFile = file.originFileObj as RcFile;
+
+      const updateProgress = (percent: number) => {
+        file.percent = percent;
+        updateFileList([...newList]);
+      };
+
+      const markSuccess = () => {
+        file.status = 'done';
+        file.percent = 100;
+        updateFileList([...newList]);
+      };
+
+      const markError = () => {
+        file.status = 'error';
+        updateFileList([...newList]);
+      };
+
+      if (customRequest) {
+        customRequest({
+          file: rcFile,
+          onSuccess: markSuccess,
+          onError: markError,
+          onProgress: event => {
+            const percent = Math.round(
+              (event.loaded / (event.total || event.loaded)) *
+                IMAGE_PROGRESS_PERCENT
+            );
+
+            updateProgress(percent);
+          }
+        });
+      } else if (typeof action === 'string') {
+        const formData = new FormData();
+        formData.append(name, rcFile);
+
+        fetch(action, {
+          method,
+          body: formData,
+          headers,
+          credentials: withCredentials ? 'include' : 'same-origin'
+        })
+          .then(res => {
+            if (!res.ok) {
+              throw new Error('Upload failed');
+            }
+
+            return res.json();
+          })
+          .then(markSuccess)
+          .catch(markError);
+      } else if (typeof action === 'function') {
+        action(rcFile);
+        markSuccess();
+      } else {
+        markSuccess();
+      }
+    });
+
+    if (uploadRef.current) {
+      uploadRef.current.value = '';
+    }
+  };
+
+  const handleRemove = (uid: string) => {
+    const filtered: UploadFile<RuleType>[] = [];
+
+    let removedFile: UploadFile<RuleType> | undefined = undefined;
+
+    fileList.forEach(file => {
+      if (file.uid !== uid) {
+        filtered.push(file);
+      } else {
+        removedFile = file;
+      }
+    });
+
+    updateFileList(filtered);
+
+    if (removedFile) {
+      onRemove?.(removedFile);
+    }
+  };
+
+  const handleClick = () => {
+    if (!disabled && openFileDialogOnClick && uploadRef.current) {
+      uploadRef.current.click();
+    }
+  };
+
+  return (
+    <div
+      className={clsx([
+        `${prefixCls}-wrapper ${prefixClsV3}-wrapper`,
+        className,
+        rootClassName,
+        {
+          noStyle: noStyle,
+          [`${prefixCls}-disabled`]: disabled,
+          [`${prefixClsV3}-disabled`]: disabled
+        }
+      ])}
+      style={style}
+    >
+      <span
+        className={clsx([`${prefixCls}`, `${prefixCls}-${listType}`, `${prefixClsV3}`, `${prefixClsV3}-${listType}`])}
+        onClick={handleClick}
+      >
+        {children}
+        <input
+          type="file"
+          ref={uploadRef}
+          accept={accept}
+          multiple={multiple}
+          onChange={handleFileChange}
+          className={`${prefixCls}-input ${prefixClsV3}-input`}
+          disabled={disabled}
+          {...(directory
+            ? {
+                directory: true,
+                webkitdirectory: true
+              }
+            : {})}
+        />
+      </span>
+
+      {showUploadList && fileList.length > 0 && (
+        <ul className={`${prefixCls}-list ${prefixCls}-list-${listType} ${prefixClsV3}-list ${prefixClsV3}-list-${listType}`}>
+          {fileList.map(file => (
+            <li
+              key={file.uid}
+              className={`${prefixCls}-item ${prefixCls}-item-${file.status} ${prefixClsV3}-item ${prefixClsV3}-item-${file.status}`}
+            >
+              <span
+                className={`${prefixCls}-remove ${prefixClsV3}-remove`}
+                onClick={() => handleRemove(file.uid)}
+              >
+                {listType === 'picture' && (file.originFileObj || file.url) ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    width={IMAGE_SIZE}
+                    height={IMAGE_SIZE}
+                    alt={file.name}
+                    src={file.url || URL.createObjectURL(file.originFileObj)}
+                    className={`${prefixCls}-item-thumbnail ${prefixClsV3}-item-thumbnail`}
+                  />
+                ) : (
+                  <StampleIcon />
+                )}
+              </span>
+              <div style={{ width: '100%' }}>
+                <div
+                  className={`${prefixCls}-item-title ${prefixClsV3}-item-title`}
+                  style={{
+                    ...(file.status === 'uploading' ? { marginBottom: 12 } : {})
+                  }}
+                >
+                  <span
+                    className={`${prefixCls}-item-remove-icon ${prefixClsV3}-item-remove-icon`}
+                    onClick={() => handleRemove(file.uid)}
+                    style={{ cursor: 'pointer', marginLeft: 'auto' }}
+                    role="button"
+                    aria-label="Remove file"
+                  >
+                    <TrashIcon />
+                  </span>
+                </div>
+                {file.status === 'uploading' && (
+                  <>
+                    <div className={`${prefixCls}-item-progress-line ${prefixClsV3}-item-progress-line`} />
+                    <div
+                      className={`${prefixCls}-item-progress-line-percent ${prefixClsV3}-item-progress-line-percent`}
+                      style={{ width: `${file.percent}%` }}
+                    />
+                  </>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Upload;

package/lib/components/Upload/index.ts

@@ -0,0 +1 @@
+export { default as Upload } from '../Upload/Upload'