mirror of
https://github.com/lowdefy/lowdefy.git
synced 2025-01-30 13:50:55 +08:00
fix(layout): move labelLogic to blocks-antd package
This commit is contained in:
Gervwyk
parent
6fc9d4719f
commit
e636aef122
@ -30,7 +30,8 @@
|
||||
"build": "babel src --out-dir dist",
|
||||
"test": "jest --coverage --config jest.config.json --no-cache",
|
||||
"prepare": "yarn build",
|
||||
"prepublishOnly": "yarn build"
|
||||
"prepublishOnly": "yarn build",
|
||||
"npm-publish": "npm publish --access public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "10.0.35",
|
||||
@ -41,7 +42,6 @@
|
||||
"@lowdefy/set": "1.0.0",
|
||||
"@lowdefy/type": "1.0.0",
|
||||
"antd": "4.4.2",
|
||||
"classnames": "2.2.6",
|
||||
"create-emotion": "10.0.27"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
Copyright 2020 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
const getLabelCol = (value, inline) => {
|
||||
if (inline) {
|
||||
return { flex: '0 1 auto' };
|
||||
}
|
||||
const defaultVal = {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
};
|
||||
if (value.span) {
|
||||
defaultVal.md = { span: value.span };
|
||||
}
|
||||
if (value.sm) {
|
||||
defaultVal.sm = value.sm;
|
||||
defaultVal.xs = value.sm;
|
||||
}
|
||||
if (value.xs) {
|
||||
defaultVal.xs = value.xs;
|
||||
}
|
||||
if (value.md) {
|
||||
defaultVal.md = value.md;
|
||||
}
|
||||
if (value.lg) {
|
||||
defaultVal.lg = value.lg;
|
||||
}
|
||||
if (value.xl) {
|
||||
defaultVal.xl = value.xl;
|
||||
}
|
||||
if (value.xxl) {
|
||||
defaultVal.xxl = value.xxl;
|
||||
}
|
||||
return defaultVal;
|
||||
};
|
||||
export default getLabelCol;
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
Copyright 2020 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
const getWrapperCol = (value, inline) => {
|
||||
if (inline) {
|
||||
return { flex: '1 1 auto' };
|
||||
}
|
||||
const defaultVal = {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
};
|
||||
if (value.span) {
|
||||
defaultVal.md = { span: 24 - value.span };
|
||||
}
|
||||
if (value.sm && value.sm.span) {
|
||||
defaultVal.sm = { span: 24 - value.sm.span };
|
||||
defaultVal.xs = { span: 24 - value.sm.span };
|
||||
}
|
||||
if (value.xs && value.xs.span) {
|
||||
defaultVal.xs = { span: 24 - value.xs.span };
|
||||
}
|
||||
if (value.md && value.md.span) {
|
||||
defaultVal.md = { span: 24 - value.md.span };
|
||||
}
|
||||
if (value.lg && value.lg.span) {
|
||||
defaultVal.lg = { span: 24 - value.lg.span };
|
||||
}
|
||||
if (value.xl && value.xl.span) {
|
||||
defaultVal.xl = { span: 24 - value.xl.span };
|
||||
}
|
||||
if (value.xxl && value.xxl.span) {
|
||||
defaultVal.xxl = { span: 24 - value.xxl.span };
|
||||
}
|
||||
return defaultVal;
|
||||
};
|
||||
export default getWrapperCol;
|
||||
@ -16,9 +16,8 @@
|
||||
|
||||
import Area from './Area.js';
|
||||
import BlockLayout from './BlockLayout.js';
|
||||
import labelLogic from './labelLogic.js';
|
||||
import layoutParamsToArea from './layoutParamsToArea.js';
|
||||
import makeCss from './makeCss.js';
|
||||
import mediaToCssObject from './mediaToCssObject.js';
|
||||
|
||||
export { Area, BlockLayout, labelLogic, layoutParamsToArea, makeCss, mediaToCssObject };
|
||||
export { Area, BlockLayout, layoutParamsToArea, makeCss, mediaToCssObject };
|
||||
|
||||
@ -1,103 +0,0 @@
|
||||
/*
|
||||
Copyright 2020 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import get from '@lowdefy/get';
|
||||
import type from '@lowdefy/type';
|
||||
import classNames from 'classnames';
|
||||
import getWrapperCol from './getWrapperCol.js';
|
||||
import getLabelCol from './getLabelCol.js';
|
||||
|
||||
const labelLogic = ({
|
||||
blockId,
|
||||
content,
|
||||
methods,
|
||||
properties = {},
|
||||
required = false,
|
||||
validate = [],
|
||||
validated = false,
|
||||
}) => {
|
||||
const wrapperCol = getWrapperCol(properties, properties.inline);
|
||||
const labelCol = getLabelCol(properties, properties.inline);
|
||||
const validateStatus =
|
||||
validated && validate.length === 0
|
||||
? 'success'
|
||||
: validate.length !== 0 && !get({ v: validate }, 'v.0.status')
|
||||
? 'error'
|
||||
: validate.length !== 0 &&
|
||||
get({ v: validate }, 'v.0.status') &&
|
||||
get({ v: validate }, 'v.0.status') !== 'info'
|
||||
? get({ v: validate }, 'v.0.status')
|
||||
: null;
|
||||
|
||||
// render label priority order: content.label area -> properties.title -> blockId and do not render an empty label
|
||||
let label = content.label
|
||||
? content.label()
|
||||
: !type.isString(properties.title)
|
||||
? blockId
|
||||
: properties.title;
|
||||
label = label === '' ? null : label;
|
||||
|
||||
// trim colon when colon is set, and the user inputs a colon, because antd class renders a colon
|
||||
if (label && properties.colon && label.trim() !== '') {
|
||||
label = label.replace(/[:|：]\s*$/, '');
|
||||
}
|
||||
const rowClassName = classNames({
|
||||
[`ant-form-item`]: true,
|
||||
[`ant-form-item-with-help`]: false,
|
||||
// Status
|
||||
[`ant-form-item-has-feedback`]: validateStatus && properties.hasFeedback !== false,
|
||||
[`ant-form-item-has-success`]: validateStatus === 'success',
|
||||
[`ant-form-item-has-warning`]: validateStatus === 'warning',
|
||||
[`ant-form-item-has-error`]: validateStatus === 'error',
|
||||
[`ant-form-item-is-validating`]: validateStatus === 'validating',
|
||||
[methods.makeCss({
|
||||
flexWrap: properties.inline && 'inherit', // wrap extra content below input
|
||||
})]: true,
|
||||
});
|
||||
|
||||
const labelColClassName = classNames(
|
||||
`ant-form-item-label`,
|
||||
(properties.align === 'left' || !properties.align) && `ant-form-item-label-left` // default align left
|
||||
);
|
||||
|
||||
const labelClassName = classNames({
|
||||
[`ant-form-item-required`]: required,
|
||||
[`ant-form-item-no-colon`]: properties.colon === false,
|
||||
[methods.makeCss(properties.style)]: true,
|
||||
});
|
||||
|
||||
const extraClassName = classNames(
|
||||
'ant-form-item-extra',
|
||||
methods.makeCss([
|
||||
{
|
||||
marginTop: properties.size === 'small' ? -4 : 0, // in size small reduce extra top margin
|
||||
},
|
||||
properties.extraStyle,
|
||||
])
|
||||
);
|
||||
return {
|
||||
extraClassName,
|
||||
label: !properties.disabled && label,
|
||||
labelClassName,
|
||||
labelCol,
|
||||
labelColClassName,
|
||||
rowClassName,
|
||||
validateStatus: properties.hasFeedback !== false && validateStatus,
|
||||
wrapperCol,
|
||||
};
|
||||
};
|
||||
|
||||
export default labelLogic;
|
||||
@ -1,109 +0,0 @@
|
||||
import getLabelCol from '../src/getLabelCol';
|
||||
|
||||
test('with inline', () => {
|
||||
expect(getLabelCol({}, true)).toEqual({ flex: '0 1 auto' });
|
||||
});
|
||||
|
||||
test('with no span value', () => {
|
||||
expect(getLabelCol({}, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a span value', () => {
|
||||
expect(getLabelCol({ span: 3 }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 3 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a xs span value', () => {
|
||||
expect(getLabelCol({ xs: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 3 },
|
||||
sm: { span: 24 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a sm span value', () => {
|
||||
expect(getLabelCol({ sm: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 3 },
|
||||
sm: { span: 3 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a md span value', () => {
|
||||
expect(getLabelCol({ md: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 3 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a lg span value', () => {
|
||||
expect(getLabelCol({ lg: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
lg: { span: 3 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a xl span value', () => {
|
||||
expect(getLabelCol({ xl: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
xl: { span: 3 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a xxl span value', () => {
|
||||
expect(getLabelCol({ xxl: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
xxl: { span: 3 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with all desktop span values', () => {
|
||||
expect(
|
||||
getLabelCol({ md: { span: 1 }, lg: { span: 2 }, xl: { span: 3 }, xxl: { span: 4 } }, false)
|
||||
).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 1 },
|
||||
lg: { span: 2 },
|
||||
xl: { span: 3 },
|
||||
xxl: { span: 4 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with all mobile span values', () => {
|
||||
expect(getLabelCol({ xs: { span: 1 }, sm: { span: 2 } }, false)).toEqual({
|
||||
xs: { span: 1 },
|
||||
sm: { span: 2 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with all span values', () => {
|
||||
expect(
|
||||
getLabelCol(
|
||||
{
|
||||
xs: { span: 11 },
|
||||
sm: { span: 22 },
|
||||
md: { span: 1 },
|
||||
lg: { span: 2 },
|
||||
xl: { span: 3 },
|
||||
xxl: { span: 4 },
|
||||
},
|
||||
false
|
||||
)
|
||||
).toEqual({
|
||||
xs: { span: 11 },
|
||||
sm: { span: 22 },
|
||||
md: { span: 1 },
|
||||
lg: { span: 2 },
|
||||
xl: { span: 3 },
|
||||
xxl: { span: 4 },
|
||||
});
|
||||
});
|
||||
@ -1,109 +0,0 @@
|
||||
import getWrapperCol from '../src/getWrapperCol';
|
||||
|
||||
test('with inline', () => {
|
||||
expect(getWrapperCol({}, true)).toEqual({ flex: '1 1 auto' });
|
||||
});
|
||||
|
||||
test('with no span value', () => {
|
||||
expect(getWrapperCol({}, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a span value', () => {
|
||||
expect(getWrapperCol({ span: 3 }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 21 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a xs span value', () => {
|
||||
expect(getWrapperCol({ xs: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 21 },
|
||||
sm: { span: 24 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a sm span value', () => {
|
||||
expect(getWrapperCol({ sm: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 21 },
|
||||
sm: { span: 21 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a md span value', () => {
|
||||
expect(getWrapperCol({ md: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 21 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a lg span value', () => {
|
||||
expect(getWrapperCol({ lg: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
lg: { span: 21 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a xl span value', () => {
|
||||
expect(getWrapperCol({ xl: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
xl: { span: 21 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with a xxl span value', () => {
|
||||
expect(getWrapperCol({ xxl: { span: 3 } }, false)).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
xxl: { span: 21 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with all desktop span values', () => {
|
||||
expect(
|
||||
getWrapperCol({ md: { span: 1 }, lg: { span: 2 }, xl: { span: 3 }, xxl: { span: 4 } }, false)
|
||||
).toEqual({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 24 },
|
||||
md: { span: 23 },
|
||||
lg: { span: 22 },
|
||||
xl: { span: 21 },
|
||||
xxl: { span: 20 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with all mobile span values', () => {
|
||||
expect(getWrapperCol({ xs: { span: 1 }, sm: { span: 2 } }, false)).toEqual({
|
||||
xs: { span: 23 },
|
||||
sm: { span: 22 },
|
||||
});
|
||||
});
|
||||
|
||||
test('with all span values', () => {
|
||||
expect(
|
||||
getWrapperCol(
|
||||
{
|
||||
xs: { span: 11 },
|
||||
sm: { span: 22 },
|
||||
md: { span: 1 },
|
||||
lg: { span: 2 },
|
||||
xl: { span: 3 },
|
||||
xxl: { span: 4 },
|
||||
},
|
||||
false
|
||||
)
|
||||
).toEqual({
|
||||
xs: { span: 13 },
|
||||
sm: { span: 2 },
|
||||
md: { span: 23 },
|
||||
lg: { span: 22 },
|
||||
xl: { span: 21 },
|
||||
xxl: { span: 20 },
|
||||
});
|
||||
});
|
||||
@ -1,825 +0,0 @@
|
||||
import labelLogic from '../src/labelLogic';
|
||||
|
||||
const makeCss = jest.fn();
|
||||
const makeCssImp = (style, op) => JSON.stringify({ style, options: op });
|
||||
|
||||
beforeEach(() => {
|
||||
makeCss.mockReset();
|
||||
makeCss.mockImplementation(makeCssImp);
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation((query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(), // deprecated
|
||||
removeListener: jest.fn(), // deprecated
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
})),
|
||||
});
|
||||
});
|
||||
|
||||
const defaultInput = {
|
||||
blockId: 'label_1',
|
||||
content: {},
|
||||
methods: { makeCss },
|
||||
};
|
||||
|
||||
test('label default logic', () => {
|
||||
expect(labelLogic(defaultInput)).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic with required', () => {
|
||||
expect(labelLogic({ ...defaultInput, required: true })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic with required and validated', () => {
|
||||
expect(labelLogic({ ...defaultInput, required: true, validated: true })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}',
|
||||
validateStatus: 'success',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic with required, validated and validate', () => {
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.align = right', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { align: 'right' } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.align = left', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { align: 'left' } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.inline = true', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { inline: true } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: { flex: '0 1 auto' },
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{"flexWrap":"inherit"}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: { flex: '1 1 auto' },
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { inline: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { inline: true },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{"flexWrap":"inherit"}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { inline: true },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: { flex: '0 1 auto' },
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName:
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{"flexWrap":"inherit"}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: { flex: '1 1 auto' },
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.colon = true', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { colon: true } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { colon: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { colon: true },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { colon: true },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.title = title_1', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { title: 'title_1' } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'title_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { colon: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { title: 'title_1' },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { title: 'title_1' },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'title_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.hasFeedback = false', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { hasFeedback: false } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: false,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { hasFeedback: false }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { hasFeedback: false },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual(false);
|
||||
expect(reponse.rowClassName).toEqual('ant-form-item ant-form-item-has-success {"style":{}}');
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { hasFeedback: false },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: false,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.size = small', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { size: 'small' } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":-4},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { size: 'small' }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { colon: true },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { size: 'small' },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":-4},null]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.disabled = true', () => {
|
||||
expect(labelLogic({ ...defaultInput, properties: { disabled: true } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: false,
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { disabled: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { hasFeedback: false },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual(false);
|
||||
expect(reponse.rowClassName).toEqual('ant-form-item ant-form-item-has-success {"style":{}}');
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { disabled: true },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: false,
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic properties.style && properties.extraStyle', () => {
|
||||
expect(
|
||||
labelLogic({ ...defaultInput, properties: { style: { b: 2 }, extraStyle: { a: 1 } } })
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},{"a":1}]}',
|
||||
label: 'label_1',
|
||||
labelClassName: '{"style":{"b":2}}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { disabled: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
properties: { style: { b: 2 }, extraStyle: { a: 1 } },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {"style":{"b":2}}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
properties: { style: { b: 2 }, extraStyle: { a: 1 } },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},{"a":1}]}',
|
||||
label: 'label_1',
|
||||
labelClassName: 'ant-form-item-required {"style":{"b":2}}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic content.label = () => one', () => {
|
||||
expect(labelLogic({ ...defaultInput, content: { label: () => 'one' } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'one',
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { colon: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
content: { label: () => 'one' },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
content: { label: () => 'one' },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: 'one',
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('label default logic label === "" ', () => {
|
||||
expect(labelLogic({ ...defaultInput, content: { label: () => '' } })).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: null,
|
||||
labelClassName: '{}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item {"style":{}}',
|
||||
validateStatus: null,
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
let reponse = labelLogic({ ...defaultInput, properties: { colon: true }, required: true });
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
reponse = labelLogic({
|
||||
...defaultInput,
|
||||
content: { label: () => '' },
|
||||
required: true,
|
||||
validated: true,
|
||||
});
|
||||
|
||||
expect(reponse.labelClassName).toEqual('ant-form-item-required {}');
|
||||
expect(reponse.validateStatus).toEqual('success');
|
||||
expect(reponse.rowClassName).toEqual(
|
||||
'ant-form-item ant-form-item-has-feedback ant-form-item-has-success {"style":{}}'
|
||||
);
|
||||
expect(
|
||||
labelLogic({
|
||||
...defaultInput,
|
||||
content: { label: () => '' },
|
||||
required: true,
|
||||
validated: true,
|
||||
validate: [{ status: 'error', message: 'fail' }],
|
||||
})
|
||||
).toEqual({
|
||||
extraClassName: 'ant-form-item-extra {"style":[{"marginTop":0},null]}',
|
||||
label: null,
|
||||
labelClassName: 'ant-form-item-required {}',
|
||||
labelCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
labelColClassName: 'ant-form-item-label ant-form-item-label-left',
|
||||
rowClassName: 'ant-form-item ant-form-item-has-feedback ant-form-item-has-error {"style":{}}',
|
||||
validateStatus: 'error',
|
||||
wrapperCol: {
|
||||
sm: {
|
||||
span: 24,
|
||||
},
|
||||
xs: {
|
||||
span: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user