docs: 优化组件示例 (#3009)

* docs: 更新组件示例 * docs: 优化组件示例 * docs(table): 补充SettingDrawer参数说明 * docs: 优化组件参数说明
XiaoMi · Sep 26, 2024 · c8e0288 · c8e0288
1 parent 4540c21
commit c8e0288
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 22 deletions.
diff --git a/packages/ui/check-cascader/stories/custom-render.stories.tsx b/packages/ui/check-cascader/stories/custom-render.stories.tsx
@@ -86,9 +86,9 @@ export const CusotmRender = () => {
           data={dataOnlyLeafCheckable}
           onChange={console.log}
           customRender={(data) => {
-            let value = []
+            let value = ''
             if (data) {
-              value = data.map((item) => item.title)
+              value = data?.map((item) => item?.title).join(',')
             }
             return <Input value={!value ? '' : value} placeholder="请选择" />
           }}

diff --git a/packages/ui/check-select/src/CheckSelect.tsx b/packages/ui/check-select/src/CheckSelect.tsx
@@ -486,7 +486,7 @@ export interface CheckSelectProps
    */
   onClose?: () => void
   /**
-   * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
+   * 是否开启全选功能
    */
   showCheckAll?: boolean
   /**

diff --git a/packages/ui/check-tree-select/src/CheckTreeSelect.tsx b/packages/ui/check-tree-select/src/CheckTreeSelect.tsx
@@ -605,7 +605,7 @@ export interface CheckTreeSelectProps
    */
   virtual?: boolean
   /**
-   * 是否开启全选功能，需要对数据全量操作。异步数据场景暂不支持，可自行渲染弹层底部实现
+   * 是否开启全选功能
    */
   showCheckAll?: boolean
   /**

diff --git a/packages/ui/check-tree-select/stories/addon.stories.tsx b/packages/ui/check-tree-select/stories/addon.stories.tsx
@@ -3,7 +3,7 @@ import CheckTreeSelect from '../src'
 import { AppStoreOutlined, InfoCircleOutlined } from '@hi-ui/icons'
 
 /**
- * @title 前置后置内容扩展
+ * @title 前后内置元素
  */
 export const Addon = () => {
   const [data] = React.useState([

diff --git a/packages/ui/date-picker/stories/addon.stories.tsx b/packages/ui/date-picker/stories/addon.stories.tsx
@@ -3,7 +3,7 @@ import DatePicker from '../src'
 import { AppStoreOutlined } from '@hi-ui/icons'
 
 /**
- * @title 前置后置内容扩展
+ * @title 前内置元素
  */
 export const Addon = () => {
   return (

diff --git a/packages/ui/date-picker/stories/range.stories.tsx b/packages/ui/date-picker/stories/range.stories.tsx
@@ -71,6 +71,7 @@ export const Range = () => {
         />
 
         <h2>周</h2>
+        {/* 如果遇到周范围选择选值问题，尝试手动引入 import 'moment/locale/zh-cn' */}
         <DatePicker
           style={{ width: 480 }}
           type="weekrange"

diff --git a/packages/ui/date-picker/stories/year-month-week.stories.tsx b/packages/ui/date-picker/stories/year-month-week.stories.tsx
@@ -38,6 +38,7 @@ export const YearMonthWeek = () => {
         />
 
         <h2>周</h2>
+        {/* 如果遇到周选择选值问题，尝试手动引入 import 'moment/locale/zh-cn' */}
         <DatePicker
           style={{ width: 238 }}
           type="week"

diff --git a/packages/ui/notification/stories/custom.stories.tsx b/packages/ui/notification/stories/custom.stories.tsx
@@ -3,10 +3,11 @@ import { createNotification } from '../src'
 import Button from '@hi-ui/button'
 
 /**
- * @title notification 属性自定义
+ * @title notification 属性配置
+ * @desc 支持配置 container 和 zIndex
  */
 export const Custom = () => {
-  const [container, setContainer] = useState<HTMLElement | undefined>()
+  const [container, setContainer] = useState<HTMLElement>()
 
   const notification = useMemo(
     () =>
@@ -20,33 +21,41 @@ export const Custom = () => {
   return (
     <>
       <h1>Custom</h1>
+
       <div
         ref={(e) => {
-          setContainer(e)
+          e && setContainer(e)
         }}
-        id="ddd"
+        className="notification-custom__wrap"
         style={{
-          width: 400,
-          height: 300,
-          background: 'rgb(245, 247, 250)',
+          width: '100%',
+          minWidth: 660,
+          height: 420,
+          marginBottom: 20,
+          background: '#f5f7fa',
+          boxShadow: '1px 2px 8px #ddd',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
 
-          // Need add it
+          // Need add for it
           position: 'relative',
           overflow: 'hidden',
+          zIndex: 0,
         }}
-      ></div>
-
-      <div className="notification-custom__wrap">
+      >
         <Button
+          type="primary"
           onClick={() => {
             notification.open({
+              size: 'sm',
               title: '数据备份通知',
               content:
-                '各位同学请注意，将于2019.08.10 00:00:00 -08:00：00 期间进行系统服务器升级维护，请做好数据备份工作，以防丢失。带来不便，敬请谅解！',
+                '各位同学请注意，将于2019.08.10 00:00:00 -08:00：00 期间进行系统服务器升级维护！',
             })
           }}
         >
-          Notice
+          Open
         </Button>
       </div>
     </>

diff --git a/packages/ui/number-input/stories/addon.stories.tsx b/packages/ui/number-input/stories/addon.stories.tsx
@@ -3,15 +3,14 @@ import NumberInput from '../src'
 import { AppStoreOutlined } from '@hi-ui/icons'
 
 /**
- * @title 前缀后缀内容扩展
+ * @title 前内置元素
  */
 export const Addon = () => {
   return (
     <>
       <h1>NumberInput</h1>
       <div className="NumberInput-addon__wrap">
         <NumberInput
-          autoFocus
           defaultValue={5}
           min={1}
           placeholder="请输入数字"

diff --git a/packages/ui/table/src/SettingDrawer.tsx b/packages/ui/table/src/SettingDrawer.tsx
@@ -192,23 +192,65 @@ export const SettingDrawer = forwardRef<HTMLDivElement | null, SettingDrawerProp
 
 export interface SettingDrawerProps extends HiBaseHTMLProps<'div'> {
   prefixCls?: string
+  /**
+   * 是否显示抽屉
+   */
   visible?: boolean
+  /**
+   * 表格列配置
+   */
   columns?: TableColumnItem[]
+  /**
+   * 关闭回调
+   */
   onClose?: () => void
+  /**
+   * 禁止选择的列
+   */
   checkDisabledColKeys?: string[]
+  /**
+   * 禁止拖拽的列
+   */
   dragDisabledColKeys?: string[]
+  /**
+   * 确认设置回调
+   */
   onSetColKeysChange?: (
     sortedColKeys: string[],
     hiddenColKeys: string[],
     visibleCols: TableColumnItem[]
   ) => void
+  /**
+   * 隐藏列
+   */
   hiddenColKeys?: string[]
+  /**
+   * 列隐藏回调
+   */
   onHiddenColKeysChange?: (hiddenColKeys: string[]) => void
+  /**
+   * 排序列
+   */
   sortedColKeys?: string[]
+  /**
+   * 列排序回调
+   */
   onSortedColKeysChange?: (sortedColKeys: string[]) => void
+  /**
+   * 自定义扩展头部内容
+   */
   extraHeader?: React.ReactNode
+  /**
+   * 自定义字段渲染
+   */
   itemRender?: (item: TableColumnItem) => React.ReactNode
+  /**
+   * Drawer 组件配置
+   */
   drawerProps?: Omit<DrawerProps, 'className'>
+  /**
+   * 显示全选
+   */
   showCheckAll?: boolean
 }
 

diff --git a/packages/ui/time-picker/stories/addon.stories.tsx b/packages/ui/time-picker/stories/addon.stories.tsx
@@ -3,7 +3,7 @@ import TimePicker from '../src'
 import { AppStoreOutlined } from '@hi-ui/icons'
 
 /**
- * @title 前置后置内容扩展
+ * @title 前内置元素
  */
 export const Addon = () => {
   const [addonValue, setAddonValue] = useState<string | string[]>(['12:00:00'])