antd-solid 0.0.11 → 0.0.13

package/src/Drawer/index.tsx

@@ -1,212 +0,0 @@
-import {
-  mergeProps,
-  type Component,
-  Show,
-  type JSXElement,
-  type Ref,
-  createSignal,
-  untrack,
-  createMemo,
-} from 'solid-js'
-import cs from 'classnames'
-import Button from '../Button'
-import { setRef } from '../utils/solid'
-import { Portal } from 'solid-js/web'
-import { Transition } from 'solid-transition-group'
-import './index.scss'
-import createTransition from '../hooks/createTransition'
-
-export interface DrawerInstance {
-  open: () => void
-  close: () => void
-}
-
-export interface DrawerProps {
-  ref?: Ref<DrawerInstance>
-  title?: JSXElement
-  extra?: JSXElement
-  children?: JSXElement
-  /**
-   * 宽度
-   * 默认 378px
-   */
-  width?: string
-  /**
-   * 高度，在 placement 为 top 或 bottom 时使用
-   * 默认 378px
-   */
-  height?: string
-  closeIcon?: boolean
-  /**
-   * 点击蒙层是否允许关闭
-   * 默认 true
-   */
-  maskClosable?: boolean
-  /**
-   * 关闭时销毁 Modal 里的子元素
-   */
-  destroyOnClose?: boolean
-  /**
-   * 抽屉的方向
-   * 默认 right
-   */
-  placement?: 'top' | 'right' | 'bottom' | 'left'
-  /**
-   * 指定 Drawer 挂载的节点，并在容器内展现，false 为挂载在当前位置
-   * 默认 body
-   */
-  getContainer?: HTMLElement | (() => HTMLElement) | false
-}
-
-const Drawer: Component<DrawerProps> = _props => {
-  const props = mergeProps(
-    {
-      width: '378px',
-      height: '378px',
-      maskClosable: true,
-      placement: 'right',
-      getContainer: document.body,
-    },
-    _props,
-  )
-
-  /**
-   * 控制是否打开/销毁
-   */
-  const [open, setOpen] = createSignal(false)
-  /**
-   * 控制显隐
-   */
-  const [hide, setHide] = createSignal(false)
-  let cleanup: (() => void) | undefined
-
-  const container = createMemo(() => {
-    if (typeof props.getContainer === 'function') {
-      return props.getContainer()
-    }
-    if (props.getContainer instanceof HTMLElement) {
-      return props.getContainer
-    }
-    return undefined
-  })
-  const isBody = createMemo(() => container() === document.body)
-
-  const instance: DrawerInstance = {
-    open() {
-      setOpen(true)
-      setHide(false)
-
-      untrack(() => {
-        if (!isBody()) return
-
-        const originOverflow = document.body.style.overflow
-        document.body.style.overflow = 'hidden'
-
-        const onKeyup = (e: KeyboardEvent) => {
-          if (e.key === 'Escape') {
-            instance.close()
-          }
-        }
-        document.addEventListener('keyup', onKeyup)
-
-        cleanup = () => {
-          document.body.style.overflow = originOverflow
-          document.removeEventListener('keyup', onKeyup)
-        }
-      })
-    },
-    close() {
-      untrack(() => {
-        if (props.destroyOnClose) {
-          setOpen(false)
-        } else {
-          setHide(true)
-        }
-
-        cleanup?.()
-      })
-    },
-  }
-  setRef(props, instance)
-
-  let drawer: HTMLDivElement | undefined
-  createTransition(
-    () => drawer,
-    () => !hide(),
-    'ant-drawer-fade',
-  )
-
-  const direction = createMemo(() =>
-    ['top', 'bottom'].includes(props.placement) ? 'vertical' : 'horizontal',
-  )
-
-  const children = (
-    <Transition name="ant-drawer-fade">
-      <Show when={open()}>
-        <div
-          ref={drawer}
-          class={cs(
-            'ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-z-1000',
-            isBody() ? 'ant-fixed' : 'ant-absolute',
-          )}
-          onClick={() => {
-            if (props.maskClosable) {
-              instance.close()
-            }
-          }}
-        >
-          <div
-            class={cs(
-              'ant-drawer-content',
-              {
-                left: 'ant-drawer-content-left',
-                right: 'ant-drawer-content-right',
-                top: 'ant-drawer-content-top',
-                bottom: 'ant-drawer-content-bottom',
-              }[props.placement],
-              'ant-absolute ant-bg-white ant-grid ant-[grid-template-rows:auto_1fr]',
-            )}
-            style={{
-              width: direction() === 'horizontal' ? props.width : undefined,
-              height: direction() === 'vertical' ? props.height : undefined,
-            }}
-            onClick={e => {
-              e.stopPropagation()
-            }}
-          >
-            <div class="ant-px-[var(--ant-padding-lg)] ant-py-[var(--ant-padding)] ant-flex ant-justify-between ant-items-center ant-[border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)]">
-              <div class="ant-flex ant-items-center">
-                <Show when={props.closeIcon !== false}>
-                  <Button
-                    type="text"
-                    size="plain"
-                    class="ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)]"
-                    onClick={() => {
-                      instance?.close()
-                    }}
-                  >
-                    <span class="i-ant-design:close-outlined" />
-                  </Button>
-                </Show>
-                <span class="ant-text-[var(--ant-color-text)] ant-text-size-[var(--ant-font-size-lg)] ant-[font-weight:var(--ant-font-weight-strong)] ant-leading-[var(--ant-line-height-lg)]">
-                  {props.title}
-                </span>
-              </div>
-
-              <div>{props.extra}</div>
-            </div>
-            <div class="ant-p-[var(--ant-padding-lg)] ant-overflow-auto">{props.children}</div>
-          </div>
-        </div>
-      </Show>
-    </Transition>
-  )
-
-  return (
-    <Show when={props.getContainer !== false} fallback={children}>
-      <Portal mount={container()}>{children}</Portal>
-    </Show>
-  )
-}
-
-export default Drawer

package/src/Empty/PRESENTED_IMAGE_SIMPLE.tsx

@@ -1,15 +0,0 @@
-import { type Component } from 'solid-js'
-import SimpleEmptySvg from './assets/SimpleEmptySvg'
-
-const PRESENTED_IMAGE_SIMPLE: Component = () => {
-  return (
-    <div class='ant-my-[var(--ant-margin-xl)] ant-mx-[var(--ant-margin-xs)]'>
-      <div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center">
-        <SimpleEmptySvg />
-      </div>
-      <div class="ant-text-[var(--ant-color-text-disabled)] ant-text-center">暂无数据</div>
-    </div>
-  )
-}
-
-export default PRESENTED_IMAGE_SIMPLE

package/src/Empty/assets/EmptySvg.tsx

@@ -1,43 +0,0 @@
-const EmptySvg = () => (
-  <svg width="184" height="100" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-      <g transform="translate(24 31.67)">
-        <ellipse
-          fill-opacity=".8"
-          fill="#F5F5F7"
-          cx="67.797"
-          cy="106.89"
-          rx="67.797"
-          ry="12.668"
-        />
-        <path
-          d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
-          fill="#AEB8C2"
-        />
-        <path
-          d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
-          fill="url(#linearGradient-1)"
-          transform="translate(13.56)"
-        />
-        <path
-          d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
-          fill="#F5F5F7"
-        />
-        <path
-          d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
-          fill="#DCE0E6"
-        />
-      </g>
-      <path
-        d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
-        fill="#DCE0E6"
-      />
-      <g transform="translate(149.65 15.383)" fill="#FFF">
-        <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
-        <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
-      </g>
-    </g>
-  </svg>
-)
-
-export default EmptySvg

package/src/Empty/assets/SimpleEmptySvg.tsx

@@ -1,16 +0,0 @@
-const EmptySvg = () => (
-  <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
-    <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-      <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7" />
-      <g fill-rule="nonzero" stroke="#d9d9d9">
-        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
-        <path
-          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-          fill="#fafafa"
-        />
-      </g>
-    </g>
-  </svg>
-)
-
-export default EmptySvg

package/src/Empty/index.tsx

@@ -1,20 +0,0 @@
-import { type Component } from 'solid-js'
-import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE'
-import EmptySvg from './assets/EmptySvg'
-
-const Empty: Component & {
-  PRESENTED_IMAGE_SIMPLE: Component
-} = () => {
-  return (
-    <div>
-      <div class='ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center'>
-        <EmptySvg />
-      </div>
-      <div class='ant-text-[var(--ant-color-text)] ant-text-center'>暂无数据</div>
-    </div>
-  )
-}
-
-Empty.PRESENTED_IMAGE_SIMPLE = PRESENTED_IMAGE_SIMPLE
-
-export default Empty

package/src/Form/Form.tsx

@@ -1,94 +0,0 @@
-import {
-  type JSXElement,
-  type Ref,
-  mergeProps,
-  type Setter,
-  onMount,
-  createSignal,
-  createMemo,
-} from 'solid-js'
-import { get, max, set } from 'lodash-es'
-import Context from './context'
-import { type Schema } from 'yup'
-
-export interface FormInstance<T extends {} = {}> {
-  validateFields: () => Promise<T>
-  setFieldValue: (name: Parameters<typeof set>[1], value: any) => void
-}
-
-export interface FormProps<T extends {} = {}> {
-  ref?: Ref<FormInstance<T>>
-  /**
-   * 表单布局
-   * 默认: horizontal
-   */
-  layout?: 'horizontal' | 'vertical' | 'inline'
-  children: JSXElement
-  initialValues?: T
-}
-
-function Form<T extends {} = {}>(_props: FormProps<T>) {
-  const props = mergeProps({ layout: 'horizontal' } as FormProps, _props)
-  const rulesDict: Record<string, Schema[]> = {}
-  const setErrMsgDict: Record<string, Setter<string>> = {}
-
-  const values = props.initialValues ? { ...props.initialValues } : ({} as T)
-  const formInstance: FormInstance<T> = {
-    async validateFields() {
-      const promises = Object.entries(rulesDict).flatMap(([name, rules]) => {
-        return rules.map(
-          async rule =>
-            await rule.validate(get(values, name)).catch(err => {
-              setErrMsgDict[name](err.message)
-              throw err
-            }),
-        )
-      })
-      const results = await Promise.allSettled(promises)
-      if (results.some(result => result.status === 'rejected')) {
-        // eslint-disable-next-line @typescript-eslint/no-throw-literal
-        throw {
-          errorFields: results.filter(res => res.status === 'rejected'),
-          values,
-        }
-      }
-      return values as T
-    },
-    setFieldValue(name, value) {
-      set(values, name, value)
-    },
-  }
-
-  onMount(() => {
-    if (typeof _props.ref === 'function') {
-      _props.ref?.(formInstance)
-    }
-  })
-
-  // 存储 form item 的 dom 节点宽度
-  const [itemWidthDict, setItemWidthDict] = createSignal<Record<string, number>>({})
-  const maxItemWidth = createMemo(() => max(Object.values(itemWidthDict())))
-
-  return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-      }}
-    >
-      <Context.Provider
-        value={{
-          formInstance,
-          rulesDict,
-          setErrMsgDict,
-          initialValues: props.initialValues as {},
-          setItemWidthDict,
-          maxItemWidth,
-        }}
-      >
-        {props.children}
-      </Context.Provider>
-    </form>
-  )
-}
-
-export default Form

package/src/Form/FormItem.tsx

@@ -1,141 +0,0 @@
-import {
-  type JSXElement,
-  type Component,
-  type JSX,
-  Show,
-  useContext,
-  createSignal,
-  onMount,
-  onCleanup,
-} from 'solid-js'
-import { get, isNil } from 'lodash-es'
-import { Dynamic } from 'solid-js/web'
-import { nanoid } from 'nanoid'
-import cs from 'classnames'
-import { type Schema } from 'yup'
-import Context from './context'
-
-export interface FormItemComponentProps<T = any> {
-  defaultValue?: T
-  status?: 'error' | 'warning'
-  onChange?: (value: T) => void
-}
-
-export interface FormItemProps {
-  class?: string
-  style?: JSX.CSSProperties
-  required?: boolean
-  label?: JSXElement
-  name?: string
-  initialValue?: any
-  rules?: Schema[]
-  component: Component<FormItemComponentProps>
-}
-
-const FormItem: Component<FormItemProps> = props => {
-  const { formInstance, rulesDict, setErrMsgDict, initialValues, setItemWidthDict, maxItemWidth } =
-    useContext(Context)
-  const [errMsg, setErrMsg] = createSignal('')
-  const id = nanoid()
-
-  onMount(() => {
-    if (isNil(props.name)) return
-
-    if (!isNil(props.initialValue)) {
-      formInstance.setFieldValue(props.name, props.initialValue)
-    }
-
-    if (!isNil(props.rules)) {
-      rulesDict[props.name] = props.rules
-    }
-
-    setErrMsgDict[props.name] = setErrMsg
-  })
-
-  let label: HTMLLabelElement
-  onMount(() => {
-    const resizeObserver = new ResizeObserver(entries => {
-      const [entry] = entries
-      // Firefox implements `borderBoxSize` as a single content rect, rather than an array
-      const borderBoxSize: ResizeObserverSize = Array.isArray(entry.borderBoxSize)
-        ? entry.borderBoxSize[0]
-        : entry.borderBoxSize
-      setItemWidthDict(dict => ({
-        ...dict,
-        [id]: borderBoxSize.inlineSize,
-      }))
-    })
-
-    resizeObserver.observe(label)
-
-    onCleanup(() => {
-      setItemWidthDict(dict => {
-        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-        delete dict[id]
-        return { ...dict }
-      })
-      resizeObserver.disconnect()
-    })
-  })
-
-  const getLabel = (hidden?: boolean) => (
-    <label
-      class={cs(
-        'ant-shrink-0 ant-h-32px ant-leading-32px not[:empty]:ant-pr-8px ant-text-right ant-[white-space:nowrap]',
-        hidden && 'ant-absolute ant-opacity-0',
-      )}
-      {...(hidden
-        ? {
-          ref: el => {
-            label = el
-          },
-        }
-        : {
-          style: { width: `${maxItemWidth() ?? 0}px` },
-        })}
-    >
-      <Show when={!isNil(props.required)}>
-        <span class="ant-mr-4px ant-text-[var(--ant-color-error)]">*</span>
-      </Show>
-      <Show when={!isNil(props.label)}>
-        <label>{props.label}</label>
-      </Show>
-    </label>
-  )
-
-  return (
-    <div class={cs(props.class, 'ant-flex ant-items-center ant-mb-16px')} style={props.style}>
-      {/* 第一个 label 仅用于计算实际宽度 */}
-      {getLabel(true)}
-      {getLabel()}
-
-      <div class="ant-w-full">
-        <Dynamic
-          component={props.component}
-          defaultValue={props.initialValue ?? get(initialValues, props.name!)}
-          status={errMsg() ? 'error' : undefined}
-          onChange={(value: any) => {
-            if (!isNil(props.name)) formInstance.setFieldValue(props.name, value)
-
-            props.rules?.forEach(rule => {
-              rule
-                .validate(value)
-                .then(() => {
-                  setErrMsg('')
-                })
-                .catch(err => {
-                  setErrMsg(err.message)
-                })
-            })
-          }}
-        />
-
-        <Show when={errMsg()}>
-          <div class="ant-text-[var(--ant-color-error)]">{errMsg()}</div>
-        </Show>
-      </div>
-    </div>
-  )
-}
-
-export default FormItem

package/src/Form/context.ts

@@ -1,16 +0,0 @@
-import { type Setter, createContext, type Accessor } from 'solid-js'
-import { type FormInstance } from './Form'
-import { type Schema } from 'yup'
-
-const Context = createContext(
-  {} as {
-    formInstance: FormInstance
-    rulesDict: Record<string, Schema[]>
-    setErrMsgDict: Record<string, Setter<string>>
-    initialValues: {}
-    setItemWidthDict: Setter<Record<string, number>>
-    maxItemWidth: Accessor<number | undefined>
-  },
-)
-
-export default Context

package/src/Form/index.ts

@@ -1,13 +0,0 @@
-import InternalForm from './Form'
-import FormItem from './FormItem'
-
-export type { FormInstance, FormProps } from './Form'
-export type { FormItemProps, FormItemComponentProps } from './FormItem'
-
-const Form = InternalForm as typeof InternalForm & {
-  Item: typeof FormItem
-}
-
-Form.Item = FormItem
-
-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