Skip to content

Commit a0ce2c4

Browse files
zhangpaopao0609zhangpaopao0609
authored
refactor(color-picker): component optimization v2 (Tencent#5148)
* refactor(color-picker): components * refactor(color-picker): format switch render to setup return * refactor(color-picker): inputs switch render to setup return * refactor(color-picker): alpha switch render to setup return * refactor(color-picker): hue switch render to setup return * refactor(color-picker): panel switch render to setup return * refactor(color-picker): linear-gradient switch render to setup return * refactor(color-picker): saturation switch render to setup return * refactor(color-picker): slider switch render to setup return * refactor(color-picker): swatches switch render to setup return * fix(color-picker): panel style path * fix(color-picker): trigger vmodel value.value
1 parent 4ceaf0a commit a0ce2c4

File tree

28 files changed

+479
-553
lines changed

28 files changed

+479
-553
lines changed

‎packages/components/color-picker/color-picker-panel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { computed, defineComponent } from 'vue';
22
import props from './props';
3-
import ColorPanel from './panel';
3+
import ColorPanel from './components/panel';
44
import { usePrefixClass } from '../hooks/useConfig';
55
import { pickBy } from 'lodash-es';
66

‎packages/components/color-picker/color-picker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import useVModel from '../hooks/useVModel';
33
import { useTNodeDefault } from '../hooks/tnode';
44
import props from './props';
55
import { Popup as TPopup } from '../popup';
6-
import ColorPanel from './panel';
6+
import ColorPanel from './components/panel';
77
import DefaultTrigger from './components/trigger';
88
import { TdColorContext } from './types';
99
import { useBaseClassName } from './hooks';

‎packages/components/color-picker/panel/format/config.ts renamed to ‎packages/components/color-picker/components/format/config.ts

File renamed without changes.

‎packages/components/color-picker/panel/format/index.tsx renamed to ‎packages/components/color-picker/components/format/index.tsx

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -47,44 +47,38 @@ export default defineComponent({
4747
props.onModeChange(v);
4848
};
4949

50-
return {
51-
formatModel,
52-
baseClassName,
53-
handleModeChange,
54-
};
55-
},
56-
render() {
57-
const { baseClassName, handleModeChange } = this;
58-
const newProps = {
59-
...this.$props,
60-
format: this.formatModel,
61-
};
62-
const selectInputProps = {
63-
...((this.selectInputProps as Object) || {}),
64-
};
65-
return (
66-
<div class={`${baseClassName}__format`}>
67-
<div class={`${baseClassName}__format--item`}>
68-
<TSelect
69-
size="small"
70-
class={`${baseClassName}__format-mode-select`}
71-
selectInputProps={{ ...selectInputProps }}
72-
popupProps={{
73-
overlayClassName: `${baseClassName}__select-options`,
74-
...(selectInputProps as TdSelectInputProps).popupProps,
75-
}}
76-
v-model={this.formatModel}
77-
onChange={handleModeChange}
78-
>
79-
{FORMATS.map((item) => (
80-
<TOption key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
81-
))}
82-
</TSelect>
50+
return () => {
51+
const newProps = {
52+
...props,
53+
format: formatModel.value,
54+
};
55+
const selectInputProps = {
56+
...((props.selectInputProps as Object) || {}),
57+
};
58+
return (
59+
<div class={`${baseClassName.value}__format`}>
60+
<div class={`${baseClassName.value}__format--item`}>
61+
<TSelect
62+
size="small"
63+
class={`${baseClassName.value}__format-mode-select`}
64+
selectInputProps={{ ...selectInputProps }}
65+
popupProps={{
66+
overlayClassName: `${baseClassName.value}__select-options`,
67+
...(selectInputProps as TdSelectInputProps).popupProps,
68+
}}
69+
v-model={formatModel}
70+
onChange={handleModeChange}
71+
>
72+
{FORMATS.map((item) => (
73+
<TOption key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
74+
))}
75+
</TSelect>
76+
</div>
77+
<div class={`${baseClassName.value}__format--item`}>
78+
<FormatInputs {...newProps} />
79+
</div>
8380
</div>
84-
<div class={`${baseClassName}__format--item`}>
85-
<FormatInputs {...newProps} />
86-
</div>
87-
</div>
88-
);
81+
);
82+
};
8983
},
9084
});

‎packages/components/color-picker/panel/format/inputs.tsx renamed to ‎packages/components/color-picker/components/format/inputs.tsx

Lines changed: 49 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -104,60 +104,55 @@ export default defineComponent({
104104
props.onInputChange(value, modelValue.a / 100, key, v);
105105
};
106106

107-
return {
108-
modelValue,
109-
inputConfigs,
110-
handleChange,
111-
};
112-
},
113-
render() {
114-
const inputProps = {
115-
...((this.inputProps as any) || {}),
107+
return () => {
108+
const inputProps = {
109+
...((props.inputProps as any) || {}),
110+
};
111+
return (
112+
<div class="input-group">
113+
{inputConfigs.value.map((config) => {
114+
return (
115+
<div
116+
class="input-group__item"
117+
key={config.key}
118+
style={{
119+
flex: config.flex || 1,
120+
}}
121+
>
122+
{config.type === 'input' ? (
123+
<TInput
124+
{...inputProps}
125+
align="center"
126+
size="small"
127+
disabled={props.disabled}
128+
v-model={modelValue[config.key]}
129+
maxlength={props.format === 'HEX' ? 9 : undefined}
130+
title={modelValue[config.key]}
131+
onBlur={(v: string) => handleChange(config.key, v)}
132+
onEnter={(v: string) => handleChange(config.key, v)}
133+
/>
134+
) : (
135+
<TInputNumber
136+
{...inputProps}
137+
align="center"
138+
size="small"
139+
disabled={props.disabled}
140+
v-model={modelValue[config.key]}
141+
title={modelValue[config.key]}
142+
min={config.min}
143+
max={config.max}
144+
step={1}
145+
format={config.format}
146+
theme="normal"
147+
onBlur={(v: number) => handleChange(config.key, v)}
148+
onEnter={(v: number) => handleChange(config.key, v)}
149+
/>
150+
)}
151+
</div>
152+
);
153+
})}
154+
</div>
155+
);
116156
};
117-
return (
118-
<div class="input-group">
119-
{this.inputConfigs.map((config) => {
120-
return (
121-
<div
122-
class="input-group__item"
123-
key={config.key}
124-
style={{
125-
flex: config.flex || 1,
126-
}}
127-
>
128-
{config.type === 'input' ? (
129-
<TInput
130-
{...inputProps}
131-
align="center"
132-
size="small"
133-
disabled={this.disabled}
134-
v-model={this.modelValue[config.key]}
135-
maxlength={this.format === 'HEX' ? 9 : undefined}
136-
title={this.modelValue[config.key]}
137-
onBlur={(v: string) => this.handleChange(config.key, v)}
138-
onEnter={(v: string) => this.handleChange(config.key, v)}
139-
/>
140-
) : (
141-
<TInputNumber
142-
{...inputProps}
143-
align="center"
144-
size="small"
145-
disabled={this.disabled}
146-
v-model={this.modelValue[config.key]}
147-
title={this.modelValue[config.key]}
148-
min={config.min}
149-
max={config.max}
150-
step={1}
151-
format={config.format}
152-
theme="normal"
153-
onBlur={(v: number) => this.handleChange(config.key, v)}
154-
onEnter={(v: number) => this.handleChange(config.key, v)}
155-
/>
156-
)}
157-
</div>
158-
);
159-
})}
160-
</div>
161-
);
162157
},
163158
});

‎packages/components/color-picker/panel/format/style/css.js renamed to ‎packages/components/color-picker/components/format/style/css.js

File renamed without changes.

‎packages/components/color-picker/panel/format/style/index.js renamed to ‎packages/components/color-picker/components/format/style/index.js

File renamed without changes.

‎packages/components/color-picker/panel/alpha.tsx renamed to ‎packages/components/color-picker/components/panel/alpha.tsx

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { computed, defineComponent, PropType } from 'vue';
22
import ColorSlider from './slider';
3-
import { Color } from '../utils';
4-
import { useBaseClassName } from '../hooks';
3+
import { Color } from '../../utils';
4+
import { useBaseClassName } from '../../hooks';
55

66
export default defineComponent({
77
name: 'AlphaSlider',
@@ -31,25 +31,20 @@ export default defineComponent({
3131
background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`,
3232
};
3333
});
34-
return {
35-
baseClassName,
36-
railStyle,
37-
handleChange,
34+
35+
return () => {
36+
return (
37+
<ColorSlider
38+
class={[`${baseClassName.value}__alpha`, `${baseClassName.value}--bg-alpha`]}
39+
color={props.color}
40+
value={props.color.alpha * 100}
41+
onChange={handleChange}
42+
rail-style={railStyle.value}
43+
max-value={100}
44+
disabled={props.disabled}
45+
type="alpha"
46+
/>
47+
);
3848
};
3949
},
40-
render() {
41-
const { baseClassName } = this;
42-
return (
43-
<ColorSlider
44-
class={[`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`]}
45-
color={this.color}
46-
value={this.color.alpha * 100}
47-
onChange={this.handleChange}
48-
rail-style={this.railStyle}
49-
max-value={100}
50-
disabled={this.disabled}
51-
type="alpha"
52-
/>
53-
);
54-
},
5550
});

‎packages/components/color-picker/panel/base-props.ts renamed to ‎packages/components/color-picker/components/panel/base-props.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PropType } from 'vue';
2-
import { Color } from '../utils';
2+
import { Color } from '../../utils';
33

44
export default {
55
/** 是否禁用组件 */

‎packages/components/color-picker/panel/header.tsx renamed to ‎packages/components/color-picker/components/panel/header.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { defineComponent, PropType, ref, watch } from 'vue';
22

3-
import props from '../props';
3+
import props from '../../props';
44
import { COLOR_MODES } from '@tdesign/common-js/color-picker/constants';
5-
import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio';
6-
import { TdColorModes } from '../types';
7-
import { useBaseClassName } from '../hooks';
8-
import { useConfig } from '../../hooks';
5+
import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../../radio';
6+
import { TdColorModes } from '../../types';
7+
import { useBaseClassName } from '../../hooks';
8+
import { useConfig } from '../../../hooks';
99

1010
export default defineComponent({
1111
name: 'PanelHeader',

‎packages/components/color-picker/components/panel/hue.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { defineComponent } from 'vue';
2+
import ColorSlider from './slider';
3+
import { useBaseClassName } from '../../hooks';
4+
import baseProps from './base-props';
5+
6+
export default defineComponent({
7+
name: 'HueSlider',
8+
9+
inheritAttrs: false,
10+
props: baseProps,
11+
setup(props) {
12+
const baseClassName = useBaseClassName();
13+
14+
return () => {
15+
return (
16+
<ColorSlider
17+
class={`${baseClassName.value}__hue`}
18+
color={props.color}
19+
value={props.color.hue}
20+
onChange={props.onChange}
21+
disabled={props.disabled}
22+
type="hue"
23+
/>
24+
);
25+
};
26+
},
27+
});

0 commit comments

Comments
 (0)