antd-solid 0.0.2

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

@@ -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/hooks/createControllableValue.ts

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

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

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

package/src/hooks/useClickAway.ts

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

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

@@ -0,0 +1,21 @@
+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/index.ts

@@ -0,0 +1,37 @@
+import 'uno.css'
+
+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 { 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 { 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 { 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, Column } from './Table'
+
+export { message } from 'antd'

package/src/utils/ReactToSolid.tsx

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

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

@@ -0,0 +1,21 @@
+/**
+ * 如果传入一个非数组字段，则将其转化为数组
+ * @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

@@ -0,0 +1,85 @@
+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 'antd/locale/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),
+    )
+  }
+}

package/src/utils/solid.ts

@@ -0,0 +1,48 @@
+import React from 'react'
+import { type JSXElement , type JSX } from 'solid-js'
+import { isNil } from 'lodash-es'
+import SolidToReact from './SolidToReact'
+
+/**
+ * 判断 JSXElement 是否是基础类型
+ * @param value JSXElement
+ * @returns
+ */
+export function isBaseType(
+  value: JSXElement,
+): value is string | number | boolean | null | undefined {
+  return (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    value === null ||
+    value === undefined
+  )
+}
+
+export function solidToReact(children: JSXElement) {
+  return isBaseType(children)
+    ? children
+    : React.createElement(SolidToReact, {
+      children,
+    })
+}
+
+export function dispatchEventHandlerUnion<T, E extends Event>(
+  handler: JSX.EventHandlerUnion<T, E> | undefined,
+  e: E & {
+    currentTarget: T
+    target: Element
+  },
+) {
+  if (isNil(handler)) {
+    return
+  }
+
+  if (typeof handler === 'function') {
+    handler(e)
+    return
+  }
+
+  handler[0](handler[1], e);
+}