hug-sun / hugsun-ui Goto Github PK

Tasking

• addon
• prefix

现在开发过程中需要先锁定版本
已经上传yarn.lock文件 需使用yarn进行依赖安装保证版本统一
后续会排查由哪个依赖引起问题

• css初始化
• css高清方案
• css动画
• flex配置

Tasking

• List
  • renderHeader
  • renderFooter
• ListItem
  • subtitle
  • arrow
  • extra
  • thumb
  • onPress

• 属性 mode
• 属性 icon
• leftContent 导航栏左侧内容区
• rightContent 导航栏右侧内容区
• onLeftClick 返回事件处理

Tasking

• 通过dumi构建项目
  • 集成sass
  • 配置logo及favicon
  • 集成enzyme + jest用以编写单测用例
  • 配置github actions的CI
    • 单测校验
    • 构建校验
  • 项目部署至github pages
    • 通过github actions保证每次push/pr出现代码变动时自动部署

Tasking

• type
• animate

现在暂时只有List遇到了这个问题 由于List组件本身同时要支持拥有一个子组件+ref
所以需要由基本类型标注方法
React.FC<IComponentPropsType>
改为
React.FC<IComponentPropsType & React.RefAttributes<HTMLElement>> & { Item?: typeof ChildComponent }
此段类型为 React.FC<IComponentPropsType & React.RefAttributes<HTMLElement>> 用于标注React函数式组件类型
同时内部IComponentPropsType & React.RefAttributes<HTMLElement>为组件props类型 + 对应ref类型
后半段{ Item?: typeof ChildComponent }为对应子组件类型 如果遇到类似的操作可以考虑这种用法
但是同时子组件无法直接使用 因为此段子组件只能为可选属性 否则组件本身类型报错
此时有两种情况

1. 如果使用解构
   const { Item } = List;
const MenuItem = Item as typeof ListItem
2. 不使用解构
   const Item = List.Item as typeof ListItem

暂时只有这种解决方案 如有更好方案欢迎在此issue下交流

组件库主页面当前没有比较好的设计想法
如果有相关提议可以在此issue下讨论交流

Tasking

• type
  • default
  • primary
  • warn
• disabled
• onPress
• loading
• className
• activeClassName

Tasking

• data
  • value
  • label
  • disabled
  • children
• value
• onPress

dumi提供的自动生成文档API暂时有一些小bug
如果需要某个组件本身需要多API 需要考虑下述方法进行使用

1. 在PropsType.ts或者新建一个ts/tsx文件 在文件当中export方法

• 例如 List组件当中需要使用List与ListItem两个组件 我需要在文档中同时显示两个组件对应API
• 在PropsType.ts中export两个方法分别叫做List和ListItem
• 对两个方法进行传参并且参数设置对应类型，如: export function List(list: IListPropsType) {}

2. 在对应md文件当中使用<API src="对应存放导出方法的文件" exports='放置导出数组'></API>

• src中传入的就是上述内容存放两个方法的文件，List中就是./PropsType.ts
• exports传入一个数组 该数组要保证JSON格式
• exports中传入的数组对应在PropsType.ts中导出的多个方法 需要导出几个方法就写上对应方法名即可