@pisell/materials 1.0.1 → 1.0.2

package/lowcode/menu/utils.ts

@@ -0,0 +1,97 @@
+import { uuid } from '../_utils/utils';
+
+export const itemsExtraProps = {
+  getValue(target, fieldValue) {
+    const map = target.node.children.map((child) => {
+      const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;
+      const result = {
+        key,
+        category: child.componentName,
+      };
+      ['children', 'items', 'title'].forEach((propKey) => {
+        if (child.getPropValue(propKey)) {
+          result[propKey] = child.getPropValue(propKey);
+        }
+      });
+      return result;
+    });
+    return map.length === 0 ? fieldValue : map;
+  },
+  setValue(target, value) {
+    const { node } = target;
+    const map = {};
+
+    if (!Array.isArray(value)) {
+      value = [];
+    }
+    value.forEach((item) => {
+      const tabItem = Object.assign({}, item);
+      map[item.key] = tabItem;
+    });
+    node.children.mergeChildren(
+      (child) => {
+        const key = String(child.getPropValue('key'));
+
+        if (
+          Object.hasOwnProperty.call(map, key) &&
+          child.componentName.includes(map[key].category)
+        ) {
+          if (map[key].category === 'Menu.Item') {
+            child.setPropValue('children', map[key].children);
+          } else {
+            child.setPropValue('title', map[key].title || map[key].children);
+          }
+          delete map[key];
+          return false;
+        }
+        return true;
+      },
+      () => {
+        const items = [];
+        for (const key in map) {
+          const itemProps = map[key];
+
+          if (Object.hasOwnProperty.call(map, key)) {
+            if (itemProps.category === 'Menu.Item') {
+              items.push({
+                componentName: 'Menu.Item',
+                props: {
+                  key: itemProps.key,
+                  children: itemProps.children,
+                },
+              });
+            } else {
+              items.push({
+                componentName: 'Menu.SubMenu',
+                props: {
+                  key: itemProps.key,
+                  title: itemProps.title || itemProps.children,
+                  items:
+                    itemProps.items && itemProps.items.length === 0
+                      ? itemProps.items
+                      : [
+                          {
+                            key: `item-${uuid()}`,
+                            category: 'Menu.Item',
+                            children: '子菜单名',
+                          },
+                        ],
+                },
+              });
+            }
+          }
+        }
+        return items;
+      },
+      (child1, child2) => {
+        const a = value.findIndex(
+          (item) => String(item.key) === String(child1.getPropValue('key')),
+        );
+        const b = value.findIndex(
+          (item) => String(item.key) === String(child2.getPropValue('key')),
+        );
+        return a - b;
+      },
+    );
+  },
+};

package/lowcode/menu.item/meta.ts

@@ -0,0 +1,63 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Menu.Item',
+  title: '菜单项',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Menu",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "Item",
+  },
+  props: [
+    {
+      name: 'children',
+      title: { label: '内容', tip: '内容' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'danger',
+      title: { label: '错误状态', tip: '展示错误状态样式' },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'icon',
+      title: { label: '菜单图标', tip: '菜单图标' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      defaultValue: false,
+    },
+    {
+      name: 'key',
+      title: { label: '唯一标志', tip: 'item 的唯一标志' },
+      propType: 'string',
+    },
+    {
+      name: 'title',
+      title: {
+        label: '悬浮标题',
+        tip: '设置收缩时展示的悬浮标题',
+      },
+      propType: 'string',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      nestingRule: { parentWhitelist: ['Menu'] },
+    },
+    supports: { style: true },
+  },
+};

package/lowcode/menu.item/snippets.ts

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

package/lowcode/menu.item-group/meta.ts

@@ -0,0 +1,110 @@
+import { uuid } from '../_utils/utils';
+import { itemsExtraProps } from '../menu/utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Menu.ItemGroup',
+  title: '菜单组',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Menu",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "ItemGroup",
+  },
+  props: [
+    {
+      name: 'items',
+      title: '菜单组项',
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'key',
+                    title: 'key',
+                    setter: 'StringSetter',
+                    initialValue: (val) => val || uuid(),
+                  },
+                  {
+                    name: 'children',
+                    tite: '菜单名',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'category',
+                    title: {
+                      label: '类型',
+                      tip: '菜单项类型',
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['Menu.Item', 'Menu.SubMenu', 'Menu.ItemGroup'],
+                    },
+                    setter: [
+                      {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            {
+                              title: 'Item',
+                              value: 'Menu.Item',
+                            },
+                            {
+                              title: 'SubMenu',
+                              value: 'Menu.SubMenu',
+                            },
+                            {
+                              title: 'ItemGroup',
+                              value: 'Menu.ItemGroup',
+                            },
+                          ],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                key: `item-${uuid()}`,
+                category: 'Menu.Item',
+                children: '子菜单名',
+              };
+            },
+          },
+        },
+      },
+      extraProps: itemsExtraProps,
+    },
+    {
+      name: 'children',
+      title: { label: '分组的菜单项', tip: '分组的菜单项' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'title',
+      title: { label: '分组标题', tip: '分组标题' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      nestingRule: { parentWhitelist: ['Menu', 'Menu.SubMenu'] },
+    },
+    supports: { style: true },
+  },
+};

package/lowcode/menu.item-group/snippets.ts

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

package/lowcode/menu.sub-menu/meta.ts

@@ -0,0 +1,131 @@
+import { uuid } from '../_utils/utils';
+import { itemsExtraProps } from '../menu/utils';
+
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Menu.SubMenu',
+  title: '子菜单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Menu",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "SubMenu",
+  },
+  props: [
+    {
+      name: 'items',
+      title: '子菜单项',
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'key',
+                    title: 'key',
+                    setter: 'StringSetter',
+                    initialValue: (val) => val || uuid(),
+                  },
+                  {
+                    name: 'children',
+                    title: '子菜单名',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'category',
+                    title: {
+                      label: '类型',
+                      tip: '菜单项类型',
+                    },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['Menu.Item', 'Menu.SubMenu', 'Menu.ItemGroup'],
+                    },
+                    setter: [
+                      {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            {
+                              title: 'Item',
+                              value: 'Menu.Item',
+                            },
+                            {
+                              title: 'SubMenu',
+                              value: 'Menu.SubMenu',
+                            },
+                            {
+                              title: 'ItemGroup',
+                              value: 'Menu.ItemGroup',
+                            },
+                          ],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                key: `item-${uuid()}`,
+                category: 'Menu.Item',
+                children: '子菜单名',
+              };
+            },
+          },
+        },
+      },
+      extraProps: itemsExtraProps,
+    },
+    {
+      name: 'danger',
+      title: { label: '错误状态', tip: '展示错误状态样式' },
+      propType: 'bool',
+      defaultValue: true,
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+    },
+    {
+      name: 'icon',
+      title: { label: '菜单图标', tip: '菜单图标' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      defaultValue: false,
+    },
+    {
+      name: 'key',
+      title: { label: '唯一标志', tip: 'item 的唯一标志' },
+      propType: 'string',
+    },
+    {
+      name: 'title',
+      title: {
+        label: '悬浮标题',
+        tip: '设置收缩时展示的悬浮标题',
+      },
+      propType: 'string',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      nestingRule: { parentWhitelist: ['Menu'] },
+    },
+    supports: { style: true },
+  },
+};

package/lowcode/menu.sub-menu/snippets.ts

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

package/lowcode/modal/meta.ts

@@ -0,0 +1,270 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Modal',
+  title: '对话框',
+  category: '反馈',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Modal",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: 'title',
+      title: { label: '标题', tip: '标题' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'cancelText',
+      title: { label: '取消按钮文字', tip: '取消按钮文字' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'okText',
+      title: { label: '确认按钮文字', tip: '确认按钮文字' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'open',
+      title: { label: '是否可见', tip: '对话框是否可见' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'centered',
+      title: { label: '垂直居中', tip: '垂直居中展示 Modal' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'closable',
+      title: { label: '显示关闭按钮', tip: '是否显示右上角的关闭按钮' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'closeIcon',
+      title: { label: '关闭图标', tip: '自定义关闭图标' },
+      propType: 'node',
+    },
+    {
+      name: 'confirmLoading',
+      title: { label: '确定按钮loading', tip: '确定按钮loading' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'destroyOnClose',
+      title: { label: '销毁子元素', tip: '关闭时销毁 Modal 里的子元素' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'forceRender',
+      title: { label: '强制渲染Modal', tip: '强制渲染Modal' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'keyboard',
+      title: { label: 'esc关闭', tip: '是否支持键盘 esc 关闭' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'mask',
+      title: { label: '是否展示遮罩', tip: '是否展示遮罩' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'maskClosable',
+      title: { label: '点击蒙层关闭', tip: '点击蒙层是否允许关闭' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+      supportVariable: true
+    },
+    {
+      name: 'zIndex',
+      title: { label: 'z-index', tip: '设置 Modal 的 `z-index`' },
+      propType: 'number',
+      setter: 'NumberSetter',
+      supportVariable: true
+    },
+    {
+      name: 'width',
+      title: { label: '宽度', tip: '宽度' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+    },
+    {
+      name: 'footer',
+      title: {
+        label: '底部内容',
+        tip: '底部内容，当不需要默认底部按钮时，可以设为 `footer={null}`',
+      },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+    },
+    {
+      name: 'okType',
+      title: { label: '确认按钮类型', tip: '确认按钮类型' },
+      propType: { type: 'oneOf', value: ['default', 'small'] },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: 'primary',
+              value: 'primary',
+            },
+            {
+              title: 'ghost',
+              value: 'ghost',
+            },
+            {
+              title: 'dashed',
+              value: 'dashed',
+            },
+            {
+              title: 'link',
+              value: 'link',
+            },
+            {
+              title: 'text',
+              value: 'text',
+            },
+            {
+              title: 'default',
+              value: 'default',
+            },
+          ],
+        },
+      },
+    },
+    {
+      name: 'okButtonProps',
+      title: { label: '确认按钮props', tip: '确认按钮props' },
+      propType: 'object',
+      setter: {
+        componentName: 'ObjectSetter',
+        props: {
+          config: {
+            items: [
+              {
+                name: 'disabled',
+                title: { label: '是否可点击', tip: 'disabled' },
+                propType: 'bool',
+                setter: [
+                  {
+                    componentName: 'BoolSetter',
+
+                    initialValue: false,
+                  },
+                  'VariableSetter',
+                ],
+                isRequired: true,
+              },
+            ],
+          },
+        },
+      },
+    },
+    {
+      name: 'bodyStyle',
+      title: { label: 'body样式', tip: 'Modal body 样式' },
+      propType: 'object',
+    },
+    {
+      name: 'maskStyle',
+      title: { label: '遮罩样式', tip: '遮罩样式' },
+      propType: 'object',
+    },
+    {
+      name: 'style',
+      title: {
+        label: '浮层样式',
+        tip: '可用于设置浮层的样式，调整浮层位置等',
+      },
+      propType: 'object',
+    },
+    {
+      name: 'wrapClassName',
+      title: { label: '外层容器类名', tip: '对话框外层容器的类名' },
+      propType: 'string',
+      setter: 'StringSetter',
+      supportVariable: true
+    },
+    {
+      name: 'getContainer',
+      title: {
+        label: '指定挂载节点',
+        tip: '指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom',
+      },
+      propType: { type: 'oneOfType', value: ['node', 'func'] },
+    },
+    {
+      name: 'onCancel',
+      title: {
+        label: '取消按钮回调',
+        tip: '点击遮罩层或右上角叉或取消按钮的回调',
+      },
+      propType: 'func',
+    },
+    {
+      name: 'onOk',
+      title: { label: '点击确定回调', tip: '点击确定回调' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    component: {
+      isContainer: true,
+      isModal: true,
+      rootSelector: '.ant-modal-content',
+      nestingRule: {
+        parentWhitelist: ['Page', 'Component'],
+      },
+    },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'afterClose',
+          templete: "onCancel(${extParams}){\n// 完全关闭后的回调\nconsole.log('afterClose');}",
+        },
+        {
+          name: 'onCancel',
+          template:
+            "onCancel(${extParams}){\n// 点击遮罩层或右上角叉或取消按钮的回调\nconsole.log('onCancel');}",
+        },
+        {
+          name: 'onOk',
+          template: "onOk(${extParams}){\n// 点击确定回调\nconsole.log('onOk');}",
+        },
+      ],
+    },
+  },
+};