antd-solid 0.0.8 → 0.0.9

package/src/form/FormItem.tsx

@@ -0,0 +1,139 @@
+import {
+  type JSXElement,
+  type Component,
+  type JSX,
+  Show,
+  useContext,
+  createSignal,
+  onMount,
+  onCleanup,
+} from 'solid-js'
+import { get, isNil } from 'lodash-es'
+import { Dynamic } from 'solid-js/web'
+import { nanoid } from 'nanoid'
+import cs from 'classnames'
+import { type Schema } from 'yup'
+import Context from './context'
+
+export interface FormItemComponentProps<T = any> {
+  defaultValue?: T
+  status?: 'error' | 'warning'
+  onChange?: (value: T) => void
+}
+
+export interface FormItemProps {
+  class?: string
+  style?: JSX.CSSProperties
+  required?: boolean
+  label?: JSXElement
+  name?: string
+  initialValue?: any
+  rules?: Schema[]
+  component: Component<FormItemComponentProps>
+}
+
+const FormItem: Component<FormItemProps> = props => {
+  const { formInstance, rulesDict, setErrMsgDict, initialValues, setItemWidthDict, maxItemWidth } =
+    useContext(Context)
+  const [errMsg, setErrMsg] = createSignal('')
+  const id = nanoid()
+
+  onMount(() => {
+    if (isNil(props.name)) return
+
+    if (!isNil(props.initialValue)) {
+      formInstance.setFieldValue(props.name, props.initialValue)
+    }
+
+    if (!isNil(props.rules)) {
+      rulesDict[props.name] = props.rules
+    }
+
+    setErrMsgDict[props.name] = setErrMsg
+  })
+
+  let label: HTMLLabelElement
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries
+      // Firefox implements `borderBoxSize` as a single content rect, rather than an array
+      const borderBoxSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)
+        ? entry.borderBoxSize[0]
+        : entry.borderBoxSize
+      setItemWidthDict(dict => ({
+        ...dict,
+        [id]: borderBoxSize.inlineSize,
+      }))
+    })
+
+    resizeObserver.observe(label)
+    
+    onCleanup(() => {
+      setItemWidthDict(dict => {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete dict[id]
+        return { ...dict }
+      })
+      resizeObserver.disconnect()
+    })
+  })
+
+  const getLabel = (hidden?: boolean) => (
+    <label
+      class={cs(
+        'ant-shrink-0 ant-h-32px ant-leading-32px not[:empty]:ant-pr-8px ant-text-right ant-[white-space:nowrap]',
+        hidden && 'ant-absolute ant-opacity-0',
+      )}
+      {...hidden ? {
+        ref: (el) => {
+          label = el
+        }
+      }: {
+        style: { width: `${maxItemWidth() ?? 0}px` }
+      }}
+    >
+      <Show when={!isNil(props.required)}>
+        <span class="ant-mr-4px ant-text-[var(--ant-color-error)]">*</span>
+      </Show>
+      <Show when={!isNil(props.label)}>
+        <label>{props.label}</label>
+      </Show>
+    </label>
+  )
+
+  return (
+    <div class={cs(props.class, 'ant-flex ant-items-center ant-mb-16px')} style={props.style}>
+      {/* 第一个 label 仅用于计算实际宽度 */}
+      {getLabel(true)}
+      {getLabel()}
+
+      <div class="ant-w-full">
+        <Dynamic
+          component={props.component}
+          defaultValue={props.initialValue ?? get(initialValues, props.name!)}
+          status={errMsg() ? 'error' : undefined}
+          onChange={(value: any) => {
+            if (!isNil(props.name)) formInstance.setFieldValue(props.name, value)
+
+            props.rules?.forEach(rule => {
+              rule
+                .validate(value)
+                .then(() => {
+                  setErrMsg('')
+                })
+                .catch(err => {
+                  setErrMsg(err.message)
+                })
+            })
+          }}
+        />
+
+        <Show when={errMsg()}>
+          <div class="ant-text-[var(--ant-color-error)]">{errMsg()}</div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default FormItem

package/src/form/context.ts

@@ -0,0 +1,16 @@
+import { type Setter, createContext, type Accessor } from 'solid-js'
+import { type FormInstance } from './Form'
+import { type Schema } from 'yup'
+
+const Context = createContext(
+  {} as {
+    formInstance: FormInstance
+    rulesDict: Record<string, Schema[]>
+    setErrMsgDict: Record<string, Setter<string>>
+    initialValues: {}
+    setItemWidthDict: Setter<Record<string, number>>
+    maxItemWidth: Accessor<number | undefined>
+  },
+)
+
+export default Context

package/src/form/index.ts

@@ -0,0 +1,13 @@
+import InternalForm from './Form'
+import FormItem from './FormItem'
+
+export type { FormInstance, FormProps } from './Form'
+export type { FormItemProps, FormItemComponentProps } from './FormItem'
+
+const Form = InternalForm as typeof InternalForm & {
+  Item: typeof FormItem
+}
+
+Form.Item = FormItem
+
+export default Form

package/src/hooks/createControllableValue.ts

@@ -0,0 +1,68 @@
+import { type 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
+
+    _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/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.ts

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

@@ -0,0 +1,5 @@
+import { type JSXElement } from 'solid-js'
+
+export type Key = string | number
+
+export type StringOrJSXElement = string | number | undefined | null | (() => JSXElement)

package/src/utils/EventEmitter.ts

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

@@ -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 './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,53 @@
+import React from 'react'
+import { type JSXElement, type JSX } from 'solid-js'
+import { isNil } from 'lodash-es'
+import SolidToReact from './SolidToReact'
+import { type StringOrJSXElement } from '../types'
+
+/**
+ * 判断 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)
+}
+
+export function unwrapStringOrJSXElement(value: StringOrJSXElement): JSXElement {
+  return typeof value === 'function' ? value() : value
+}