lodash#concat JavaScript Examples

function getSortedNodes(nodes, sortedByHeader, sortedDesc) {
  const getValue = getValueForSortedBy(sortedByHeader);
  const withAndWithoutValues = groupBy(nodes, (n) => {
    if (!n || n.valueEmpty) {
      return 'withoutValues';
    }
    const v = getValue(n);
    return v !== null && v !== undefined ? 'withValues' : 'withoutValues';
  });
  const withValues = sortNodes(withAndWithoutValues.withValues, getValue, sortedDesc);
  const withoutValues = sortNodes(withAndWithoutValues.withoutValues, getValue, sortedDesc);

  return concat(withValues, withoutValues);
}

function getSortedNodes(nodes, sortedByHeader, sortedDesc) {
  const getValue = getValueForSortedBy(sortedByHeader);
  const withAndWithoutValues = groupBy(nodes, (n) => {
    if (!n || n.valueEmpty) {
      return 'withoutValues';
    }
    const v = getValue(n);
    return v !== null && v !== undefined ? 'withValues' : 'withoutValues';
  });
  const withValues = sortNodes(withAndWithoutValues.withValues, getValue, sortedDesc);
  const withoutValues = sortNodes(withAndWithoutValues.withoutValues, getValue, sortedDesc);

  return concat(withValues, withoutValues);
}

acronymCompleter = {
	name: 'emoji',
	triggerPrefix: ':',
	options: emojis,
	isDebounced: true,
	getOptionKeywords( emoji ) {
		const keywords = concat( emoji.aliases, emoji.tags );
		return [ emoji.emoji ].concat( keywords );
	},
	getOptionLabel( emoji ) {
		return (
			<Fragment>
				{ emoji.emoji }
				<span>:{ emoji.aliases }</span>
			</Fragment>
		);
	},
	getOptionCompletion( emoji ) {
		return emoji.emoji;
	},
}

/**
   * 新增行
   */
  handleAppendRow() {
    const { colCount, rowIndex, pComponent } = this.props;
    const newRow = [];
    for (let index = 0; index < colCount; index += 1) {
      newRow.push(cloneDeep(emptyField));
    }
    const sliceIndex = rowIndex + 1;
    pComponent.fields = concat(
      [],
      slice(pComponent.fields, 0, sliceIndex),
      [newRow],
      slice(pComponent.fields, sliceIndex)
    );
    this.handleRefresh();
  }

/**
   * todo 要将 site 字段放到 removeSiteFields 中
   * 删除行 实际方法
   */
  handleRemoveRow() {
    const { rowIndex, pComponent } = this.props;
    pComponent.fields = concat(
      [],
      slice(pComponent.fields, 0, rowIndex),
      slice(pComponent.fields, rowIndex + 1)
    );
    // // todo 租户级代码
    // const removeFields = pComponent.fields[rowIndex];
    // for (let index = 0; index < removeFields.length; index += 1) {
    //   const removeField = removeFields[index];
    //   if (removeField.siteFlag === 1) {
    //     removeField.visiableFlag = 0;
    //     pComponent.removeSiteFields.push(removeField);
    //   }
    // }
    this.handleCleanWillRemovePositionY();
    this.handleRefresh();
  }

/**
   * 合并右侧空
   */
  handleMergeRight() {
    const { rowIndex, colIndex, pComponent } = this.props;
    const { fields = [] } = pComponent;
    const currentRow = fields[rowIndex];
    if (!(currentRow[colIndex + 1] && currentRow[colIndex + 1].componentType === emptyFieldType)) {
      notification.warning({
        message: intl
          .get('hpfm.codeRule.model.codeRule.canCombineRightFiled')
          .d('只能合并右侧空字段'),
      });
      return;
    }
    const currentField = currentRow[colIndex];

    // 重写 field 的 colspan
    if (currentField.colspan && isNumber(currentField.colspan)) {
      currentField.colspan += 1;
    } else {
      currentField.colspan = 2;
    }
    // 去除多余的 emptyField
    pComponent.fields[rowIndex] = concat(
      [],
      slice(currentRow, 0, colIndex + 1),
      slice(currentRow, colIndex + 2)
    );
    this.handleRefresh();
  }

/**
   * 取消合并
   */
  handleCancelMergeRight() {
    const { component, pComponent, rowIndex, colIndex } = this.props;
    if (!(component.colspan && isNumber(component.colspan))) {
      notification.warning({
        message: intl.get('hpfm.codeRule.model.codeRule.canQCFiled').d('只能拆分合并后的字段'),
      });
    }

    if (component.colspan > 2) {
      component.colspan -= 1;
    } else {
      delete component.colspan;
    }
    // 加上 空字段
    const currentRow = pComponent.fields[rowIndex];
    const sliceIndex = colIndex + 1;
    pComponent.fields[rowIndex] = concat(
      [],
      slice(currentRow, 0, sliceIndex),
      [cloneDeep(emptyField)],
      slice(currentRow, sliceIndex)
    );
    this.handleRefresh();
  }

/**
   * todo 要将 site 字段放到 removeSiteFields 中
   * @param {object} component
   * @param {object} field
   * @param {object} fieldOptions
   */
  handleRemoveField(component, field, fieldOptions) {
    // 保证数据一定正确
    // TODO 跨行的处理
    if (field.colspan && isNumber(field.colspan)) {
      const fillFields = [];
      for (let index = 0; index < field.colspan; index += 1) {
        fillFields.push(cloneDeep(emptyField));
      }
      // eslint-disable-next-line
      component.fields[fieldOptions.rowIndex] = concat(
        [],
        slice(component.fields[fieldOptions.rowIndex], 0, fieldOptions.colIndex),
        fillFields,
        slice(component.fields[fieldOptions.rowIndex], fieldOptions.colIndex + 1)
      );
    } else {
      // eslint-disable-next-line
      component.fields[fieldOptions.rowIndex][fieldOptions.colIndex] = cloneDeep(emptyField);
    }
    // // todo 租户级代码
    // if(field.siteFlag === 1) {
    //   // 平台级 需要放在 removeSiteFields 中
    //   // eslint-disable-next-line no-param-reassign
    //   field.visiableFlag = 0;
    //   component.removeSiteFields.push(field);
    // }
    this.handleRefresh();
  }

handleRemoveField(component, field, fieldOptions) {
    const { onUpdateComponent, onActiveComponent } = this.props;
    // 保证数据一定正确

    // eslint-disable-next-line no-param-reassign
    component.fields = concat(
      [],
      slice(component.fields, 0, fieldOptions.index),
      slice(component.fields, fieldOptions.index + 1)
    );

    // TODO 更新 PageDesigner 中的数据
    if (isFunction(onUpdateComponent)) {
      onUpdateComponent(component);
    }
    if (isFunction(onActiveComponent)) {
      onActiveComponent(component);
    }
  }

/**
   * 新增字段
   * @param {Object} component - drop component
   * @param {Object} field - new add field
   * @param {Object} swapField - drop empty field
   */
  @Bind()
  handleAddField(component, field, swapField) {
    const newField = convertInitExtraField(component, field);
    if (isArray(component.fields)) {
      let insertIndex = component.fields.length;
      if (swapField) {
        forEach(component.fields, (cField, index) => {
          insertIndex = index;
          if (cField === swapField) {
            return false;
          }
        });
      }
      // eslint-disable-next-line
      component.fields = concat(
        [],
        slice(component.fields, 0, insertIndex),
        [newField],
        slice(component.fields, insertIndex)
      );
    } else {
      // eslint-disable-next-line no-param-reassign
      component.fields = [newField];
    }
    this.setState({
      activeComponentCode: component.templateType,
      currentEditComponent: component,
      currentEditField: newField,
      propKey: uuid(),
    });
  }

getColumnHeaders() {
    const columns = this.props.columns || [];
    return [{ id: 'label', label: this.props.label }].concat(columns);
  }

getColumnHeaders() {
    const columns = this.props.columns || [];
    return [{id: 'label', label: this.props.label}].concat(columns);
  }

/**
   * 新增列
   */
  handleAppendCol() {
    const { pComponent, rowIndex, colIndex } = this.props;
    // 先找到当前字段的位置所占位置的最后
    const currentRow = pComponent.fields[rowIndex];
    let positionX = 0;
    for (let index = 0; index <= colIndex; index += 1) {
      const f = currentRow[index];
      if (f.colspan && isNumber(f.colspan)) {
        positionX += f.colspan;
      } else {
        positionX += 1;
      }
    }
    // 得到当前字段的位置
    forEach(pComponent.fields, (fArr, rIndex) => {
      let endPositionX = 0;
      forEach(fArr, (f, cIndex) => {
        const isColspan = f.colspan && isNumber(f.colspan);
        if (isColspan) {
          endPositionX += f.colspan;
        } else {
          endPositionX += 1;
        }
        if (endPositionX > positionX) {
          // 改变 colspan
          // eslint-disable-next-line
          f.colspan += 1;
          return false;
        } else if (endPositionX === positionX) {
          // 增加新的 emptyField
          const sliceIndex = cIndex + 1;
          pComponent.fields[rIndex] = concat(
            [],
            slice(fArr, 0, sliceIndex),
            [cloneDeep(emptyField)],
            slice(fArr, sliceIndex)
          );
          return false;
        }
      });
    });
    this.handleRefresh();
  }

/**
   * todo 要将 site 字段放到 removeSiteFields 中
   * 删除列 实际方法
   */
  handleRemoveCol() {
    const { pComponent, rowIndex, colIndex } = this.props;
    // 找到要删除的位置
    const currentRow = pComponent.fields[rowIndex];
    let positionX = 0;
    for (let index = 0; index <= colIndex; index += 1) {
      const f = currentRow[index];
      if (f.colspan && isNumber(f.colspan)) {
        positionX += f.colspan;
      } else {
        positionX += 1;
      }
    }
    forEach(pComponent.fields, (fArr, rIndex) => {
      let endPositionX = 0;
      forEach(fArr, (f, cIndex) => {
        const isColspan = f.colspan && isNumber(f.colspan);
        if (isColspan) {
          endPositionX += f.colspan;
        } else {
          endPositionX += 1;
        }
        if (endPositionX >= positionX && isColspan) {
          // colspan -1
          if (f.colspan === 2) {
            // eslint-disable-next-line
            delete f.colspan;
          } else {
            // eslint-disable-next-line
            f.colspan -= 1;
          }
          return false;
        } else if (endPositionX === positionX) {
          // const removeField = fArr[cIndex];
          // // todo 租户级的代码
          // if (removeField.siteFlag === 1) {
          //   removeField.visiableFlag = 0;
          //   pComponent.removeSiteFields.push(removeField);
          // }
          pComponent.fields[rIndex] = concat([], slice(fArr, 0, cIndex), slice(fArr, cIndex + 1));
          return false;
        }
      });
    });
    this.handleCleanWillRemovePositionX();
    this.handleRefresh();
  }

Success = ({
  // Query data
  countries = [],
  // Inherited hooks
  enabledCountries,
  setEnabledCountries,
  defaultCountry,
  setDefaultCountry
}) => {
  const changeDefault = ({ target: { value } }) => {
    setDefaultCountry([value, find(countries, ['iso', value]).name])
    // Enable on graph if it’s not alreadythere
    if (!enabledCountries.includes(value)) {
      setEnabledCountries((c) => concat(c, value))
    }
  }
  const toggleEnabled = ({ target: { id } }) =>
    setEnabledCountries((c) =>
      c.includes(id) ? filter(c, (cc) => cc !== id) : concat(c, id)
    )
  const enabledTooltip = (iso) =>
    `${iso.toUpperCase()}: ${
      enabledCountries.includes(iso)
        ? defaultCountry === iso
          ? 'Plotting against'
          : 'Enabled'
        : 'Not plotting'
    }`

  return (
    <>
      <label htmlFor="defaultCountry">Primary country</label>
      <div>
        <select
          name="defaultCountry"
          value={defaultCountry}
          onChange={changeDefault}
        >
          {countries.map((c) => (
            <option key={c.iso} value={c.iso}>
              {c.name}
            </option>
          ))}
        </select>
        <span
          style={{
            backgroundColor: theme.colors[defaultCountry],
            marginLeft: 'auto'
          }}
        />
      </div>
      <p>The other countries will plot against this country.</p>
      <h2>Show countries</h2>
      {/* America! */}
      <label title={enabledTooltip('usa')}>
        <input
          type="checkbox"
          id="usa"
          onChange={toggleEnabled}
          checked={enabledCountries.includes('usa')}
          disabled={defaultCountry === 'usa'}
        />
        United States
        <span style={{ backgroundColor: theme.colors.usa }} />
      </label>
      {orderBy(countries, 'name')
        .filter((c) => c.iso !== 'usa')
        .map(({ iso, name }) => (
          <label key={iso} title={enabledTooltip(iso)}>
            <input
              type="checkbox"
              id={iso}
              onChange={toggleEnabled}
              checked={enabledCountries.includes(iso)}
              disabled={defaultCountry === iso}
            />
            {name}
            <span style={{ backgroundColor: theme.colors[iso] }} />
          </label>
        ))}
      <style jsx>{`
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 6px;
          margin-left: auto;
        }
        label + div {
          display: flex;
          align-items: center;
        }
      `}</style>
    </>
  )
}