antd-solid 0.0.12 → 0.0.13

package/src/Tree.tsx

@@ -1,247 +0,0 @@
-import { isEmpty } from 'lodash-es'
-import {
-  type Accessor,
-  createContext,
-  createSignal,
-  Index,
-  type JSXElement,
-  type Setter,
-  Show,
-  untrack,
-  useContext,
-  createSelector,
-} from 'solid-js'
-import cs from 'classnames'
-
-export interface TreeProps<T extends {} = {}> {
-  class?: string
-  defaultSelectedNodes?: T[]
-  treeData?: T[]
-  /**
-   * 是否节点占据一行
-   */
-  blockNode?: boolean
-  defaultExpandAll?: boolean
-  /**
-   * 设置节点可拖拽
-   */
-  draggable?: boolean
-  titleRender: (
-    node: T,
-    info: {
-      indexes: number[]
-    },
-  ) => JSXElement
-  children: (node: T) => T[] | undefined
-  onSelect?: (node: T) => void
-  onDrop?: (info: {
-    dragNode: T
-    targetNode: T
-    dragIndexes: number[]
-    targetIndexes: number[]
-  }) => void
-}
-
-interface SingleLevelTreeProps<T extends {} = {}> extends Omit<TreeProps<T>, 'class'> {
-  indent: number
-  parentIndexes?: number[]
-}
-
-const TreeContext = createContext(
-  {} as unknown as {
-    selectedNodes: Accessor<Array<{}>>
-    setSelectedNodes: Setter<Array<{}>>
-    draggableNode: Accessor<{} | null>
-    setDraggableNode: Setter<{} | null>
-    draggableIndexes: Accessor<number[] | null>
-    setDraggableIndexes: Setter<number[] | null>
-    isDraggable: (key: {} | null) => boolean
-    targetNode: Accessor<{} | null>
-    setTargetNode: Setter<{} | null>
-    targetIndexes: Accessor<number[] | null>
-    setTargetIndexes: Setter<number[] | null>
-    isTarget: (key: {} | null) => boolean
-    draggable: TreeProps['draggable'] | undefined
-    onDrop: TreeProps['onDrop'] | undefined
-  },
-)
-
-/**
- * 单层级 tree
- */
-function SingleLevelTree<T extends {} = {}>(props: SingleLevelTreeProps<T>) {
-  const [expanded, setExpanded] = createSignal(props.defaultExpandAll)
-  const {
-    selectedNodes,
-    setSelectedNodes,
-    draggableNode,
-    setDraggableNode,
-    draggableIndexes,
-    setDraggableIndexes,
-    isDraggable,
-    targetNode,
-    setTargetNode,
-    targetIndexes,
-    setTargetIndexes,
-    isTarget,
-    draggable,
-    onDrop,
-  } = useContext(TreeContext)
-
-  return (
-    <Index each={props.treeData}>
-      {(item, i) => {
-        const indexes = [...(props.parentIndexes ?? []), i]
-
-        return (
-          <>
-            <div
-              class={cs(
-                'ant-flex ant-items-center ant-h-28px ant-pb-4px',
-                isDraggable(item()) &&
-                  'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-white',
-                draggableNode() && 'child[]:ant-pointer-events-none',
-              )}
-              draggable={draggable}
-              onDragStart={() => {
-                setDraggableNode(item() as {})
-                setDraggableIndexes(indexes)
-              }}
-              onDragEnter={() => {
-                if (item() !== draggableNode()) {
-                  setTargetNode(item() as {})
-                  setTargetIndexes(indexes)
-                }
-              }}
-              onDragLeave={e => {
-                if (item() === targetNode() && e.relatedTarget) {
-                  setTargetNode(null)
-                  setTargetIndexes(null)
-                }
-              }}
-              onDragEnd={() => {
-                onDrop?.({
-                  dragNode: draggableNode()!,
-                  dragIndexes: draggableIndexes()!,
-                  targetNode: targetNode()!,
-                  targetIndexes: targetIndexes()!,
-                })
-
-                setDraggableNode(null)
-                setDraggableIndexes(null)
-                setTargetNode(null)
-                setTargetIndexes(null)
-              }}
-            >
-              <div class="flex-shrink-0" role={'indent' as any}>
-                {/* eslint-disable-next-line solid/prefer-for */}
-                {Array(props.indent)
-                  .fill(0)
-                  .map(() => (
-                    <span class="ant-inline-block ant-w-24px" />
-                  ))}
-              </div>
-              <div class="ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center">
-                <span class="i-ant-design:holder-outlined" />
-              </div>
-              <div
-                class={cs(
-                  'ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center ant-cursor-pointer',
-                  isEmpty(props.children(item())) && 'opacity-0',
-                )}
-              >
-                <Show
-                  when={expanded()}
-                  fallback={
-                    <span
-                      class={'i-ant-design:plus-square-outlined'}
-                      onClick={[setExpanded, true]}
-                    />
-                  }
-                >
-                  <span
-                    class={'i-ant-design:minus-square-outlined'}
-                    onClick={[setExpanded, false]}
-                  />
-                </Show>
-              </div>
-              <div
-                class={cs(
-                  'ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative',
-                  props.blockNode && 'w-full',
-                  selectedNodes()?.includes(item()) && '!ant-bg-[var(--ant-tree-node-selected-bg)]',
-                  isTarget(item()) &&
-                    "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--ant-color-primary)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--ant-color-primary)]",
-                )}
-                onClick={() => {
-                  setSelectedNodes([item()])
-                  props.onSelect?.(item())
-                }}
-              >
-                {props.titleRender(item(), { indexes })}
-              </div>
-            </div>
-
-            <Show when={expanded() && !isEmpty(props.children(item()))}>
-              <SingleLevelTree
-                treeData={props.children(item())}
-                indent={props.indent + 1}
-                parentIndexes={indexes}
-                blockNode={props.blockNode}
-                defaultExpandAll={props.defaultExpandAll}
-                titleRender={props.titleRender}
-                children={props.children}
-                onSelect={node => untrack(() => props.onSelect?.(node))}
-              />
-            </Show>
-          </>
-        )
-      }}
-    </Index>
-  )
-}
-
-function Tree<T extends {} = {}>(props: TreeProps<T>) {
-  const [selectedNodes, setSelectedNodes] = createSignal<T[]>(props.defaultSelectedNodes ?? [])
-
-  const [draggableNode, setDraggableNode] = createSignal<T | null>(null)
-  const isDraggable = createSelector<T | null, T | null>(draggableNode)
-  const [draggableIndexes, setDraggableIndexes] = createSignal<number[] | null>(null)
-
-  const [targetNode, setTargetNode] = createSignal<T | null>(null)
-  const isTarget = createSelector<T | null, T | null>(targetNode)
-  const [targetIndexes, setTargetIndexes] = createSignal<number[] | null>(null)
-
-  return (
-    <TreeContext.Provider
-      value={{
-        selectedNodes,
-        setSelectedNodes: setSelectedNodes as unknown as Setter<Array<{}>>,
-        draggableNode,
-        setDraggableNode: setDraggableNode as unknown as Setter<{} | null>,
-        draggableIndexes,
-        setDraggableIndexes,
-        isDraggable,
-        targetNode,
-        setTargetNode: setTargetNode as unknown as Setter<{} | null>,
-        targetIndexes,
-        setTargetIndexes,
-        isTarget,
-        draggable: props.draggable,
-        onDrop: props.onDrop,
-      }}
-    >
-      <SingleLevelTree
-        treeData={props.treeData}
-        indent={0}
-        blockNode={props.blockNode}
-        defaultExpandAll={props.defaultExpandAll}
-        titleRender={props.titleRender}
-        children={props.children}
-        onSelect={node => untrack(() => props.onSelect?.(node))}
-      />
-    </TreeContext.Provider>
-  )
-}
-
-export default Tree

package/src/Upload.tsx

@@ -1,143 +0,0 @@
-import { nanoid } from 'nanoid'
-import { type Component, mergeProps, type ParentProps, createSignal, type Signal } from 'solid-js'
-
-interface UploadProgressEvent extends Partial<ProgressEvent> {
-  percent?: number
-}
-
-export interface UploadRequestOption<T = any> {
-  file: File
-  onProgress?: (event: UploadProgressEvent) => void
-  onError?: (event: Error) => void
-  onSuccess?: (body: T) => void
-}
-
-export interface UploadFile<T = any> {
-  /**
-   * 文件唯一标识
-   */
-  id: string
-  /**
-   * 文件名
-   */
-  name: string
-  /**
-   * MIME 类型
-   */
-  type?: string
-  /**
-   * 文件大小
-   */
-  size?: number
-  file?: File
-  response?: T
-  status?: 'pending' | 'uploading' | 'error' | 'finished'
-  percent?: number
-  /**
-   * 下载地址
-   */
-  url?: string
-}
-
-export interface UploadProps<T = any> extends ParentProps {
-  class?: string
-  accept?: string
-  /**
-   * 上传的地址
-   */
-  action?: string
-  /**
-   * 上传请求的 http method
-   * 默认 'post'
-   */
-  method?: string
-  customRequest?: (option: UploadRequestOption<T>) => void
-  onAdd?: (fileList: Array<Signal<T>>) => void
-  multiple?: boolean
-}
-
-function request(file: File, customRequest: UploadProps['customRequest']) {
-  const id = `upload-${nanoid()}`
-  // eslint-disable-next-line solid/reactivity
-  const uploadFileSignal = createSignal<UploadFile>({
-    id,
-    file,
-    name: file.name,
-    type: file.type,
-    size: file.size,
-    status: 'pending',
-    percent: 0,
-  })
-
-  const [, setUploadFile] = uploadFileSignal
-
-  customRequest?.({
-    file,
-    onProgress(event) {
-      setUploadFile(value => ({
-        ...value,
-        status: 'uploading',
-        percent: event.percent ?? 0,
-      }))
-    },
-    onSuccess(response) {
-      setUploadFile(value => ({ ...value, status: 'finished', response }))
-    },
-    onError() {
-      setUploadFile(value => ({ ...value, status: 'error' }))
-    },
-  })
-
-  return uploadFileSignal
-}
-
-const Upload: Component<UploadProps> & {
-  request: typeof request
-} = _props => {
-  let input: HTMLInputElement | undefined
-  const props = mergeProps(
-    {
-      customRequest: ({ file, onSuccess, onError }) => {
-        if (!_props.action) return
-
-        const formData = new FormData()
-        formData.append('file', file)
-        fetch(_props.action, {
-          method: _props.method ?? 'post',
-          body: formData,
-        })
-          .then(onSuccess)
-          .catch(onError)
-      },
-    } as UploadProps,
-    _props,
-  )
-
-  return (
-    <span class={props.class} onClick={() => input?.click()}>
-      {props.children}
-
-      <input
-        ref={input}
-        class="hidden"
-        type="file"
-        accept={props.accept}
-        multiple={props.multiple}
-        onInput={e => {
-          const fileList: Array<Signal<UploadFile>> = []
-          for (const file of e.target.files ?? []) {
-            const uploadFileSignal = request(file, props.customRequest)
-            fileList.push(uploadFileSignal)
-          }
-
-          props.onAdd?.(fileList)
-          e.target.value = ''
-        }}
-      />
-    </span>
-  )
-}
-
-Upload.request = request
-
-export default Upload

package/src/hooks/createControllableValue.ts

@@ -1,68 +0,0 @@
-import { type Signal, createSignal } from 'solid-js'
-import createUpdateEffect from './createUpdateEffect'
-
-export interface Options<T> {
-  defaultValue?: T
-  defaultValuePropName?: string
-  valuePropName?: string
-  trigger?: string | null
-}
-
-export type Props = Record<string, any>
-
-export interface StandardProps<T> {
-  value: T
-  defaultValue?: T
-  onChange: (val: T) => void
-}
-
-function createControllableValue<T = any>(props: StandardProps<T>): Signal<T>
-function createControllableValue<T = any>(props: Props, options?: Options<T>): Signal<T>
-function createControllableValue<T = any>(props: Props, options: Options<T> = {}) {
-  const {
-    defaultValuePropName = 'defaultValue',
-    valuePropName = 'value',
-    trigger = 'onChange',
-  } = options
-
-  const getValue = () => props[valuePropName] as T
-  // 为什么不使用 Object.hasOwn？
-  // solid 的 proxy 对象对于任何 key，都会返回 true
-  const isControlled = () => Object.keys(props).includes(valuePropName)
-
-  let defaultValue = options.defaultValue
-  if (isControlled()) {
-    defaultValue = getValue()
-  } else if (Object.keys(props).includes(defaultValuePropName)) {
-    defaultValue = props[defaultValuePropName]
-  }
-
-  const [value, _setValue] = createSignal(defaultValue)
-
-  createUpdateEffect(getValue, () => {
-    if (!isControlled()) return
-
-    _setValue(getValue() as any)
-  })
-
-  const setValue = (v: ((prev: T) => T) | T | undefined) => {
-    const newValue = typeof v === 'function' ? (v as (prev: T) => T)(value()!) : v
-
-    if (!isControlled()) {
-      _setValue(newValue as any)
-    }
-
-    if (trigger) {
-      const onChange = props[trigger]
-      if (typeof onChange === 'function') {
-        onChange(newValue)
-      }
-    }
-
-    return newValue
-  }
-
-  return [value, setValue] as Signal<T>
-}
-
-export default createControllableValue

package/src/hooks/createTransition.ts

@@ -1,52 +0,0 @@
-import { createEffect, type Accessor, on } from 'solid-js'
-
-/**
- * dom 节点显示或隐藏时的动画
- * @param target
- * @param when
- * @param className 动画类名
- */
-export default function createTransition(
-  target: Accessor<HTMLElement | undefined | null>,
-  when: Accessor<boolean>,
-  className: string,
-) {
-  createEffect(
-    on(when, input => {
-      const targetValue = target()
-      if (!targetValue) return
-
-      if (input) {
-        targetValue.style.display = ''
-        targetValue.classList.add(
-          `${className}-enter-active`,
-          `${className}-enter`,
-          `${className}-enter-to`,
-        )
-        requestAnimationFrame(() => {
-          targetValue!.classList.remove(`${className}-enter`)
-        })
-        const onTransitionEnd = () => {
-          targetValue!.classList.remove(`${className}-enter-active`, `${className}-enter-to`)
-          targetValue!.removeEventListener('transitionend', onTransitionEnd)
-        }
-        targetValue.addEventListener('transitionend', onTransitionEnd)
-      } else {
-        targetValue.classList.add(
-          `${className}-exit-active`,
-          `${className}-exit`,
-          `${className}-exit-to`,
-        )
-        requestAnimationFrame(() => {
-          targetValue!.classList.remove(`${className}-exit`)
-        })
-        const onTransitionEnd = () => {
-          targetValue!.style.display = 'none'
-          targetValue!.classList.remove(`${className}-exit-active`, `${className}-exit-to`)
-          targetValue!.removeEventListener('transitionend', onTransitionEnd)
-        }
-        targetValue.addEventListener('transitionend', onTransitionEnd)
-      }
-    }),
-  )
-}

package/src/hooks/createUpdateEffect.ts

@@ -1,16 +0,0 @@
-import { createEffect, on } from 'solid-js'
-import type { Accessor, AccessorArray, NoInfer, OnEffectFunction } from 'solid-js'
-
-/**
- * 等同于 createEffect，但是会忽略首次执行，只在依赖更新时执行。
- */
-export default function createUpdateEffect<S, Next extends Prev, Prev = Next>(
-  deps: AccessorArray<S> | Accessor<S>,
-  fn: OnEffectFunction<S, undefined | NoInfer<Prev>, Next>,
-) {
-  createEffect(
-    on(deps, fn, {
-      defer: true,
-    }),
-  )
-}

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export { default as useClickAway } from './useClickAway'
-export { default as useSize } from './useSize'

package/src/hooks/useClickAway.ts

@@ -1,18 +0,0 @@
-import { type Accessor, onCleanup } from 'solid-js'
-import { toArray } from '../utils/array'
-
-export default function useClickAway<T extends Event = Event>(
-  onClickAway: (event: T) => void,
-  target?: Accessor<Element | Element[]>,
-) {
-  const onClick = (event: Event) => {
-    const targets = target ? toArray(target()) : []
-    if (targets.every(item => !item.contains(event.target as Node))) {
-      onClickAway(event as T)
-    }
-  }
-  document.body.addEventListener('click', onClick)
-  onCleanup(() => {
-    document.body.removeEventListener('click', onClick)
-  })
-}

package/src/hooks/useSize.ts

@@ -1,26 +0,0 @@
-import { Accessor, createSignal, onCleanup, onMount } from 'solid-js'
-
-function getTarget(target: Element | Accessor<Element>) {
-  return target instanceof Element ? target : target()
-}
-
-export default function useSize(target: Element | Accessor<Element>) {
-  const [size, setSize] = createSignal<{
-    width: number
-    height: number
-  }>()
-
-  onMount(() => {
-    const _target = getTarget(target)
-    const ro = new ResizeObserver(() => {
-      setSize({
-        width: _target.clientWidth,
-        height: _target.clientHeight,
-      })
-    })
-    ro.observe(_target)
-    onCleanup(() => ro.disconnect())
-  })
-
-  return size
-}

package/src/index.ts

@@ -1,47 +0,0 @@
-export { default as Button } from './Button'
-export { default as Input } from './Input'
-export type { InputProps } from './Input'
-export { default as InputNumber } from './InputNumber'
-export type { InputNumberProps } from './InputNumber'
-export { default as Timeline } from './Timeline'
-export { default as Modal } from './Modal'
-export type { ModalInstance } from './Modal'
-export { default as Drawer } from './Drawer'
-export type { DrawerProps, DrawerInstance } from './Drawer'
-export { default as DatePicker } from './DatePicker'
-export { default as Select } from './Select'
-export { default as Tree } from './Tree'
-export type { TreeProps } from './Tree'
-export { default as Popover } from './Popover'
-export { default as Tooltip } from './Tooltip'
-export { default as ColorPicker } from './ColorPicker'
-export type { ColorPickerProps } from './ColorPicker'
-export { default as Result } from './Result'
-export { default as Progress } from './Progress'
-export type { ProgressProps } from './Progress'
-export { default as Tabs } from './Tabs'
-export type { TabsProps, Tab } from './Tabs'
-export { default as Popconfirm } from './Popconfirm'
-export { default as Upload } from './Upload'
-export type { UploadProps, UploadFile } from './Upload'
-export { default as Radio } from './Radio'
-export type { RadioProps, RadioGroupProps } from './Radio'
-export { default as Form } from './Form'
-export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './Form'
-export { default as Switch } from './Switch'
-export type { SwitchProps } from './Switch'
-export { default as Skeleton } from './Skeleton'
-export { default as Spin } from './Spin'
-export { default as Image } from './Image'
-export { default as Table } from './Table'
-export type { TableProps, TableColumn } from './Table'
-export { default as Compact } from './Compact'
-export type { CollapseProps, CollapseItem } from './Collapse'
-export { default as Collapse } from './Collapse'
-export { default as Empty } from './Empty'
-export type { SegmentedProps } from './Segmented'
-export { default as Segmented } from './Segmented'
-
-export { default as createControllableValue } from './hooks/createControllableValue'
-
-export { message } from 'antd'

package/src/types/index.ts

@@ -1,5 +0,0 @@
-import { type JSXElement } from 'solid-js'
-
-export type Key = string | number
-
-export type StringOrJSXElement = string | number | undefined | null | (() => JSXElement)

package/src/utils/EventEmitter.ts

@@ -1,15 +0,0 @@
-type Subscription<T> = (val: T) => void
-
-export default class EventEmitter<T> {
-  private readonly subscriptions = new Set<Subscription<T>>()
-
-  emit = (val: T) => {
-    for (const subscription of this.subscriptions) {
-      subscription(val)
-    }
-  }
-
-  subscription = (callback: Subscription<T>) => {
-    this.subscriptions.add(callback)
-  }
-}

package/src/utils/ReactToSolid.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-// import { renderToString } from 'react-dom/server'
-import { onMount, onCleanup, createEffect, createMemo } from 'solid-js'
-
-interface ReactToSolidProps<P extends {} = {}> {
-  component: React.FunctionComponent<P> | React.ComponentClass<P>
-  props: P
-  container?: Element
-}
-
-function ReactToSolid<P extends {} = {}>(props: ReactToSolidProps<P>) {
-  let root: Root
-
-  const rootEle = createMemo(
-    () => props.container ?? ((<div role={'ReactToSolid' as any} />) as Element),
-  )
-  onMount(() => {
-    root = createRoot(rootEle())
-    onCleanup(() => {
-      root.unmount()
-    })
-  })
-
-  createEffect(() => {
-    root.render(React.createElement(props.component, { ...props.props }))
-  })
-
-  // if (import.meta.env.SSR) {
-  //   // eslint-disable-next-line solid/reactivity
-  //   const node = React.createElement(props.component, { ...props.props })
-  //   // eslint-disable-next-line solid/components-return-once, solid/no-innerhtml
-  //   return <div innerHTML={renderToString(node)} />
-  // }
-  return <>{rootEle}</>
-}
-
-export default ReactToSolid