From dd1e0dcec451e6e48638d128905cff70792ab2fb Mon Sep 17 00:00:00 2001 From: Oleksiy Kachynskyy Date: Thu, 2 Apr 2020 12:50:18 +0300 Subject: [PATCH] Rename CallbackView to CallbackOperation, Refactor params --- .../{Callback.tsx => CallbackOperation.tsx} | 12 ++++-------- src/components/Callbacks/CallbackTitle.tsx | 12 ++++++------ src/components/Callbacks/CallbacksList.tsx | 6 ++++-- src/components/Callbacks/index.ts | 2 +- src/components/Callbacks/styled.elements.ts | 4 ++++ src/components/__tests__/Callbacks.test.tsx | 15 ++++++++++++--- 6 files changed, 31 insertions(+), 20 deletions(-) rename src/components/Callbacks/{Callback.tsx => CallbackOperation.tsx} (58%) diff --git a/src/components/Callbacks/Callback.tsx b/src/components/Callbacks/CallbackOperation.tsx similarity index 58% rename from src/components/Callbacks/Callback.tsx rename to src/components/Callbacks/CallbackOperation.tsx index f99232f1..04c89041 100644 --- a/src/components/Callbacks/Callback.tsx +++ b/src/components/Callbacks/CallbackOperation.tsx @@ -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 ( <> {expanded && ( diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx index 8121d248..f438619f 100644 --- a/src/components/Callbacks/CallbackTitle.tsx +++ b/src/components/Callbacks/CallbackTitle.tsx @@ -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 { render() { - const { name, opened, className, onClick, httpVerb, deprecated } = this.props; + const { className, onClick, callbackOperation } = this.props; + const { name, httpVerb, deprecated, expanded } = callbackOperation; + return ( {shortenHTTPVerb(httpVerb)} - + {name} {deprecated ? {l('deprecated')} : null} diff --git a/src/components/Callbacks/CallbacksList.tsx b/src/components/Callbacks/CallbacksList.tsx index ce68c652..37e21644 100644 --- a/src/components/Callbacks/CallbacksList.tsx +++ b/src/components/Callbacks/CallbacksList.tsx @@ -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 { Callbacks {callbacks.map(callback => { return callback.operations.map((operation, index) => { - return ; + return ( + + ); }); })} diff --git a/src/components/Callbacks/index.ts b/src/components/Callbacks/index.ts index 9a73da92..740ec844 100644 --- a/src/components/Callbacks/index.ts +++ b/src/components/Callbacks/index.ts @@ -1,3 +1,3 @@ -export * from './Callback'; +export * from './CallbackOperation'; export * from './CallbackTitle'; export * from './CallbacksList'; diff --git a/src/components/Callbacks/styled.elements.ts b/src/components/Callbacks/styled.elements.ts index dbec982b..e0b077f4 100644 --- a/src/components/Callbacks/styled.elements.ts +++ b/src/components/Callbacks/styled.elements.ts @@ -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; diff --git a/src/components/__tests__/Callbacks.test.tsx b/src/components/__tests__/Callbacks.test.tsx index added1da..9d219ce8 100644 --- a/src/components/__tests__/Callbacks.test.tsx +++ b/src/components/__tests__/Callbacks.test.tsx @@ -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( - , + , ).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( - , + , ).getElement(); expect(callbackTitleViewElement.props).toBeDefined(); expect(callbackTitleViewElement.props.className).toEqual('.test');