antd-solid 0.0.5 → 0.0.6

package/src/InputNumber.tsx

@@ -0,0 +1,125 @@
+import { type Component, createEffect, on, splitProps, untrack, createSignal, mergeProps } from 'solid-js'
+import { CommonInput, type InputProps } from './Input'
+import { clamp, isNil } from 'lodash-es'
+import { dispatchEventHandlerUnion } from './utils/solid'
+
+export interface InputNumberProps
+  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 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 props = mergeProps({
+    min: -Infinity,
+    max: Infinity,
+  }, _props)
+  const [_, inputProps] = splitProps(props, [
+    'defaultValue',
+    'value',
+    'onChange',
+    'onBlur',
+  ])
+
+  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
+
+    prev = v
+    props.onChange?.(prev)
+  }
+
+  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}
+      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_var(--ant-color-border)] ${actionBtnClass}`}
+            onClick={down}
+          >
+            <div class="i-ant-design:down-outlined" />
+          </div>
+        </div>
+      }
+      value={`${value() ?? ''}`}
+      onKeyDown={e => {
+        switch (e.key) {
+          case 'ArrowUp':
+            up()
+            e.preventDefault()
+            return
+          case 'ArrowDown':
+            down()
+            e.preventDefault()
+        }
+      }}
+      onChange={e => {
+        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 => {
+        setValue(props.value ?? prev)
+
+        dispatchEventHandlerUnion(props.onBlur, e)
+      }}
+    />
+  )
+}
+
+export default InputNumber

package/src/Modal.tsx

@@ -0,0 +1,196 @@
+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'
+
+export interface ModalInstance {
+  open: () => void
+  close: () => void
+}
+
+export interface ModalProps {
+  ref?: Ref<ModalInstance>
+  title?: JSXElement
+  defaultOpen?: boolean
+  width?: string
+  height?: string
+  children?: JSXElement
+  /**
+   * 垂直居中展示 Modal
+   */
+  centered?: boolean
+  /**
+   * 点击蒙层是否允许关闭
+   * 默认 true
+   */
+  maskClosable?: boolean
+  /**
+   * 设置为 false 时隐藏关闭按钮
+   */
+  closeIcon?: boolean
+  footer?: boolean | ((modal: ModalInstance) => JSXElement)
+  /**
+   * 关闭时销毁 Modal 里的子元素	
+   */
+  destroyOnClose?: boolean
+  /**
+   * 返回 true，会自动关闭 modal
+   */
+  onOk?: () => boolean | Promise<boolean>
+  afterClose?: () => void
+  /**
+   * 自定义渲染对话框
+   */
+  modalRender?: () => JSXElement
+}
+
+export interface MethodProps
+  extends Pick<ModalProps, 'title' | 'children' | 'onOk' | '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() {
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false)
+        } else {
+          setHide(true)
+        }
+      })
+    },
+  }
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(instance)
+    }
+  })
+
+  const close = () => {
+    instance.close()
+    props.afterClose?.()
+  }
+
+  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()
+            }
+          }}
+          style={{ display: hide() ? 'none' : undefined }}
+        >
+          <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>
+
+              <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>
+                    </div>
+                  </Show>
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </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>}
+        defaultOpen
+        afterClose={() => {
+          document.body.removeChild(div)
+          dispose()
+          props.afterClose?.()
+        }}
+      />
+    ),
+    div,
+  )
+}
+
+export default Modal

package/src/Popconfirm.tsx

@@ -0,0 +1,75 @@
+import { type Component, type JSXElement, createSignal, mergeProps, untrack, splitProps } from 'solid-js'
+import Button from './Button'
+import Tooltip, { type TooltipProps } from './Tooltip'
+
+interface PopconfirmProps extends Pick<TooltipProps, 'placement' | 'arrow'> {
+  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 [tooltipProps] = splitProps(props, ['placement', 'arrow'])
+  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>
+      }
+      {...tooltipProps}
+    >
+      {mergedProps.children}
+    </Tooltip>
+  )
+}
+
+export default Popconfirm

package/src/Popover.tsx

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

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

package/src/Radio.tsx

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

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