antd-solid 0.0.2

package/src/Form.tsx

@@ -0,0 +1,98 @@
+import { set } from 'lodash-es'
+import {
+  type JSXElement,
+  type Component,
+  type JSX,
+  mergeProps,
+  Show,
+  Index,
+  createMemo,
+} from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { toArray } from './utils/array'
+import cs from 'classnames'
+
+export interface FormInstance<T extends {} = {}> {
+  validateFields: () => Promise<T>
+}
+
+export interface FormProps<T extends {} = {}> {
+  ref?: (form: FormInstance<T>) => void;
+  /**
+   * 表单布局
+   * 默认: horizontal
+   */
+  layout?: 'horizontal' | 'vertical' | 'inline'
+  /**
+   * 提交按钮
+   * @deprecated
+   */
+  submit?: (form: FormInstance<T>) => JSXElement
+  children: JSXElement
+}
+
+export interface FormItemComponentProps<T = any> {
+  defaultValue?: T
+  onChange?: (value: T) => void
+}
+
+export interface FormItemProps {
+  class?: string
+  style?: JSX.CSSProperties
+  required?: boolean
+  label?: JSXElement
+  name?: string
+  initialValue?: any
+  component: Component<FormItemComponentProps>
+}
+
+function Form<T extends {} = {}>(_props: FormProps<T>) {
+  const props = mergeProps({ layout: 'horizontal' } as FormProps, _props)
+
+  const resolvedChildren = createMemo(() => {
+    return toArray(props.children) as unknown as FormItemProps[]
+  })
+
+  const values = Object.fromEntries(
+    resolvedChildren().map(child => [child.name, child.initialValue]),
+  ) as T
+  const formInstance: FormInstance<T> = {
+    async validateFields() {
+      return await Promise.resolve(values)
+    },
+  }
+  _props.ref?.(formInstance)
+
+  return (
+    <div>
+      <Index each={resolvedChildren()}>
+        {item => (
+          <div class={cs('ant-flex ant-items-center ant-mb-16px', item().class)} style={item().style}>
+            <span class="ant-flex-shrink-0 ant-mr-8px">
+              <Show when={item().required}>
+                <span class='ant-mr-4px ant-text-[var(--error-color)]'>*</span>
+              </Show>
+              <label>{item().label}</label>
+            </span>
+
+            <Dynamic
+              component={item().component}
+              defaultValue={item().initialValue}
+              onChange={(value: any) => {
+                set(values, item().name!, value)
+              }}
+            />
+          </div>
+        )}
+      </Index>
+
+      {props.submit?.(formInstance as FormInstance<T>)}
+    </div>
+  )
+}
+
+Form.Item = (props: FormItemProps) => props as any
+
+Form.createForm = () => {}
+
+export default Form

package/src/Image.tsx

@@ -0,0 +1,29 @@
+import { Image as ImageAntd } from 'antd'
+import { configProvider, reactToSolidComponent, replaceClassName } from './utils/component'
+import { solidToReact } from './utils/solid'
+import { type JSXElement, createMemo } from 'solid-js'
+import { mapValues } from 'lodash-es'
+
+const _Image = replaceClassName(
+  reactToSolidComponent(configProvider(ImageAntd), () => (<div class="ant-inline-flex" />) as any),
+)
+
+type ImageProps = Omit<Parameters<typeof _Image>[0], 'placeholder'> & {
+  placeholder?: JSXElement
+}
+
+function Image(_props: ImageProps) {
+  const props = createMemo(() =>
+    mapValues(_props, (value, key) => {
+      switch (key) {
+        case 'placeholder':
+          return solidToReact(value)
+        default:
+          return value
+      }
+    }),
+  )
+  return <_Image {...(props() as any)} />
+}
+
+export default Image

package/src/Input.tsx

@@ -0,0 +1,110 @@
+import { omit } from 'lodash-es'
+import { Show, splitProps } from 'solid-js'
+import type { JSX, JSXElement, Component } from 'solid-js'
+import cs from 'classnames'
+import createControllableValue from './hooks/createControllableValue'
+import { Dynamic } from 'solid-js/web'
+
+type CommonInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> = JSX.CustomAttributes<T> & {
+  textarea?: boolean
+  defaultValue?: string | undefined
+  value?: string | undefined
+  addonBefore?: JSXElement
+  addonAfter?: JSXElement
+  /**
+   * 仅供 InputNumber 使用
+   */
+  inputAfter?: JSXElement
+  placeholder?: string
+  onChange?: JSX.InputEventHandler<T, InputEvent>
+  onPressEnter?: JSX.EventHandler<T, KeyboardEvent>
+  onKeyDown?: JSX.EventHandler<T, KeyboardEvent>
+}
+
+export function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(props: CommonInputProps<T> &
+  Omit<JSX.InputHTMLAttributes<T>, 'onChange' | 'onInput' | 'onKeyDown'>) {
+  const [{ onChange, onPressEnter, onKeyDown }, inputProps] = splitProps(props, [
+    'defaultValue',
+    'value',
+    'class',
+    'addonBefore',
+    'addonAfter',
+    'inputAfter',
+    'onChange',
+    'onPressEnter',
+    'onKeyDown',
+  ])
+
+  const [_, controllableProps] = splitProps(props, ['onChange'])
+  const [value, setValue] = createControllableValue(controllableProps)
+
+  return (
+    <div class="ant-flex ant-w-full">
+      <Show when={props.addonBefore}>
+        <div class="ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_#d9d9d9] ant-border-r-0 ant-rounded-l-6px ant-text-14px">
+          {props.addonBefore}
+        </div>
+      </Show>
+
+      <div class="ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p-hover-child[input]:ant-border-[var(--primary-color)]">
+        <Dynamic<Component<JSX.InputHTMLAttributes<HTMLInputElement>>>
+          component={
+            (props.textarea ? 'textarea' : 'input') as unknown as Component<
+              JSX.InputHTMLAttributes<HTMLInputElement>
+            >
+          }
+          {...inputProps as JSX.InputHTMLAttributes<HTMLInputElement>}
+          class={cs(
+            'ant-w-full ant-py-0 ant-px-11px ant-[outline:none] ant-text-14px ant-rounded-6px ant-[border:1px_solid_#d9d9d9] focus:ant-border-[var(--primary-color)] focus:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)] ant-py-8px',
+            !props.textarea && 'ant-h-32px',
+            props.class,
+            props.addonBefore && 'ant-rounded-l-0',
+            props.addonAfter && 'ant-rounded-r-0',
+          )}
+          value={value() ?? ''}
+          onInput={e => {
+            setValue(e.target.value)
+            onChange?.(e as any)
+          }}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              onPressEnter?.(e as any)
+            }
+
+            onKeyDown?.(e as any)
+          }}
+        />
+
+        <Show when={props.inputAfter}>
+          <div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">
+            {props.inputAfter}
+          </div>
+        </Show>
+      </div>
+
+      <Show when={props.addonAfter}>
+        <div class="ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_#d9d9d9] ant-border-l-0 ant-rounded-r-6px ant-text-14px">
+          {props.addonAfter}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export type InputProps = Omit<CommonInputProps, 'inputAfter' | 'textarea'> &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'onKeyDown'>
+
+export type TextAreaProps = Omit<CommonInputProps<HTMLTextAreaElement>, 'inputAfter' | 'textarea'> &
+  Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'onInput' | 'onKeyDown'>
+
+const Input: Component<InputProps> & {
+  TextArea: Component<TextAreaProps>
+} = props => {
+  return <CommonInput {...omit(props, ['inputAfter'])} />
+}
+
+Input.TextArea = props => {
+  return <CommonInput<HTMLTextAreaElement> textarea {...omit(props, ['inputAfter'])} />
+}
+
+export default Input

package/src/InputNumber.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render } from '@solidjs/testing-library'
+import InputNumber from './InputNumber'
+import '@testing-library/jest-dom'
+
+describe('InputNumber component', () => {
+  it('onChange', () => {
+    const onChange = vi.fn()
+    const { getByPlaceholderText } = render(() => (
+      <InputNumber placeholder="input-number" onChange={onChange} />
+    ))
+
+    const input: HTMLInputElement = getByPlaceholderText('input-number')
+    input.value = '123'
+    fireEvent.input(input)
+    expect(onChange).toHaveBeenLastCalledWith(123)
+
+    input.value = '1234'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+    expect(onChange).toHaveBeenLastCalledWith(1234)
+
+    input.value = '1234'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+
+    input.value = '1234.'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+
+    input.value = '1234.0'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(2)
+
+    input.value = '1234.01'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(3)
+
+    input.value = '123x'
+    fireEvent.input(input)
+    expect(onChange).toBeCalledTimes(3)
+
+    fireEvent.blur(input)
+    expect(onChange).toBeCalledTimes(3)
+  })
+})

package/src/InputNumber.tsx

@@ -0,0 +1,119 @@
+import { type Component, createEffect, on, splitProps } from 'solid-js'
+import { CommonInput, type InputProps } from './Input'
+import { isNil } from 'lodash-es'
+import createControllableValue from './hooks/createControllableValue'
+import { dispatchEventHandlerUnion } from './utils/solid'
+
+export interface InputNumberProps
+  extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown'> {
+  defaultValue?: number | null | undefined
+  value?: number | null | undefined
+  onChange?: (value: number | null) => void
+}
+
+const isEmptyValue = (value: number | string | null | undefined) => isNil(value) || value === ''
+
+const formatNum = (
+  v: number | string | null | undefined,
+  prev?: number | null | undefined,
+): number | null => {
+  if (isEmptyValue(v)) {
+    return null
+  }
+
+  const num = Number(v)
+  if (prev !== undefined && Number.isNaN(num)) {
+    return prev
+  }
+
+  return num
+}
+
+const actionBtnClass =
+  'ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500'
+
+const InputNumber: Component<InputNumberProps> = props => {
+  const [{ onChange, onBlur }, inputProps] = splitProps(props, [
+    'defaultValue',
+    'value',
+    'onChange',
+    'onBlur',
+  ])
+
+  const [_, controllableProps] = splitProps(props, ['onChange'])
+  const [value, setValue] = createControllableValue<number | string | null | undefined>(
+    controllableProps,
+  )
+  const add = (addon: number) => {
+    setValue(v => {
+      if (isEmptyValue(v)) {
+        return addon
+      }
+
+      const num = Number(v)
+      if (Number.isNaN(num)) {
+        return v
+      }
+      return num + addon
+    })
+  }
+  const up = () => { add(1); }
+  const down = () => { add(-1); }
+
+  createEffect(
+    on(
+      value,
+      (input, __, prev: number | null | undefined) => {
+        const num = formatNum(input, prev)
+        if (num !== prev) {
+          prev = num
+          onChange?.(num)
+        }
+        return num
+      },
+      {
+        defer: true,
+      },
+    ),
+  )
+
+  return (
+    <CommonInput
+      {...inputProps}
+      inputAfter={
+        <div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_#d9d9d9]">
+          <div class={actionBtnClass} onClick={up}>
+            <div class="i-ant-design:up-outlined" />
+          </div>
+          <div class={`ant-[border-top:1px_solid_#d9d9d9] ${actionBtnClass}`} onClick={down}>
+            <div class="i-ant-design:down-outlined" />
+          </div>
+        </div>
+      }
+      value={`${value() ?? ''}`}
+      onKeyDown={e => {
+        switch (e.key) {
+          case 'ArrowUp':
+            up()
+            e.preventDefault()
+            return
+          case 'ArrowDown':
+            down()
+            e.preventDefault()
+        }
+      }}
+      onChange={e => {
+        const newValue = e.target.value || null
+        setValue(newValue)
+      }}
+      onBlur={e => {
+        const newValue = e.target.value || null
+        setValue(formatNum(newValue))
+
+        dispatchEventHandlerUnion(onBlur, e)
+      }}
+    />
+  )
+}
+
+export default InputNumber

package/src/Modal.tsx

@@ -0,0 +1,168 @@
+import { type JSXElement, Show, createSignal, untrack, Ref } from 'solid-js'
+import { Portal, render } from 'solid-js/web'
+import Button from './Button'
+import cs from 'classnames'
+
+export interface ModalInstance {
+  open: () => void
+  close: () => void
+}
+
+export interface ModalProps {
+  ref?: Ref<ModalInstance>
+  title?: JSXElement
+  initialOpen?: boolean
+  width?: string
+  height?: string
+  // open?: boolean
+  children?: JSXElement
+  /**
+   * 垂直居中展示 Modal
+   */
+  centered?: boolean
+  /**
+   * 点击蒙层是否允许关闭
+   * 默认 true
+   */
+  maskClosable?: boolean
+  /**
+   * 设置为 false 时隐藏关闭按钮
+   */
+  closeIcon?: boolean
+  /**
+   * 返回 true，会自动关闭 modal
+   */
+  onOk?: () => (boolean | Promise<boolean>)
+  afterClose?: () => void
+}
+
+export interface MethodProps
+  extends Pick<ModalProps, 'title' | 'children' | 'onOk' | 'afterClose'> {}
+
+function Modal(props: ModalProps) {
+  const [open, setOpen] = createSignal(props.initialOpen ?? false)
+  const close = () => {
+    setOpen(false)
+    props.afterClose?.()
+  }
+
+  const instance: ModalInstance = {
+    open() {
+      setOpen(true)
+    },
+    close() {
+      setOpen(false)
+    },
+  }
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(instance)
+    }
+  })
+
+  const [confirmLoading, setConfirmLoading] = createSignal(false)
+
+  return (
+    <Show when={open()}>
+      <Portal>
+        <div
+          class={cs(
+            'ant-fixed ant-justify-center ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-flex ant-z-1000',
+            props.centered && 'ant-items-center',
+          )}
+          onClick={() => {
+            if (props.maskClosable ?? true) {
+              close()
+            }
+          }}
+        >
+          <div
+            class={cs(
+              'ant-absolute ant-px-24px ant-py-20px ant-rounded-8px ant-overflow-hidden ant-bg-white ant-flex ant-flex-col',
+              // '!ant-[animation-duration:.5s]',
+              !props.centered && 'ant-top-100px',
+            )}
+            onClick={e => {
+              e.stopPropagation()
+            }}
+            style={{
+              width: props.width ?? '520px',
+              height: props.height,
+            }}
+          >
+            {/* 关闭按钮 */}
+            <Show when={props.closeIcon !== false}>
+              <Button
+                type="text"
+                class={cs(
+                  'ant-rm-size-btn !ant-w-22px !ant-h-22px !ant-flex !ant-justify-center !ant-items-center ant-text-center ant-text-18px !ant-absolute !ant-top-16px !ant-right-16px ant-z-1000 ant-text-[rgba(0,0,0,.45)] hover:!ant-text-[rgba(0,0,0,.88)]',
+                )}
+                onClick={close}
+              >
+                <span class="i-ant-design:close-outlined" />
+              </Button>
+            </Show>
+
+            <div class="ant-text-[rgba(0,0,0,.88)] ant-text-16px ant-font-600 ant-mb-8px">{props.title}</div>
+            <div class='ant-grow'>{props.children}</div>
+
+            <div class="ant-text-right ant-mt-12px">
+              <Button onClick={close}>取消</Button>
+              <Button
+                type="primary"
+                class="!ant-ml-8px"
+                loading={confirmLoading()}
+                // eslint-disable-next-line solid/reactivity, @typescript-eslint/no-misused-promises
+                onClick={async () => {
+                  if (!props.onOk) return
+
+                  let res = props.onOk?.()
+                  if (res instanceof Promise) {
+                    setConfirmLoading(true)
+                    res = await res.finally(() => setConfirmLoading(false))
+                  }
+                  if (res) {
+                    instance.close()
+                  }
+                }}
+              >
+                确定
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Portal>
+    </Show>
+  )
+}
+
+Modal.warning = (props: MethodProps) => {
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+  const dispose = render(
+    () => (
+      <Modal
+        width="416px"
+        maskClosable={false}
+        closeIcon={false}
+        {...props}
+        title={
+          <>
+            <span class="i-ant-design:exclamation-circle ant-text-22px ant-mr-12px ant-text-[var(--warning-color)]" />
+            {props.title}
+          </>
+        }
+        children={<div class="ant-ml-34px">{props.children}</div>}
+        initialOpen
+        afterClose={() => {
+          document.body.removeChild(div)
+          dispose()
+          props.afterClose?.()
+        }}
+      />
+    ),
+    div,
+  )
+}
+
+export default Modal

package/src/Popconfirm.tsx

@@ -0,0 +1,73 @@
+import { Component, JSXElement, createSignal, mergeProps, untrack } from 'solid-js'
+import Button from './Button'
+import Tooltip from './Tooltip'
+
+interface PopconfirmProps {
+  title?: JSXElement
+  content?: JSXElement
+  children: JSXElement
+  onCancel?: () => void
+  onConfirm?: () => void
+  /**
+   * 确认按钮文字
+   * 默认：确定
+   */
+  okText?: string
+  /**
+   * 取消按钮文字
+   * 默认：取消
+   */
+  cancelText?: string
+}
+
+const Popconfirm: Component<PopconfirmProps> = props => {
+  const mergedProps = mergeProps({ okText: '确定', cancelText: '取消' }, props)
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <Tooltip
+      mode="light"
+      trigger="click"
+      open={open()}
+      onOpenChange={setOpen}
+      content={
+        <div>
+          <div class="ant-mb-8px ant-flex ant-items-center">
+            <span class="i-ant-design:exclamation-circle-fill ant-text-#faad14" />
+            <span class="ant-ml-8px ant-text-[rgba(0,0,0,0.88)] ant-font-600">{mergedProps.title}</span>
+          </div>
+
+          <div class="ant-ml-22px ant-mb-8px ant-text-[rgba(0,0,0,0.88)]">{mergedProps.content}</div>
+
+          <div class="ant-text-right">
+            <Button
+              class="ant-ml-8px"
+              size="small"
+              onClick={() => {
+                setOpen(false)
+                untrack(() => mergedProps.onCancel?.())
+              }}
+            >
+              {mergedProps.cancelText}
+            </Button>
+            <Button
+              class="ant-ml-8px"
+              type="primary"
+              size="small"
+              onClick={() => {
+                setOpen(false)
+                untrack(() => mergedProps.onConfirm?.())
+              }}
+            >
+              {mergedProps.okText}
+            </Button>
+          </div>
+        </div>
+      }
+    >
+      {mergedProps.children}
+    </Tooltip>
+  )
+}
+
+export default Popconfirm

package/src/Popover.tsx

@@ -0,0 +1,30 @@
+import { type Component, type JSXElement, Show } from 'solid-js'
+import Tooltip, { Content, type TooltipProps } from './Tooltip'
+
+interface PopoverProps extends TooltipProps {
+  title?: JSXElement
+}
+
+const Popover: Component<PopoverProps> = props => {
+  return (
+    <Tooltip
+      mode="light"
+      {...props}
+      content={close =>
+        <div>
+          <Show when={props.title}>
+            <div class="ant-mb-8px ant-flex ant-items-center">
+              <span class="ant-text-[rgba(0,0,0,0.88)] ant-font-600">{props.title}</span>
+            </div>
+          </Show>
+
+          <div class="ant-text-[rgba(0,0,0,0.88)]">
+            <Content content={props.content} close={close} />
+          </div>
+        </div>
+      }
+    />
+  )
+}
+
+export default Popover

package/src/Progress.tsx

@@ -0,0 +1,4 @@
+import { Progress as ProgressAntd } from 'antd'
+import { reactToSolidComponent, replaceChildren, replaceClassName } from './utils/component'
+
+export default replaceChildren(replaceClassName(reactToSolidComponent(ProgressAntd)))