antd-solid 0.0.2 → 0.0.3

package/src/InputNumber.tsx

@@ -1,91 +1,87 @@
-import { type Component, createEffect, on, splitProps } from 'solid-js'
+import { type Component, createEffect, on, splitProps, untrack, createSignal, mergeProps } from 'solid-js'
 import { CommonInput, type InputProps } from './Input'
-import { isNil } from 'lodash-es'
-import createControllableValue from './hooks/createControllableValue'
+import { clamp, isNil } from 'lodash-es'
 import { dispatchEventHandlerUnion } from './utils/solid'
 
 export interface InputNumberProps
-  extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown'> {
+  extends Omit<
+  InputProps,
+  'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown' | 'min' | 'max' | 'suffix'
+  > {
   defaultValue?: number | null | undefined
   value?: number | null | undefined
   onChange?: (value: number | null) => void
+  min?: number
+  max?: number
 }
 
 const isEmptyValue = (value: number | string | null | undefined) => isNil(value) || value === ''
 
-const formatNum = (
-  v: number | string | null | undefined,
-  prev?: number | null | undefined,
-): number | null => {
-  if (isEmptyValue(v)) {
-    return null
-  }
-
-  const num = Number(v)
-  if (prev !== undefined && Number.isNaN(num)) {
-    return prev
-  }
-
-  return num
-}
-
 const actionBtnClass =
   'ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500'
 
-const InputNumber: Component<InputNumberProps> = props => {
-  const [{ onChange, onBlur }, inputProps] = splitProps(props, [
+const InputNumber: Component<InputNumberProps> = _props => {
+  const props = mergeProps({
+    min: -Infinity,
+    max: Infinity,
+  }, _props)
+  const [_, inputProps] = splitProps(props, [
     'defaultValue',
     'value',
     'onChange',
     'onBlur',
   ])
 
-  const [_, controllableProps] = splitProps(props, ['onChange'])
-  const [value, setValue] = createControllableValue<number | string | null | undefined>(
-    controllableProps,
-  )
-  const add = (addon: number) => {
-    setValue(v => {
-      if (isEmptyValue(v)) {
-        return addon
-      }
+  const clampValue = (v: number) => untrack(() => clamp(v, props.min, props.max))
+    
+  let prev: number | null = null
+  const updatePrev = (v: number | null) => {
+    if (prev === v) return
 
-      const num = Number(v)
-      if (Number.isNaN(num)) {
-        return v
-      }
-      return num + addon
-    })
+    prev = v
+    props.onChange?.(prev)
   }
-  const up = () => { add(1); }
-  const down = () => { add(-1); }
 
-  createEffect(
-    on(
-      value,
-      (input, __, prev: number | null | undefined) => {
-        const num = formatNum(input, prev)
-        if (num !== prev) {
-          prev = num
-          onChange?.(num)
-        }
-        return num
-      },
-      {
-        defer: true,
-      },
-    ),
-  )
+  const [value, setValue] = createSignal<number | string | null | undefined>(untrack(() => props.value ?? props.defaultValue))
+  createEffect(on(() => props.value, () => {
+    setValue(props.value)
+  }, {
+    defer: true
+  }))
+
+  const add = (addon: number) => {
+    let newValue: number | null
+    if (isEmptyValue(value())) {
+      newValue = clampValue(addon)
+    } else {
+      const num = Number(value())
+      newValue = Number.isNaN(num) ? null : clampValue(num + addon)
+    }
+
+    if (!Object.keys(props).includes('value')) {
+      setValue(newValue)
+    }
+    updatePrev(newValue)
+  }
+  const up = () => {
+    add(1)
+  }
+  const down = () => {
+    add(-1)
+  }
 
   return (
     <CommonInput
       {...inputProps}
-      inputAfter={
-        <div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_#d9d9d9]">
+      actions={
+        <div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]">
           <div class={actionBtnClass} onClick={up}>
             <div class="i-ant-design:up-outlined" />
           </div>
-          <div class={`ant-[border-top:1px_solid_#d9d9d9] ${actionBtnClass}`} onClick={down}>
+          <div
+            class={`ant-[border-top:1px_solid_var(--ant-color-border)] ${actionBtnClass}`}
+            onClick={down}
+          >
             <div class="i-ant-design:down-outlined" />
           </div>
         </div>
@@ -103,14 +99,24 @@ const InputNumber: Component<InputNumberProps> = props => {
         }
       }}
       onChange={e => {
-        const newValue = e.target.value || null
+        const newValue = e.target.value
         setValue(newValue)
+
+        let newValueNum: number | null = Number(newValue)
+        if (Number.isNaN(newValueNum)) return
+        
+        if (isEmptyValue(newValue)) {
+          newValueNum = null
+        } else {
+          newValueNum = clampValue(newValueNum)
+        }
+
+        updatePrev(newValueNum)
       }}
       onBlur={e => {
-        const newValue = e.target.value || null
-        setValue(formatNum(newValue))
+        setValue(props.value ?? prev)
 
-        dispatchEventHandlerUnion(onBlur, e)
+        dispatchEventHandlerUnion(props.onBlur, e)
       }}
     />
   )

package/src/Modal.tsx

@@ -1,4 +1,4 @@
-import { type JSXElement, Show, createSignal, untrack, Ref } from 'solid-js'
+import { type JSXElement, Show, createSignal, untrack, type Ref, mergeProps } from 'solid-js'
 import { Portal, render } from 'solid-js/web'
 import Button from './Button'
 import cs from 'classnames'
@@ -11,10 +11,9 @@ export interface ModalInstance {
 export interface ModalProps {
   ref?: Ref<ModalInstance>
   title?: JSXElement
-  initialOpen?: boolean
+  defaultOpen?: boolean
   width?: string
   height?: string
-  // open?: boolean
   children?: JSXElement
   /**
    * 垂直居中展示 Modal
@@ -29,29 +28,43 @@ export interface ModalProps {
    * 设置为 false 时隐藏关闭按钮
    */
   closeIcon?: boolean
+  footer?: boolean | ((modal: ModalInstance) => JSXElement)
+  /**
+   * 关闭时销毁 Modal 里的子元素	
+   */
+  destroyOnClose?: boolean
   /**
    * 返回 true，会自动关闭 modal
    */
-  onOk?: () => (boolean | Promise<boolean>)
+  onOk?: () => boolean | Promise<boolean>
   afterClose?: () => void
+  /**
+   * 自定义渲染对话框
+   */
+  modalRender?: () => JSXElement
 }
 
 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?.()
-  }
+function Modal(_props: ModalProps) {
+  const props = mergeProps({ footer: true }, _props)
+  const [open, setOpen] = createSignal(props.defaultOpen ?? false)
+  const [hide, setHide] = createSignal(false)
 
   const instance: ModalInstance = {
     open() {
       setOpen(true)
+      setHide(false)
     },
     close() {
-      setOpen(false)
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false)
+        } else {
+          setHide(true)
+        }
+      })
     },
   }
   untrack(() => {
@@ -60,6 +73,11 @@ function Modal(props: ModalProps) {
     }
   })
 
+  const close = () => {
+    instance.close()
+    props.afterClose?.()
+  }
+
   const [confirmLoading, setConfirmLoading] = createSignal(false)
 
   return (
@@ -75,61 +93,71 @@ function Modal(props: ModalProps) {
               close()
             }
           }}
+          style={{ display: hide() ? 'none' : undefined }}
         >
-          <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>
+          <Show when={typeof props.modalRender !== 'function'} fallback={props.modalRender!()}>
+            <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-[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
+              <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>
+                      <Button
+                        type="primary"
+                        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>
+                          let res = props.onOk?.()
+                          if (res instanceof Promise) {
+                            setConfirmLoading(true)
+                            res = await res.finally(() => setConfirmLoading(false))
+                          }
+                          if (res) {
+                            instance.close()
+                          }
+                        }}
+                      >
+                      确定
+                      </Button>
+                    </div>
+                  </Show>
+                </div>
+              </Show>
             </div>
-          </div>
+          </Show>
         </div>
       </Portal>
     </Show>
@@ -153,7 +181,7 @@ Modal.warning = (props: MethodProps) => {
           </>
         }
         children={<div class="ant-ml-34px">{props.children}</div>}
-        initialOpen
+        defaultOpen
         afterClose={() => {
           document.body.removeChild(div)
           dispose()

package/src/Popconfirm.tsx

@@ -1,8 +1,8 @@
-import { Component, JSXElement, createSignal, mergeProps, untrack } from 'solid-js'
+import { type Component, type JSXElement, createSignal, mergeProps, untrack, splitProps } from 'solid-js'
 import Button from './Button'
-import Tooltip from './Tooltip'
+import Tooltip, { type TooltipProps } from './Tooltip'
 
-interface PopconfirmProps {
+interface PopconfirmProps extends Pick<TooltipProps, 'placement' | 'arrow'> {
   title?: JSXElement
   content?: JSXElement
   children: JSXElement
@@ -22,6 +22,7 @@ interface PopconfirmProps {
 
 const Popconfirm: Component<PopconfirmProps> = props => {
   const mergedProps = mergeProps({ okText: '确定', cancelText: '取消' }, props)
+  const [tooltipProps] = splitProps(props, ['placement', 'arrow'])
   const [open, setOpen] = createSignal(false)
 
   return (
@@ -64,6 +65,7 @@ const Popconfirm: Component<PopconfirmProps> = props => {
           </div>
         </div>
       }
+      {...tooltipProps}
     >
       {mergedProps.children}
     </Tooltip>

package/src/Segmented/index.tsx

@@ -0,0 +1,95 @@
+import { type Component, For, createSelector, type JSX, Show } from 'solid-js'
+import cs from 'classnames'
+import { type StringOrJSXElement, type Key } from '../types'
+import createControllableValue from '../hooks/createControllableValue'
+import { unwrapStringOrJSXElement } from '../utils/solid'
+
+export interface SegmentedProps {
+  block?: boolean
+  disabled?: boolean
+  options: Array<
+  | string
+  | number
+  | {
+    label: StringOrJSXElement
+    value: string
+    disabled?: boolean
+    onClick?: (
+      e: MouseEvent & {
+        currentTarget: HTMLDivElement
+        target: Element
+      },
+    ) => void
+  }
+  >
+  value?: Key
+  onChange?: (value: Key) => void
+  class?: string
+  style?: JSX.CSSProperties
+}
+
+const unWarpValue = (value: SegmentedProps['options'][0]) =>
+  typeof value === 'object' ? value.value : value
+
+const Segmented: Component<SegmentedProps> = props => {
+  const [value, setValue] = createControllableValue<Key>(props, {
+    defaultValue: unWarpValue(props.options[0]),
+  })
+  const isSelected = createSelector(value)
+
+  const isDisabledValue = (v: SegmentedProps['options'][0]) => {
+    if (props.disabled) return true
+    return typeof v === 'object' ? v.disabled : false
+  }
+
+  return (
+    <div
+      class={cs(
+        'ant-bg-[var(--ant-color-bg-layout)] ant-rounded-[var(--ant-border-radius)] ant-p-2px',
+        props.block ? 'ant-flex' : 'ant-inline-flex',
+        props.class,
+      )}
+      style={{
+        '--ant-segmented-item-color': 'rgba(0, 0, 0, 0.65)',
+        '--ant-segmented-item-hover-bg': 'rgba(0, 0, 0, 0.06)',
+        '--ant-segmented-item-active-bg': 'rgba(0, 0, 0, 0.15)',
+        ...props.style,
+      }}
+    >
+      <For each={props.options}>
+        {item => (
+          <div
+            class={cs(
+              props.block && 'ant-basis-0 ant-grow-1',
+              isDisabledValue(item) && 'ant-cursor-not-allowed',
+            )}
+          >
+            <div
+              class={cs(
+                'ant-rounded-[var(--ant-border-radius-sm)] ant-px-[var(--ant-padding-sm)] where:ant-cursor-pointer ant-leading-28px where:hover:ant-bg-[var(--ant-segmented-item-hover-bg)] where:active:ant-bg-[var(--ant-segmented-item-active-bg)]',
+                isSelected(unWarpValue(item)) &&
+                  'ant-bg-white ant-shadow-[var(--ant-box-shadow-tertiary)]',
+                props.block && 'ant-flex ant-justify-center',
+                isDisabledValue(item) &&
+                  'ant-[pointer-events:none] ant-text-[var(--ant-color-text-disabled)]',
+              )}
+              onClick={e => {
+                setValue(unWarpValue(item))
+                typeof item === 'object' && item.onClick?.(e)
+              }}
+            >
+              <Show
+                when={typeof item !== 'object'}
+                fallback={typeof item === 'object' && unwrapStringOrJSXElement(item.label)}
+              >
+                {item as string | number}
+              </Show>
+            </div>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default Segmented

package/src/Select.tsx

@@ -1,6 +1,128 @@
-import { Select as SelectAntd } from 'antd'
-import { reactToSolidComponent, replaceClassName } from './utils/component'
+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'
 
-const Select = replaceClassName(reactToSolidComponent(SelectAntd))
+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/Switch.tsx

@@ -9,7 +9,7 @@ export interface SwitchProps {
 }
 
 const Switch: Component<SwitchProps> = props => {
-  const [checked, setChecked] = createControllableValue(props, {
+  const [checked, setChecked] = createControllableValue<boolean>(props, {
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
   })