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

package/lib/components/Skeleton/Skeleton.tsx

@@ -1,97 +0,0 @@
-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

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

package/lib/components/Skeleton/style.css

@@ -1,84 +0,0 @@
-@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

@@ -1,68 +0,0 @@
-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
-      className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper ${className} ${disabled ? `${prefixCls}__disabled ${prefixClsV3}__disabled` : ''}`}
-      style={style}
-    >
-      <div
-        tabIndex={0}
-        role="button"
-        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

@@ -1,50 +0,0 @@
-.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

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

package/lib/components/Upload/Upload.tsx

@@ -1,291 +0,0 @@
-'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

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