diff --git a/.eslintrc b/.eslintrc index 3962fcbe516..572c8635275 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,33 +1,16 @@ { - "parser": "babel-eslint", - "extends": ["standard", "standard-react"], "env": { - "browser": true, - "node": true, - "es6": true, - "jest": true, - "commonjs": true + "node": true + }, + "globals": { + "sleep": true, + "prettyFormat": true }, - "plugins": ["react", "react-hooks"], "parserOptions": { - "ecmaVersion": 6, + "ecmaVersion": 10, "sourceType": "module", "ecmaFeatures": { "jsx": true } - }, - "globals": { - "sleep": true, - "prettyFormat": true - }, - "rules": { - // don't force es6 functions to include space before paren - "space-before-function-paren": 0, - "react/prop-types": 0, - // allow specifying true explicitly for boolean props - "react/jsx-boolean-value": 0, - "react-hooks/rules-of-hooks": "error", - "react/no-did-update-set-state": 0, - "jsx-quotes":"off" } -} +} \ No newline at end of file diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 00000000000..59a2ae868a1 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,5 @@ +module.exports = { + semi: false, + tabWidth: 2, + singleQuote: true, +} \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index c88fc6f835d..52cd7d5f1fc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -14,5 +14,4 @@ before_script: script: - npm run lint - - npm run tslint:once - npm run test \ No newline at end of file diff --git a/package.json b/package.json index dd0bf52c8bb..97c36b924e9 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,7 @@ "version:major": "npm run prevesion && lerna version major --force-publish=* --no-git-tag-version -m \"chore(versions): publish packages %s\"", "release:force": "lerna publish from-package --yes", "release": "lerna publish", - "lint": "eslint \"packages/!(docs)/**/*.js\" \"scripts/**/*.js\"", - "tslint": "npm run tslint:once && onchange 'packages/**/*.ts' -- npm run tslint:once", - "tslint:once": "tslint --fix --project ./ ", + "lint": "eslint --ext .ts,.tsx,.js \"packages/!(docs)/**/src/**/*.@(ts|tsx)\" \"scripts/**/*.js\" --fix", "postinstall": "opencollective-postinstall" }, "devDependencies": { @@ -44,6 +42,9 @@ "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", "@babel/runtime-corejs3": "^7.2.0", + "@testing-library/react": "^8.0.0", + "@typescript-eslint/eslint-plugin": "^1.11.0", + "@typescript-eslint/parser": "^1.11.0", "all-contributors-cli": "^6.1.2", "antd": "^3.17.0", "babel-eslint": "^10.0.1", @@ -57,14 +58,13 @@ "cz-conventional-changelog": "^2.1.0", "doc-scripts": "^1.7.24", "eslint": "^5.16.0", - "eslint-config-standard": "^12.0.0", - "eslint-config-standard-react": "^7.0.2", + "eslint-config-prettier": "^6.0.0", "eslint-plugin-import": "^2.13.0", "eslint-plugin-node": "^7.0.1", + "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-promise": "^4.0.0", - "eslint-plugin-react": "^7.13.0", - "eslint-plugin-react-hooks": "^1.0.2", - "eslint-plugin-standard": "^4.0.0", + "eslint-plugin-react": "^7.14.2", + "eslint-plugin-react-hooks": "^1.6.1", "execa": "^1.0.0", "findup": "^0.1.5", "fs-extra": "^7.0.1", @@ -79,21 +79,19 @@ "jest-watch-lerna-packages": "^1.1.0", "json5": "^2.1.0", "lerna": "^3.10.1", + "lint-staged": "^8.2.1", "majo": "^0.7.1", "onchange": "^5.2.0", - "prettier-eslint-cli": "^4.7.1", + "prettier": "^1.18.2", "pretty-format": "^24.0.0", "react": "^16.8.3", "react-dom": "^16.8.3", - "@testing-library/react": "^8.0.0", "remark-parse": "^6.0.3", "remark-stringify": "^6.0.4", "semver-regex": "^2.0.0", "staged-git-files": "^1.1.2", "ts-jest": "^24.0.2", "tsconfig-paths-webpack-plugin": "^3.2.0", - "tslint": "^5.16.0", - "tslint-config-prettier": "^1.18.0", "typescript": "^3.4.5", "unified": "^7.1.0", "user-event": "^1.4.4", @@ -101,16 +99,26 @@ }, "config": { "ghooks": { - "pre-commit": "prettier-eslint \"./(packages|scripts)/**.js\" --write && npm run lint", + "pre-commit": "lint-staged", "commit-msg": "node ./scripts/validate-commit-msg.js" }, "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }, + "lint-staged": { + "packages/!(docs)/**/*.@(ts|tsx)": [ + "eslint --ext .ts,.tsx --fix", + "git add" + ], + "scripts/**/*.js": [ + "eslint --fix", + "git add" + ] + }, "dependencies": { - "opencollective-postinstall": "^2.0.2", - "opencollective": "^1.0.3" + "opencollective": "^1.0.3", + "opencollective-postinstall": "^2.0.2" }, "collective": { "type": "opencollective", diff --git a/packages/.eslintrc b/packages/.eslintrc new file mode 100644 index 00000000000..e36576416f9 --- /dev/null +++ b/packages/.eslintrc @@ -0,0 +1,52 @@ +{ + "parser": "@typescript-eslint/parser", + "extends": [ + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "prettier/@typescript-eslint", + ], + "env": { + "browser": true, + "es6": true, + "jest": true, + "commonjs": true + }, + "plugins": ["@typescript-eslint", "react", "react-hooks", "prettier"], + "parserOptions": { + "project": "./tsconfig.json", + "sourceType": "module", + "ecmaVersion": 6, + "ecmaFeatures": { + "jsx": true + } + }, + "settings": { + "react": { + "version": "detect", + } + }, + + "rules": { + "prettier/prettier": 2, + + // don't force es6 functions to include space before paren + "space-before-function-paren": 0, + "react/prop-types": 0, + "react/no-find-dom-node": 0, + "react/display-name": 0, + // allow specifying true explicitly for boolean props + "react/jsx-boolean-value": 0, + "react-hooks/rules-of-hooks": 2, + "react/no-did-update-set-state": 0, + // maybe we should no-public + "@typescript-eslint/explicit-member-accessibility": 0, + + "@typescript-eslint/interface-name-prefix": 0, + "@typescript-eslint/no-explicit-any": 0, + "@typescript-eslint/explicit-function-return-type": 0, + "@typescript-eslint/no-parameter-properties": 0, + "@typescript-eslint/array-type": 0, + "@typescript-eslint/no-object-literal-type-assertion": 0, + "no-console": ["error", { "allow": ["warn", "error", "info"] }] + } +} diff --git a/packages/antd/src/components/formButtonGroup.tsx b/packages/antd/src/components/formButtonGroup.tsx index 112116968aa..5247b3f603c 100644 --- a/packages/antd/src/components/formButtonGroup.tsx +++ b/packages/antd/src/components/formButtonGroup.tsx @@ -32,8 +32,8 @@ const isElementInViewport = ( offset = 0, threshold = 0 }: { - offset?: IOffset | number - threshold?: number + offset?: IOffset | number + threshold?: number } = {} ) => { const { top, right, bottom, left, width, height } = rect @@ -50,10 +50,14 @@ const isElementInViewport = ( } return ( - intersection.t >= ((offset as IOffset).top || offset as number + elementThreshold.y) && - intersection.r >= ((offset as IOffset).right || offset as number + elementThreshold.x) && - intersection.b >= ((offset as IOffset).bottom || offset as number + elementThreshold.y) && - intersection.l >= ((offset as IOffset).left || offset as number + elementThreshold.x) + intersection.t >= + ((offset as IOffset).top || (offset as number) + elementThreshold.y) && + intersection.r >= + ((offset as IOffset).right || (offset as number) + elementThreshold.x) && + intersection.b >= + ((offset as IOffset).bottom || (offset as number) + elementThreshold.y) && + intersection.l >= + ((offset as IOffset).left || (offset as number) + elementThreshold.x) ) } @@ -150,6 +154,7 @@ export const FormButtonGroup = styled( private getStickyBoundaryHandler(ref) { return () => { + // eslint-disable-next-line react/no-find-dom-node this.formNode = this.formNode || ReactDOM.findDOMNode(ref.current) if (this.formNode) { return isElementInViewport(this.formNode.getBoundingClientRect()) @@ -159,7 +164,8 @@ export const FormButtonGroup = styled( } } )` - ${props => (props.align ? `display:flex;justify-content: ${getAlign(props.align)}` : '')} + ${props => + props.align ? `display:flex;justify-content: ${getAlign(props.align)}` : ''} &.is-inline { display: inline-block; flex-grow: 3; diff --git a/packages/antd/src/components/grid.tsx b/packages/antd/src/components/grid.tsx index 864517f3b8f..6c95a4b8e2d 100644 --- a/packages/antd/src/components/grid.tsx +++ b/packages/antd/src/components/grid.tsx @@ -14,7 +14,7 @@ export class Row extends Component { } public render() { - /* eslint-disable no-unused-vars */ + /* eslint-disable @typescript-eslint/no-unused-vars */ const { prefix, pure, @@ -30,7 +30,7 @@ export class Row extends Component { children, ...others } = this.props - /* eslint-enable no-unused-vars */ + /* eslint-enable @typescript-eslint/no-unused-vars */ let hiddenClassObj if (hidden === true) { @@ -65,8 +65,12 @@ export class Row extends Component { ...(others.style || {}) } newChildren = Children.map(children, (child: React.ReactElement) => { - // @ts-ignore - if (child && child.type && typeof child.type === 'function' && child.type.isNextCol) { + if ( + child && + child.type && + typeof child.type === 'function' && + (child.type as any).isNextCol + ) { const newChild = cloneElement(child, { style: { paddingLeft: halfGutterString, @@ -131,7 +135,9 @@ export class Col extends Component { } ret[`${prefix}col-${point}-${pointProps.span}`] = !!pointProps.span - ret[`${prefix}col-${point}-offset-${pointProps.offset}`] = !!pointProps.offset + ret[ + `${prefix}col-${point}-offset-${pointProps.offset}` + ] = !!pointProps.offset return ret }, {}) diff --git a/packages/antd/src/components/layout.tsx b/packages/antd/src/components/layout.tsx index b3418c13b3b..680633e7f02 100644 --- a/packages/antd/src/components/layout.tsx +++ b/packages/antd/src/components/layout.tsx @@ -19,29 +19,32 @@ const normalizeCol = ( } } -export const FormLayout = createVirtualBox('layout', ({ children, ...props }) => { - return ( - - {value => { - const newValue = { ...value, ...props } - const child = - newValue.inline || newValue.className || newValue.style ? ( -
- {children} -
- ) : ( - children - ) - return {child} - }} - - ) -}) +export const FormLayout = createVirtualBox( + 'layout', + ({ children, ...props }) => { + return ( + + {value => { + const newValue = { ...value, ...props } + const child = + newValue.inline || newValue.className || newValue.style ? ( +
+ {children} +
+ ) : ( + children + ) + return {child} + }} + + ) + } +) export const FormItemGrid = createVirtualBox( 'grid', @@ -60,7 +63,14 @@ export const FormItemGrid = createVirtualBox( return React.createElement( FormConsumer, {}, - ({ labelAlign, labelTextAlign, labelCol, wrapperCol, size, autoAddColon }) => { + ({ + labelAlign, + labelTextAlign, + labelCol, + wrapperCol, + size, + autoAddColon + }) => { return React.createElement( FormItem, { @@ -103,7 +113,11 @@ export const FormItemGrid = createVirtualBox( const lastSpan: number = 24 - cols.reduce((buf, col) => { - return buf + Number(col.span ? col.span : 0) + Number(col.offset ? col.offset : 0) + return ( + buf + + Number(col.span ? col.span : 0) + + Number(col.offset ? col.offset : 0) + ) }, 0) for (let i = 0; i < offset; i++) { @@ -118,10 +132,10 @@ export const FormItemGrid = createVirtualBox( {children.reduce((buf, child, key) => { return child ? buf.concat( - - {child} - - ) + + {child} + + ) : buf }, [])} @@ -203,7 +217,18 @@ export const FormBlock = createVirtualBox( export const FormTextBox = createVirtualBox( 'text-box', styled( - ({ title, description, help, gutter, className, text, name, extra, children, ...props }) => { + ({ + title, + description, + help, + gutter, + className, + text, + name, + extra, + children, + ...props + }) => { const ref: React.RefObject = useRef() const arrChildren = toArr(children) const split = text.split('%s') @@ -212,7 +237,9 @@ export const FormTextBox = createVirtualBox( if (ref.current) { const eles = ref.current.querySelectorAll('.text-box-field') eles.forEach((el: HTMLElement) => { - const ctrl = el.querySelector('.ant-form-item-control>*:not(.ant-form-item-space)') + const ctrl = el.querySelector( + '.ant-form-item-control>*:not(.ant-form-item-space)' + ) if (ctrl) { el.style.width = getComputedStyle(ctrl).width } @@ -243,7 +270,14 @@ export const FormTextBox = createVirtualBox( return React.createElement( FormConsumer, {}, - ({ labelAlign, labelTextAlign, labelCol, wrapperCol, size, autoAddColon }) => { + ({ + labelAlign, + labelTextAlign, + labelCol, + wrapperCol, + size, + autoAddColon + }) => { return React.createElement( FormItem, { diff --git a/packages/antd/src/fields/array.tsx b/packages/antd/src/fields/array.tsx index da4c6fcc056..ba8f5c23771 100644 --- a/packages/antd/src/fields/array.tsx +++ b/packages/antd/src/fields/array.tsx @@ -4,7 +4,7 @@ import { Icon } from 'antd' import styled, { css } from 'styled-components' export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })` - ${props => (!props.hasText ? `width:30px; height:30px;` : '')} + ${props => (!props.hasText ? 'width:30px; height:30px;' : '')} margin-right:10px; border-radius: ${props => (!props.hasText ? '100px' : 'none')}; border: ${props => (!props.hasText ? '1px solid #eee' : 'none')}; diff --git a/packages/antd/src/fields/date.tsx b/packages/antd/src/fields/date.tsx index b421afa6c58..c2a70981c7c 100644 --- a/packages/antd/src/fields/date.tsx +++ b/packages/antd/src/fields/date.tsx @@ -11,7 +11,10 @@ import { isArr } from '../utils' -const { RangePicker: AntRangePicker, MonthPicker: AntMonthPicker } = AntDatePicker +const { + RangePicker: AntRangePicker, + MonthPicker: AntMonthPicker +} = AntDatePicker class AntYearPicker extends React.Component { public render() { @@ -57,7 +60,10 @@ registerFormField( connect({ getValueFromEvent(_, value) { const props = this.props || {} - return transformMoment(value, props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD') + return transformMoment( + value, + props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD' + ) }, getProps: compose( mapStyledProps, @@ -73,7 +79,10 @@ registerFormField( getValueFromEvent(_, [startDate, endDate]) { const props = this.props || {} const format = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD' - return [transformMoment(startDate, format), transformMoment(endDate, format)] + return [ + transformMoment(startDate, format), + transformMoment(endDate, format) + ] }, getProps: compose( mapStyledProps, diff --git a/packages/antd/src/fields/password.tsx b/packages/antd/src/fields/password.tsx index e47221e57b7..9d67ce2c0ea 100644 --- a/packages/antd/src/fields/password.tsx +++ b/packages/antd/src/fields/password.tsx @@ -176,7 +176,10 @@ const Password = styled( } public componentDidUpdate(prevProps) { - if (prevProps.value !== this.props.value && this.props.value !== this.state.value) { + if ( + prevProps.value !== this.props.value && + this.props.value !== this.state.value + ) { this.setState({ value: this.props.value, strength: getStrength(this.props.value) diff --git a/packages/antd/src/fields/range.tsx b/packages/antd/src/fields/range.tsx index 03a930d111a..edab597790a 100644 --- a/packages/antd/src/fields/range.tsx +++ b/packages/antd/src/fields/range.tsx @@ -45,7 +45,15 @@ registerFormField( } else { newMarks = marks } - return + return ( + + ) } } ) diff --git a/packages/antd/src/fields/table.tsx b/packages/antd/src/fields/table.tsx index 5bc7bb353e5..8fdf6886891 100644 --- a/packages/antd/src/fields/table.tsx +++ b/packages/antd/src/fields/table.tsx @@ -4,6 +4,138 @@ import { registerFormField } from '@uform/react' import { isFn, toArr } from '@uform/utils' import { ArrayField } from './array' +export interface IColumnProps { + title?: string + dataIndex?: string + width?: string | number + cell: (item?: any, index?: number) => React.ReactElement +} + +class Column extends Component { + public static displayName = '@schema-table-column' + public render() { + return this.props.children + } +} + +registerFormField( + 'table', + styled( + class extends ArrayField { + public createFilter(key, payload) { + const { schema } = this.props + const columnFilter: (key: string, payload: any) => boolean = + schema['x-props'] && schema['x-props'].columnFilter + + return (render, otherwise) => { + if (isFn(columnFilter)) { + return columnFilter(key, payload) + ? isFn(render) + ? render() + : render + : isFn(otherwise) + ? otherwise() + : otherwise + } else { + return render() + } + } + } + + public render() { + const { + value, + schema, + locale, + className, + renderField, + getOrderProperties + } = this.props + const cls = this.getProps('className') + const style = this.getProps('style') + const operationsWidth = this.getProps('operationsWidth') + return ( +
+
+ + {getOrderProperties(schema.items).reduce( + (buf, { key, schema }) => { + const filter = this.createFilter(key, schema) + const res = filter( + () => { + return buf.concat( + { + return renderField([index, key]) + }} + /> + ) + }, + () => { + return buf + } + ) + return res + }, + [] + )} + + { + return ( +
+ {this.renderRemove(index, item)} + {this.renderMoveDown(index, item)} + {this.renderMoveUp(index)} + {this.renderExtraOperations(index)} +
+ ) + }} + /> +
+ {this.renderAddition()} +
+
+ ) + } + } + )` + display: inline-block; + .array-item-addition { + line-height: normal !important; + padding: 10px; + background: #fbfbfb; + border-left: 1px solid #dcdee3; + border-right: 1px solid #dcdee3; + border-bottom: 1px solid #dcdee3; + .ant-btn-text { + color: #888; + i { + margin-right: 3px; + } + } + } + .ant-table-cell-wrapper > .ant-form-item { + margin-bottom: 0; + } + .array-item-operator { + display: flex; + } + ` +) + export interface ITableProps { className?: string dataSource: any @@ -18,10 +150,14 @@ const Table = styled( return (
{isFn(col.cell) - ? col.cell(record ? record[col.dataIndex] : undefined, rowIndex, record) + ? col.cell( + record ? record[col.dataIndex] : undefined, + rowIndex, + record + ) : record - ? record[col.dataIndex] - : undefined} + ? record[col.dataIndex] + : undefined}
) } @@ -39,7 +175,9 @@ const Table = styled( className={'ant-table-header-node'} style={{ minWidth: col.width }} > -
{col.title}
+
+ {col.title} +
) })} @@ -77,7 +215,9 @@ const Table = styled(
@@ -91,7 +231,10 @@ const Table = styled( const columns = [] React.Children.forEach(children, child => { if (React.isValidElement(child as React.ReactElement)) { - if (child.type === Column || child.type.displayName === '@schema-table-column') { + if ( + child.type === Column || + child.type.displayName === '@schema-table-column' + ) { columns.push(child.props) } } @@ -106,7 +249,9 @@ const Table = styled( return (
-
{this.renderTable(columns, dataSource)}
+
+ {this.renderTable(columns, dataSource)} +
) @@ -210,132 +355,3 @@ const Table = styled( font-size: 12px; } ` - -export interface IColumnProps { - title?: string - dataIndex?: string - width?: string | number - cell: (item?: any, index?: number) => React.ReactElement -} - -class Column extends Component { - public static displayName = '@schema-table-column' - public render() { - return this.props.children - } -} - -registerFormField( - 'table', - styled( - class extends ArrayField { - public createFilter(key, payload) { - const { schema } = this.props - const columnFilter: (key: string, payload: any) => boolean = - schema['x-props'] && schema['x-props'].columnFilter - - return (render, otherwise) => { - if (isFn(columnFilter)) { - return columnFilter(key, payload) - ? isFn(render) - ? render() - : render - : isFn(otherwise) - ? otherwise() - : otherwise - } else { - return render() - } - } - } - - public render() { - const { - value, - schema, - locale, - className, - renderField, - getOrderProperties - } = this.props - const cls = this.getProps('className') - const style = this.getProps('style') - const operationsWidth = this.getProps('operationsWidth') - return ( -
-
- - {getOrderProperties(schema.items).reduce((buf, { key, schema }) => { - const filter = this.createFilter(key, schema) - const res = filter( - () => { - return buf.concat( - { - return renderField([index, key]) - }} - /> - ) - }, - () => { - return buf - } - ) - return res - }, [])} - - { - return ( -
- {this.renderRemove(index, item)} - {this.renderMoveDown(index, item)} - {this.renderMoveUp(index)} - {this.renderExtraOperations(index)} -
- ) - }} - /> -
- {this.renderAddition()} -
-
- ) - } - } - )` - display: inline-block; - .array-item-addition { - line-height: normal !important; - padding: 10px; - background: #fbfbfb; - border-left: 1px solid #dcdee3; - border-right: 1px solid #dcdee3; - border-bottom: 1px solid #dcdee3; - .ant-btn-text { - color: #888; - i { - margin-right: 3px; - } - } - } - .ant-table-cell-wrapper > .ant-form-item { - margin-bottom: 0; - } - .array-item-operator { - display: flex; - } - ` -) diff --git a/packages/antd/src/fields/upload.tsx b/packages/antd/src/fields/upload.tsx index d990fd2d713..f36d11006ad 100644 --- a/packages/antd/src/fields/upload.tsx +++ b/packages/antd/src/fields/upload.tsx @@ -117,7 +117,11 @@ const normalizeFileList = fileList => { } const shallowClone = val => { - let result = isArr(val) ? [...val] : typeof val === 'object' ? { ...val } : val + let result = isArr(val) + ? [...val] + : typeof val === 'object' + ? { ...val } + : val if (isArr(result)) { result = result.map(item => ({ ...item, @@ -137,7 +141,7 @@ export interface IUploaderState { } // TODO 能不能直接引用 antd 里面的接口定义呢 ? -export declare type UploadListType = 'text' | 'picture' | 'picture-card'; +export declare type UploadListType = 'text' | 'picture' | 'picture-card' export interface IUploaderProps { onChange: (value: any[]) => void @@ -153,12 +157,15 @@ registerFormField( })( class Uploader extends React.Component { public static defaultProps = { - action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload', + action: + 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload', listType: 'text', multiple: true, className: 'antd-uploader' } + readonly state: IUploaderState + constructor(props) { super(props) this.state = { @@ -181,7 +188,9 @@ registerFormField( const { onChange } = this.props fileList = toArr(fileList) if ( - fileList.every(file => file.status === 'done' || file.imgURL || file.downloadURL) && + fileList.every( + file => file.status === 'done' || file.imgURL || file.downloadURL + ) && fileList.length ) { fileList = normalizeFileList(fileList) diff --git a/packages/antd/src/form.tsx b/packages/antd/src/form.tsx index 4b6a6719dec..6aee3e96deb 100644 --- a/packages/antd/src/form.tsx +++ b/packages/antd/src/form.tsx @@ -1,7 +1,7 @@ import React from 'react' import { registerFormWrapper, registerFieldMiddleware } from '@uform/react' import classNames from 'classnames' -import { Popover, Icon, Row, Col } from 'antd' +import { Row, Col, Popover, Icon } from 'antd' import styled from 'styled-components' import LOCALE from './locale' @@ -13,7 +13,10 @@ import { IFormItemProps, IFormProps } from './type' * */ -export const { Provider: FormProvider, Consumer: FormConsumer } = React.createContext(undefined) +export const { + Provider: FormProvider, + Consumer: FormConsumer +} = React.createContext(undefined) const normalizeCol = col => { return typeof col === 'object' ? col : { span: col } @@ -45,6 +48,7 @@ export const FormItem = styled( } public render() { + /* eslint-disable @typescript-eslint/no-unused-vars */ const { className, labelAlign, @@ -66,7 +70,7 @@ export const FormItem = styled( schema, ...others } = this.props - + /* eslint-enable @typescript-eslint/no-unused-vars */ const itemClassName = classNames({ [`${prefix}form-item`]: true, [`${prefix}${labelAlign}`]: labelAlign, @@ -160,7 +164,11 @@ export const FormItem = styled( } = this.props const message = ( -
+
{help &&
{help}
} {!help && !isPopDescription(extra, maxTipsNum) && (
{extra}
@@ -173,7 +181,12 @@ export const FormItem = styled( {message}
) - if ((wrapperCol || labelCol) && labelAlign !== 'top' && !isTableColItem && label) { + if ( + (wrapperCol || labelCol) && + labelAlign !== 'top' && + !isTableColItem && + label + ) { return ( {ele} @@ -188,7 +201,10 @@ export const FormItem = styled( return ( {/* TODO antd 没有 size 属性 */} - + ) } @@ -328,6 +344,7 @@ registerFormWrapper(OriginForm => { labelTextAlign, autoAddColon, children, + // eslint-disable-next-line @typescript-eslint/no-unused-vars component, labelCol, layout, @@ -363,7 +380,9 @@ registerFormWrapper(OriginForm => { @@ -404,7 +423,16 @@ const isTableColItem = (path, getSchema) => { registerFieldMiddleware(Field => { return props => { - const { name, errors, editable, path, required, schema, schemaPath, getSchema } = props + const { + name, + errors, + editable, + path, + required, + schema, + schemaPath, + getSchema + } = props if (path.length === 0) { // 根节点是不需要包FormItem的 return React.createElement(Field, props) @@ -412,7 +440,15 @@ registerFieldMiddleware(Field => { return React.createElement( FormConsumer, {}, - ({ labelAlign, labelTextAlign, labelCol, maxTipsNum, wrapperCol, size, autoAddColon }) => { + ({ + labelAlign, + labelTextAlign, + labelCol, + maxTipsNum, + wrapperCol, + size, + autoAddColon + }) => { return React.createElement( FormItem, { @@ -426,14 +462,18 @@ registerFieldMiddleware(Field => { ...schema['x-item-props'], label: schema.title, noMinHeight: schema.type === 'object' && !schema['x-component'], - isTableColItem: isTableColItem(schemaPath.slice(0, schemaPath.length - 2), getSchema), + isTableColItem: isTableColItem( + schemaPath.slice(0, schemaPath.length - 2), + getSchema + ), type: schema['x-component'] || schema.type, id: name, validateState: toArr(errors).length ? 'error' : undefined, required: editable === false ? false : required, extra: schema.description, help: - toArr(errors).join(' , ') || (schema['x-item-props'] && schema['x-item-props'].help) + toArr(errors).join(' , ') || + (schema['x-item-props'] && schema['x-item-props'].help) }, React.createElement(Field, props) ) diff --git a/packages/antd/src/index.tsx b/packages/antd/src/index.tsx index 117acb509dd..7b6ad580701 100644 --- a/packages/antd/src/index.tsx +++ b/packages/antd/src/index.tsx @@ -23,4 +23,4 @@ export * from './components/formButtonGroup' export * from './components/button' export * from './components/layout' export { mapStyledProps, mapTextComponent } -export default SchemaForm \ No newline at end of file +export default SchemaForm diff --git a/packages/antd/src/locale.ts b/packages/antd/src/locale.ts index d32794ca879..aa28ff56c6e 100644 --- a/packages/antd/src/locale.ts +++ b/packages/antd/src/locale.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ export default { addItem: '添加', array_invalid_minItems: '条目数不允许小于%s条', diff --git a/packages/antd/src/utils.tsx b/packages/antd/src/utils.tsx index 97c9602eeff..f6a8c597761 100644 --- a/packages/antd/src/utils.tsx +++ b/packages/antd/src/utils.tsx @@ -45,13 +45,17 @@ const Text = styled(props => { let value if (props.dataSource && props.dataSource.length) { const find = props.dataSource.filter(({ value }) => - Array.isArray(props.value) ? props.value.indexOf(value) > -1 : props.value === value + Array.isArray(props.value) + ? props.value.indexOf(value) > -1 + : props.value === value ) value = find.map(item => item.label).join(' , ') } else { value = Array.isArray(props.value) ? props.value.join(' ~ ') - : String(props.value === undefined || props.value === null ? '' : props.value) + : String( + props.value === undefined || props.value === null ? '' : props.value + ) } return (
@@ -80,7 +84,8 @@ export interface IStateLoadingProps { dataSource: any[] } -const loadingSvg = `` +const loadingSvg = + '' export const StateLoading = (Target: React.ComponentClass) => { return class Select extends React.Component { @@ -115,7 +120,16 @@ export const StateLoading = (Target: React.ComponentClass) => { public mapState() { const { state } = this.props const loadingName = 'anticon-spin' - const iconSizeClassNames = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'] + const iconSizeClassNames = [ + 'xxs', + 'xs', + 'small', + 'medium', + 'large', + 'xl', + 'xxl', + 'xxxl' + ] this.classList = this.classList || [] if (this.wrapperDOM) { @@ -170,10 +184,15 @@ export const acceptEnum = component => { } } -export const mapStyledProps = (props: IConnectProps, { loading, size }: IFieldProps) => { +export const mapStyledProps = ( + props: IConnectProps, + { loading, size }: IFieldProps +) => { if (loading) { props.state = props.state || 'loading' - props.suffix = + props.suffix = ( + + ) } if (size) { props.size = size @@ -183,7 +202,10 @@ export const mapStyledProps = (props: IConnectProps, { loading, size }: IFieldPr export const mapTextComponent = ( Target: React.ComponentClass, props, - { editable, name }: { editable: boolean | ((name: string) => boolean); name: string } + { + editable, + name + }: { editable: boolean | ((name: string) => boolean); name: string } ): React.ComponentClass => { if (editable !== undefined) { if (isFn(editable)) { diff --git a/packages/builder/src/App.js b/packages/builder/src/App.js index 3d638edc981..7a4c3f81b7a 100644 --- a/packages/builder/src/App.js +++ b/packages/builder/src/App.js @@ -66,9 +66,9 @@ class App extends Component { this.props.changeGbConfig(value) }} defaultValue={this.props.gbConfig} - labelAlign='left' + labelAlign="left" labelCol={10} - labelTextAlign='right' + labelTextAlign="right" > {globalCfgList.map(props => ( @@ -234,10 +234,10 @@ class App extends Component { ref={this.appRef} className={cls('schemaform-app', this.props.className)} > -
+
{ this.props.onBackBtnClick() }} @@ -245,26 +245,26 @@ class App extends Component { 后退

编辑表单

-
+
-
-
+
+
{this.getLayoutTpl()}
-
+
-
+
{UIVersion === '1.x' ? ( { ) const comp2 = renderer.create( - hello + hello ) const comp3 = renderer.create( - + ) let tree1 = comp1.toJSON() let tree2 = comp2.toJSON() diff --git a/packages/builder/src/__tests__/reducers/initSchemaData.spec.js b/packages/builder/src/__tests__/reducers/initSchemaData.spec.js index 91ad91e77b0..f152d225457 100644 --- a/packages/builder/src/__tests__/reducers/initSchemaData.spec.js +++ b/packages/builder/src/__tests__/reducers/initSchemaData.spec.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ import initSchemaDataReducer from '../../reducers/initSchemaData' describe('initSchemaData reducers', () => { diff --git a/packages/builder/src/__tests__/util.spec.js b/packages/builder/src/__tests__/util.spec.js index fe683917cf9..c06ced25823 100644 --- a/packages/builder/src/__tests__/util.spec.js +++ b/packages/builder/src/__tests__/util.spec.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/camelcase */ import { getCompDetailById, wrapSubmitSchema, diff --git a/packages/builder/src/components/editor/index.js b/packages/builder/src/components/editor/index.js index ccbe7b470a7..060f6c7fcb0 100644 --- a/packages/builder/src/components/editor/index.js +++ b/packages/builder/src/components/editor/index.js @@ -88,10 +88,10 @@ class Component extends React.Component { return ( -
+
{ try { // eslint-disable-next-line diff --git a/packages/builder/src/components/fields/field.js b/packages/builder/src/components/fields/field.js index 09c804a8538..df6f31d639a 100644 --- a/packages/builder/src/components/fields/field.js +++ b/packages/builder/src/components/fields/field.js @@ -47,7 +47,7 @@ const Box = ({ style={style} > 组件

可将选项拖动到主面板进行编辑

-