antd-solid 0.0.9 → 0.0.11

package/src/Drawer/index.tsx

@@ -0,0 +1,212 @@
+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/{form → Form}/FormItem.tsx

@@ -67,7 +67,7 @@ const FormItem: Component<FormItemProps> = props => {
     })
 
     resizeObserver.observe(label)
-    
+
     onCleanup(() => {
       setItemWidthDict(dict => {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
@@ -84,13 +84,15 @@ const FormItem: Component<FormItemProps> = props => {
         '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
+      {...(hidden
+        ? {
+          ref: el => {
+            label = el
+          },
         }
-      }: {
-        style: { width: `${maxItemWidth() ?? 0}px` }
-      }}
+        : {
+          style: { width: `${maxItemWidth() ?? 0}px` },
+        })}
     >
       <Show when={!isNil(props.required)}>
         <span class="ant-mr-4px ant-text-[var(--ant-color-error)]">*</span>

package/src/Modal.tsx

@@ -6,6 +6,11 @@ import cs from 'classnames'
 export interface ModalInstance {
   open: () => void
   close: () => void
+  /**
+   * 与 close 相似，但关闭时会销毁 Modal 里的子元素
+   * @returns
+   */
+  destroy: () => void
 }
 
 export interface ModalProps {
@@ -29,10 +34,6 @@ export interface ModalProps {
    */
   closeIcon?: boolean
   footer?: boolean | ((modal: ModalInstance) => JSXElement)
-  /**
-   * 关闭时销毁 Modal 里的子元素	
-   */
-  destroyOnClose?: boolean
   /**
    * 返回 true，会自动关闭 modal
    */
@@ -51,20 +52,37 @@ function Modal(_props: ModalProps) {
   const props = mergeProps({ footer: true }, _props)
   const [open, setOpen] = createSignal(props.defaultOpen ?? false)
   const [hide, setHide] = createSignal(false)
+  let cleanup: () => void
 
   const instance: ModalInstance = {
     open() {
       setOpen(true)
       setHide(false)
+
+      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)
-        }
-      })
+      setHide(true)
+      cleanup()
+      props.afterClose?.()
+    },
+    destroy() {
+      setOpen(false)
+      cleanup()
+      props.afterClose?.()
     },
   }
   untrack(() => {
@@ -73,11 +91,6 @@ function Modal(_props: ModalProps) {
     }
   })
 
-  const close = () => {
-    instance.close()
-    props.afterClose?.()
-  }
-
   const [confirmLoading, setConfirmLoading] = createSignal(false)
 
   return (
@@ -90,7 +103,7 @@ function Modal(_props: ModalProps) {
           )}
           onClick={() => {
             if (props.maskClosable ?? true) {
-              close()
+              instance.close()
             }
           }}
           style={{ display: hide() ? 'none' : undefined }}
@@ -117,7 +130,9 @@ function Modal(_props: ModalProps) {
                   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}
+                  onClick={() => {
+                    instance.close()
+                  }}
                 >
                   <span class="i-ant-design:close-outlined" />
                 </Button>
@@ -130,9 +145,18 @@ function Modal(_props: ModalProps) {
 
               <Show when={props.footer !== false}>
                 <div class="ant-mt-12px">
-                  <Show when={typeof props.footer !== 'function'} fallback={typeof props.footer === 'function' && props.footer(instance)}>
-                    <div class='ant-flex ant-gap-8px ant-justify-end'>
-                      <Button onClick={close}>取消</Button>
+                  <Show
+                    when={typeof props.footer !== 'function'}
+                    fallback={typeof props.footer === 'function' && props.footer(instance)}
+                  >
+                    <div class="ant-flex ant-gap-8px ant-justify-end">
+                      <Button
+                        onClick={() => {
+                          instance.close()
+                        }}
+                      >
+                        取消
+                      </Button>
                       <Button
                         type="primary"
                         loading={confirmLoading()}
@@ -150,7 +174,7 @@ function Modal(_props: ModalProps) {
                           }
                         }}
                       >
-                      确定
+                        确定
                       </Button>
                     </div>
                   </Show>

package/src/Progress/index.tsx

@@ -0,0 +1,73 @@
+import { mergeProps, type Component, Switch, Match, Show } from 'solid-js'
+import cs from 'classnames'
+
+export interface ProgressProps {
+  /**
+   * 百分比
+   * 默认 0
+   */
+  percent?: number
+  /**
+   * 状态
+   * 默认 'default'
+   */
+  status?: 'default' | 'success' | 'error'
+  /**
+   * 'line' 类型进度条的高度
+   * 默认 8
+   */
+  height?: number
+  /**
+   * 是否显示进度数值或状态图标
+   * 默认 true
+   */
+  showInfo?: boolean
+}
+
+const Progress: Component<ProgressProps> = _props => {
+  const props = mergeProps(
+    {
+      percent: 0,
+      status: 'default',
+      height: 8,
+      showInfo: true,
+    } as Required<ProgressProps>,
+    _props,
+  )
+
+  return (
+    <div
+      class="ant-flex ant-items-center"
+      style={{
+        '--ant-progress-remaining-color': 'rgba(0, 0, 0, 0.06)',
+      }}
+    >
+      <div
+        class={cs(
+          'ant-w-full ant-bg-[var(--ant-progress-remaining-color)]',
+          'before:ant-content-empty before:ant-block before:ant-bg-[var(--primary-color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit',
+        )}
+        style={{
+          height: `${props.height}px`,
+          'border-radius': `${props.height / 2}px`,
+          '--percent': `${props.percent}%`,
+        }}
+      />
+
+      <Show when={props.showInfo}>
+        <span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">
+          <Switch fallback={`${props.percent}%`}>
+            <Match when={props.status === 'success' || props.percent >= 100}>
+              <span class="i-ant-design:check-circle-filled ant-text-[var(--primary-color)]" />
+            </Match>
+            <Match when={props.status === 'error'}>
+              <span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]" />
+            </Match>
+          </Switch>
+        </span>
+      </Show>
+    </div>
+  )
+}
+
+export default Progress

package/src/Radio.tsx

@@ -39,20 +39,28 @@ const Radio: Component<RadioProps> & {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined,
+    trigger: null,
   })
 
   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))
-        }}
-      />
+    <label class="ant-inline-flex ant-gap-4px ant-cursor-pointer ant-inline-flex ant-items-center">
+      <span
+        class={cs(
+          'ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]',
+          checked() && 'ant-[border:5px_solid_var(--primary-color)]',
+        )}
+      >
+        <input
+          class="ant-m-0 ant-hidden"
+          checked={checked()}
+          value={props.value ?? ''}
+          type="radio"
+          onInput={e => {
+            setChecked(e.target.checked)
+            untrack(() => props.onChange?.(e))
+          }}
+        />
+      </span>
       {props.children}
     </label>
   )
@@ -63,7 +71,7 @@ Radio.Button = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined,
+    trigger: null,
   })
 
   return (
@@ -97,7 +105,7 @@ Radio.Group = _props => {
     _props,
   )
   const [value, setValue] = createControllableValue<string>(props, {
-    trigger: undefined,
+    trigger: null,
   })
   const isChecked = createSelector(value)
 
@@ -117,7 +125,9 @@ Radio.Group = _props => {
             onChange={
               (e => {
                 setValue(option.value)
-                untrack(() => props.onChange?.(e))
+                untrack(() => {
+                  props.onChange?.(e)
+                })
               }) as JSX.ChangeEventHandler<HTMLInputElement, Event>
             }
           >

package/src/hooks/createControllableValue.ts

@@ -5,7 +5,7 @@ export interface Options<T> {
   defaultValue?: T
   defaultValuePropName?: string
   valuePropName?: string
-  trigger?: string | undefined
+  trigger?: string | null
 }
 
 export type Props = Record<string, any>
@@ -46,8 +46,8 @@ function createControllableValue<T = any>(props: Props, options: Options<T> = {}
   })
 
   const setValue = (v: ((prev: T) => T) | T | undefined) => {
-    const newValue = typeof v === 'function'? (v as (prev: T) => T)(value()!) : v
-    
+    const newValue = typeof v === 'function' ? (v as (prev: T) => T)(value()!) : v
+
     if (!isControlled()) {
       _setValue(newValue as any)
     }

package/src/hooks/createTransition.ts

@@ -0,0 +1,52 @@
+import { createEffect, type Accessor, on } from 'solid-js'
+
+/**
+ * dom 节点显示或隐藏时的动画
+ * @param target
+ * @param when
+ * @param className 动画类名
+ */
+export default function createTransition(
+  target: Accessor<HTMLElement | undefined | null>,
+  when: Accessor<boolean>,
+  className: string,
+) {
+  createEffect(
+    on(when, input => {
+      const targetValue = target()
+      if (!targetValue) return
+
+      if (input) {
+        targetValue.style.display = ''
+        targetValue.classList.add(
+          `${className}-enter-active`,
+          `${className}-enter`,
+          `${className}-enter-to`,
+        )
+        requestAnimationFrame(() => {
+          targetValue!.classList.remove(`${className}-enter`)
+        })
+        const onTransitionEnd = () => {
+          targetValue!.classList.remove(`${className}-enter-active`, `${className}-enter-to`)
+          targetValue!.removeEventListener('transitionend', onTransitionEnd)
+        }
+        targetValue.addEventListener('transitionend', onTransitionEnd)
+      } else {
+        targetValue.classList.add(
+          `${className}-exit-active`,
+          `${className}-exit`,
+          `${className}-exit-to`,
+        )
+        requestAnimationFrame(() => {
+          targetValue!.classList.remove(`${className}-exit`)
+        })
+        const onTransitionEnd = () => {
+          targetValue!.style.display = 'none'
+          targetValue!.classList.remove(`${className}-exit-active`, `${className}-exit-to`)
+          targetValue!.removeEventListener('transitionend', onTransitionEnd)
+        }
+        targetValue.addEventListener('transitionend', onTransitionEnd)
+      }
+    }),
+  )
+}

package/src/index.ts

@@ -6,6 +6,8 @@ export type { InputNumberProps } from './InputNumber'
 export { default as Timeline } from './Timeline'
 export { default as Modal } from './Modal'
 export type { ModalInstance } from './Modal'
+export { default as Drawer } from './Drawer'
+export type { DrawerProps, DrawerInstance } from './Drawer'
 export { default as DatePicker } from './DatePicker'
 export { default as Select } from './Select'
 export { default as Tree } from './Tree'
@@ -16,6 +18,7 @@ export { default as ColorPicker } from './ColorPicker'
 export type { ColorPickerProps } from './ColorPicker'
 export { default as Result } from './Result'
 export { default as Progress } from './Progress'
+export type { ProgressProps } from './Progress'
 export { default as Tabs } from './Tabs'
 export type { TabsProps, Tab } from './Tabs'
 export { default as Popconfirm } from './Popconfirm'
@@ -23,8 +26,8 @@ export { default as Upload } from './Upload'
 export type { UploadProps, UploadFile } from './Upload'
 export { default as Radio } from './Radio'
 export type { RadioProps, RadioGroupProps } from './Radio'
-export { default as Form } from './form'
-export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './form'
+export { default as Form } from './Form'
+export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './Form'
 export { default as Switch } from './Switch'
 export type { SwitchProps } from './Switch'
 export { default as Skeleton } from './Skeleton'

package/src/utils/solid.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { type JSXElement, type JSX } from 'solid-js'
+import { type JSXElement, type JSX, untrack, type Ref } from 'solid-js'
 import { isNil } from 'lodash-es'
 import SolidToReact from './SolidToReact'
 import { type StringOrJSXElement } from '../types'
@@ -51,3 +51,11 @@ export function dispatchEventHandlerUnion<T, E extends Event>(
 export function unwrapStringOrJSXElement(value: StringOrJSXElement): JSXElement {
   return typeof value === 'function' ? value() : value
 }
+
+export function setRef<T>(props: { ref?: Ref<T> }, value: T | null) {
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      ;(props.ref as (v: T | null) => void)?.(value)
+    }
+  })
+}

package/es/Progress.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare const _default: import("solid-js").Component<Omit<Omit<import("antd").ProgressProps & import("react").RefAttributes<HTMLDivElement>, "className"> & {
-    class?: string | undefined;
-}, "children"> & {
-    children?: import("solid-js").JSX.Element;
-}>;
-export default _default;

package/es/Progress.js

@@ -1,6 +0,0 @@
-import { Progress as Progress$1 } from 'antd';
-import { replaceChildren, replaceClassName, reactToSolidComponent } from './utils/component.js';
-
-var Progress = replaceChildren(replaceClassName(reactToSolidComponent(Progress$1)));
-
-export { Progress as default };

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