From 4f7a0bfa6258d9f8a5531eb0454a8f98dd2d3c58 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Wed, 27 May 2020 19:31:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20tsc=20=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish.sh | 15 +- src/components/ColorPicker.tsx | 4 +- src/components/Input.tsx | 4 +- src/components/LazyComponent.tsx | 1 + src/components/Overlay.tsx | 2 +- src/components/Radios.tsx | 4 +- src/components/Range.tsx | 3 +- src/components/RichText.tsx | 17 +- src/components/Textarea.tsx | 1 + src/components/Tree.tsx | 10 +- src/renderers/Audio.tsx | 4 +- src/renderers/Carousel.tsx | 4 +- src/renderers/Container.tsx | 4 +- src/renderers/Form/Array.tsx | 2 +- src/renderers/Form/Button.tsx | 2 +- src/renderers/Form/Combo.tsx | 400 +++++++++++++++---------- src/renderers/Form/Container.tsx | 5 +- src/renderers/Form/Grid.tsx | 23 +- src/renderers/Form/HBox.tsx | 29 +- src/renderers/Form/IconPicker.tsx | 1 + src/renderers/Form/InputGroup.tsx | 6 +- src/renderers/Form/Item.tsx | 193 ++++++------ src/renderers/Form/NestedSelect.tsx | 6 +- src/renderers/Form/Number.tsx | 1 + src/renderers/Form/Rating.tsx | 1 - src/renderers/Json.tsx | 2 +- src/renderers/Operation.tsx | 2 +- src/renderers/QRCode.tsx | 1 + src/renderers/Service.tsx | 2 +- src/renderers/Video.tsx | 27 +- src/store/crud.ts | 3 +- src/store/service.ts | 2 + src/theme.tsx | 63 ++-- src/utils/dom.tsx | 8 +- src/utils/json-schema-2-amis-schema.ts | 4 +- tsconfig.json | 21 +- 36 files changed, 483 insertions(+), 394 deletions(-) diff --git a/publish.sh b/publish.sh index 73c35bb6..c8f1bdcf 100644 --- a/publish.sh +++ b/publish.sh @@ -4,22 +4,21 @@ set -e rm -rf lib rm -rf output -fis3 release publish -c -rm -rf lib/node_modules +fis3 release publish -c +rm -rf lib/node_modules # 生成 sdk rm -rf sdk && fis3 release publish-sdk -c # 生成 .d.ts 文件 -tsc --allowJs --declaration || true +tsc --allowJs --declaration -cd output; +cd output -for f in `find . -name "*.d.ts"`; - do mkdir -p ../lib/`dirname $f` && mv $f ../lib/`dirname $f`; +for f in $(find . -name "*.d.ts"); do + mkdir -p ../lib/$(dirname $f) && mv $f ../lib/$(dirname $f) done -cd ..; +cd .. rm -rf output - \ No newline at end of file diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx index 2e2d0b8e..5528db2f 100644 --- a/src/components/ColorPicker.tsx +++ b/src/components/ColorPicker.tsx @@ -7,7 +7,7 @@ import React from 'react'; import cx from 'classnames'; import {findDOMNode} from 'react-dom'; -import {SketchPicker, GithubPicker, ColorResult} from 'react-color'; +import {SketchPicker, GithubPicker, ColorState} from 'react-color'; import {Icon} from './icons'; import Overlay from './Overlay'; import uncontrollable from 'uncontrollable'; @@ -177,7 +177,7 @@ export class ColorControl extends React.PureComponent< return image.style.color !== 'rgb(255, 255, 255)'; } - handleChange(color: ColorResult) { + handleChange(color: ColorState) { const { onChange, format diff --git a/src/components/Input.tsx b/src/components/Input.tsx index a7274cae..53f78bbe 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -66,4 +66,6 @@ class InputInner extends React.Component { export default React.forwardRef((props, ref) => { return ; -}) as React.ReactType>; +}) as React.ComponentType< + React.InputHTMLAttributes & {ref?: any} +>; diff --git a/src/components/LazyComponent.tsx b/src/components/LazyComponent.tsx index b8810289..86bf226e 100644 --- a/src/components/LazyComponent.tsx +++ b/src/components/LazyComponent.tsx @@ -5,6 +5,7 @@ */ import React from 'react'; +// @ts-ignore import VisibilitySensor from 'react-visibility-sensor'; import Spinner from './Spinner'; diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx index 9dadbdec..fe9d7140 100644 --- a/src/components/Overlay.tsx +++ b/src/components/Overlay.tsx @@ -21,7 +21,7 @@ BasePosition.propTypes.placement = () => null; class Position extends BasePosition { props: any; _lastTarget: any; - setState: Function; + setState: (state: any) => void; updatePosition(target: any) { this._lastTarget = target; diff --git a/src/components/Radios.tsx b/src/components/Radios.tsx index eef9b777..b3a9e19b 100644 --- a/src/components/Radios.tsx +++ b/src/components/Radios.tsx @@ -146,9 +146,7 @@ export class Radios extends React.Component { multiple: false, delimiter, valueField, - options, - joinValues, - extractValue + options }); let body: Array = []; diff --git a/src/components/Range.tsx b/src/components/Range.tsx index 9d79c1fa..3338df00 100644 --- a/src/components/Range.tsx +++ b/src/components/Range.tsx @@ -24,6 +24,7 @@ interface RangeProps extends RendererProps { | number; classPrefix: string; classnames: ClassNamesFn; + onChange: (value: any) => void; } export class Range extends React.Component { @@ -53,12 +54,10 @@ export class Range extends React.Component { return ( ); } diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx index e136ae1c..c8df6518 100644 --- a/src/components/RichText.tsx +++ b/src/components/RichText.tsx @@ -88,16 +88,9 @@ export default class FroalaEditor extends React.Component { this.$element = $(ref); this.setContent(true); this.registerEvents(); - resizeSensor( - ref.parentElement, - () => { - $(ref) - .prev('.fr-box') - .find('.fr-toolbar') - .css('width', ''); - }, - true - ); + resizeSensor(ref.parentElement, () => { + $(ref).prev('.fr-box').find('.fr-toolbar').css('width', ''); + }); this.$editor = this.$element .froalaEditor(this.config) .data('froala.editor').$el; @@ -164,12 +157,12 @@ export default class FroalaEditor extends React.Component { this.registerEvent( this.$element, 'froalaEditor.contentChanged', - function() { + function () { self.updateModel(); } ); if (this.config.immediateReactModelUpdate) { - this.registerEvent(this.$editor, 'keyup', function() { + this.registerEvent(this.$editor, 'keyup', function () { self.updateModel(); }); } diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx index 9c76b6ab..c5d4b422 100644 --- a/src/components/Textarea.tsx +++ b/src/components/Textarea.tsx @@ -1,2 +1,3 @@ +// @ts-ignore import Textarea from 'react-textarea-autosize'; export default Textarea; diff --git a/src/components/Tree.tsx b/src/components/Tree.tsx index 3331cc79..d67ed56a 100644 --- a/src/components/Tree.tsx +++ b/src/components/Tree.tsx @@ -132,8 +132,6 @@ export class TreeSelector extends React.Component< this.setState({ value: value2array(props.value, { - joinValues: props.joinValues, - extractValue: props.extractValue, multiple: props.multiple, delimiter: props.delimiter, valueField: props.valueField, @@ -157,8 +155,6 @@ export class TreeSelector extends React.Component< this.props.options !== nextProps.options ) { toUpdate.value = value2array(nextProps.value, { - joinValues: nextProps.joinValues, - extractValue: nextProps.extractValue, multiple: nextProps.multiple, delimiter: nextProps.delimiter, valueField: nextProps.valueField, @@ -597,8 +593,10 @@ export class TreeSelector extends React.Component< {showIcon ? ( ) : null} diff --git a/src/renderers/Audio.tsx b/src/renderers/Audio.tsx index 7332c5f9..c0e6d4b3 100644 --- a/src/renderers/Audio.tsx +++ b/src/renderers/Audio.tsx @@ -33,8 +33,8 @@ export interface AudioState { export class Audio extends React.Component { audio: any; - progressTimeout: number; - durationTimeout: number; + progressTimeout: NodeJS.Timeout; + durationTimeout: NodeJS.Timeout; static defaultProps: Pick< AudioProps, diff --git a/src/renderers/Carousel.tsx b/src/renderers/Carousel.tsx index ca0956cc..014e01ba 100644 --- a/src/renderers/Carousel.tsx +++ b/src/renderers/Carousel.tsx @@ -74,8 +74,8 @@ const defaultSchema = { export class Carousel extends React.Component { wrapperRef: React.RefObject = React.createRef(); - intervalTimeout: number; - durationTimeout: number; + intervalTimeout: NodeJS.Timer; + durationTimeout: NodeJS.Timer; static defaultProps: Pick< CarouselProps, diff --git a/src/renderers/Container.tsx b/src/renderers/Container.tsx index 5fc2ab50..261de800 100644 --- a/src/renderers/Container.tsx +++ b/src/renderers/Container.tsx @@ -24,10 +24,10 @@ export default class Container extends React.Component<
{children ? typeof children === 'function' - ? (children(this.props) as JSX.Element) + ? ((children as any)(this.props) as JSX.Element) : (children as JSX.Element) : body - ? (render('body', body) as JSX.Element) + ? (render('body', body as any) as JSX.Element) : null}
); diff --git a/src/renderers/Form/Array.tsx b/src/renderers/Form/Array.tsx index b28beb2b..045d3ee1 100644 --- a/src/renderers/Form/Array.tsx +++ b/src/renderers/Form/Array.tsx @@ -37,7 +37,7 @@ export default class ArrayControl extends React.Component { return ( {} export class ButtonControl extends React.Component { static defaultProps: Partial = {}; diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index 080414ec..9f46d5d9 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -22,7 +22,7 @@ import {dataMapping, resolveVariable} from '../../utils/tpl-builtin'; import {isEffectiveApi} from '../../utils/api'; import {Alert2} from '../../components'; import memoize from 'lodash/memoize'; -import {Icon}from '../../components/icons' +import {Icon} from '../../components/icons'; export interface Condition { test: string; controls: Array; @@ -31,11 +31,11 @@ export interface Condition { mode?: string; } -function pickVars(vars:any, fields: Array) { - return fields.reduce((data:any, key: string) => { +function pickVars(vars: any, fields: Array) { + return fields.reduce((data: any, key: string) => { data[key] = resolveVariable(key, vars); return data; - }, {}) + }, {}); } export interface ComboProps extends FormControlProps { @@ -80,7 +80,25 @@ export interface ComboProps extends FormControlProps { } export default class ComboControl extends React.Component { - static defaultProps = { + static defaultProps: Pick< + ComboProps, + | 'minLength' + | 'maxLength' + | 'multiple' + | 'multiLine' + | 'addButtonClassName' + | 'formClassName' + | 'subFormMode' + | 'draggableTip' + | 'addButtonText' + | 'canAccessSuperData' + | 'addIcon' + | 'dragIcon' + | 'deleteIcon' + | 'tabsMode' + | 'tabsStyle' + | 'placeholder' + > = { minLength: 0, maxLength: 0, multiple: false, @@ -188,13 +206,19 @@ export default class ComboControl extends React.Component { // combo 进来了新的值，且这次 form 初始化时带来的新值变化，但是之前的值已经 onInit 过了 // 所以，之前 onInit 设置进去的初始值是过时了的。这个时候修复一下。 - if (nextProps.value !== props.value && !props.formInited && this.subFormDefaultValues.length) { - this.subFormDefaultValues = this.subFormDefaultValues.map((item, index) => { - return { - ...item, - values: values[index] + if ( + nextProps.value !== props.value && + !props.formInited && + this.subFormDefaultValues.length + ) { + this.subFormDefaultValues = this.subFormDefaultValues.map( + (item, index) => { + return { + ...item, + values: values[index] + }; } - }) + ); } } } @@ -390,7 +414,10 @@ export default class ComboControl extends React.Component { setted: false }); - if (syncDefaultValue === false || this.subFormDefaultValues.length !== this.subForms.length) { + if ( + syncDefaultValue === false || + this.subFormDefaultValues.length !== this.subForms.length + ) { return; } @@ -429,11 +456,15 @@ export default class ComboControl extends React.Component { handleSingleFormInit(values: any) { const {syncDefaultValue, setPrinstineValue, value, nullable} = this.props; - - if (syncDefaultValue !== false && !nullable && isObjectShallowModified(value, values) && setPrinstineValue) { + if ( + syncDefaultValue !== false && + !nullable && + isObjectShallowModified(value, values) && + setPrinstineValue + ) { setPrinstineValue({ ...values - }) + }); } } @@ -559,17 +590,33 @@ export default class ComboControl extends React.Component { } memoizedFormatValue = memoize( - (strictMode: boolean, syncFields: Array | void, value: any, index: number, data: any) => { + ( + strictMode: boolean, + syncFields: Array | void, + value: any, + index: number, + data: any + ) => { return createObject( extendObject(data, {index, __index: index, ...data}), { ...value, - ...Array.isArray(syncFields) ? pickVars(data, syncFields!) : null + ...(Array.isArray(syncFields) ? pickVars(data, syncFields!) : null) } ); }, - (strictMode: boolean, syncFields: Array | void, value: any, index: number, data: any) => - Array.isArray(syncFields) ? JSON.stringify([value, index, data, pickVars(data, syncFields)]): strictMode ? JSON.stringify([value, index]) : JSON.stringify([value, index, data]) + ( + strictMode: boolean, + syncFields: Array | void, + value: any, + index: number, + data: any + ) => + Array.isArray(syncFields) + ? JSON.stringify([value, index, data, pickVars(data, syncFields)]) + : strictMode + ? JSON.stringify([value, index]) + : JSON.stringify([value, index, data]) ); formatValue(value: any, index: number = -1) { @@ -583,7 +630,13 @@ export default class ComboControl extends React.Component { value = value || this.defaultValue; - return this.memoizedFormatValue(strictMode !== false, syncFields, value, index, data); + return this.memoizedFormatValue( + strictMode !== false, + syncFields, + value, + index, + data + ); } pickCondition(value: any): Condition | null { @@ -633,14 +686,15 @@ export default class ComboControl extends React.Component { } @autobind - setNull(e:React.MouseEvent) { + setNull(e: React.MouseEvent) { e.preventDefault(); const {onChange} = this.props; onChange(null); - Array.isArray(this.subForms) && this.subForms.forEach(subForm => { - subForm.clearErrors(); - }); + Array.isArray(this.subForms) && + this.subForms.forEach(subForm => { + subForm.clearErrors(); + }); } renderPlaceholder() { @@ -694,7 +748,7 @@ export default class ComboControl extends React.Component { return ( { } ) ) : ( - + {addIcon ? : null} {addButtonText || '新增'} @@ -753,7 +811,11 @@ export default class ComboControl extends React.Component { data-tooltip="删除" data-position="bottom" > - {deleteIcon ? : } + {deleteIcon ? ( + + ) : ( + + )} ); } @@ -891,145 +953,150 @@ export default class ComboControl extends React.Component { multiLine ? `Combo--ver` : `Combo--hor`, noBorder ? `Combo--noBorder` : '', disabled ? 'is-disabled' : '', - (!disabled && draggable && Array.isArray(value) && value.length > 1) ? 'is-draggable' : '', + !disabled && draggable && Array.isArray(value) && value.length > 1 + ? 'is-draggable' + : '' )} >
- {Array.isArray(value) && value.length - ? value.map((value, index, thelist) => { - const toolbar: Array = []; + {Array.isArray(value) && value.length ? ( + value.map((value, index, thelist) => { + const toolbar: Array = []; - // if (!disabled && draggable && thelist.length > 1) { - // toolbar.push( - // - // - // - // ); - // } + // if (!disabled && draggable && thelist.length > 1) { + // toolbar.push( + // + // + // + // ); + // } - if ( - finnalRemovable && // 表达式判断单条是否可删除 - (!itemRemovableOn || - evalExpression(itemRemovableOn, value) !== false) - ) { - toolbar.push( - - {deleteIcon ? : } - - ); - } - - const data = this.formatValue(value, index); - let condition: Condition | null = null; - - if (Array.isArray(conditions) && conditions.length) { - condition = this.pickCondition(data); - controls = condition ? condition.controls : undefined; - } - - let finnalControls = - flat && controls - ? [ - { - ...(controls && controls[0]), - name: 'flat' - } - ] - : controls; - - return ( -
- {!disabled && draggable && thelist.length > 1 ? ( - - ): null} - {condition && typeSwitchable !== false ? ( -
- - ).map(item => ({ + label: item.label, + value: item.label + }))} + value={condition.label} + clearable={false} + /> +
+ ) : null} +
+ {finnalControls ? ( + render( + `multiple/${index}`, + { + type: 'form', + controls: finnalControls, + wrapperComponent: 'div', + wrapWithPanel: false, + mode: multiLine ? subFormMode : 'row', + className: cx(`Combo-form`, formClassName) + }, + { + index, + disabled, + data, + onChange: this.handleChange, + onInit: this.handleFormInit, + onAction: this.handleAction, + ref: this.makeFormRef(index), + lazyChange: changeImmediately ? false : true, + lazyFormChange: changeImmediately ? false : true, + lazyLoad, + canAccessSuperData, + value: undefined, + formItemValue: undefined + } + ) + ) : ( + + 数据非法，或者数据已失效，请移除 + + )} +
+ {toolbar.length ? ( +
{toolbar}
+ ) : null} +
+ ); + }) + ) : placeholder ? (
{placeholder}
- ) : null} + ) : null}
{!disabled ? (
@@ -1092,7 +1159,7 @@ export default class ComboControl extends React.Component { noBorder, disabled, typeSwitchable, - nullable, + nullable } = this.props; let controls = this.props.controls; @@ -1157,13 +1224,24 @@ export default class ComboControl extends React.Component { )}
- {value && nullable ? (清空数据) : null} + {value && nullable ? ( + + 清空数据 + + ) : null} ); } render() { - const {formInited, multiple, className, classPrefix: ns, classnames: cx, disabled} = this.props; + const { + formInited, + multiple, + className, + classPrefix: ns, + classnames: cx, + disabled + } = this.props; return formInited ? (
diff --git a/src/renderers/Form/Container.tsx b/src/renderers/Form/Container.tsx index 0075495b..0f48cc0c 100644 --- a/src/renderers/Form/Container.tsx +++ b/src/renderers/Form/Container.tsx @@ -3,8 +3,11 @@ import {Renderer} from '../../factory'; import cx from 'classnames'; import Container from '../Container'; import FormItem, {FormControlProps} from './Item'; +import {IIRendererStore} from '../../store/iRenderer'; -export interface ContainerProps extends FormControlProps {} +export interface ContainerProps extends FormControlProps { + store: IIRendererStore; +} @FormItem({ type: 'container', diff --git a/src/renderers/Form/Grid.tsx b/src/renderers/Form/Grid.tsx index 36b12667..abe685ad 100644 --- a/src/renderers/Form/Grid.tsx +++ b/src/renderers/Form/Grid.tsx @@ -6,8 +6,11 @@ import {FormItem, FormControlProps} from './Item'; import pick from 'lodash/pick'; import React from 'react'; import cx from 'classnames'; +import {IIRendererStore} from '../../store/iRenderer'; -export interface GridProps extends FormControlProps {} +export interface GridProps extends FormControlProps { + store: IIRendererStore; +} const defaultHorizontal = { left: 'col-sm-4', right: 'col-sm-8', @@ -36,13 +39,17 @@ export class GridRenderer extends Grid { if (node && !node.type && (node.controls || node.tabs || node.feildSet)) { return (
- {renderFormItems(node, ($path as string).replace(/^.*form\//, ''), { - mode: node.mode || 'normal', - horizontal: node.horizontal || defaultHorizontal, - store, - data: store.data, - render - })} + {renderFormItems( + node as any, + ($path as string).replace(/^.*form\//, ''), + { + mode: node.mode || 'normal', + horizontal: node.horizontal || defaultHorizontal, + store, + data: store.data, + render + } + )}
); } diff --git a/src/renderers/Form/HBox.tsx b/src/renderers/Form/HBox.tsx index 61a9e97e..59ec0419 100644 --- a/src/renderers/Form/HBox.tsx +++ b/src/renderers/Form/HBox.tsx @@ -5,9 +5,10 @@ import HBox from '../HBox'; import {Schema} from '../../types'; import cx from 'classnames'; import {isVisible} from '../../utils/helper'; +import {IIRendererStore} from '../../store/iRenderer'; interface HBoxProps extends FormControlProps { - size?: string; + store: IIRendererStore; } @FormItem({ @@ -53,17 +54,21 @@ export class HBoxRenderer extends React.Component { const {render, renderFormItems, formMode, store, $path} = this.props; if (node && !node.type && (node.controls || node.tabs || node.feildSet)) { - return renderFormItems(node, ($path as string).replace(/^.*form\//, ''), { - mode: node.mode || 'normal', - horizontal: node.horizontal || { - left: 4, - right: 8, - offset: 4 - }, - store, - data: store.data, - render - }); + return renderFormItems( + node as any, + ($path as string).replace(/^.*form\//, ''), + { + mode: node.mode || 'normal', + horizontal: node.horizontal || { + left: 4, + right: 8, + offset: 4 + }, + store, + data: store.data, + render + } + ); } return render(region, node.body || node); diff --git a/src/renderers/Form/IconPicker.tsx b/src/renderers/Form/IconPicker.tsx index 79c65fa1..f4baa28f 100644 --- a/src/renderers/Form/IconPicker.tsx +++ b/src/renderers/Form/IconPicker.tsx @@ -1,5 +1,6 @@ import React from 'react'; import cx from 'classnames'; +// @ts-ignore import matchSorter from 'match-sorter'; import keycode from 'keycode'; import Downshift, {StateChangeOptions} from 'downshift'; diff --git a/src/renderers/Form/InputGroup.tsx b/src/renderers/Form/InputGroup.tsx index 2a6ce0e8..0163d8ec 100644 --- a/src/renderers/Form/InputGroup.tsx +++ b/src/renderers/Form/InputGroup.tsx @@ -11,10 +11,11 @@ import { import cx from 'classnames'; import getExprProperties from '../../utils/filter-schema'; import {FormItem, FormControlProps} from './Item'; +import {IFormStore} from '../../store/form'; export interface InputGroupProps extends FormControlProps { controls: Array; - size?: 'xs' | 'sm' | 'normal'; + formStore: IFormStore; } interface InputGroupState { @@ -115,7 +116,8 @@ export class InputGroup extends React.Component< }); let horizontalDeeper = - horizontal || makeHorizontalDeeper(formHorizontal, controls.length); + horizontal || + makeHorizontalDeeper(formHorizontal as any, controls.length); return (
) { delete config.storeType; } - // @observer - class FormItemRenderer extends FormItemWrap { - static defaultProps = { - className: '', - renderLabel: config.renderLabel, - renderDescription: config.renderDescription, - sizeMutable: config.sizeMutable, - wrap: config.wrap, - ...Control.defaultProps - }; - static propsList: any = [ - 'value', - 'defaultValue', - 'onChange', - 'setPrinstineValue', - 'readOnly', - 'strictMode', - ...((Control as any).propsList || []) - ]; + return hoistNonReactStatic( + class extends FormItemWrap { + static defaultProps = { + className: '', + renderLabel: config.renderLabel, + renderDescription: config.renderDescription, + sizeMutable: config.sizeMutable, + wrap: config.wrap, + ...Control.defaultProps + }; + static propsList: any = [ + 'value', + 'defaultValue', + 'onChange', + 'setPrinstineValue', + 'readOnly', + 'strictMode', + ...((Control as any).propsList || []) + ]; - static displayName = `FormItem${config.type ? `(${config.type})` : ''}`; - static ComposedComponent = Control; + static displayName = `FormItem${config.type ? `(${config.type})` : ''}`; + static ComposedComponent = Control; - ref: any; + ref: any; - constructor(props: FormItemProps) { - super(props); - this.refFn = this.refFn.bind(this); - } - - componentWillMount() { - const {validations, formItem: model} = this.props; - - // 组件注册的时候可能默认指定验证器类型 - if (model && !validations && config.validations) { - model.config({ - rules: config.validations - }); + constructor(props: FormItemProps) { + super(props); + this.refFn = this.refFn.bind(this); } - super.componentWillMount(); - } + componentWillMount() { + const {validations, formItem: model} = this.props; - shouldComponentUpdate(nextProps: FormControlProps) { - if (nextProps.strictMode === false || config.strictMode === false) { - return true; + // 组件注册的时候可能默认指定验证器类型 + if (model && !validations && config.validations) { + model.config({ + rules: config.validations + }); + } + + super.componentWillMount(); } - // 把可能会影响视图的白名单弄出来，减少重新渲染次数。 - if (anyChanged(detectProps, this.props, nextProps)) { - return true; + shouldComponentUpdate(nextProps: FormControlProps) { + if (nextProps.strictMode === false || config.strictMode === false) { + return true; + } + + // 把可能会影响视图的白名单弄出来，减少重新渲染次数。 + if (anyChanged(detectProps, this.props, nextProps)) { + return true; + } + + return false; } - return false; - } + getWrappedInstance() { + return this.ref; + } - getWrappedInstance() { - return this.ref; - } + refFn(ref: any) { + this.ref = ref; + } - refFn(ref: any) { - this.ref = ref; - } + renderControl() { + const { + inputClassName, + formItem: model, + classnames: cx, + children, + type, + size, + defaultSize, + ...rest + } = this.props; - renderControl() { - const { - inputClassName, - formItem: model, - classnames: cx, - children, - type, - size, - defaultSize, - ...rest - } = this.props; + const controlSize = size || defaultSize; - const controlSize = size || defaultSize; - - return ( - - ); - } - } - - hoistNonReactStatic(FormItemRenderer, Control); - return FormItemRenderer; + return ( + + ); + } + }, + Control + ); }; } diff --git a/src/renderers/Form/NestedSelect.tsx b/src/renderers/Form/NestedSelect.tsx index 6bed6e39..7cd70186 100644 --- a/src/renderers/Form/NestedSelect.tsx +++ b/src/renderers/Form/NestedSelect.tsx @@ -253,7 +253,7 @@ export default class NestedSelectControl extends React.Component< ) ? xorBy : unionBy; - newValue = fn(items, option, valueField || 'value'); + newValue = fn(items, option as any, valueField || 'value'); } else { newValue = items.filter( item => @@ -406,10 +406,10 @@ export default class NestedSelectControl extends React.Component< > { count={count} half={half} readOnly={readOnly} - size={size} onChange={(value: any) => onChange(value)} />
diff --git a/src/renderers/Json.tsx b/src/renderers/Json.tsx index fcc6945f..5c713828 100644 --- a/src/renderers/Json.tsx +++ b/src/renderers/Json.tsx @@ -84,7 +84,7 @@ const eighties = { } }; -const themes = { +const themes: any = { twilight, eighties }; diff --git a/src/renderers/Operation.tsx b/src/renderers/Operation.tsx index 5fe77b4f..8aecf18e 100644 --- a/src/renderers/Operation.tsx +++ b/src/renderers/Operation.tsx @@ -31,7 +31,7 @@ export class OperationField extends React.Component { level: button.level || (button.icon && !button.label ? 'link' : ''), - ...button + ...(button as any) }, { key: index diff --git a/src/renderers/QRCode.tsx b/src/renderers/QRCode.tsx index 596a0713..e4778fe4 100644 --- a/src/renderers/QRCode.tsx +++ b/src/renderers/QRCode.tsx @@ -3,6 +3,7 @@ import cx from 'classnames'; import {Renderer, RendererProps} from '../factory'; import {FormItem, FormControlProps} from './Form/Item'; import {filter} from '../utils/tpl'; +// @ts-ignore import QrCode from 'qrcode.react'; export interface QRCodeProps extends FormControlProps { diff --git a/src/renderers/Service.tsx b/src/renderers/Service.tsx index f47be77d..93c2cfd0 100644 --- a/src/renderers/Service.tsx +++ b/src/renderers/Service.tsx @@ -28,7 +28,7 @@ export interface ServiceProps extends RendererProps { }; } export default class Service extends React.Component { - timer: number; + timer: NodeJS.Timeout; mounted: boolean; static defaultProps: Partial = { diff --git a/src/renderers/Video.tsx b/src/renderers/Video.tsx index c6b4e214..51174c14 100644 --- a/src/renderers/Video.tsx +++ b/src/renderers/Video.tsx @@ -5,12 +5,14 @@ /* eslint fecs-indent: [0, "space", 2, 2] */ import React from 'react'; + import { Player, Shortcut, BigPlayButton, ControlBar, PlaybackRateMenuButton + // @ts-ignore } from 'video-react'; import {padArr} from '../utils/helper'; import cx from 'classnames'; @@ -315,10 +317,9 @@ export default class Video extends React.Component { const rect = item.getBoundingClientRect(); this.cursorDom.setAttribute( 'style', - `width: ${rect.width - 4}px; height: ${rect.height - - 4}px; left: ${rect.left + 2 - frameRect.left}px; top: ${rect.top + - 2 - - frameRect.top}px;` + `width: ${rect.width - 4}px; height: ${rect.height - 4}px; left: ${ + rect.left + 2 - frameRect.left + }px; top: ${rect.top + 2 - frameRect.top}px;` ); } } @@ -405,14 +406,16 @@ export default class Video extends React.Component {
))} - {/* 补充空白 */ restCount - ? blankArray.map((_, index) => ( -
- )) - : null} + { + /* 补充空白 */ restCount + ? blankArray.map((_, index) => ( +
+ )) + : null + }
); diff --git a/src/store/crud.ts b/src/store/crud.ts index 18d8d30d..51af4d99 100644 --- a/src/store/crud.ts +++ b/src/store/crud.ts @@ -333,6 +333,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore') console.error(e.stack); root.notify('error', e.message); + return; } }); @@ -432,7 +433,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore') self.hasInnerModalOpen = value; }; - const initFromScope = function(scope: any, source: string) { + const initFromScope = function (scope: any, source: string) { let rowsData: Array = resolveVariableAndFilter( source, scope, diff --git a/src/store/service.ts b/src/store/service.ts index 20497af6..3169e71d 100644 --- a/src/store/service.ts +++ b/src/store/service.ts @@ -144,6 +144,7 @@ export const ServiceStore = iRendererStore markFetching(false); e.stack && console.error(e.stack); root.notify('error', e.message || e); + return; } }); @@ -234,6 +235,7 @@ export const ServiceStore = iRendererStore markFetching(false); e.stack && console.error(e.stack); root.notify('error', e.message || e); + return; } }); diff --git a/src/theme.tsx b/src/theme.tsx index 94fac1ed..e9e1dfea 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -126,38 +126,41 @@ export function themeable< classnames?: ClassNamesFn; }; - class EnhancedComponent extends React.Component { - static displayName = `Themeable(${ - ComposedComponent.displayName || ComposedComponent.name - })`; - static contextType = ThemeContext; - static ComposedComponent = ComposedComponent; + const result = hoistNonReactStatic( + class extends React.Component { + static displayName = `Themeable(${ + ComposedComponent.displayName || ComposedComponent.name + })`; + static contextType = ThemeContext; + static ComposedComponent = ComposedComponent; - render() { - const theme: string = this.props.theme || this.context || defaultTheme; - const config = hasTheme(theme) ? getTheme(theme) : getTheme(defaultTheme); - const injectedProps: { - classPrefix: string; - classnames: ClassNamesFn; - } = { - classPrefix: config.classPrefix as string, - classnames: config.classnames - }; + render() { + const theme: string = this.props.theme || this.context || defaultTheme; + const config = hasTheme(theme) + ? getTheme(theme) + : getTheme(defaultTheme); + const injectedProps: { + classPrefix: string; + classnames: ClassNamesFn; + } = { + classPrefix: config.classPrefix as string, + classnames: config.classnames + }; - return ( - - - - ); - } - } - - const result = hoistNonReactStatic(EnhancedComponent, ComposedComponent); + return ( + + + + ); + } + }, + ComposedComponent + ); return result as typeof result & { ComposedComponent: T; diff --git a/src/utils/dom.tsx b/src/utils/dom.tsx index 85cb66ef..8c7987bb 100644 --- a/src/utils/dom.tsx +++ b/src/utils/dom.tsx @@ -70,7 +70,7 @@ function getContainerDimensions(containerNode: any) { getScrollTop(ownerDocument(containerNode).documentElement) || getScrollTop(containerNode); } else { - ({width, height} = getOffset(containerNode)); + ({width, height} = getOffset(containerNode) as any); scroll = getScrollTop(containerNode); } @@ -144,11 +144,13 @@ export function calculatePosition( container: any, padding: any = 0 ) { - const childOffset = + const childOffset: any = container.tagName === 'BODY' ? getOffset(target) : getPosition(target, container); - const {height: overlayHeight, width: overlayWidth} = getOffset(overlayNode); + const {height: overlayHeight, width: overlayWidth} = getOffset( + overlayNode + ) as any; const clip = container.getBoundingClientRect(); const clip2 = overlayNode.getBoundingClientRect(); diff --git a/src/utils/json-schema-2-amis-schema.ts b/src/utils/json-schema-2-amis-schema.ts index b78bda74..b7ade8c2 100644 --- a/src/utils/json-schema-2-amis-schema.ts +++ b/src/utils/json-schema-2-amis-schema.ts @@ -1,7 +1,7 @@ function property2control(property: any, key: any, schema: any) { const requiredList = schema.required || []; - const rest = {}; - const validations = {}; + const rest: any = {}; + const validations: any = {}; let type = 'text'; if (property.type === 'integer') { diff --git a/tsconfig.json b/tsconfig.json index 4f7c38ee..ca4a4c13 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,10 +3,7 @@ "outDir": "output/", "module": "commonjs", "target": "es5", - "lib": [ - "es6", - "dom" - ], + "lib": ["es6", "dom"], "sourceMap": true, "jsx": "react", "moduleResolution": "node", @@ -21,14 +18,10 @@ "strictNullChecks": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, - "typeRoots": [ - "./node_modules/@types", - "./types" - ] + "typeRoots": ["./node_modules/@types", "./types"], + "skipLibCheck": true }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "node_modules", "build", @@ -37,7 +30,5 @@ "webpack", "jest" ], - "types": [ - "typePatches" - ] -} \ No newline at end of file + "types": ["typePatches"] +}