feat(classname-setter): 优化类名设置组件功能和代码结构

zboMa · zboMa · commit da394834e47a · 2024-10-26T22:55:34.000+08:00
- 添加 IOption 接口，用于定义数据源项的结构
- 优化 getClassNameList 方法，使用解构赋值和类型注解
- 重构 handleChange 方法，添加类型注解和可选链操作
- 优化组件初始化逻辑，使用 map 和类型注解
- 为 Select 组件的 onChange 事件处理函数添加类型转换
diff --git a/src/setter/classname-setter/index.tsx b/src/setter/classname-setter/index.tsx
@@ -9,6 +9,11 @@ export interface PluginProps {
   onChange: any;
 }
 
+interface IOption {
+  label: string;
+  value: string;
+}
+
 export default class ClassNameView extends PureComponent<PluginProps> {
   static display = 'ClassName';
 
@@ -22,10 +27,15 @@ export default class ClassNameView extends PureComponent<PluginProps> {
     value: '',
   };
 
+  state = {
+    dataSource: [],
+    selectValue: [],
+  };
+
   getClassNameList = () => {
     const schema = project.exportSchema();
-    const css = schema.componentsTree[0].css;
-    const classNameList = [];
+    const { css } = schema.componentsTree[0];
+    const classNameList: string[] = [];
     if (css) {
       const re = /\.?\w+[^{]+\{[^}]*\}/g;
       const list = css.match(re);
@@ -47,9 +57,9 @@ export default class ClassNameView extends PureComponent<PluginProps> {
     return classNameList;
   };
 
-  handleChange = (value) => {
+  handleChange = (value?: string[]) => {
     const { onChange } = this.props;
-    onChange(value.join(' '));
+    onChange(value?.join(' '));
     this.setState({
       selectValue: value,
     });
@@ -59,7 +69,7 @@ export default class ClassNameView extends PureComponent<PluginProps> {
   componentWillMount() {
     const { value } = this.props;
     const classnameList = this.getClassNameList();
-    const dataSource = [];
+    const dataSource: IOption[] = [];
     classnameList.map((item) => {
       dataSource.push({
         value: item,
@@ -69,7 +79,7 @@ export default class ClassNameView extends PureComponent<PluginProps> {
       return item;
     });
 
-    let selectValue = [];
+    let selectValue: string[] = [];
     if (value && value !== '') {
       selectValue = value.split(' ');
     }
@@ -98,7 +108,7 @@ export default class ClassNameView extends PureComponent<PluginProps> {
         aria-label="tag mode"
         mode="tag"
         dataSource={dataSource}
-        onChange={this.handleChange}
+        onChange={(value) => this.handleChange(value as string[])}
         value={selectValue}
       />
     );
