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

[DOP-3497]: Update styled li

Browse Source
This commit is contained in:
branberry 2023-04-03 13:36:55 -05:00
parent 85273262b1
commit 47d266f8a8
5 changed files with 65 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The GOAT of web apps</title>
</head>
<body>
<div id="home"></div>
<script type="module" src="/src/reactStartup.tsx"></script>
</body>
</html>

14
src/components/VersionSelector/styled.elements.ts
View File

@ -137,7 +137,7 @@ export const StyledLi = styled.li.attrs<{
role: 'option', role: 'option',
'aria-selected': selected, 'aria-selected': selected,
tabIndex: '0', tabIndex: '0',
}))<{ selected: boolean; disabled?: boolean }>` }))<{ selected: boolean; disabled?: boolean; focused?: boolean }>`
display: flex; display: flex;
width: 100%; width: 100%;
outline: none; outline: none;
@ -147,7 +147,10 @@ export const StyledLi = styled.li.attrs<{
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
color: ${palette.gray.dark3}; color: ${palette.gray.dark3};
${props =>
props.focused &&
`color: ${palette.blue.dark2};
background-color: ${palette.blue.light3};`}
font-weight: ${props => (props.selected ? `bold` : `normal`)}; font-weight: ${props => (props.selected ? `bold` : `normal`)};
&:before { &:before {
@ -162,6 +165,13 @@ export const StyledLi = styled.li.attrs<{
border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px;
opacity: 0; opacity: 0;
transition: all ${transitionDuration.default}ms ease-in-out; transition: all ${transitionDuration.default}ms ease-in-out;
${props =>
props.focused &&
`
opacity: 1;
transform: scaleY(1);
background-color: ${palette.blue.base};
`}
} }
${props => (props.disabled ? disabledOptionStyle : enabledOptionStyle)} ${props => (props.disabled ? disabledOptionStyle : enabledOptionStyle)}

20
src/components/VersionSelector/use-outside-click copy.tsx Normal file
View File

@ -0,0 +1,20 @@
import { useEffect } from 'react';
/**
* Hook that fires event on clicks outside of the passed ref
*/
export function useOutsideKeypress(ref, callback) {
useEffect(() => {
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
callback();
}
}
// Bind the event listener
document.addEventListener('keypress', handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener('keypress', handleClickOutside);
};
}, [ref, callback]);
}

16
src/reactStartup.tsx Normal file
View File

@ -0,0 +1,16 @@
import * as React from 'react';
import { render } from 'react-dom';
import { VersionSelector } from './components/VersionSelector';
render(
<div>
<h1>Hi there</h1>
<VersionSelector
resourceVersions={['v1.0', 'v2.0', 'v3.0']}
active={{ resourceVersion: 'v1.0', apiVersion: '1.0' }}
rootUrl=""
description="hello description"
/>
</div>,
document.getElementById('home'),
);

6
vite.config.ts Normal file
View File

@ -0,0 +1,6 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});