antd-solid 0.0.10 → 0.0.12

package/src/Select.tsx

@@ -33,7 +33,9 @@ const Select: Component<SelectProps> = props => {
 
   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 selectedOption = createMemo(() =>
+    !isNil(value()) ? props.options.find(option => option.value === value()) : undefined,
+  )
 
   const [open, setOpen] = createSignal(false)
   useClickAway(
@@ -63,7 +65,7 @@ const Select: Component<SelectProps> = props => {
               <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)]' : '',
+                  selectedValue(item.value) ? '!ant-bg-[var(--ant-select-option-selected-bg)]' : '',
                 )}
                 onClick={() => {
                   setValue(item.value)
@@ -79,7 +81,10 @@ const Select: Component<SelectProps> = props => {
     >
       <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)}
+        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(--ant-color-primary)]',
+          props.class,
+        )}
         tabIndex="0"
         onClick={e => {
           setOpen(true)
@@ -109,7 +114,12 @@ const Select: Component<SelectProps> = props => {
           </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)]" />}>
+            <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 => {

package/src/Spin.tsx

@@ -1,19 +1,30 @@
-import { Show, type Component, type ParentProps } from 'solid-js'
+import { Show, type Component, type ParentProps, mergeProps } from 'solid-js'
 
 interface SpinProps extends ParentProps {
   /**
    * 是否为加载中状态
    */
   spinning?: boolean
+  size?: number
 }
 
-const Spin: Component<SpinProps> = props => {
+const Spin: Component<SpinProps> = _props => {
+  const props = mergeProps(
+    {
+      size: 20,
+    },
+    _props,
+  )
+
   return (
-    <div class="ant-relative ant-min-h-32px">
+    <div>
       {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 class="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-[var(--ant-color-primary)]"
+            style={{ 'font-size': `${props.size}px` }}
+          />
         </div>
       </Show>
     </div>

package/src/Switch.tsx

@@ -17,7 +17,7 @@ const Switch: Component<SwitchProps> = props => {
     <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)]',
+        checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]',
       )}
       onClick={() => setChecked(c => !c)}
     >

package/src/Tabs.tsx

@@ -92,7 +92,7 @@ const Tabs: Component<TabsProps> = _props => {
                   class={cs(
                     'ant-py-12px ant-cursor-pointer',
                     props.navItemClass,
-                    isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected',
+                    isSelectedItem(item.key) && 'ant-text-[var(--ant-color-primary)] selected',
                   )}
                   onClick={() => {
                     setSelectedItem(item)
@@ -106,7 +106,7 @@ const Tabs: Component<TabsProps> = _props => {
 
             <div
               role={'selected-bar' as any}
-              class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left"
+              class="ant-absolute ant-bottom-0 ant-bg-[var(--ant-color-primary)] ant-h-2px ant-transition-left"
               style={selectedBarStyle()}
             />
           </div>

package/src/Timeline.tsx

@@ -21,7 +21,7 @@ const Timeline: Component<TimelineProps> = props => {
             {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-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--ant-color-primary)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]" />
             <div class="ant-ml-[8px]">{item.children?.()}</div>
           </div>
         )}

package/src/Tree.tsx

@@ -98,7 +98,8 @@ function SingleLevelTree<T extends {} = {}>(props: SingleLevelTreeProps<T>) {
             <div
               class={cs(
                 'ant-flex ant-items-center ant-h-28px ant-pb-4px',
-                isDraggable(item()) && 'ant-[border:1px_solid_var(--primary-color)] ant-bg-white',
+                isDraggable(item()) &&
+                  'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-white',
                 draggableNode() && 'child[]:ant-pointer-events-none',
               )}
               draggable={draggable}
@@ -168,9 +169,9 @@ function SingleLevelTree<T extends {} = {}>(props: SingleLevelTreeProps<T>) {
                 class={cs(
                   'ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative',
                   props.blockNode && 'w-full',
-                  selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]',
+                  selectedNodes()?.includes(item()) && '!ant-bg-[var(--ant-tree-node-selected-bg)]',
                   isTarget(item()) &&
-                    "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--primary-color)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--primary-color)]",
+                    "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--ant-color-primary)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--ant-color-primary)]",
                 )}
                 onClick={() => {
                   setSelectedNodes([item()])

package/src/Upload.tsx

@@ -1,10 +1,143 @@
-import { reactToSolidComponent, replaceChildren, replaceClassName } from './utils/component'
-import { Upload as UploadAntd } from 'antd'
+import { nanoid } from 'nanoid'
+import { type Component, mergeProps, type ParentProps, createSignal, type Signal } from 'solid-js'
 
-export type { UploadFile } from 'antd/es/upload'
+interface UploadProgressEvent extends Partial<ProgressEvent> {
+  percent?: number
+}
 
-const Upload = replaceChildren(replaceClassName(reactToSolidComponent(UploadAntd)))
+export interface UploadRequestOption<T = any> {
+  file: File
+  onProgress?: (event: UploadProgressEvent) => void
+  onError?: (event: Error) => void
+  onSuccess?: (body: T) => void
+}
 
-export type UploadProps = Parameters<typeof Upload>[0]
+export interface UploadFile<T = any> {
+  /**
+   * 文件唯一标识
+   */
+  id: string
+  /**
+   * 文件名
+   */
+  name: string
+  /**
+   * MIME 类型
+   */
+  type?: string
+  /**
+   * 文件大小
+   */
+  size?: number
+  file?: File
+  response?: T
+  status?: 'pending' | 'uploading' | 'error' | 'finished'
+  percent?: number
+  /**
+   * 下载地址
+   */
+  url?: string
+}
+
+export interface UploadProps<T = any> extends ParentProps {
+  class?: string
+  accept?: string
+  /**
+   * 上传的地址
+   */
+  action?: string
+  /**
+   * 上传请求的 http method
+   * 默认 'post'
+   */
+  method?: string
+  customRequest?: (option: UploadRequestOption<T>) => void
+  onAdd?: (fileList: Array<Signal<T>>) => void
+  multiple?: boolean
+}
+
+function request(file: File, customRequest: UploadProps['customRequest']) {
+  const id = `upload-${nanoid()}`
+  // eslint-disable-next-line solid/reactivity
+  const uploadFileSignal = createSignal<UploadFile>({
+    id,
+    file,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    status: 'pending',
+    percent: 0,
+  })
+
+  const [, setUploadFile] = uploadFileSignal
+
+  customRequest?.({
+    file,
+    onProgress(event) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'uploading',
+        percent: event.percent ?? 0,
+      }))
+    },
+    onSuccess(response) {
+      setUploadFile(value => ({ ...value, status: 'finished', response }))
+    },
+    onError() {
+      setUploadFile(value => ({ ...value, status: 'error' }))
+    },
+  })
+
+  return uploadFileSignal
+}
+
+const Upload: Component<UploadProps> & {
+  request: typeof request
+} = _props => {
+  let input: HTMLInputElement | undefined
+  const props = mergeProps(
+    {
+      customRequest: ({ file, onSuccess, onError }) => {
+        if (!_props.action) return
+
+        const formData = new FormData()
+        formData.append('file', file)
+        fetch(_props.action, {
+          method: _props.method ?? 'post',
+          body: formData,
+        })
+          .then(onSuccess)
+          .catch(onError)
+      },
+    } as UploadProps,
+    _props,
+  )
+
+  return (
+    <span class={props.class} onClick={() => input?.click()}>
+      {props.children}
+
+      <input
+        ref={input}
+        class="hidden"
+        type="file"
+        accept={props.accept}
+        multiple={props.multiple}
+        onInput={e => {
+          const fileList: Array<Signal<UploadFile>> = []
+          for (const file of e.target.files ?? []) {
+            const uploadFileSignal = request(file, props.customRequest)
+            fileList.push(uploadFileSignal)
+          }
+
+          props.onAdd?.(fileList)
+          e.target.value = ''
+        }}
+      />
+    </span>
+  )
+}
+
+Upload.request = request
 
 export default Upload

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/Compact.tsx

@@ -1,15 +0,0 @@
-import { type ParentProps } from 'solid-js'
-
-interface CompactProps extends ParentProps {}
-
-function Compact(props: CompactProps) {
-  return <div class="ant-compact ant-flex">{props.children}</div>
-}
-
-Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px'
-Compact.compactItemRounded0Class = 'p[.ant-compact>*]:ant-rounded-0'
-Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px'
-Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px'
-Compact.compactItemZIndexClass = 'p[.ant-compact>*]:focus:ant-z-10 p[.ant-compact>*]:focus-within:ant-z-10'
-
-export default Compact

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