@antsoo-lib/components 0.1.11 → 0.1.13

package/src/upload/style/index.ts

@@ -1,66 +0,0 @@
-import { resetComponent } from '../../style'
-import { genCollapseMotion } from '../../style/motion'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-import genDraggerStyle from './dragger'
-import genListStyle from './list'
-import genMotionStyle from './motion'
-import { genPictureCardStyle, genPictureStyle } from './picture'
-import genRtlStyle from './rtl'
-
-export interface ComponentToken {}
-
-export interface UploadToken extends FullToken<'Upload'> {
-  uploadThumbnailSize: number
-  uploadProgressOffset: number
-  uploadPicCardSize: number
-}
-
-const genBaseStyle: GenerateStyle<UploadToken> = (token) => {
-  const { componentCls, colorTextDisabled } = token
-
-  return {
-    [`${componentCls}-wrapper`]: {
-      ...resetComponent(token),
-
-      [componentCls]: {
-        outline: 0,
-        "input[type='file']": {
-          cursor: 'pointer',
-        },
-      },
-
-      [`${componentCls}-select`]: {
-        display: 'inline-block',
-      },
-
-      [`${componentCls}-disabled`]: {
-        color: colorTextDisabled,
-        cursor: 'not-allowed',
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Upload', (token) => {
-  const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token
-  const listItemHeightSM = Math.round(fontSize * lineHeight)
-
-  const uploadToken = mergeToken<UploadToken>(token, {
-    uploadThumbnailSize: fontSizeHeading3 * 2,
-    uploadProgressOffset: listItemHeightSM / 2 + lineWidth,
-    uploadPicCardSize: controlHeightLG * 2.55,
-  })
-
-  return [
-    genBaseStyle(uploadToken),
-    genDraggerStyle(uploadToken),
-    genPictureStyle(uploadToken),
-    genPictureCardStyle(uploadToken),
-    genListStyle(uploadToken),
-    genMotionStyle(uploadToken),
-    genRtlStyle(uploadToken),
-    genCollapseMotion(uploadToken),
-  ]
-})

package/src/upload/style/list.ts

@@ -1,129 +0,0 @@
-import type { UploadToken } from '.'
-import { clearFix, textEllipsis } from '../../style'
-import type { GenerateStyle } from '../../theme/internal'
-
-const genListStyle: GenerateStyle<UploadToken> = (token) => {
-  const { componentCls, antCls, iconCls, fontSize, lineHeight } = token
-  const itemCls = `${componentCls}-list-item`
-  const actionsCls = `${itemCls}-actions`
-  const actionCls = `${itemCls}-action`
-  const listItemHeightSM = Math.round(fontSize * lineHeight)
-
-  return {
-    [`${componentCls}-wrapper`]: {
-      [`${componentCls}-list`]: {
-        ...clearFix(),
-        lineHeight: token.lineHeight,
-
-        [itemCls]: {
-          position: 'relative',
-          height: token.lineHeight * fontSize,
-          marginTop: token.marginXS,
-          fontSize,
-          display: 'flex',
-          alignItems: 'center',
-          transition: `background-color ${token.motionDurationSlow}`,
-
-          '&:hover': {
-            backgroundColor: token.controlItemBgHover,
-          },
-
-          [`${itemCls}-name`]: {
-            ...textEllipsis,
-            padding: `0 ${token.paddingXS}px`,
-            lineHeight,
-            flex: 'auto',
-            transition: `all ${token.motionDurationSlow}`,
-          },
-
-          [actionsCls]: {
-            [actionCls]: {
-              opacity: 0,
-            },
-
-            [`${actionCls}${antCls}-btn-sm`]: {
-              height: listItemHeightSM,
-              border: 0,
-              lineHeight: 1,
-              // FIXME: should not override small button
-              '> span': {
-                transform: 'scale(1)',
-              },
-            },
-
-            [`
-              ${actionCls}:focus,
-              &.picture ${actionCls}
-            `]: {
-              opacity: 1,
-            },
-
-            [iconCls]: {
-              color: token.colorTextDescription,
-              transition: `all ${token.motionDurationSlow}`,
-            },
-
-            [`&:hover ${iconCls}`]: {
-              color: token.colorText,
-            },
-          },
-
-          [`${componentCls}-icon ${iconCls}`]: {
-            color: token.colorTextDescription,
-            fontSize,
-          },
-
-          [`${itemCls}-progress`]: {
-            position: 'absolute',
-            bottom: -token.uploadProgressOffset,
-            width: '100%',
-            paddingInlineStart: fontSize + token.paddingXS,
-            fontSize,
-            lineHeight: 0,
-            pointerEvents: 'none',
-
-            '> div': {
-              margin: 0,
-            },
-          },
-        },
-
-        [`${itemCls}:hover ${actionCls}`]: {
-          opacity: 1,
-          color: token.colorText,
-        },
-
-        [`${itemCls}-error`]: {
-          color: token.colorError,
-          [`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: {
-            color: token.colorError,
-          },
-
-          [actionsCls]: {
-            [`${iconCls}, ${iconCls}:hover`]: {
-              color: token.colorError,
-            },
-
-            [actionCls]: {
-              opacity: 1,
-            },
-          },
-        },
-
-        [`${componentCls}-list-item-container`]: {
-          transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
-
-          // For smooth removing animation
-          '&::before': {
-            display: 'table',
-            width: 0,
-            height: 0,
-            content: '""',
-          },
-        },
-      },
-    },
-  }
-}
-
-export default genListStyle

package/src/upload/style/motion.ts

@@ -1,52 +0,0 @@
-import type { UploadToken } from '.'
-import { Keyframes } from '../../_util/cssinjs'
-import type { GenerateStyle } from '../../theme/internal'
-
-const uploadAnimateInlineIn = new Keyframes('uploadAnimateInlineIn', {
-  from: {
-    width: 0,
-    height: 0,
-    margin: 0,
-    padding: 0,
-    opacity: 0,
-  },
-})
-
-const uploadAnimateInlineOut = new Keyframes('uploadAnimateInlineOut', {
-  to: {
-    width: 0,
-    height: 0,
-    margin: 0,
-    padding: 0,
-    opacity: 0,
-  },
-})
-// =========================== Motion ===========================
-const genMotionStyle: GenerateStyle<UploadToken> = (token) => {
-  const { componentCls } = token
-  const inlineCls = `${componentCls}-animate-inline`
-
-  return [
-    {
-      [`${componentCls}-wrapper`]: {
-        [`${inlineCls}-appear, ${inlineCls}-enter, ${inlineCls}-leave`]: {
-          animationDuration: token.motionDurationSlow,
-          animationTimingFunction: token.motionEaseInOutCirc,
-          animationFillMode: 'forwards',
-        },
-
-        [`${inlineCls}-appear, ${inlineCls}-enter`]: {
-          animationName: uploadAnimateInlineIn,
-        },
-
-        [`${inlineCls}-leave`]: {
-          animationName: uploadAnimateInlineOut,
-        },
-      },
-    },
-    uploadAnimateInlineIn,
-    uploadAnimateInlineOut,
-  ]
-}
-
-export default genMotionStyle

package/src/upload/style/picture.ts

@@ -1,228 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-
-import type { UploadToken } from '.'
-import { clearFix, textEllipsis } from '../../style'
-import type { GenerateStyle } from '../../theme/internal'
-
-const genPictureStyle: GenerateStyle<UploadToken> = (token) => {
-  const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset } = token
-  const listCls = `${componentCls}-list`
-  const itemCls = `${listCls}-item`
-
-  return {
-    [`${componentCls}-wrapper`]: {
-      // ${listCls} 增加优先级
-      [`${listCls}${listCls}-picture, ${listCls}${listCls}-picture-card`]: {
-        [itemCls]: {
-          position: 'relative',
-          height: uploadThumbnailSize + token.lineWidth * 2 + token.paddingXS * 2,
-          padding: token.paddingXS,
-          border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
-          borderRadius: token.borderRadiusLG,
-
-          '&:hover': {
-            background: 'transparent',
-          },
-
-          [`${itemCls}-thumbnail`]: {
-            ...textEllipsis,
-            width: uploadThumbnailSize,
-            height: uploadThumbnailSize,
-            lineHeight: `${uploadThumbnailSize + token.paddingSM}px`,
-            textAlign: 'center',
-            flex: 'none',
-
-            [iconCls]: {
-              fontSize: token.fontSizeHeading2,
-              color: token.colorPrimary,
-            },
-
-            img: {
-              display: 'block',
-              width: '100%',
-              height: '100%',
-              overflow: 'hidden',
-            },
-          },
-
-          [`${itemCls}-progress`]: {
-            bottom: uploadProgressOffset,
-            width: `calc(100% - ${token.paddingSM * 2}px)`,
-            marginTop: 0,
-            paddingInlineStart: uploadThumbnailSize + token.paddingXS,
-          },
-        },
-
-        [`${itemCls}-error`]: {
-          borderColor: token.colorError,
-
-          // Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
-          [`${itemCls}-thumbnail ${iconCls}`]: {
-            [`svg path[fill='#e6f7ff']`]: {
-              fill: token.colorErrorBg,
-            },
-            [`svg path[fill='#1890ff']`]: {
-              fill: token.colorError,
-            },
-          },
-        },
-
-        [`${itemCls}-uploading`]: {
-          borderStyle: 'dashed',
-
-          [`${itemCls}-name`]: {
-            marginBottom: uploadProgressOffset,
-          },
-        },
-      },
-    },
-  }
-}
-
-const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
-  const { componentCls, iconCls, fontSizeLG, colorTextLightSolid } = token
-
-  const listCls = `${componentCls}-list`
-  const itemCls = `${listCls}-item`
-
-  const uploadPictureCardSize = token.uploadPicCardSize
-
-  return {
-    [`${componentCls}-wrapper${componentCls}-picture-card-wrapper`]: {
-      ...clearFix(),
-      display: 'inline-block',
-      width: '100%',
-
-      [`${componentCls}${componentCls}-select`]: {
-        width: uploadPictureCardSize,
-        height: uploadPictureCardSize,
-        marginInlineEnd: token.marginXS,
-        marginBottom: token.marginXS,
-        textAlign: 'center',
-        verticalAlign: 'top',
-        backgroundColor: token.colorFillAlter,
-        border: `${token.lineWidth}px dashed ${token.colorBorder}`,
-        borderRadius: token.borderRadiusLG,
-        cursor: 'pointer',
-        transition: `border-color ${token.motionDurationSlow}`,
-
-        [`> ${componentCls}`]: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100%',
-          textAlign: 'center',
-        },
-
-        [`&:not(${componentCls}-disabled):hover`]: {
-          borderColor: token.colorPrimary,
-        },
-      },
-
-      // list
-      [`${listCls}${listCls}-picture-card`]: {
-        [`${listCls}-item-container`]: {
-          display: 'inline-block',
-          width: uploadPictureCardSize,
-          height: uploadPictureCardSize,
-          marginBlock: `0 ${token.marginXS}px`,
-          marginInline: `0 ${token.marginXS}px`,
-          verticalAlign: 'top',
-        },
-
-        '&::after': {
-          display: 'none',
-        },
-
-        [itemCls]: {
-          height: '100%',
-          margin: 0,
-
-          '&::before': {
-            position: 'absolute',
-            zIndex: 1,
-            width: `calc(100% - ${token.paddingXS * 2}px)`,
-            height: `calc(100% - ${token.paddingXS * 2}px)`,
-            backgroundColor: token.colorBgMask,
-            opacity: 0,
-            transition: `all ${token.motionDurationSlow}`,
-            content: '" "',
-          },
-        },
-
-        [`${itemCls}:hover`]: {
-          [`&::before, ${itemCls}-actions`]: {
-            opacity: 1,
-          },
-        },
-
-        [`${itemCls}-actions`]: {
-          position: 'absolute',
-          insetInlineStart: 0,
-          zIndex: 10,
-          width: '100%',
-          whiteSpace: 'nowrap',
-          textAlign: 'center',
-          opacity: 0,
-          transition: `all ${token.motionDurationSlow}`,
-
-          [`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
-            zIndex: 10,
-            width: fontSizeLG,
-            margin: `0 ${token.marginXXS}px`,
-            fontSize: fontSizeLG,
-            cursor: 'pointer',
-            transition: `all ${token.motionDurationSlow}`,
-          },
-        },
-
-        [`${itemCls}-actions, ${itemCls}-actions:hover`]: {
-          [`${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
-            color: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
-            '&:hover': {
-              color: colorTextLightSolid,
-            },
-          },
-        },
-
-        [`${itemCls}-thumbnail, ${itemCls}-thumbnail img`]: {
-          position: 'static',
-          display: 'block',
-          width: '100%',
-          height: '100%',
-          objectFit: 'contain',
-        },
-
-        [`${itemCls}-name`]: {
-          display: 'none',
-          textAlign: 'center',
-        },
-
-        [`${itemCls}-file + ${itemCls}-name`]: {
-          position: 'absolute',
-          bottom: token.margin,
-          display: 'block',
-          width: `calc(100% - ${token.paddingXS * 2}px)`,
-        },
-
-        [`${itemCls}-uploading`]: {
-          [`&${itemCls}`]: {
-            backgroundColor: token.colorFillAlter,
-          },
-
-          [`&::before, ${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {
-            display: 'none',
-          },
-        },
-
-        [`${itemCls}-progress`]: {
-          bottom: token.marginXL,
-          width: `calc(100% - ${token.paddingXS * 2}px)`,
-          paddingInlineStart: 0,
-        },
-      },
-    },
-  }
-}
-
-export { genPictureCardStyle, genPictureStyle }

package/src/upload/style/rtl.ts

@@ -1,15 +0,0 @@
-import type { UploadToken } from '.'
-import type { GenerateStyle } from '../../theme/internal'
-
-// =========================== Motion ===========================
-const genRtlStyle: GenerateStyle<UploadToken> = (token) => {
-  const { componentCls } = token
-
-  return {
-    [`${componentCls}-rtl`]: {
-      direction: 'rtl',
-    },
-  }
-}
-
-export default genRtlStyle

package/src/upload/utils.tsx

@@ -1,124 +0,0 @@
-import type { FileType, InternalUploadFile, UploadFile } from './interface'
-
-export function file2Obj(file: FileType): InternalUploadFile {
-  return {
-    ...file,
-    lastModified: file.lastModified,
-    lastModifiedDate: file.lastModifiedDate,
-    name: file.name,
-    size: file.size,
-    type: file.type,
-    uid: file.uid,
-    percent: 0,
-    originFileObj: file,
-  }
-}
-
-/** Upload fileList. Replace file if exist or just push into it. */
-export function updateFileList(file: UploadFile<any>, fileList: UploadFile<any>[]) {
-  const nextFileList = [...fileList]
-  const fileIndex = nextFileList.findIndex(({ uid }: UploadFile) => uid === file.uid)
-  if (fileIndex === -1) {
-    nextFileList.push(file)
-  } else {
-    nextFileList[fileIndex] = file
-  }
-  return nextFileList
-}
-
-export function getFileItem(file: FileType, fileList: UploadFile[]) {
-  const matchKey = file.uid !== undefined ? 'uid' : 'name'
-  return fileList.filter((item) => item[matchKey] === file[matchKey])[0]
-}
-
-export function removeFileItem(file: UploadFile, fileList: UploadFile[]) {
-  const matchKey = file.uid !== undefined ? 'uid' : 'name'
-  const removed = fileList.filter((item) => item[matchKey] !== file[matchKey])
-  if (removed.length === fileList.length) {
-    return null
-  }
-  return removed
-}
-
-// ==================== Default Image Preview ====================
-const extname = (url = '') => {
-  const temp = url.split('/')
-  const filename = temp[temp.length - 1]
-  const filenameWithoutSuffix = filename.split(/#|\?/)[0]
-  return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0]
-}
-
-const isImageFileType = (type: string): boolean => type.indexOf('image/') === 0
-
-export const isImageUrl = (file: UploadFile): boolean => {
-  if (file.type && !file.thumbUrl) {
-    return isImageFileType(file.type)
-  }
-  const url: string = (file.thumbUrl || file.url || '') as string
-  const extension = extname(url)
-  if (
-    /^data:image\//.test(url) ||
-    /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i.test(extension)
-  ) {
-    return true
-  }
-  if (url.startsWith('data:')) {
-    // other file types of base64
-    return false
-  }
-  if (extension) {
-    // other file types which have extension
-    return false
-  }
-  return true
-}
-
-const MEASURE_SIZE = 200
-export function previewImage(file: File | Blob): Promise<string> {
-  return new Promise((resolve) => {
-    if (!file.type || !isImageFileType(file.type)) {
-      resolve('')
-      return
-    }
-
-    const canvas = document.createElement('canvas')
-    canvas.width = MEASURE_SIZE
-    canvas.height = MEASURE_SIZE
-    canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`
-    document.body.appendChild(canvas)
-    const ctx = canvas.getContext('2d')
-    const img = new Image()
-    img.onload = () => {
-      const { width, height } = img
-
-      let drawWidth = MEASURE_SIZE
-      let drawHeight = MEASURE_SIZE
-      let offsetX = 0
-      let offsetY = 0
-
-      if (width > height) {
-        drawHeight = height * (MEASURE_SIZE / width)
-        offsetY = -(drawHeight - drawWidth) / 2
-      } else {
-        drawWidth = width * (MEASURE_SIZE / height)
-        offsetX = -(drawWidth - drawHeight) / 2
-      }
-
-      ctx!.drawImage(img, offsetX, offsetY, drawWidth, drawHeight)
-      const dataURL = canvas.toDataURL()
-      document.body.removeChild(canvas)
-
-      resolve(dataURL)
-    }
-    img.crossOrigin = 'anonymous'
-    if (file.type.startsWith('image/svg+xml')) {
-      const reader = new FileReader()
-      reader.addEventListener('load', () => {
-        if (reader.result) img.src = reader.result as string
-      })
-      reader.readAsDataURL(file)
-    } else {
-      img.src = window.URL.createObjectURL(file)
-    }
-  })
-}