feat(Form): rename to ts ,alibaba-fusion#4585

components/form/__tests__/a11y-spec.js → components/form/__tests__/a11y-spec.tsx

@@ -53,7 +53,12 @@ describe('Form A11y', () => {
  wrapper = await testReact(
  <Form>
  <FormItem>
- <Input id="form input" label="form input" placeholder="Input frank" name="username" />
+ <Input
+ id="form input"
+ label="form input"
+ placeholder="Input frank"
+ name="username"
+ />
  <Form.Error name="username">Username Error</Form.Error>
  </FormItem>
  </Form>

components/form/__tests__/index-spec.js → components/form/__tests__/index-spec.tsx

@@ -85,12 +85,7 @@ describe('form', () => {
 
  const wrapper = mount(<Demo />);
  wrapper.find('input#input2').simulate('change', { target: { value: '' } });
- assert(
- wrapper
- .find('.next-form-item-help')
- .hostNodes()
- .text() === 'cant be null'
- );
+ assert(wrapper.find('.next-form-item-help').hostNodes().text() === 'cant be null');
  });
  it('should supoort Field With name on FormItem', () => {
  class Demo extends React.Component {
@@ -118,12 +113,7 @@ describe('form', () => {
 
  const wrapper = mount(<Demo />);
  wrapper.find('input#input2').simulate('change', { target: { value: '' } });
- assert(
- wrapper
- .find('.next-form-item-help')
- .hostNodes()
- .text() === 'cant be null'
- );
+ assert(wrapper.find('.next-form-item-help').hostNodes().text() === 'cant be null');
  });
  });
  describe('Form', () => {
@@ -197,7 +187,14 @@ describe('form', () => {
  it('should supoort component with name on FormItem', () => {
  let wrapper = mount(
  <Form component="div">
- <FormItem name="email" required type="email" format="email" label="email:" help="help msg">
+ <FormItem
+ name="email"
+ required
+ type="email"
+ format="email"
+ label="email:"
+ help="help msg"
+ >
  <Input />
  </FormItem>
  </Form>
@@ -209,7 +206,14 @@ describe('form', () => {
  };
  wrapper = mount(
  <Form component={Tag}>
- <FormItem name="email" required type="email" format="email" label="email:" help="help msg">
+ <FormItem
+ name="email"
+ required
+ type="email"
+ format="email"
+ label="email:"
+ help="help msg"
+ >
  <Input />
  </FormItem>
  </Form>
@@ -253,12 +257,7 @@ describe('form', () => {
  </Form>
  );
 
- assert(
- wrapper
- .find('.next-form-item')
- .first()
- .hasClass('has-success')
- );
+ assert(wrapper.find('.next-form-item').first().hasClass('has-success'));
  });
 
  it('should supoort responsive', () => {

components/form/__tests__/validate-spec.js → components/form/__tests__/validate-spec.tsx

@@ -116,21 +116,11 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === 'first 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
 
  wrapper.find('input#second').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .last()
- .text() === 'second 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').last().text() === 'second 是必填字段');
 
  wrapper.find('button').simulate('click');
  });
@@ -153,12 +143,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '1' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === 'min is 10'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === 'min is 10');
  wrapper.find('button').simulate('click');
  });
 
@@ -180,12 +165,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '1' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === 'min length is 10'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === 'min length is 10');
  wrapper.find('button').simulate('click');
  });
 
@@ -210,11 +190,8 @@ describe('Submit', () => {
  const wrapper = mount(<Demo />);
  wrapper.find('input#email').simulate('change', { target: { value: '123' } });
  assert(
- wrapper
- .find('.next-form-item-help')
- .at(0)
- .hostNodes()
- .text() === 'email 不是合法的 email 地址'
+ wrapper.find('.next-form-item-help').at(0).hostNodes().text() ===
+ 'email 不是合法的 email 地址'
  );
  });
 
@@ -239,11 +216,8 @@ describe('Submit', () => {
  const wrapper = mount(<Demo />);
  wrapper.find('input#email').simulate('change', { target: { value: '123' } });
  assert(
- wrapper
- .find('.next-form-item-help')
- .at(0)
- .hostNodes()
- .text() === 'email 不是合法的 email 地址'
+ wrapper.find('.next-form-item-help').at(0).hostNodes().text() ===
+ 'email 不是合法的 email 地址'
  );
  });
 
@@ -265,12 +239,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === 'first 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
  wrapper.find('button').simulate('click');
  });
 
@@ -294,12 +263,7 @@ describe('Submit', () => {
  wrapper.update();
  assert(wrapper.find('.next-form-item-help').first().length === 0);
  wrapper.find('button').simulate('click');
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === 'first 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
  });
  it('validate useLabelForErrorMessage', () => {
  const wrapper = mount(
@@ -312,12 +276,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === '姓名 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === '姓名 是必填字段');
  });
  it('the useLabelForErrorMessage of FormItem should have a higher priority', () => {
  const wrapper = mount(
@@ -330,12 +289,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === 'first 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === 'first 是必填字段');
  });
  it('the useLabelForErrorMessage of FormItem should have a higher priority', () => {
  const wrapper = mount(
@@ -348,12 +302,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === '姓名 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === '姓名 是必填字段');
  });
  it('validate errorMessageName', () => {
  const wrapper = mount(
@@ -366,12 +315,7 @@ describe('Submit', () => {
 
  wrapper.find('input#first').simulate('change', { target: { value: '' } });
  wrapper.update();
- assert(
- wrapper
- .find('.next-form-item-help')
- .first()
- .text() === '我的姓名 是必填字段'
- );
+ assert(wrapper.find('.next-form-item-help').first().text() === '我的姓名 是必填字段');
  });
 });
 

components/form/error.jsx → components/form/error.tsx

@@ -59,7 +59,9 @@ class Error extends React.Component {
  return (
  <div className={`${prefix}form-item-help`}>
  {children}
- {!!preferMarginToDisplayHelp && <div className={`${prefix}form-item-help-margin-offset`} />}
+ {!!preferMarginToDisplayHelp && (
+ <div className={`${prefix}form-item-help-margin-offset`} />
+ )}
  </div>
  );
  }
@@ -103,7 +105,9 @@ class Error extends React.Component {
  return (
  <div {...others} className={cls} style={style}>
  {result}
- {!!preferMarginToDisplayHelp && <div className={`${prefix}form-item-help-margin-offset`} />}
+ {!!preferMarginToDisplayHelp && (
+ <div className={`${prefix}form-item-help-margin-offset`} />
+ )}
  </div>
  );
  }

components/form/form.jsx → components/form/form.tsx

@@ -19,19 +19,30 @@ function preventDefault(e) {
  e.preventDefault();
 }
 const getNewChildren = (children, props) => {
- const { size, device, labelAlign, labelTextAlign, labelCol, wrapperCol, responsive, colon } = props;
+ const { size, device, labelAlign, labelTextAlign, labelCol, wrapperCol, responsive, colon } =
+ props;
 
  return React.Children.map(children, child => {
  if (obj.isReactFragment(child)) {
  return getNewChildren(child.props.children, props);
  }
 
- if (child && ['function', 'object'].indexOf(typeof child.type) > -1 && child.type._typeMark === 'form_item') {
+ if (
+ child &&
+ ['function', 'object'].indexOf(typeof child.type) > -1 &&
+ child.type._typeMark === 'form_item'
+ ) {
  const childrenProps = {
  labelCol: child.props.labelCol ? child.props.labelCol : labelCol,
  wrapperCol: child.props.wrapperCol ? child.props.wrapperCol : wrapperCol,
- labelAlign: child.props.labelAlign ? child.props.labelAlign : device === 'phone' ? 'top' : labelAlign,
- labelTextAlign: child.props.labelTextAlign ? child.props.labelTextAlign : labelTextAlign,
+ labelAlign: child.props.labelAlign
+ ? child.props.labelAlign
+ : device === 'phone'
+ ? 'top'
+ : labelAlign,
+ labelTextAlign: child.props.labelTextAlign
+ ? child.props.labelTextAlign
+ : labelTextAlign,
  colon: 'colon' in child.props ? child.props.colon : colon,
  size: child.props.size ? child.props.size : size,
  responsive: responsive,

components/form/item.jsx → components/form/item.tsx

@@ -279,7 +279,9 @@ export default class Item extends React.Component {
  const { _formField, _formMarginToDisplayHelp } = this.context;
 
  const useMargin =
- typeof preferMarginToDisplayHelp !== 'undefined' ? preferMarginToDisplayHelp : _formMarginToDisplayHelp;
+ typeof preferMarginToDisplayHelp !== 'undefined'
+ ? preferMarginToDisplayHelp
+ : _formMarginToDisplayHelp;
 
  return (
  <Error
@@ -342,7 +344,9 @@ export default class Item extends React.Component {
  const newLabel = label.replace(':', '').replace('：', '');
 
  const labelForErrorMessage =
- useLabelForErrorMessage !== undefined ? useLabelForErrorMessage : this.context._formLabelForErrorMessage;
+ useLabelForErrorMessage !== undefined
+ ? useLabelForErrorMessage
+ : this.context._formLabelForErrorMessage;
  if (labelForErrorMessage && newLabel) {
  return newLabel;
  }
@@ -403,7 +407,8 @@ export default class Item extends React.Component {
  }
 
  getItemWrapper(children) {
- const { hasFeedback, labelCol, wrapperCol, extra, prefix, renderPreview, name } = this.props;
+ const { hasFeedback, labelCol, wrapperCol, extra, prefix, renderPreview, name } =
+ this.props;
 
  const labelAlign = this.getLabelAlign(this.props.labelAlign, this.props.device);
 
@@ -451,11 +456,16 @@ export default class Item extends React.Component {
  !('data-meta' in child.props) &&
  ('name' in child.props || (name && idx === 0)) //TODO：1.x 为了不BR, 2.x 中把优先级调换下，优先取 FormItem 的 name
  ) {
- const initName = 'name' in child.props && child.props.name ? child.props.name : name;
+ const initName =
+ 'name' in child.props && child.props.name ? child.props.name : name;
  extraProps = this.context._formField.init(
  initName,
  {
- ...getFieldInitCfg(this.props, child.type.displayName, labelForErrorMessage),
+ ...getFieldInitCfg(
+ this.props,
+ child.type.displayName,
+ labelForErrorMessage
+ ),
  props: { ...child.props, ref: child.ref },
  },
  childrenProps
@@ -521,11 +531,19 @@ export default class Item extends React.Component {
  });
 
  // 垂直模式并且左对齐才用到
- const Tag = responsive ? Cell : (wrapperCol || labelCol) && labelAlign !== 'top' ? Row : 'div';
+ const Tag = responsive
+ ? Cell
+ : (wrapperCol || labelCol) && labelAlign !== 'top'
+ ? Row
+ : 'div';
  const label = labelAlign === 'inset' ? null : this.getItemLabel(childrenNode);
 
  return (
- <Tag {...obj.pickOthers(Item.propTypes, this.props)} className={itemClassName} style={style}>
+ <Tag
+ {...obj.pickOthers(Item.propTypes, this.props)}
+ className={itemClassName}
+ style={style}
+ >
  {label}
  {this.getItemWrapper(childrenNode)}
  </Tag>