✨🚧Introduced IListProperties

carefree0910 · May 17, 2023 · 00cbff8 · 00cbff8
1 parent bc55c56
commit 00cbff8
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 47 deletions.
diff --git a/cfdraw/.web/src/plugins/_python/hooks.ts b/cfdraw/.web/src/plugins/_python/hooks.ts
@@ -14,7 +14,7 @@ export function useDefinitionsRequestDataFn(definitions: IDefinitions): () => Di
   return useCallback(() => {
     const data: Dictionary<any> = {};
     Object.keys(definitions).forEach((field) => {
-      data[field] = getMetaField(field);
+      data[field] = getMetaField({ field });
     });
     return data;
   }, [definitions]);

diff --git a/cfdraw/.web/src/plugins/components/Fields/BooleanField.tsx b/cfdraw/.web/src/plugins/components/Fields/BooleanField.tsx
@@ -9,19 +9,19 @@ import { parseIStr } from "@/actions/i18n";
 import CFSwitch from "@/components/CFSwitch";
 import { useDefaultFieldValue } from "./utils";
 
-function BooleanField({ field, definition }: IField<IBooleanField>) {
-  useDefaultFieldValue({ field, definition });
-  const label = parseIStr(definition.label ?? titleCaseWord(field));
+function BooleanField({ definition, ...fieldKeys }: IField<IBooleanField>) {
+  useDefaultFieldValue({ definition, ...fieldKeys });
+  const label = parseIStr(definition.label ?? titleCaseWord(fieldKeys.field));
   const tooltip = parseIStr(definition.tooltip ?? "");
-  const [value, setValue] = useState(getMetaField(field) ?? definition.default);
+  const [value, setValue] = useState(getMetaField(fieldKeys) ?? definition.default);
 
   return (
     <CFSwitch
       label={label}
       value={value}
       setValue={(value) => {
         setValue(value);
-        setMetaField(field, value);
+        setMetaField(fieldKeys, value);
       }}
       tooltip={tooltip}
       {...definition.props}

diff --git a/cfdraw/.web/src/plugins/components/Fields/Field.tsx b/cfdraw/.web/src/plugins/components/Fields/Field.tsx
@@ -4,7 +4,7 @@ import SelectField from "./SelectField";
 import BooleanField from "./BooleanField";
 import { IFieldComponent, injectDefaultFieldProps } from "./utils";
 
-export function Field({ field, definition, gap }: IFieldComponent) {
+export function Field({ gap, definition, ...fieldKeys }: IFieldComponent) {
   let Field: any;
   if (definition.type === "text") {
     Field = TextField;
@@ -16,6 +16,6 @@ export function Field({ field, definition, gap }: IFieldComponent) {
     Field = BooleanField;
   }
   if (!Field) return null;
-  injectDefaultFieldProps({ field, definition, gap });
-  return <Field field={field} definition={definition} />;
+  injectDefaultFieldProps({ gap, definition, ...fieldKeys });
+  return <Field definition={definition} {...fieldKeys} />;
 }
diff --git a/cfdraw/.web/src/plugins/components/Fields/NumberField.tsx b/cfdraw/.web/src/plugins/components/Fields/NumberField.tsx
@@ -12,16 +12,15 @@ import CFSlider from "@/components/CFSlider";
 import TextField from "./TextField";
 import { useDefaultFieldValue } from "./utils";
 
-function NumberField({ field, definition }: IField<INumberField>) {
-  useDefaultFieldValue({ field, definition });
-  const label = parseIStr(definition.label ?? titleCaseWord(field));
-  const [value, setValue] = useState(getMetaField(field) ?? definition.default);
+function NumberField({ definition, ...fieldKeys }: IField<INumberField>) {
+  useDefaultFieldValue({ definition, ...fieldKeys });
+  const label = parseIStr(definition.label ?? titleCaseWord(fieldKeys.field));
+  const [value, setValue] = useState(getMetaField(fieldKeys) ?? definition.default);
 
   if (isUndefined(definition.min) || isUndefined(definition.max)) {
     const tooltip = parseIStr(definition.tooltip ?? label);
     return (
       <TextField
-        field={field}
         definition={{
           type: "text",
           default: definition.default.toString(),
@@ -34,6 +33,7 @@ function NumberField({ field, definition }: IField<INumberField>) {
             isInt: definition.isInt,
           },
         }}
+        {...fieldKeys}
       />
     );
   }
@@ -50,7 +50,7 @@ function NumberField({ field, definition }: IField<INumberField>) {
       value={value}
       onSliderChange={(value) => {
         setValue(value);
-        setMetaField(field, value);
+        setMetaField(fieldKeys, value);
       }}
       scale={definition.scale}
       label={label}

diff --git a/cfdraw/.web/src/plugins/components/Fields/SelectField.tsx b/cfdraw/.web/src/plugins/components/Fields/SelectField.tsx
@@ -16,12 +16,12 @@ import { CFLabel } from "@/components/CFText";
 import { CFSrollableSelect } from "@/components/CFSelect";
 import { useDefaultFieldValue } from "./utils";
 
-function SelectField({ field, definition }: IField<ISelectField<string>>) {
-  useDefaultFieldValue({ field, definition });
+function SelectField({ definition, ...fieldKeys }: IField<ISelectField<string>>) {
+  useDefaultFieldValue({ definition, ...fieldKeys });
   const userId = userStore.userId;
-  const label = parseIStr(definition.label ?? titleCaseWord(field));
+  const label = parseIStr(definition.label ?? titleCaseWord(fieldKeys.field));
   const tooltip = parseIStr(definition.tooltip ?? "");
-  const [value, setValue] = useState(getMetaField(field) ?? definition.default);
+  const [value, setValue] = useState(getMetaField(fieldKeys) ?? definition.default);
   const [options, setOptions] = useState(definition.values as string[]);
   const onClick = useCallback(() => {
     if (definition.localProperties) {
@@ -63,7 +63,7 @@ function SelectField({ field, definition }: IField<ISelectField<string>>) {
         options={options}
         onOptionClick={(value) => {
           setValue(value);
-          setMetaField(field, value);
+          setMetaField(fieldKeys, value);
         }}
         onClick={onClick}
       />

diff --git a/cfdraw/.web/src/plugins/components/Fields/TextField.tsx b/cfdraw/.web/src/plugins/components/Fields/TextField.tsx
@@ -12,12 +12,12 @@ import CFInput from "@/components/CFInput";
 import CFTextarea from "@/components/CFTextarea";
 import { useDefaultFieldValue } from "./utils";
 
-function TextField({ field, definition }: IField<ITextField>) {
-  useDefaultFieldValue({ field, definition });
-  const label = parseIStr(definition.label ?? titleCaseWord(field));
+function TextField({ definition, ...fieldKeys }: IField<ITextField>) {
+  useDefaultFieldValue({ definition, ...fieldKeys });
+  const label = parseIStr(definition.label ?? titleCaseWord(fieldKeys.field));
   const tooltip = parseIStr(definition.tooltip ?? "");
   const defaultText = parseIStr(definition.default ?? "");
-  const [value, setValue] = useState(getMetaField(field) ?? defaultText);
+  const [value, setValue] = useState(getMetaField(fieldKeys) ?? defaultText);
   const isNumber = useMemo(() => !!definition.numberOptions, [definition.numberOptions]);
   const Input = definition.numRows && definition.numRows > 1 ? CFTextarea : CFInput;
 
@@ -26,10 +26,10 @@ function TextField({ field, definition }: IField<ITextField>) {
       const v = event.target.value;
       setValue(v);
       if (!isNumber) {
-        setMetaField(field, v);
+        setMetaField(fieldKeys, v);
       }
     },
-    [isNumber, field, setValue],
+    [isNumber, fieldKeys, setValue],
   );
   const onBlur = useCallback(() => {
     if (definition.numberOptions) {
@@ -46,9 +46,9 @@ function TextField({ field, definition }: IField<ITextField>) {
         number = Math.round(number);
       }
       setValue(number.toString());
-      setMetaField(field, number);
+      setMetaField(fieldKeys, number);
     }
-  }, [field, value, setValue, definition.numberOptions]);
+  }, [fieldKeys, value, setValue, definition.numberOptions]);
 
   return (
     <Input

diff --git a/cfdraw/.web/src/plugins/components/Fields/utils.ts b/cfdraw/.web/src/plugins/components/Fields/utils.ts
@@ -2,30 +2,31 @@ import { useEffect } from "react";
 
 import { isUndefined } from "@carefree0910/core";
 
-import type { IField } from "@/schema/plugins";
+import type { IField, IListProperties } from "@/schema/plugins";
 import type { IFieldDefinition } from "@/schema/fields";
 import { getMetaField, setMetaField } from "@/stores/meta";
 import { parseIStr } from "@/actions/i18n";
 
-export function useDefaultFieldValue({ field, definition }: IField<IFieldDefinition>) {
+export function useDefaultFieldValue({ definition, ...fieldKeys }: IField<IFieldDefinition>) {
   useEffect(() => {
-    if (isUndefined(getMetaField(field))) {
+    if (isUndefined(getMetaField(fieldKeys))) {
       setMetaField(
-        field,
+        fieldKeys,
         definition.type === "text" || definition.type === "image" || definition.type === "color"
           ? parseIStr(definition.default)
           : definition.default,
       );
     }
-  }, [field, definition]);
+  }, [fieldKeys]);
 }
 
 export interface IFieldComponent {
-  field: string;
-  definition: IFieldDefinition;
   gap: number;
+  definition: IFieldDefinition;
+  field: string;
+  listProperties?: IListProperties;
 }
-export function getFieldH({ field, definition, gap }: IFieldComponent): number {
+export function getFieldH({ gap, definition, field }: IFieldComponent): number {
   const defaultH = 42;
 
   // calculate height, in order to place the field in the shortest column (if needed)
@@ -43,9 +44,9 @@ export function getFieldH({ field, definition, gap }: IFieldComponent): number {
   return fieldH;
 }
 
-export function injectDefaultFieldProps({ field, definition, gap }: IFieldComponent): void {
+export function injectDefaultFieldProps({ gap, definition, field }: IFieldComponent): void {
   const props = definition.props ?? {};
   if (isUndefined(props.w)) props.w = "100%";
-  if (isUndefined(props.h)) props.h = `${getFieldH({ field, definition, gap })}px`;
+  if (isUndefined(props.h)) props.h = `${getFieldH({ gap, definition, field })}px`;
   definition.props = props;
 }
diff --git a/cfdraw/.web/src/schema/plugins.ts b/cfdraw/.web/src/schema/plugins.ts
@@ -72,9 +72,14 @@ export interface ILogoPlugin extends IPlugin {
 
 // specific
 
+export interface IListProperties {
+  listKey: string;
+  listIndex: number;
+}
 export interface IField<T extends IFieldDefinition> {
   field: string;
   definition: T;
+  listProperties?: IListProperties;
 }
 
 // factory

diff --git a/cfdraw/.web/src/stores/meta.ts b/cfdraw/.web/src/stores/meta.ts
@@ -1,8 +1,10 @@
-import { makeObservable, observable } from "mobx";
+import { makeObservable, observable, runInAction } from "mobx";
 
+import { Logger } from "@carefree0910/core";
 import { ABCStore } from "@carefree0910/business";
 
 import type { ICommonMetaData, IMeta } from "@/schema/meta";
+import type { IListProperties } from "@/schema/plugins";
 
 class MetaStore extends ABCStore<IMeta["data"]> {
   data: IMeta["data"] = {};
@@ -22,13 +24,42 @@ class MetaStore extends ABCStore<IMeta["data"]> {
 const metaStore = new MetaStore();
 type IMetaKey = keyof ICommonMetaData;
 type IGeneralKey = string;
-export function getMetaField<T extends IMetaKey>(field: T): ICommonMetaData[T];
-export function getMetaField<T extends IGeneralKey>(field: T): any;
-export function getMetaField<T extends IMetaKey | IGeneralKey>(field: T): any {
-  return metaStore.data[field];
+interface IGetMetaField<T extends IMetaKey | IGeneralKey> {
+  field: T;
+  listProperties?: IListProperties;
 }
-export function setMetaField<T extends IMetaKey>(field: T, value: ICommonMetaData[T]): void;
-export function setMetaField<T extends IGeneralKey>(field: T, value: any): void;
-export function setMetaField<T extends IMetaKey | IGeneralKey>(field: T, value: any): void {
-  metaStore.updateProperty(field, value);
+export function getMetaField<T extends IMetaKey>(fieldKeys: IGetMetaField<T>): ICommonMetaData[T];
+export function getMetaField<T extends IGeneralKey>(fieldKeys: IGetMetaField<T>): any;
+export function getMetaField<T extends IMetaKey | IGeneralKey>({
+  field,
+  listProperties,
+}: IGetMetaField<T>): any {
+  if (!listProperties) return metaStore.data[field];
+  const list = metaStore.data[listProperties.listKey] as any[];
+  if (list.length <= listProperties.listIndex) return undefined;
+  return list[listProperties.listIndex][field];
+}
+interface ISetMetaField<T extends IMetaKey | IGeneralKey> {
+  field: T;
+  listProperties?: IListProperties;
+}
+export function setMetaField<T extends IMetaKey>(
+  fieldKeys: ISetMetaField<T>,
+  value: ICommonMetaData[T],
+): void;
+export function setMetaField<T extends IGeneralKey>(fieldKeys: ISetMetaField<T>, value: any): void;
+export function setMetaField<T extends IMetaKey | IGeneralKey>(
+  { field, listProperties }: ISetMetaField<T>,
+  value: any,
+): void {
+  if (!listProperties) {
+    metaStore.updateProperty(field, value);
+  } else {
+    const list = metaStore.data[listProperties.listKey] as any[];
+    if (list.length <= listProperties.listIndex) {
+      Logger.warn(`list index ${listProperties.listIndex} out of range`);
+    } else {
+      runInAction(() => (list[listProperties.listIndex][field] = value));
+    }
+  }
 }