@td-design/react-native/lib/module/form/FormListItem.js

react-native UI组件库

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useContext, useRef } from 'react';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
import { Field, FieldContext } from 'rc-field-form';
import ListItem from '../list-item';
import Text from '../text';
import { FormContext } from './context';
const FormListItem = _ref => {
  let {
    children,
    label,
    required,
    style,
    thumb,
    onPress,
    name,
    arrow,
    backgroundColor,
    noStyle = false,
    ...fieldProps
  } = _ref;
  const ref = useRef(null);
  const fieldContext = useContext(FieldContext);
  const [errors, setErrors] = useSafeState([]);
  const {
    formItemHeight,
    bordered
  } = useContext(FormContext);
  const onMetaChange = useMemoizedFn(meta => {
    var _fieldErrors$;
    setErrors(meta.errors);
    const errors = fieldContext.getFieldsError() || [];
    const fieldErrors = errors.filter(item => item.errors.length > 0);
    if (fieldErrors.length > 0 && name === ((_fieldErrors$ = fieldErrors[0]) === null || _fieldErrors$ === void 0 || (_fieldErrors$ = _fieldErrors$.name) === null || _fieldErrors$ === void 0 ? void 0 : _fieldErrors$[0])) {
      var _ref$current;
      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
    }
  });
  if (noStyle) return /*#__PURE__*/React.createElement(Field, _extends({}, fieldProps, {
    name: name,
    onMetaChange: onMetaChange
  }), /*#__PURE__*/React.cloneElement(children, {
    ref
  }));
  return /*#__PURE__*/React.createElement(ListItem, {
    required,
    thumb,
    onPress,
    arrow,
    backgroundColor,
    title: label,
    brief: errors.length > 0 ? /*#__PURE__*/React.createElement(Text, {
      variant: "p3",
      color: "func600"
    }, errors[0]) : null,
    extra: /*#__PURE__*/React.createElement(Field, _extends({}, fieldProps, {
      name: name,
      onMetaChange: onMetaChange
    }), /*#__PURE__*/React.cloneElement(children, {
      ref,
      inForm: true
    })),
    style: {
      minHeight: formItemHeight,
      paddingHorizontal: 0
    },
    bordered: bordered,
    borderColor: errors.length > 0 ? 'func600' : 'border'
  });
};
FormListItem.displayName = 'FormListItem';
export default FormListItem;
//# sourceMappingURL=FormListItem.js.map