@wzyjs/uis 0.3.8

package/src/components/TextInput/index.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import { Input } from 'antd'
+import { useBoolean } from '@wzyjs/hooks/web'
+
+interface TextInputProps {
+  value: string
+  onChange?: (value: string) => void
+}
+
+export const TextInput = (props: TextInputProps) => {
+  const { value, onChange } = props
+
+  const [text, setText] = useState(value)
+
+  const [isEditing, { setTrue, setFalse }] = useBoolean(false)
+
+  const onSubmit = () => {
+    if (!text.trim()) {
+      return
+    }
+
+    if (text === value) {
+      setFalse()
+      return
+    }
+
+    onChange?.(text.trim())
+    setFalse()
+  }
+
+  const onBlur = () => {
+    onSubmit()
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onSubmit()
+    }
+  }
+
+  return (
+    <div onDoubleClick={setTrue}>
+      {!isEditing ? (
+        <span>{text}</span>
+      ) : (
+        <Input
+          value={text}
+          onChange={ev => setText(ev.target.value)}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+          autoFocus
+          size='small'
+          style={{ width: 200 }}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/Video/index.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import React, { CSSProperties, useRef } from 'react'
+
+interface VideoProps {
+  url: string,
+  width?: number,
+  height?: number,
+  style?: CSSProperties
+}
+
+export const Video = (props: VideoProps) => {
+  const { url, width = 175, height = 310, style } = props
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  if (!url) {
+    return null
+  }
+
+  return (
+    <video
+      ref={videoRef}
+      width={width}
+      height={height}
+      style={style}
+      onMouseEnter={() => {
+        videoRef.current?.play()
+      }}
+      onMouseLeave={() => {
+        videoRef.current?.pause()
+      }}
+    >
+      <source src={url} type='video/mp4' />
+    </video>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,22 @@
+export * from './CodeView'
+export * from './HtmlPro'
+export * from './IframePro'
+export * from './FormPro'
+export * from './Com2Canvas'
+export * from './Video'
+export * from './MultiImageDisplay'
+export * from './DownloadLink'
+export * from './Fold'
+export * from './DragSort'
+export * from './DateSwitcher'
+export * from './GroupLayout'
+export * from './TextInput'
+export * from './SectorButton'
+export * from './Markdown'
+export * from './DynamicSelect'
+export * from './JsonRenderer'
+export * from './EnumTag'
+
+// export * from './JsonView'
+
+export { default as ReactEchart } from 'echarts-for-react'

package/src/web.ts

@@ -0,0 +1,2 @@
+export * from './antd'
+export * from './components'