@pisell/materials 1.0.1 → 1.0.3

package/lowcode/_utils/transform-meta.ts

@@ -0,0 +1,343 @@
+import {
+  FieldConfig,
+  PropConfig,
+  PropType,
+  SetterType,
+  OneOf,
+  ObjectOf,
+  ArrayOf,
+  TransformedComponentMetadata,
+} from '@ali/lowcode-types';
+
+// http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/merge_requests/1054678
+// 这个MR合并后可以去掉这个文件
+
+function propConfigToFieldConfig(
+  propConfig: PropConfig,
+  supportVariable: boolean,
+): FieldConfig {
+  const { name, description } = propConfig;
+  const title = {
+    label: {
+      type: 'i18n',
+      'en-US': name,
+      'zh-CN': description?.slice(0, 10) || name,
+    },
+    tip: description ? `${name} | ${description}` : undefined,
+  };
+
+  let setter =
+    (propConfig as any).setter ||
+    propTypeToSetter(propConfig.propType, supportVariable);
+
+  if (supportVariable && (propConfig as any).supportVariable !== false) {
+    if (
+      setter.componentName === 'MixedSetter' &&
+      setter.props?.setters &&
+      setter.props?.setters?.every((setter: any) => {
+        return (
+          setter?.componentName !== 'VariableSetter' &&
+          setter !== 'VariableSetter'
+        );
+      })
+    ) {
+      setter.props.setters.push('VariableSetter');
+    } else if (
+      setter &&
+      setter !== 'VariableSetter' &&
+      setter.componentName !== 'VariableSetter'
+    ) {
+      setter = {
+        componentName: 'MixedSetter',
+        props: {
+          setters: [setter, 'VariableSetter'],
+        },
+      };
+    }
+  }
+
+  return {
+    title,
+    ...propConfig,
+    // TODO 这边直接用propConfig，将setter丢在propconfig里，需要确认是否在PropConfig扩展还是换实现
+    setter,
+  };
+}
+
+function propTypeToSetter(
+  propType: PropType,
+  supportVariable: boolean,
+): SetterType {
+  let typeName: string;
+  let isRequired: boolean | undefined = false;
+  if (typeof propType === 'string') {
+    typeName = propType;
+  } else if (typeof propType === 'object') {
+    typeName = propType.type;
+    isRequired = propType.isRequired;
+  } else {
+    typeName = 'string';
+  }
+  // TODO: use mixinSetter wrapper
+  switch (typeName) {
+    case 'string':
+      return {
+        componentName: 'StringSetter',
+        isRequired,
+        initialValue: '',
+      };
+    case 'number':
+      return {
+        componentName: 'NumberSetter',
+        isRequired,
+        initialValue: 0,
+      };
+    case 'bool':
+      return {
+        componentName: 'BoolSetter',
+        isRequired,
+        initialValue: false,
+      };
+    case 'oneOf':
+      const dataSource = ((propType as OneOf).value || []).map(
+        (value, index) => {
+          const t = typeof value;
+          return {
+            label:
+              t === 'string' || t === 'number' || t === 'boolean'
+                ? String(value)
+                : `value ${index}`,
+            value,
+          };
+        },
+      );
+      const componentName =
+        dataSource.length >= 4 ? 'SelectSetter' : 'RadioGroupSetter';
+      return {
+        componentName,
+        props: { dataSource, options: dataSource },
+        isRequired,
+        initialValue: dataSource[0] ? dataSource[0].value : null,
+      };
+
+    case 'element':
+    case 'node': // TODO: use Mixin
+      return {
+        // slotSetter
+        componentName: 'SlotSetter',
+        props: {
+          mode: typeName,
+        },
+        isRequired,
+        initialValue: {
+          type: 'JSSlot',
+          value: [],
+        },
+      };
+    case 'shape':
+    case 'exact':
+      const items = ((propType as any).value || []).map((item: any) =>
+        propConfigToFieldConfig(item, supportVariable),
+      );
+      return {
+        componentName: 'ObjectSetter',
+        props: {
+          config: {
+            items,
+            extraSetter:
+              typeName === 'shape'
+                ? propTypeToSetter('any', supportVariable)
+                : null,
+          },
+        },
+        isRequired,
+        initialValue: (field: any) => {
+          const data: any = {};
+          items.forEach((item: any) => {
+            let initial = item.defaultValue;
+            if (
+              initial == null &&
+              item.setter &&
+              typeof item.setter === 'object'
+            ) {
+              initial = (item.setter as any).initialValue;
+            }
+            data[item.name] = initial
+              ? typeof initial === 'function'
+                ? initial(field)
+                : initial
+              : null;
+          });
+          return data;
+        },
+      };
+    case 'object':
+    case 'objectOf':
+      return {
+        componentName: 'ObjectSetter',
+        props: {
+          config: {
+            extraSetter: propTypeToSetter(
+              typeName === 'objectOf' ? (propType as ObjectOf).value : 'any',
+              supportVariable,
+            ),
+          },
+        },
+        isRequired,
+        initialValue: {},
+      };
+    case 'array':
+    case 'arrayOf':
+      return {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: propTypeToSetter(
+            typeName === 'arrayOf' ? (propType as ArrayOf).value : 'any',
+            supportVariable,
+          ),
+        },
+        isRequired,
+        initialValue: [],
+      };
+    case 'func':
+      return {
+        componentName: 'FunctionSetter',
+        isRequired,
+      };
+    case 'color':
+      return {
+        componentName: 'ColorSetter',
+        isRequired,
+      };
+    case 'oneOfType':
+      return {
+        componentName: 'MixedSetter',
+        props: {
+          // TODO:
+          setters: (propType as any).value.map((item: any) =>
+            propTypeToSetter(item, supportVariable),
+          ),
+        },
+        isRequired,
+      };
+    default:
+    // do nothing
+  }
+  return {
+    componentName: 'MixedSetter',
+    isRequired,
+    props: {},
+  };
+}
+
+const NO_EVENTS = ['beforeUpload'];
+const EVENT_RE = /^on|after|before[A-Z][\w]*$/;
+
+export default function(
+  metadata: TransformedComponentMetadata,
+  supportVariable: boolean,
+): TransformedComponentMetadata {
+  const { configure = {} } = metadata;
+  // TODO types后续补充
+  let extendsProps: any = null;
+  if (configure.props) {
+    if (Array.isArray(configure.props)) {
+      return metadata;
+    }
+    const { isExtends, override = [] } = configure.props;
+    // 不开启继承时，直接返回configure配置
+    if (!isExtends) {
+      return {
+        ...metadata,
+        configure: {
+          ...configure,
+          props: [...override],
+        },
+      };
+    }
+
+    extendsProps = {};
+    // 开启继承后，缓存重写内容的配置
+    override.forEach((prop: any) => {
+      extendsProps[prop.name] = prop;
+    });
+  }
+
+  if (!metadata.props) {
+    return {
+      ...metadata,
+      configure: {
+        ...configure,
+        props: [],
+      },
+    };
+  }
+  const { component = {}, supports = {} } = configure;
+  const supportedEvents: any[] | null = (supports as any).events ? null : [];
+  const props: FieldConfig[] = [];
+
+  metadata.props.forEach(prop => {
+    const { name, propType, description } = prop;
+    if (
+      name === 'children' &&
+      (component.isContainer ||
+        propType === 'node' ||
+        propType === 'element' ||
+        propType === 'any')
+    ) {
+      if (component.isContainer !== false) {
+        component.isContainer = true;
+        props.push(propConfigToFieldConfig(prop, supportVariable));
+        return;
+      }
+    }
+
+    if (
+      EVENT_RE.test(name) &&
+      NO_EVENTS.indexOf(name) < 0 &&
+      (propType === 'func' || propType === 'any')
+    ) {
+      if (supportedEvents) {
+        supportedEvents.push({
+          name,
+          description,
+        });
+        (supports as any).events = supportedEvents;
+      }
+      return;
+    }
+
+    if (name === 'className' && (propType === 'string' || propType === 'any')) {
+      if ((supports as any).className == null) {
+        (supports as any).className = true;
+      }
+      return;
+    }
+
+    if (name === 'style' && (propType === 'object' || propType === 'any')) {
+      if ((supports as any).style == null) {
+        (supports as any).style = true;
+      }
+      return;
+    }
+
+    // 存在覆盖配置时
+    if (extendsProps) {
+      if (name in extendsProps) {
+        prop = extendsProps[name];
+      }
+    }
+
+    props.push(propConfigToFieldConfig(prop, supportVariable));
+  });
+
+  return {
+    ...metadata,
+    configure: {
+      ...configure,
+      props,
+      supports,
+      component,
+    },
+  } as any;
+}

package/lowcode/_utils/utils.ts

@@ -0,0 +1,6 @@
+export { get, set, has } from 'lodash';
+
+// simple uuid
+export function uuid() {
+  return ((Math.random() * 1e6) >> 0).toString(36);
+}

package/lowcode/affix/meta.ts

@@ -0,0 +1,68 @@
+import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
+import snippets from "./snippets";
+
+const AffixMeta: ComponentMetadata = {
+  componentName: "Affix",
+  title: "固钉",
+  category: "导航",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Affix",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: "offsetBottom",
+        title: {
+          label: "底部触发距离",
+          tip: "距离窗口底部达到指定偏移量后触发",
+        },
+        propType: "number",
+      },
+      {
+        name: "offsetTop",
+        title: {
+          label: "顶部触发距离",
+          tip: "距离窗口顶部达到指定偏移量后触发",
+        },
+        propType: "number",
+      },
+      {
+        name: "target",
+        title: {
+          label: "获取触发元素",
+          tip: "设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数",
+        },
+        propType: "func",
+      },
+      {
+        name: "onChange",
+        title: { label: "监听状态改变", tip: "固定状态改变时触发的回调函数" },
+        propType: "func",
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onChange",
+          template:
+            "onChange(affixed,${extParams}){\n// 固定状态变更回调函数\nconsole.log('onChange', affixed);}",
+        },
+      ],
+    },
+    component: {},
+  },
+};
+
+export default {
+  ...AffixMeta,
+  snippets,
+};

package/lowcode/affix/snippets.ts

@@ -0,0 +1,20 @@
+export default [
+  {
+    title: '固钉',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/affix-1.jpg',
+    schema: {
+      componentName: 'Affix',
+      props: {
+        offsetTop: 100,
+      },
+      children: [
+        {
+          componentName: 'Button',
+          props: {
+            children: 'Affix Top',
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/alert/meta.ts

@@ -0,0 +1,102 @@
+import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
+import snippets from "./snippets";
+
+const AlertMeta: ComponentMetadata = {
+  componentName: "Alert",
+  title: "警告提示",
+  category: "反馈",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Alert",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  configure: {
+    props: [
+      {
+        name: "afterClose",
+        title: {
+          label: "关闭动画结束后触发的回调函数",
+          tip: "关闭动画结束后触发的回调函数",
+        },
+        propType: "func",
+      },
+      {
+        name: "banner",
+        title: { label: "顶部公告", tip: "是否用作顶部公告" },
+        propType: "bool",
+        defaultValue: false,
+      },
+      {
+        name: "closable",
+        title: { label: "可关闭", tip: "默认不显示关闭按钮" },
+        propType: "bool",
+      },
+      {
+        name: "closeText",
+        title: { label: "自定义关闭按钮", tip: "自定义关闭按钮" },
+        propType: { type: "oneOfType", value: ["string", "node"] },
+      },
+      {
+        name: "description",
+        title: {
+          label: "描述信息",
+          tip: "警告提示的辅助性文字介绍",
+        },
+        propType: { type: "oneOfType", value: ["string", "node"] },
+      },
+      {
+        name: "icon",
+        title: {
+          label: "图标",
+          tip: "自定义图标，`showIcon` 为 true 时有效",
+        },
+        propType: "node",
+      },
+      {
+        name: "message",
+        title: { label: "警告提示内容", tip: "警告提示内容" },
+        propType: { type: "oneOfType", value: ["string", "node"] },
+      },
+      {
+        name: "showIcon",
+        title: { label: "显示图标", tip: "是否显示辅助图标" },
+        propType: "bool",
+      },
+      {
+        name: "type",
+        title: { label: "类型", tip: "类型" },
+        propType: {
+          type: "oneOf",
+          value: ["success", "info", "warning", "error"],
+        },
+      },
+      {
+        name: "onClose",
+        title: { label: "关闭时触发的回调函数", tip: "关闭时触发的回调函数" },
+        propType: "func",
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onClose",
+          template:
+            "onChange(event,${extParams}){\n// 关闭时触发的回调函数\nconsole.log('onChange');}",
+        },
+      ],
+    },
+    component: {},
+  },
+};
+
+export default {
+  ...AlertMeta,
+  snippets,
+};

package/lowcode/alert/snippets.ts

@@ -0,0 +1,54 @@
+export default [
+  {
+    title: '成功提示',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/alert-1.png',
+    schema: {
+      componentName: 'Alert',
+      props: {
+        message: 'Success Tips',
+        description: 'Detailed description and advice about successful copywriting.',
+        type: 'success',
+        showIcon: true,
+      },
+    },
+  },
+  {
+    title: '信息提示',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/alert-2.png',
+    schema: {
+      componentName: 'Alert',
+      props: {
+        message: 'Informational Notes',
+        description: 'Additional description and information about copywriting.',
+        type: 'info',
+        showIcon: true,
+      },
+    },
+  },
+  {
+    title: '警告提示',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/alert-3.png',
+    schema: {
+      componentName: 'Alert',
+      props: {
+        message: 'Warning',
+        description: 'This is a warning notice about copywriting.',
+        type: 'warning',
+        showIcon: true,
+      },
+    },
+  },
+  {
+    title: '错误提示',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/alert-4.png',
+    schema: {
+      componentName: 'Alert',
+      props: {
+        message: 'Error',
+        description: 'This is an error message about copywriting.',
+        type: 'error',
+        showIcon: true,
+      },
+    },
+  },
+];

package/lowcode/anchor/snippets.ts

@@ -0,0 +1,30 @@
+export default [
+  {
+    title: '锚点',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/anchor-1.png',
+    schema: {
+      componentName: 'Anchor',
+      props: {},
+      children: [
+        {
+          componentName: 'Anchor.Link',
+          props: {
+            title: 'Document',
+          },
+        },
+        {
+          componentName: 'Anchor.Link',
+          props: {
+            title: 'API',
+          },
+        },
+        {
+          componentName: 'Anchor.Link',
+          props: {
+            title: 'Demo',
+          },
+        },
+      ],
+    },
+  },
+];

package/lowcode/anchor.link/meta.ts

@@ -0,0 +1,29 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Anchor.Link',
+  title: '锚点链接',
+  category: '其他',
+  props: [
+    {
+      name: 'href',
+      title: { label: '锚点链接', tip: '锚点链接' },
+      propType: 'string',
+    },
+    {
+      name: 'target',
+      title: {
+        label: 'target',
+        tip: '该属性指定在何处显示链接的资源',
+      },
+      propType: 'string',
+    },
+    {
+      name: 'title',
+      title: { label: '内容', tip: '内容' },
+      propType: 'string',
+    },
+  ],
+  configure: { supports: { style: true } },
+};

package/lowcode/anchor.link/snippets.ts

@@ -0,0 +1 @@
+export default [];