antd-solid 0.0.3 → 0.0.5

package/src/Image.tsx

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

@@ -1,202 +0,0 @@
-import { isNil, omit } from 'lodash-es'
-import { Show, createMemo, 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'
-import Compact from './Compact'
-
-type CommonInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> =
-  JSX.CustomAttributes<T> & {
-    textarea?: boolean
-    defaultValue?: string | undefined
-    value?: string | undefined
-    addonBefore?: JSXElement
-    addonAfter?: JSXElement
-    prefix?: JSXElement
-    suffix?: JSXElement
-    placeholder?: string
-    /**
-     * 仅供 InputNumber 使用
-     */
-    actions?: JSXElement
-    /**
-     * 设置校验状态
-     */
-    status?: 'error' | 'warning'
-    onChange?: JSX.InputEventHandler<T, InputEvent>
-    onPressEnter?: JSX.EventHandler<T, KeyboardEvent>
-    onKeyDown?: JSX.EventHandler<T, KeyboardEvent>
-  }
-
-const statusClassDict = {
-  default: (disabled: boolean) =>
-    cs(
-      'ant-[border:1px_solid_var(--ant-color-border)]',
-      !disabled &&
-        'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]',
-    ),
-  error: (disabled: boolean) =>
-    cs(
-      'ant-[border:1px_solid_var(--ant-color-error)]',
-      !disabled &&
-        'hover:ant-border-[var(--light-error-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]',
-    ),
-  warning: (disabled: boolean) =>
-    cs(
-      'ant-[border:1px_solid_var(--warning-color)]',
-      !disabled &&
-        'hover:ant-border-[var(--color-warning-border-hover)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]',
-    ),
-}
-
-export function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(
-  props: CommonInputProps<T> &
-  Omit<JSX.InputHTMLAttributes<T>, 'onChange' | 'onInput' | 'onKeyDown'>,
-) {
-  const [{ style, onChange, onPressEnter, onKeyDown }, inputProps] = splitProps(props, [
-    'defaultValue',
-    'value',
-    'class',
-    'addonBefore',
-    'addonAfter',
-    'suffix',
-    'onChange',
-    'onPressEnter',
-    'onKeyDown',
-    'actions',
-    'style',
-  ])
-
-  const [_, controllableProps] = splitProps(props, ['onChange'])
-  const [value, setValue] = createControllableValue(controllableProps)
-
-  const inputWrapClass = createMemo(() =>
-    cs(
-      'ant-px-11px ant-py-4px ant-rounded-6px',
-      !props.textarea && 'ant-h-32px',
-      props.addonBefore ? 'ant-rounded-l-0' : Compact.compactItemRoundedLeftClass,
-      props.addonAfter ? 'ant-rounded-r-0' : Compact.compactItemRoundedRightClass,
-      statusClassDict[props.status ?? 'default'](!!inputProps.disabled),
-      Compact.compactItemRounded0Class,
-      Compact.compactItemZIndexClass,
-    ),
-  )
-  const hasPrefixOrSuffix = createMemo(
-    () => !isNil(props.prefix) || !isNil(props.suffix) || !isNil(props.actions),
-  )
-  const inputJSX = (
-    <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-[outline:none] ant-text-14px',
-        !hasPrefixOrSuffix() && inputWrapClass(),
-        inputProps.disabled &&
-          'ant-bg-[var(--ant-color-bg-container-disabled)] ant-cursor-not-allowed',
-      )}
-      value={value() ?? ''}
-      onInput={e => {
-        setValue(e.target.value)
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        onChange?.(e as any)
-
-        if (Object.keys(props).includes('value')) {
-          e.target.value = value()
-        }
-      }}
-      onKeyDown={e => {
-        if (e.key === 'Enter') {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          onPressEnter?.(e as any)
-        }
-
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        onKeyDown?.(e as any)
-      }}
-    />
-  )
-
-  return (
-    <div class={cs('ant-flex ant-w-full', Compact.compactItemClass)} style={style}>
-      <Show when={props.addonBefore}>
-        <div
-          class={cs(
-            '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_var(--ant-color-border)] ant-border-r-0 ant-rounded-l-6px ant-text-14px',
-            Compact.compactItemRounded0Class,
-            Compact.compactItemRoundedLeftClass,
-          )}
-        >
-          {props.addonBefore}
-        </div>
-      </Show>
-
-      <Show when={hasPrefixOrSuffix()} fallback={inputJSX}>
-        <div
-          class={cs(
-            'ant-flex ant-items-center 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)]',
-            inputWrapClass(),
-          )}
-        >
-          <Show when={props.prefix}>
-            <div class="ant-mr-4px">{props.prefix}</div>
-          </Show>
-
-          {inputJSX}
-
-          <Show when={props.suffix}>
-            <div class="ant-ml-4px">{props.suffix}</div>
-          </Show>
-
-          <Show when={props.actions}>
-            <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.actions}
-            </div>
-          </Show>
-        </div>
-      </Show>
-
-      <Show when={props.addonAfter}>
-        <div
-          class={cs(
-            '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_var(--ant-color-border)] ant-border-l-0 ant-rounded-r-6px ant-text-14px',
-            Compact.compactItemRounded0Class,
-            Compact.compactItemRoundedRightClass,
-          )}
-        >
-          {props.addonAfter}
-        </div>
-      </Show>
-    </div>
-  )
-}
-
-export type InputProps = Omit<CommonInputProps, 'actions' | 'textarea'> &
-Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'onKeyDown'>
-
-export type TextAreaProps = Omit<
-CommonInputProps<HTMLTextAreaElement>,
-'prefix' | 'suffix' | 'textarea'
-> &
-Omit<
-JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,
-'actions' | 'onChange' | 'onInput' | 'onKeyDown'
->
-
-const Input: Component<InputProps> & {
-  TextArea: Component<TextAreaProps>
-} = props => {
-  return <CommonInput {...omit(props, ['actions'])} />
-}
-
-Input.TextArea = props => {
-  return (
-    <CommonInput<HTMLTextAreaElement> textarea {...omit(props, ['prefix', 'suffix', 'actions'])} />
-  )
-}
-
-export default Input

package/src/InputNumber.test.tsx

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

@@ -1,125 +0,0 @@
-import { type Component, createEffect, on, splitProps, untrack, createSignal, mergeProps } from 'solid-js'
-import { CommonInput, type InputProps } from './Input'
-import { clamp, isNil } from 'lodash-es'
-import { dispatchEventHandlerUnion } from './utils/solid'
-
-export interface InputNumberProps
-  extends Omit<
-  InputProps,
-  'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown' | 'min' | 'max' | 'suffix'
-  > {
-  defaultValue?: number | null | undefined
-  value?: number | null | undefined
-  onChange?: (value: number | null) => void
-  min?: number
-  max?: number
-}
-
-const isEmptyValue = (value: number | string | null | undefined) => isNil(value) || value === ''
-
-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 props = mergeProps({
-    min: -Infinity,
-    max: Infinity,
-  }, _props)
-  const [_, inputProps] = splitProps(props, [
-    'defaultValue',
-    'value',
-    'onChange',
-    'onBlur',
-  ])
-
-  const clampValue = (v: number) => untrack(() => clamp(v, props.min, props.max))
-    
-  let prev: number | null = null
-  const updatePrev = (v: number | null) => {
-    if (prev === v) return
-
-    prev = v
-    props.onChange?.(prev)
-  }
-
-  const [value, setValue] = createSignal<number | string | null | undefined>(untrack(() => props.value ?? props.defaultValue))
-  createEffect(on(() => props.value, () => {
-    setValue(props.value)
-  }, {
-    defer: true
-  }))
-
-  const add = (addon: number) => {
-    let newValue: number | null
-    if (isEmptyValue(value())) {
-      newValue = clampValue(addon)
-    } else {
-      const num = Number(value())
-      newValue = Number.isNaN(num) ? null : clampValue(num + addon)
-    }
-
-    if (!Object.keys(props).includes('value')) {
-      setValue(newValue)
-    }
-    updatePrev(newValue)
-  }
-  const up = () => {
-    add(1)
-  }
-  const down = () => {
-    add(-1)
-  }
-
-  return (
-    <CommonInput
-      {...inputProps}
-      actions={
-        <div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]">
-          <div class={actionBtnClass} onClick={up}>
-            <div class="i-ant-design:up-outlined" />
-          </div>
-          <div
-            class={`ant-[border-top:1px_solid_var(--ant-color-border)] ${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
-        setValue(newValue)
-
-        let newValueNum: number | null = Number(newValue)
-        if (Number.isNaN(newValueNum)) return
-        
-        if (isEmptyValue(newValue)) {
-          newValueNum = null
-        } else {
-          newValueNum = clampValue(newValueNum)
-        }
-
-        updatePrev(newValueNum)
-      }}
-      onBlur={e => {
-        setValue(props.value ?? prev)
-
-        dispatchEventHandlerUnion(props.onBlur, e)
-      }}
-    />
-  )
-}
-
-export default InputNumber

package/src/Modal.tsx

@@ -1,196 +0,0 @@
-import { type JSXElement, Show, createSignal, untrack, type Ref, mergeProps } 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
-  defaultOpen?: boolean
-  width?: string
-  height?: string
-  children?: JSXElement
-  /**
-   * 垂直居中展示 Modal
-   */
-  centered?: boolean
-  /**
-   * 点击蒙层是否允许关闭
-   * 默认 true
-   */
-  maskClosable?: boolean
-  /**
-   * 设置为 false 时隐藏关闭按钮
-   */
-  closeIcon?: boolean
-  footer?: boolean | ((modal: ModalInstance) => JSXElement)
-  /**
-   * 关闭时销毁 Modal 里的子元素	
-   */
-  destroyOnClose?: boolean
-  /**
-   * 返回 true，会自动关闭 modal
-   */
-  onOk?: () => boolean | Promise<boolean>
-  afterClose?: () => void
-  /**
-   * 自定义渲染对话框
-   */
-  modalRender?: () => JSXElement
-}
-
-export interface MethodProps
-  extends Pick<ModalProps, 'title' | 'children' | 'onOk' | 'afterClose'> {}
-
-function Modal(_props: ModalProps) {
-  const props = mergeProps({ footer: true }, _props)
-  const [open, setOpen] = createSignal(props.defaultOpen ?? false)
-  const [hide, setHide] = createSignal(false)
-
-  const instance: ModalInstance = {
-    open() {
-      setOpen(true)
-      setHide(false)
-    },
-    close() {
-      untrack(() => {
-        if (props.destroyOnClose) {
-          setOpen(false)
-        } else {
-          setHide(true)
-        }
-      })
-    },
-  }
-  untrack(() => {
-    if (typeof props.ref === 'function') {
-      props.ref?.(instance)
-    }
-  })
-
-  const close = () => {
-    instance.close()
-    props.afterClose?.()
-  }
-
-  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()
-            }
-          }}
-          style={{ display: hide() ? 'none' : undefined }}
-        >
-          <Show when={typeof props.modalRender !== 'function'} fallback={props.modalRender!()}>
-            <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>
-
-              <Show when={props.footer !== false}>
-                <div class="ant-mt-12px">
-                  <Show when={typeof props.footer !== 'function'} fallback={typeof props.footer === 'function' && props.footer(instance)}>
-                    <div class='ant-flex ant-gap-8px ant-justify-end'>
-                      <Button onClick={close}>取消</Button>
-                      <Button
-                        type="primary"
-                        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>
-                  </Show>
-                </div>
-              </Show>
-            </div>
-          </Show>
-        </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>}
-        defaultOpen
-        afterClose={() => {
-          document.body.removeChild(div)
-          dispose()
-          props.afterClose?.()
-        }}
-      />
-    ),
-    div,
-  )
-}
-
-export default Modal

package/src/Popconfirm.tsx

@@ -1,75 +0,0 @@
-import { type Component, type JSXElement, createSignal, mergeProps, untrack, splitProps } from 'solid-js'
-import Button from './Button'
-import Tooltip, { type TooltipProps } from './Tooltip'
-
-interface PopconfirmProps extends Pick<TooltipProps, 'placement' | 'arrow'> {
-  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 [tooltipProps] = splitProps(props, ['placement', 'arrow'])
-  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>
-      }
-      {...tooltipProps}
-    >
-      {mergedProps.children}
-    </Tooltip>
-  )
-}
-
-export default Popconfirm

package/src/Popover.tsx

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