feat(formula): select function, range selector

dream-num · Nov 17, 2023 · 34101b4 · 34101b4
1 parent efa8c98
commit 34101b4
Show file tree

Hide file tree

Showing 26 changed files with 346 additions and 101 deletions.
diff --git a/packages/base-ui/src/components/index.ts b/packages/base-ui/src/components/index.ts
@@ -1,3 +1,2 @@
 export * from './custom-label';
 export * from './menu';
-export * from './range-selector/RangeSelector';
diff --git a/packages/base-ui/src/components/range-selector/RangeSelector.tsx b/packages/base-ui/src/components/range-selector/RangeSelector.tsx
diff --git a/packages/base-ui/src/components/range-selector/index.module.less b/packages/base-ui/src/components/range-selector/index.module.less
diff --git a/packages/base-ui/src/views/components/doc-bars/Button/index.module.less b/packages/base-ui/src/views/components/doc-bars/Button/index.module.less
@@ -21,7 +21,6 @@
 
     &:not([disabled]):hover {
         background-color: rgb(var(--grey-100));
-        border-color: transparent;
     }
 
     &[disabled] {
@@ -30,8 +29,6 @@
     }
 
     &-active {
-        color: rgb(var(--text-color));
         background-color: rgb(var(--grey-100));
-        border-color: transparent;
     }
 }
diff --git a/packages/base-ui/tsconfig.json b/packages/base-ui/tsconfig.json
@@ -10,5 +10,5 @@
     "include": [
         "src/**/*",
         "test/**/*.test.(ts|tsx|js)"
-    ]
+, "../ui-plugin-sheets/src/components/range-selector"    ]
 }
diff --git a/packages/design/src/components/input/Input.tsx b/packages/design/src/components/input/Input.tsx
@@ -5,6 +5,9 @@ import RcInput from 'rc-input';
 import styles from './index.module.less';
 
 export interface IInputProps {
+    /** Semantic DOM class */
+    className?: string;
+
     /**
      * The input affix wrapper style
      */
@@ -65,6 +68,7 @@ export interface IInputProps {
 
 export function Input(props: IInputProps) {
     const {
+        className,
         affixWrapperStyle,
         type = 'text',
         placeholder,
@@ -82,12 +86,15 @@ export function Input(props: IInputProps) {
         onChange?.(value);
     }
 
-    const _className = clsx({
-        [styles.inputAffixWrapperMini]: size === 'mini',
-        [styles.inputAffixWrapperSmall]: size === 'small',
-        [styles.inputAffixWrapperMiddle]: size === 'middle',
-        [styles.inputAffixWrapperLarge]: size === 'large',
-    });
+    const _className = clsx(
+        {
+            [styles.inputAffixWrapperMini]: size === 'mini',
+            [styles.inputAffixWrapperSmall]: size === 'small',
+            [styles.inputAffixWrapperMiddle]: size === 'middle',
+            [styles.inputAffixWrapperLarge]: size === 'large',
+        },
+        className
+    );
 
     return (
         <RcInput

diff --git a/packages/design/src/components/select/Select.tsx b/packages/design/src/components/select/Select.tsx
@@ -10,6 +10,9 @@ export interface ISelectProps {
      */
     value: string;
 
+    /** Semantic DOM class */
+    className?: string;
+
     /**
      * The options of select
      * @default []
@@ -26,12 +29,13 @@ export interface ISelectProps {
 }
 
 export function Select(props: ISelectProps) {
-    const { value, options = [], onChange } = props;
+    const { value, className = '', options = [], onChange } = props;
 
     const { mountContainer } = useContext(ConfigContext);
 
     return (
         <RcSelect
+            className={className}
             prefixCls={styles.select}
             getPopupContainer={() => mountContainer}
             options={options}

diff --git a/packages/sheets-plugin-formula-ui/src/commands/operations/editor-formula.operation.ts b/packages/sheets-plugin-formula-ui/src/commands/operations/editor-formula.operation.ts
@@ -12,7 +12,7 @@ export interface ISelectEditorFormulaOperationParam {
     keycode?: KeyCode;
 }
 
-export const SelectEditorFormluaOperation: IOperation<ISelectEditorFormulaOperationParam> = {
+export const SelectEditorFormulaOperation: IOperation<ISelectEditorFormulaOperationParam> = {
     id: 'formula-ui.operation.select-editor-formula',
     type: CommandType.OPERATION,
     handler: (accessor, params) => {

diff --git a/packages/sheets-plugin-formula-ui/src/controllers/formula-ui.controller.ts b/packages/sheets-plugin-formula-ui/src/controllers/formula-ui.controller.ts
@@ -9,7 +9,7 @@ import { Disposable, ICommandService, LifecycleStages, OnLifecycle } from '@univ
 import { Inject, Injector } from '@wendellhu/redi';
 import { connectInjector } from '@wendellhu/redi/react-bindings';
 
-import { SelectEditorFormluaOperation } from '../commands/operations/editor-formula.operation';
+import { SelectEditorFormulaOperation } from '../commands/operations/editor-formula.operation';
 import { HelpFunctionOperation } from '../commands/operations/help-function.operation';
 import { InsertFunctionOperation } from '../commands/operations/insert-function.operation';
 import { MoreFunctionsOperation } from '../commands/operations/more-functions.operation';
@@ -54,7 +54,7 @@ export class FormulaUIController extends Disposable {
             MoreFunctionsOperation,
             SearchFunctionOperation,
             HelpFunctionOperation,
-            SelectEditorFormluaOperation,
+            SelectEditorFormulaOperation,
         ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
     }
 

diff --git a/packages/sheets-plugin-formula-ui/src/controllers/shortcuts/prompt.shortcut.ts b/packages/sheets-plugin-formula-ui/src/controllers/shortcuts/prompt.shortcut.ts
@@ -2,7 +2,7 @@ import { DeviceInputEventType } from '@univerjs/base-render';
 import { IShortcutItem, KeyCode } from '@univerjs/base-ui';
 import { whenEditorInputFormulaActivated } from '@univerjs/ui-plugin-sheets';
 
-import { SelectEditorFormluaOperation } from '../../commands/operations/editor-formula.operation';
+import { SelectEditorFormulaOperation } from '../../commands/operations/editor-formula.operation';
 
 export const PROMPT_SELECTION_KEYCODE_LIST = [
     KeyCode.ARROW_DOWN,
@@ -17,7 +17,7 @@ export function promptSelectionShortcutItem() {
     const shortcutList: IShortcutItem[] = [];
     for (const keycode of PROMPT_SELECTION_KEYCODE_LIST) {
         shortcutList.push({
-            id: SelectEditorFormluaOperation.id,
+            id: SelectEditorFormulaOperation.id,
             binding: keycode,
             preconditions: (contextService) => whenEditorInputFormulaActivated(contextService),
             staticParameters: {

diff --git a/packages/sheets-plugin-formula-ui/src/locale/zh-CN.ts b/packages/sheets-plugin-formula-ui/src/locale/zh-CN.ts
@@ -69,7 +69,7 @@ export default {
         },
 
         moreFunctions: {
-            confirm: '确定',
+            confirm: '应用',
             prev: '上一步',
             next: '下一步',
             searchFunctionPlaceholder: '搜索函数',

diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/MoreFunctions.tsx b/packages/sheets-plugin-formula-ui/src/views/more-functions/MoreFunctions.tsx
@@ -12,34 +12,37 @@ import { SelectFunction } from './select-function/SelectFunction';
 export function MoreFunctions() {
     const [selectFunction, setSelectFunction] = useState<boolean>(true);
     const [inputParams, setInputParams] = useState<boolean>(false);
+    const [params, setParams] = useState<string[]>([]);
     const [functionInfo, setFunctionInfo] = useState<IFunctionInfo | null>(null);
 
     const localeService = useDependency(LocaleService);
     const sidebarService = useDependency(ISidebarService);
 
     function handleClickNextPrev() {
+        if (selectFunction) {
+            // TODO@Dushusir: insert function
+        }
+
         setSelectFunction(!selectFunction);
         setInputParams(!inputParams);
     }
 
     function handleConfirm() {
-        sidebarService.close();
+        // TODO@Dushusir: save function  `=${functionInfo?.functionName}(${params.join(',')})`
     }
 
     return (
         <div className={styles.formulaMoreFunctions}>
             {selectFunction && <SelectFunction onChange={setFunctionInfo}></SelectFunction>}
-            {inputParams && <InputParams functionInfo={functionInfo}></InputParams>}
-            <div>
+            {inputParams && <InputParams functionInfo={functionInfo} onChange={setParams}></InputParams>}
+            <div className={styles.formulaMoreFunctionsOperation}>
                 {selectFunction && (
                     <Button type="primary" onClick={handleClickNextPrev}>
                         {localeService.t('formula.moreFunctions.next')}
                     </Button>
                 )}
                 {inputParams && (
-                    <Button type="text" onClick={handleClickNextPrev}>
-                        {localeService.t('formula.moreFunctions.prev')}
-                    </Button>
+                    <Button onClick={handleClickNextPrev}>{localeService.t('formula.moreFunctions.prev')}</Button>
                 )}
                 {inputParams && (
                     <Button type="primary" onClick={handleConfirm}>

diff --git a/...ages/sheets-plugin-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx b/...ages/sheets-plugin-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx
@@ -0,0 +1,16 @@
+import styles from './index.module.less';
+
+interface IParamsProps {
+    className?: string;
+    title?: string;
+    value?: string | React.ReactElement;
+}
+
+export function FunctionParams(props: IParamsProps) {
+    return (
+        <div className={styles.formulaFunctionParams}>
+            <div className={`${styles.formulaFunctionParamsTitle} ${props.className}`}>{props.title}</div>
+            <div className={styles.formulaFunctionParamsDetail}>{props.value}</div>
+        </div>
+    );
+}
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/index.module.less
@@ -0,0 +1,14 @@
+.formula-function-params {
+    margin: var(--margin-xs) 0;
+    font-size: var(--font-size-xxs);
+
+    &-title {
+        font-weight: 500;
+        color: rgb(var(--text-color-secondary));
+    }
+
+    &-detail {
+        font-weight: 400;
+        color: rgb(var(--text-color));
+    }
+}
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/index.module.less
@@ -3,4 +3,13 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+
+    &-operation {
+        display: flex;
+        justify-content: flex-end;
+
+        >button{
+            margin: 0 0 var(--margin-lg) var(--margin-base);
+        }
+    }
 }
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/InputParams.tsx b/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/InputParams.tsx
@@ -1,24 +1,52 @@
 import { IFunctionInfo, IFunctionParam } from '@univerjs/base-formula-engine';
-import { RangeSelector } from '@univerjs/base-ui';
+import { RangeSelector } from '@univerjs/ui-plugin-sheets';
+import { useState } from 'react';
 
+import { FunctionParams } from '../function-params/FunctionParams';
 import styles from './index.module.less';
 
 export interface IInputParamsProps {
     functionInfo: IFunctionInfo | null;
+    onChange: (params: string[]) => void;
 }
 
 export function InputParams(props: IInputParamsProps) {
-    const { functionInfo } = props;
+    const { functionInfo, onChange } = props;
+    const [params, setParams] = useState<string[]>([]);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    function handleRangeChange(range: string, paramIndex: number) {
+        const newParams = [...params];
+        newParams[paramIndex] = range;
+        setParams(newParams);
+        onChange(newParams);
+    }
+
     return (
         <div className={styles.formulaInputParams}>
-            {functionInfo &&
-                functionInfo.functionParameter &&
-                functionInfo.functionParameter.map((item: IFunctionParam, i: number) => (
-                    <div key={i}>
-                        {item.name}
-                        <RangeSelector />
-                    </div>
-                ))}
+            <div className={styles.formulaInputParamsList}>
+                {functionInfo &&
+                    functionInfo.functionParameter &&
+                    functionInfo.functionParameter.map((item: IFunctionParam, i: number) => (
+                        <div key={i}>
+                            <div className={styles.formulaInputParamsListItemName}>{item.name}</div>
+
+                            <div className={styles.formulaInputParamsListItemSelector}>
+                                <RangeSelector
+                                    onChange={(range: string) => handleRangeChange(range, i)}
+                                    onActive={() => setActiveIndex(i)}
+                                />
+                            </div>
+                        </div>
+                    ))}
+            </div>
+
+            <div className={styles.formulaInputParamsInfo}>
+                <FunctionParams
+                    title={functionInfo?.functionParameter[activeIndex].name}
+                    value={functionInfo?.functionParameter[activeIndex].detail}
+                />
+            </div>
         </div>
     );
 }
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/index.module.less
@@ -1,3 +1,11 @@
 .formula-input-params {
-    padding: var(--padding-xs);
+    &-list-item{
+        &-name{
+            font-size: var(--font-size-sm);
+        }
+
+        &-selector{
+            margin: var(--margin-xxs) 0 var(--margin-xs) 0;
+        }
+    }
 }