# umi插件

umi-plugin-sula是Sula提供的结合umi项目使用以提供更多行为配置能力的插件，结合umi-plugin-sula，可以使sula + umi 有着更好的开发体验和效率提升。当然，umi-plugin-sula 也可以和基于 umi 内核的 bigfish、smallfish 等无缝结合。

在项目中结合umi-plugin-sula，我们会在Sula的组件及模板中提供部分action类型（如路由类型'route'）及render+action类型（如图标跳转类型'iconLink')等能力，帮助用户通过配置快速使用

# usage

// .umirc.js
export default {
  plugins: ['umi-plugin-sula'],
}

# 路由插件

umi-plugin-sula为我们提供的路由类插件本质上都是渲染插件，在点击后触发相应的路由跳转操作

示例：

render: {
  type: 'textLink',
  text: 'jumpto',
  path: '/',
  props: {
    style,
  },
}

通用参数配置：

参数	说明	类型
path	跳转路径	`string`
query	路由url的查询部分，对象`{key:value}`的形式	`object`
search	路由url的查询部分，`?key=value`的形式	`string`
type	路由插件类型，见下方👇	`textLink \| iconLink \| buttonLink`

# textLink

render: {
  type: 'textLink',
  text: 'jumpto',
  path: '/',
  props: {
    style: { 
      fontSize: '32px',
    },
  },
}

文本路由，除路由插件基本参数外，额外支持：

参数	说明	类型
text	显示文案	`string`
props	属性设置，应用在span标签上	`object`

# iconLink

render: {
  type: 'iconLink',
  path: '/',
  props: {
    type: "delete",
  },
}

图标路由，除路由插件基本参数外，额外支持：

参数	说明	类型
text	icon旁边显示的文案，可选参数	`string`
props	属性设置，应用在antd-icon组件上	`object`

# buttonLink

render: {
  type: 'buttonLink',
  text: 'delete',
  path: '/',
  props: {
    type: "delete",
  },
}

按钮路由，除路由插件基本参数外，额外支持：

参数	说明	类型
text	按钮上显示的文案	`string`
props	属性设置，实际应用在渲染插件-Button组件上，props更多配置参考antd-Button	`object`

# 行为插件

# fetch

示例：

render: {
  type: 'button',
  action: {
    type: 'fetch',
    url: '/user/12345',
    method: 'get',
  }
}

对应render组件点击时触发fetch请求相关操作，更多支持配置参考请求插件

# back

示例：

render: {
  type: 'button',
  action: 'back',
}

返回上一级

# forward

render: {
  type: 'button',
  action: 'forward',
}

前进一级

# route

render: {
  type: 'button',
  action: {
    type: 'route',
    path: '/createTask',
    query: {id: 's001'},
  }
}

对应render组件点击时触发路由请求相关操作，配置参数同路由插件-通用参数配置

# 开发能力

除了通过插件来使用路由、请求的能力外，umi-plugin-sula 还提供了代码级能力

history
fetch()
upload()

# history


import { history } from '@sula/biz';

//后退一级
history.goBack();

//前进一级
history.goForward();

//往浏览器的历史记录中添加一条新记录，同时改变地址栏的地址进行跳转
history.push('/home', { some: 'state' });

//监听浏览器地址栏的变化
history.listen((location, action) => {
  console.log(
    `The current URL is ${location.pathname}${location.search}${location.hash}`
  );
  console.log(`The last navigation action was ${action}`);
});

对于history的操作，基于umi-history

# fetch

示例：

import { fetch } from '@sula/biz';

fetch({
  url: '/v1/info',
  method: 'get',
  params: { name: 'sula' },
  convertParams: ({params}) => params,
  converter:({data}) => data,
}).then(
    res => res
  ).catch(
    errorDesc => {}
  );

服务器数据请求相关能力，详情参考请求插件

# upload

示例：

import { upload } from '@sula/biz';

upload('/v1/upload', {
    file1: file, // file 支持数组，即批量场景
    name: 'sula'
  }
).then(res => res);

上传文件操作

参数	说明	类型
url	上传文件的url地址	`string`
form	上传内容	`object`

# 插件注册

# 全局插件注册

umi-plugin-sula提供了注册全局渲染插件、行为插件的能力。

umi-plugin-sula 默认会自动扫描 src/plugins、src/plugin（如果没有src，则对应plugins、plugin） ,目录下的 jsx，tsx，js，ts注册到 sula 中。

你也可以通过 path，entry 改变默认行为，例如 Bigfish dva 也会自动扫描 plugins 目录，那么你需要修改 sula 全局插件的存放位置。

// config/config.js
export default {
  plugins: [
    ['umi-plugin-sula', {
      plugins: {
        path: './myPlugins', // 相对于 src，如果没有src就是项目根目录，支持数组
        entry: '**/plugin.{jsx, tsx}', // 只会将src/myPlugins/**/plugin.{jsx, tsx}下的文件作为插件注册到sula中，支持数组
      }
    }]
  ]
}

// 如果你不需要全局注册行为
export default {
  plugins: [
    ['umi-plugin-sula', {
      plugins: {
        path: [], // 无全局插件存放目录
      }
    }]
  ]
}

示例

// src/plugins/customAlert.js
export default function(gSula) {
  gSula.actionType('95::alert2', (ctx, config) => {
    alert(config.message);
  });
}

// 或者类的写法
export default class Alert2 {
  apply(gSula) {
    gSula.actionType('95::alert2', (ctx, config) => {
      alert(config.message);
    });
  }
}

# renderPlugin

你也可以使用renderPlugin注册render插件

示例：

import { renderPlugin } from '@sula/plugin-loader';

// 插件注册示例
const InputFn = (props) => {
  const { ctx, placeholder, ...restProps } = props;
  const { mode } = ctx;
  return <input disabeld={mode === 'view'} placeholder={placeholder} {...restProps} />
}

// 返回值是插件对应的type字符串
export default renderPlugin('', ['placeholder'])(InputFn);

// 使用方式
<SulaForm
  fields={[
    {
      name: 'inputFn',
      label: 'inputFn',
      render: {
        type: InputFn,
        placeholder: 'please input',
      }
    }
  ]}
>

renderPlugin(pluginName, extraPropsKeys)(WrappedComponent)是一个二阶函数，参数如下：

参数	说明	类型	默认值
pluginName	插件名称	`string`	`'render_plugin::'`
extraPropsKeys	额外属性，与type同级写入，会传入`WrappedComponent`的`props`属性中	`Array<string>`	`-`
WrappedComponent	被`renderPlugin()`包裹的组件，props中参数见下表	`ReactElement`	`-`

# props

被renderPlugin()包裹的组件的props属性中可以拿到以下参数：

参数	说明	类型
ctx	配置方法参数，同sula-form ctx	`object`
onChange	trigger同名函数，组件值变化时候的回调，使用参考自定义表单控件	`() => void`
value	组件值	`-`

此外，props中还能拿到extraPropsKeys中写入的属性。

← 校验插件插件规范 →