feat: update

packages/data-validation/src/validators/base-data-validator.ts

@@ -66,6 +66,8 @@ export enum DataValidatorDropdownType {
     DATETIME = 'datetime',
     LIST = 'list',
     MULTIPLE_LIST = 'multipleList',
+    COLOR = 'color',
+    CASCADE = 'cascade',
 }
 
 export abstract class BaseDataValidator {

packages/design/src/components/cascader-list/CascaderList.tsx

@@ -21,11 +21,11 @@ import React, { useContext, useMemo } from 'react';
 import { ConfigContext } from '../config-provider/ConfigProvider';
 import styles from './index.module.less';
 
-interface IOption {
+export interface ICascaderOption {
     label: string;
     value: string;
     color?: string;
-    children?: IOption[];
+    children?: ICascaderOption[];
 }
 
 export interface ICascaderListProps {
@@ -38,7 +38,7 @@ export interface ICascaderListProps {
      * The options of select
      * @default []
      */
-    options?: IOption[];
+    options?: ICascaderOption[];
 
     /**
      * The callback function that is triggered when the value is changed

packages/design/src/components/cascader-list/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { CascaderList, type ICascaderListProps } from './CascaderList';
+export { CascaderList, type ICascaderListProps, type ICascaderOption } from './CascaderList';

packages/design/src/index.ts

@@ -18,7 +18,7 @@ import './global.css';
 
 export { Avatar, type IAvatarProps } from './components/avatar';
 export { Button, type ButtonSize, type ButtonType, type IButtonProps } from './components/button';
-export { CascaderList, type ICascaderListProps } from './components/cascader-list';
+export { CascaderList, type ICascaderListProps, type ICascaderOption } from './components/cascader-list';
 export { Checkbox, type ICheckboxProps } from './components/checkbox';
 export { CheckboxGroup, type ICheckboxGroupProps } from './components/checkbox-group';
 export { ColorPicker, type IColorPickerProps } from './components/color-picker';

packages/sheets-ui/src/services/cell-dropdown-manager.service.ts

@@ -20,7 +20,7 @@ import type { ICellDropdown } from '../views/dropdown';
 import { Disposable, DisposableCollection, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, Inject } from '@univerjs/core';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { ComponentManager, IZenZoneService } from '@univerjs/ui';
-import { DateDropdown, dropdownMap, ListDropDown } from '../views/dropdown';
+import { dropdownMap } from '../views/dropdown';
 import { SheetCanvasPopManagerService } from './canvas-pop-manager.service';
 
 export type IDropdownParam = {
@@ -43,10 +43,7 @@ export class SheetCellDropdownManagerService extends Disposable {
     ) {
         super();
 
-        [
-            ListDropDown,
-            DateDropdown,
-        ].forEach((component) => {
+        Object.values(dropdownMap).forEach((component) => {
             this.disposeWithMe(this._componentManager.register(component.componentKey, component));
         });
     }
@@ -58,14 +55,14 @@ export class SheetCellDropdownManagerService extends Disposable {
             throw new Error('[SheetCellDropdownManagerService]: cannot show dropdown when zen mode is visible');
         }
 
-        const componentKey = dropdownMap[param.type];
+        const component = dropdownMap[param.type];
         const currentRender = this._renderManagerService.getRenderById(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
         const disposable = new DisposableCollection();
         const popupDisposable = this._canvasPopupManagerService.attachPopupToCell(
             row,
             col,
             {
-                componentKey,
+                componentKey: component.componentKey,
                 onClickOutside: () => {
                     if (closeOnOutSide) {
                         disposable.dispose();

packages/sheets-ui/src/views/dropdown/cascader-dropdown/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 type { ICascaderOption } from '@univerjs/design';
+import type { IPopup } from '@univerjs/ui';
+import type { IBaseDropdownProps } from '../type';
+import { CascaderList } from '@univerjs/design';
+import { useState } from 'react';
+
+export interface ICascaderDropdownProps {
+    options: ICascaderOption[];
+    defaultValue?: string[];
+    onChange: (value: string[]) => void;
+}
+
+export function CascaderDropdown(props: { popup: IPopup<ICascaderDropdownProps & IBaseDropdownProps> }) {
+    const { popup } = props;
+    const { extraProps } = popup;
+    const { options, defaultValue, onChange } = extraProps!;
+    const [localValue, setLocalValue] = useState(defaultValue ?? []);
+
+    return (
+        <CascaderList
+            options={options}
+            value={localValue}
+            onChange={onChange}
+        />
+    );
+}
+
+CascaderDropdown.componentKey = 'sheets.dropdown.cascader';

packages/sheets-ui/src/views/dropdown/color-dropdown/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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 type { IPopup } from '@univerjs/ui';
+import type { IBaseDropdownProps } from '../type';
+import { ColorPicker } from '@univerjs/design';
+
+export interface IColorDropdownProps {
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+
+export function ColorDropdown(props: { popup: IPopup<IColorDropdownProps & IBaseDropdownProps> }) {
+    const { popup } = props;
+    const { extraProps } = popup;
+    const { defaultValue, onChange } = extraProps!;
+
+    return (
+        <ColorPicker
+            value={defaultValue}
+            onChange={onChange}
+        />
+    );
+}
+
+ColorDropdown.componentKey = 'sheets.dropdown.color';

packages/sheets-ui/src/views/dropdown/index.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { CascaderDropdown, type ICascaderDropdownProps } from './cascader-dropdown';
+import { ColorDropdown, type IColorDropdownProps } from './color-dropdown';
 import { DateDropdown, type IDateDropdownProps } from './date-dropdown';
 import { type IListDropdownProps, ListDropDown } from './list-dropdown';
 
@@ -23,12 +25,22 @@ export type ICellDropdown = {
 } | {
     type: 'list';
     props: IListDropdownProps;
+} | {
+    type: 'color';
+    props: IColorDropdownProps;
+} | {
+    type: 'cascader';
+    props: ICascaderDropdownProps;
 };
 
+export { CascaderDropdown } from './cascader-dropdown';
+export { ColorDropdown } from './color-dropdown';
 export { DateDropdown } from './date-dropdown';
 export { ListDropDown } from './list-dropdown';
 
 export const dropdownMap = {
-    datepicker: DateDropdown.componentKey,
-    list: ListDropDown.componentKey,
+    datepicker: DateDropdown,
+    list: ListDropDown,
+    color: ColorDropdown,
+    cascader: CascaderDropdown,
 };