aliyun / alibabacloud-console-components Goto Github PK

请问这是刚刚开始开源吗？后期会持续维护吗？breezr 我看是内部构建工具，后期有开源计划吗？

1. props中的Component为Link或者是a且disabled为true时，样式存在问题且标签的跳转事件没有阻止
   
2. build 的时候rc-actions组件有warning
   

tooltip去掉关闭按钮：

优化换行方式：

浏览器默认不会在单词中间换行，需要提供给用户设置tooltip内部样式的props，从而用户可以给tooltip设置cssword-break:all，在单词中间换行

https://codesandbox.io/s/console-components-demo-shxfj?file=/src/demo/basic.jsx

https://codesandbox.io/s/parcel-sandbox-uc3p4?from-embed

1. 下拉菜单内容能自动撑开父级宽度
2. 可以给下拉菜单设置max-width, 超出省略号展示

new Intl.DateTimeFormat('en-US', {
  hour12: false,
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hourCycle: 'h12'
}).format(1583079993000)

chrome79:

chrome80:

相关帖子：https://support.google.com/chrome/thread/29828561?hl=en

我们的intl.date使用了Intl.DateTimeFormat这个api，导致chrome80用户会把0点展示成24点。intl.date需要改为使用moment来实现这个功能，顺便整合以前内部的wind-rc-datetime组件。

import React from 'react'
import { Table } from '@alicloud/console-components'

const dataSource = () => {
const result = []
for (let i = 0; i < 5; i++) {
result.push({
title: {
name: aaa ${3 + i}.0 你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**你好**,
},
id: 100306660940 + i,
time: 200000000000000000000 + i,
})
}
return result
}
const render = (value, index, record) => {
return Remove({record.id})
}

const Demo1 = () => (

<Table.Column title="Time" dataIndex="time" />
<Table.Column cell={render} />

export default Demo1

中文内容demo地址

import React from "react";
import { Table } from "@alicloud/console-components";

const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
title: {
name: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ${3 + i}.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
},
id: 100306660940 + i,
time: 200000000000000000000 + i
});
}
return result;
};
const render = (value, index, record) => {
return Remove({record.id});
};

const Demo1 = () => (

<Table.Column title="Time" dataIndex="time" />
<Table.Column cell={render} />

export default Demo1;

英文内容demo地址

alibaba-fusion/next#3636

依赖的Message组件支持afterClose，但是@alicloud/console-components-announcement不支持透传

只看了前两个组件，就一堆问题，瞬间没有继续看下去的想法了
animate组件demo点了都没反应
徽标组件一堆bug
气泡提示出来了还随着页面滚动。。。
没眼看。。。
代码还没看，但是从官网来说，这轮子造的不好

请问如何使用applayout和路由系统？有没有案例？谢谢

React18 have released for more then 1 year, React18 bring lots of awesome features. Please support React18 ~

直接挂在在当前节点下面有很多局限性，比如会受到父节点overflow、z-index的影响。
默认还是保持现有行为，增加一个props.maskContainer。用户可以把body元素传给它。

目前弹层能力是SlidePanel自己实现的，未来如果使用Overlay组件来重构（提供弹层能力）就更好了。

有的用户同时使用slide-panel的内网版本组件，会有类名冲突。
新版的类名统一使用wind3前缀吧。

https://csr632.gitee.io/alibabacloud-console-components/doc-preview?prodPkgName=%40alicloud%2Fconsole-components-inline-editor&actualLoadPkgName=%40cc-dev-kit-test%2Fconsole-components-inline-editor&actualLoadPkgVersion=1.0.1-preview.1
在文档站点里面和codesanbox里面打开的多语言不一样

https://aliyun.github.io/alibabacloud-console-components/biz-components/rc-actions

不应该加蓝色，使用原本的颜色。

SlidePanel 版本：2.2.11

https://codesandbox.io/s/console-components-demo-pnfxg?file=/src/demo/index.tsx

宽度太小，造成翻页器换行：
https://codesandbox.io/s/wind-demo-qjugl

相关代码：
https://github.com/aliyun/console-components/blob/e5395d728c4f1a5dc036ad472d8a413220c35d51/dev-kit/gatsby-theme-console-doc/src/buildtime/remarkPlugins/linkInstructions/importDemo.ts#L20
方案：
在通过写入文件的方式，让handleLinkNode能够获取当前处理的markdown路径。

已处理

select组件样式问题。
标题右侧可以使用针对当前页面的下拉切换功能(设计文档有，开发组件中没有)
https://xconsole.aliyun-inc.com/scenes/titlearea
具体样式，在补充说明，3中可以查看。

https://fusion.design/component/basic/field

省份选择Zhejiang 城市会切换到hangzhou，但选择hubei后，城市下拉列表仍然展示hangzhou，参考fussion，选择省份后清除城市， setCityData([])，但没有效果。

demo地址：

fusion下拉列表级联没有问题：https://fusion-demo.alibaba-inc.com/demos/next/select

import React, { useState, useCallback } from 'react'
import { Select } from '@alicloud/console-components'
import styled from 'styled-components'

const provinceDataSource = ['Zhejiang', 'Hubei', 'Jiangsu']
const cityDataSource = {
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
}

const SWrapper = styled.divbackground-color: #f8f8f8; padding: 16px; .next-select { margin-right: 10px; }

const Demo5 = () => {
const [cityData, setCityData] = useState([])
const [province, setProvince] = useState(undefined)
const [city, setCity] = useState(undefined)
const [disabled, setDisabled] = useState(true)

const handleProvinceChange = useCallback(value => {
const cities = cityDataSource[value]
setCityData([])
setCityData(cities)
setProvince(value)
setDisabled(!cities)
}, [])

const handleCityChange = useCallback(value => {
setCity(value)
}, [])

return (



)
}
export default Demo5

rc-table的答疑比较多，需要梳理一下table的场景，实现一个更加容易使用和扩展的表格组件。

• 提高灵活性，覆盖更多的场景。减少答疑量。
• 提供ts类型支持

在完全重构之前，提供一个.d.ts来提供ts支持。

下拉框设置followTrigger跟随滚动时，如果下拉框是在弹窗或者侧边栏等容器内时下拉框中的内容会被隐藏掉。

js支持tree shaking
css支持按需打包