shineout 1.12.2 → 1.12.3

package/esm/Form/FieldSet.js

@@ -0,0 +1,240 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import createReactContext from '../context';
+import { Component } from '../component';
+import { filterProps } from '../utils/objects';
+import _validate from '../utils/validate';
+import { FormError, isSameError } from '../utils/errors';
+import { ERROR_TYPE, FORCE_PASS, IGNORE_VALIDATE } from '../Datum/types';
+import FieldError from './FieldError';
+
+var _createReactContext = createReactContext(undefined),
+    Provider = _createReactContext.Provider,
+    Consumer = _createReactContext.Consumer;
+
+function extendName(path, name) {
+  if (path === void 0) {
+    path = '';
+  }
+
+  if (name === undefined) return undefined;
+  if (name === '') return path;
+
+  if (Array.isArray(name)) {
+    return name.map(function (n) {
+      return extendName(path, n);
+    });
+  }
+
+  return "" + path + (path.length > 0 ? '.' : '') + name;
+}
+
+var FieldSet =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(FieldSet, _Component);
+
+  function FieldSet(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateTimer", void 0);
+
+    _this.validate = _this.validate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleUpdate = _this.handleUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = FieldSet.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _Component.prototype.componentDidMount.call(this);
+
+    var _this$props = this.props,
+        formDatum = _this$props.formDatum,
+        name = _this$props.name,
+        defaultValue = _this$props.defaultValue;
+    formDatum.bind(name, this.handleUpdate, defaultValue, this.validate);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _Component.prototype.componentWillUnmount.call(this);
+
+    var _this$props2 = this.props,
+        formDatum = _this$props2.formDatum,
+        name = _this$props2.name;
+    formDatum.unbind(name, this.handleUpdate);
+  };
+
+  _proto.validate = function validate() {
+    var _this2 = this;
+
+    var _this$props3 = this.props,
+        formDatum = _this$props3.formDatum,
+        name = _this$props3.name;
+    var value = formDatum.get(name);
+    var data = formDatum.getValue();
+    var validateProps = filterProps(this.props, function (v) {
+      return typeof v === 'string' || typeof v === 'number';
+    }); // @ts-ignore
+
+    validateProps.type = 'array';
+    var rules = [].concat(this.props.rules || []);
+    rules = rules.concat(formDatum.getRule(name));
+    if (rules.length === 0) return Promise.resolve(true);
+    return _validate(value, data, rules, validateProps).then(function () {
+      _this2.handleError();
+
+      return true;
+    }, function (e) {
+      _this2.handleError(e);
+
+      return new FormError(e);
+    });
+  };
+
+  _proto.updateWithValidate = function updateWithValidate() {
+    var _this3 = this;
+
+    this.validate().then(function () {
+      _this3.forceUpdate();
+    });
+  };
+
+  _proto.handleError = function handleError(error) {
+    var _this$props4 = this.props,
+        formDatum = _this$props4.formDatum,
+        name = _this$props4.name,
+        onError = _this$props4.onError;
+    if (isSameError(error, formDatum.getError(name, true))) return;
+    formDatum.setError(name, error, true);
+    if (onError) onError(error);
+  };
+
+  _proto.handleUpdate = function handleUpdate(_v, _n, type) {
+    var _this4 = this;
+
+    if (this.updateTimer) clearTimeout(this.updateTimer);
+    this.updateTimer = setTimeout(function () {
+      if (type === ERROR_TYPE || type === FORCE_PASS || type === IGNORE_VALIDATE) {
+        _this4.forceUpdate();
+      } else {
+        _this4.updateWithValidate();
+      }
+    });
+  };
+
+  _proto.handleInsert = function handleInsert(index, value) {
+    var _this$props5 = this.props,
+        formDatum = _this$props5.formDatum,
+        name = _this$props5.name;
+    formDatum.insert(name, index, value);
+    this.updateWithValidate();
+  };
+
+  _proto.handleRemove = function handleRemove(index) {
+    var _this$props6 = this.props,
+        formDatum = _this$props6.formDatum,
+        name = _this$props6.name;
+    formDatum.splice(name, index);
+    this.updateWithValidate();
+  };
+
+  _proto.handleChange = function handleChange(index, value, update) {
+    var _this$props7 = this.props,
+        formDatum = _this$props7.formDatum,
+        name = _this$props7.name;
+    formDatum.set(name + "[" + index + "]", value);
+    if (update) this.updateWithValidate();
+  };
+
+  _proto.render = function render() {
+    var _this5 = this;
+
+    var _this$props8 = this.props,
+        children = _this$props8.children,
+        formDatum = _this$props8.formDatum,
+        name = _this$props8.name,
+        empty = _this$props8.empty,
+        defaultValue = _this$props8.defaultValue;
+    var errors = formDatum.getError(name);
+    var result = [];
+
+    if (typeof children !== 'function') {
+      return React.createElement(Provider, {
+        value: {
+          path: name,
+          val: this.validate
+        }
+      }, children, errors instanceof Error && React.createElement(FieldError, {
+        key: "error",
+        error: errors
+      }));
+    }
+
+    var values = formDatum.get(name) || defaultValue || [];
+    if (values && !Array.isArray(values)) values = [values];
+
+    if (values.length === 0 && empty) {
+      result.push(empty(this.handleInsert.bind(this, 0)));
+    } else {
+      var errorList = (Array.isArray(errors) ? errors : [errors]).filter(Boolean);
+      values.forEach(function (v, i) {
+        result.push(React.createElement(Provider, {
+          key: i,
+          value: {
+            path: name + "[" + i + "]",
+            val: _this5.validate
+          }
+        }, children({
+          list: values,
+          value: v,
+          index: i,
+          error: errorList,
+          datum: formDatum,
+          onChange: _this5.handleChange.bind(_this5, i),
+          onInsert: _this5.handleInsert.bind(_this5, i),
+          onAppend: _this5.handleInsert.bind(_this5, i + 1),
+          onRemove: _this5.handleRemove.bind(_this5, i)
+        })));
+      });
+    }
+
+    if (errors instanceof Error) {
+      result.push(React.createElement(FieldError, {
+        key: "error",
+        error: errors
+      }));
+    }
+
+    return result;
+  };
+
+  return FieldSet;
+}(Component);
+
+_defineProperty(FieldSet, "defaultProps", {
+  rules: []
+});
+
+export var fieldSetConsumer = function fieldSetConsumer(Origin) {
+  return function (props) {
+    return React.createElement(Consumer, null, function (_temp) {
+      var _ref = _temp === void 0 ? {} : _temp,
+          path = _ref.path,
+          val = _ref.val;
+
+      return React.createElement(Origin, _extends({}, props, {
+        name: extendName(path, props.name),
+        innerFormNamePath: path,
+        fieldSetValidate: val
+      }));
+    });
+  };
+};
+export var FieldSetProvider = Provider;
+export default fieldSetConsumer(FieldSet);

package/esm/Form/Flow.d.ts

@@ -0,0 +1,10 @@
+import { Component } from '../component';
+import { FlowProps } from './Props';
+declare class Flow extends Component<FlowProps> {
+    update: () => void;
+    events: string[];
+    constructor(props: FlowProps);
+    componentWillUnmount(): void;
+    render(): {} | null | undefined;
+}
+export default Flow;

package/esm/Form/Flow.js

@@ -0,0 +1,66 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Component } from '../component';
+import { changeSubscribe, CHANGE_TOPIC } from '../Datum/types';
+import { isFunc } from '../utils/is';
+
+var Flow =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Flow, _Component);
+
+  function Flow(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "update", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "events", void 0);
+
+    _this.update = _this.forceUpdate.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.events = [];
+    var _this$props = _this.props,
+        names = _this$props.names,
+        formDatum = _this$props.formDatum;
+
+    if (names) {
+      names.forEach(function (n) {
+        var nc = changeSubscribe(n);
+        formDatum.subscribe(nc, _this.update);
+
+        _this.events.push(nc);
+      });
+    } else {
+      formDatum.subscribe(CHANGE_TOPIC, _this.update);
+
+      _this.events.push(CHANGE_TOPIC);
+    }
+
+    return _this;
+  }
+
+  var _proto = Flow.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _Component.prototype.componentWillUnmount.call(this);
+
+    var formDatum = this.props.formDatum;
+    this.events.forEach(function (n) {
+      return formDatum.unsubscribe(n);
+    });
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        formDatum = _this$props2.formDatum;
+    if (isFunc(children)) return children(formDatum) || null;
+    return children;
+  };
+
+  return Flow;
+}(Component);
+
+export default Flow;

package/esm/Form/Form.d.ts

@@ -0,0 +1,29 @@
+import { Component } from 'react';
+import { SimpleFormProps } from './Props';
+declare class Form<Value> extends Component<SimpleFormProps<Value>> {
+    static defaultProps: SimpleFormProps<any>;
+    locked: boolean;
+    id: string;
+    element: HTMLFormElement;
+    validating: boolean;
+    form: {
+        getValue: () => Value;
+        validate: () => Promise<unknown>;
+        validateFields: (fields: string[]) => Promise<unknown>;
+        validateFieldsWithError: (fields: string[]) => Promise<unknown>;
+        clearValidate: () => void;
+        submit: (withValidate: boolean) => void;
+        reset: () => void;
+    };
+    constructor(props: SimpleFormProps<Value>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: SimpleFormProps<Value>): void;
+    componentWillUnmount(): void;
+    setStatus(): void;
+    bindElement(el: HTMLFormElement): void;
+    scrollToError(err: Error): void;
+    handleSubmit(e?: Event): void;
+    handleReset(): void;
+    render(): JSX.Element;
+}
+export default Form;

package/esm/Form/Form.js

@@ -0,0 +1,229 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { getUidStr } from '../utils/uid';
+import { formClass } from './styles';
+import { FormError } from '../utils/errors';
+import { defaultProps } from '../utils/proptypes';
+import { docScroll } from '../utils/dom/document';
+import { IGNORE_BIND, SUBMIT_TOPIC } from '../Datum/types';
+import { FieldSetProvider } from './FieldSet';
+import { isRTL } from '../config';
+var emptyValue = {
+  path: ''
+};
+
+var DefaultProps = _objectSpread({}, defaultProps, {
+  scrollToError: false,
+  throttle: 1000
+});
+
+var Form =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Form, _Component);
+
+  function Form(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "locked", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "validating", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "form", void 0);
+
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleSubmit = _this.handleSubmit.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleReset = _this.handleReset.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.locked = false;
+    _this.id = "form_" + getUidStr();
+    _this.form = {
+      getValue: function getValue() {
+        return _this.props.datum.getValue();
+      },
+      validate: function validate() {
+        return _this.props.datum.validate();
+      },
+      validateFields: function validateFields(fields) {
+        return _this.props.datum.validateFields(fields).catch(function () {});
+      },
+      validateFieldsWithError: function validateFieldsWithError(fields) {
+        return _this.props.datum.validateFields(fields);
+      },
+      clearValidate: function clearValidate() {
+        _this.props.datum.validateClear();
+      },
+      submit: function submit(withValidate) {
+        if (withValidate === void 0) {
+          withValidate = true;
+        }
+
+        if (withValidate) _this.handleSubmit();else {
+          var activeEl = document.activeElement;
+          if (activeEl) activeEl.blur();
+          if (_this.props.onSubmit) _this.props.onSubmit(_this.props.datum.getValue());
+          if (activeEl) activeEl.focus();
+        }
+      },
+      reset: function reset() {
+        _this.handleReset();
+      }
+    };
+    return _this;
+  }
+
+  var _proto = Form.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var formRef = this.props.formRef;
+
+    if (formRef) {
+      if (typeof formRef === 'function') {
+        formRef(this.form);
+      } else {
+        formRef.current = this.form;
+      }
+    }
+
+    this.setStatus();
+
+    if (this.element) {
+      this.element.addEventListener('submit', this.handleSubmit);
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    this.setStatus();
+    if (prevProps.error !== this.props.error) this.props.datum.resetFormError(this.props.error);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.props.datum.formUnmount = true;
+
+    if (this.element) {
+      this.element.removeEventListener('submit', this.handleSubmit);
+    }
+  };
+
+  _proto.setStatus = function setStatus() {
+    var _this$props = this.props,
+        disabled = _this$props.disabled,
+        pending = _this$props.pending,
+        setFormStatus = _this$props.setFormStatus;
+    if (!setFormStatus) return;
+    var status = disabled === true ? 'disabled' : '';
+    if (pending === true) status = 'pending';
+    setFormStatus(status);
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.scrollToError = function scrollToError(err) {
+    var _this$props2 = this.props,
+        scrollToError = _this$props2.scrollToError,
+        onError = _this$props2.onError;
+
+    if (scrollToError !== false) {
+      var el = this.element.querySelector("." + formClass('invalid'));
+
+      if (el) {
+        el.scrollIntoView();
+        if (el.focus) el.focus();
+      }
+
+      if (typeof scrollToError === 'number' && scrollToError !== 0) {
+        docScroll.top -= scrollToError;
+      }
+    }
+
+    if (onError) onError(err);
+    if (!(err instanceof FormError)) throw err;
+  };
+
+  _proto.handleSubmit = function handleSubmit(e) {
+    var _this2 = this;
+
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (e && e.target.getAttribute('id') !== this.id) return;
+    if (this.validating || this.locked) return;
+    this.validating = true; // prevent duplicate submit
+
+    this.locked = true;
+    setTimeout(function () {
+      _this2.locked = false;
+    }, this.props.throttle);
+    var _this$props3 = this.props,
+        datum = _this$props3.datum,
+        onSubmit = _this$props3.onSubmit;
+    var activeEl = document.activeElement;
+    if (activeEl) activeEl.blur();
+    datum.dispatch(SUBMIT_TOPIC);
+    setTimeout(function () {
+      datum.validate(IGNORE_BIND).then(function () {
+        _this2.validating = false; // @ts-ignore
+
+        var detail = e && e.nativeEvent && e.nativeEvent.detail;
+        if (onSubmit) onSubmit(datum.getValue(), detail, e);
+        if (activeEl) activeEl.focus();
+      }).catch(function (err) {
+        _this2.validating = false; // wait for render complete
+
+        setTimeout(_this2.scrollToError.bind(_this2, err));
+      });
+    }, 10);
+  };
+
+  _proto.handleReset = function handleReset() {
+    var _this$props4 = this.props,
+        datum = _this$props4.datum,
+        onReset = _this$props4.onReset;
+    datum.reset();
+    if (onReset) onReset();
+  };
+
+  _proto.render = function render() {
+    var _this$props5 = this.props,
+        layout = _this$props5.layout,
+        style = _this$props5.style,
+        inline = _this$props5.inline,
+        disabled = _this$props5.disabled,
+        datum = _this$props5.datum,
+        rules = _this$props5.rules,
+        pending = _this$props5.pending;
+
+    if (datum && rules && datum.rules !== rules) {
+      datum.rules = rules;
+    }
+
+    var className = classnames(formClass('_', layout, (disabled || pending) && 'disabled', inline && 'inline', isRTL() && 'rtl'), this.props.className);
+    return React.createElement("form", {
+      ref: this.bindElement,
+      className: className,
+      id: this.id,
+      style: style,
+      onReset: this.handleReset
+    }, React.createElement(FieldSetProvider, {
+      value: emptyValue
+    }, this.props.children));
+  };
+
+  return Form;
+}(Component);
+
+_defineProperty(Form, "defaultProps", DefaultProps);
+
+export default Form;

package/esm/Form/Item.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import React, { ComponentType } from 'react';
+import { Component } from '../component';
+import { ObjectType } from '../@types/common';
+import { FormItemContextValue, GetFormItemConsumerProps, ItemProps } from './Props';
+interface ItemState {
+    inputs: ObjectType<Boolean>;
+    errors: ObjectType<Error>;
+}
+declare class Item extends Component<ItemProps, ItemState> {
+    static defaultProps: {
+        className: string;
+        style: {};
+        formItemErrors: never[];
+        keepErrorHeight: boolean;
+    };
+    events: FormItemContextValue;
+    updateTimer: NodeJS.Timeout;
+    constructor(props: ItemProps);
+    getErrors(): Error[];
+    handleUpdate(): void;
+    bind(name: string): void;
+    unbind(name: string): void;
+    handleError(name: string, error: Error): void;
+    renderHelp(errors: Error[]): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Item;
+export declare const itemConsumer: <U>(Origin: React.ComponentType<U>) => React.FC<GetFormItemConsumerProps<U>>;