antd-solid 0.0.2

package/src/Radio.tsx

@@ -0,0 +1,132 @@
+import {
+  type Component,
+  type JSXElement,
+  type ParentProps,
+  type JSX,
+  untrack,
+  For,
+  createSelector,
+  mergeProps,
+} from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import cs from 'classnames'
+import createControllableValue from './hooks/createControllableValue'
+
+export interface RadioProps extends ParentProps {
+  defaultChecked?: boolean
+  checked?: boolean
+  /**
+   * input 的 value
+   */
+  value?: string
+  onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>
+}
+
+export interface RadioGroupProps {
+  defaultValue?: string
+  value?: string
+  onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>
+  optionType?: 'default' | 'button'
+  options: Array<{ label: JSXElement; value: string; disabled?: boolean }>
+  block?: boolean
+}
+
+const Radio: Component<RadioProps> & {
+  Group: Component<RadioGroupProps>
+  Button: Component<RadioProps>
+} = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: undefined,
+  })
+
+  return (
+    <label class="ant-inline-flex ant-gap-4px">
+      <input
+        checked={checked()}
+        value={props.value ?? ''}
+        type="radio"
+        onInput={e => {
+          setChecked(e.target.checked)
+          untrack(() => props.onChange?.(e))
+        }}
+      />
+      {props.children}
+    </label>
+  )
+}
+
+Radio.Button = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: undefined,
+  })
+
+  return (
+    <label
+      class={cs(
+        'ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center',
+        checked() &&
+          'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]',
+      )}
+    >
+      <input
+        class="ant-w-0 ant-h-0"
+        checked={checked()}
+        value={props.value ?? ''}
+        type="radio"
+        onInput={e => {
+          setChecked(e.target.checked)
+          untrack(() => props.onChange?.(e))
+        }}
+      />
+      {props.children}
+    </label>
+  )
+}
+
+Radio.Group = _props => {
+  const props = mergeProps(
+    {
+      optionType: 'default',
+    } as RadioGroupProps,
+    _props,
+  )
+  const [value, setValue] = createControllableValue<string>(props, {
+    trigger: undefined,
+  })
+  const isChecked = createSelector(value)
+
+  return (
+    <div
+      class={cs(
+        props.block ? 'ant-flex' : 'ant-inline-flex',
+        props.optionType === 'default' ? 'ant-gap-8px' : '',
+      )}
+    >
+      <For each={props.options}>
+        {option => (
+          <Dynamic
+            component={props.optionType === 'default' ? Radio : Radio.Button}
+            checked={isChecked(option.value)}
+            value={option.value}
+            onChange={
+              (e => {
+                setValue(option.value)
+                untrack(() => props.onChange?.(e))
+              }) as JSX.ChangeEventHandler<HTMLInputElement, Event>
+            }
+          >
+            {option.label}
+          </Dynamic>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default Radio

package/src/Result.tsx

@@ -0,0 +1,38 @@
+import { type JSXElement, type Component, type ParentProps } from 'solid-js'
+import cs from 'classnames'
+
+type ResultStatusType = 'success' | 'error' | 'info' | 'warning'
+
+export interface ResultProps extends ParentProps {
+  status?: ResultStatusType
+  title?: JSXElement
+  subTitle?: JSXElement
+  extra?: JSXElement
+}
+
+const statusIconMap = {
+  success: 'ant-text-#52c41a i-ant-design:check-circle-filled',
+  info: 'ant-text-[var(--primary-color)] i-ant-design:exclamation-circle-filled',
+  warning: 'ant-text-#faad14 i-ant-design:warning-filled',
+  error: 'ant-text-#ff4d4f i-ant-design:close-circle-filled',
+}
+
+const Result: Component<ResultProps> = props => {
+  return (
+    <div class="ant-text-center ant-px-32px ant-py-48px">
+      <div class="ant-mb-24px">
+        <span class={cs(statusIconMap[props.status!], 'ant-text-72px')} />
+      </div>
+
+      <div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px">{props.title}</div>
+
+      <div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px">{props.subTitle}</div>
+
+      <div class="ant-mt-24px">{props.extra}</div>
+
+      <div class="ant-mt-24px">{props.children}</div>
+    </div>
+  )
+}
+
+export default Result

package/src/Select.tsx

@@ -0,0 +1,6 @@
+import { Select as SelectAntd } from 'antd'
+import { reactToSolidComponent, replaceClassName } from './utils/component'
+
+const Select = replaceClassName(reactToSolidComponent(SelectAntd))
+
+export default Select

package/src/Skeleton.tsx

@@ -0,0 +1,14 @@
+import { Skeleton as SkeletonAntd } from 'antd'
+import { reactToSolidComponent, replaceClassName } from './utils/component'
+
+const _Skeleton = replaceClassName(reactToSolidComponent(SkeletonAntd))
+
+const Image = replaceClassName(reactToSolidComponent(SkeletonAntd.Image))
+
+const Skeleton = _Skeleton as typeof _Skeleton & {
+  Image: typeof Image
+}
+
+Skeleton.Image = Image
+
+export default Skeleton

package/src/Spin.tsx

@@ -0,0 +1,23 @@
+import { Show, type Component, type ParentProps } from 'solid-js'
+
+interface SpinProps extends ParentProps {
+  /**
+   * 是否为加载中状态
+   */
+  spinning?: boolean
+}
+
+const Spin: Component<SpinProps> = props => {
+  return (
+    <div class="ant-relative ant-min-h-32px">
+      {props.children}
+      <Show when={props.spinning}>
+        <div class="ant-absolute ant-inset-0 ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]">
+          <span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-32px ant-text-[var(--primary-color)]" />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default Spin

package/src/Switch.tsx

@@ -0,0 +1,34 @@
+import { type Component } from 'solid-js'
+import createControllableValue from './hooks/createControllableValue'
+import cs from 'classnames'
+
+export interface SwitchProps {
+  defaultChecked?: boolean
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+}
+
+const Switch: Component<SwitchProps> = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+  })
+  return (
+    <button
+      class={cs(
+        'ant-w-44px ant-h-22px ant-rounded-100px ant-relative',
+        checked() ? 'ant-bg-[var(--primary-color)]' : 'ant-bg-[rgba(0,0,0,0.45)]',
+      )}
+      onClick={() => setChecked(c => !c)}
+    >
+      <div
+        class={cs(
+          'ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left',
+          checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px',
+        )}
+      />
+    </button>
+  )
+}
+
+export default Switch

package/src/Table.tsx

@@ -0,0 +1,46 @@
+import { type JSXElement, For } from 'solid-js'
+
+export interface Column<R extends {}> {
+  title: JSXElement
+  render: (row: R) => JSXElement
+}
+
+export interface TableProps<R extends {}> {
+  columns: Array<Column<R>>
+  dataSource: R[]
+}
+
+const Table = <R extends {}>(props: TableProps<R>) => {
+  return (
+    <table class="ant-w-full">
+      <thead>
+        <tr>
+          <For each={props.columns}>
+            {item => (
+              <th class="ant-p-16px ant-bg-[var(--light-bg-color)] ant-font-bold ant-[border-bottom:1px_solid_var(--secondary-border-color)] ant-text-left">
+                {item.title}
+              </th>
+            )}
+          </For>
+        </tr>
+      </thead>
+      <tbody>
+        <For each={props.dataSource}>
+          {row => (
+            <tr class="hover:ant-bg-[var(--light-bg-color)]">
+              <For each={props.columns}>
+                {item => (
+                  <td class="ant-p-16px ant-[border-bottom:1px_solid_var(--secondary-border-color)]">
+                    {item.render(row)}
+                  </td>
+                )}
+              </For>
+            </tr>
+          )}
+        </For>
+      </tbody>
+    </table>
+  )
+}
+
+export default Table

package/src/Tabs.tsx

@@ -0,0 +1,88 @@
+import {
+  type Component,
+  For,
+  type JSXElement,
+  createSelector,
+  createSignal,
+  onMount,
+  untrack,
+  type JSX,
+  Show,
+} from 'solid-js'
+import cs from 'classnames'
+import { isNil } from 'lodash-es'
+
+export interface Tab {
+  key: string
+  label: JSXElement
+  children?: JSXElement
+}
+
+export interface TabsProps {
+  class?: string
+  navWrapClass?: string
+  navItemClass?: string
+  items: Tab[]
+}
+
+const Tabs: Component<TabsProps> = props => {
+  const [selectedItem, setSelectedItem] = createSignal<Tab | undefined>(untrack(() => props.items[0]))
+  const isSelectedItem = createSelector(() => selectedItem()?.key)
+  const [selectedBarStyle, setSelectedBarStyle] = createSignal<JSX.CSSProperties>({
+    left: '0px',
+    width: '0px',
+  })
+  const updateSelectedBarStyle = (el: HTMLElement) => {
+    setSelectedBarStyle({
+      left: `${el.offsetLeft}px`,
+      width: `${el.clientWidth}px`,
+    })
+  }
+
+  let navWrap: HTMLDivElement
+  onMount(() => {
+    updateSelectedBarStyle(navWrap.children[0] as HTMLElement)
+  })
+
+  return (
+    <div class={cs(props.class, 'ant-grid ant-[grid-template-rows:auto_1fr]')}>
+      <div
+        ref={navWrap!}
+        class={cs(
+          'ant-flex ant-gap-32px ant-[border-bottom:solid_1px_rgba(5,5,5,0.1)] ant-relative',
+          props.navWrapClass,
+        )}
+      >
+        <For each={props.items}>
+          {item => (
+            <div
+              class={cs(
+                'ant-py-12px ant-cursor-pointer',
+                props.navItemClass,
+                isSelectedItem(item.key) && 'ant-text-[var(--primary-color)]',
+              )}
+              onClick={e => {
+                setSelectedItem(item)
+                updateSelectedBarStyle(e.currentTarget)
+              }}
+            >
+              {item.label}
+            </div>
+          )}
+        </For>
+
+        <div
+          role={'selected-bar' as any}
+          class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left"
+          style={selectedBarStyle()}
+        />
+      </div>
+
+      <Show when={!isNil(selectedItem()?.children)}>
+        <div class="ant-px-12px ant-py-16px ant-overflow-auto">{selectedItem()?.children}</div>
+      </Show>
+    </div>
+  )
+}
+
+export default Tabs

package/src/Timeline.tsx

@@ -0,0 +1,33 @@
+import { type Accessor, type Component, For, type JSXElement } from 'solid-js'
+import { type TimelineItemProps as TimelineItemAntdProps } from 'antd'
+
+interface TimelineItemProps extends Omit<TimelineItemAntdProps, 'children' | 'dot' | 'label'> {
+  dot?: JSXElement
+  label?: JSXElement
+  children?: Accessor<JSXElement>
+}
+
+interface TimelineProps {
+  class?: string
+  items: TimelineItemProps[]
+}
+
+const Timeline: Component<TimelineProps> = props => {
+  return (
+    <div class="ant-flex ant-flex-col ant-gap-[16px]">
+      <For each={props.items}>
+        {(item, i) => (
+          <div class="ant-flex ant-relative">
+            {i() !== props.items.length - 1 && (
+              <div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]" />
+            )}
+            <div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--primary-color)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]" />
+            <div class="ant-ml-[8px]">{item.children?.()}</div>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default Timeline

package/src/Tooltip.tsx

@@ -0,0 +1,209 @@
+import { compact } from 'lodash-es'
+import {
+  type Component,
+  type JSXElement,
+  children,
+  createEffect,
+  Show,
+  mergeProps,
+  onCleanup,
+  createMemo,
+} from 'solid-js'
+import { Portal } from 'solid-js/web'
+import cs from 'classnames'
+import createControllableValue from './hooks/createControllableValue'
+import { useClickAway } from './hooks'
+
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu'
+type TooltipPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom'
+
+export interface TooltipProps {
+  /**
+   * 默认: hover
+   */
+  trigger?: ActionType
+  /**
+   * 默认: top
+   */
+  placement?: TooltipPlacement
+  content?: JSXElement | ((close: () => void) => JSXElement)
+  children?: JSXElement
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /**
+   * 默认: dark
+   */
+  mode?: 'dark' | 'light'
+  /**
+   * 默认: true
+   */
+  arrow?: boolean | { pointAtCenter: boolean }
+}
+
+export const Content: Component<{
+  content: TooltipProps['content']
+  close: () => void
+}> = props => {
+  return (
+    <Show when={typeof props.content === 'function'} fallback={props.content as JSXElement}>
+      {typeof props.content === 'function' && props.content(props.close)}
+    </Show>
+  )
+}
+
+const Tooltip: Component<TooltipProps> = _props => {
+  const props = mergeProps(
+    {
+      trigger: 'hover',
+      placement: 'top',
+      mode: 'dark',
+      arrow: true,
+    } as TooltipProps,
+    _props,
+  )
+
+  const resolvedChildren = children(() => _props.children)
+  let contentWrap: HTMLDivElement
+  let arrow: HTMLDivElement
+  const [open, setOpen] = createControllableValue(_props, {
+    defaultValue: false,
+    valuePropName: 'open',
+    trigger: 'onOpenChange',
+  })
+  const reverseOpen = () => setOpen(v => !v)
+
+  createEffect(() => {
+    const _children = resolvedChildren() as Element
+    switch (props.trigger) {
+      case 'hover':
+        _children.addEventListener('mouseenter', reverseOpen)
+        onCleanup(() => {
+          _children.removeEventListener('mouseenter', reverseOpen)
+        })
+
+        _children.addEventListener('mouseleave', reverseOpen)
+        onCleanup(() => {
+          _children.removeEventListener('mouseleave', reverseOpen)
+        })
+        break
+      case 'click':
+        _children.addEventListener('click', reverseOpen)
+        onCleanup(() => {
+          _children.removeEventListener('click', reverseOpen)
+        })
+
+        useClickAway(
+          () => setOpen(false),
+          () => compact([contentWrap, _children]),
+        )
+        break
+    }
+  })
+
+  createEffect(() => {
+    if (open()) {
+      const _children = resolvedChildren() as Element
+      const childrenRect = _children.getBoundingClientRect()
+      const pointAtCenter = typeof props.arrow === 'object' ? props.arrow.pointAtCenter : false
+      const arrowOffset = 8
+
+      switch (props.placement) {
+        case 'top':
+          contentWrap.style.top = `${childrenRect.top}px`
+          contentWrap.style.left = `${childrenRect.left + childrenRect.width / 2}px`
+          contentWrap.style.transform = 'translate(-50%, -100%)'
+          break
+        case 'topRight':
+          contentWrap.style.top = `${childrenRect.top}px`
+          contentWrap.style.left = `${childrenRect.right}px`
+          contentWrap.style.transform = 'translate(-100%, -100%)'
+          if (arrow) arrow.style.right = `${arrowOffset}px`
+          break
+        case 'bottom':
+          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
+          contentWrap.style.left = `${childrenRect.left + childrenRect.width / 2}px`
+          contentWrap.style.transform = 'translate(-50%, 0)'
+          break
+        case 'bottomLeft':
+          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
+          contentWrap.style.left = `${childrenRect.left}px`
+          if (arrow) arrow.style.left = `${arrowOffset}px`
+          break
+        case 'bottomRight':
+          contentWrap.style.top = `${childrenRect.top + childrenRect.height}px`
+          contentWrap.style.left = `${childrenRect.right + (pointAtCenter ? arrowOffset : 0)}px`
+          contentWrap.style.transform = 'translate(-100%, 0)'
+          if (arrow) arrow.style.right = `${arrowOffset}px`
+          break
+      }
+    }
+  })
+
+  const direction = createMemo(() => {
+    if (props.placement?.startsWith('top')) return 'top'
+    if (props.placement?.startsWith('bottom')) return 'bottom'
+    if (props.placement?.startsWith('left')) return 'left'
+    if (props.placement?.startsWith('right')) return 'right'
+  })
+
+  return (
+    <>
+      {resolvedChildren}
+
+      <Show when={open()}>
+        <Portal>
+          {/* Portal 存在缺陷，onClick 依然会沿着 solid 的组件树向上传播，因此需要 stopPropagation */}
+          <div
+            ref={contentWrap!}
+            class={cs(
+              'ant-z-1000 ant-fixed after:ant-content-empty',
+              props.arrow ? '[--padding:8px]' : '[--padding:4px]',
+              direction() === 'top' && 'ant-pb-[var(--padding)]',
+              direction() === 'bottom' && 'ant-pt-[var(--padding)]',
+            )}
+            onClick={e => {
+              e.stopPropagation()
+            }}
+          >
+            <div
+              class={cs(
+                'ant-p-12px ant-rounded-8px ant-[box-shadow:0_6px_16px_0_rgba(0,0,0,0.08),0_3px_6px_-4px_rgba(0,0,0,0.12),0_9px_28px_8px_rgba(0,0,0,0.05)]',
+                props.mode === 'dark' ? 'ant-bg-[rgba(0,0,0,0.85)] ant-text-white' : 'ant-bg-white',
+              )}
+            >
+              <Content content={props.content} close={() => setOpen(false)} />
+            </div>
+            <Show when={props.arrow}>
+              <div
+                ref={arrow!}
+                class={cs(
+                  'ant-w-8px ant-h-8px ant-rotate-45 ant-absolute',
+                  props.mode === 'dark' ? 'ant-bg-[rgba(0,0,0,0.85)]' : 'ant-bg-white',
+                  direction() === 'top' &&
+                    'ant-bottom-0 -ant-translate-x-1/2 -ant-translate-y-1/2 ant-[filter:drop-shadow(3px_2px_2px_rgba(0,0,0,0.08))]',
+                  direction() === 'bottom' &&
+                    'ant-top-0 -ant-translate-x-1/2 ant-translate-y-1/2 ant-[filter:drop-shadow(-3px_-2px_2px_rgba(0,0,0,0.08))]',
+                  (props.placement === 'top' || props.placement === 'bottom') && 'left-1/2',
+                )}
+              />
+            </Show>
+          </div>
+        </Portal>
+      </Show>
+    </>
+  )
+}
+
+export default Tooltip