Skip to content

Commit

Permalink
fix(cf): add input validation (#454)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gggpound
Gggpound committed Mar 28, 2024
1 parent b13af5b commit e42fcc4
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 32 deletions.
36 changes: 36 additions & 0 deletions packages/sheets-conditional-format/src/base/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,39 @@ export const createDefaultRule = () => ({
stopIfTrue: false,
rule: { type: RuleType.highlightCell, subType: SubRuleType.text, operator: TextOperator.notContainsBlanks } as ITextHighlightCell,
} as IConditionFormatRule);

export const createDefaultValue = (subType: SubRuleType, operator: TextOperator | NumberOperator | TimePeriodOperator) => {
switch (subType) {
case SubRuleType.text:{
if ([TextOperator.beginsWith, TextOperator.containsText, TextOperator.endsWith, TextOperator.equal, TextOperator.notContainsText, TextOperator.notEqual].includes(operator as TextOperator)) {
return '';
}
break;
}
case SubRuleType.number:{
if ([NumberOperator.between, NumberOperator.notBetween].includes(operator as NumberOperator)) {
return [10, 100] as [number, number];
}
return 10;
}
}
return '';
};

export const createDefaultValueByValueType = (type: ValueType, defaultValue?: number) => {
switch (type) {
case ValueType.formula:{
return '=';
}
case ValueType.max:
case ValueType.min:{
return '';
}
case ValueType.percent:
case ValueType.percentile:
case ValueType.num:{
return defaultValue !== undefined ? defaultValue : 10;
}
}
return '';
};
21 changes: 14 additions & 7 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/colorScale.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
* limitations under the License.
*/

import React, { useEffect, useMemo, useRef, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { useDependency } from '@wendellhu/redi/react-bindings';
import { IUniverInstanceService, LocaleService } from '@univerjs/core';
import { InputNumber, Select } from '@univerjs/design';
import { TextEditor } from '@univerjs/ui';
import { RuleType, SHEET_CONDITION_FORMAT_PLUGIN, ValueType } from '../../../base/const';
import { createDefaultValueByValueType, RuleType, SHEET_CONDITION_FORMAT_PLUGIN, ValueType } from '../../../base/const';
import { ColorPicker } from '../../color-picker';
import type { IColorScale, IConditionalFormatRuleConfig } from '../../../models/type';
import stylesBase from '../index.module.less';
Expand All @@ -34,7 +34,6 @@ const TextInput = (props: { id: string; type: ValueType | 'none';value: number |
const univerInstanceService = useDependency(IUniverInstanceService);
const unitId = univerInstanceService.getCurrentUniverSheetInstance().getUnitId();
const subUnitId = univerInstanceService.getCurrentUniverSheetInstance().getActiveSheet().getSheetId();
const _value = useRef(value);
const formulaInitValue = useMemo(() => {
return String(value).startsWith('=') ? String(value) : '=';
}, [value]);
Expand All @@ -47,7 +46,9 @@ const TextInput = (props: { id: string; type: ValueType | 'none';value: number |
min: 0, max: 100,
};
}
return {};
return {
min: Number.MIN_SAFE_INTEGER, max: Number.MAX_SAFE_INTEGER,
};
}, [type]);
if (type === ValueType.formula) {
return (
Expand Down Expand Up @@ -220,7 +221,9 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => {
value={minType}
onChange={(v) => {
minTypeSet(v as ValueType);
handleChange({ minType: v as ValueType, medianType, maxType, minValue, medianValue, maxValue, minColor, medianColor, maxColor });
const value = createDefaultValueByValueType(v as ValueType, 10);
minValueSet(value);
handleChange({ minType: v as ValueType, medianType, maxType, minValue: value, medianValue, maxValue, minColor, medianColor, maxColor });
}}
/>
<TextInput
Expand Down Expand Up @@ -249,7 +252,9 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => {
value={medianType}
onChange={(v) => {
medianTypeSet(v as ValueType);
handleChange({ minType, medianType: v as ValueType, maxType, minValue, medianValue, maxValue, minColor, medianColor, maxColor });
const value = createDefaultValueByValueType(v as ValueType, 50);
medianValueSet(value);
handleChange({ minType, medianType: v as ValueType, maxType, minValue, medianValue: value, maxValue, minColor, medianColor, maxColor });
}}
/>

Expand Down Expand Up @@ -282,7 +287,9 @@ export const ColorScaleStyleEditor = (props: IStyleEditorProps) => {
value={maxType}
onChange={(v) => {
maxTypeSet(v as ValueType);
handleChange({ minType, medianType, maxType: v as ValueType, minValue, medianValue, maxValue, minColor, medianColor, maxColor });
const value = createDefaultValueByValueType(v as ValueType, 90);
maxValueSet(value);
handleChange({ minType, medianType, maxType: v as ValueType, minValue, medianValue, maxValue: value, minColor, medianColor, maxColor });
}}
/>
<TextInput
Expand Down
14 changes: 10 additions & 4 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/dataBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';
import { useDependency } from '@wendellhu/redi/react-bindings';
import { IUniverInstanceService, LocaleService } from '@univerjs/core';
import { TextEditor } from '@univerjs/ui';
import { RuleType, SHEET_CONDITION_FORMAT_PLUGIN, ValueType } from '../../../base/const';
import { createDefaultValueByValueType, RuleType, SHEET_CONDITION_FORMAT_PLUGIN, ValueType } from '../../../base/const';
import type { IConditionalFormatRuleConfig, IValueConfig } from '../../../models/type';
import { ColorPicker } from '../../color-picker';
import stylesBase from '../index.module.less';
Expand All @@ -42,7 +42,9 @@ const InputText = (props: { disabled?: boolean; id: string; className: string; t
min: 0,
};
}
return {};
return {
min: Number.MIN_SAFE_INTEGER, max: Number.MAX_SAFE_INTEGER,
};
}, [type]);
if (type === ValueType.formula) {
const v = String(_value.current).startsWith('=') ? String(_value.current) || '' : '=';
Expand Down Expand Up @@ -251,7 +253,9 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
value={minValueType}
onChange={(v) => {
minValueTypeSet(v as ValueType);
_handleChange({ isGradient, minValue, minValueType: v as ValueType, maxValue, maxValueType, positiveColor, nativeColor });
const value = createDefaultValueByValueType(v as ValueType, 10);
minValueSet(value);
_handleChange({ isGradient, minValue: value, minValueType: v as ValueType, maxValue, maxValueType, positiveColor, nativeColor });
}}
/>

Expand All @@ -274,7 +278,9 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
value={maxValueType}
onChange={(v) => {
maxValueTypeSet(v as ValueType);
_handleChange({ isGradient, minValue, minValueType, maxValue, maxValueType: v as ValueType, positiveColor, nativeColor });
const value = createDefaultValueByValueType(v as ValueType, 90);
maxValueSet(value);
_handleChange({ isGradient, minValue, minValueType, maxValue: value, maxValueType: v as ValueType, positiveColor, nativeColor });
}}
/>
<InputText
Expand Down
21 changes: 5 additions & 16 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/highlightCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import React, { useEffect, useMemo, useState } from 'react';
import { Input, InputNumber, Select } from '@univerjs/design';
import { useDependency } from '@wendellhu/redi/react-bindings';
import { LocaleService } from '@univerjs/core';
import { NumberOperator,
import { createDefaultValue,
NumberOperator,
RuleType,
SubRuleType,
TextOperator,
Expand Down Expand Up @@ -215,21 +216,8 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps<any, ITextHigh
if (!rule) {
return defaultV;
}
switch (rule.subType) {
case SubRuleType.text:{
if ([TextOperator.beginsWith, TextOperator.containsText, TextOperator.endsWith, TextOperator.equal, TextOperator.notContainsText, TextOperator.notEqual].includes(rule.operator)) {
return rule.value || defaultV;
}
break;
}
case SubRuleType.number:{
if ([NumberOperator.between, NumberOperator.notBetween].includes(rule.operator)) {
return rule.value || [0, 0];
}
return rule.value || 0;
}
}
return defaultV;
const v = createDefaultValue(rule.subType, rule.operator);
return v;
});

const [style, styleSet] = useState<IHighlightCell['style']>({});
Expand Down Expand Up @@ -303,6 +291,7 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps<any, ITextHigh
const _operator = operatorList && operatorList[0].value as typeof operator;
subTypeSet(_subType);
operatorSet(_operator);
_operator && valueSet(createDefaultValue(_subType, _operator));
onChange(getResult({ subType: _subType, operator: _operator }));
};
const onOperatorChange = (v: string) => {
Expand Down
12 changes: 8 additions & 4 deletions packages/sheets-conditional-format/src/components/panel/rule-edit/iconSet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { TextEditor } from '@univerjs/ui';
import type { IIconType } from '../../../models/icon-map';
import { iconGroup, iconMap } from '../../../models/icon-map';
import type { IIconSet } from '../../../models/type';
import { NumberOperator, RuleType, SHEET_CONDITION_FORMAT_PLUGIN, ValueType } from '../../../base/const';
import { createDefaultValue, NumberOperator, RuleType, SHEET_CONDITION_FORMAT_PLUGIN, SubRuleType, ValueType } from '../../../base/const';
import { compareWithNumber, getOppositeOperator } from '../../../services/calculate-unit/utils';
import stylesBase from '../index.module.less';
import type { IStyleEditorProps } from './type';
Expand Down Expand Up @@ -165,12 +165,16 @@ const IconSetRuleEdit = (props: {
{ label: localeService.t(`sheet.cf.valueType.${ValueType.formula}`), value: ValueType.formula },

];
const handleOperatorChange = (operator: NumberOperator, index: number) => {
onChange([String(index), 'operator'], operator);
};
const handleValueValueChange = (v: number | string, index: number) => {
onChange([String(index), 'value', 'value'], v);
};

const handleOperatorChange = (operator: NumberOperator, index: number) => {
onChange([String(index), 'operator'], operator);
const defaultValue = createDefaultValue(SubRuleType.number, operator) as number;
handleValueValueChange(defaultValue, index);
};

const handleValueTypeChange = (v: string, index: number) => {
onChange([String(index), 'value', 'type'], v);
};
Expand Down
3 changes: 2 additions & 1 deletion packages/sheets-conditional-format/src/components/panel/rule-edit/rank.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,8 @@ export const RankStyleEditor = (props: IStyleEditorProps) => {
{['isNotBottom', 'isBottom'].includes(type) && (
<div className={`${stylesBase.labelContainer} ${stylesBase.mTSm}`}>
<InputNumber
min={0}
min={1}
max={1000}
value={value}
onChange={(v) => {
const value = v || 0;
Expand Down

0 comments on commit e42fcc4

Please sign in to comment.