lodash#inRange JavaScript Examples

/**
   * 渲染所有表单行
   */
  renderRows() {
    const { col, fields } = this.props;
    // 存放 生成的 Row
    const rows = [];
    // 所有的 字段的数组
    // 当前遍历的字段的下标
    let walkerIndex = 0;
    // 当前遍历的 Row 的 fields
    let rowFields = [];
    // 已经遍历的 Row 的 fields 的宽度和
    let rowCol = 0;
    // 当前遍历的 Row 的 field 的下标
    let rowIndex = 0;
    if (isArray(fields)) {
      for (; walkerIndex < fields.length; ) {
        const field = fields[walkerIndex];
        rowFields.push(field);
        if (inRange(field.colspan, 2, col + 1)) {
          rowCol += field.colspan;
        } else {
          rowCol += 1;
        }
        if (inRange(field.leftOffset, 1, col)) {
          rowCol += field.leftOffset;
        }
        if (inRange(field.rightOffset, 1, col)) {
          rowCol += field.rightOffset;
        }
        if (rowCol >= col) {
          if (rowCol > col && rowIndex > 0) {
            // 已经超过一列的宽度了,并且字段多于1个 需要 回退
            walkerIndex--;
            rowFields.pop();
          }
          // 生成 Row 并放入 rows
          rows.push(this.renderRow({ rowFields }));
          // 重置 遍历的 Row 的状态
          rowIndex = 0;
          rowCol = 0;
          rowFields = [];
        } else {
          // 继续向前遍历
          rowIndex++;
        }
        walkerIndex++;
      }
      if (rowIndex > 0) {
        rows.push(this.renderRow({ rowFields }));
      }
    }
    return rows;
  }

/**
   * 渲染所有表单行
   */
  renderRows() {
    const { col, fields, context, dataSource, form } = this.props;
    const contextFields = [];
    forEach(fields, field => {
      if (field.visiableFlag === 1) {
        const contextField = dealObjectProps(field, context);
        contextField.props = preProcessComponentProps({ field: contextField, context });
        contextFields.push(contextField);
      }
    });
    forEach(contextFields, field => {
      postDynamicFormProcessComponentProps({
        fields: contextFields,
        field,
        dealProps: field.props,
        dataSource,
        form,
      });
    });
    // 存放 生成的 Row
    const rows = [];
    // 所有的 字段的数组
    // 当前遍历的字段的下标
    let walkerIndex = 0;
    // 当前遍历的 Row 的 fields
    let rowFields = [];
    // 已经遍历的 Row 的 fields 的宽度和
    let rowCol = 0;
    // 当前遍历的 Row 的 field 的下标
    let rowIndex = 0;
    if (isArray(contextFields)) {
      for (; walkerIndex < contextFields.length; ) {
        const field = contextFields[walkerIndex];
        rowFields.push(field);
        if (inRange(field.colspan, 2, col + 1)) {
          rowCol += field.colspan;
        } else {
          rowCol += 1;
        }
        if (inRange(field.leftOffset, 1, col)) {
          rowCol += field.leftOffset;
        }
        if (inRange(field.rightOffset, 1, col)) {
          rowCol += field.rightOffset;
        }
        if (rowCol >= col) {
          if (rowCol > col && rowIndex > 0) {
            // 已经超过一列的宽度了,并且字段多于1个 需要 回退
            walkerIndex--;
            rowFields.pop();
          }
          // 生成 Row 并放入 rows
          rows.push(this.renderRow({ rowFields }));
          // 重置 遍历的 Row 的状态
          rowIndex = 0;
          rowCol = 0;
          rowFields = [];
        } else {
          // 继续向前遍历
          rowIndex++;
        }
        walkerIndex++;
      }
      if (rowIndex > 0) {
        rows.push(this.renderRow({ rowFields }));
      }
    }
    return rows;
  }

/**
   * 渲染最终的字段
   * @param {Object} field - 字段
   */
  renderComposeFormField({ field }) {
    const { disableStyle, fieldLabelWidth, col, editable, organizationId, context } = this.props;
    const formItemProps = {
      labelCol: {
        style: { width: fieldLabelWidth, minWidth: fieldLabelWidth, maxWidth: fieldLabelWidth },
      },
      wrapperCol: { style: { flex: 'auto' } },
    };
    const colProps = getColLayout(col);
    const fieldColProps = getColLayout(col, field.colspan);
    const leftEmptyCols = [];
    const rightEmptyCols = [];
    if (inRange(field.leftOffset, 1, col)) {
      for (let i = 0; i < field.leftOffset; i++) {
        leftEmptyCols.push(<Col {...colProps} key={`${field.fieldCode}#left-offset-${i}`} />);
      }
    }
    if (inRange(field.rightOffset, 1, col)) {
      for (let i = 0; i < field.rightOffset; i++) {
        rightEmptyCols.push(<Col {...colProps} key={`${field.fieldCode}#right-offset-${i}`} />);
      }
    }
    const ComponentType = getComponentType(field);
    const componentProps = getComponentProps({
      field,
      componentType: field.componentType,
      context,
    });

    const otherFormItemOptions = {};
    let isViewOnly = false; // 附件是否为只读
    const getValueFromEvent = getGetValueFromEventFunc(field.componentType);
    const getValueProps = getGetValuePropFunc(field);
    if (field.componentType === 'Upload') {
      otherFormItemOptions.valuePropName = 'attachmentUUID';
      if (field.props) {
        const propsIndex = findIndex(field.props, ['attributeName', 'viewOnly']);
        if (propsIndex >= 0) {
          isViewOnly = field.props[propsIndex].attributeValue;
        }
      }
    }
    if (getValueFromEvent) {
      otherFormItemOptions.getValueFromEvent = getValueFromEvent;
    }
    if (getValueProps) {
      // 不影响存的值, 只影响传递给组件的值
      otherFormItemOptions.getValueProps = getValueProps;
    }
    const composeFormItem = (
      <Col {...fieldColProps} key={field.fieldCode}>
        <ComposeFormContext.Consumer>
          {({ form, dataSource }) => {
            const otherComponentProps = {}; // 为 lov 和 valueList 准备的属性
            switch (field.componentType) {
              case 'Lov':
              case 'ValueList':
                otherComponentProps.textValue = getDisplayValue(field, dataSource);
                break;
              default:
                break;
            }
            return editable ? (
              <FormItem
                label={field.fieldDescription}
                {...formItemProps}
                required={
                  field.componentType !== 'Checkbox' &&
                  toInteger(field.requiredFlag) !== 0 &&
                  !isViewOnly
                } // 当附件只读时，不必输
              >
                {(field.fieldCode === 'mail'
                  ? form.getFieldDecorator(`mail`, {
                      ...otherFormItemOptions,
                      initialValue: getInitialValue({ field, dataSource }),
                      rules: [
                        {
                          required: true,
                          message: intl.get('hzero.common.validation.notNull', {
                            name: intl.get('hzero.common.email').d('邮箱'),
                          }),
                        },
                        {
                          pattern: EMAIL,
                          message: intl.get('hzero.common.validation.email').d('邮箱格式不正确'),
                        },
                        {
                          max: 60,
                          message: intl.get('hzero.common.validation.max', {
                            max: 60,
                          }),
                        },
                      ],
                    })
                  : form.getFieldDecorator(field.fieldCode, {
                      ...otherFormItemOptions,
                      initialValue: getInitialValue({ field, dataSource }),
                      rules: [
                        {
                          required: toInteger(field.requiredFlag) !== 0 && !isViewOnly,
                          message: intl.get('hzero.common.validation.notNull', {
                            name: field.fieldDescription,
                          }),
                        },
                      ],
                    }))(
                  React.createElement(
                    ComponentType,
                    { ...componentProps, ...otherComponentProps } // otherComponentProps 比 componentProps 优先级高
                  )
                )}
              </FormItem>
            ) : (
              <FormItem label={field.fieldDescription} {...formItemProps}>
                {renderDisabledField({
                  field,
                  dataSource,
                  formItemProps,
                  organizationId,
                  disableStyle,
                  componentProps: { ...componentProps, ...otherComponentProps },
                })}
              </FormItem>
            );
          }}
        </ComposeFormContext.Consumer>
      </Col>
    );
    if (isEmpty(leftEmptyCols) && isEmpty(rightEmptyCols)) {
      return composeFormItem;
    }
    return (
      <React.Fragment key={field.fieldCode}>
        {leftEmptyCols}
        {composeFormItem}
        {rightEmptyCols}
      </React.Fragment>
    );
  }

/**
   * 渲染最终的字段
   * @param {Object} field - 字段
   */
  renderComposeFormField({ field }) {
    const { fieldLabelWidth, col, editable, form } = this.props;
    const { dataSource } = this.state;
    const formItemProps = {
      labelCol: {
        style: { width: fieldLabelWidth, minWidth: fieldLabelWidth, maxWidth: fieldLabelWidth },
      },
      wrapperCol: { style: { flex: 'auto' } },
    };
    const colProps = getColLayout(col);
    const fieldColProps = getColLayout(col, field.colspan);
    const leftEmptyCols = [];
    const rightEmptyCols = [];
    if (inRange(field.leftOffset, 1, col)) {
      for (let i = 0; i < field.leftOffset; i++) {
        leftEmptyCols.push(<Col {...colProps} key={`${field[fieldNameProp]}#left-offset-${i}`} />);
      }
    }
    if (inRange(field.rightOffset, 1, col)) {
      for (let i = 0; i < field.rightOffset; i++) {
        rightEmptyCols.push(
          <Col {...colProps} key={`${field[fieldNameProp]}#right-offset-${i}`} />
        );
      }
    }
    const ComponentType = getComponentType(field);
    const otherFormItemOptions = {};
    // 表单字段 omit 属性
    const componentProps = omit(field.props, ['labelDisplayFlag']);
    const getValueFromEvent = getGetValueFromEventFunc(field.componentType);
    const getValueProps = getGetValuePropFunc(field);
    if (getValueFromEvent) {
      otherFormItemOptions.getValueFromEvent = getValueFromEvent;
    }
    if (getValueProps) {
      // 不影响存的值, 只影响传递给组件的值
      otherFormItemOptions.getValueProps = getValueProps;
    }
    const visible = field.visiableFlag !== 0;
    if (field.props.description) {
      formItemProps.extra = field.props.description;
    }
    const composeFormItem = editable ? (
      visible ? (
        <Col {...fieldColProps} key={field[fieldNameProp]}>
          <FormItem
            label={field.props.labelDisplayFlag ? field[fieldLabelProp] : ''}
            {...formItemProps}
            required={field.requiredFlag !== 0}
          >
            {form.getFieldDecorator(field[fieldNameProp], {
              ...otherFormItemOptions,
              initialValue: getInitialValue({ field, dataSource }),
              rules: [
                {
                  required: field.requiredFlag !== 0,
                  message: intl.get('hzero.common.validation.notNull', {
                    name: field[fieldLabelProp],
                  }),
                },
              ],
            })(
              <ComponentType
                {...componentProps}
                disabled={field.props.disabled || field.enabledFlag !== 1}
              />
            )}
          </FormItem>
        </Col>
      ) : null
    ) : (
      <Col {...fieldColProps} key={field[fieldNameProp]}>
        <FormItem label={field[fieldLabelProp]} {...formItemProps}>
          {renderDisabledField({
            field,
            dataSource,
            formItemProps,
            componentProps: field.props,
          })}
        </FormItem>
      </Col>
    );
    if (isEmpty(leftEmptyCols) && isEmpty(rightEmptyCols)) {
      return composeFormItem;
    }
    return (
      <React.Fragment key={field[fieldNameProp]}>
        {leftEmptyCols}
        {composeFormItem}
        {rightEmptyCols}
      </React.Fragment>
    );
  }