#40 Select for specific value (#41)

src/components/panel/details-svgs-select.ts

@@ -0,0 +1,44 @@
+interface DetailsSvgsValue {
+    type: string;
+    key: string;
+    defaultValue: string;
+    options: Record<string | number, string>;
+}
+
+const detailsSvgsValue: DetailsSvgsValue[] = [
+    {
+        type: 'text',
+        key: 'className',
+        defaultValue: 'rmp-name__en',
+        options: {
+            'rmp-name__en': 'English',
+            'rmp-name__zh': 'Chinese',
+            'rmp-name__mtr__en': 'MTR English',
+            'rmp-name__mtr__zh': 'MTR Chinese',
+            'rmp-name__berlin': 'Berlin S/U Bahn',
+            'rmp-name__mrt': 'Singapore MRT',
+            'rmp-name__jreast_ja': 'JR East Japanese',
+            'rmp-name__jreast_en': 'JR East English',
+            'rmp-name__tokyo_en': 'Tokyo English',
+            'rmp-name__tube': 'London Tube',
+        },
+    },
+    {
+        type: 'text',
+        key: 'textAnchor',
+        defaultValue: 'start',
+        options: {
+            start: 'start',
+            middle: 'middle',
+            end: 'end',
+        },
+    },
+];
+
+export const getValueSelect = (type: string, key: string): DetailsSvgsValue | undefined =>
+    detailsSvgsValue.find(s => s.type === type && s.key === key);
+
+export const getValueSelectValue = (elem: DetailsSvgsValue, value?: string): string => {
+    const e = Object.entries(elem.options).find(([key]) => key === value);
+    return e === undefined ? elem.defaultValue : e[0];
+};

src/components/panel/details-svgs.tsx

@@ -30,6 +30,7 @@ import { supportsChildren } from '../../util/svgTagWithChildren';
 import { MoveChildrenModal } from './details-svgs-move-children';
 import svgs from '../svgs/module/svgs';
 import { SvgsType } from '../../constants/svgs';
+import { getValueSelect, getValueSelectValue } from './details-svgs-select';
 
 interface AttrVarList {
     id: string;
@@ -189,6 +190,9 @@ export function DetailsSvgs() {
             ];
             const attrsField = Object.entries(s.attrs).map(([key, value]) => {
                 const mode = value.startsWith('1') ? 'value' : value.startsWith('2') ? 'var' : 'advanced';
+                const valueSelect = getValueSelect(s.type, key);
+                const valueSelectVal = valueSelect ? getValueSelectValue(valueSelect, value.slice(2, -1)) : '';
+                const valueSelectOptions = valueSelect ? valueSelect.options : {};
                 const handleChangeMode = (mode: AttrVarMode, value: string) => {
                     if (mode === 'value') {
                         return `1"${value.slice(1)}"`;
@@ -234,7 +238,19 @@ export function DetailsSvgs() {
                                 ...path,
                                 i,
                             ]),
-                        hidden: mode === 'var',
+                        hidden: mode === 'var' || (mode === 'value' && !!valueSelect),
+                    },
+                    {
+                        label: t('panel.svgs.attrValue'),
+                        type: 'select',
+                        value: valueSelectVal,
+                        options: valueSelectOptions,
+                        onChange: v =>
+                            handleSetValue(s.id, 'attrs', { ...s.attrs, [key]: handleChangeMode(mode, '_' + v) }, [
+                                ...path,
+                                i,
+                            ]),
+                        hidden: mode !== 'value' || !valueSelect,
                     },
                     {
                         label: t('panel.svgs.attrValue'),