LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): styling fixes for Select and Table components

This commit is contained in:
Michał Leszczyk 2022-03-13 10:54:26 +01:00
parent ef13a84185
commit 46a2ff44d5
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/dashboard-v2/src/components/Select/Select.js
View File

@ -21,9 +21,11 @@ const dropDown = keyframes`
const Container = styled.div.attrs({ className: "relative inline-flex" })``; const Container = styled.div.attrs({ className: "relative inline-flex" })``;
const Trigger = styled.button.attrs(({ placeholder }) => ({ const Trigger = styled.button.attrs(({ $placeholder }) => ({
className: `flex items-center cursor-pointer ${placeholder ? "text-palette-300" : ""}`, className: `flex items-center cursor-pointer font-bold ${$placeholder ? "text-palette-300" : ""}`,
}))``; }))`
text-transform: inherit;
`;
const TriggerIcon = styled(ChevronDownIcon).attrs({ const TriggerIcon = styled(ChevronDownIcon).attrs({
className: "transition-transform text-primary", className: "transition-transform text-primary",
@ -32,13 +34,14 @@ const TriggerIcon = styled(ChevronDownIcon).attrs({
`; `;
const Flyout = styled.ul.attrs(({ open }) => ({ const Flyout = styled.ul.attrs(({ open }) => ({
className: `absolute top-[20px] right-0 className: `absolute right-0 z-10
p-0 h-0 border rounded bg-white p-0 border rounded bg-white
overflow-hidden pointer-events-none overflow-hidden pointer-events-none
shadow-md shadow-palette-200/50 shadow-md shadow-palette-200/50
${open ? "pointer-events-auto h-auto overflow-visible border-primary" : ""} ${open ? "pointer-events-auto h-auto overflow-visible border-primary" : ""}
${open ? "visible" : "invisible"}`, ${open ? "visible" : "invisible"}`,
}))` }))`
top: calc(100% + 2px);
animation: ${({ open }) => animation: ${({ open }) =>
open open
? css` ? css`
@ -47,7 +50,7 @@ const Flyout = styled.ul.attrs(({ open }) => ({
: "none"}; : "none"};
`; `;
export const Select = ({ defaultValue, children, onChange, placeholder }) => { export const Select = ({ defaultValue, children, onChange, placeholder, ...props }) => {
const selectRef = useRef(); const selectRef = useRef();
const options = useMemo(() => Children.toArray(children).filter(({ type }) => type === SelectOption), [children]); const options = useMemo(() => Children.toArray(children).filter(({ type }) => type === SelectOption), [children]);
const [state, dispatch] = useSelectReducer({ defaultValue, placeholder, options }); const [state, dispatch] = useSelectReducer({ defaultValue, placeholder, options });
@ -65,8 +68,8 @@ export const Select = ({ defaultValue, children, onChange, placeholder }) => {
const activeLabel = activeOption?.props?.label ?? null; const activeLabel = activeOption?.props?.label ?? null;
return ( return (
<Container ref={selectRef}> <Container ref={selectRef} {...props}>
<Trigger placeholder={!activeLabel && placeholder} onClick={toggle}> <Trigger $placeholder={!activeLabel && placeholder} onClick={toggle} className={state.open ? "text-primary" : ""}>
{activeLabel ?? placeholder} <TriggerIcon open={state.open} /> {activeLabel ?? placeholder} <TriggerIcon open={state.open} />
</Trigger> </Trigger>
<Flyout role="listbox" open={state.open}> <Flyout role="listbox" open={state.open}>

2
packages/dashboard-v2/src/components/Table/Table.js
View File

@ -1,7 +1,7 @@
import styled from "styled-components"; import styled from "styled-components";
const Container = styled.div.attrs({ const Container = styled.div.attrs({
className: "p-1 max-w-full overflow-x-auto", className: "p-1 max-w-full",
})``; })``;
const StyledTable = styled.table.attrs({ const StyledTable = styled.table.attrs({