Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 21:54:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: update StyledCallbackTitle

Browse Source 
to fix chevron animation
This commit is contained in:
Oleksiy Kachynskyy 2020-04-08 09:41:39 +03:00
parent 0511c678db
commit 03586cfcec
3 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Callbacks/CallbackOperation.tsx
View File

@ -12,13 +12,16 @@ export class CallbackOperation extends React.Component<{ callbackOperation: Oper
}; };
render() { render() {
const { expanded } = this.props.callbackOperation; const { name, expanded, httpVerb, deprecated } = this.props.callbackOperation;
return ( return (
<> <>
<StyledCallbackTitle <StyledCallbackTitle
onClick={this.toggle} onClick={this.toggle}
callbackOperation={this.props.callbackOperation} name={name}
opened={expanded}
httpVerb={httpVerb}
deprecated={deprecated}
/> />
{expanded && <CallbackDetails operation={this.props.callbackOperation} />} {expanded && <CallbackDetails operation={this.props.callbackOperation} />}
</> </>

17
src/components/Callbacks/CallbackTitle.tsx
View File

@ -6,23 +6,24 @@ import { shortenHTTPVerb } from '../../utils/openapi';
import styled from '../../styled-components'; import styled from '../../styled-components';
import { Badge } from '../../common-elements/'; import { Badge } from '../../common-elements/';
import { l } from '../../services/Labels'; import { l } from '../../services/Labels';
import { OperationModel } from '../../services/models';
export interface CallbackTitleProps { export interface CallbackTitleProps {
name: string;
opened?: boolean;
httpVerb: string;
deprecated?: boolean;
className?: string; className?: string;
onClick?: () => void; onClick?: () => void;
callbackOperation: OperationModel;
} }
export class CallbackTitle extends React.PureComponent<CallbackTitleProps> { export class CallbackTitle extends React.PureComponent<CallbackTitleProps> {
render() { render() {
const { className, onClick, callbackOperation } = this.props; const { name, opened, className, onClick, httpVerb, deprecated } = this.props;
const { name, httpVerb, deprecated, expanded } = callbackOperation;
return ( return (
<CallbackTitleWrapper className={className} onClick={onClick || undefined}> <CallbackTitleWrapper className={className} onClick={onClick || undefined}>
<OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled> <OperationBadgeStyled type={httpVerb}>{shortenHTTPVerb(httpVerb)}</OperationBadgeStyled>
<ShelfIcon size={'1.5em'} direction={expanded ? 'down' : 'right'} float={'left'} /> <ShelfIcon size={'1.5em'} direction={opened ? 'down' : 'right'} float={'left'} />
<CallbackName deprecated={deprecated}>{name}</CallbackName> <CallbackName deprecated={deprecated}>{name}</CallbackName>
{deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null} {deprecated ? <Badge type="warning"> {l('deprecated')} </Badge> : null}
</CallbackTitleWrapper> </CallbackTitleWrapper>
@ -34,6 +35,12 @@ const CallbackTitleWrapper = styled.div`
& > * { & > * {
vertical-align: middle; vertical-align: middle;
} }
${ShelfIcon} {
polygon {
fill: ${({ theme }) => theme.colors.gray.A200};
}
}
`; `;
const CallbackName = styled.span<{ deprecated?: boolean }>` const CallbackName = styled.span<{ deprecated?: boolean }>`

11
src/components/__tests__/Callbacks.test.tsx
View File

@ -8,7 +8,6 @@ import { CallbackModel } from '../../services/models/Callback';
import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions'; import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
import { CallbacksList, CallbackTitle, CallbackOperation } from '../Callbacks'; import { CallbacksList, CallbackTitle, CallbackOperation } from '../Callbacks';
import * as simpleCallbackFixture from './fixtures/simple-callback.json'; import * as simpleCallbackFixture from './fixtures/simple-callback.json';
import { OperationModel } from '../../services/models';
const options = new RedocNormalizedOptions({}); const options = new RedocNormalizedOptions({});
describe('Components', () => { describe('Components', () => {
@ -32,16 +31,8 @@ describe('Components', () => {
}); });
it('should correctly render CallbackTitle', () => { it('should correctly render CallbackTitle', () => {
const callbackOperation = {
name: 'Test',
httpVerb: 'get',
} as OperationModel;
const callbackTitleViewElement = shallow( const callbackTitleViewElement = shallow(
<CallbackTitle <CallbackTitle name={'Test'} className={'.test'} onClick={undefined} httpVerb={'get'} />,
className={'.test'}
onClick={undefined}
callbackOperation={callbackOperation}
/>,
).getElement(); ).getElement();
expect(callbackTitleViewElement.props).toBeDefined(); expect(callbackTitleViewElement.props).toBeDefined();
expect(callbackTitleViewElement.props.className).toEqual('.test'); expect(callbackTitleViewElement.props.className).toEqual('.test');