Skip to content

C
common
Commit 0c4f7dae by Vladislav Lagunov
Options

Удаление компонентов с устаревшим апи

parent 378063c2
Showing with 15 additions and 253 deletions
fields/In.tsx deleted 100644 → 0
import * as React from 'react';
import { FieldProps, Provider } from '~/fields';
// Props
export type Props<A> = FieldProps<A>;
// Component
export default class In<A> extends React.Component<Props<A>> {
render() {
const { children, ...rest } = this.props;
return <Provider value={rest}>{children}</Provider>;
}
}
fields/MomentField.tsx
...@@ -16,7 +16,7 @@ import DayPicker from 'react-dates/lib/components/DayPicker'; ...@@ -16,7 +16,7 @@ import DayPicker from 'react-dates/lib/components/DayPicker';
export type Props = StandardProps<React.HTMLProps<HTMLDivElement>, ClassKey, 'value'> & FieldProps<moment.Moment> & WithStyles<ClassKey> & { export type Props = StandardProps<React.HTMLProps<HTMLDivElement>, ClassKey, 'value'> & FieldProps<moment.Moment> & WithStyles<ClassKey> & {
InputProps?: Partial<TextFieldProps>; InputProps?: Partial<TextFieldProps>;
format?: string; format?: string;
nunNull?: boolean; nonNull?: boolean;
} }
...@@ -33,7 +33,7 @@ export interface State { ...@@ -33,7 +33,7 @@ export interface State {
@withStyles(styles) @withStyles(styles)
class MomentField extends React.Component<Props, State> { class MomentField extends React.Component<Props, State> {
static defaultProps = { static defaultProps = {
nunNull: false, nonNull: false,
} as any; } as any;
rootEl: HTMLElement|null; rootEl: HTMLElement|null;
...@@ -131,18 +131,17 @@ class MomentField extends React.Component<Props, State> { ...@@ -131,18 +131,17 @@ class MomentField extends React.Component<Props, State> {
} }
render() { render() {
const { classes, ctx, error, InputProps, onBlur, onChange, onFocus, value, format: formapProps, disabled, nunNull, ...rest } = this.props; const { classes, ctx, error, InputProps, onBlur, onChange, onFocus, value, format: formapProps, disabled, nonNull, ...rest } = this.props;
const { rootEl } = this; const { rootEl } = this;
const { open } = this.state; const { open } = this.state;
const rootClass = classes.root;
const self = this; const self = this;
const endAdornment = <React.Fragment> const endAdornment = <React.Fragment>
<Icon data-ignore-focus-in className={classes.iconDate} onClick={this.handleVisibilityToggle}>date_range</Icon> <Icon data-ignore-focus-in onClick={this.handleVisibilityToggle}>date_range</Icon>
{!nunNull && <Icon data-ignore-focus-in className={classes.iconClose} onClick={this.handleClear}>close</Icon>} {!nonNull && <Icon data-ignore-focus-in onClick={this.handleClear}>close</Icon>}
</React.Fragment>; </React.Fragment>;
return <div {...rest} className={rootClass} ref={this.handleRootRef}> return <div {...rest} ref={this.handleRootRef}>
<TextField <TextField
{...InputProps as any} {...InputProps as any}
disabled={disabled} disabled={disabled}
...@@ -154,7 +153,7 @@ class MomentField extends React.Component<Props, State> { ...@@ -154,7 +153,7 @@ class MomentField extends React.Component<Props, State> {
endAdornment={endAdornment} endAdornment={endAdornment}
value={inputValue(this.state, this.props)} value={inputValue(this.state, this.props)}
/> />
{rootEl && <Popover className={classes.modal} anchorEl={rootEl} open={open} onClose={this.handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} disableAutoFocus disableEnforceFocus disableRestoreFocus hideBackdrop> {rootEl && <Popover anchorEl={rootEl} open={open} onClose={this.handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} disableAutoFocus disableEnforceFocus disableRestoreFocus hideBackdrop>
<DayPicker <DayPicker
ref={this.handlePickerRef} ref={this.handlePickerRef}
date={value} date={value}
...@@ -174,37 +173,16 @@ export default MomentField; ...@@ -174,37 +173,16 @@ export default MomentField;
// CSS классы // CSS классы
export type ClassKey = 'root'|'modal'|'input'|'iconClose'|'iconDate'; export type ClassKey = 'input';
// Styles // Styles
export function styles(theme: Theme): StyleRules<ClassKey> { export function styles(theme: Theme): StyleRules<ClassKey> {
const { unit } = theme.spacing; // const { unit } = theme.spacing;
return { return {
root: {
},
iconClose: {
position: 'absolute',
right: unit,
},
iconDate: {
position: 'absolute',
right: unit * 4,
},
modal: {
/* width: 0,
* height: 0, */
/* top: unit,
* left: -unit,*/
},
input: { input: {
width: 180, width: 180,
paddingRight: `${unit * 8}px !important`,
position: 'relative', position: 'relative',
}, },
}; };
......
fields/ResourceID.tsx deleted 100644 → 0
import * as React from 'react';
import { AuthCtx as Ctx } from '~/utils';
import { Eff } from '@bitmaster/core';
import * as Rx from 'rxjs';
import { Err, notifyError } from '~/context';
import { FieldProps } from '~/fields';
import * as F from '~/fields';
import { Resource } from '@bitmaster/utils/jsonapi';
// Props
export type Props<A = any> = {
source: PrimarySource<A>;
id?: string;
}
// Props
export type State<A extends Resource<any>= any> = {
value: A|null; // Ресурс полученный из id
pending: boolean;
}
// Источник для получения ресурса по ид
export type PrimarySource<A> = {
getPrimary(ctx: Ctx, id: string): Eff<Err, A>;
}
// Component
export class ResourceID extends React.Component<Props, State> {
subscription: Rx.Subscription|null; // Подписка на запрос
state: State = { pending: false, value: null };
inputContext: FieldProps|null = null;
prevValue: any;
projectContext = (input: FieldProps) => {
this.inputContext = input;
const { value } = this.state;
if (this.prevValue !== input.value) {
if (input.value) this.resolveResource(input);
else this.setState({ value: null });
this.prevValue = input.value;
}
return { ...input, value, onValueChange: this.handleValueChange };
};
handleValueChange = (value: State['value'], at=[]) => {
const id = this.props.id || 'id';
const nextValue = value ? value[id] : null;
this.setState({ value, pending: false });
if (!this.inputContext) return;
const { onValueChange } = this.inputContext;
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
onValueChange && onValueChange(nextValue, []);
};
componentDidMount() {
this.inputContext && this.resolveResource(this.inputContext);
}
resolveResource(inputContext: FieldProps) {
if (this.subscription) return;
const { source } = this.props; if (!source) return;
const { ctx, value } = inputContext; if (!ctx) return; if (typeof(value) !== 'string') return;
this.setState({ pending: true });
this.subscription = source.getPrimary(ctx, value).subscribe(ethr => {
this.subscription = null;
if (ethr.tag === 'Left') {
this.setState({ pending: false });
notifyError(ethr.value);
} else {
this.setState({ pending: false, value: ethr.value });
}
});
}
render() {
return <F.Modifier proj={this.projectContext}>
{this.props.children}
</F.Modifier>;
}
}
export default ResourceID;
fields/WithContext.tsx deleted 100644 → 0
import * as React from 'react';
import { FieldProps } from './';
import * as F from './';
// Props
export type Props<A> = Partial<FieldProps<A>> & {
Component: React.ReactType<FieldProps<A>>;
};
// Component
export default class WithContext<A> extends React.Component<Props<A>> {
renderConsumer = (context: FieldProps<A>) => {
const { Component, ...rest } = this.props;
// @ts-ignore
return React.createElement(Component, { ...context, ...rest });
};
render() {
return <F.Consumer>{this.renderConsumer}</F.Consumer>;
}
}
fields/Zoom.tsx deleted 100644 → 0
import * as React from 'react';
import { FieldProps } from './';
import * as F from './';
import { StandardProps } from '@material-ui/core';
import memoize from '~/functions/memoize';
import { ObjectKey, ObjectPath } from '~/functions/get-at';
// Props
export type Props = StandardProps<React.HTMLProps<HTMLDivElement>, string> & {
in: Array<string|number>|string|number;
onlyValue?: boolean;
dontWrap?: boolean;
}
const zoomOnChange = memoize((path: ObjectKey[], onChange: ((x: any, at: ObjectPath) => void)|undefined) => {
return (next, at=[]) => {
onChange && onChange(next, [...path, ...at]);
};
})
const zoomAny = memoize((path: ObjectKey[], input: any) => {
let iter = input as any;
for (const key of path) {
if (typeof(iter) !== 'object' || iter === null) return iter;
iter = iter[key];
}
return iter;
})
// Component
export default class Zoom extends React.Component<Props> {
projectContext = (input: FieldProps) => {
const { onlyValue } = this.props;
const path = Array.isArray(this.props.in) ? this.props.in : [this.props.in];
if (onlyValue) return {
...input,
value: zoomAny(path, input.value),
onValueChange: zoomOnChange(path, input.onValueChange),
};
else return {
...input,
value: zoomAny(path, input.value),
error: zoomAny(path, input.error),
disabled: zoomAny(path, input.disabled),
onValueChange: zoomOnChange(path, input.onValueChange),
};
}
render() {
const { dontWrap, children, in: in_, onlyValue, ...rest } = this.props;
const dataIn = Array.isArray(in_) ? in_ : [in_];
return <F.Modifier proj={this.projectContext}>
{dontWrap ? children : <div {...rest} role="zoom" data-in={dataIn.join('-')}>{children}</div>}
</F.Modifier>;
}
}
fields/index.ts
import { withFieldContext } from '~/fields/context';
export * from './context'; export * from './context';
export { default as In } from './In';
export { default as Zoom } from './Zoom';
export { default as Label } from './Label'; export { default as Label } from './Label';
export { default as ResourceID } from './ResourceID';
export { default as ArrayIDS } from './ArrayIDS';
export { default as Debounce } from './Debounce'; export { default as Debounce } from './Debounce';
export { default as WithContext } from './WithContext'; export { default as BooleanField } from './BooleanField';
export { default as MomentField } from './MomentField';
export { default as SelectField } from './SelectField';
import BooleanField_ from './BooleanField'; export { default as TextField } from './TextField';
import MomentField_ from './MomentField'; export { default as AutoComplete } from './AutoComplete';
import SelectField_ from './SelectField'; export { default as MultiSelect } from './MultiSelect';
import TextField_ from './TextField';
import AutoComplete_ from './AutoComplete';
import MultiSelect_ from './MultiSelect';
import DebounceUN from './DebounceUN';
export const BooleanField = withFieldContext(BooleanField_) as typeof BooleanField_;
export const MomentField = withFieldContext(MomentField_) as typeof MomentField_;
export const SelectField = withFieldContext(SelectField_) as typeof SelectField_;
export const TextField = withFieldContext(TextField_) as typeof TextField_;
export const AutoComplete = withFieldContext(AutoComplete_) as typeof AutoComplete_;
export const MultiSelect = withFieldContext(MultiSelect_ as any) as typeof MultiSelect_;
export const undecorated = {
TextField: TextField_,
SelectField: SelectField_,
MomentField: MomentField_,
BooleanField: BooleanField_,
AutoComplete: AutoComplete_,
MultiSelect: MultiSelect_,
Debounce: DebounceUN,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment