diff --git a/antdv-demo b/antdv-demo index 3d86639b4..c5aec8ace 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 3d86639b4e7361c08ddf3bb56c77e854eecf94e0 +Subproject commit c5aec8ace772ab39828c9e9e20735509d943a071 diff --git a/components/form-old/Form.jsx b/components/form-old/Form.jsx deleted file mode 100755 index 22dd38637..000000000 --- a/components/form-old/Form.jsx +++ /dev/null @@ -1,287 +0,0 @@ -import PropTypes from '../_util/vue-types'; -import classNames from 'classnames'; -import { ColProps } from '../grid/Col'; -import Vue from 'vue'; -import isRegExp from 'lodash/isRegExp'; -import warning from '../_util/warning'; -import createDOMForm from '../vc-form/src/createDOMForm'; -import createFormField from '../vc-form/src/createFormField'; -import FormItem from './FormItem'; -import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants'; -import { initDefaultProps, getListeners } from '../_util/props-util'; -import { ConfigConsumerProps } from '../config-provider'; - -export const FormCreateOption = { - onFieldsChange: PropTypes.func, - onValuesChange: PropTypes.func, - mapPropsToFields: PropTypes.func, - validateMessages: PropTypes.any, - withRef: PropTypes.bool, - name: PropTypes.string, -}; - -// function create -export const WrappedFormUtils = { - /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */ - getFieldsValue: PropTypes.func, - /** 获取一个输入控件的值*/ - getFieldValue: PropTypes.func, - /** 设置一组输入控件的值*/ - setFieldsValue: PropTypes.func, - /** 设置一组输入控件的值*/ - setFields: PropTypes.func, - /** 校验并获取一组输入域的值与 Error */ - validateFields: PropTypes.func, - // validateFields(fieldNames: Array, options: Object, callback: ValidateCallback): void; - // validateFields(fieldNames: Array, callback: ValidateCallback): void; - // validateFields(options: Object, callback: ValidateCallback): void; - // validateFields(callback: ValidateCallback): void; - // validateFields(): void; - /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */ - validateFieldsAndScroll: PropTypes.func, - // validateFieldsAndScroll(fieldNames?: Array, options?: Object, callback?: ValidateCallback): void; - // validateFieldsAndScroll(fieldNames?: Array, callback?: ValidateCallback): void; - // validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void; - // validateFieldsAndScroll(callback?: ValidateCallback): void; - // validateFieldsAndScroll(): void; - /** 获取某个输入控件的 Error */ - getFieldError: PropTypes.func, - getFieldsError: PropTypes.func, - /** 判断一个输入控件是否在校验状态*/ - isFieldValidating: PropTypes.func, - isFieldTouched: PropTypes.func, - isFieldsTouched: PropTypes.func, - /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */ - resetFields: PropTypes.func, - - getFieldDecorator: PropTypes.func, -}; - -export const FormProps = { - layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']), - labelCol: PropTypes.shape(ColProps).loose, - wrapperCol: PropTypes.shape(ColProps).loose, - colon: PropTypes.bool, - labelAlign: PropTypes.oneOf(['left', 'right']), - form: PropTypes.object, - // onSubmit: React.FormEventHandler; - prefixCls: PropTypes.string, - hideRequiredMark: PropTypes.bool, - autoFormCreate: PropTypes.func, - options: PropTypes.object, - selfUpdate: PropTypes.bool, -}; - -export const ValidationRule = { - /** validation error message */ - message: PropTypes.string, - /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */ - type: PropTypes.string, - /** indicates whether field is required */ - required: PropTypes.boolean, - /** treat required fields that only contain whitespace as errors */ - whitespace: PropTypes.boolean, - /** validate the exact length of a field */ - len: PropTypes.number, - /** validate the min length of a field */ - min: PropTypes.number, - /** validate the max length of a field */ - max: PropTypes.number, - /** validate the value from a list of possible values */ - enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]), - /** validate from a regular expression */ - pattern: PropTypes.custom(isRegExp), - /** transform a value before validation */ - transform: PropTypes.func, - /** custom validate function (Note: callback must be called) */ - validator: PropTypes.func, -}; - -// export type ValidateCallback = (errors: any, values: any) => void; - -// export type GetFieldDecoratorOptions = { -// /** 子节点的值的属性，如 Checkbox 的是 'checked' */ -// valuePropName?: string; -// /** 子节点的初始值，类型、可选值均由子节点决定 */ -// initialValue?: any; -// /** 收集子节点的值的时机 */ -// trigger?: string; -// /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */ -// getValueFromEvent?: (...args: any[]) => any; -// /** Get the component props according to field value. */ -// getValueProps?: (value: any) => any; -// /** 校验子节点值的时机 */ -// validateTrigger?: string | string[]; -// /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */ -// rules?: ValidationRule[]; -// /** 是否和其他控件互斥，特别用于 Radio 单选控件 */ -// exclusive?: boolean; -// /** Normalize value to form component */ -// normalize?: (value: any, prevValue: any, allValues: any) => any; -// /** Whether stop validate on first rule of error for this field. */ -// validateFirst?: boolean; -// /** 是否一直保留子节点的信息 */ -// preserve?: boolean; -// }; - -const Form = { - name: 'AForm', - props: initDefaultProps(FormProps, { - layout: 'horizontal', - hideRequiredMark: false, - colon: true, - }), - Item: FormItem, - createFormField, - create: (options = {}) => { - return createDOMForm({ - fieldNameProp: 'id', - ...options, - fieldMetaProp: FIELD_META_PROP, - fieldDataProp: FIELD_DATA_PROP, - }); - }, - createForm(context, options = {}) { - const V = Vue; - return new V(Form.create({ ...options, templateContext: context })()); - }, - created() { - this.formItemContexts = new Map(); - }, - provide() { - return { - FormContext: this, - // https://github.com/vueComponent/ant-design-vue/issues/446 - collectFormItemContext: - this.form && this.form.templateContext - ? (c, type = 'add') => { - const formItemContexts = this.formItemContexts; - const number = formItemContexts.get(c) || 0; - if (type === 'delete') { - if (number <= 1) { - formItemContexts.delete(c); - } else { - formItemContexts.set(c, number - 1); - } - } else { - if (c !== this.form.templateContext) { - formItemContexts.set(c, number + 1); - } - } - } - : () => {}, - }; - }, - inject: { - configProvider: { default: () => ConfigConsumerProps }, - }, - watch: { - form() { - this.$forceUpdate(); - }, - }, - computed: { - vertical() { - return this.layout === 'vertical'; - }, - }, - beforeUpdate() { - this.formItemContexts.forEach((number, c) => { - if (c.$forceUpdate) { - c.$forceUpdate(); - } - }); - }, - updated() { - if (this.form && this.form.cleanUpUselessFields) { - this.form.cleanUpUselessFields(); - } - }, - methods: { - onSubmit(e) { - if (!getListeners(this).submit) { - e.preventDefault(); - } else { - this.$emit('submit', e); - } - }, - }, - - render() { - const { - prefixCls: customizePrefixCls, - hideRequiredMark, - layout, - onSubmit, - $slots, - autoFormCreate, - options = {}, - } = this; - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('form', customizePrefixCls); - - const formClassName = classNames(prefixCls, { - [`${prefixCls}-horizontal`]: layout === 'horizontal', - [`${prefixCls}-vertical`]: layout === 'vertical', - [`${prefixCls}-inline`]: layout === 'inline', - [`${prefixCls}-hide-required-mark`]: hideRequiredMark, - }); - if (autoFormCreate) { - warning(false, 'Form', '`autoFormCreate` is deprecated. please use `form` instead.'); - const DomForm = - this.DomForm || - createDOMForm({ - fieldNameProp: 'id', - ...options, - fieldMetaProp: FIELD_META_PROP, - fieldDataProp: FIELD_DATA_PROP, - templateContext: this.$vnode.context, - })({ - provide() { - return { - decoratorFormProps: this.$props, - }; - }, - data() { - return { - children: $slots.default, - formClassName, - submit: onSubmit, - }; - }, - created() { - autoFormCreate(this.form); - }, - render() { - const { children, formClassName, submit } = this; - return ( -
- {children} -
- ); - }, - }); - if (this.domForm) { - this.domForm.children = $slots.default; - this.domForm.submit = onSubmit; - this.domForm.formClassName = formClassName; - } - this.DomForm = DomForm; - - return ( - { - this.domForm = inst; - }} - /> - ); - } - return ( -
- {$slots.default} -
- ); - }, -}; - -export default Form; diff --git a/components/form-old/FormItem.jsx b/components/form-old/FormItem.jsx deleted file mode 100644 index 64744fb08..000000000 --- a/components/form-old/FormItem.jsx +++ /dev/null @@ -1,520 +0,0 @@ -import { provide, inject, Transition } from 'vue'; -import PropTypes from '../_util/vue-types'; -import classNames from 'classnames'; -import find from 'lodash/find'; -import Row from '../grid/Row'; -import Col, { ColProps } from '../grid/Col'; -import warning from '../_util/warning'; -import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants'; -import { - initDefaultProps, - getComponent, - getSlotOptions, - isValidElement, - getAllChildren, - findDOMNode, - getSlot, -} from '../_util/props-util'; -import getTransitionProps from '../_util/getTransitionProps'; -import BaseMixin from '../_util/BaseMixin'; -import { cloneElement, cloneVNodes } from '../_util/vnode'; -import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'; -import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'; -import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; -import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; -import { ConfigConsumerProps } from '../config-provider'; - -const iconMap = { - success: CheckCircleFilled, - warning: ExclamationCircleFilled, - error: CloseCircleFilled, - validating: LoadingOutlined, -}; - -function noop() {} - -function intersperseSpace(list) { - return list.reduce((current, item) => [...current, ' ', item], []).slice(1); -} -export const FormItemProps = { - id: PropTypes.string, - htmlFor: PropTypes.string, - prefixCls: PropTypes.string, - label: PropTypes.any, - labelCol: PropTypes.shape(ColProps).loose, - wrapperCol: PropTypes.shape(ColProps).loose, - help: PropTypes.any, - extra: PropTypes.any, - validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']), - hasFeedback: PropTypes.bool, - required: PropTypes.bool, - colon: PropTypes.bool, - fieldDecoratorId: PropTypes.string, - fieldDecoratorOptions: PropTypes.object, - selfUpdate: PropTypes.bool, - labelAlign: PropTypes.oneOf(['left', 'right']), -}; -function comeFromSlot(vnodes = [], itemVnode) { - let isSlot = false; - for (let i = 0, len = vnodes.length; i < len; i++) { - const vnode = vnodes[i]; - if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) { - isSlot = true; - } else { - const componentOptions = - vnode.componentOptions || (vnode.$vnode && vnode.$vnode.componentOptions); - const children = componentOptions ? componentOptions.children : vnode.$children; - isSlot = comeFromSlot(children, itemVnode); - } - if (isSlot) { - break; - } - } - return isSlot; -} - -export default { - name: 'AFormItem', - mixins: [BaseMixin], - inheritAttrs: false, - __ANT_FORM_ITEM: true, - props: initDefaultProps(FormItemProps, { - hasFeedback: false, - }), - setup() { - return { - isFormItemChildren: inject('isFormItemChildren', false), - FormContext: inject('FormContext', {}), - decoratorFormProps: inject('decoratorFormProps', {}), - collectFormItemContext: inject('collectFormItemContext', noop), - configProvider: inject('configProvider', ConfigConsumerProps), - }; - }, - data() { - return { helpShow: false }; - }, - computed: { - itemSelfUpdate() { - return !!(this.selfUpdate === undefined ? this.FormContext.selfUpdate : this.selfUpdate); - }, - }, - created() { - provide('isFormItemChildren', true); - this.collectContext(); - }, - beforeUpdate() { - if (process.env.NODE_ENV !== 'production') { - this.collectContext(); - } - }, - beforeUnmount() { - this.collectFormItemContext(this.$vnode && this.$vnode.context, 'delete'); - }, - mounted() { - const { help, validateStatus } = this.$props; - warning( - this.getControls(this.slotDefault, true).length <= 1 || - help !== undefined || - validateStatus !== undefined, - 'Form.Item', - 'Cannot generate `validateStatus` and `help` automatically, ' + - 'while there are more than one `getFieldDecorator` in it.', - ); - warning( - !this.fieldDecoratorId, - 'Form.Item', - '`fieldDecoratorId` is deprecated. please use `v-decorator={id, options}` instead.', - ); - }, - methods: { - collectContext() { - if (this.FormContext.form && this.FormContext.form.templateContext) { - const { templateContext } = this.FormContext.form; - const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => { - return [...a, ...b]; - }, []); - const isSlot = comeFromSlot(vnodes, this.$vnode); - warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot'); - let isSlotScope = false; - // 进一步判断是否是通过slot-scope传递 - if (!isSlot && this.$vnode.context !== templateContext) { - isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode); - } - if (!isSlotScope && !isSlot) { - this.collectFormItemContext(this.$vnode.context); - } - } - }, - getHelpMessage() { - const help = getComponent(this, 'help'); - const onlyControl = this.getOnlyControl(); - if (help === undefined && onlyControl) { - const errors = this.getField().errors; - if (errors) { - return intersperseSpace( - errors.map((e, index) => { - let node = null; - if (isValidElement(e)) { - node = e; - } else if (isValidElement(e.message)) { - node = e.message; - } - return node ? cloneElement(node, { key: index }) : e.message; - }), - ); - } else { - return ''; - } - } - - return help; - }, - - getControls(childrenArray = [], recursively) { - let controls = []; - for (let i = 0; i < childrenArray.length; i++) { - if (!recursively && controls.length > 0) { - break; - } - - const child = childrenArray[i]; - // if (!child.tag && child.text.trim() === '') { - // continue; - // } - - if (typeof child.type === 'object' && child.type.__ANT_FORM_ITEM) { - continue; - } - const children = getAllChildren(child); - const attrs = child.props || {}; - if (FIELD_META_PROP in attrs) { - // And means FIELD_DATA_PROP in child.props, too. - controls.push(child); - } else if (children) { - controls = controls.concat(this.getControls(children, recursively)); - } - } - return controls; - }, - - getOnlyControl() { - const child = this.getControls(this.slotDefault, false)[0]; - return child !== undefined ? child : null; - }, - - getChildAttr(prop) { - const child = this.getOnlyControl(); - let data = {}; - if (!child) { - return undefined; - } - debugger; - if (child.data) { - data = child.data; - } else if (child.$vnode && child.$vnode.data) { - data = child.$vnode.data; - } - return data[prop] || data.attrs[prop]; - }, - - getId() { - return this.getChildAttr('id'); - }, - - getMeta() { - return this.getChildAttr(FIELD_META_PROP); - }, - - getField() { - return this.getChildAttr(FIELD_DATA_PROP); - }, - - getValidateStatus() { - const onlyControl = this.getOnlyControl(); - if (!onlyControl) { - return ''; - } - const field = this.getField(); - if (field.validating) { - return 'validating'; - } - if (field.errors) { - return 'error'; - } - const fieldValue = 'value' in field ? field.value : this.getMeta().initialValue; - if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') { - return 'success'; - } - return ''; - }, - - // Resolve duplicated ids bug between different forms - // https://github.com/ant-design/ant-design/issues/7351 - onLabelClick() { - const id = this.id || this.getId(); - if (!id) { - return; - } - const formItemNode = findDOMNode(this); - const control = formItemNode.querySelector(`[id="${id}"]`); - if (control && control.focus) { - control.focus(); - } - }, - - onHelpAnimEnd(_key, helpShow) { - this.helpShow = helpShow; - if (!helpShow) { - this.$forceUpdate(); - } - }, - - isRequired() { - const { required } = this; - if (required !== undefined) { - return required; - } - if (this.getOnlyControl()) { - const meta = this.getMeta() || {}; - const validate = meta.validate || []; - - return validate - .filter(item => !!item.rules) - .some(item => { - return item.rules.some(rule => rule.required); - }); - } - return false; - }, - - renderHelp(prefixCls) { - const help = this.getHelpMessage(); - const children = help ? ( -
- {help} -
- ) : null; - if (children) { - this.helpShow = !!children; - } - const transitionProps = getTransitionProps('show-help', { - onAfterEnter: () => this.onHelpAnimEnd('help', true), - onAfterLeave: () => this.onHelpAnimEnd('help', false), - }); - return ( - - {children} - - ); - }, - - renderExtra(prefixCls) { - const extra = getComponent(this, 'extra'); - return extra ?
{extra}
: null; - }, - - renderValidateWrapper(prefixCls, c1, c2, c3) { - const props = this.$props; - const onlyControl = this.getOnlyControl; - const validateStatus = - props.validateStatus === undefined && onlyControl - ? this.getValidateStatus() - : props.validateStatus; - - let classes = `${prefixCls}-item-control`; - if (validateStatus) { - classes = classNames(`${prefixCls}-item-control`, { - 'has-feedback': props.hasFeedback || validateStatus === 'validating', - 'has-success': validateStatus === 'success', - 'has-warning': validateStatus === 'warning', - 'has-error': validateStatus === 'error', - 'is-validating': validateStatus === 'validating', - }); - } - const IconNode = validateStatus && iconMap[validateStatus]; - - const icon = - props.hasFeedback && IconNode ? ( - - - - ) : null; - return ( -
- - {c1} - {icon} - - {c2} - {c3} -
- ); - }, - - renderWrapper(prefixCls, children) { - const { wrapperCol: contextWrapperCol } = this.isFormItemChildren ? {} : this.FormContext; - const { wrapperCol } = this; - const mergedWrapperCol = wrapperCol || contextWrapperCol || {}; - const { style, id, ...restProps } = mergedWrapperCol; - const className = classNames(`${prefixCls}-item-control-wrapper`, mergedWrapperCol.class); - const colProps = { - ...restProps, - class: className, - key: 'wrapper', - style, - id, - }; - return {children}; - }, - - renderLabel(prefixCls) { - const { - vertical, - labelAlign: contextLabelAlign, - labelCol: contextLabelCol, - colon: contextColon, - } = this.FormContext; - const { labelAlign, labelCol, colon, id, htmlFor } = this; - const label = getComponent(this, 'label'); - const required = this.isRequired(); - const mergedLabelCol = labelCol || contextLabelCol || {}; - - const mergedLabelAlign = labelAlign || contextLabelAlign; - const labelClsBasic = `${prefixCls}-item-label`; - const labelColClassName = classNames( - labelClsBasic, - mergedLabelAlign === 'left' && `${labelClsBasic}-left`, - mergedLabelCol.class, - ); - const { - class: labelColClass, - style: labelColStyle, - id: labelColId, - ...restProps - } = mergedLabelCol; - let labelChildren = label; - // Keep label is original where there should have no colon - const computedColon = colon === true || (contextColon !== false && colon !== false); - const haveColon = computedColon && !vertical; - // Remove duplicated user input colon - if (haveColon && typeof label === 'string' && label.trim() !== '') { - labelChildren = label.replace(/[：:]\s*$/, ''); - } - - const labelClassName = classNames({ - [`${prefixCls}-item-required`]: required, - [`${prefixCls}-item-no-colon`]: !computedColon, - }); - const colProps = { - ...restProps, - class: labelColClassName, - key: 'label', - style: labelColStyle, - id: labelColId, - }; - - return label ? ( - - - - ) : null; - }, - renderChildren(prefixCls) { - return [ - this.renderLabel(prefixCls), - this.renderWrapper( - prefixCls, - this.renderValidateWrapper( - prefixCls, - this.slotDefault, - this.renderHelp(prefixCls), - this.renderExtra(prefixCls), - ), - ), - ]; - }, - renderFormItem() { - const { prefixCls: customizePrefixCls } = this.$props; - const { class: className, ...restProps } = this.$attrs; - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('form', customizePrefixCls); - const children = this.renderChildren(prefixCls); - const itemClassName = { - [className]: true, - [`${prefixCls}-item`]: true, - [`${prefixCls}-item-with-help`]: this.helpShow, - }; - - return ( - - {children} - - ); - }, - decoratorOption(vnode) { - if (vnode.data && vnode.data.directives) { - const directive = find(vnode.data.directives, ['name', 'decorator']); - warning( - !directive || (directive && Array.isArray(directive.value)), - 'Form', - `Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof (directive - ? directive.value - : directive)}. At ${vnode.tag}.`, - ); - return directive ? directive.value : null; - } else { - return null; - } - }, - decoratorChildren(vnodes) { - const { FormContext } = this; - const getFieldDecorator = FormContext.form.getFieldDecorator; - for (let i = 0, len = vnodes.length; i < len; i++) { - const vnode = vnodes[i]; - if (getSlotOptions(vnode).__ANT_FORM_ITEM) { - break; - } - if (vnode.children) { - vnode.children = this.decoratorChildren(cloneVNodes(vnode.children)); - } else if (vnode.componentOptions && vnode.componentOptions.children) { - vnode.componentOptions.children = this.decoratorChildren( - cloneVNodes(vnode.componentOptions.children), - ); - } - const option = this.decoratorOption(vnode); - if (option && option[0]) { - vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode); - } - } - return vnodes; - }, - }, - - render() { - const { decoratorFormProps, fieldDecoratorId, fieldDecoratorOptions = {}, FormContext } = this; - let child = getSlot(this); - if (decoratorFormProps.form && fieldDecoratorId && child.length) { - const getFieldDecorator = decoratorFormProps.form.getFieldDecorator; - child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]); - warning( - !(child.length > 1), - 'Form', - '`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children', - ); - this.slotDefault = child; - } else if (FormContext.form) { - child = cloneVNodes(child); - this.slotDefault = this.decoratorChildren(child); - } else { - this.slotDefault = child; - } - return this.renderFormItem(); - }, -}; diff --git a/components/form-old/__tests__/__snapshots__/demo.test.js.snap b/components/form-old/__tests__/__snapshots__/demo.test.js.snap deleted file mode 100644 index 97fd53963..000000000 --- a/components/form-old/__tests__/__snapshots__/demo.test.js.snap +++ /dev/null @@ -1,849 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders ./antdv-demo/docs/form/demo/advanced-search.vue correctly 1`] = ` - -`; - -exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = ` -
-
-
-
-
- -
-
-
-
-
-
-
Select a option and change input text above
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correctly 1`] = ` -
-
-
-
-
RMB
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`] = ` -
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/dynamic-rule.vue correctly 1`] = ` -
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/form-in-modal.vue correctly 1`] = ` -
- -
-`; - -exports[`renders ./antdv-demo/docs/form/demo/global-state.vue correctly 1`] = ` -
-
-
-
-
-
- -
-
-
- 
    {
-  "username": {
-    "value": "benjycui"
-  }
-}
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`] = ` -
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = ` -
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/normal-login.vue correctly 1`] = ` - -`; - -exports[`renders ./antdv-demo/docs/form/demo/register.vue correctly 1`] = ` -
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
Zhejiang / Hangzhou / West Lake - -
-
-
-
-
-
-
- +86 -
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
We must make sure that your are a human.
-
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/time-related-controls.vue correctly 1`] = ` -
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
~ - -
-
-
-
-
-
-
~ - -
-
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-`; - -exports[`renders ./antdv-demo/docs/form/demo/validate-other.vue correctly 1`] = ` -
-
-
-
-
- China - - -
-
-
-
-
-
-
Please select a country
-
- -
-
-
-
-
-
-
Please select favourite colors
  •  
    -
    • -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    - machines -     - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    ABCDEF
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    • -
      -
      -
      • -
    • -
      -
      -
      -
      -
      • -
    • -
      -
      -
      -
      -
      • -
    • -
      -
      -
      -
      -
      • -
    • -
      -
      -
      -
      -
      • -
    - -
    -
    -
    -
    -
    -
    -
    - -
    longgggggggggggggggggggggggggggggggggg
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -`; - -exports[`renders ./antdv-demo/docs/form/demo/validate-static.vue correctly 1`] = ` -
    -
    -
    -
    -
    -
    Should be combination of numbers & alphabets
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    The information is being validated...
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    Should be combination of numbers & alphabets
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - Option 1 -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    The information is being validated...
    -
    -
    -
    -
    -
    -
    -
    -
    Please select the correct date
    -
    -
    -
    - - - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -`; - -exports[`renders ./antdv-demo/docs/form/demo/without-form-create.vue correctly 1`] = ` -
    -
    -
    -
    -
    -
    -
    -
    A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.
    -
    -
    -
    -
    -`; diff --git a/components/form-old/__tests__/__snapshots__/index.test.js.snap b/components/form-old/__tests__/__snapshots__/index.test.js.snap deleted file mode 100644 index dbf9b20e9..000000000 --- a/components/form-old/__tests__/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`] = ` -
    - -
    -`; diff --git a/components/form-old/__tests__/__snapshots__/message.test.js.snap b/components/form-old/__tests__/__snapshots__/message.test.js.snap deleted file mode 100644 index 253e24811..000000000 --- a/components/form-old/__tests__/__snapshots__/message.test.js.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Form should display custom message 1`] = ` -
    -
    -
    -
    -
    -
    Account does not exist, Forgot account?
    -
    -
    -
    -
    -`; - -exports[`Form should display two message 1`] = ` -
    -
    -
    -
    -
    -
    Error message 1 Error message 2
    -
    -
    -
    -
    -`; diff --git a/components/form-old/__tests__/demo.test.js b/components/form-old/__tests__/demo.test.js deleted file mode 100644 index e5338b89c..000000000 --- a/components/form-old/__tests__/demo.test.js +++ /dev/null @@ -1,3 +0,0 @@ -import demoTest from '../../../tests/shared/demoTest'; - -demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] }); diff --git a/components/form-old/__tests__/index.test.js b/components/form-old/__tests__/index.test.js deleted file mode 100644 index 4f3ce113a..000000000 --- a/components/form-old/__tests__/index.test.js +++ /dev/null @@ -1,57 +0,0 @@ -import { mount } from '@vue/test-utils'; -import Form from '..'; -import mountTest from '../../../tests/shared/mountTest'; - -describe('Form', () => { - mountTest(Form); - mountTest(Form.Item); - - it('Form.Item should support data-*、aria-* and custom attribute', () => { - const wrapper = mount({ - render() { - return ( -
    - -
    - ); - }, - }); - expect(wrapper.html()).toMatchSnapshot(); - }); - - it('hideRequiredMark', () => { - const wrapper = mount(Form, { - props: { - hideRequiredMark: true, - }, - }); - expect(wrapper.classes()).toContain('ant-form-hide-required-mark'); - }); - - describe('wrappedComponentRef', () => { - it('get component ref', () => { - const TestForm = { - data() { - return { - __TESTFORM__: true, - }; - }, - render() { - return
    ; - }, - }; - const Wrapped = Form.create()(TestForm); - let form; - mount(Wrapped, { - props: { - wrappedComponentRef: node => { - form = node; - }, - }, - }); - expect(form._data.__TESTFORM__).toBe(true); - }); - }); -}); diff --git a/components/form-old/__tests__/label.test.js b/components/form-old/__tests__/label.test.js deleted file mode 100644 index 797829d9c..000000000 --- a/components/form-old/__tests__/label.test.js +++ /dev/null @@ -1,223 +0,0 @@ -import { mount } from '@vue/test-utils'; -import Form from '..'; -import { asyncExpect } from '@/tests/utils'; - -describe('Form', () => { - // Mock of `querySelector` - const originQuerySelector = HTMLElement.prototype.querySelector; - HTMLElement.prototype.querySelector = function querySelector(str) { - const match = str.match(/^\[id=('|")(.*)('|")]$/); - const id = match && match[2]; - - // Use origin logic - if (id) { - const [input] = this.getElementsByTagName('input'); - if (input && input.id === id) { - return input; - } - } - - return originQuerySelector.call(this, str); - }; - - afterAll(() => { - HTMLElement.prototype.querySelector = originQuerySelector; - }); - it('should remove duplicated user input colon', () => { - const wrapper = mount({ - render() { - return ( - - input - input -
    - ); - }, - }); - expect( - wrapper - .findAll('.ant-form-item-label label') - .at(0) - .text(), - ).not.toContain(':'); - expect( - wrapper - .findAll('.ant-form-item-label label') - .at(1) - .text(), - ).not.toContain('：'); - }); - - it('should not remove duplicated user input colon when props colon is false', () => { - const wrapper = mount({ - render() { - return ( -
    - - input - - - input - -
    - ); - }, - }); - expect( - wrapper - .findAll('.ant-form-item-label label') - .at(0) - .text(), - ).toContain(':'); - expect( - wrapper - .findAll('.ant-form-item-label label') - .at(1) - .text(), - ).toContain('：'); - }); - - it('should not remove duplicated user input colon when layout is vertical', () => { - const wrapper = mount({ - render() { - return ( -
    - input - input -
    - ); - }, - }); - expect( - wrapper - .findAll('.ant-form-item-label label') - .at(0) - .text(), - ).toContain(':'); - expect( - wrapper - .findAll('.ant-form-item-label label') - .at(1) - .text(), - ).toContain('：'); - }); - - it('should has dom with .ant-form-item-control-wrapper', () => { - const formItemLayout = { - labelCol: { span: 6 }, - wrapperCol: { span: 14 }, - }; - const wrapper = mount({ - render() { - return ( -
    - input - input -
    - ); - }, - }); - expect(wrapper.findAll('.ant-form-item-control-wrapper').length).toBe(2); - expect(wrapper.findAll('.ant-form-item-control-wrapper.ant-col-14').length).toBe(1); - }); - - // https://github.com/ant-design/ant-design/issues/7351 - it('focus correct input when click label', async () => { - const Form1 = Form.create()({ - render() { - return ( -
    - {this.form.getFieldDecorator('test')()} -
    - ); - }, - }); - const Form2 = Form.create()({ - render() { - return ( -
    - {this.form.getFieldDecorator('test2')()} -
    - ); - }, - }); - - const wrapper = mount( - { - render() { - return ( -
    - - -
    - ); - }, - }, - { sync: false }, - ); - await asyncExpect(() => { - wrapper - .findAll({ name: 'AForm' }) - .at(0) - .findAll('label') - .at(0) - .trigger('click'); - }); - await asyncExpect(() => { - expect( - wrapper - .findAll({ name: 'AForm' }) - .at(0) - .findAll('input') - .at(0).element, - ).toBe(document.activeElement); - }); - await asyncExpect(() => { - wrapper - .findAll({ name: 'AForm' }) - .at(1) - .findAll('label') - .at(0) - .trigger('click'); - }); - await asyncExpect(() => { - expect( - wrapper - .findAll({ name: 'AForm' }) - .at(1) - .findAll('input') - .at(0).element, - ).toBe(document.activeElement); - }); - }); - - // https://github.com/ant-design/ant-design/issues/7693 - it('should not throw error when is not a valid id', async () => { - const Form1 = Form.create()({ - render() { - return ( -
    - - {this.form.getFieldDecorator('member[0].name.firstname')()} - -
    - ); - }, - }); - - const wrapper = mount(Form1, { sync: false, attachTo: 'body' }); - await asyncExpect(() => { - expect(() => { - wrapper - .find({ name: 'AForm' }) - .findAll('label') - .at(0) - .trigger('click'); - }).not.toThrow(); - }); - // 不合法id时，document.activeElement没有正确更新 - // await asyncExpect(() => { - // expect(wrapper.find({ name: 'AForm' }).findAll('input').at(0).element).toBe(document.activeElement) - // }, 0) - }); -}); diff --git a/components/form-old/__tests__/message.test.js b/components/form-old/__tests__/message.test.js deleted file mode 100644 index da7f34e52..000000000 --- a/components/form-old/__tests__/message.test.js +++ /dev/null @@ -1,78 +0,0 @@ -import { mount } from '@vue/test-utils'; -import { asyncExpect } from '@/tests/utils'; -import Form from '..'; - -describe('Form', () => { - it('should display two message', async () => { - const rules = [ - { - pattern: /^\w+$/, - message: 'Error message 1', - }, - { - pattern: /^\w+$/, - message: 'Error message 2', - }, - ]; - let myForm; - const Form1 = Form.create()({ - render() { - myForm = this.form; - return ( -
    - - {this.form.getFieldDecorator('account', { initialValue: '+=-/', rules })()} - -
    - ); - }, - }); - - const wrapper = mount(Form1, { - sync: false, - }); - await asyncExpect(() => { - myForm.validateFields(); - }); - - wrapper.vm.$forceUpdate(); - expect(wrapper.html()).toMatchSnapshot(); - }); - - it('should display custom message', () => { - let myForm; - const Form1 = Form.create()({ - created() { - myForm = this.form; - }, - render() { - const rules = [ - { - pattern: /^$/, - message: ( - - Account does not exist,{' '} - - Forgot account? - - - ), - }, - ]; - return ( -
    - - {this.form.getFieldDecorator('account', { initialValue: 'antd', rules })()} - -
    - ); - }, - }); - - const wrapper = mount(Form1); - myForm.validateFields(); - - wrapper.vm.$forceUpdate(); - expect(wrapper.html()).toMatchSnapshot(); - }); -}); diff --git a/components/form-old/constants.jsx b/components/form-old/constants.jsx deleted file mode 100644 index bff641291..000000000 --- a/components/form-old/constants.jsx +++ /dev/null @@ -1,2 +0,0 @@ -export const FIELD_META_PROP = 'data-__meta'; -export const FIELD_DATA_PROP = 'data-__field'; diff --git a/components/form-old/index.jsx b/components/form-old/index.jsx deleted file mode 100644 index b5c0b1602..000000000 --- a/components/form-old/index.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import Vue from 'vue'; -import Form from './Form'; -import ref from 'vue-ref'; -import FormDecoratorDirective from '../_util/FormDecoratorDirective'; - -Vue.use(ref, { name: 'ant-ref' }); -Vue.use(FormDecoratorDirective); -Vue.prototype.$form = Form; - -export { FormProps, FormCreateOption, ValidationRule } from './Form'; -export { FormItemProps } from './FormItem'; - -/* istanbul ignore next */ -Form.install = function(Vue) { - Vue.component(Form.name, Form); - Vue.component(Form.Item.name, Form.Item); - Vue.prototype.$form = Form; -}; - -export default Form; diff --git a/components/form-old/style/index.js b/components/form-old/style/index.js deleted file mode 100644 index 30c84ff81..000000000 --- a/components/form-old/style/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import '../../style/index.less'; -import './index.less'; - -// style dependencies -import '../../grid/style'; diff --git a/components/form-old/style/index.less b/components/form-old/style/index.less deleted file mode 100644 index 1967010e3..000000000 --- a/components/form-old/style/index.less +++ /dev/null @@ -1,653 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; -@import '../../button/style/mixin'; -@import '../../grid/style/mixin'; -@import './mixin'; - -@form-prefix-cls: ~'@{ant-prefix}-form'; -@form-component-height: @input-height-base; -@form-component-max-height: @input-height-lg; -@form-feedback-icon-size: @font-size-base; -@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px; -@form-explain-font-size: @font-size-base; -// Extends additional 1px to fix precision issue. -// https://github.com/ant-design/ant-design/issues/12803 -// https://github.com/ant-design/ant-design/issues/8220 -@form-explain-precision: 1px; -@form-explain-height: floor(@form-explain-font-size * @line-height-base); - -.@{form-prefix-cls} { - .reset-component; - .reset-form; -} - -.@{form-prefix-cls}-item-required::before { - display: inline-block; - margin-right: 4px; - color: @label-required-color; - font-size: @font-size-base; - font-family: SimSun, sans-serif; - line-height: 1; - content: '*'; - .@{form-prefix-cls}-hide-required-mark & { - display: none; - } -} - -.@{form-prefix-cls}-item-label > label { - color: @label-color; - - &::after { - & when (@form-item-trailing-colon=true) { - content: ':'; - } - & when not (@form-item-trailing-colon=true) { - content: ' '; - } - - position: relative; - top: -0.5px; - margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left; - } - - &.@{form-prefix-cls}-item-no-colon::after { - content: ' '; - } -} - -// Form items -// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing -.@{form-prefix-cls}-item { - label { - position: relative; - - > .@{iconfont-css-prefix} { - font-size: @font-size-base; - vertical-align: top; - } - } - - .reset-component; - - margin-bottom: @form-item-margin-bottom; - vertical-align: top; - - &-control { - position: relative; - line-height: @form-component-max-height; - .clearfix; - } - - &-children { - position: relative; - } - - &-with-help { - margin-bottom: max(0, @form-item-margin-bottom - @form-explain-height - @form-help-margin-top); - } - - &-label { - display: inline-block; - overflow: hidden; - line-height: @form-component-max-height - 0.0001px; - white-space: nowrap; - text-align: right; - vertical-align: middle; - - &-left { - text-align: left; - } - } - - .@{ant-prefix}-switch { - margin: 2px 0 4px; - } -} - -.@{form-prefix-cls}-explain, -.@{form-prefix-cls}-extra { - clear: both; - min-height: @form-explain-height + @form-explain-precision; - margin-top: @form-help-margin-top; - color: @text-color-secondary; - font-size: @form-explain-font-size; - line-height: @line-height-base; - transition: color 0.3s @ease-out; // sync input color transition -} - -.@{form-prefix-cls}-explain { - margin-bottom: -@form-explain-precision; -} - -.@{form-prefix-cls}-extra { - padding-top: 4px; -} - -.@{form-prefix-cls}-text { - display: inline-block; - padding-right: 8px; -} - -.@{form-prefix-cls}-split { - display: block; - text-align: center; -} - -form { - .has-feedback { - .@{ant-prefix}-input { - padding-right: @input-padding-horizontal-base + @input-affix-width; - } - - // https://github.com/ant-design/ant-design/issues/19884 - .@{ant-prefix}-input-affix-wrapper { - .@{ant-prefix}-input-suffix { - padding-right: 18px; - } - .@{ant-prefix}-input { - padding-right: @input-padding-horizontal-base + @input-affix-width * 2; - } - &.@{ant-prefix}-input-affix-wrapper-input-with-clear-btn { - .@{ant-prefix}-input { - padding-right: @input-padding-horizontal-base + @input-affix-width * 3; - } - } - } - - // Fix overlapping between feedback icon and