ssc-grid/lib/Form.actions.js

React grid component for SSC 3.0

'use strict';

exports.__esModule = true;
exports.updateFieldValue = exports.updateFormData = undefined;
exports.updateReferFieldValue = updateReferFieldValue;
exports.updateFormFieldValidationState = updateFormFieldValidationState;
exports.updateAllFormFieldsValidationState = updateAllFormFieldsValidationState;
exports.updateSubmitButtonState = updateSubmitButtonState;

var _immutabilityHelper = require('immutability-helper');

var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);

var _validation = require('./utils/validation');

var validationUtils = _interopRequireWildcard(_validation);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

/**
 * action的一般格式
 * ```js
 * export const updateFoo = (value) => (prevState, props) => (
 *   update(prevState, {
 *     foo: {$set: value}
 *   })
 * );
 * ```
 */

/**
 * 更新表单所有值
 * @param {Object} formData
 */
/**
 * 模拟redux dispatch去更新state
 * https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3#.52vhwpymp
 */

var updateFormData = exports.updateFormData = function updateFormData(formData) {
  return function (prevState) {
    return (0, _immutabilityHelper2['default'])(prevState, {
      formData: { $set: formData }
    });
  };
};

/**
 * 更新表单中指定字段的值（单值类型）
 * @param {string} fieldId
 * @param {string} value
 */
var updateFieldValue = exports.updateFieldValue = function updateFieldValue(fieldId, value) {
  return function (prevState) {
    var _formData;

    return (0, _immutabilityHelper2['default'])(prevState, {
      formData: (_formData = {}, _formData[fieldId] = { $set: value }, _formData)
    });
  };
};

/**
 * 更新表单中指定的参照字段的值
 * @param {String} fieldId
 * @param {Array} selected 该字段的类型由Refer组件决定，可能会变化，
 * @param {Array} multiple 是否多选，
 * 现在假定是如下结构
 * ```
 * [{
 *     "id": "E6CB6CBE-C701-48EC-A3EB-C823DF8DBEED",
 *     "isLeaf": "true",
 *     "name": "测试组织1",
 *     "pid": "FBA1DBB5-24A2-4A78-A4D5-453F7CC46AA6",
 *     "code": "02"
 * }]
 * ```
 * 当参照被清空之后，这里传过来的是个空数组
 */
function updateReferFieldValue(fieldId, selected, multiple) {
  return function (prevState /* , props */) {
    var _formData2;

    return (0, _immutabilityHelper2['default'])(prevState, {
      formData: (_formData2 = {}, _formData2[fieldId] = {
        $set: selected.length === 0 && !multiple ? null : selected
      }, _formData2)
    });
  };
}

/**
 * 更新表单中指定字段的验证状态
 * stateless
 * @param {String} fieldId
 * @param {String} value 由于validators库只能校验字符串，所以这个参数也必须是字符串
 * @param {Array} validators
 */
function updateFormFieldValidationState(fieldId, value, validators) {
  return function (prevState /* , props */) {
    var _fieldsValidationStat, _fieldsHelpText;

    var _validationUtils$calc = validationUtils.calcValidationState(value, validators),
        validationState = _validationUtils$calc.validationState,
        helpText = _validationUtils$calc.helpText;

    return (0, _immutabilityHelper2['default'])(prevState, {
      fieldsValidationState: (_fieldsValidationStat = {}, _fieldsValidationStat[fieldId] = {
        $set: validationState
      }, _fieldsValidationStat),
      fieldsHelpText: (_fieldsHelpText = {}, _fieldsHelpText[fieldId] = {
        $set: helpText
      }, _fieldsHelpText)
    });
  };
}

/**
 * 从表单数据中获取值
 * @param {Object} fieldModel
 * @param {Object} formData
 * @return {String} 对于参照这种复杂类型，需要返回字符类型的显示值
 * stateless
 */
var getFieldValue = function getFieldValue(_ref, formData) {
  var id = _ref.id,
      type = _ref.type,
      multiple = _ref.multiple;

  var value = '';
  if (type === 'ref') {
    if (multiple || Array.isArray(formData[id])) {
      value = formData[id].map(function (val) {
        return val.id || '';
      });
      value = value.join('');
    } else {
      value = formData[id] ? formData[id].id : '';
    }
  } else {
    value = formData[id];
  }
  return value;
};

/**
 * Calculate validation state of all form fields (without hidden fields)
 * then return validation states and help text object
 * @param {String} fieldId
 * @param {String} value
 * @param {Array} validators
 */
function updateAllFormFieldsValidationState(fieldsModel, formData) {
  return function (prevState /* , props */) {
    var fieldsValidationState = {};
    var fieldsHelpText = {};

    fieldsModel.forEach(function (fieldModel) {
      if (fieldModel.hidden === true) {
        return;
      }
      if (fieldModel.validators) {
        var value = getFieldValue(fieldModel, formData);

        var _validationUtils$calc2 = validationUtils.calcValidationState(value, fieldModel.validators),
            validationState = _validationUtils$calc2.validationState,
            helpText = _validationUtils$calc2.helpText;

        fieldsValidationState[fieldModel.id] = validationState;
        fieldsHelpText[fieldModel.id] = helpText;
      }
    });

    return (0, _immutabilityHelper2['default'])(prevState, {
      fieldsValidationState: { $set: fieldsValidationState },
      fieldsHelpText: { $set: fieldsHelpText }
    });
  };
}

/**
 * 更新提交按钮的状态
 * @param {String} fieldId
 * @param {Array} selected 该字段的类型由Refer组件决定，可能会变化
 */
function updateSubmitButtonState() {
  return function (prevState /* , props */) {
    return (0, _immutabilityHelper2['default'])(prevState, {
      submitButtonDisabled: {
        $set: !validationUtils.isStatesValid(prevState.fieldsValidationState)
      }
    });
  };
}