feat(numfmt): support custom format

packages/sheets-numfmt/src/components/custom-format/index.module.less

@@ -0,0 +1,41 @@
+.custom-format {
+    &-title {
+        margin-top: 16px;
+    }
+
+    &-input {
+        margin-top: 8px;
+        width: 100%;
+    }
+
+    &-history-list {
+        margin-top: 8px;
+        padding: 8px;
+        border-radius: 8px;
+        border: 1px solid var(---Grey-200, #e5e5e5);
+        max-height: 400px;
+        overflow: scroll;
+        &-item {
+            padding: 6px 0px;
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            cursor: pointer;
+            &-icon-wrap {
+                width: 16px;
+                display: flex;
+                align-items: center;
+                color: #274fee;
+            }
+        }
+    }
+
+    &-des {
+        margin-top: 8px;
+        color: var(---Grey-600, #7a7a7a);
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+    }
+}

packages/sheets-numfmt/src/components/custom-format/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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 React, { useEffect, useState } from 'react';
+import { ILocalStorageService, LocaleService, useDependency } from '@univerjs/core';
+import { Input } from '@univerjs/design';
+import { CheckMarkSingle } from '@univerjs/icons';
+import type { IBusinessComponentProps } from '../../base/types';
+import { CURRENCYFORMAT, DATEFMTLISG, NUMBERFORMAT } from '../../base/const/FORMATDETAIL';
+import { UserHabitController } from '../../controllers/user-habit.controller';
+import styles from './index.module.less';
+
+const key = 'customFormat';
+const historyPatternKey = 'numfmt_custom_pattern';
+
+export function CustomFormat(props: IBusinessComponentProps) {
+    const { defaultPattern, action, onChange } = props;
+    const userHabitController = useDependency(UserHabitController);
+    const localStorageService = useDependency(ILocalStorageService);
+    const localeService = useDependency(LocaleService);
+
+    const [pattern, patternSet] = useState(defaultPattern);
+    action.current = () => {
+        userHabitController.markHabit(key, pattern);
+        localStorageService.getItem<string[]>(historyPatternKey).then((list = []) => {
+            const _list = [...new Set([pattern, ...(list || [])])].splice(0, 10).filter((e) => !!e);
+            localStorageService.setItem(historyPatternKey, _list);
+        });
+        return pattern;
+    };
+    const [options, optionsSet] = useState<(string | number)[]>([]);
+
+    useEffect(() => {
+        localStorageService.getItem<string[]>(historyPatternKey).then((historyList) => {
+            const list = [
+                ...CURRENCYFORMAT.map((item) => item.suffix('$')),
+                ...DATEFMTLISG.map((item) => item.suffix),
+                ...NUMBERFORMAT.map((item) => item.suffix),
+            ];
+            list.push(...(historyList || []));
+            userHabitController.addHabit(key, []).finally(() => {
+                userHabitController.getHabit(key, list).then((list) => {
+                    optionsSet([...new Set(list)]);
+                });
+            });
+        });
+    }, []);
+
+    const handleClick = (p: string) => {
+        patternSet(p);
+        onChange(p);
+    };
+
+    const handleBlur = () => {
+        onChange(pattern);
+    };
+
+    return (
+        <div className={styles.customFormat}>
+            <div className={styles.customFormatTitle}>{localeService.t('sheet.numfmt.customFormat')}</div>
+            <Input placeholder={localeService.t('sheet.numfmt.customFormat')} onBlur={handleBlur} value={pattern} onChange={patternSet} className={styles.customFormatInput}></Input>
+            <div className={styles.customFormatHistoryList}>
+                {options.map((p) => (
+                    <div key={p} onClick={() => handleClick(p as string)} className={styles.customFormatHistoryListItem}>
+                        <div className={styles.customFormatHistoryListItemIconWrap}>
+                            {pattern === p && <CheckMarkSingle />}
+                        </div>
+                        <div>
+                            {p}
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className={styles.customFormatDes}>
+                {localeService.t('sheet.numfmt.customFormatDes')}
+            </div>
+        </div>
+    );
+}

packages/sheets-numfmt/src/components/index.tsx

@@ -33,6 +33,7 @@ import { CurrencyPanel, isCurrencyPanel } from './currency';
 import { DatePanel, isDatePanel } from './date';
 import { GeneralPanel, isGeneralPanel } from './general';
 import { isThousandthPercentilePanel, ThousandthPercentilePanel } from './thousandth-percentile';
+import { CustomFormat } from './custom-format';
 
 export interface ISheetNumfmtPanelProps {
     value: { defaultValue: number; defaultPattern: string; row: number; col: number };
@@ -52,6 +53,7 @@ export const SheetNumfmtPanel: FC<ISheetNumfmtPanelProps> = (props) => {
                 { label: 'sheet.numfmt.currency', component: CurrencyPanel },
                 { label: 'sheet.numfmt.date', component: DatePanel },
                 { label: 'sheet.numfmt.thousandthPercentile', component: ThousandthPercentilePanel },
+                { label: 'sheet.numfmt.customFormat', component: CustomFormat },
             ].map((item) => ({ ...item, label: t(item.label) })),
         []
     );
@@ -113,7 +115,7 @@ export const SheetNumfmtPanel: FC<ISheetNumfmtPanelProps> = (props) => {
             <div>
                 <div className="label m-t-14">{t('sheet.numfmt.numfmtType')}</div>
                 <div className="m-t-8">
-                    <Select onChange={handleSelect} options={selectOptions} value={type} />
+                    <Select onChange={handleSelect} options={selectOptions} value={type} style={{ width: '100%' }} />
                 </div>
                 <div>
                     {BusinessComponent && (

packages/sheets-numfmt/src/locale/en-US.ts

@@ -49,6 +49,9 @@ const locale: typeof zhCN = {
             thousandthPercentileDes: 'The percentile format is used for the representation of ordinary numbers. Monetary and accounting formats provide a specialized format for monetary value calculations.',
             addDecimal: 'Increase decimal places',
             subtractDecimal: 'Decreasing decimal places',
+            customFormat: 'Custom Format',
+            customFormatDes: 'Generate custom number formats based on existing formats.',
+
         },
     },
 };

packages/sheets-numfmt/src/locale/ru-RU.ts

@@ -49,6 +49,9 @@ const locale: typeof zhCN = {
             thousandthPercentileDes: 'Формат процента используется для представления обычных чисел. Монетарные и бухгалтерские форматы предоставляют специальный формат для вычислений монетарных значений.',
             addDecimal: 'Увеличить количество десятичных знаков',
             subtractDecimal: 'Уменьшить количество десятичных знаков',
+            customFormat: 'Custom Format',
+            customFormatDes: 'Generate custom number formats based on existing formats.',
+
         },
     },
 };

packages/sheets-numfmt/src/locale/vi-VN.ts

@@ -49,6 +49,9 @@ const locale: typeof zhCN = {
             thousandthPercentileDes: 'Định dạng phân vị phần nghìn được sử dụng để biểu thị các số thông thường. Các định dạng tiền tệ và kế toán cung cấp các định dạng chuyên dụng để tính toán giá trị tiền tệ.',
             addDecimal: 'Thêm chữ số thập phân',
             subtractDecimal: 'Giảm chữ số thập phân',
+            customFormat: 'Custom Format',
+            customFormatDes: 'Generate custom number formats based on existing formats.',
+
         },
     },
 };

packages/sheets-numfmt/src/locale/zh-CN.ts

@@ -47,6 +47,9 @@ const locale = {
             thousandthPercentileDes: '千分位符格式用于一般数字的表示。货币和会计格式则提供货币值计算的专用格式。',
             addDecimal: '增加小数位',
             subtractDecimal: '减少小数位',
+            customFormat: '自定义格式',
+            customFormatDes: '根据现有格式生成自定义数字格式。',
+
         },
     },
 };

packages/sheets-numfmt/src/locale/zh-TW.ts

@@ -49,6 +49,9 @@ const locale: typeof zhCN = {
             thousandthPercentileDes: '千分位符號格式用於一般數字的表示。貨幣和會計格式則提供貨幣值計算的專用格式。 ',
             addDecimal: '增加小數位',
             subtractDecimal: '減少小數位',
+            customFormat: '自定义格式',
+            customFormatDes: '根据现有格式生成自定义数字格式。',
+
         },
     },
 };