Skip to content

Commit

Permalink
fix: 色带选择展示问题 (#103)
Browse files Browse the repository at this point in the history
* fix: 色带选择展示问题

* fix: 色带问题修复

* fix: 色带问题

* fix: 修复选择色带自动关闭情况

---------

Co-authored-by: yxh01132861 <[email protected]>
Co-authored-by: yunji <[email protected]>
  • Loading branch information
3 people authored Dec 21, 2023
1 parent bb603ad commit 494487b
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ type RangeItemType = {
};

const CustomRange = (props: CustomRangeProps) => {
const { ranges: defaultRanges, onChange, onCancel, className } = props;
const { ranges: defaultRanges, onChange, className } = props;
const prefixCls = usePrefixCls('formily-color-range-selector__custom-range');
const [wrapSSR, hashId] = useStyle(prefixCls);
const [ranges, setRanges] = useState<RangeItemType[]>([]);
Expand Down Expand Up @@ -69,7 +69,6 @@ const CustomRange = (props: CustomRangeProps) => {
const onSubmit = () => {
const list = ranges.map((item) => item.value);
onChange(list);
onCancel();
};

return wrapSSR(
Expand Down Expand Up @@ -109,8 +108,7 @@ const CustomRange = (props: CustomRangeProps) => {
</div>

<div className={`${prefixCls}__btn`}>
<span onClick={onCancel}>取消</span>
<span onClick={onSubmit}>确定</span>
<span onClick={onSubmit}>应用</span>
</div>
</div>,
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,23 @@ export interface DropDownContentProps {
const DropDownContent = (props: DropDownContentProps) => {
const { isOpen, colorRanges, selectedValue } = props;

// 在当前色带中查找,判断是否自定义色带,如果不是自定义色带查找出 colorRanges 中对应 item 确定 type
const selectedColor = colorRanges.find((item) => {
const _colors = selectedValue.isReversed ? selectedValue.colors.slice().reverse() : selectedValue.colors;
return item.colors.toString() === _colors.toString();
});

const [paletteConfig, setPaletteConfig] = useState<{
type: string;
steps: number;
}>({
type: 'all',
type: selectedColor?.type ?? 'all',
steps: selectedValue.colors.length || 6,
});

const isCustomPalette = selectedColor === undefined;
// 自定义调色板是否开启
const [customPaletteOpen, setCustomPaletteOpen] = useState(false);
const [customPaletteOpen, setCustomPaletteOpen] = useState(isCustomPalette);

// 颜色列表
const colorRangeList = useMemo(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ const Internal = (props: ColorRangeSelectorProps) => {

const [open, setOpen] = useState(false);

const onColorChange = (selectorValue: SelectorValue) => {
if (props.onChange) {
props.onChange(selectorValue);
}
};

return wrapSSR(
<Select
disabled={props.disabled}
Expand All @@ -55,7 +61,7 @@ const Internal = (props: ColorRangeSelectorProps) => {
isOpen={open}
colorRanges={colorRanges}
selectedValue={selectedValue}
onChange={props.onChange}
onChange={onColorChange}
/>
)}
>
Expand All @@ -66,17 +72,19 @@ const Internal = (props: ColorRangeSelectorProps) => {
return (
<Select.Option key={colorList.toString()} value={colorList.toString()}>
<div className={`${prefixCls}__selection-item`}>
{colorList.map((color) => (
<span
key={color}
className={`${prefixCls}__selection-item-color`}
style={{
backgroundColor: color,
height: '22px',
width: `${100 / colorList.length}%`,
}}
/>
))}
{colorList.map((color, index) => {
return (
<span
key={`${color}${index}`}
className={`${prefixCls}__selection-item-color`}
style={{
backgroundColor: color,
height: '22px',
width: `${100 / colorList.length}%`,
}}
/>
);
})}
</div>
</Select.Option>
);
Expand Down

0 comments on commit 494487b

Please sign in to comment.