fix: add deprecated and data group to ComponentPropType (#116)

* fix: add deprecated and data group to ComponentPropType

* fix: render choiceSetter with icon

Author: wwsun

apps/playground/src/pages/index.tsx

@@ -46,7 +46,7 @@ const sandboxQuery = new DndQuery({
 
 // 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
 createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
 });
 
 /**

apps/storybook/src/setting-form.stories.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 import { FormModel, SettingForm, register } from '@music163/tango-setting-form';
 import { ComponentPrototypeType } from '@music163/tango-helpers';
-import { BorderSetter } from '@music163/tango-designer/src/setters/style-setter';
+import { BorderSetter, DisplaySetter } from '@music163/tango-designer/src/setters/style-setter';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Card } from 'antd';
+import { createFromIconfontCN } from '@ant-design/icons';
 
+// 这里按需注入，因为部分 setter 依赖 Designer 的上下文
 register({
   name: 'borderSetter',
   component: BorderSetter,
 });
 
+register({
+  name: 'displaySetter',
+  component: DisplaySetter,
+});
+
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+});
+
 export default {
   title: 'SettingForm',
 };
@@ -31,6 +42,14 @@ const prototype: ComponentPrototypeType = {
       name: 'text',
       title: 'textSetter',
       setter: 'textSetter',
+      tip: '这是一个文本属性',
+      docs: 'https://music-one.fn.netease.com/docs/button',
+      deprecated: '使用 text2 替代',
+    },
+    {
+      name: 'display',
+      title: 'displaySetter',
+      setter: 'displaySetter',
     },
     {
       name: 'border',

packages/designer/src/setters/choice-setter.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Radio, RadioProps, Tooltip } from 'antd';
 import type { OptionType } from '@music163/tango-helpers';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
+import { IconFont } from '@music163/tango-ui';
 
 interface ChoiceSetterProps {
-  mode?: 'text' | 'icon';
   options?: OptionType[];
 }
 
@@ -13,6 +13,18 @@ export function ChoiceSetter({
   onChange,
   ...props
 }: FormItemComponentProps<string> & ChoiceSetterProps) {
+  const renderIcon = useCallback((icon: string) => {
+    if (!icon) {
+      return null;
+    }
+
+    if (icon.startsWith('icon-')) {
+      return <IconFont type={icon} />;
+    }
+
+    return null;
+  }, []);
+
   return (
     <Radio.Group
       optionType="button"
@@ -24,6 +36,7 @@ export function ChoiceSetter({
     >
       {options.map((item) => (
         <RadioButton tip={item.tip} key={item.value} value={item.value}>
+          {renderIcon(item.icon)}
           {item.label}
         </RadioButton>
       ))}

packages/helpers/src/types/prototype.ts

@@ -24,10 +24,11 @@ export type ComponentPropType<T = any> = {
    * 属性的分组
    * - basic 常用属性
    * - event 事件属性
+   * - data  数据属性
    * - style 样式属性
    * - advanced 高级属性
    */
-  group?: 'basic' | 'event' | 'style' | 'advanced';
+  group?: 'basic' | 'event' | 'style' | 'data' | 'advanced';
   /**
    * 帮助文档链接地址
    * @example https://foo.bar/help
@@ -91,6 +92,10 @@ export type ComponentPropType<T = any> = {
    * 动态设置表单项是否展示
    */
   getVisible?: (form: any) => boolean;
+  /**
+   * 标记属性是否已废弃
+   */
+  deprecated?: boolean | string;
 };
 
 /**

packages/setting-form/src/form-item.tsx

@@ -86,6 +86,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     disableVariableSetter: disableVariableSetterProp = options.disableVariableSetter,
     getVisible: getVisibleProp,
     getSetterProps: getSetterPropsProp,
+    deprecated,
     extra,
     footer,
     noStyle,
@@ -160,6 +161,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
         note={showItemSubtitle ? name : null}
         tip={tip}
         docs={docs}
+        deprecated={deprecated}
         error={field.error}
         extra={
           <Box>

packages/setting-form/src/form-ui.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { css, Box, HTMLCoralProps, Text } from 'coral-system';
+import { css, Box, HTMLCoralProps, Link } from 'coral-system';
 import { Checkbox, Tooltip } from 'antd';
 import { CollapsePanel } from '@music163/tango-ui';
 import { isNil, isString } from '@music163/tango-helpers';
+import { WarningOutlined } from '@ant-design/icons';
 
 export interface FormControlProps extends Omit<FormLabelProps, 'type'> {
   visible: boolean;
@@ -19,6 +20,7 @@ export function FormControl({
   tip,
   docs,
   extra,
+  deprecated,
   footer,
   error,
   children,
@@ -27,7 +29,7 @@ export function FormControl({
   return (
     <Box className="FormControl" display={visible ? 'block' : 'none'} {...rest}>
       <Box display="flex" justifyContent="space-between" alignItems="center" mb="s">
-        <FormLabel label={label} note={note} tip={tip} docs={docs} />
+        <FormLabel label={label} note={note} tip={tip} docs={docs} deprecated={deprecated} />
         {extra}
       </Box>
       <Box>{children}</Box>
@@ -138,12 +140,12 @@ const labelStyle = css`
 `;
 
 const tipStyle = css`
-  a:link {
-    color: #fff;
+  a {
+    text-decoration: underline;
   }
 
-  a:hover {
-    color: var(--tango-colors-brand);
+  a:link {
+    color: #fff;
   }
 `;
 
@@ -169,19 +171,45 @@ interface FormLabelProps extends HTMLCoralProps<'div'> {
    * 文档地址
    */
   docs?: string;
+  /**
+   * 是否显示废弃标记
+   */
+  // eslint-disable-next-line react/no-unused-prop-types
+  deprecated?: boolean | string;
 }
 
-function FormLabel({ type = 'normal', label, note, tip, docs, ...rest }: FormLabelProps) {
-  const help = docs ? (
-    <Box css={tipStyle}>
-      <Text mr="m">{tip}</Text>
-      <a href={docs} target="_blank" rel="noreferrer">
-        帮助文档
-      </a>
-    </Box>
-  ) : (
-    tip
-  );
+function FormLabel({
+  type = 'normal',
+  label,
+  note,
+  tip,
+  docs,
+  deprecated,
+  ...rest
+}: FormLabelProps) {
+  let help: React.ReactNode;
+  if (deprecated || docs) {
+    help = (
+      <Box>
+        <Box css={tipStyle}>
+          {tip}
+          {docs ? (
+            <Link href={docs} isExternal ml="m">
+              查看属性文档
+            </Link>
+          ) : null}
+        </Box>
+        {deprecated ? (
+          <Box color="#faad14">
+            <WarningOutlined /> 废弃提示：
+            {isString(deprecated) ? deprecated : '该属性已废弃，请谨慎使用。'}
+          </Box>
+        ) : null}
+      </Box>
+    );
+  } else {
+    help = tip;
+  }
 
   const labelColor = {
     normal: 'text.body',
@@ -197,6 +225,7 @@ function FormLabel({ type = 'normal', label, note, tip, docs, ...rest }: FormLab
       css={labelStyle}
       title={isString(label) ? label : undefined}
     >
+      {deprecated ? <WarningOutlined style={{ color: '#faad14', marginRight: 4 }} /> : null}
       {label}
     </Box>
   );