antd-solid 0.0.2 → 0.0.4

package/src/Button.css

@@ -1,14 +0,0 @@
-@keyframes button-border {
-  from {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    inset: -4px;
-  }
-
-  to {
-    opacity: 0;
-  }
-}

package/src/Button.tsx

@@ -1,86 +0,0 @@
-import {
-  type Component,
-  mergeProps,
-  type ParentProps,
-  type JSX,
-  Show,
-  createSignal,
-  createMemo,
-} from 'solid-js'
-import cs from 'classnames'
-import './Button.css'
-
-interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
-  type?: 'default' | 'primary' | 'text' | 'link'
-  onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
-  /**
-   * 默认: middle
-   * plain: 没有多余的 padding 和高度等
-   */
-  size?: 'large' | 'middle' | 'small' | 'plain'
-  class?: string
-  style?: JSX.CSSProperties
-  loading?: boolean
-}
-
-const sizeClassMap = {
-  large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
-  middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
-  small: 'ant-px-7px ant-h-24px ant-rounded-4px',
-  plain: 'ant-p-0',
-} as const
-
-const typeClassMap = {
-  default:
-    'ant-[border:1px_solid_rgb(217,217,217)] ant-bg-white ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)]',
-  primary:
-    'ant-border-none ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] ant-text-white',
-  text: 'ant-border-none ant-bg-transparent ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]',
-  link: 'ant-border-none ant-bg-transparent ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
-} as const
-
-const Button: Component<ButtonProps> = props => {
-  const mergedProps = mergeProps({ type: 'default', size: 'middle' } as ButtonProps, props)
-  const [innerLoading, setLoading] = createSignal(false)
-  const loading = createMemo(() => props.loading ?? innerLoading())
-
-  return (
-    <button
-      ref={mergedProps.ref}
-      class={cs(
-        'ant-relative ant-cursor-pointer',
-        mergedProps.class,
-        sizeClassMap[mergedProps.size!],
-        typeClassMap[mergedProps.type!],
-        loading() && 'ant-opacity-65',
-      )}
-      style={mergedProps.style}
-      onClick={e => {
-        const res = mergedProps.onClick?.(e)
-        if (res instanceof Promise) {
-          setLoading(true)
-          res.finally(() => setLoading(false))
-        }
-
-        if (mergedProps.type === 'default' || mergedProps.type === 'primary') {
-          const div = document.createElement('div')
-          div.className =
-            'ant-absolute ant-inset-0 ant-rounded-inherit ant-[border:1px_solid_var(--light-primary-color)] ant-[animation:button-border_linear_1s]'
-          const onAnimationEnd = () => {
-            div.remove()
-            div.removeEventListener('animationend', onAnimationEnd)
-          }
-          div.addEventListener('animationend', onAnimationEnd)
-          e.currentTarget.insertBefore(div, e.currentTarget.childNodes[0])
-        }
-      }}
-    >
-      <Show when={loading()}>
-        <span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px" />
-      </Show>
-      <span>{mergedProps.children}</span>
-    </button>
-  )
-}
-
-export default Button

package/src/ColorPicker.tsx

@@ -1,66 +0,0 @@
-import { type Component, createSignal, mergeProps, untrack } from 'solid-js'
-import { type ColorResult, SketchPicker, type Color, type RGBColor, type HSLColor } from 'react-color'
-import { reactToSolidComponent } from './utils/component'
-import Button from './Button'
-import Popover from './Popover'
-import { get, isNil } from 'lodash-es'
-
-const _SketchPicker = reactToSolidComponent(SketchPicker)
-
-export interface ColorPickerProps {
-  /**
-   * 默认: rgba
-   */
-  type?: 'rgba' | 'hsla'
-  defaultColor?: string
-  onChange?: (colorString: string, color: ColorResult) => void
-}
-
-function isRGBColor(color: Color): color is RGBColor {
-  return ['r', 'g', 'b'].every(k => !isNil(get(color, k)))
-}
-
-function isHSLColor(color: Color): color is HSLColor {
-  return ['r', 'g', 'b'].every(k => !isNil(get(color, k)))
-}
-
-function colorStringify(color: Color | undefined) {
-  if (!color) return
-
-  if (isRGBColor(color)) return `rgba(${color.r},${color.g},${color.b},${color.a ?? 1})`
-
-  if (isHSLColor(color)) return `hsla(${color.h},${color.s},${color.l},${color.a ?? 1})`
-
-  return color
-}
-
-const ColorPicker: Component<ColorPickerProps> = _props => {
-  const props = mergeProps({ type: 'rgba' } as ColorPickerProps, _props)
-  const [color, setColor] = createSignal(props.defaultColor ?? 'black')
-
-  return (
-    <Popover
-      content={
-        <_SketchPicker
-          color={color()}
-          onChange={colorResult =>
-          { untrack(() => {
-            const colorString = colorStringify(
-              props.type === 'rgba' ? colorResult.rgb : colorResult.hsl,
-            )!
-            setColor(colorString)
-
-            props.onChange?.(colorString, colorResult)
-          }); }
-          }
-        />
-      }
-      trigger="click"
-      placement="bottomLeft"
-    >
-      <Button style={{ background: color() }} />
-    </Popover>
-  )
-}
-
-export default ColorPicker

package/src/DatePicker.tsx

@@ -1,12 +0,0 @@
-import { DatePicker as DatePickerAntd } from 'antd'
-import { reactToSolidComponent, replaceClassName } from './utils/component'
-
-const RangePicker = replaceClassName(reactToSolidComponent(DatePickerAntd.RangePicker))
-
-const _DatePicker = replaceClassName(reactToSolidComponent(DatePickerAntd))
-const DatePicker = _DatePicker as typeof _DatePicker & {
-  RangePicker: typeof RangePicker
-}
-DatePicker.RangePicker = RangePicker
-
-export default DatePicker

package/src/Form.tsx

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

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

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