# info.

- [doc](https://ku.baidu-int.com/knowledge/HFVrC7hq1Q/pKzJfZczuc/tfL9tZh9ui/q-ecsgBO_dzMP_)
- [local page](http://localhost:3008/main/components/date-picker)
- [icode](https://console.cloud.baidu-int.com/devops/icode/repos/baidu/be-fe/brick/tree/ver%2F0.2.0)
- [date & time v1](./220825--liang-日期时间-v1.md)

# 0727

![img_4.png](img_4.png)

- () 单测
    - () 渲染
    - () 交互
- (x) v0.2 的样式处理
    - (x) time picker 中, + date picker 的考虑
    - (x) date picker 宽度问题?
      - (x) 加一个限定的 &-show-time 的容器样式
    - (x) title 宽度问题
    - (x) sm & md 的处理
        - (x) title height + date item * 6 * gaps => time col height
    - (x) demo 添加
- (x) doc => @default
- (x) 控制 showSecond
    - (x) props
    - (x) format
    - (x) demo 添加
    - (-) 状态初始化
    - (x) changeValue 处理
    - (-) 此刻
- (x) 控制是否显示 `此刻`
    - (x) hideNow 控制
- () 分钟间隔 minuteInterval?
- (x) 底部的 "action bar" 渲染
    - (x) 布局?
        - (x) flex (左, 右区域)
        - (x) 同时存在 quick action 的布局验证
        - (x) 顺便解决了一个 quick action 下的阻塞性边缘 bug
    - (x) 样式
        - (x) 分隔边
        - (x) 背景色
    - (x) 此刻
        - (x) 此刻, 在 "有值" 时触发, 有一定的 "滚动同步问题"
            - (x) 需要在 "update" 之后触发 : 随带改造了下 action queue
        - (x) 需要 "同步 display 面板"
        - (x) 避免收起 (此处其实可以进一步考虑如何处理会更好)
            - 存在多处 "类似逻辑的分布存在"
        - (x) state 设置为此时
            - (x) 重构 changeValue 的逻辑 (与 changeTime 合并重复)
    - (x) 确定
        - (x) showTime 时, 点击日期不关闭
    - (x) timeState => prop 初始化为 undefined (无值状态)
        - (x) clear 时, 亦是如此
    - () time panel 下, 有一个 "意外的空白 gap"
- (-) time 选定的交互行为, 应与 time picker 靠拢?
- (x) input 中修改 value
    - time col 自动滚动定位?
- (x) props: showTime
    - 原来就有, 且 value 本身就自带 time 属性, 所以还好
- (x) time input 的显示问题
    - date text + time text
    - getDerivedStateFromProps
    - (x) format 控制
    - (x) input => 改变 state
- (x) time panel
    - (x) 状态联动
        - state => date + Hms (确定时)
        - date + Hms => state (null or 非 null)
        - (@) 不能作为 "state" 的唯一来源 (应该是)
        - (x) state + Hms
        - 如下逻辑需要调整
            - (x) clear 逻辑
            - (x) uncontrolled 形态下, 进行 state 管理 (此时 props 中是没有 value 的)
            - (x) state = null => value
                - (x) panel 选择
            - (x) state 修改, 回溯到 input 中
            - (x) derived
            - (x) state usage
            - (x) on change : change value
    - (x) 样式调整
        - (x) 高度问题
            - content height => $height-aside???
            - title + content??
    - (x) 快捷方式的 "click" 是有一定问题的?
        - () @future: 可能需要考虑, 能在点击之后, 允许用户主动关闭 panel
    - (x) render 确认 : ui-time-panel ?
    - (?) 如何从 time picker 带过来? 是否可依赖? @!
- (x) 定位
    - [](/components/date-picker/src/inner-comps/create-inner-date-picker.tsx)
    - [date panel](/components/date-picker/src/modules/create-date-panel.tsx)
- (x) 加入 side panel?
    - (x) panel wrapper + with side 的 class
    - (x) flex
        - (x) width
    - (x) title width 也得修改小
- (x) demo 配置
    - (x) 追加 demo ?

## dom 结构

- side wrapper 样式调整 : 参考 :
    - ![img_2.png](img_2.png)
- time
    - ![img_3.png](img_3.png)
    - .aside-item
        - [](/packages/ui-comps/src/ui-aside.tsx)

## 设计备案

- panel 内, 加入 panel 的 side content DOM 容器
    - 由外部提供内容渲染嵌入
    - 本身是否显示 time panel, 取决于 :
        - 是否为 date picker
        - 是否开启 `showTime=true`

## 问题点

- 是否需要 time disabled 控制?
    - 如果是, 这块如何控制?