feat(time-picker): 新增前缀后缀内容扩展(#2903)

.changeset/rude-sheep-argue.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/time-picker": minor
+---
+
+feat: 新增前缀后缀内容扩展

.changeset/silent-gifts-suffer.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(time-picker): 新增前缀后缀内容扩展

packages/ui/time-picker/src/TimePicker.tsx

@@ -65,6 +65,7 @@ export const TimePicker = forwardRef<HTMLDivElement | null, TimePickerProps>(
       overlay,
       size = 'md',
       invalid = false,
+      prefix,
     },
     ref
   ) => {
@@ -258,6 +259,7 @@ export const TimePicker = forwardRef<HTMLDivElement | null, TimePickerProps>(
     return (
       <div ref={ref} role={role} className={cls}>
         <div ref={setAttachEl} className={`${prefixCls}__input-wrapper`}>
+          {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
           <Input
             size={size}
             isFitContent={appearance === 'unset'}
@@ -409,6 +411,10 @@ export interface TimePickerProps extends ExtendType {
    * @default false
    */
   invalid?: boolean
+  /**
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
 }
 
 if (__DEV__) {

packages/ui/time-picker/src/styles/time-picker.scss

@@ -16,6 +16,16 @@ $input-wrapper-class: '#{$prefix}__input-wrapper' !default;
     align-items: center;
   }
 
+  &__prefix {
+    display: inline-flex;
+    margin-left: use-spacing(6);
+    align-items: center;
+    flex-shrink: 0;
+    color: use-color('gray', 700);
+    font-size: inherit;
+    text-align: center;
+  }
+
   &--appearance-line {
     position: relative;
     z-index: 0;

packages/ui/time-picker/stories/addon.stories.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import TimePicker from '../src'
+import { AppStoreOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前置后置内容扩展
+ */
+export const Addon = () => {
+  const [addonValue, setAddonValue] = useState<string | string[]>(['12:00:00'])
+
+  return (
+    <>
+      <h1>Addon</h1>
+      <div className="time-picker-addon__wrap">
+        <TimePicker
+          placeholder={['请选择时间']}
+          value={addonValue}
+          onChange={(e) => {
+            console.log('basic-default', e)
+            setAddonValue(e)
+          }}
+          prefix={<AppStoreOutlined />}
+        />
+      </div>
+    </>
+  )
+}

packages/ui/time-picker/stories/index.stories.tsx

@@ -8,6 +8,7 @@ export * from './disabled.stories'
 export * from './range.stories'
 export * from './format.stories'
 export * from './custom-disabled.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/TimePicker',