adm-components

antd design mobile enhanced components

Usage

文本输入框

示例

import { IFormText } from 'adm-components';
import { Form } from 'antd-mobile';

export default () => {
  return (
    <Form>
      <IFormText name="name" label="姓名" />
    </Form>
  );
};

文本域

示例

import { IFormTextarea } from 'adm-components';
import { Form } from 'antd-mobile';
export default () => {
  return (
    <Form>
      <IFormTextarea name="desc" label="描述" 
        fieldProps={{
          maxLength: 200,
          placeholder: '请输入描述信息',
        }}
      />
    </Form>
  );
};

单选框

示例

import { IFormRadio } from 'adm-components';
import { Form } from 'antd-mobile';

export default () => {
  const options = [
    { label: '男', value: '1' },
    { label: '女', value: '2' },
  ];

  return (
    <Form>
      <IFormRadio name="sex" label="性别" vertical options={options} />
    </Form>
  );
};

异步加载数据

import { IFormRadio } from 'adm-components';
import { Form } from 'antd-mobile';

export default () => {
  const options = [
    { label: '男', value: '1' },
    { label: '女', value: '2' },
  ];

  const request = async () => {
    // 模拟请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          errcode: '0',
          errmsg: 'success',
          data: options,
        });
      }, 1000);
    });
  };

  return (
    <Form>
      <IFormRadio
        name="sex"
        label="性别"
        vertical
        options={[]}
        request={request}
      />
    </Form>
  );
};

参数说明：其他参数同 Form.Item 的参数 | 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | request | 异步加载数据 | () => Promise<{data: { label: string, value: string }[]}> | - | | vertical | 垂直方向 | boolean | false |

复选框

示例

import { IFormCheckbox } from 'adm-components';
import { Form } from 'antd-mobile';

export default () => {
  const options = [
    { label: '周一', value: '1' },
    { label: '周二', value: '2' },
    { label: '周三', value: '3' },
    { label: '周四', value: '4' },
    { label: '周五', value: '5' },
    { label: '周六', value: '6' },
    { label: '周日', value: '7' },
  ];

  return (
    <Form>
      <IFormCheckbox name="weekday" label="星期" vertical options={options} />
      <Form.Subscribe to={['weekday']}>
        {({ weekday }) => {
          if (!weekday) {
            return null;
          }
          console.log(weekday);
          return <Form.Item label="已选择">{JSON.stringify(weekday)}</Form.Item>;
        }}
      </Form.Subscribe>
    </Form>
  );
};

返回参数为字符串

import { IFormCheckbox } from 'adm-components';
import { Form } from 'antd-mobile';

export default () => {
  const options = [
    { label: '周一', value: '1' },
    { label: '周二', value: '2' },
    { label: '周三', value: '3' },
    { label: '周四', value: '4' },
    { label: '周五', value: '5' },
    { label: '周六', value: '6' },
    { label: '周日', value: '7' },
  ];

  return (
    <Form initialValues={{"weekday":"1,2,3"}}>
      <IFormCheckbox name="weekday" label="星期" vertical options={options}  valueType="string"/>
      <Form.Subscribe to={['weekday']}>
        {({ weekday }) => {
          if (!weekday) {
            return null;
          }
          return <Form.Item label="已选择">{weekday}</Form.Item>;
        }}
      </Form.Subscribe>
    </Form>
  );
};

异步加载数据

import { IFormCheckbox } from 'adm-components';
import { Form } from 'antd-mobile';

export default () => {
  const options = [
    { label: '周一', value: '1' },
    { label: '周二', value: '2' },
    { label: '周三', value: '3' },
    { label: '周四', value: '4' },
    { label: '周五', value: '5' },
    { label: '周六', value: '6' },
    { label: '周日', value: '7' },
  ];

  const request = async () => {
    // 模拟请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          errcode: '0',
          errmsg: 'success',
          data: options,
        });
      }, 1000);
    });
  };


  return (
    <Form>
      <IFormCheckbox name="weekday" label="星期" vertical request={request}  valueType="string"/>
      <Form.Subscribe to={['weekday']}>
        {({ weekday }) => {
          if (!weekday) {
            return null;
          }
          return <Form.Item label="已选择">{weekday}</Form.Item>;
        }}
      </Form.Subscribe>
    </Form>
  );
};

参数说明：其他参数同 Form.Item 的参数 | 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | request | 异步加载数据 | () => Promise<{data: { label: string, value: string }[]}> | - | | vertical | 垂直方向 | boolean | false |

日期选择器

示例

import { IFormDatePicker } from 'adm-components';
import { Form, Button, Toast } from 'antd-mobile';

export default () => {
  return (
    <Form>
      <IFormDatePicker name="birth" label="生日" />
      <Form.Subscribe to={['birth']}>
        {({ birth }) => {
          if (!birth) {
            return null;
          }
          return <Form.Item label="已选择">{birth}</Form.Item>;
        }}
      </Form.Subscribe>
    </Form>
  );
};

日期时间选择器

示例

import { IFormDateTimePicker } from 'adm-components';
import { Form, Button, Toast } from 'antd-mobile';

export default () => {
  return (
    <Form>
      <IFormDateTimePicker name="birth" label="放假时间" />
      <Form.Subscribe to={['holiday']}>
        {({ holiday }) => {
          if (!holiday) {
            return null;
          }
          return <Form.Item label="已选择">{holiday}</Form.Item>;
        }}
      </Form.Subscribe>
    </Form>
  );
};

评分

示例

import { IFormRate } from 'adm-components';
import { Form, Button, Toast } from 'antd-mobile';

export default () => {
  return (
    <Form>
      <IFormRate name="score" label="评分" />
      <Form.Subscribe to={['score']}>
        {({ score }) => {
          if (!score) {
            return null;
          }
          return <Form.Item label="已选择">{score}</Form.Item>;
        }}
      </Form.Subscribe>
    </Form>
  );
};

LICENSE

MIT