phobal/vscode-plugin-wyny-snippets

万益能源前端代码片段 VSCode 插件

万益能源前端代码片段 VSCode 插件

日常业务开发中一些常用的代码片段

🔽Download

创建基于 antd3 表单模板代码 - WYNY_CA3F

``` tsx
  import React from "react";
  import { Form, Input } from "antd";
  import { WrappedFormUtils } from "antd/lib/form/Form";

  type $1Props = {
    form: WrappedFormUtils;
  };

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  };

  function $1(props: $1Props): JSX.Element {
    const { form } = props;
    const { getFieldDecorator } = form;
    return (
      <Form {...formItemLayout}>
        <Form.Item label="姓名">
          {getFieldDecorator("name", {
            initialValue: "",
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </Form.Item>
      </Form>
    );
  }
  export default Form.create<$1Props>()($1);
```

创建 antd3 版本的自定义表单组件结构 - WYNY_CA3CF

``` tsx
  import React, { forwardRef } from 'react';
  import { Input } from 'antd';

  type $1Props = {
    value: string;
    onChange: () => void;
  };

  const $1: React.ForwardRefRenderFunction<any, $1Props> = (
    { value, onChange },
    ref,
  ) => {
    return <Input ref={ref} value={value} onChange={onChange} />;
  };

  export default forwardRef($1);

```

创建 antd3 版本的弹窗表单 ModalForm 结构 - WYNY_CA3MF

``` tsx
  import { getList } from './service'

  export const namespace = '$1'

  export default {
    namespace,
    state: {
      data: []
    },
    effects: {
      *fetch({ payload }, { call, put }) {
        const res = yield call(getList, payload)
        if (res?.data) {
          yield put({
            type: 'setState',
            payload: {
              data: res.data
            }
          })
        }
      }
    },
    reducers: {
      setState(state, { payload }) {
        return {
          ...state,
          ...payload,
        }
      }
    },
  }

```

创建一个 dva model 结构 - WYNY_CDvaM

``` tsx
import React from "react";
import { Modal, Form, Input } from "antd";
import { WrappedFormUtils } from "antd/lib/form/Form";

type $1Props = {
  visible: Boolean;
  form: WrappedFormUtils;
};

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

function $1(props: $1Props): JSX.Element {
  const { form } = props;
  const { getFieldDecorator } = form;
  const onOk = () => {
    form.validateFields((err, values) => {
      if (err) return
      console.log(values)
    })
  }
  return (
    <Modal visible={visible} width={500} title="新增" onOk={onOk}>
      <Form {...formItemLayout}>
        <Form.Item label="姓名">
          {getFieldDecorator("name", {
            initialValue: "",
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default Form.create<$1Props>()($1);

```

创建一个简单的 react function 组件 - WYNY_rfc

``` tsx
import React from 'react'

type Props = {}

const ${1:${TM_FILENAME_BASE}} = (props: Props) => {
  return (
    <div>${1:${TM_FILENAME_BASE}}</div>
  )
}

export default ${1:${TM_FILENAME_BASE}}
```

如何贡献代码

请参考 CONTRIBUTING