feat(sheet): optimize data validation i18n & dropdown bugfix (#1768)

* feat: optimize data-validation i18n * fix: dropdown error * feat: scrollbar style * feat: scrollbar style * feat: scrollbar style * feat: popup style
dream-num · Apr 2, 2024 · a8c9452 · a8c9452
1 parent 227f5b0
commit a8c9452
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 16 deletions.
diff --git a/packages/design/src/components/popup/RectPopup.tsx b/packages/design/src/components/popup/RectPopup.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { useEvent } from 'rc-util';
 import styles from './index.module.less';
 
@@ -25,6 +25,8 @@ interface IAbsolutePosition {
     bottom: number;
 }
 
+const RectPopupContext = createContext({ top: 0, bottom: 0, left: 0, right: 0 });
+
 export interface IRectPopupProps {
     children?: React.ReactNode;
 
@@ -136,11 +138,15 @@ function RectPopup(props: IRectPopupProps) {
                 e.stopPropagation();
             }}
         >
-            {children}
+            <RectPopupContext.Provider value={anchorRect}>
+                {children}
+            </RectPopupContext.Provider>
         </section>
     );
 }
 
 RectPopup.calcPopupPosition = calcPopupPosition;
 
+RectPopup.useContext = () => useContext(RectPopupContext);
+
 export { RectPopup };
diff --git a/packages/sheets-data-validation/src/common/date-text-map.ts b/packages/sheets-data-validation/src/common/date-text-map.ts
@@ -0,0 +1,61 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DataValidationOperator } from '@univerjs/core';
+
+export const DateOperatorNameMap: Record<DataValidationOperator, string> = {
+    [DataValidationOperator.BETWEEN]: 'dataValidation.date.operators.between',
+    [DataValidationOperator.EQUAL]: 'dataValidation.date.operators.equal',
+    [DataValidationOperator.GREATER_THAN]: 'dataValidation.date.operators.greaterThan',
+    [DataValidationOperator.GREATER_THAN_OR_EQUAL]: 'dataValidation.date.operators.greaterThanOrEqual',
+    [DataValidationOperator.LESS_THAN]: 'dataValidation.date.operators.lessThan',
+    [DataValidationOperator.LESS_THAN_OR_EQUAL]: 'dataValidation.date.operators.lessThanOrEqual',
+    [DataValidationOperator.NOT_BETWEEN]: 'dataValidation.date.operators.notBetween',
+    [DataValidationOperator.NOT_EQUAL]: 'dataValidation.date.operators.notEqual',
+};
+
+export const DateOperatorTextMap: Record<DataValidationOperator, string> = {
+    [DataValidationOperator.BETWEEN]: 'dataValidation.date.operators.between',
+    [DataValidationOperator.EQUAL]: 'dataValidation.date.operators.equal',
+    [DataValidationOperator.GREATER_THAN]: 'dataValidation.date.operators.greaterThan',
+    [DataValidationOperator.GREATER_THAN_OR_EQUAL]: 'dataValidation.date.operators.greaterThanOrEqual',
+    [DataValidationOperator.LESS_THAN]: 'dataValidation.date.operators.lessThan',
+    [DataValidationOperator.LESS_THAN_OR_EQUAL]: 'dataValidation.date.operators.lessThanOrEqual',
+    [DataValidationOperator.NOT_BETWEEN]: 'dataValidation.date.operators.notBetween',
+    [DataValidationOperator.NOT_EQUAL]: 'dataValidation.date.operators.notEqual',
+};
+
+export const DateOperatorTitleMap: Record<DataValidationOperator, string> = {
+    [DataValidationOperator.BETWEEN]: 'dataValidation.date.ruleName.between',
+    [DataValidationOperator.EQUAL]: 'dataValidation.date.ruleName.equal',
+    [DataValidationOperator.GREATER_THAN]: 'dataValidation.date.ruleName.greaterThan',
+    [DataValidationOperator.GREATER_THAN_OR_EQUAL]: 'dataValidation.date.ruleName.greaterThanOrEqual',
+    [DataValidationOperator.LESS_THAN]: 'dataValidation.date.ruleName.lessThan',
+    [DataValidationOperator.LESS_THAN_OR_EQUAL]: 'dataValidation.date.ruleName.lessThanOrEqual',
+    [DataValidationOperator.NOT_BETWEEN]: 'dataValidation.date.ruleName.notBetween',
+    [DataValidationOperator.NOT_EQUAL]: 'dataValidation.date.ruleName.notEqual',
+};
+
+export const DateOperatorErrorTitleMap: Record<DataValidationOperator, string> = {
+    [DataValidationOperator.BETWEEN]: 'dataValidation.date.errorMsg.between',
+    [DataValidationOperator.EQUAL]: 'dataValidation.date.errorMsg.equal',
+    [DataValidationOperator.GREATER_THAN]: 'dataValidation.date.errorMsg.greaterThan',
+    [DataValidationOperator.GREATER_THAN_OR_EQUAL]: 'dataValidation.date.errorMsg.greaterThanOrEqual',
+    [DataValidationOperator.LESS_THAN]: 'dataValidation.date.errorMsg.lessThan',
+    [DataValidationOperator.LESS_THAN_OR_EQUAL]: 'dataValidation.date.errorMsg.lessThanOrEqual',
+    [DataValidationOperator.NOT_BETWEEN]: 'dataValidation.date.errorMsg.notBetween',
+    [DataValidationOperator.NOT_EQUAL]: 'dataValidation.date.errorMsg.notEqual',
+};
diff --git a/packages/sheets-data-validation/src/locales/enUS.ts b/packages/sheets-data-validation/src/locales/enUS.ts
@@ -127,12 +127,15 @@ export default {
             title: 'Number',
         },
         decimal: {
-            title: 'Decimal',
+            title: 'Number',
+        },
+        whole: {
+            title: 'Integer',
         },
         checkbox: {
             title: 'Checkbox',
             error: 'This cell\'s contents violate its validation rule',
-            tips: '在单元格内使用自定义值',
+            tips: 'Use custom values within cells',
         },
         custom: {
             title: 'Custom formula',
@@ -144,7 +147,7 @@ export default {
             ok: 'OK',
         },
         error: {
-            title: 'Invalid：',
+            title: 'Invalid:',
         },
         renderMode: {
             arrow: 'Arrow',

diff --git a/packages/sheets-data-validation/src/locales/zhCN.ts b/packages/sheets-data-validation/src/locales/zhCN.ts
@@ -125,7 +125,7 @@ export default {
             title: '文本长度',
         },
         decimal: {
-            title: '小数',
+            title: '数字',
         },
         whole: {
             title: '整数',

diff --git a/packages/sheets-data-validation/src/services/dropdown-manager.service.ts b/packages/sheets-data-validation/src/services/dropdown-manager.service.ts
@@ -20,10 +20,11 @@ import { Subject } from 'rxjs';
 import type { IDisposable } from '@wendellhu/redi';
 import { Inject } from '@wendellhu/redi';
 import { SheetCanvasPopManagerService, SheetSkeletonManagerService } from '@univerjs/sheets-ui';
-import { DataValidatorRegistryService } from '@univerjs/data-validation';
+import { DataValidationModel, DataValidatorRegistryService } from '@univerjs/data-validation';
 import { IZenZoneService } from '@univerjs/ui';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { DROP_DOWN_KEY } from '../views/drop-down';
+import type { SheetDataValidationManager } from '../models/sheet-data-validation-manager';
 
 export interface IDropdownParam {
     location: ISheetLocation;
@@ -56,7 +57,8 @@ export class DataValidationDropdownManagerService extends Disposable {
         @Inject(SheetSkeletonManagerService) private readonly _sheetSkeletonManagerService: SheetSkeletonManagerService,
         @Inject(DataValidatorRegistryService) private readonly _dataValidatorRegistryService: DataValidatorRegistryService,
         @IZenZoneService private readonly _zenZoneService: IZenZoneService,
-        @IRenderManagerService private readonly _renderManagerService: IRenderManagerService
+        @IRenderManagerService private readonly _renderManagerService: IRenderManagerService,
+        @Inject(DataValidationModel) private readonly _dataValidationModel: DataValidationModel
     ) {
         super();
         this._init();
@@ -127,9 +129,8 @@ export class DataValidationDropdownManagerService extends Disposable {
         if (!worksheet) {
             return;
         }
-
-        const cell = worksheet.getCell(row, col);
-        const rule = cell?.dataValidation?.rule;
+        const manager = this._dataValidationModel.ensureManager(unitId, subUnitId) as SheetDataValidationManager;
+        const rule = manager.getRuleByLocation(row, col);
         const skeleton = this._sheetSkeletonManagerService.getOrCreateSkeleton({
             unitId,
             sheetId: subUnitId,

diff --git a/packages/sheets-data-validation/src/validators/date-validator.ts b/packages/sheets-data-validation/src/validators/date-validator.ts
@@ -27,6 +27,10 @@ import { serialTimeToTimestamp } from '../utils/date';
 import { DataValidationFormulaService } from '../services/dv-formula.service';
 import { getFormulaResult } from '../utils/formula';
 import { DATE_DROPDOWN_KEY } from '../views';
+import { DateOperatorErrorTitleMap, DateOperatorNameMap, DateOperatorTitleMap } from '../common/date-text-map';
+
+const FORMULA1 = '{FORMULA1}';
+const FORMULA2 = '{FORMULA2}';
 
 const isValidDateString = (date: string) => {
     return dayjs(date).isValid();
@@ -235,4 +239,26 @@ export class DateValidator extends BaseDataValidator<Dayjs> {
             }
         }
     }
+
+    override get operatorNames() {
+        return this.operators.map((operator) => this.localeService.t(DateOperatorNameMap[operator]));
+    }
+
+    override generateRuleName(rule: IDataValidationRuleBase): string {
+        if (!rule.operator) {
+            return this.titleStr;
+        }
+
+        const ruleName = this.localeService.t(DateOperatorTitleMap[rule.operator]).replace(FORMULA1, rule.formula1 ?? '').replace(FORMULA2, rule.formula2 ?? '');
+        return `${this.titleStr} ${ruleName}`;
+    }
+
+    override generateRuleErrorMessage(rule: IDataValidationRuleBase) {
+        if (!rule.operator) {
+            return this.titleStr;
+        }
+
+        const errorMsg = this.localeService.t(DateOperatorErrorTitleMap[rule.operator]).replace(FORMULA1, rule.formula1 ?? '').replace(FORMULA2, rule.formula2 ?? '');
+        return `${errorMsg}`;
+    }
 }
diff --git a/packages/sheets-data-validation/src/views/list-dropdown/index.module.less b/packages/sheets-data-validation/src/views/list-dropdown/index.module.less
@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: column;
     max-width: 200px;
+    box-sizing: border-box;
 
     &-title {
         padding: 0 6px;
@@ -21,6 +22,9 @@
         flex: 1;
         overflow-y: scroll;
         overflow-x: hidden;
+        scrollbar-color: #73737366 transparent;
+        scrollbar-gutter: stable;
+        scrollbar-width: thin;
     }
 
     &-selected-icon {

diff --git a/packages/sheets-data-validation/src/views/list-dropdown/index.tsx b/packages/sheets-data-validation/src/views/list-dropdown/index.tsx
@@ -24,6 +24,7 @@ import { IEditorBridgeService } from '@univerjs/sheets-ui';
 import { KeyCode } from '@univerjs/ui';
 import { DeviceInputEventType } from '@univerjs/engine-render';
 import { DataValidationRenderMode } from '@univerjs/core/types/enum/data-validation-render-mode.js';
+import { RectPopup } from '@univerjs/design';
 import type { ListMultipleValidator } from '../../validators/list-multiple-validator';
 import { deserializeListOptions, getDataValidationCellValue, serializeListOptions } from '../../validators/util';
 import type { IDropdownComponentProps } from '../../services/dropdown-manager.service';
@@ -38,12 +39,13 @@ interface ISelectListProps {
     options: { label: string;value: string; color?: string }[];
     title?: string;
     onEdit?: () => void;
+    style?: React.CSSProperties;
 }
 
 const SelectList = (props: ISelectListProps) => {
-    const { value, onChange, multiple, options, title, onEdit } = props;
+    const { value, onChange, multiple, options, title, onEdit, style } = props;
     return (
-        <div className={styles.dvListDropdown}>
+        <div className={styles.dvListDropdown} style={style}>
             <div className={styles.dvListDropdownTitle}>
                 {title}
             </div>
@@ -91,7 +93,8 @@ export function ListDropDown(props: IDropdownComponentProps) {
     const localeService = useDependency(LocaleService);
     const [localValue, setLocalValue] = useState('');
     const editorBridgeService = useDependency(IEditorBridgeService);
-
+    const anchorRect = RectPopup.useContext();
+    const cellWidth = anchorRect.right - anchorRect.left;
     if (!worksheet) {
         return null;
     }
@@ -119,6 +122,7 @@ export function ListDropDown(props: IDropdownComponentProps) {
 
     return (
         <SelectList
+            style={{ minWidth: cellWidth, maxWidth: Math.max(cellWidth, 200) }}
             title={multiple ? localeService.t('dataValidation.listMultiple.dropdown') : localeService.t('dataValidation.list.dropdown')}
             value={value}
             multiple={multiple}

diff --git a/packages/sheets-ui/src/controllers/cell-custom-render.controller.ts b/packages/sheets-ui/src/controllers/cell-custom-render.controller.ts
@@ -44,7 +44,7 @@ export class CellCustomRenderController extends Disposable {
         this._univerInstanceService.currentSheet$.subscribe((workbook) => {
             if (workbook) {
                 const unitId = workbook.getUnitId();
-                const subUnitId = workbook.getActiveSheet().getSheetId();
+
                 const currentRender = this._renderManagerService.getRenderById(workbook.getUnitId());
                 if (currentRender && currentRender.mainComponent) {
                     disposableCollection.dispose();
@@ -102,7 +102,7 @@ export class CellCustomRenderController extends Disposable {
                         const row = cellIndex.actualRow;
                         const col = cellIndex.actualCol;
                         const sortedRenders = renders.sort(sortRules);
-
+                        const subUnitId = workbook.getActiveSheet().getSheetId();
                         const info: ICellRenderContext = {
                             data: cellData,
                             style: skeleton.getsStyles().getStyleByCell(cellData),