feat: new component ColorPicker #41990
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## feature #41990 +/- ##
==========================================
Coverage 100.00% 100.00%
==========================================
Files 619 638 +19
Lines 10570 10826 +256
Branches 2886 2943 +57
==========================================
+ Hits 10570 10826 +256
☔ View full report in Codecov by Sentry. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
MadCcc
reviewed
Apr 27, 2023
components/affix/index.tsx
Outdated
| @@ -2,9 +2,9 @@ import classNames from 'classnames'; | |||
| import ResizeObserver from 'rc-resize-observer'; | |||
| import omit from 'rc-util/lib/omit'; | |||
| import React, { createRef, forwardRef, useContext } from 'react'; | |||
| import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; | |||
MadCcc
reviewed
Apr 27, 2023
Comment on lines
54
to
62
| <Select.Option value={ColorFormatEnum.hex}> | ||
| {ColorFormatEnum.hex.toLocaleUpperCase()} | ||
| </Select.Option> | ||
| <Select.Option value={ColorFormatEnum.hsb}> | ||
| {ColorFormatEnum.hsb.toLocaleUpperCase()} | ||
| </Select.Option> | ||
| <Select.Option value={ColorFormatEnum.rgb}> | ||
| {ColorFormatEnum.rgb.toLocaleUpperCase()} | ||
| </Select.Option> |
components/color-picker/enum.ts
Outdated
| @@ -0,0 +1,6 @@ | |||
| /* eslint-disable import/prefer-default-export */ | |||
| export enum ColorFormatEnum { | |||
|
|
|
|
|
kiner-tang
reviewed
Apr 27, 2023
|
|
||
| export interface ColorPickerProps | ||
| extends Omit<RcColorPickerProps, 'onChange' | 'arrow' | 'value' | 'defaultValue' | 'children'> { | ||
| value?: Color | string; |
There was a problem hiding this comment.
这个类型好多地方都有在用，是不是可以弄一个新类型聚合一下呢？
比如：type ColorVal = Color | string，命名上可以再斟酌一下，不过感觉有个别名，在其他地方使用的时候会方便一点
kiner-tang
reviewed
Apr 27, 2023
| import React from 'react'; | ||
| import ColorPicker from '../ColorPicker'; | ||
|
|
||
| describe('ColorPicker', () => { |
demo 之前重构改的忘记修了，已经修复了 |
kiner-tang
reviewed
Apr 27, 2023
kiner-tang
reviewed
Apr 27, 2023
kiner-tang
reviewed
Apr 27, 2023
|
|
||
| const ColorHexInput: FC<ColorHexInputProps> = ({ prefixCls, value, onChange }) => { | ||
| const ColorHexInputPrefixCls = `${prefixCls}-hex-input`; | ||
| const [hexValue, setHexValue] = useState(toHex(value?.toHexString() || '')); |
There was a problem hiding this comment.
如果 value 有可能为空的话，是不是可以单独定义一个变量处理兜底逻辑，这样就不用后面每次用 value 的时候都用可选链，担心太多可选链会增加包的体积，例如：
const val = useMemo(() => value ? value.toHexString() : '', [value])这样后面直接用 val 就好了？
|
闲夕大佬这么晚还在推代码 |
|
辛苦了大佬🙏 |
|
看样子可以上 5.5 的车了🎉 |
|
|
|
argos 没有截图，还得看看 |
已经修复了，可以再看看 |
|
没问题了 |
MadCcc
approved these changes
May 12, 2023
弹出动画方向有点不对，上面这个是从中间弹开的，应该从箭头方向弹开。 |
操作点 hover 时没有出现鼠标手型。 |
少 |
用 es 目录。 |
|
This was referenced May 16, 2023
Closed
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
📝 Changelog
☑️ Self-Check before Merge
Copilot
🤖 Generated by Copilot at 45700f1
Summary
🎨🧪📝
This pull request adds a new ColorPicker component to the ant-design library, which allows users to select and edit colors in different formats. It includes the component implementation, tests, demos, and documentation files. The component uses the RcColorPicker component as a base, and extends it with some custom logic, styles, and subcomponents. The component also provides a hook to manage the color state, and exports some types for external use.
Walkthrough
ColorPickercomponent and its documentation (link, link, link, link)ExPanelcomponent to extend theRcColorPickerpanel with aColorDataBarcomponent (link, link)Colorinterface and theColorFactoryclass to wrap theRcColorclass and provide custom methods and properties (link, link)ColorFormatEnumtype and theColorFormat,PressetsItem, andColorPickerBasePropstypes for the props and internal components of theColorPickercomponent (link, link)ColorHexInput,ColorPlaceholder, andColorStepperscomponents to render and edit the color values in different formats (link, link, link)ColorPickercomponent and its markdown file (link, link)ColorPickercomponent and its demos, using the testing library and image snapshots (link, link, link, link)ColorPickercomponent and its subcomponents (link)