antd-solid 0.0.11 → 0.0.13

package/src/Tree.tsx

@@ -1,246 +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(--primary-color)] 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(--active-bg-color)]',
-                  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(--primary-color)] 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(--primary-color)]",
-                )}
-                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,10 +0,0 @@
-import { reactToSolidComponent, replaceChildren, replaceClassName } from './utils/component'
-import { Upload as UploadAntd } from 'antd'
-
-export type { UploadFile } from 'antd/es/upload'
-
-const Upload = replaceChildren(replaceClassName(reactToSolidComponent(UploadAntd)))
-
-export type UploadProps = Parameters<typeof Upload>[0]
-
-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

package/src/utils/SolidToReact.tsx

@@ -1,27 +0,0 @@
-import React, { type FunctionComponent, type ReactElement, useEffect, useRef } from 'react'
-import { type JSX } from 'solid-js'
-import { render } from 'solid-js/web'
-
-export interface SolidToReactProps {
-  children?: JSX.Element
-  container?: ReactElement
-}
-
-const SolidToReact: FunctionComponent<SolidToReactProps> = ({ children, container }) => {
-  const ref = useRef<HTMLDivElement>()
-
-  useEffect(() => render(() => children, ref.current!), [])
-
-  // if (import.meta.env.SSR) {
-  //   return React.createElement('div', {
-  //     dangerouslySetInnerHTML: { __html: renderToString(() => children) },
-  //   })
-  // }
-  return container
-    ? React.cloneElement(container, {
-      ref,
-    })
-    : React.createElement('div', { ref, role: 'SolidToReact' })
-}
-
-export default SolidToReact

package/src/utils/array.ts

@@ -1,21 +0,0 @@
-/**
- * 如果传入一个非数组字段，则将其转化为数组
- * @param value
- * @returns
- */
-export function toArray<T>(value: T | T[]) {
-  return Array.isArray(value) ? value : [value]
-}
-
-export interface StandardNode {
-  children?: this[]
-}
-/**
- * 将数组中每个对象的 children 拍扁后返回
- * @param nodes
- * @returns
- */
-export function flatChildren<T extends StandardNode = StandardNode>(nodes: T[] | undefined): T[] {
-  if (!nodes) return []
-  return nodes.flatMap(node => [node, ...flatChildren(node.children)])
-}

package/src/utils/component.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { type Component, createMemo, type JSXElement } from 'solid-js'
-import { omit } from 'lodash-es'
-import { solidToReact } from './solid'
-import ReactToSolid from './ReactToSolid'
-import { ConfigProvider } from 'antd'
-import zhCN from './zh_CN'
-import { type ConfigProviderProps } from 'antd/es/config-provider'
-
-/**
- * 将组件 props 中的 className 替换为 class
- * @param C
- * @returns
- */
-export function replaceClassName<
-  T extends { className?: string },
-  Target extends Omit<T, 'className'> & { class?: string },
->(C: Component<T>): Component<Target> {
-  return function (_props: Target) {
-    const props = createMemo(() => {
-      return {
-        ...omit(_props, 'class'),
-        className: _props.class,
-      }
-    })
-    return <C {...(props() as unknown as T)} />
-  }
-}
-
-/**
- * 将组件 props 中的 children 替换为 JSXElement
- * @param C
- * @returns
- */
-export function replaceChildren<
-  T extends { children?: React.ReactNode },
-  Target extends Omit<T, 'children'> & { children?: JSXElement },
->(C: Component<T>): Component<Target> {
-  return function (_props: Target) {
-    const props = createMemo(() => {
-      return {
-        ..._props,
-        children: solidToReact(_props.children),
-      }
-    })
-    return <C {...(props() as unknown as T)} />
-  }
-}
-
-export function reactToSolidComponent<P extends {} = {}>(
-  component: React.FunctionComponent<P> | React.ComponentClass<P>,
-  container?: Element | (() => Element),
-) {
-  return function (props: P) {
-    return (
-      <ReactToSolid
-        component={component}
-        props={props}
-        container={typeof container === 'function' ? container() : container}
-      />
-    )
-  }
-}
-
-/**
- * 返回被 ConfigProvider 包裹后的 component
- * @param component
- * @param configProviderProps
- * @returns
- */
-export function configProvider<P extends {} = {}>(
-  component: React.FunctionComponent<P> | React.ComponentClass<P>,
-  configProviderProps?: ConfigProviderProps,
-) {
-  return function (props: P) {
-    return React.createElement(
-      ConfigProvider,
-      {
-        locale: zhCN,
-        ...configProviderProps,
-      },
-      React.createElement(component, props),
-    )
-  }
-}