@kne/react-form-antd/dist/index.js

把 @kne/react-form 表单校验逻辑应用到antd

var React = require('react');
var classnames = require('classnames');
var ReactForm = require('@kne/react-form');
var reactFormHelper = require('@kne/react-form-helper');
var merge = require('lodash/merge');
var antd = require('antd');
var dayjs = require('dayjs');
var lodash = require('lodash');
var useControlValue = require('@kne/use-control-value');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
var ReactForm__default = /*#__PURE__*/_interopDefaultLegacy(ReactForm);
var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
var useControlValue__default = /*#__PURE__*/_interopDefaultLegacy(useControlValue);

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (-1 !== e.indexOf(n)) continue;
    t[n] = r[n];
  }
  return t;
}

var globalParams = {
  type: 'default',
  size: 'middle',
  rules: {},
  formModal: {},
  resetButton: {},
  submitButton: {},
  field: {}
};
var preset = (function (props) {
  var defaultProps = {};
  merge__default["default"](globalParams, props);
  Object.keys(globalParams.field).forEach(function (name) {
    defaultProps[name] = (globalParams.field[name] || {}).defaultProps;
  });
  reactFormHelper.preset({
    field: defaultProps,
    globalProps: globalParams.globalProps
  });
  ReactForm.preset(globalParams.rules);
});

var _excluded$4 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
var ScrollToError = reactFormHelper.widget.ScrollToError,
  EnterSubmit = reactFormHelper.widget.EnterSubmit,
  FormStore = reactFormHelper.widget.FormStore,
  MaxLabelProvider = reactFormHelper.widget.MaxLabelProvider,
  SizeProvider = reactFormHelper.widget.SizeProvider;
var Form = React.forwardRef(function (originProps, ref) {
  var className = originProps.className,
    cache = originProps.cache,
    _originProps$enterSub = originProps.enterSubmit,
    enterSubmit = _originProps$enterSub === void 0 ? false : _originProps$enterSub,
    _originProps$scrollTo = originProps.scrollToError,
    scrollToError = _originProps$scrollTo === void 0 ? true : _originProps$scrollTo,
    _originProps$scrollPr = originProps.scrollProps,
    scrollProps = _originProps$scrollPr === void 0 ? {
      block: 'center'
    } : _originProps$scrollPr,
    children = originProps.children,
    props = _objectWithoutPropertiesLoose(originProps, _excluded$4);
  var baseClass = 'react-form';
  var computedClass = baseClass;
  var _Object$assign = Object.assign({
      type: 'default',
      size: 'middle'
    }, globalParams, originProps),
    type = _Object$assign.type,
    size = _Object$assign.size;
  if (type !== 'default') {
    computedClass += "--" + type;
  }
  if (size !== 'middle') {
    computedClass += "--" + size;
  }
  var maxLabel = /*#__PURE__*/React__default["default"].createElement(MaxLabelProvider, null, children);
  return /*#__PURE__*/React__default["default"].createElement("form", {
    className: classnames__default["default"](baseClass, computedClass, className),
    onSubmit: function onSubmit(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  }, /*#__PURE__*/React__default["default"].createElement(SizeProvider, {
    value: {
      size: size
    }
  }, /*#__PURE__*/React__default["default"].createElement(ReactForm__default["default"], _extends({}, props, {
    ref: ref
  }), cache ? /*#__PURE__*/React__default["default"].createElement(FormStore, {
    cache: cache
  }) : null, scrollToError ? /*#__PURE__*/React__default["default"].createElement(ScrollToError, {
    scrollProps: scrollProps
  }) : null, enterSubmit ? /*#__PURE__*/React__default["default"].createElement(EnterSubmit, null, maxLabel) : maxLabel)));
});

var useOnChange$b = reactFormHelper.hooks.useOnChange;
var _TreeSelect = function _TreeSelect(props) {
  props = Object.assign({}, {
    fieldName: 'treeSelect'
  }, props);
  var render = useOnChange$b(Object.assign({
    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
  }, props));
  return render(antd.TreeSelect);
};
_TreeSelect.Field = antd.TreeSelect;
_TreeSelect.TreeNode = antd.TreeSelect.TreeNode;

var useOnChange$a = reactFormHelper.hooks.useOnChange;
var RangePicker$1 = antd.TimePicker.RangePicker;
var _TimePicker = function _TimePicker(props) {
  props = Object.assign({}, {
    fieldName: 'timePicker'
  }, props);
  var render = useOnChange$a(Object.assign({
    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
  }, props));
  return render(antd.TimePicker);
};
_TimePicker.Field = antd.TimePicker;
var _RangePicker$1 = function _RangePicker(props) {
  props = Object.assign({}, {
    fieldName: 'rangeTimePicker'
  }, props);
  var render = useOnChange$a(Object.assign({
    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
  }, props));
  return render(RangePicker$1);
};
_RangePicker$1.Field = RangePicker$1;
_TimePicker.RangePicker = _RangePicker$1;

var useDecorator$2 = reactFormHelper.hooks.useDecorator;
var TextArea = function TextArea(props) {
  props = Object.assign({}, {
    fieldName: 'textArea'
  }, props);
  var render = useDecorator$2(Object.assign({
    placeholder: "\u8BF7\u8F93\u5165" + props.label
  }, props));
  return render(antd.Input.TextArea);
};
TextArea.Field = antd.Input.TextArea;

var useOnChange$9 = reactFormHelper.hooks.useOnChange,
  useCheckedToValue$1 = reactFormHelper.hooks.useCheckedToValue;
var withChecked$1 = reactFormHelper.hoc.withChecked;
var WithSwitch = withChecked$1(antd.Switch);
var Switch = function Switch(props) {
  props = Object.assign({}, {
    fieldName: 'switch'
  }, props);
  var checkedProps = useCheckedToValue$1(props);
  var render = useOnChange$9(checkedProps);
  return render(WithSwitch);
};
Switch.Field = antd.Switch;

var useOnChange$8 = reactFormHelper.hooks.useOnChange;
var _Select = function _Select(props) {
  props = Object.assign({}, {
    fieldName: 'select'
  }, props);
  var render = useOnChange$8(Object.assign({
    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
  }, props));
  return render(antd.Select);
};
_Select.Field = antd.Select;
_Select.Option = antd.Select.Option;
_Select.OptGroup = antd.Select.OptGroup;

var _excluded$3 = ["onChange"];
var useOnChange$7 = reactFormHelper.hooks.useOnChange;
var RadioGroup = function RadioGroup(_ref) {
  var onChange = _ref.onChange,
    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
  props = Object.assign({}, {
    fieldName: 'radioGroup'
  }, props);
  var handler = React.useCallback(function (e) {
    onChange && onChange(e.target.value);
  }, [onChange]);
  return /*#__PURE__*/React__default["default"].createElement(antd.Radio.Group, _extends({}, props, {
    onChange: handler
  }));
};
var _RadioGroup = function _RadioGroup(props) {
  var render = useOnChange$7(props);
  return render(RadioGroup);
};
_RadioGroup.Field = RadioGroup;
_RadioGroup.Radio = antd.Radio;

var useDecorator$1 = reactFormHelper.hooks.useDecorator;
var InputNumberField = function InputNumberField(props) {
  props = Object.assign({}, {
    fieldName: 'inputNumber',
    autoComplete: 'off'
  }, props);
  var render = useDecorator$1(Object.assign({
    placeholder: "\u8BF7\u8F93\u5165" + props.label
  }, props));
  return render(antd.InputNumber);
};
InputNumberField.Field = antd.InputNumber;

var useDecorator = reactFormHelper.hooks.useDecorator;
var InputField = function InputField(props) {
  props = Object.assign({}, {
    fieldName: 'input',
    autoComplete: 'off'
  }, props);
  var render = useDecorator(Object.assign({
    placeholder: "\u8BF7\u8F93\u5165" + props.label
  }, props));
  return render(antd.Input);
};
InputField.Field = antd.Input;
InputField.Password = function (props) {
  props = Object.assign({}, {
    fieldName: 'password',
    autoComplete: 'off'
  }, props);
  var render = useDecorator(Object.assign({
    placeholder: "\u8BF7\u8F93\u5165" + props.label
  }, props));
  return render(antd.Input.Password);
};
InputField.Password.Field = antd.Input.Password;

var _excluded$2 = ["soFarText", "startProps", "endProps"];
var useOnChange$6 = reactFormHelper.hooks.useOnChange;
var PickerToday = function PickerToday(_ref) {
  var soFarText = _ref.soFarText,
    startProps = _ref.startProps,
    endProps = _ref.endProps,
    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
  var _useControlValue = useControlValue__default["default"](props),
    data = _useControlValue[0],
    onChange = _useControlValue[1];
  var ref_d = React.useRef();
  var newData = React.useMemo(function () {
    // console.log('......', data);
    var s = lodash.get(data, 0, '');
    var d = lodash.get(data, 1, '');
    var p = lodash.get(props, ['placeholder'], ['开始日期', '结束日期']);
    return {
      start: s ? dayjs__default["default"](s) : '',
      end: d === '至今' ? null : d ? dayjs__default["default"](d) : '',
      showZj: d === '至今',
      placeholder: p
    };
  }, [data]);
  var startChange = function startChange(v) {
    // 比较日期大小
    if (!newData.showZj && newData.end && v && newData.end.isBefore(v)) {
      onChange([newData.end, v]);
      return;
    }
    onChange([v || '', newData.showZj ? '至今' : newData.end]);
  };
  var endChange = function endChange(v) {
    if (newData.start && v && v.isBefore(newData.start)) {
      onChange([v, newData.start]);
      return;
    }
    onChange([newData.start, v || '']);
  };
  var foot = function foot() {
    return /*#__PURE__*/React__default["default"].createElement(antd.Button, {
      type: newData.showZj ? 'primary' : 'default',
      onClick: function onClick(v) {
        ref_d.current.blur();
        onChange([newData.start || '', '至今']);
      }
    }, soFarText || '至今');
  };
  return /*#__PURE__*/React__default["default"].createElement("div", {
    style: {
      display: 'flex'
    }
  }, /*#__PURE__*/React__default["default"].createElement(antd.DatePicker, _extends({}, _extends({
    showToday: false
  }, props, {
    placeholder: newData.placeholder[0]
  }, startProps, {
    value: newData.start
  }), {
    onChange: startChange
  })), /*#__PURE__*/React__default["default"].createElement("div", {
    className: 'svg_box'
  }, /*#__PURE__*/React__default["default"].createElement("svg", {
    viewBox: "0 0 1024 1024",
    focusable: "false",
    "data-icon": "swap-right",
    width: "1em",
    height: "1em",
    fill: "currentColor",
    "aria-hidden": "true"
  }, /*#__PURE__*/React__default["default"].createElement("path", {
    d: "M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
    className: newData.showZj ? 'data_range_picker data_range_picker_dis' : 'data_range_picker'
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: newData.showZj ? 'zhijin zhijin_show' : 'zhijin'
  }, soFarText || '至今'), /*#__PURE__*/React__default["default"].createElement(antd.DatePicker, _extends({}, _extends({
    showToday: false
  }, props, {
    placeholder: newData.showZj ? '' : newData.placeholder[1]
  }, endProps, {
    value: newData.end
  }), {
    ref: ref_d,
    onChange: endChange,
    renderExtraFooter: foot
  }))));
};
var RangePickerToday = function RangePickerToday(props) {
  props = Object.assign({}, {
    fieldName: 'rangePickerToday'
  }, props);
  var render = useOnChange$6(props);
  return render(PickerToday);
};
RangePickerToday.Field = PickerToday;

var useOnChange$5 = reactFormHelper.hooks.useOnChange;
var MonthPicker = antd.DatePicker.MonthPicker,
  RangePicker = antd.DatePicker.RangePicker,
  WeekPicker = antd.DatePicker.WeekPicker;
var _DatePicker = function _DatePicker(props) {
  props = Object.assign({}, {
    fieldName: 'datePicker'
  }, props);
  var render = useOnChange$5(Object.assign({
    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
  }, props));
  return render(antd.DatePicker);
};
_DatePicker.Field = antd.DatePicker;
var _MonthPicker = function _MonthPicker(props) {
  props = Object.assign({}, {
    fieldName: 'monthDatePicker'
  }, props);
  var render = useOnChange$5(Object.assign({
    placeholder: ['开始时间', '结束时间']
  }, props));
  return render(MonthPicker);
};
_MonthPicker.Field = MonthPicker;
var _RangePicker = function _RangePicker(props) {
  props = Object.assign({}, {
    fieldName: 'rangeDatePicker'
  }, props);
  var render = useOnChange$5(Object.assign({
    placeholder: ['开始时间', '结束时间']
  }, props));
  return render(RangePicker);
};
_RangePicker.Field = RangePicker;
var _WeekPicker = function _WeekPicker(props) {
  props = Object.assign({}, {
    fieldName: 'weekDatePicker'
  }, props);
  var render = useOnChange$5(Object.assign({
    placeholder: ['开始时间', '结束时间']
  }, props));
  return render(WeekPicker);
};
_WeekPicker.Field = WeekPicker;
_DatePicker.MonthPicker = _MonthPicker;
_DatePicker.RangePicker = _RangePicker;
_DatePicker.WeekPicker = _WeekPicker;

var useOnChange$4 = reactFormHelper.hooks.useOnChange;
var _CheckboxGroup = antd.Checkbox.Group;
var CheckboxGroup = function CheckboxGroup(props) {
  props = Object.assign({}, {
    fieldName: 'checkboxGroup'
  }, props);
  var render = useOnChange$4(props);
  return render(_CheckboxGroup);
};
CheckboxGroup.Checkbox = antd.Checkbox;
CheckboxGroup.Field = _CheckboxGroup;

var useOnChange$3 = reactFormHelper.hooks.useOnChange,
  useCheckedToValue = reactFormHelper.hooks.useCheckedToValue;
var withChecked = reactFormHelper.hoc.withChecked;
var WithCheckbox = withChecked(antd.Checkbox);
var Checkbox = function Checkbox(props) {
  props = Object.assign({}, {
    fieldName: 'checkbox'
  }, props);
  var checkedProps = useCheckedToValue(Object.assign({}, props, {
    onChange: function onChange(e) {
      e.target.type = 'checkbox';
      props.onChange && props.onChange(e);
    }
  }));
  var render = useOnChange$3(checkedProps);
  return render(WithCheckbox);
};
Checkbox.Field = antd.Checkbox;

var useOnChange$2 = reactFormHelper.hooks.useOnChange;
var Cascader = function Cascader(props) {
  props = Object.assign({}, {
    fieldName: 'cascader'
  }, props);
  var render = useOnChange$2(props);
  return render(antd.Cascader);
};
Cascader.Field = antd.Cascader;

var useOnChange$1 = reactFormHelper.hooks.useOnChange;
var Rate = function Rate(props) {
  props = Object.assign({}, {
    fieldName: 'rate'
  }, props);
  var render = useOnChange$1(Object.assign({}, props));
  return render(antd.Rate);
};
Rate.Field = antd.Rate;

var useOnChange = reactFormHelper.hooks.useOnChange;
var Slider = function Slider(props) {
  props = Object.assign({}, {
    fieldName: 'slider'
  }, props);
  var render = useOnChange(Object.assign({}, props));
  return render(antd.Slider);
};
Slider.Field = antd.Slider;

var ResetButton = function ResetButton(props) {
  var resetProps = ReactForm.useReset();
  return /*#__PURE__*/React__default["default"].createElement(antd.Button, _extends({}, resetProps, props));
};

var _excluded$1 = ["type", "realtime", "disabled"],
  _excluded2 = ["isPass", "isLoading"];
var SubmitButton = function SubmitButton(_ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'primary' : _ref$type,
    realtime = _ref.realtime,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
  var _useSubmit = ReactForm.useSubmit(props),
    isPass = _useSubmit.isPass,
    isLoading = _useSubmit.isLoading,
    submitProps = _objectWithoutPropertiesLoose(_useSubmit, _excluded2);
  return /*#__PURE__*/React__default["default"].createElement(antd.Button, _extends({
    type: type,
    loading: isLoading,
    disabled: disabled || (realtime ? !isPass : false)
  }, props, submitProps));
};

var _excluded = ["onClick"];
var useCacheRemove = reactFormHelper.hooks.useCacheRemove;
var CancelButton = function CancelButton(_ref) {
  var _onClick = _ref.onClick,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var remove = useCacheRemove();
  return /*#__PURE__*/React__default["default"].createElement(antd.Button, _extends({}, props, {
    onClick: function onClick() {
      remove();
      _onClick && _onClick.apply(void 0, [].slice.call(arguments));
    }
  }));
};

var FormAntd = Form;
var fields = {
  TreeSelect: _TreeSelect,
  TimePicker: _TimePicker,
  TextArea: TextArea,
  Switch: Switch,
  Select: _Select,
  RadioGroup: _RadioGroup,
  InputNumber: InputNumberField,
  Input: InputField,
  DatePickerToday: RangePickerToday,
  DatePicker: _DatePicker,
  CheckboxGroup: CheckboxGroup,
  Checkbox: Checkbox,
  Cascader: Cascader,
  Rate: Rate,
  Slider: Slider
};

Object.defineProperty(exports, 'hoc', {
  enumerable: true,
  get: function () { return reactFormHelper.hoc; }
});
Object.defineProperty(exports, 'hooks', {
  enumerable: true,
  get: function () { return reactFormHelper.hooks; }
});
Object.defineProperty(exports, 'utils', {
  enumerable: true,
  get: function () { return reactFormHelper.utils; }
});
Object.defineProperty(exports, 'widget', {
  enumerable: true,
  get: function () { return reactFormHelper.widget; }
});
exports.CancelButton = CancelButton;
exports.Cascader = Cascader;
exports.Checkbox = Checkbox;
exports.CheckboxGroup = CheckboxGroup;
exports.DatePicker = _DatePicker;
exports.DatePickerToday = RangePickerToday;
exports.FormAntd = FormAntd;
exports.Input = InputField;
exports.InputNumber = InputNumberField;
exports.RadioGroup = _RadioGroup;
exports.Rate = Rate;
exports.ResetButton = ResetButton;
exports.Select = _Select;
exports.Slider = Slider;
exports.SubmitButton = SubmitButton;
exports.Switch = Switch;
exports.TextArea = TextArea;
exports.TimePicker = _TimePicker;
exports.TreeSelect = _TreeSelect;
exports["default"] = Form;
exports.fields = fields;
exports.preset = preset;
Object.keys(ReactForm).forEach(function (k) {
  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
    enumerable: true,
    get: function () { return ReactForm[k]; }
  });
});
//# sourceMappingURL=index.js.map