ant-design/components/color-picker/color.ts
MadCcc 1cb644d476
fix: color picker controlled value (#47816)
* fix: fix control value not show in dom

* chore: update title

* add test case

* change test title

* fix: cleared color should change after controlled value changed

* chore: code clean

* test: change test

* comment

* fix: should respect empty string

* test: add test case

* chore: update demo

---------

Co-authored-by: tanghui <yoyo837@hotmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>
2024-03-25 20:10:47 +08:00

58 lines
1.3 KiB
TypeScript

/* eslint-disable class-methods-use-this */
import type { ColorGenInput } from '@rc-component/color-picker';
import { Color as RcColor } from '@rc-component/color-picker';
export const toHexFormat = (value?: string, alpha?: boolean) =>
value?.replace(/[^\w/]/gi, '').slice(0, alpha ? 8 : 6) || '';
export const getHex = (value?: string, alpha?: boolean) => (value ? toHexFormat(value, alpha) : '');
export interface Color
extends Pick<
RcColor,
'toHsb' | 'toHsbString' | 'toHex' | 'toHexString' | 'toRgb' | 'toRgbString'
> {
cleared: boolean | 'controlled';
}
export class ColorFactory implements Color {
/** Original Color object */
private metaColor: RcColor;
public cleared: boolean = false;
constructor(color: ColorGenInput<Color>) {
this.metaColor = new RcColor(color as ColorGenInput);
if (!color) {
this.metaColor.setAlpha(0);
this.cleared = true;
}
}
toHsb() {
return this.metaColor.toHsb();
}
toHsbString() {
return this.metaColor.toHsbString();
}
toHex() {
return getHex(this.toHexString(), this.metaColor.getAlpha() < 1);
}
toHexString() {
return this.metaColor.getAlpha() === 1
? this.metaColor.toHexString()
: this.metaColor.toHex8String();
}
toRgb() {
return this.metaColor.toRgb();
}
toRgbString() {
return this.metaColor.toRgbString();
}
}