antd-solid 0.0.2 → 0.0.4

package/src/Tooltip.tsx

@@ -1,209 +0,0 @@
-import { compact } from 'lodash-es'
-import {
-  type Component,
-  type JSXElement,
-  children,
-  createEffect,
-  Show,
-  mergeProps,
-  onCleanup,
-  createMemo,
-} from 'solid-js'
-import { Portal } from 'solid-js/web'
-import cs from 'classnames'
-import createControllableValue from './hooks/createControllableValue'
-import { useClickAway } from './hooks'
-
-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
-  /**
-   * 默认: top
-   */
-  placement?: TooltipPlacement
-  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,
-    } as TooltipProps,
-    _props,
-  )
-
-  const resolvedChildren = children(() => _props.children)
-  let contentWrap: HTMLDivElement
-  let arrow: HTMLDivElement
-  const [open, setOpen] = createControllableValue(_props, {
-    defaultValue: false,
-    valuePropName: 'open',
-    trigger: 'onOpenChange',
-  })
-  const reverseOpen = () => setOpen(v => !v)
-
-  createEffect(() => {
-    const _children = resolvedChildren() as Element
-    switch (props.trigger) {
-      case 'hover':
-        _children.addEventListener('mouseenter', reverseOpen)
-        onCleanup(() => {
-          _children.removeEventListener('mouseenter', reverseOpen)
-        })
-
-        _children.addEventListener('mouseleave', reverseOpen)
-        onCleanup(() => {
-          _children.removeEventListener('mouseleave', reverseOpen)
-        })
-        break
-      case 'click':
-        _children.addEventListener('click', reverseOpen)
-        onCleanup(() => {
-          _children.removeEventListener('click', reverseOpen)
-        })
-
-        useClickAway(
-          () => setOpen(false),
-          () => compact([contentWrap, _children]),
-        )
-        break
-    }
-  })
-
-  createEffect(() => {
-    if (open()) {
-      const _children = resolvedChildren() as Element
-      const childrenRect = _children.getBoundingClientRect()
-      const pointAtCenter = typeof props.arrow === 'object' ? props.arrow.pointAtCenter : false
-      const arrowOffset = 8
-
-      switch (props.placement) {
-        case 'top':
-          contentWrap.style.top = `${childrenRect.top}px`
-          contentWrap.style.left = `${childrenRect.left + childrenRect.width / 2}px`
-          contentWrap.style.transform = 'translate(-50%, -100%)'
-          break
-        case 'topRight':
-          contentWrap.style.top = `${childrenRect.top}px`
-          contentWrap.style.left = `${childrenRect.right}px`
-          contentWrap.style.transform = 'translate(-100%, -100%)'
-          if (arrow) arrow.style.right = `${arrowOffset}px`
-          break
-        case 'bottom':
-          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
-          contentWrap.style.left = `${childrenRect.left + childrenRect.width / 2}px`
-          contentWrap.style.transform = 'translate(-50%, 0)'
-          break
-        case 'bottomLeft':
-          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
-          contentWrap.style.left = `${childrenRect.left}px`
-          if (arrow) arrow.style.left = `${arrowOffset}px`
-          break
-        case 'bottomRight':
-          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
-          contentWrap.style.left = `${childrenRect.right + (pointAtCenter ? arrowOffset : 0)}px`
-          contentWrap.style.transform = 'translate(-100%, 0)'
-          if (arrow) arrow.style.right = `${arrowOffset}px`
-          break
-      }
-    }
-  })
-
-  const direction = createMemo(() => {
-    if (props.placement?.startsWith('top')) return 'top'
-    if (props.placement?.startsWith('bottom')) return 'bottom'
-    if (props.placement?.startsWith('left')) return 'left'
-    if (props.placement?.startsWith('right')) return 'right'
-  })
-
-  return (
-    <>
-      {resolvedChildren}
-
-      <Show when={open()}>
-        <Portal>
-          {/* Portal 存在缺陷，onClick 依然会沿着 solid 的组件树向上传播，因此需要 stopPropagation */}
-          <div
-            ref={contentWrap!}
-            class={cs(
-              'ant-z-1000 ant-fixed after:ant-content-empty',
-              props.arrow ? '[--padding:8px]' : '[--padding:4px]',
-              direction() === 'top' && 'ant-pb-[var(--padding)]',
-              direction() === 'bottom' && 'ant-pt-[var(--padding)]',
-            )}
-            onClick={e => {
-              e.stopPropagation()
-            }}
-          >
-            <div
-              class={cs(
-                'ant-p-12px ant-rounded-8px 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',
-              )}
-            >
-              <Content content={props.content} close={() => setOpen(false)} />
-            </div>
-            <Show when={props.arrow}>
-              <div
-                ref={arrow!}
-                class={cs(
-                  'ant-w-8px ant-h-8px ant-rotate-45 ant-absolute',
-                  props.mode === 'dark' ? 'ant-bg-[rgba(0,0,0,0.85)]' : 'ant-bg-white',
-                  direction() === 'top' &&
-                    'ant-bottom-0 -ant-translate-x-1/2 -ant-translate-y-1/2 ant-[filter:drop-shadow(3px_2px_2px_rgba(0,0,0,0.08))]',
-                  direction() === 'bottom' &&
-                    'ant-top-0 -ant-translate-x-1/2 ant-translate-y-1/2 ant-[filter:drop-shadow(-3px_-2px_2px_rgba(0,0,0,0.08))]',
-                  (props.placement === 'top' || props.placement === 'bottom') && 'left-1/2',
-                )}
-              />
-            </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 ant-hover:bg-[rgba(0,0,0,.04)] 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,
-        draggableNode,
-        setDraggableNode,
-        draggableIndexes,
-        setDraggableIndexes,
-        isDraggable,
-        targetNode,
-        setTargetNode,
-        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,65 +0,0 @@
-import { Setter, Signal, createSignal } from 'solid-js'
-import createUpdateEffect from './createUpdateEffect'
-
-export interface Options<T> {
-  defaultValue?: T
-  defaultValuePropName?: string
-  valuePropName?: string
-  trigger?: string | undefined
-}
-
-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
-
-    // @ts-expect-error
-    _setValue(getValue())
-  })
-
-  const setValue: Setter<T> = (v => {
-    const newValue = _setValue(v)
-
-    if (trigger) {
-      const onChange = props[trigger]
-      if (typeof onChange === 'function') {
-        onChange(newValue)
-      }
-    }
-
-    return newValue
-  }) as Setter<T>
-
-  return [value, setValue] as Signal<T>
-}
-
-export default createControllableValue

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.css

@@ -1,21 +0,0 @@
-body {
-  --primary-color: #52c41a;
-  --light-primary-color: #95de64;
-  --dark-primary-color: #237804;
-  --active-bg-color: #d9f7be;
-
-  --error-color: #ff4d4f;
-  --warning-color: #faad14;
-
-  --border-color: #d9d9d9;
-  --secondary-border-color: #f0f0f0;
-
-  --light-color: rgba(0, 0, 0, 0.45);
-  --dark-color: rgba(0, 0, 0, 0.88);
-
-  --light-bg-color: #fafafa;
-  
-  --secondary-border-color: #f0f0f0;
-
-  font-size: 14px;
-}

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