@td-design/react-native/lib/module/form/FormItem.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, useMemo, useRef } from 'react';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
import { Field, FieldContext } from 'rc-field-form';
import Box from '../box';
import helpers from '../helpers';
import Text from '../text';
import { FormContext } from './context';
const {
  ONE_PIXEL
} = helpers;
const FormItem = _ref => {
  let {
    children,
    noStyle = false,
    name,
    ...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();
    }
  });
  const Content = useMemo(() => /*#__PURE__*/React.createElement(Field, _extends({
    name: name
  }, fieldProps, {
    onMetaChange: onMetaChange
  }), /*#__PURE__*/React.cloneElement(children, {
    ref,
    brief: errors.length > 0 ? /*#__PURE__*/React.createElement(Text, {
      variant: "p3",
      color: "func600"
    }, errors[0]) : null,
    itemHeight: formItemHeight
  })), [name, fieldProps, formItemHeight, errors]);
  if (noStyle) return Content;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
    paddingHorizontal: 'x2',
    minHeight: formItemHeight,
    justifyContent: 'center'
  }, Content), /*#__PURE__*/React.createElement(Box, {
    width: '100%',
    height: bordered ? ONE_PIXEL : 0,
    backgroundColor: errors.length > 0 ? 'func600' : 'border'
  }));
};
FormItem.displayName = 'FormItem';
export default FormItem;
//# sourceMappingURL=FormItem.js.map