antd-solid 0.0.3 → 0.0.5

package/src/Tooltip.tsx

@@ -1,355 +0,0 @@
-import { compact } from 'lodash-es'
-import {
-  type Component,
-  type JSXElement,
-  type JSX,
-  children,
-  createEffect,
-  Show,
-  mergeProps,
-  onCleanup,
-  createMemo,
-  createSignal,
-} from 'solid-js'
-import { Portal } from 'solid-js/web'
-import cs from 'classnames'
-import createControllableValue from './hooks/createControllableValue'
-import { useClickAway } from './hooks'
-import { toArray } from './utils/array'
-
-type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu'
-type TooltipPlacement =
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'bottom'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'leftTop'
-  | 'leftBottom'
-  | 'rightTop'
-  | 'rightBottom'
-
-export interface TooltipProps {
-  /**
-   * 默认: hover
-   */
-  trigger?: ActionType | ActionType[]
-  /**
-   * 默认: top
-   */
-  placement?: TooltipPlacement
-  contentStyle?: JSX.CSSProperties
-  content?: JSXElement | ((close: () => void) => JSXElement)
-  children?: JSXElement
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  /**
-   * 默认: dark
-   */
-  mode?: 'dark' | 'light'
-  /**
-   * 默认: true
-   */
-  arrow?: boolean | { pointAtCenter: boolean }
-}
-
-export const Content: Component<{
-  content: TooltipProps['content']
-  close: () => void
-}> = props => {
-  return (
-    <Show when={typeof props.content === 'function'} fallback={props.content as JSXElement}>
-      {typeof props.content === 'function' && props.content(props.close)}
-    </Show>
-  )
-}
-
-const Tooltip: Component<TooltipProps> = _props => {
-  const props = mergeProps(
-    {
-      trigger: 'hover',
-      placement: 'top',
-      mode: 'dark',
-      arrow: true,
-    },
-    _props,
-  )
-
-  const resolvedChildren = children(() => _props.children)
-  let content: HTMLDivElement
-  const [open, setOpen] = createControllableValue(_props, {
-    defaultValue: false,
-    valuePropName: 'open',
-    trigger: 'onOpenChange',
-  })
-  const reverseOpen = () => setOpen(v => !v)
-
-  createEffect(() => {
-    const _children = resolvedChildren() as Element
-    toArray(props.trigger).forEach(trigger => {
-      switch (trigger) {
-        case 'hover':
-          _children.addEventListener('mouseenter', reverseOpen)
-          _children.addEventListener('mouseleave', reverseOpen)
-          onCleanup(() => {
-            _children.removeEventListener('mouseenter', reverseOpen)
-            _children.removeEventListener('mouseleave', reverseOpen)
-          })
-          break
-        case 'click':
-          _children.addEventListener('click', reverseOpen)
-          onCleanup(() => {
-            _children.removeEventListener('click', reverseOpen)
-          })
-
-          useClickAway(
-            () => setOpen(false),
-            () => compact([content, _children]),
-          )
-          break
-        case 'focus':
-          _children.addEventListener('focus', reverseOpen)
-          _children.addEventListener('blur', reverseOpen)
-          onCleanup(() => {
-            _children.removeEventListener('focus', reverseOpen)
-            _children.removeEventListener('blur', reverseOpen)
-          })
-          break
-      }
-    })
-  })
-
-  const [childrenRect, setChildrenRect] = createSignal(new DOMRect())
-  createEffect(() => {
-    if (open()) {
-      const _children = resolvedChildren() as Element
-      setChildrenRect(_children.getBoundingClientRect())
-    }
-  })
-
-  const firstDirection = createMemo(() => {
-    if (props.placement.startsWith('bottom')) return 'bottom'
-    if (props.placement.startsWith('left')) return 'left'
-    if (props.placement.startsWith('right')) return 'right'
-    return 'top'
-  })
-
-  const secondDirection = createMemo(() => {
-    if (props.placement.endsWith('Left')) return 'left'
-    if (props.placement.endsWith('Right')) return 'right'
-    if (props.placement.endsWith('Top')) return 'top'
-    if (props.placement.endsWith('Bottom')) return 'bottom'
-    return 'center'
-  })
-
-  const arrowOffset = createMemo(() => (props.arrow ? 8 : 0))
-  const contentPositionStyle = createMemo(() => {
-    switch (props.placement) {
-      case 'top':
-        return {
-          top: `${childrenRect().top - arrowOffset()}px`,
-          left: `${childrenRect().left + childrenRect().width / 2}px`,
-          transform: 'translate(-50%, -100%)',
-        } as JSX.CSSProperties
-      case 'topLeft':
-        return {
-          top: `${childrenRect().top - arrowOffset()}px`,
-          left: `${childrenRect().left}px`,
-          transform: 'translate(0, -100%)',
-        } as JSX.CSSProperties
-      case 'topRight':
-        return {
-          top: `${childrenRect().top - arrowOffset()}px`,
-          left: `${childrenRect().right}px`,
-          transform: 'translate(-100%, -100%)',
-        } as JSX.CSSProperties
-      case 'bottom':
-        return {
-          top: `${childrenRect().bottom + arrowOffset()}px`,
-          left: `${childrenRect().left + childrenRect().width / 2}px`,
-          transform: 'translate(-50%, 0)',
-        } as JSX.CSSProperties
-      case 'bottomLeft':
-        return {
-          top: `${childrenRect().bottom + arrowOffset()}px`,
-          left: `${childrenRect().left}px`,
-        } as JSX.CSSProperties
-      case 'bottomRight':
-        return {
-          top: `${childrenRect().bottom + arrowOffset()}px`,
-          left: `${childrenRect().right}px`,
-          transform: 'translate(-100%, 0)',
-        } as JSX.CSSProperties
-      case 'left':
-        return {
-          top: `${childrenRect().top + childrenRect().height / 2}px`,
-          left: `${childrenRect().left - arrowOffset()}px`,
-          transform: 'translate(-100%, -50%)',
-        } as JSX.CSSProperties
-      case 'leftTop':
-        return {
-          top: `${childrenRect().top}px`,
-          left: `${childrenRect().left - arrowOffset()}px`,
-          transform: 'translate(-100%)',
-        } as JSX.CSSProperties
-      case 'leftBottom':
-        return {
-          top: `${childrenRect().bottom}px`,
-          left: `${childrenRect().left - arrowOffset()}px`,
-          transform: 'translate(-100%, -100%)',
-        } as JSX.CSSProperties
-      case 'right':
-        return {
-          top: `${childrenRect().top + childrenRect().height / 2}px`,
-          left: `${childrenRect().right + arrowOffset()}px`,
-          transform: 'translate(0, -50%)',
-        } as JSX.CSSProperties
-      case 'rightTop':
-        return {
-          top: `${childrenRect().top}px`,
-          left: `${childrenRect().right + arrowOffset()}px`,
-        } as JSX.CSSProperties
-      case 'rightBottom':
-        return {
-          top: `${childrenRect().bottom}px`,
-          left: `${childrenRect().right + arrowOffset()}px`,
-          transform: 'translate(0, -100%)',
-        } as JSX.CSSProperties
-    }
-  })
-  const arrowStyle = createMemo(() => {
-    switch (props.placement) {
-      case 'top':
-        return {
-          'border-top-color': 'var(--color)',
-          top: '100%',
-          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
-          left: '50%',
-          transform: 'translateX(-50%)',
-        } as JSX.CSSProperties
-      case 'topLeft':
-        return {
-          'border-top-color': 'var(--color)',
-          top: '100%',
-          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
-          left: '8px',
-        } as JSX.CSSProperties
-      case 'topRight':
-        return {
-          'border-top-color': 'var(--color)',
-          top: '100%',
-          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
-          right: '8px',
-        } as JSX.CSSProperties
-      case 'bottom':
-        return {
-          'border-bottom-color': 'var(--color)',
-          bottom: '100%',
-          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
-          left: '50%',
-          transform: 'translateX(-50%)',
-        } as JSX.CSSProperties
-      case 'bottomLeft':
-        return {
-          'border-bottom-color': 'var(--color)',
-          bottom: '100%',
-          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
-          left: '8px',
-        } as JSX.CSSProperties
-      case 'bottomRight':
-        return {
-          'border-bottom-color': 'var(--color)',
-          bottom: '100%',
-          filter: 'drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.08))',
-          right: '8px',
-        } as JSX.CSSProperties
-      case 'left':
-        return {
-          'border-left-color': 'var(--color)',
-          top: '50%',
-          right: 0,
-          transform: 'translate(100%, -50%)',
-        } as JSX.CSSProperties
-      case 'leftTop':
-        return {
-          'border-left-color': 'var(--color)',
-          top: '8px',
-          right: 0,
-          transform: 'translate(100%, 0)',
-        } as JSX.CSSProperties
-      case 'leftBottom':
-        return {
-          'border-left-color': 'var(--color)',
-          bottom: '8px',
-          right: 0,
-          transform: 'translate(100%, 0)',
-        } as JSX.CSSProperties
-      case 'right':
-        return {
-          'border-right-color': 'var(--color)',
-          top: '50%',
-          left: 0,
-          transform: 'translate(-100%, -50%)',
-        } as JSX.CSSProperties
-      case 'rightTop':
-        return {
-          'border-right-color': 'var(--color)',
-          top: '8px',
-          left: 0,
-          transform: 'translate(-100%, 0)',
-        } as JSX.CSSProperties
-      case 'rightBottom':
-        return {
-          'border-right-color': 'var(--color)',
-          bottom: '8px',
-          left: 0,
-          transform: 'translate(-100%, 0)',
-        } as JSX.CSSProperties
-    }
-  })
-
-  return (
-    <>
-      {resolvedChildren()}
-
-      <Show when={open()}>
-        <Portal>
-          {/* Portal 存在缺陷，onClick 依然会沿着 solid 的组件树向上传播，因此需要 stopPropagation */}
-          <div
-            ref={content!}
-            class={cs(
-              'ant-z-1000 ant-fixed ant-absolute ant-px-8px ant-py-6px ant-rounded-8px ant-box-content ant-[box-shadow:0_6px_16px_0_rgba(0,0,0,0.08),0_3px_6px_-4px_rgba(0,0,0,0.12),0_9px_28px_8px_rgba(0,0,0,0.05)]',
-              props.mode === 'dark' ? 'ant-bg-[rgba(0,0,0,0.85)] ant-text-white' : 'ant-bg-white',
-            )}
-            style={{
-              ...contentPositionStyle(),
-              ...props.contentStyle,
-            }}
-            onClick={e => {
-              e.stopPropagation()
-            }}
-          >
-            <Content content={props.content} close={() => setOpen(false)} />
-
-            <Show when={props.arrow}>
-              <div
-                class={cs(
-                  'ant-w-8px ant-h-8px ant-absolute ant-border-solid ant-border-4px ant-border-transparent',
-                )}
-                style={{
-                  '--color': props.mode === 'dark' ? 'rgba(0,0,0,0.85)' : 'white',
-                  ...arrowStyle(),
-                }}
-              />
-            </Show>
-          </div>
-        </Portal>
-      </Show>
-    </>
-  )
-}
-
-export default Tooltip

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/form/Form.tsx

@@ -1,94 +0,0 @@
-import {
-  type JSXElement,
-  type Ref,
-  mergeProps,
-  type Setter,
-  onMount,
-  createSignal,
-  createMemo,
-} from 'solid-js'
-import { get, max, set } from 'lodash-es'
-import Context from './context'
-import { type Schema } from 'yup'
-
-export interface FormInstance<T extends {} = {}> {
-  validateFields: () => Promise<T>
-  setFieldValue: (name: Parameters<typeof set>[1], value: any) => void
-}
-
-export interface FormProps<T extends {} = {}> {
-  ref?: Ref<FormInstance<T>>
-  /**
-   * 表单布局
-   * 默认: horizontal
-   */
-  layout?: 'horizontal' | 'vertical' | 'inline'
-  children: JSXElement
-  initialValues?: T
-}
-
-function Form<T extends {} = {}>(_props: FormProps<T>) {
-  const props = mergeProps({ layout: 'horizontal' } as FormProps, _props)
-  const rulesDict: Record<string, Schema[]> = {}
-  const setErrMsgDict: Record<string, Setter<string>> = {}
-
-  const values = props.initialValues ? { ...props.initialValues } : ({} as T)
-  const formInstance: FormInstance<T> = {
-    async validateFields() {
-      const promises = Object.entries(rulesDict).flatMap(([name, rules]) => {
-        return rules.map(
-          async rule =>
-            await rule.validate(get(values, name)).catch(err => {
-              setErrMsgDict[name](err.message)
-              throw err
-            }),
-        )
-      })
-      const results = await Promise.allSettled(promises)
-      if (results.some(result => result.status === 'rejected')) {
-        // eslint-disable-next-line @typescript-eslint/no-throw-literal
-        throw {
-          errorFields: results.filter(res => res.status === 'rejected'),
-          values,
-        }
-      }
-      return values as T
-    },
-    setFieldValue(name, value) {
-      set(values, name, value)
-    },
-  }
-
-  onMount(() => {
-    if (typeof _props.ref === 'function') {
-      _props.ref?.(formInstance)
-    }
-  })
-
-  // 存储 form item 的 dom 节点宽度
-  const [itemWidthDict, setItemWidthDict] = createSignal<Record<string, number>>({})
-  const maxItemWidth = createMemo(() => max(Object.values(itemWidthDict())))
-
-  return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-      }}
-    >
-      <Context.Provider
-        value={{
-          formInstance,
-          rulesDict,
-          setErrMsgDict,
-          initialValues: props.initialValues as {},
-          setItemWidthDict,
-          maxItemWidth,
-        }}
-      >
-        {props.children}
-      </Context.Provider>
-    </form>
-  )
-}
-
-export default Form