Rename CallbackView to CallbackOperation,

Refactor params
This commit is contained in:
Oleksiy Kachynskyy 2020-04-02 12:50:18 +03:00
parent b88ecad51a
commit dd1e0dcec4
6 changed files with 31 additions and 20 deletions

View File

@ -2,27 +2,23 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { OperationModel } from '../../services/models';
import { CallbackDetailsWrap, StyledCallbackTitle } from '../Callbacks/styled.elements';
import { CallbackDetailsWrap, StyledCallbackTitle } from './styled.elements';
import { CallbackDetails } from './CallbackDetails';
@observer
// TODO: rename to Callback
export class CallbackView extends React.Component<{ callbackOperation: OperationModel }> {
export class CallbackOperation extends React.Component<{ callbackOperation: OperationModel }> {
toggle = () => {
this.props.callbackOperation.toggle();
};
render() {
const { name, expanded, httpVerb, deprecated } = this.props.callbackOperation;
const { expanded } = this.props.callbackOperation;
return (
<>
<StyledCallbackTitle
onClick={this.toggle}
name={name}
opened={expanded}
httpVerb={httpVerb}
deprecated={deprecated}
callbackOperation={this.props.callbackOperation}
/>
{expanded && (
<CallbackDetailsWrap>

View File

@ -6,23 +6,23 @@ import { shortenHTTPVerb } from '../../utils/openapi';
import styled from '../../styled-components';
import { Badge } from '../../common-elements/';
import { l } from '../../services/Labels';
import { OperationModel } from '../../services/models';
export interface CallbackTitleProps {
name: string;
opened?: boolean;
className?: string;
onClick?: () => void;
httpVerb: string;
deprecated?: boolean;
callbackOperation: OperationModel;
}
export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
render() {
const { name, opened, className, onClick, httpVerb, deprecated } = this.props;
const { className, onClick, callbackOperation } = this.props;
const { name, httpVerb, deprecated, expanded } = callbackOperation;
return (
<CallbackTitleWrapper className={className} onClick={onClick || undefined}>
<OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
<ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
<ShelfIcon size={'1.5em'} direction={expanded ? 'down' : 'right'} float={'left'} />
<CallbackNameStyled deprecated={deprecated}>{name}</CallbackNameStyled>
{deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
</CallbackTitleWrapper>

View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { CallbackModel } from '../../services/models';
import styled from '../../styled-components';
import { CallbackView } from './Callback';
import { CallbackOperation } from './CallbackOperation';
const CallbacksHeader = styled.h3`
font-size: 18px;
@ -29,7 +29,9 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
<CallbacksHeader> Callbacks </CallbacksHeader>
{callbacks.map(callback => {
return callback.operations.map((operation, index) => {
return <CallbackView key={callback.name + index} callbackOperation={operation} />;
return (
<CallbackOperation key={`${callback.name}_${index}`} callbackOperation={operation} />
);
});
})}
</div>

View File

@ -1,3 +1,3 @@
export * from './Callback';
export * from './CallbackOperation';
export * from './CallbackTitle';
export * from './CallbacksList';

View File

@ -1,6 +1,8 @@
import styled from '../../styled-components';
import { CallbackTitle } from './CallbackTitle';
// TODO: get 'background-color' from theme
// e.g. "theme.colors.secondary.main" or "theme.colors.callbacks.background.main"
export const StyledCallbackTitle = styled(CallbackTitle)`
padding: 10px;
border-radius: 2px;
@ -10,6 +12,8 @@ export const StyledCallbackTitle = styled(CallbackTitle)`
cursor: pointer;
`;
// TODO: get 'background-color' from theme
// e.g. "theme.colors.secondary.light" or "theme.colors.callbacks.background.light"
export const CallbackDetailsWrap = styled.div`
padding: 10px 25px;
background-color: #fafafa;

View File

@ -6,8 +6,9 @@ import * as React from 'react';
import { OpenAPIParser } from '../../services';
import { CallbackModel } from '../../services/models/Callback';
import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
import { CallbacksList, CallbackTitle, CallbackView } from '../Callbacks';
import { CallbacksList, CallbackTitle, CallbackOperation } from '../Callbacks';
import * as simpleCallbackFixture from './fixtures/simple-callback.json';
import { OperationModel } from '../../services/models';
const options = new RedocNormalizedOptions({});
describe('Components', () => {
@ -22,7 +23,7 @@ describe('Components', () => {
);
// There should be 1 operation defined in simple-callback.json, just get it manually for readability.
const callbackViewElement = shallow(
<CallbackView key={callback.name} callbackOperation={callback.operations[0]} />,
<CallbackOperation key={callback.name} callbackOperation={callback.operations[0]} />,
).getElement();
expect(callbackViewElement.props).toBeDefined();
expect(callbackViewElement.props.children).toBeDefined();
@ -30,8 +31,16 @@ describe('Components', () => {
});
it('should correctly render CallbackTitle', () => {
const callbackOperation = {
name: 'Test',
httpVerb: 'get',
} as OperationModel;
const callbackTitleViewElement = shallow(
<CallbackTitle name={'Test'} className={'.test'} onClick={undefined} httpVerb={'get'} />,
<CallbackTitle
className={'.test'}
onClick={undefined}
callbackOperation={callbackOperation}
/>,
).getElement();
expect(callbackTitleViewElement.props).toBeDefined();
expect(callbackTitleViewElement.props.className).toEqual('.test');