antd-solid 0.0.2 → 0.0.4

package/src/Modal.tsx

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

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

@@ -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

package/src/Progress.tsx

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

package/src/Radio.tsx

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

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

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

package/src/Skeleton.tsx

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

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

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

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

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

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