lodash#startsWith JavaScript Examples

/**
 * 处理context属性 以及将 属性转为对象
 * @param {*} props - 属性
 * @param {*} context - 外面传进来的 this
 */
export function commonDealForProps(props, context) {
  const contextProps = {};
  const dealProps1 = {};
  forEach(props, prop => {
    let dealProp = prop.attributeValue;
    if (isString(dealProp) && startsWith(dealProp, contextPrefix)) {
      const attributePath = dealProp.substr(5);
      dealProp = undefined;
      Object.defineProperty(contextProps, prop.attributeName, {
        get: () => get(context, attributePath),
        enumerable: true,
      });
    }
    if (dealProp !== undefined) {
      dealProps1[prop.attributeName] = dealProp;
    }
  });
  return { contextProps, dealProps1 };
}

/**
 * 如果是context属性 则返回 context属性上的内容
 * 否则返回 pathOrValue
 * @param {object} context
 * @param {string} pathOrValue
 */
export function getContextValue(context, pathOrValue) {
  if (isString(pathOrValue) && startsWith(pathOrValue, contextPrefix)) {
    return get(context, pathOrValue.substr(5));
  }
  return pathOrValue;
}

/**
 * 会直接改变参数
 * @param {object} dynamicTable
 * @returns {object} dynamicTable
 */
function processDynamicTable(dynamicTable) {
  const props = {};
  const hiddenColumns = [];
  const newConfig = [];
  forEach(dynamicTable.config, prop => {
    if (startsWith(prop.attributeName, hiddenColumnPrefix)) {
      hiddenColumns.push(prop);
    } else {
      newConfig.push(prop);
      props[prop.attributeName] = prop.value;
    }
  });
  dynamicTable.config = newConfig;
  dynamicTable.hiddenColumns = hiddenColumns;
  dynamicTable.fields = map(dynamicTable.fields, field => {
    switch (field.componentType) {
      case 'LinkButton':
        return processDynamicTableLinkButtonField(field, dynamicTable);
      default:
        return field;
    }
  });

  dynamicTable.pagination = props.pagination;
  if (props.pagination) {
    dynamicTable.defaultPageSize = props.defaultPageSize;
  }
  return dynamicTable;
}

/**
 * @param {!String} cachePreKey - 删除对应 缓存头的 key
 */
function cleanCacheData(cachePreKey) {
  const removeCacheKeys = [];
  // CLEAR_MAP[cachePreKey] = true;
  forEach(CACHE_MAP, (_, cacheKey) => {
    if (startsWith(cacheKey, cachePreKey)) {
      // CLEAR_MAP[cacheKey] = true;
      removeCacheKeys.push(cacheKey);
    }
  });
  forEach(removeCacheKeys, (cacheKey) => {
    delete CACHE_MAP[cacheKey];
  });
}

shouldComponentUpdate(nextProps, _, nextLegacyContext) {
    const { router: { route: { location: { pathname } = {} } = {} } = {} } = nextLegacyContext;
    const { activeTabKey, tabKey, tabPathname } = nextProps;
    /* todo 只有当 pathname 等于 Tab 里的 path 时 才能更新 */
    return (
      tabKey === activeTabKey &&
      /* sometimes the pathname is different with tabPathname */
      startsWith(decodeURIComponent(pathname), decodeURIComponent(tabPathname))
    );
  }

/**
 * 将 存储的 dynamicTable 转换成 设计器 可以识别的
 * @param {object} template
 * @param {object} options
 * @returns {object}
 */
function dynamicTableDirtyExtra(template, options) {
  const noCloneDeep = options && options.noCloneDeep;
  const newTemplate = noCloneDeep ? template : cloneDeep(template);
  const props = {};
  const hiddenColumns = [];
  const newConfig = [];
  forEach(newTemplate.config, prop => {
    if (startsWith(prop.attributeName, hiddenColumnPrefix)) {
      hiddenColumns.push(prop);
    } else {
      newConfig.push(prop);
      props[prop.attributeName] = prop.value;
    }
  });
  newTemplate.config = newConfig;
  newTemplate.hiddenColumns = hiddenColumns;
  // 批量处理 DynamicTable 的 字段 (虽然只处理了 LinkButton)
  newTemplate.fields = map(newTemplate.fields, field => {
    const extraField = dynamicTable.dirtyExtraFields[field.componentType] || noop;
    extraField(newTemplate, field);
    return field;
  });

  newTemplate.pagination = props.pagination;
  if (props.pagination) {
    newTemplate.defaultPageSize = props.defaultPageSize;
  }
  return newTemplate;
}

Button = ({ href, children, ...props }) => {
  if (href) {
    if (startsWith(href, 'http')) {
      props.target = '_blank';
    }
    return (
      <a role="button" href={href} {...props}>
        {children}
      </a>
    );
  }

  return (
    <button type="button" {...props}>
      {children}
    </button>
  );
}

constructor(props) {
    super(props);
    let filteredCountries = countryData.allCountries;

    if (props.disableAreaCodes) filteredCountries = this.deleteAreaCodes(filteredCountries);
    if (props.regions) filteredCountries = this.filterRegions(props.regions, filteredCountries);

    const onlyCountries = this.excludeCountries(
      this.getOnlyCountries(props.onlyCountries, filteredCountries), props.excludeCountries,
    );

    const preferredCountries = filter(filteredCountries, (country) => some(props.preferredCountries, (preferredCountry) => preferredCountry === country.iso2));

    const inputNumber = props.value || '';

    let countryGuess;
    if (inputNumber.length > 1) {
      // Country detect by value field
      countryGuess = this.guessSelectedCountry(inputNumber.replace(/\D/g, '').substring(0, 6), onlyCountries, props.defaultCountry) || 0;
    } else if (props.defaultCountry) {
      // Default country
      countryGuess = find(onlyCountries, { iso2: props.defaultCountry }) || 0;
    } else {
      // Empty params
      countryGuess = 0;
    }

    const countryGuessIndex = findIndex(this.allCountries, countryGuess);
    const dialCode = (
      inputNumber.length < 2
      && countryGuess
      && !startsWith(inputNumber.replace(/\D/g, ''), countryGuess.dialCode)
    ) ? countryGuess.dialCode : '';

    const formattedNumber = (inputNumber === '' && countryGuess === 0) ? ''
      : this.formatNumber(
        (props.disableCountryCode ? '' : dialCode) + inputNumber.replace(/\D/g, ''),
        countryGuess.name ? countryGuess.format : undefined,
      );

    this.state = {
      formattedNumber,
      placeholder: props.placeholder,
      onlyCountries,
      preferredCountries,
      defaultCountry: props.defaultCountry,
      selectedCountry: countryGuess,
      highlightCountryIndex: countryGuessIndex,
      queryString: '',
      freezeSelection: false,
      debouncedQueryStingSearcher: debounce(this.searchCountry, 100),
      anchorEl: null,
    };
  }

MaterialUiPhoneNumber.defaultProps = {
  excludeCountries: [],
  onlyCountries: [],
  preferredCountries: [],
  defaultCountry: '',

  placeholder: '+1 (702) 123-4567',
  disabled: false,
  error: false,
  variant: 'standard',
  native: false,

  inputClass: '',
  dropdownClass: '',

  autoFormat: true,
  disableAreaCodes: false,
  isValid: (inputNumber) => some(countryData.allCountries, (country) => startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber)),
  disableCountryCode: false,
  disableDropdown: false,
  enableLongNumbers: false,
  countryCodeEditable: true,

  regions: '',

  localization: {},

  onEnterKeyPress: () => { },
  onChange: () => { },

  isModernBrowser: () => (document.createElement ? Boolean(document.createElement('input').setSelectionRange) : false),

  keys: {
    UP: 38,
    DOWN: 40,
    RIGHT: 39,
    LEFT: 37,
    ENTER: 13,
    ESC: 27,
    PLUS: 43,
    A: 65,
    Z: 90,
    SPACE: 32,
  },
};

getDynamicComponent() {
    const { context, template = {} } = this.props;
    let dynamicComponent = null;
    let props = {};
    // DynamicModal
    if (template.templateType === 'DynamicModal') {
      const otherProps = omit(this.props, dynamicComponentOmitProps);
      const configProps = omit(template, dynamicComponentOmitConfigProps);
      // 处理 Modal 的 afterSave 属性, afterHide, afterShow
      forEach(template.props, (v, k) => {
        switch (k) {
          case 'afterSave':
          case 'afterHide':
          case 'afterShow':
            if (template.props[k]) {
              if (isString(template.props[k]) && startsWith(template.props[k], contextPrefix)) {
                const attributePath = template.props[k].substr(5);
                Object.defineProperty(props, k, {
                  get: () => get(context, attributePath),
                  enumerable: true,
                });
              } else {
                props[k] = v;
              }
            }
            break;
          default:
            props[k] = v;
        }
      });
      forEach(otherProps, (v, k) => {
        props[k] = v;
      });
      forEach(configProps, (v, k) => {
        props[k] = v;
      });
    } else {
      props = this.dealCommonContainerProps();
    }
    // DynamicModal
    switch (template.templateType) {
      case 'DynamicForm':
        dynamicComponent = React.createElement(DynamicForm, props);
        break;
      case 'DynamicToolbar':
        dynamicComponent = React.createElement(DynamicToolbar, props);
        break;
      case 'DynamicSearchForm':
        dynamicComponent = React.createElement(DynamicSearchForm, props);
        break;
      case 'DynamicTable':
        dynamicComponent = React.createElement(DynamicTable, {
          ...props,
          ...pick(template.props, contextOmitDynamicTableProps),
        });
        break;
      case 'DynamicModal':
        dynamicComponent = React.createElement(DynamicModal, props);
        break;
      case 'DynamicTabs':
        dynamicComponent = React.createElement(DynamicTabs, props);
        break;
      default:
        dynamicComponent = null;
        break;
    }
    return dynamicComponent;
  }

// 防止第一次 state 是空报错

  render() {
    const { field, form } = this.props;
    const propValues = {};
    forEach(field.config, prop => {
      propValues[prop.attributeName] = prop.value;
    });
    const btnConfigs = {};
    const btnProps = {
      btn: {},
    };
    forEach(field.config, prop => {
      if (startsWith(prop[attributeNameProp], TOOLBAR_BTN_PREFIX)) {
        // 设置 btn 的属性
        if (startsWith(prop[attributeNameProp], `${TOOLBAR_BTN_PREFIX}${modalBtnPrefix}`)) {
          btnConfigs[(prop[attributeNameProp] || '').substr(TOOLBAR_BTN_PREFIX.length)] =
            prop[attributeTypeProp];
          if (btnProps.btn.modalBtns) {
            btnProps.btn.modalBtns.push(prop);
          } else {
            btnProps.btn.modalBtns = [prop];
          }
        } else if (startsWith(prop[attributeNameProp], `${TOOLBAR_BTN_PREFIX}${subEventPrefix}`)) {
          btnConfigs[(prop[attributeNameProp] || '').substr(TOOLBAR_BTN_PREFIX.length)] =
            prop[attributeTypeProp];
          if (btnProps.btn.subEvents) {
            btnProps.btn.subEvents.push(prop);
          } else {
            btnProps.btn.subEvents = [prop];
          }
        } else {
          // 设置除了 modalBtn, subEvent 之外的属性类型
          set(btnProps, prop[attributeNameProp], prop[attributeValueProp]);
        }
      } else {
        propValues[prop[attributeNameProp]] = prop[attributeValueProp];
      }
    });

    return (
      <Form>
        {form.getFieldDecorator('btnConfigs', {
          initialValue: btnConfigs,
        })(<div />)}
        {form.getFieldDecorator('btnProps', {
          initialValue: btnProps.btn,
        })(<div />)}
        {this.renderFieldCommonProps(propValues)}
        <Divider />
        {this.renderFieldTypeProps(propValues)}
      </Form>
    );
  }

/**
   * render
   * @returns React.element
   */
  render() {
    const {
      anchor,
      visible,
      title,
      form,
      saveAddHolidayLoading,
      saveUpdateHolidayLoading,
      targetItem,
      onCancel,
      dateFormat,
      holidayType,
    } = this.props;
    const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
    const formLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
    };
    return (
      <Modal
        title={title}
        width={520}
        wrapClassName={`ant-modal-sidebar-${anchor}`}
        transitionName={`move-${anchor}`}
        visible={visible}
        onOk={this.saveBtn}
        okButtonProps={{
          loading: isUndefined(targetItem.holidayId)
            ? saveAddHolidayLoading
            : saveUpdateHolidayLoading,
        }}
        onCancel={onCancel}
        destroyOnClose
      >
        <Form>
          <Form.Item
            label={intl.get('hpfm.calendar.model.calendar.holidayType').d('公休假期类型')}
            {...formLayout}
          >
            {getFieldDecorator('holidayType', {
              rules: [
                {
                  required: true,
                  message: intl.get('hzero.common.validation.notNull', {
                    name: intl.get('hpfm.calendar.model.calendar.holidayType').d('公休假期类型'),
                  }),
                },
              ],
              initialValue: targetItem.holidayType,
            })(
              <Select>
                {holidayType
                  .filter((item) => startsWith(item.value, 'OFFICIAL'))
                  .map((item) => (
                    <Select.Option key={item.value} value={item.value}>
                      {item.meaning}
                    </Select.Option>
                  ))}
              </Select>
            )}
          </Form.Item>
          <Form.Item
            label={intl.get('hpfm.calendar.model.calendar.holidayName').d('公休假期')}
            {...formLayout}
          >
            {getFieldDecorator('holidayName', {
              initialValue: targetItem.holidayName,
              rules: [
                {
                  required: true,
                  message: intl.get('hzero.common.validation.notNull', {
                    name: intl.get('hpfm.calendar.model.calendar.holidayName').d('公休假期'),
                  }),
                },
                {
                  max: 30,
                  message: intl.get('hzero.common.validation.max', { max: 30 }),
                },
              ],
            })(
              <TLEditor
                label={intl.get('hpfm.calendar.model.calendar.holidayName').d('公休假期')}
                field="holidayName"
                // eslint-disable-next-line
                token={targetItem._token}
              />
            )}
          </Form.Item>
          <Form.Item
            label={intl.get('hpfm.calendar.model.calendar.dateRange').d('假期范围')}
            {...formLayout}
          >
            {getFieldDecorator('dateRange', {
              initialValue:
                !isUndefined(targetItem.startDate) && !isUndefined(targetItem.endDate)
                  ? [
                      moment(targetItem.startDate, dateFormat),
                      moment(targetItem.endDate, dateFormat),
                    ]
                  : [],
              rules: [
                {
                  required: true,
                  type: 'array',
                  message: intl.get('hzero.common.validation.notNull', {
                    name: intl.get('hpfm.calendar.model.calendar.dateRange').d('假期范围'),
                  }),
                },
              ],
            })(
              <DatePicker.RangePicker
                placeholder=""
                format={dateFormat}
                onChange={(date) => {
                  setFieldsValue({ keyDate: date[0] });
                }}
              />
            )}
          </Form.Item>
          <Form.Item
            label={intl.get('hpfm.calendar.model.calendar.keyDate').d('假期当天')}
            {...formLayout}
          >
            {getFieldDecorator('keyDate', {
              initialValue: !isUndefined(targetItem.keyDate)
                ? moment(targetItem.keyDate, dateFormat)
                : null,
              rules: [
                {
                  required: true,
                  message: intl.get('hzero.common.validation.notNull', {
                    name: intl.get('hpfm.calendar.model.calendar.keyDate').d('假期当天'),
                  }),
                },
              ],
            })(
              <DatePicker
                placeholder=""
                format={dateFormat}
                style={{ width: '100%' }}
                disabledDate={(currentDate) =>
                  getFieldValue('dateRange') &&
                  (moment(getFieldValue(`dateRange`)[0]).isAfter(currentDate, 'day') ||
                    moment(getFieldValue(`dateRange`)[1]).isBefore(currentDate, 'day'))
                }
              />
            )}
          </Form.Item>
          <Form.Item
            label={intl.get('hpfm.calendar.model.calendar.remark').d('说明')}
            {...formLayout}
          >
            {getFieldDecorator('remark', {
              initialValue: targetItem.remark,
            })(<Input.TextArea />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }