antd-solid 0.0.8 → 0.0.9

package/src/Tooltip.tsx

@@ -0,0 +1,340 @@
+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 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

@@ -0,0 +1,246 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,94 @@
+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