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

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

import React, { forwardRef, useCallback, useRef, useMemo } from 'react';
import classnames from 'classnames';
import ReactForm__default, { preset as preset$2, useReset, useSubmit } from '@kne/react-form';
export * from '@kne/react-form';
import { preset as preset$1, widget, hooks, hoc } from '@kne/react-form-helper';
export { hoc, hooks, utils, widget } from '@kne/react-form-helper';
import merge from 'lodash/merge';
import { TreeSelect, TimePicker, Input, Switch as Switch$1, Select, Radio, InputNumber, DatePicker, Button, Checkbox as Checkbox$1, Cascader as Cascader$1, Rate as Rate$1, Slider as Slider$1 } from 'antd';
import dayjs from 'dayjs';
import { get } from 'lodash';
import useControlValue from '@kne/use-control-value';

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;
}

const globalParams = {
  type: 'default',
  size: 'middle',
  rules: {},
  formModal: {},
  resetButton: {},
  submitButton: {},
  field: {}
};
var preset = props => {
  const defaultProps = {};
  merge(globalParams, props);
  Object.keys(globalParams.field).forEach(name => {
    defaultProps[name] = (globalParams.field[name] || {}).defaultProps;
  });
  preset$1({
    field: defaultProps,
    globalProps: globalParams.globalProps
  });
  preset$2(globalParams.rules);
};

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

const {
  useOnChange: useOnChange$b
} = hooks;
const _TreeSelect = props => {
  props = Object.assign({}, {
    fieldName: 'treeSelect'
  }, props);
  const render = useOnChange$b(Object.assign({
    placeholder: `请选择${props.label || ''}`
  }, props));
  return render(TreeSelect);
};
_TreeSelect.Field = TreeSelect;
_TreeSelect.TreeNode = TreeSelect.TreeNode;

const {
  useOnChange: useOnChange$a
} = hooks;
const {
  RangePicker: RangePicker$1
} = TimePicker;
const _TimePicker = props => {
  props = Object.assign({}, {
    fieldName: 'timePicker'
  }, props);
  const render = useOnChange$a(Object.assign({
    placeholder: `请选择${props.label || ''}`
  }, props));
  return render(TimePicker);
};
_TimePicker.Field = TimePicker;
const _RangePicker$1 = props => {
  props = Object.assign({}, {
    fieldName: 'rangeTimePicker'
  }, props);
  const render = useOnChange$a(Object.assign({
    placeholder: `请选择${props.label || ''}`
  }, props));
  return render(RangePicker$1);
};
_RangePicker$1.Field = RangePicker$1;
_TimePicker.RangePicker = _RangePicker$1;

const {
  useDecorator: useDecorator$2
} = hooks;
const TextArea = props => {
  props = Object.assign({}, {
    fieldName: 'textArea'
  }, props);
  const render = useDecorator$2(Object.assign({
    placeholder: `请输入${props.label}`
  }, props));
  return render(Input.TextArea);
};
TextArea.Field = Input.TextArea;

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

const {
  useOnChange: useOnChange$8
} = hooks;
const _Select = props => {
  props = Object.assign({}, {
    fieldName: 'select'
  }, props);
  const render = useOnChange$8(Object.assign({
    placeholder: `请选择${props.label || ''}`
  }, props));
  return render(Select);
};
_Select.Field = Select;
_Select.Option = Select.Option;
_Select.OptGroup = Select.OptGroup;

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

const {
  useDecorator: useDecorator$1
} = hooks;
const InputNumberField = props => {
  props = Object.assign({}, {
    fieldName: 'inputNumber',
    autoComplete: 'off'
  }, props);
  const render = useDecorator$1(Object.assign({
    placeholder: `请输入${props.label}`
  }, props));
  return render(InputNumber);
};
InputNumberField.Field = InputNumber;

const {
  useDecorator
} = hooks;
const InputField = props => {
  props = Object.assign({}, {
    fieldName: 'input',
    autoComplete: 'off'
  }, props);
  const render = useDecorator(Object.assign({
    placeholder: `请输入${props.label}`
  }, props));
  return render(Input);
};
InputField.Field = Input;
InputField.Password = props => {
  props = Object.assign({}, {
    fieldName: 'password',
    autoComplete: 'off'
  }, props);
  const render = useDecorator(Object.assign({
    placeholder: `请输入${props.label}`
  }, props));
  return render(Input.Password);
};
InputField.Password.Field = Input.Password;

const _excluded$2 = ["soFarText", "startProps", "endProps"];
const {
  useOnChange: useOnChange$6
} = hooks;
const PickerToday = _ref => {
  let {
      soFarText,
      startProps,
      endProps
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
  const [data, onChange] = useControlValue(props);
  const ref_d = useRef();
  const newData = useMemo(() => {
    // console.log('......', data);
    const s = get(data, 0, '');
    const d = get(data, 1, '');
    const p = get(props, ['placeholder'], ['开始日期', '结束日期']);
    return {
      start: s ? dayjs(s) : '',
      end: d === '至今' ? null : d ? dayjs(d) : '',
      showZj: d === '至今',
      placeholder: p
    };
  }, [data]);
  const startChange = v => {
    // 比较日期大小
    if (!newData.showZj && newData.end && v && newData.end.isBefore(v)) {
      onChange([newData.end, v]);
      return;
    }
    onChange([v || '', newData.showZj ? '至今' : newData.end]);
  };
  const endChange = v => {
    if (newData.start && v && v.isBefore(newData.start)) {
      onChange([v, newData.start]);
      return;
    }
    onChange([newData.start, v || '']);
  };
  const foot = () => {
    return /*#__PURE__*/React.createElement(Button, {
      type: newData.showZj ? 'primary' : 'default',
      onClick: v => {
        ref_d.current.blur();
        onChange([newData.start || '', '至今']);
      }
    }, soFarText || '至今');
  };
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex'
    }
  }, /*#__PURE__*/React.createElement(DatePicker, _extends({}, _extends({
    showToday: false
  }, props, {
    placeholder: newData.placeholder[0]
  }, startProps, {
    value: newData.start
  }), {
    onChange: startChange
  })), /*#__PURE__*/React.createElement("div", {
    className: 'svg_box'
  }, /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 1024 1024",
    focusable: "false",
    "data-icon": "swap-right",
    width: "1em",
    height: "1em",
    fill: "currentColor",
    "aria-hidden": "true"
  }, /*#__PURE__*/React.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.createElement("div", {
    className: newData.showZj ? 'data_range_picker data_range_picker_dis' : 'data_range_picker'
  }, /*#__PURE__*/React.createElement("span", {
    className: newData.showZj ? 'zhijin zhijin_show' : 'zhijin'
  }, soFarText || '至今'), /*#__PURE__*/React.createElement(DatePicker, _extends({}, _extends({
    showToday: false
  }, props, {
    placeholder: newData.showZj ? '' : newData.placeholder[1]
  }, endProps, {
    value: newData.end
  }), {
    ref: ref_d,
    onChange: endChange,
    renderExtraFooter: foot
  }))));
};
const RangePickerToday = props => {
  props = Object.assign({}, {
    fieldName: 'rangePickerToday'
  }, props);
  const render = useOnChange$6(props);
  return render(PickerToday);
};
RangePickerToday.Field = PickerToday;

const {
  useOnChange: useOnChange$5
} = hooks;
const {
  MonthPicker,
  RangePicker,
  WeekPicker
} = DatePicker;
const _DatePicker = props => {
  props = Object.assign({}, {
    fieldName: 'datePicker'
  }, props);
  const render = useOnChange$5(Object.assign({
    placeholder: `请选择${props.label || ''}`
  }, props));
  return render(DatePicker);
};
_DatePicker.Field = DatePicker;
const _MonthPicker = props => {
  props = Object.assign({}, {
    fieldName: 'monthDatePicker'
  }, props);
  const render = useOnChange$5(Object.assign({
    placeholder: ['开始时间', '结束时间']
  }, props));
  return render(MonthPicker);
};
_MonthPicker.Field = MonthPicker;
const _RangePicker = props => {
  props = Object.assign({}, {
    fieldName: 'rangeDatePicker'
  }, props);
  const render = useOnChange$5(Object.assign({
    placeholder: ['开始时间', '结束时间']
  }, props));
  return render(RangePicker);
};
_RangePicker.Field = RangePicker;
const _WeekPicker = props => {
  props = Object.assign({}, {
    fieldName: 'weekDatePicker'
  }, props);
  const render = useOnChange$5(Object.assign({
    placeholder: ['开始时间', '结束时间']
  }, props));
  return render(WeekPicker);
};
_WeekPicker.Field = WeekPicker;
_DatePicker.MonthPicker = _MonthPicker;
_DatePicker.RangePicker = _RangePicker;
_DatePicker.WeekPicker = _WeekPicker;

const {
  useOnChange: useOnChange$4
} = hooks;
const _CheckboxGroup = Checkbox$1.Group;
const CheckboxGroup = props => {
  props = Object.assign({}, {
    fieldName: 'checkboxGroup'
  }, props);
  const render = useOnChange$4(props);
  return render(_CheckboxGroup);
};
CheckboxGroup.Checkbox = Checkbox$1;
CheckboxGroup.Field = _CheckboxGroup;

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

const {
  useOnChange: useOnChange$2
} = hooks;
const Cascader = props => {
  props = Object.assign({}, {
    fieldName: 'cascader'
  }, props);
  const render = useOnChange$2(props);
  return render(Cascader$1);
};
Cascader.Field = Cascader$1;

const {
  useOnChange: useOnChange$1
} = hooks;
const Rate = props => {
  props = Object.assign({}, {
    fieldName: 'rate'
  }, props);
  const render = useOnChange$1(Object.assign({}, props));
  return render(Rate$1);
};
Rate.Field = Rate$1;

const {
  useOnChange
} = hooks;
const Slider = props => {
  props = Object.assign({}, {
    fieldName: 'slider'
  }, props);
  const render = useOnChange(Object.assign({}, props));
  return render(Slider$1);
};
Slider.Field = Slider$1;

const ResetButton = props => {
  const resetProps = useReset();
  return /*#__PURE__*/React.createElement(Button, _extends({}, resetProps, props));
};

const _excluded$1 = ["type", "realtime", "disabled"],
  _excluded2 = ["isPass", "isLoading"];
const SubmitButton = _ref => {
  let {
      type = 'primary',
      realtime,
      disabled = false
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
  const _useSubmit = useSubmit(props),
    {
      isPass,
      isLoading
    } = _useSubmit,
    submitProps = _objectWithoutPropertiesLoose(_useSubmit, _excluded2);
  return /*#__PURE__*/React.createElement(Button, _extends({
    type: type,
    loading: isLoading,
    disabled: disabled || (realtime ? !isPass : false)
  }, props, submitProps));
};

const _excluded = ["onClick"];
const {
  useCacheRemove
} = hooks;
const CancelButton = _ref => {
  let {
      onClick
    } = _ref,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  const remove = useCacheRemove();
  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
    onClick: (...args) => {
      remove();
      onClick && onClick(...args);
    }
  }));
};

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

export { CancelButton, Cascader, Checkbox, CheckboxGroup, _DatePicker as DatePicker, RangePickerToday as DatePickerToday, FormAntd, InputField as Input, InputNumberField as InputNumber, _RadioGroup as RadioGroup, Rate, ResetButton, _Select as Select, Slider, SubmitButton, Switch, TextArea, _TimePicker as TimePicker, _TreeSelect as TreeSelect, Form as default, fields, preset };
//# sourceMappingURL=index.modern.js.map