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

* feat(time-picker): 新增前置后置内容扩展(#2903) * chore: 生成变更记录文件 * fix(time-picker): 修改变更记录格式规范(#2903) * fix(time-picker): 修改行内样式为class样式(#2093) * fix(time-picker): 修改前缀样式(#2903) * fix(time-picker): 修改前缀样式(#2903) * fix(time-picker): 修改前缀左间距(#2903) --------- Co-authored-by: yangxuexue <yangxuexue@xiaomi.com>
XiaoMi · Jun 28, 2024 · cfc6c97 · cfc6c97
1 parent 7ac6a76
commit cfc6c97
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 0 deletions.
diff --git a/.changeset/rude-sheep-argue.md b/.changeset/rude-sheep-argue.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/time-picker": minor
+---
+
+feat: 新增前缀后缀内容扩展
diff --git a/.changeset/silent-gifts-suffer.md b/.changeset/silent-gifts-suffer.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(time-picker): 新增前缀后缀内容扩展
diff --git a/packages/ui/time-picker/src/TimePicker.tsx b/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__) {

diff --git a/packages/ui/time-picker/src/styles/time-picker.scss b/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;

diff --git a/packages/ui/time-picker/stories/addon.stories.tsx b/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>
+    </>
+  )
+}
diff --git a/packages/ui/time-picker/stories/index.stories.tsx b/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',