@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-upload/interface.tsx

@@ -0,0 +1,83 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export type BeforeUploadFileType = File | Blob | boolean | string
+
+export type Action = string | ((file: RcFile) => string | PromiseLike<string>)
+
+export const uploadProps = () => {
+  return {
+    capture: [Boolean, String] as PropType<boolean | 'user' | 'environment'>,
+    multipart: { type: Boolean, default: undefined },
+    name: String,
+    disabled: { type: Boolean, default: undefined },
+    componentTag: String as PropType<any>,
+    action: [String, Function] as PropType<Action>,
+    method: String as PropType<UploadRequestMethod>,
+    directory: { type: Boolean, default: undefined },
+    data: [Object, Function] as PropType<
+      Record<string, unknown> | ((file: RcFile | string | Blob) => Record<string, unknown>)
+    >,
+    headers: Object as PropType<UploadRequestHeader>,
+    accept: String,
+    multiple: { type: Boolean, default: undefined },
+    onBatchStart: Function as PropType<
+      (fileList: { file: RcFile; parsedFile: Exclude<BeforeUploadFileType, boolean> }[]) => void
+    >,
+    onReject: Function as PropType<(fileList: RcFile[]) => void>,
+    onStart: Function as PropType<(file: RcFile) => void>,
+    onError: Function as PropType<
+      (error: Error, ret: Record<string, unknown>, file: RcFile) => void
+    >,
+    onSuccess: Function as PropType<
+      (response: Record<string, unknown>, file: RcFile, xhr: XMLHttpRequest) => void
+    >,
+    onProgress: Function as PropType<(event: UploadProgressEvent, file: RcFile) => void>,
+    beforeUpload: Function as PropType<
+      (
+        file: RcFile,
+        FileList: RcFile[],
+      ) => BeforeUploadFileType | Promise<void | BeforeUploadFileType>
+    >,
+    customRequest: Function as PropType<(option: UploadRequestOption) => void>,
+    withCredentials: { type: Boolean, default: undefined },
+    openFileDialogOnClick: { type: Boolean, default: undefined },
+    prefixCls: String,
+    id: String,
+    onMouseenter: Function as PropType<(e: MouseEvent) => void>,
+    onMouseleave: Function as PropType<(e: MouseEvent) => void>,
+    onClick: Function as PropType<(e: MouseEvent | KeyboardEvent) => void>,
+  }
+}
+
+export type UploadProps = Partial<ExtractPropTypes<ReturnType<typeof uploadProps>>>
+
+export interface UploadProgressEvent extends Partial<ProgressEvent> {
+  percent?: number
+}
+
+export type UploadRequestMethod = 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch'
+
+export type UploadRequestHeader = Record<string, string>
+
+export interface UploadRequestError extends Error {
+  status?: number
+  method?: UploadRequestMethod
+  url?: string
+}
+
+export interface UploadRequestOption<T = any> {
+  onProgress?: (event: UploadProgressEvent) => void
+  onError?: (event: UploadRequestError | ProgressEvent, body?: T) => void
+  onSuccess?: (body: T, xhr?: XMLHttpRequest) => void
+  data?: Record<string, unknown>
+  filename?: string
+  file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
+  withCredentials?: boolean
+  action: string
+  headers?: UploadRequestHeader
+  method: UploadRequestMethod
+}
+
+export interface RcFile extends File {
+  uid: string
+}

package/src/vc-upload/request.ts

@@ -0,0 +1,104 @@
+import type { UploadProgressEvent, UploadRequestError, UploadRequestOption } from './interface'
+
+function getError(option: UploadRequestOption, xhr: XMLHttpRequest) {
+  const msg = `cannot ${option.method} ${option.action} ${xhr.status}'`
+  const err = new Error(msg) as UploadRequestError
+  err.status = xhr.status
+  err.method = option.method
+  err.url = option.action
+  return err
+}
+
+function getBody(xhr: XMLHttpRequest) {
+  const text = xhr.responseText || xhr.response
+  if (!text) {
+    return text
+  }
+
+  try {
+    return JSON.parse(text)
+  } catch (e) {
+    return text
+  }
+}
+
+export default function upload(option: UploadRequestOption) {
+  const xhr = new XMLHttpRequest()
+
+  if (option.onProgress && xhr.upload) {
+    xhr.upload.onprogress = function progress(e: UploadProgressEvent) {
+      if (e.total > 0) {
+        e.percent = (e.loaded / e.total) * 100
+      }
+      option.onProgress(e)
+    }
+  }
+
+  const formData = new FormData()
+
+  if (option.data) {
+    Object.keys(option.data).forEach((key) => {
+      const value = option.data[key]
+      // support key-value array data
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          // { list: [ 11, 22 ] }
+          // formData.append('list[]', 11);
+          formData.append(`${key}[]`, item)
+        })
+        return
+      }
+
+      formData.append(key, value as string | Blob)
+    })
+  }
+
+  if (option.file instanceof Blob) {
+    formData.append(option.filename, option.file, (option.file as any).name)
+  } else {
+    formData.append(option.filename, option.file)
+  }
+
+  xhr.onerror = function error(e) {
+    option.onError(e)
+  }
+
+  xhr.onload = function onload() {
+    // allow success when 2xx status
+    // see https://github.com/react-component/upload/issues/34
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(option, xhr), getBody(xhr))
+    }
+
+    return option.onSuccess(getBody(xhr), xhr)
+  }
+
+  xhr.open(option.method, option.action, true)
+
+  // Has to be after `.open()`. See https://github.com/enyo/dropzone/issues/179
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true
+  }
+
+  const headers = option.headers || {}
+
+  // when set headers['X-Requested-With'] = null , can close default XHR header
+  // see https://github.com/react-component/upload/issues/33
+  if (headers['X-Requested-With'] !== null) {
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+  }
+
+  Object.keys(headers).forEach((h) => {
+    if (headers[h] !== null) {
+      xhr.setRequestHeader(h, headers[h])
+    }
+  })
+
+  xhr.send(formData)
+
+  return {
+    abort() {
+      xhr.abort()
+    },
+  }
+}

package/src/vc-upload/traverseFileTree.ts

@@ -0,0 +1,73 @@
+import type { RcFile } from './interface'
+
+interface InternalDataTransferItem extends DataTransferItem {
+  isFile: boolean
+  file: (cd: (file: RcFile & { webkitRelativePath?: string }) => void) => void
+  createReader: () => any
+  fullPath: string
+  isDirectory: boolean
+  name: string
+  path: string
+}
+
+function loopFiles(item: InternalDataTransferItem, callback) {
+  const dirReader = item.createReader()
+  let fileList = []
+
+  function sequence() {
+    dirReader.readEntries((entries: InternalDataTransferItem[]) => {
+      const entryList = Array.prototype.slice.apply(entries)
+      fileList = fileList.concat(entryList)
+
+      // Check if all the file has been viewed
+      const isFinished = !entryList.length
+
+      if (isFinished) {
+        callback(fileList)
+      } else {
+        sequence()
+      }
+    })
+  }
+
+  sequence()
+}
+
+const traverseFileTree = (files: InternalDataTransferItem[], callback, isAccepted) => {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const _traverseFileTree = (item: InternalDataTransferItem, path?: string) => {
+    item.path = path || ''
+    if (item.isFile) {
+      item.file((file) => {
+        if (isAccepted(file)) {
+          // https://github.com/ant-design/ant-design/issues/16426
+          if (item.fullPath && !file.webkitRelativePath) {
+            Object.defineProperties(file, {
+              webkitRelativePath: {
+                writable: true,
+              },
+            })
+            ;(file as any).webkitRelativePath = item.fullPath.replace(/^\//, '')
+            Object.defineProperties(file, {
+              webkitRelativePath: {
+                writable: false,
+              },
+            })
+          }
+          callback([file])
+        }
+      })
+    } else if (item.isDirectory) {
+      loopFiles(item, (entries: InternalDataTransferItem[]) => {
+        entries.forEach((entryItem) => {
+          _traverseFileTree(entryItem, `${path}${item.name}/`)
+        })
+      })
+    }
+  }
+  files.forEach((file) => {
+    _traverseFileTree(file.webkitGetAsEntry() as any)
+  })
+}
+
+export default traverseFileTree

package/src/vc-upload/uid.ts

@@ -0,0 +1,6 @@
+const now = +new Date()
+let index = 0
+
+export default function uid() {
+  return `vc-upload-${now}-${++index}`
+}

package/src/vc-util/Children/toArray.ts

@@ -0,0 +1,26 @@
+import type { VNodeTypes } from 'vue'
+
+import { isFragment } from '../../_util/props-util'
+
+export interface Option {
+  keepEmpty?: boolean
+}
+
+export default function toArray(children: any[], option: Option = {}): any[] {
+  let ret: VNodeTypes[] = []
+
+  children.forEach((child: any) => {
+    if ((child === undefined || child === null) && !option.keepEmpty) {
+      return
+    }
+    if (Array.isArray(child)) {
+      ret = ret.concat(toArray(child))
+    } else if (isFragment(child) && child.props) {
+      ret = ret.concat(toArray(child.props.children, option))
+    } else {
+      ret.push(child)
+    }
+  })
+
+  return ret
+}

package/src/vc-util/Dom/addEventListener.js

@@ -0,0 +1,22 @@
+import supportsPassive from '../../_util/supportsPassive'
+
+export default function addEventListenerWrap(target, eventType, cb, option) {
+  if (target && target.addEventListener) {
+    let opt = option
+    if (
+      opt === undefined &&
+      supportsPassive &&
+      (eventType === 'touchstart' || eventType === 'touchmove' || eventType === 'wheel')
+    ) {
+      opt = { passive: false }
+    }
+    target.addEventListener(eventType, cb, opt)
+  }
+  return {
+    remove: () => {
+      if (target && target.removeEventListener) {
+        target.removeEventListener(eventType, cb)
+      }
+    },
+  }
+}

package/src/vc-util/Dom/class.js

@@ -0,0 +1,28 @@
+export function hasClass(node, className) {
+  if (node.classList) {
+    return node.classList.contains(className)
+  }
+  const originClass = node.className
+  return ` ${originClass} `.includes(` ${className} `)
+}
+
+export function addClass(node, className) {
+  if (node.classList) {
+    node.classList.add(className)
+  } else {
+    if (!hasClass(node, className)) {
+      node.className = `${node.className} ${className}`
+    }
+  }
+}
+
+export function removeClass(node, className) {
+  if (node.classList) {
+    node.classList.remove(className)
+  } else {
+    if (hasClass(node, className)) {
+      const originClass = node.className
+      node.className = ` ${originClass} `.replace(` ${className} `, ' ')
+    }
+  }
+}

package/src/vc-util/Dom/contains.ts

@@ -0,0 +1,12 @@
+export default function contains(root: Node | null | undefined, n?: Node) {
+  if (!root) {
+    return false
+  }
+
+  // Use native if support
+  if (root.contains) {
+    return root.contains(n)
+  }
+
+  return false
+}

package/src/vc-util/Dom/css.ts

@@ -0,0 +1,133 @@
+const PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/
+
+const removePixel = {
+  left: true,
+  top: true,
+}
+const floatMap = {
+  cssFloat: 1,
+  styleFloat: 1,
+  float: 1,
+}
+
+function getComputedStyle(node: HTMLElement) {
+  return node.nodeType === 1 ? node.ownerDocument.defaultView.getComputedStyle(node, null) : {}
+}
+
+function getStyleValue(node: HTMLElement, type: string, value: string) {
+  type = type.toLowerCase()
+  if (value === 'auto') {
+    if (type === 'height') {
+      return node.offsetHeight
+    }
+    if (type === 'width') {
+      return node.offsetWidth
+    }
+  }
+  if (!(type in removePixel)) {
+    removePixel[type] = PIXEL_PATTERN.test(type)
+  }
+  return removePixel[type] ? Number.parseFloat(value) || 0 : value
+}
+
+export function get(node: HTMLElement, name: any) {
+  const length = arguments.length
+  const style = getComputedStyle(node)
+
+  name = floatMap[name] ? ('cssFloat' in node.style ? 'cssFloat' : 'styleFloat') : name
+
+  return length === 1 ? style : getStyleValue(node, name, style[name] || node.style[name])
+}
+
+export function set(node: HTMLElement, name: any, value: string | number) {
+  const length = arguments.length
+  name = floatMap[name] ? ('cssFloat' in node.style ? 'cssFloat' : 'styleFloat') : name
+  if (length === 3) {
+    if (typeof value === 'number' && PIXEL_PATTERN.test(name)) {
+      value = `${value}px`
+    }
+    node.style[name as string] = value // Number
+    return value
+  }
+  for (const x in name) {
+    if (name.hasOwnProperty(x)) {
+      set(node, x, name[x])
+    }
+  }
+  return getComputedStyle(node)
+}
+
+export function getOuterWidth(el: HTMLElement) {
+  if (el === document.body) {
+    return document.documentElement.clientWidth
+  }
+  return el.offsetWidth
+}
+
+export function getOuterHeight(el: HTMLElement) {
+  if (el === document.body) {
+    return window.innerHeight || document.documentElement.clientHeight
+  }
+  return el.offsetHeight
+}
+
+export function getDocSize() {
+  const width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth)
+  const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
+
+  return {
+    width,
+    height,
+  }
+}
+
+export function getClientSize() {
+  const width = document.documentElement.clientWidth
+  const height = window.innerHeight || document.documentElement.clientHeight
+  return {
+    width,
+    height,
+  }
+}
+
+export function getScroll() {
+  return {
+    scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
+    scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop),
+  }
+}
+
+export function getOffset(node: any) {
+  const box = node.getBoundingClientRect()
+  const docElem = document.documentElement
+
+  return {
+    left:
+      box.left +
+      (window.scrollX || docElem.scrollLeft) -
+      (docElem.clientLeft || document.body.clientLeft || 0),
+    top:
+      box.top +
+      (window.scrollY || docElem.scrollTop) -
+      (docElem.clientTop || document.body.clientTop || 0),
+  }
+}
+
+export function styleToString(style: CSSStyleDeclaration) {
+  // There are some different behavior between Firefox & Chrome.
+  // We have to handle this ourself.
+  const styleNames = Array.prototype.slice.apply(style)
+  return styleNames.map((name) => `${name}: ${style.getPropertyValue(name)};`).join('')
+}
+
+export function styleObjectToString(style: Record<string, string>) {
+  return Object.keys(style).reduce((acc, name) => {
+    const styleValue = style[name]
+    if (typeof styleValue === 'undefined' || styleValue === null) {
+      return acc
+    }
+
+    acc += `${name}: ${style[name]};`
+    return acc
+  }, '')
+}

package/src/vc-util/Dom/dynamicCSS.ts

@@ -0,0 +1,153 @@
+import canUseDom from '../../_util/canUseDom'
+import contains from './contains'
+
+const APPEND_ORDER = 'data-vc-order'
+const MARK_KEY = `vc-util-key`
+
+const containerCache = new Map<ContainerType, Node & ParentNode>()
+
+export type ContainerType = Element | ShadowRoot
+export type Prepend = boolean | 'queue'
+export type AppendType = 'prependQueue' | 'append' | 'prepend'
+
+interface Options {
+  attachTo?: ContainerType
+  csp?: { nonce?: string }
+  prepend?: Prepend
+  mark?: string
+  priority?: number
+}
+
+function getMark({ mark }: Options = {}) {
+  if (mark) {
+    return mark.startsWith('data-') ? mark : `data-${mark}`
+  }
+  return MARK_KEY
+}
+
+function getContainer(option: Options) {
+  if (option.attachTo) {
+    return option.attachTo
+  }
+
+  const head = document.querySelector('head')
+  return head || document.body
+}
+
+function getOrder(prepend?: Prepend): AppendType {
+  if (prepend === 'queue') {
+    return 'prependQueue'
+  }
+
+  return prepend ? 'prepend' : 'append'
+}
+
+/**
+ * Find style which inject by rc-util
+ */
+function findStyles(container: ContainerType) {
+  return Array.from((containerCache.get(container) || container).children).filter(
+    (node) => node.tagName === 'STYLE',
+  ) as HTMLStyleElement[]
+}
+
+export function injectCSS(css: string, option: Options = {}) {
+  if (!canUseDom()) {
+    return null
+  }
+
+  const { csp, prepend } = option
+
+  const styleNode = document.createElement('style')
+  styleNode.setAttribute(APPEND_ORDER, getOrder(prepend))
+
+  if (csp?.nonce) {
+    styleNode.nonce = csp?.nonce
+  }
+  styleNode.innerHTML = css
+
+  const container = getContainer(option)
+  const { firstChild } = container
+
+  if (prepend) {
+    // If is queue `prepend`, it will prepend first style and then append rest style
+    if (prepend === 'queue') {
+      const existStyle = findStyles(container).filter((node) =>
+        ['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER)),
+      )
+      if (existStyle.length) {
+        container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling)
+
+        return styleNode
+      }
+    }
+
+    // Use `insertBefore` as `prepend`
+    container.insertBefore(styleNode, firstChild)
+  } else {
+    container.appendChild(styleNode)
+  }
+
+  return styleNode
+}
+
+function findExistNode(key: string, option: Options = {}) {
+  const container = getContainer(option)
+
+  return findStyles(container).find((node) => node.getAttribute(getMark(option)) === key)
+}
+
+export function removeCSS(key: string, option: Options = {}) {
+  const existNode = findExistNode(key, option)
+  if (existNode) {
+    const container = getContainer(option)
+    container.removeChild(existNode)
+  }
+}
+
+/**
+ * qiankun will inject `appendChild` to insert into other
+ */
+function syncRealContainer(container: ContainerType, option: Options) {
+  const cachedRealContainer = containerCache.get(container)
+
+  // Find real container when not cached or cached container removed
+  if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
+    const placeholderStyle = injectCSS('', option)
+    const { parentNode } = placeholderStyle
+    containerCache.set(container, parentNode)
+    container.removeChild(placeholderStyle)
+  }
+}
+
+/**
+ * manually clear container cache to avoid global cache in unit testes
+ */
+export function clearContainerCache() {
+  containerCache.clear()
+}
+
+export function updateCSS(css: string, key: string, option: Options = {}) {
+  const container = getContainer(option)
+
+  // Sync real parent
+  syncRealContainer(container, option)
+
+  const existNode = findExistNode(key, option)
+
+  if (existNode) {
+    if (option.csp?.nonce && existNode.nonce !== option.csp?.nonce) {
+      existNode.nonce = option.csp?.nonce
+    }
+
+    if (existNode.innerHTML !== css) {
+      existNode.innerHTML = css
+    }
+
+    return existNode
+  }
+
+  const newNode = injectCSS(css, option)
+  newNode.setAttribute(getMark(option), key)
+  return newNode
+}

package/src/vc-util/Dom/isVisible.ts

@@ -0,0 +1,25 @@
+export default (element: HTMLElement | SVGGraphicsElement): boolean => {
+  if (!element) {
+    return false
+  }
+
+  if ((element as HTMLElement).offsetParent) {
+    return true
+  }
+
+  if ((element as SVGGraphicsElement).getBBox) {
+    const box = (element as SVGGraphicsElement).getBBox()
+    if (box.width || box.height) {
+      return true
+    }
+  }
+
+  if ((element as HTMLElement).getBoundingClientRect) {
+    const box = (element as HTMLElement).getBoundingClientRect()
+    if (box.width || box.height) {
+      return true
+    }
+  }
+
+  return false
+}