@tiny-design/react 1.0.4

package/es/form/form-instance-context.js

@@ -0,0 +1,8 @@
+import FormInstance from "./form-instance.js";
+import React from "react";
+//#region src/form/form-instance-context.ts
+const FormInstanceContext = React.createContext(new FormInstance());
+//#endregion
+export { FormInstanceContext };
+
+//# sourceMappingURL=form-instance-context.js.map

package/es/form/form-instance-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-instance-context.js","names":[],"sources":["../../src/form/form-instance-context.ts"],"sourcesContent":["import React from 'react';\nimport FormInstance  from './form-instance';\n\nexport const FormInstanceContext = React.createContext<FormInstance>(new FormInstance());\n"],"mappings":";;;AAGA,MAAa,sBAAsB,MAAM,cAA4B,IAAI,cAAc,CAAC"}

package/es/form/form-instance.d.ts

@@ -0,0 +1,37 @@
+import { Rule } from "./types.js";
+
+//#region src/form/form-instance.d.ts
+type FormValues = {
+  [name: string]: any;
+};
+type FormErrors = {
+  [name: string]: string[];
+};
+type FormListener = (name: string) => void;
+/**
+ * The form state, including errors and rules of each form item
+ */
+declare class FormInstance {
+  private readonly initValues;
+  private values;
+  private rules;
+  private errors;
+  private listeners;
+  constructor(initValues?: FormValues);
+  getFieldValues(): FormValues;
+  getFieldValue(name: string): any;
+  setFieldValue(name: string, val: any): void;
+  setFieldValues(values?: FormValues): void;
+  getFieldErrors(): FormErrors;
+  getFieldError(name: string): string | undefined;
+  setFieldError(name: string, errors: string[]): void;
+  setFieldRules(name: string, rules: Rule[]): void;
+  resetFields(): void;
+  validateField(name: string): void;
+  validateFields(): void;
+  subscribe(listener: FormListener): () => void;
+  notify(name: string): void;
+}
+//#endregion
+export { FormErrors, FormInstance, FormValues };
+//# sourceMappingURL=form-instance.d.ts.map

package/es/form/form-instance.js

@@ -0,0 +1,75 @@
+import { deepCopy } from "../_utils/object.js";
+import { validate } from "./form-helper.js";
+//#region src/form/form-instance.ts
+/**
+* The form state, including errors and rules of each form item
+*/
+var FormInstance = class {
+	constructor(initValues = {}) {
+		this.rules = {};
+		this.errors = {};
+		this.listeners = [];
+		this.initValues = initValues;
+		this.values = deepCopy(initValues);
+	}
+	getFieldValues() {
+		return this.values;
+	}
+	getFieldValue(name) {
+		return this.values[name];
+	}
+	setFieldValue(name, val) {
+		this.values[name] = val;
+		this.notify(name);
+	}
+	setFieldValues(values = {}) {
+		Object.keys(values).forEach((name) => this.setFieldValue(name, values[name]));
+	}
+	getFieldErrors() {
+		return this.errors;
+	}
+	getFieldError(name) {
+		return this.errors[name] && this.errors[name].length > 0 ? this.errors[name][0] : void 0;
+	}
+	setFieldError(name, errors) {
+		this.errors[name] = errors;
+	}
+	setFieldRules(name, rules) {
+		this.rules[name] = rules;
+	}
+	resetFields() {
+		this.errors = {};
+		this.values = deepCopy(this.initValues);
+		this.notify("*");
+	}
+	validateField(name) {
+		const rules = this.rules[name];
+		const value = this.values[name];
+		if (rules) {
+			const errMessages = [];
+			rules.forEach((rule) => {
+				const res = validate(value, rule);
+				if (res !== void 0) errMessages.push(res);
+			});
+			this.setFieldError(name, errMessages);
+			this.notify(name);
+		}
+	}
+	validateFields() {
+		Object.keys(this.rules).forEach((name) => this.validateField(name));
+	}
+	subscribe(listener) {
+		this.listeners.push(listener);
+		return () => {
+			const idx = this.listeners.indexOf(listener);
+			idx > -1 && this.listeners.splice(idx, 1);
+		};
+	}
+	notify(name) {
+		this.listeners.forEach((listener) => listener(name));
+	}
+};
+//#endregion
+export { FormInstance as default };
+
+//# sourceMappingURL=form-instance.js.map

package/es/form/form-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-instance.js","names":[],"sources":["../../src/form/form-instance.ts"],"sourcesContent":["import { deepCopy } from '../_utils/object';\nimport { validate } from './form-helper';\nimport { Rule } from './types';\n\nexport type FormValues = { [name: string]: any };\nexport type FormErrors = { [name: string]: string[] };\ntype FormListener = (name: string) => void;\ntype FormRules = { [name: string]: Rule[] };\n\n/**\n * The form state, including errors and rules of each form item\n */\nexport default class FormInstance {\n  private readonly initValues: FormValues;\n  private values: FormValues;\n  private rules: FormRules = {};\n  private errors: FormErrors = {};\n  private listeners: FormListener[] = [];\n\n  constructor(initValues: FormValues = {}) {\n    this.initValues = initValues;\n    this.values = deepCopy(initValues);\n  }\n\n  getFieldValues(): FormValues {\n    return this.values;\n  }\n\n  getFieldValue(name: string): any {\n    return this.values[name];\n  }\n\n  setFieldValue(name: string, val: any): void {\n    this.values[name] = val;\n    this.notify(name);\n  }\n\n  setFieldValues(values: FormValues = {}): void {\n    Object.keys(values).forEach(name => this.setFieldValue(name, values[name]));\n  }\n\n  getFieldErrors(): FormErrors {\n    return this.errors;\n  }\n\n  getFieldError(name: string): string | undefined {\n    return this.errors[name] && this.errors[name].length > 0 ? this.errors[name][0] : undefined;\n  }\n\n  setFieldError(name: string, errors: string[]): void {\n    this.errors[name] = errors;\n  }\n\n  setFieldRules(name: string, rules: Rule[]): void {\n    this.rules[name] = rules;\n  }\n\n  resetFields(): void {\n    this.errors = {};\n    this.values = deepCopy(this.initValues);\n    this.notify('*');\n  }\n\n  validateField(name: string): void {\n    const rules = this.rules[name];\n    const value = this.values[name];\n    if (rules) {\n      const errMessages: string[] = [];\n      rules.forEach(rule => {\n        const res = validate(value, rule);\n        if (res !== undefined) {\n          errMessages.push(res);\n        }\n      });\n      this.setFieldError(name, errMessages);\n      this.notify(name);\n    }\n  }\n\n  validateFields(): void {\n    Object.keys(this.rules).forEach(name => this.validateField(name));\n  }\n\n  subscribe(listener: FormListener): () => void {\n    this.listeners.push(listener);\n\n    return (): void => {\n      const idx = this.listeners.indexOf(listener);\n      idx > -1 && this.listeners.splice(idx, 1);\n    };\n  }\n\n  notify(name: string): void {\n    this.listeners.forEach((listener) => listener(name));\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAqB,eAArB,MAAkC;CAOhC,YAAY,aAAyB,EAAE,EAAE;AAJzC,OAAQ,QAAmB,EAAE;AAC7B,OAAQ,SAAqB,EAAE;AAC/B,OAAQ,YAA4B,EAAE;AAGpC,OAAK,aAAa;AAClB,OAAK,SAAS,SAAS,WAAW;;CAGpC,iBAA6B;AAC3B,SAAO,KAAK;;CAGd,cAAc,MAAmB;AAC/B,SAAO,KAAK,OAAO;;CAGrB,cAAc,MAAc,KAAgB;AAC1C,OAAK,OAAO,QAAQ;AACpB,OAAK,OAAO,KAAK;;CAGnB,eAAe,SAAqB,EAAE,EAAQ;AAC5C,SAAO,KAAK,OAAO,CAAC,SAAQ,SAAQ,KAAK,cAAc,MAAM,OAAO,MAAM,CAAC;;CAG7E,iBAA6B;AAC3B,SAAO,KAAK;;CAGd,cAAc,MAAkC;AAC9C,SAAO,KAAK,OAAO,SAAS,KAAK,OAAO,MAAM,SAAS,IAAI,KAAK,OAAO,MAAM,KAAK,KAAA;;CAGpF,cAAc,MAAc,QAAwB;AAClD,OAAK,OAAO,QAAQ;;CAGtB,cAAc,MAAc,OAAqB;AAC/C,OAAK,MAAM,QAAQ;;CAGrB,cAAoB;AAClB,OAAK,SAAS,EAAE;AAChB,OAAK,SAAS,SAAS,KAAK,WAAW;AACvC,OAAK,OAAO,IAAI;;CAGlB,cAAc,MAAoB;EAChC,MAAM,QAAQ,KAAK,MAAM;EACzB,MAAM,QAAQ,KAAK,OAAO;AAC1B,MAAI,OAAO;GACT,MAAM,cAAwB,EAAE;AAChC,SAAM,SAAQ,SAAQ;IACpB,MAAM,MAAM,SAAS,OAAO,KAAK;AACjC,QAAI,QAAQ,KAAA,EACV,aAAY,KAAK,IAAI;KAEvB;AACF,QAAK,cAAc,MAAM,YAAY;AACrC,QAAK,OAAO,KAAK;;;CAIrB,iBAAuB;AACrB,SAAO,KAAK,KAAK,MAAM,CAAC,SAAQ,SAAQ,KAAK,cAAc,KAAK,CAAC;;CAGnE,UAAU,UAAoC;AAC5C,OAAK,UAAU,KAAK,SAAS;AAE7B,eAAmB;GACjB,MAAM,MAAM,KAAK,UAAU,QAAQ,SAAS;AAC5C,SAAM,MAAM,KAAK,UAAU,OAAO,KAAK,EAAE;;;CAI7C,OAAO,MAAoB;AACzB,OAAK,UAAU,SAAS,aAAa,SAAS,KAAK,CAAC"}

package/es/form/form-item.d.ts

@@ -0,0 +1,10 @@
+import { FormItemProps } from "./types.js";
+
+//#region src/form/form-item.d.ts
+declare const FormItem: {
+  (props: FormItemProps): JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { FormItem };
+//# sourceMappingURL=form-item.d.ts.map

package/es/form/form-item.js

@@ -0,0 +1,136 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import transition_default from "../transition/index.js";
+import Col from "../grid/col.js";
+import { getPropName, getValueFromEvent } from "./form-helper.js";
+import { FormInstanceContext } from "./form-instance-context.js";
+import { FormOptionsContext } from "./form-options-context.js";
+import Row from "../grid/row.js";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/form-item.tsx
+const FormItem = (props) => {
+	const { colon = true, valueGetter = getValueFromEvent, valuePropName = "value", name, label, helper, notice, rules, className, style, children, labelCol: itemLabelCol, wrapperCol: itemWrapperCol, prefixCls: customisedCls } = props;
+	const prefixCls = getPrefixCls("form-item", useContext(ConfigContext).prefixCls, customisedCls);
+	const form = React.useContext(FormInstanceContext);
+	const { wrapperCol, labelCol, validateTrigger, layout } = React.useContext(FormOptionsContext);
+	const [value, setValue] = useState(name ? form.getFieldValue(name) : void 0);
+	const [error, setError] = useState(name ? form.getFieldError(name) : void 0);
+	const [hasErrLabel, setHasErrLabel] = useState(false);
+	const errorRef = useRef(null);
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_has-error`]: !!error,
+		[`${prefixCls}_with-err-label`]: hasErrLabel
+	});
+	const isRequired = "required" in props ? props.required : rules && rules.some((rule) => rule.required) || false;
+	const onChange = useCallback((...args) => {
+		if (name) {
+			form.setFieldValue(name, valueGetter(...args));
+			validateTrigger === "onChange" && form.validateField(name);
+		}
+	}, [
+		name,
+		form,
+		valueGetter,
+		validateTrigger
+	]);
+	const onBlur = useCallback(() => {
+		name && validateTrigger === "onBlur" && form.validateField(name);
+	}, [
+		name,
+		form,
+		validateTrigger
+	]);
+	let child = children;
+	const childProps = {
+		[getPropName(valuePropName, child && child.type)]: value,
+		onChange,
+		onBlur
+	};
+	child = React.cloneElement(child, childProps);
+	const labelCls = classNames({
+		[`${prefixCls}__label_required`]: label && isRequired,
+		[`${prefixCls}__label_colon`]: label && colon
+	});
+	const getSpanAndOffset = (col) => {
+		if (typeof col === "number") return [col, 0];
+		else return [col.span, col.offset];
+	};
+	const getCol = (col, isSelf) => {
+		if (isSelf) return getSpanAndOffset(col);
+		if (layout === "vertical") return [24, 0];
+		else return getSpanAndOffset(col);
+	};
+	const [labelSpan, labelOffset] = itemLabelCol ? getCol(itemLabelCol, true) : getCol(labelCol);
+	const [wrapperSpan, wrapperOffset] = itemWrapperCol ? getCol(itemWrapperCol, true) : getCol(wrapperCol);
+	useEffect(() => {
+		if (!name) return;
+		rules && form.setFieldRules(name, rules);
+		return form.subscribe((n) => {
+			if (name === "*" || n === name || n === "*") {
+				setValue(form.getFieldValue(name));
+				setError(form.getFieldError(name));
+			}
+		});
+	}, [
+		form,
+		name,
+		rules
+	]);
+	useEffect(() => {
+		if (error) setHasErrLabel(true);
+	}, [error]);
+	return /* @__PURE__ */ jsxs(Row, {
+		className: cls,
+		style,
+		children: [/* @__PURE__ */ jsx(Col, {
+			span: labelSpan,
+			offset: labelOffset,
+			className: `${prefixCls}__label`,
+			children: /* @__PURE__ */ jsx("label", {
+				htmlFor: name,
+				title: typeof label === "string" ? label : void 0,
+				className: labelCls,
+				children: label
+			})
+		}), /* @__PURE__ */ jsxs(Col, {
+			span: wrapperSpan,
+			offset: wrapperOffset,
+			className: `${prefixCls}__controls`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__input`,
+					children: /* @__PURE__ */ jsx("div", {
+						className: `${prefixCls}__input-content`,
+						children: child
+					})
+				}),
+				notice && /* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__notice`,
+					children: notice
+				}),
+				helper && /* @__PURE__ */ jsx("div", {
+					className: `${prefixCls}__helper`,
+					children: helper
+				}),
+				/* @__PURE__ */ jsx(transition_default, {
+					in: !!error,
+					nodeRef: errorRef,
+					animation: "slide-down",
+					onExited: () => setHasErrLabel(false),
+					children: /* @__PURE__ */ jsx("div", {
+						ref: errorRef,
+						className: `${prefixCls}__error`,
+						children: error
+					})
+				})
+			]
+		})]
+	});
+};
+FormItem.displayName = "FormItem";
+//#endregion
+export { FormItem as default };
+
+//# sourceMappingURL=form-item.js.map

package/es/form/form-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-item.js","names":["Transition"],"sources":["../../src/form/form-item.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FormInstanceContext } from './form-instance-context';\nimport { FormOptionsContext } from './form-options-context';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { FormItemProps } from './types';\nimport { getPropName, getValueFromEvent } from './form-helper';\nimport Row from '../grid/row';\nimport Col from '../grid/col';\nimport Transition from '../transition';\n\nconst FormItem = (props: FormItemProps): JSX.Element => {\n  const {\n    colon = true,\n    valueGetter = getValueFromEvent,\n    valuePropName = 'value',\n    name,\n    label,\n    helper,\n    notice,\n    rules,\n    className,\n    style,\n    children,\n    labelCol: itemLabelCol,\n    wrapperCol: itemWrapperCol,\n    prefixCls: customisedCls,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('form-item', configContext.prefixCls, customisedCls);\n  const form = React.useContext(FormInstanceContext);\n  const { wrapperCol, labelCol, validateTrigger, layout } = React.useContext(FormOptionsContext);\n  const [value, setValue] = useState(name ? form.getFieldValue(name) : undefined);\n  const [error, setError] = useState<string | undefined>(\n    name ? form.getFieldError(name) : undefined\n  );\n  const [hasErrLabel, setHasErrLabel] = useState(false);\n  const errorRef = useRef<HTMLDivElement>(null);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_has-error`]: !!error,\n    [`${prefixCls}_with-err-label`]: hasErrLabel,\n  });\n  const isRequired =\n    'required' in props ? props.required : (rules && rules.some((rule) => rule.required)) || false;\n\n  // get onChange event from all components which support onChange callback\n  const onChange = useCallback(\n    (...args: any[]) => {\n      if (name) {\n        form.setFieldValue(name, valueGetter(...args));\n        validateTrigger === 'onChange' && form.validateField(name);\n      }\n    },\n    [name, form, valueGetter, validateTrigger]\n  );\n\n  // get onBlur event from input\n  const onBlur = useCallback(() => {\n    name && validateTrigger === 'onBlur' && form.validateField(name);\n  }, [name, form, validateTrigger]);\n\n  let child: any = children;\n  const prop = getPropName(valuePropName, child && child.type);\n  const childProps = { [prop]: value, onChange, onBlur };\n  child = React.cloneElement(child, childProps);\n\n  const labelCls = classNames({\n    [`${prefixCls}__label_required`]: label && isRequired,\n    [`${prefixCls}__label_colon`]: label && colon,\n  });\n\n  const getSpanAndOffset = (col: number | { span: number; offset: number }): [number, number] => {\n    if (typeof col === 'number') {\n      return [col, 0];\n    } else {\n      return [col.span, col.offset];\n    }\n  };\n\n  const getCol = (\n    col: number | { span: number; offset: number },\n    isSelf?: boolean\n  ): [number, number] => {\n    if (isSelf) {\n      return getSpanAndOffset(col);\n    }\n\n    if (layout === 'vertical') {\n      return [24, 0];\n    } else {\n      return getSpanAndOffset(col);\n    }\n  };\n\n  const [labelSpan, labelOffset] = itemLabelCol ? getCol(itemLabelCol, true) : getCol(labelCol);\n  const [wrapperSpan, wrapperOffset] = itemWrapperCol\n    ? getCol(itemWrapperCol, true)\n    : getCol(wrapperCol);\n\n  useEffect(() => {\n    if (!name) {\n      return;\n    }\n\n    rules && form.setFieldRules(name, rules);\n\n    return form.subscribe((n) => {\n      if (name === '*' || n === name || n === '*') {\n        setValue(form.getFieldValue(name));\n        setError(form.getFieldError(name));\n      }\n    });\n  }, [form, name, rules]);\n\n  useEffect(() => {\n    if (error) {\n      setHasErrLabel(true);\n    }\n  }, [error]);\n\n  return (\n    <Row className={cls} style={style}>\n      <Col span={labelSpan} offset={labelOffset} className={`${prefixCls}__label`}>\n        <label\n          htmlFor={name}\n          title={typeof label === 'string' ? label : undefined}\n          className={labelCls}>\n          {label}\n        </label>\n      </Col>\n      <Col span={wrapperSpan} offset={wrapperOffset} className={`${prefixCls}__controls`}>\n        <div className={`${prefixCls}__input`}>\n          <div className={`${prefixCls}__input-content`}>{child}</div>\n        </div>\n        {notice && <div className={`${prefixCls}__notice`}>{notice}</div>}\n        {helper && <div className={`${prefixCls}__helper`}>{helper}</div>}\n        <Transition in={!!error} nodeRef={errorRef} animation=\"slide-down\" onExited={() => setHasErrLabel(false)}>\n          <div ref={errorRef} className={`${prefixCls}__error`}>{error}</div>\n        </Transition>\n      </Col>\n    </Row>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

package/es/form/form-options-context.js

@@ -0,0 +1,12 @@
+import React from "react";
+//#region src/form/form-options-context.ts
+const FormOptionsContext = React.createContext({
+	labelCol: 8,
+	wrapperCol: 16,
+	validateTrigger: "onChange",
+	layout: "horizontal"
+});
+//#endregion
+export { FormOptionsContext };
+
+//# sourceMappingURL=form-options-context.js.map

package/es/form/form-options-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-options-context.js","names":[],"sources":["../../src/form/form-options-context.ts"],"sourcesContent":["import React from 'react';\nimport { FormOptionsProps } from './types';\n\nexport const FormOptionsContext = React.createContext<FormOptionsProps>({\n  labelCol: 8,\n  wrapperCol: 16,\n  validateTrigger: 'onChange',\n  layout: 'horizontal',\n});\n"],"mappings":";;AAGA,MAAa,qBAAqB,MAAM,cAAgC;CACtE,UAAU;CACV,YAAY;CACZ,iBAAiB;CACjB,QAAQ;CACT,CAAC"}

package/es/form/form.d.ts

@@ -0,0 +1,10 @@
+import { FormProps } from "./types.js";
+
+//#region src/form/form.d.ts
+declare const Form: {
+  (props: FormProps): JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Form };
+//# sourceMappingURL=form.d.ts.map

package/es/form/form.js

@@ -0,0 +1,59 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import FormInstance from "./form-instance.js";
+import { FormInstanceContext } from "./form-instance-context.js";
+import { FormOptionsContext } from "./form-options-context.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/form.tsx
+const Form = (props) => {
+	const { initialValues = {}, labelCol = {
+		span: 8,
+		offset: 0
+	}, wrapperCol = {
+		span: 16,
+		offset: 0
+	}, validateTrigger = "onChange", layout = "horizontal", form, onFinish, onFinishFailed, className, children, prefixCls: customisedCls, ...otherProps } = props;
+	const prefixCls = getPrefixCls("form", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, `${prefixCls}_${layout}`);
+	const formRef = React.useRef(form ? form : new FormInstance(initialValues));
+	const formOnSubmit = (e) => {
+		e.preventDefault();
+		const formIns = formRef.current;
+		formIns.validateFields();
+		const values = formIns.getFieldValues();
+		const errors = formIns.getFieldErrors();
+		if (Object.keys(errors).some((key) => errors[key].length > 0)) onFinishFailed && onFinishFailed({
+			values,
+			errors
+		});
+		else onFinish && onFinish(values);
+	};
+	const formOnReset = () => {
+		formRef.current.resetFields();
+	};
+	return /* @__PURE__ */ jsx(FormInstanceContext.Provider, {
+		value: formRef.current,
+		children: /* @__PURE__ */ jsx(FormOptionsContext.Provider, {
+			value: {
+				labelCol,
+				wrapperCol,
+				validateTrigger,
+				layout
+			},
+			children: /* @__PURE__ */ jsx("form", {
+				...otherProps,
+				className: cls,
+				onSubmit: formOnSubmit,
+				onReset: formOnReset,
+				children
+			})
+		})
+	});
+};
+Form.displayName = "Form";
+//#endregion
+export { Form as default };
+
+//# sourceMappingURL=form.js.map

package/es/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../../src/form/form.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { FormInstanceContext } from './form-instance-context';\nimport { FormOptionsContext } from './form-options-context';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { FormProps } from './types';\nimport FormInstance from './form-instance';\n\nconst Form = (props: FormProps): JSX.Element => {\n  const {\n    initialValues = {},\n    labelCol = { span: 8, offset: 0 },\n    wrapperCol = { span: 16, offset: 0 },\n    validateTrigger = 'onChange',\n    layout = 'horizontal',\n    form,\n    onFinish,\n    onFinishFailed,\n    className,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('form', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, `${prefixCls}_${layout}`);\n  // If you want to control the form outside, namely get the form instance, just pass a form store.\n  // Otherwise, the form component will manage the state internally.\n  const formRef = React.useRef(form ? form : new FormInstance(initialValues));\n\n  const formOnSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    const formIns = formRef.current;\n    formIns.validateFields();\n    const values = formIns.getFieldValues();\n    const errors = formIns.getFieldErrors();\n    if (Object.keys(errors).some((key) => errors[key].length > 0)) {\n      onFinishFailed && onFinishFailed({ values, errors });\n    } else {\n      onFinish && onFinish(values);\n    }\n  };\n\n  const formOnReset = () => {\n    formRef.current.resetFields();\n  };\n\n  return (\n    <FormInstanceContext.Provider value={formRef.current}>\n      <FormOptionsContext.Provider value={{ labelCol, wrapperCol, validateTrigger, layout }}>\n        <form {...otherProps} className={cls} onSubmit={formOnSubmit} onReset={formOnReset}>\n          {children}\n        </form>\n      </FormOptionsContext.Provider>\n    </FormInstanceContext.Provider>\n  );\n};\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;AASA,MAAM,QAAQ,UAAkC;CAC9C,MAAM,EACJ,gBAAgB,EAAE,EAClB,WAAW;EAAE,MAAM;EAAG,QAAQ;EAAG,EACjC,aAAa;EAAE,MAAM;EAAI,QAAQ;EAAG,EACpC,kBAAkB,YAClB,SAAS,cACT,MACA,UACA,gBACA,WACA,UACA,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,QADT,WAAW,cAAc,CACM,WAAW,cAAc;CAC9E,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,UAAU,GAAG,SAAS;CAGtE,MAAM,UAAU,MAAM,OAAO,OAAO,OAAO,IAAI,aAAa,cAAc,CAAC;CAE3E,MAAM,gBAAgB,MAAuB;AAC3C,IAAE,gBAAgB;EAClB,MAAM,UAAU,QAAQ;AACxB,UAAQ,gBAAgB;EACxB,MAAM,SAAS,QAAQ,gBAAgB;EACvC,MAAM,SAAS,QAAQ,gBAAgB;AACvC,MAAI,OAAO,KAAK,OAAO,CAAC,MAAM,QAAQ,OAAO,KAAK,SAAS,EAAE,CAC3D,mBAAkB,eAAe;GAAE;GAAQ;GAAQ,CAAC;MAEpD,aAAY,SAAS,OAAO;;CAIhC,MAAM,oBAAoB;AACxB,UAAQ,QAAQ,aAAa;;AAG/B,QACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO,QAAQ;YAC3C,oBAAC,mBAAmB,UAApB;GAA6B,OAAO;IAAE;IAAU;IAAY;IAAiB;IAAQ;aACnF,oBAAC,QAAD;IAAM,GAAI;IAAY,WAAW;IAAK,UAAU;IAAc,SAAS;IACpE;IACI,CAAA;GACqB,CAAA;EACD,CAAA;;AAInC,KAAK,cAAc"}

package/es/form/index.d.ts

@@ -0,0 +1,15 @@
+import { FormInstance } from "./form-instance.js";
+import { Form } from "./form.js";
+import { FormItem } from "./form-item.js";
+import { useForm } from "./use-form.js";
+
+//#region src/form/index.d.ts
+type IForm = typeof Form & {
+  Item: typeof FormItem;
+  useForm: typeof useForm;
+  FormInstance: typeof FormInstance;
+};
+declare const DefaultForm: IForm;
+//#endregion
+export { DefaultForm };
+//# sourceMappingURL=index.d.ts.map

package/es/form/index.js

@@ -0,0 +1,16 @@
+import '../style/base.css';
+import './style/index.css';
+import '../transition/style/index.css';
+import FormInstance from "./form-instance.js";
+import Form from "./form.js";
+import FormItem from "./form-item.js";
+import useForm from "./use-form.js";
+//#region src/form/index.tsx
+const DefaultForm = Form;
+DefaultForm.Item = FormItem;
+DefaultForm.useForm = useForm;
+DefaultForm.FormInstance = FormInstance;
+//#endregion
+export { DefaultForm as default };
+
+//# sourceMappingURL=index.js.map

package/es/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/form/index.tsx"],"sourcesContent":["import Form from './form';\nimport FormItem from './form-item';\nimport useForm from './use-form';\nimport FormInstance from './form-instance';\n\ntype IForm = typeof Form & {\n  Item: typeof FormItem;\n  useForm: typeof useForm;\n  FormInstance: typeof FormInstance;\n};\n\nconst DefaultForm = Form as IForm;\nDefaultForm.Item = FormItem;\nDefaultForm.useForm = useForm;\nDefaultForm.FormInstance = FormInstance;\n\nexport default DefaultForm;\n"],"mappings":";;;;;AAWA,MAAM,cAAc;AACpB,YAAY,OAAO;AACnB,YAAY,UAAU;AACtB,YAAY,eAAe"}

package/es/form/style/_index.scss

@@ -0,0 +1,93 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-form {
+
+  &_vertical {
+    .#{$prefix}-form-item__label {
+      text-align: left;
+    }
+  }
+
+  &_inline {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.#{$prefix}-form-item {
+  margin-bottom: 22px;
+  vertical-align: top;
+
+  &__label {
+    line-height: 30px;
+    text-align: right;
+    vertical-align: top;
+    color: var(--ty-color-text);
+    font-size: $font-size-base;
+
+    &_required:before {
+      content: '*';
+      margin-right: 3px;
+      color: var(--ty-form-error-color);
+    }
+
+    &_colon:after {
+      content: ':';
+      margin: 0 8px 0 2px;
+    }
+  }
+
+  &__input {
+    position: relative;
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__input-content {
+    flex: auto;
+    max-width: 100%;
+  }
+
+  &__error {
+    min-height: 22px;
+    line-height: 22px;
+    font-size: 13px;
+    color: var(--ty-form-error-color);
+  }
+
+  &__helper {
+    min-height: 22px;
+    line-height: 22px;
+    font-size: 13px;
+    color: var(--ty-color-text-tertiary);
+  }
+
+  &__notice {
+    font-size: 13px;
+    border-radius: $border-radius;
+    background: var(--ty-form-notice-bg);
+    color: var(--ty-form-notice-color);
+    padding: 5px;
+    margin-top: 5px;
+  }
+
+  &_with-err-label {
+    margin-bottom: 0;
+  }
+
+  &_has-error {
+    .#{$prefix}-input__input, .#{$prefix}-input-number__input, .#{$prefix}-textarea {
+      border-color: var(--ty-form-error-color);
+
+      &:not([disabled]):hover{
+        border-color: var(--ty-form-error-color);
+      }
+
+      &:focus{
+        border-color: var(--ty-form-error-hover);
+        box-shadow: 0 0 0 2px rgba(255,77,79,.2);
+      }
+    }
+  }
+}

package/es/form/style/index.css

@@ -0,0 +1,71 @@
+.ty-form_vertical .ty-form-item__label {
+  text-align: left;
+}
+.ty-form_inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.ty-form-item {
+  margin-bottom: 22px;
+  vertical-align: top;
+}
+.ty-form-item__label {
+  line-height: 30px;
+  text-align: right;
+  vertical-align: top;
+  color: var(--ty-color-text);
+  font-size: 1rem;
+}
+.ty-form-item__label_required:before {
+  content: "*";
+  margin-right: 3px;
+  color: var(--ty-form-error-color);
+}
+.ty-form-item__label_colon:after {
+  content: ":";
+  margin: 0 8px 0 2px;
+}
+.ty-form-item__input {
+  position: relative;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+.ty-form-item__input-content {
+  flex: auto;
+  max-width: 100%;
+}
+.ty-form-item__error {
+  min-height: 22px;
+  line-height: 22px;
+  font-size: 13px;
+  color: var(--ty-form-error-color);
+}
+.ty-form-item__helper {
+  min-height: 22px;
+  line-height: 22px;
+  font-size: 13px;
+  color: var(--ty-color-text-tertiary);
+}
+.ty-form-item__notice {
+  font-size: 13px;
+  border-radius: 2px;
+  background: var(--ty-form-notice-bg);
+  color: var(--ty-form-notice-color);
+  padding: 5px;
+  margin-top: 5px;
+}
+.ty-form-item_with-err-label {
+  margin-bottom: 0;
+}
+.ty-form-item_has-error .ty-input__input, .ty-form-item_has-error .ty-input-number__input, .ty-form-item_has-error .ty-textarea {
+  border-color: var(--ty-form-error-color);
+}
+.ty-form-item_has-error .ty-input__input:not([disabled]):hover, .ty-form-item_has-error .ty-input-number__input:not([disabled]):hover, .ty-form-item_has-error .ty-textarea:not([disabled]):hover {
+  border-color: var(--ty-form-error-color);
+}
+.ty-form-item_has-error .ty-input__input:focus, .ty-form-item_has-error .ty-input-number__input:focus, .ty-form-item_has-error .ty-textarea:focus {
+  border-color: var(--ty-form-error-hover);
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+}

package/es/form/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/form/style/index.js

@@ -0,0 +1,2 @@
+import "./index.css";
+import "../../transition/style/index.css";