@orca-fe/antd-plus/lib/form-item-mapping/demo/Demo1.js

Transformer Container

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("antd/lib/form/style");
var _form = _interopRequireDefault(require("antd/lib/form"));
require("antd/lib/space/style");
var _space = _interopRequireDefault(require("antd/lib/space"));
require("antd/lib/input/style");
var _input = _interopRequireDefault(require("antd/lib/input"));
var _react = _interopRequireDefault(require("react"));
var _2 = require("../..");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * title: 基本使用
 * description: 通过 `valueMapping` 和 `triggerMapping` 将组件的值和触发器映射到 `Form.Item` 的 `name` 和 `trigger` 上，实现组件与多个表单字段的绑定。
 */

/** 地址组件 */
var Address = function Address(props) {
  var province = props.province,
    street = props.street,
    onStreetChange = props.onStreetChange,
    onDistrictChange = props.onDistrictChange,
    district = props.district,
    onProvinceChange = props.onProvinceChange,
    onCityChange = props.onCityChange,
    city = props.city;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
      placeholder: "\u7701",
      value: province,
      onChange: function onChange(e) {
        return onProvinceChange === null || onProvinceChange === void 0 ? void 0 : onProvinceChange(e.target.value);
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
      placeholder: "\u5E02",
      value: city,
      onChange: function onChange(e) {
        return onCityChange === null || onCityChange === void 0 ? void 0 : onCityChange(e.target.value);
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
      placeholder: "\u533A",
      value: district,
      onChange: function onChange(e) {
        return onDistrictChange === null || onDistrictChange === void 0 ? void 0 : onDistrictChange(e.target.value);
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.default, {
      placeholder: "\u8857",
      value: street,
      onChange: function onChange(e) {
        return onStreetChange === null || onStreetChange === void 0 ? void 0 : onStreetChange(e.target.value);
      }
    })]
  });
};
var Demo1 = function Demo1() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.default, {
      initialValues: {
        province: '广东省',
        city: '深圳市',
        district: '南山区',
        street: '科技园',
        areaCode: '0755',
        number: '12345678',
        firstName: '张',
        lastName: '三'
      },
      onValuesChange: function onValuesChange(_, allValue) {
        console.warn(allValue);
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.default.Item, {
        label: "\u5730\u5740",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_2.FormItemMapping, {
          valueMapping: {
            province: 'province',
            city: 'city',
            district: 'district',
            street: 'street'
          },
          triggerMapping: {
            onProvinceChange: 'province',
            onCityChange: 'city',
            onDistrictChange: 'district',
            onStreetChange: 'street'
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Address, {})
        })
      })
    })
  });
};
var _default = exports.default = Demo1;