antd-solid 0.0.8 → 0.0.9

package/src/Select.tsx

@@ -0,0 +1,128 @@
+import {
+  type JSXElement,
+  type Component,
+  For,
+  createSelector,
+  createSignal,
+  Show,
+  createMemo,
+} from 'solid-js'
+import Tooltip from './Tooltip'
+import { type Key } from './types'
+import createControllableValue from './hooks/createControllableValue'
+import cs from 'classnames'
+import { useClickAway } from './hooks'
+import { isNil } from 'lodash-es'
+
+interface SelectOption {
+  label: JSXElement
+  value: Key
+}
+
+interface SelectProps {
+  value?: Key
+  onChange?: (value: Key) => void
+  options: SelectOption[]
+  placeholder?: string
+  allowClear?: boolean
+  class?: string
+}
+
+const Select: Component<SelectProps> = props => {
+  let select: HTMLDivElement
+
+  const [value, setValue] = createControllableValue<Key | undefined>(props)
+  const selectedValue = createSelector(value)
+  const selectedOption = createMemo(() => !isNil(value()) ? props.options.find(option => option.value === value()) : undefined)
+
+  const [open, setOpen] = createSignal(false)
+  useClickAway(
+    () => setOpen(false),
+    () => select!,
+  )
+
+  const [width, setWidth] = createSignal(0)
+  const [hover, setHover] = createSignal(false)
+  const showClearBtn = createMemo(() => props.allowClear && hover() && !isNil(value()))
+
+  return (
+    <Tooltip
+      mode="light"
+      open={open()}
+      onOpenChange={setOpen}
+      trigger={[]}
+      placement="bottomLeft"
+      arrow={false}
+      contentStyle={{
+        padding: 0,
+      }}
+      content={close => (
+        <div class="ant-bg-white ant-w-200px" style={{ width: `${width()}px` }}>
+          <For each={props.options}>
+            {item => (
+              <div
+                class={cs(
+                  'ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]',
+                  selectedValue(item.value) ? '!ant-bg-[var(--active-bg-color)]' : '',
+                )}
+                onClick={() => {
+                  setValue(item.value)
+                  close()
+                }}
+              >
+                {item.label}
+              </div>
+            )}
+          </For>
+        </div>
+      )}
+    >
+      <div
+        ref={select!}
+        class={cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--primary-color)]', props.class)}
+        tabIndex="0"
+        onClick={e => {
+          setOpen(true)
+          setWidth(e.currentTarget.offsetWidth)
+          e.currentTarget.focus()
+        }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        style={{
+          '--ant-arrow-color': 'rgba(146, 146, 146, 1)',
+          '--ant-clear-color': 'rgba(146, 146, 146, 1)',
+          '--ant-clear-color-hover': 'rgba(194, 194, 194, 1)',
+        }}
+      >
+        <div class="ant-relative ant-h-full">
+          <Show
+            when={!isNil(value())}
+            fallback={
+              <input
+                class="ant-h-full ant-w-full ant-float-left ant-[outline:none]"
+                readOnly
+                placeholder={props.placeholder}
+              />
+            }
+          >
+            <div>{selectedOption()!.label ?? value()}</div>
+          </Show>
+
+          <div class="ant-absolute ant-top-0 ant-bottom-0 ant-right-0">
+            <Show when={showClearBtn()} fallback={<span class="i-ant-design:down-outlined ant-text-[var(--ant-allow-color)]" />}>
+              <span
+                class="i-ant-design:close-circle-filled ant-cursor-pointer ant-text-[var(--ant-clear-color)] hover:ant-text-[var(--ant-clear-color-hover)]"
+                onClick={e => {
+                  e.stopPropagation()
+                  setValue(undefined)
+                }}
+              />
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Tooltip>
+  )
+}
+
+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<boolean>(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,53 @@
+import Empty from './Empty'
+import { type JSXElement, For, Show } from 'solid-js'
+
+export interface TableColumn<R extends {}> {
+  title: JSXElement
+  render: (row: R) => JSXElement
+}
+
+export interface TableProps<R extends {}> {
+  columns: Array<TableColumn<R>>
+  dataSource: R[]
+}
+
+const Table = <R extends {}>(props: TableProps<R>) => {
+  return (
+    <div>
+      <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>
+
+      <Show when={!props.dataSource.length}>
+        <Empty.PRESENTED_IMAGE_SIMPLE />
+      </Show>
+    </div>
+  )
+}
+
+export default Table

package/src/Tabs.tsx

@@ -0,0 +1,131 @@
+import {
+  type Component,
+  For,
+  createSelector,
+  createSignal,
+  onMount,
+  untrack,
+  type JSX,
+  onCleanup,
+  mergeProps,
+  Switch,
+  Match,
+} from 'solid-js'
+import cs from 'classnames'
+import Segmented from './Segmented'
+import { type StringOrJSXElement } from './types'
+import { unwrapStringOrJSXElement } from './utils/solid'
+
+export interface Tab {
+  key: string
+  label: StringOrJSXElement
+  children?: StringOrJSXElement
+}
+
+export interface TabsProps {
+  type?: 'line' | 'segment'
+  class?: string
+  navClass?: string
+  navItemClass?: string
+  contentClass?: string
+  items: Tab[]
+}
+
+const Tabs: Component<TabsProps> = _props => {
+  const props = mergeProps(
+    {
+      type: 'line',
+    } as 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',
+  })
+
+  let nav: HTMLDivElement | undefined
+  const updateSelectedBarStyle = () => {
+    if (!nav) return
+
+    const el = nav.querySelector<HTMLElement>(':scope > .selected')
+    if (!el) return
+
+    setSelectedBarStyle({
+      left: `${el.offsetLeft}px`,
+      width: `${el.clientWidth}px`,
+    })
+  }
+  onMount(() => {
+    if (!nav) return
+
+    updateSelectedBarStyle()
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateSelectedBarStyle()
+    })
+
+    resizeObserver.observe(nav)
+    onCleanup(() => {
+      resizeObserver.disconnect()
+    })
+  })
+
+  return (
+    <div class={props.class}>
+      <Switch>
+        <Match when={props.type === 'line'}>
+          <div
+            ref={nav!}
+            class={cs(
+              'ant-mb-16px ant-flex ant-gap-32px ant-[border-bottom:solid_1px_rgba(5,5,5,0.1)] ant-relative',
+              props.navClass,
+            )}
+          >
+            <For each={props.items}>
+              {item => (
+                <div
+                  class={cs(
+                    'ant-py-12px ant-cursor-pointer',
+                    props.navItemClass,
+                    isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected',
+                  )}
+                  onClick={() => {
+                    setSelectedItem(item)
+                    updateSelectedBarStyle()
+                  }}
+                >
+                  {unwrapStringOrJSXElement(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>
+        </Match>
+        <Match when={props.type === 'segment'}>
+          <Segmented
+            block
+            options={props.items.map(item => ({
+              label: item.label,
+              value: item.key,
+              onClick: () => setSelectedItem(item),
+            }))}
+          />
+        </Match>
+      </Switch>
+
+      <div class={props.contentClass}>{unwrapStringOrJSXElement(selectedItem()?.children)}</div>
+    </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