cloud-b2b 1.1.59 → 1.1.61

package/src/SuperForm/SuperForm.js

@@ -1,519 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import helper from '../helper';
-import Control, {getTitle, makeString} from '../Control';
-import {Icon, Form, Row, Col,Checkbox} from 'antd';
-import variables from '../variables';
-
-const FormItem = Form.Item;
-const defaultSize = 'small';
-const defaultColNum = 4;
-
-const TYPE = [
-  'readonly',
-  'text',
-  'search',
-  'searchText',
-  'select',
-  'selectText',
-  'radioGroup',
-  'number',
-  'date',
-  'textArea',
-  'password',
-  'editor',
-  'selectWriting',
-  'selectSearch',
-  'empty',
-  'area',
-  'uploadImg',
-  'cascader',
-  'treeSelect'
-];
-
-/**
- * key：[必须]，用于唯一标识该Form下的一个表单元素
- * title：[必须]，表单元素的标签
- * type：[必须]，表单元素类型
- * required: [可选]，是否为必填项
- * options: [可选]，对象数组(type为readonly，radio，search, searchText，select, selectText时有效)
- * span: [可选]，占据的列数，默认为1
- * showAdd: [可选]，是否显示+号，点击+号会触发onAdd事件，默认为false
- * rule: [可选]，用于设置校验规则
- * highLightKeys: [可选]，用于设置高亮样式，仅只读字段生效
- */
-const ControlType = {
-  key: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  type: PropTypes.oneOf(TYPE).isRequired,
-  required: PropTypes.bool,
-  options: PropTypes.array,
-  span: PropTypes.number,
-  onCheckItem: PropTypes.any,
-  showAdd: PropTypes.any,
-  rule: PropTypes.object,
-  props: PropTypes.object
-};
-
-class Controlled extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {value: props.value};
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value) {
-      this.setState({value: nextProps.value});
-    }
-  }
-
-  onChange = (value) => {
-    const {onChange} = this.props;
-    this.setState({value});
-    onChange && onChange(value);
-  };
-
-  render() {
-    const props = {
-      ...this.props,
-      value: this.state.value,
-      onChange: this.onChange
-    };
-    return <Control {...props} />;
-  }
-}
-
-/**
- * colNum：[可选]，表单的列数，默认为4
- * readonly: [可选]，为true时，所有表单元素都是只读的; 为字符串数组时，用于指定key的表单元素是只读的
- * hideControls: [可选]，指定key的表单元素被隐藏
- * options: [可选]，键值对，值与ControlType中options作用相同，但优先级更高
- * onChange：内容改变时触发，原型为func(key, value)
- * onSearch：搜索框中用户输入时触发，原型为func(key, title, control)
- * onAdd: 点击+号时触发，原型为func(key)
- * checkable:是否显示checkbox选择框
- * onOpenChange:控制日期框显示隐藏回调func(key, open)
- * onAreaSearch:联级选择器触发，原型为func(key - 当前联级key, title - 输入值, parentKey - 主体联级key)
- * OnFileChange:上传组件触发,原型为func（key,{fileList, fileDeleteList}）
- */
-class SuperForm extends React.Component {
-  static propTypes = {
-    controls: PropTypes.arrayOf(PropTypes.shape(ControlType)).isRequired,
-    value: PropTypes.object,
-    colNum: PropTypes.number,
-    valid: PropTypes.bool,
-    readonly: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
-    hideControls: PropTypes.array,
-    options: PropTypes.object,
-    onChange: PropTypes.func,
-    onSearch: PropTypes.func,
-    onExitValid: PropTypes.func,
-    onAdd: PropTypes.func,
-    checkable: PropTypes.bool,
-    onOpenChange: PropTypes.func,
-    onAreaSearch: PropTypes.func,
-    OnFileChange: PropTypes.func
-  };
-
-  onAdd = (key, title) => {
-    const {onAdd} = this.props;
-    onAdd && onAdd(key, title);
-  };
-
-  onChange = (key, value) => {
-    const {onChange} = this.props;
-    if (onChange) {
-      this.onExitValid(key);
-      onChange(key, value);
-    }
-  };
-
-  onBlur = (key, value) => {
-    const {onChange} = this.props;
-    if (onChange) {
-      this.onExitValid(key);
-      onChange(key, value);
-    }
-  };
-  onFileChange = ({key}, file) => {
-    const {onFileChange} = this.props;
-    onFileChange && onFileChange(key, file);
-  };
-  onExitValid = (key,value) => {
-    if (key === this.validKey) {
-      this.validKey = '';
-      this.props.onExitValid();
-    }
-    this.props.onChangeOperate && this.props.onChangeOperate(key,value);
-  };
-
-  // 动态生成getValidState方法
-  initValidState = () => {
-    const {value, valid} = this.props;
-    const invalid = () => null;
-    const _valid = ({key, required}) => {
-      if (required) {
-        if (!value || helper.isEmpty2(value[key]) || ( !Array.isArray(value[key]) && typeof value[key] === 'object' && helper.isEmpty(value[key].value))) {
-          this.getValidState = invalid;
-          this.validKey = key;
-          return 'error';
-        }
-      }
-      return null;
-    };
-    this.getValidState = valid ? _valid : invalid;
-  };
-
-  validDate = ({key, type}) => (date) => {
-    const {value={}} = this.props;
-    if (!date || !value[key]) {
-      return false;
-    } else {
-      if (type === '>') {
-        return date.format('YYYY-MM-DD') <= value[key];
-      } else if (type === '<') {
-        return date.format('YYYY-MM-DD') >= value[key];
-      } else {
-        return false;
-      }
-    }
-  };
-
-  getPopupContainer = () => {
-    const {container} = this.props;
-    if (typeof container === 'undefined') {
-      return ReactDOM.findDOMNode(this);
-    } else if (typeof container === 'boolean') {
-      return document.body;
-    } else {
-      return ReactDOM.findDOMNode(container);
-    }
-  };
-
-  getMaxWidth = () => {
-    const {colNum=defaultColNum} = this.props;
-    return colNum * 250;
-  };
-
-  getContainer = () => {
-    return this.props.getContainer;
-  };
-
-  getControls = () => {
-    const {hideControls, controls} = this.props;
-    if (!hideControls) {
-      return controls;
-    } else {
-      return controls.filter(control => !hideControls.some(key => control.key === key));
-    }
-  };
-
-  getType = ({key, type}) => {
-    const {readonly} = this.props;
-    if (['area', 'uploadImg'].includes(type)){
-      return type;
-    }else if (!readonly) {
-      return type;
-    } else if (readonly === true) {
-      return 'readonly';
-    } else if (Array.isArray(readonly) && readonly.some(readonlyKey => readonlyKey === key)) {
-      return 'readonly';
-    } else {
-      return type;
-    }
-  };
-
-  specialProps = (type, {key, props={}, type:originType}) => {
-    if (type === 'readonly') {
-      const {highLightKeys=[]} = this.props;
-      const style = highLightKeys.includes(key) ? {backgroundColor: 'red', color: 'white'} : {backgroundColor: '#f0f0f0'};
-      if (originType === 'textArea') {
-        return {
-          type: 'textArea',
-          readonly: true,
-          style,
-          onBlur: this.onExitValid.bind(this, key)
-        }
-      } else {
-        return {
-          style,
-          onBlur: this.onExitValid.bind(this, key)
-        };
-      }
-    } else if (type === 'text' || type === 'textArea') {
-      return {
-        ...props,
-        onChange: this.onExitValid.bind(this, key),
-        onBlur: this.onChange.bind(this, key)
-      }
-    } else if (type === 'date') {
-      const propsObj = {
-        ...props,
-        onChange: this.onBlur.bind(this, key),
-        onBlur: this.onExitValid.bind(this, key)
-      };
-      if (this.props.onOpenChange && typeof this.props.onOpenChange === 'function') {
-        propsObj.onOpenChange = this.props.onOpenChange.bind(this, key);
-      }
-      return propsObj;
-    }else if (type === 'area'){
-      return {
-        ...props,
-        onChange: this.onBlur.bind(this, key),
-        onBlur: this.onExitValid.bind(this, key),
-        onAreaSearch: this.props.onAreaSearch
-      }
-    } else {
-      return {
-        ...props,
-        onChange: this.onBlur.bind(this, key),
-        onBlur: this.onExitValid.bind(this, key)
-      };
-    }
-  };
-
-  getControlProps = (control, status) => {
-    const {value={}} = this.props;
-    const type = this.getType(control);
-    const props = this.specialProps(type, control);
-    return {
-      autoFocus: !!status,
-      type, ...props,
-      size: defaultSize,
-      value: makeString(value[control.key])
-    };
-  };
-
-  getOptions = (key, options) => {
-    const higher = this.props.options || {};
-    return higher[key] || options;
-  };
-
-  toEmpty = (props) => {
-
-  };
-
-  toText = (props) => {
-    return <Controlled {...props} />;
-  };
-
-  toPassword = (props) => {
-    return <Controlled {...props} />;
-  };
-
-  toEditor = (props,control) => {
-    props.inputKey =control.key
-    return <Controlled {...props} />;
-  };
-
-  toSelectWriting = (props,control) => {
-    return <Controlled {...props} />;
-  };
-
-
-  toTextArea = (props, control) => {
-    if(control.allFullFather){
-      props.rows = control.rows;
-      props.maxLength = control.maxLength;
-      props.style = {
-        'resize': 'none'
-      };
-    }else{
-      props.autoSize = {minRows: 1, maxRows: 5};
-    }
-    return <Controlled {...props} />;
-  };
-
-  toNumber = (props) => {
-    props.defaultValue = props.value;
-    delete props.value;
-    return <Control {...props} />;
-  };
-
-  toSelect = (props, {options, key}) => {
-    props.getPopupContainer = this.getPopupContainer;
-    props.options = this.getOptions(key, options);
-    props.dropdownMatchSelectWidth = false;
-    return <Control {...props} />;
-  };
-
-  createSearchEvent = (control) => {
-    if (this.props.onSearch) {
-      return value => this.props.onSearch(control.key, value, control);
-    } else {
-      return null;
-    }
-  };
-
-  toSearch = (props, control) => {
-    props.getPopupContainer = this.getPopupContainer;
-    props.options = this.getOptions(control.key, control.options);
-    props.onSearch = this.createSearchEvent(control);
-    props.dropdownMatchSelectWidth = false;
-    return <Control {...props} />;
-  };
-
-  toDate = (props, {rule}) => {
-    props.getCalendarContainer = this.getPopupContainer;
-    props.style = {width: '100%'};
-    rule && (props.disabledDate = this.validDate(rule));
-    return <Control {...props} />;
-  };
-
-  toRadioGroup = (props, {key, options}) => {
-    props.options = this.getOptions(key, options);
-    return <Control {...props} />;
-  };
-
-  toReadonly = (props, {options, key}) => {
-    props.value = getTitle(props.value, this.getOptions(key, options));
-    return <Control {...props} />;
-  };
-
-  selectSearch = (props, control) => {
-    props.getPopupContainer = this.getPopupContainer;
-    props.options = this.getOptions(control.key, control.options);
-    props.onSearch = this.createSearchEvent(control);
-    props.dropdownMatchSelectWidth = false;
-    return <Control {...props} />;
-  };
-
-  area = (props, {key,options}) => {
-    const {readonly} = this.props;
-    props.parentKey = key;
-    props.options = this.getOptions(key, options);
-    props.dropdownMatchSelectWidth = false;
-    props.readonly = readonly === true || Array.isArray(readonly) && readonly.some(readonlyKey => readonlyKey === key) ? true : false;
-    return <Control {...props} />;
-  };
-
-  uploadImg = (props, control) => {
-    const {readonly} = this.props;
-    props.required = control.required || false;
-    props.onFileChange = this.onFileChange.bind(this,control);
-    props.readonly = readonly === true || Array.isArray(readonly) && readonly.some(readonlyKey => readonlyKey === control.key) ? true : false;
-    return <Control {...props} />
-  };
-
-  toCascader = (props, control) => {
-    const container = this.getContainer();
-    container && (props.getPopupContainer = container);
-    props.options = control.options || [];
-    props.onSearch = this.createSearchEvent(control);
-    props.placeholder = props.placeholder || '';
-    props.loadData = this.createSearchEvent(control);
-    return <Control {...props} />;
-  };
-
-  toTreeSelect = (props,filter) => {
-    const container = this.getContainer();
-    container && (props.getPopupContainer = container);
-    props.options = this.getOptions(filter);
-    props.onSearch = this.createSearchEvent(filter);
-    props.placeholder = filter.placeholder || '';
-    return <Control {...props} />;
-  };
-  toControl = (props, control) => {
-    switch (props.type) {
-      case 'readonly':
-        return this.toReadonly(props, control);
-      case 'text':
-        return this.toText(props, control);
-      case 'number':
-        return this.toNumber(props, control);
-      case 'select':
-      case 'selectText':
-        return this.toSelect(props, control);
-      case 'search':
-      case 'searchText':
-        return this.toSearch(props, control);
-      case 'date':
-        return this.toDate(props, control);
-      case 'radioGroup':
-        return this.toRadioGroup(props, control);
-      case 'textArea':
-        return this.toTextArea(props, control);
-      case 'password':
-        return this.toPassword(props, control);
-      case 'editor':
-        return this.toEditor(props, control);
-      case 'selectWriting' :
-        return this.toSelectWriting(props,control)
-      case 'selectSearch':
-        return this.selectSearch(props, control);
-      case 'empty':
-        return this.toEmpty(props, control);
-      case 'area':
-        return this.area(props, control);
-      case 'uploadImg':
-        return this.uploadImg(props, control);
-      case 'cascader':
-        return this.toCascader(props, control);
-      case 'treeSelect':
-        return this.toTreeSelect(props, control);
-      default:
-        return 'type error';
-    }
-  };
-
-  toLabel = ({title, showAdd, key}, type) => {
-    if (showAdd && (type !== 'readonly')) {
-      const onClick = this.onAdd.bind(this, key, title);
-      return <span>{title}<Icon role='add' type='plus-circle-o' onClick={onClick}/></span>;
-    } else {
-      return title;
-    }
-  };
-
-  toCol = (span, control) => {
-    const factor = control.span || 1;
-    const status = this.getValidState(control);
-    const controlProps = this.getControlProps(control, status);
-    const itemProps = {
-      label: this.toLabel(control, controlProps.type),
-      required: control.required,
-      validateStatus: status
-    };
-    const {checkable,onCheckItem} = this.props;
-    return control.type !== 'empty' ? (
-      <Col span={span * factor} key={control.key}>
-        {checkable && <Checkbox className={variables('SuperForm').checkbox} onChange={onCheckItem.bind(this,control)} checked={control.checked} />}
-        <FormItem {...itemProps} className={checkable ? variables('SuperForm').formItemWithCheckbox : ''}>
-          {this.toControl(controlProps, control)}
-        </FormItem>
-      </Col>
-    ) : (
-      <Col span={span * factor} key={control.key} style={{height: '44px'}}/>
-    );
-  };
-
-  toCols = () => {
-    let {colNum=defaultColNum,allFullFather} = this.props;
-    if(allFullFather){
-      colNum = 1;
-    }
-    const span = 24 / colNum;
-    return this.getControls().map(control => {
-      if(allFullFather){
-        control.allFullFather = allFullFather;
-      }
-      return this.toCol(span, control)
-    });
-  };
-
-  render() {
-    this.initValidState();
-    return (
-      <div className={variables('SuperForm')}>
-        <Form layout='vertical' style={{maxWidth: this.props.allFullFather ? '100%' : this.getMaxWidth()}}>
-          <Row gutter={20}>
-            {this.toCols()}
-          </Row>
-        </Form>
-      </div>
-    );
-  }
-}
-
-export default SuperForm;