games/factorio-sites
1
0
Fork 0
mirror of https://github.com/barthuijgen/factorio-sites.git synced 2025-04-09 17:13:52 +02:00
Code Issues Releases Activity

Added select styles (#96)

Browse Source 
Co-authored-by: = <=>
Co-authored-by: Bart <45095973+barthuijgen@users.noreply.github.com>
This commit is contained in:
Alexander Horbunov 2021-04-08 15:04:00 +03:00 committed by GitHub
parent 1bc2f760bc
commit 9079d600ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/blueprints/src/components/Select.tsx
View File

@ -1,31 +1,77 @@
import MultiSelect from "react-multi-select-component";
import styled from "@emotion/styled";
import { ISelectProps } from "react-multi-select-component/dist/lib/interfaces";
interface Tag {
value: string;
label: string;
}
interface SelectProps {
interface SelectProps extends Omit<ISelectProps, "options" | "value" | "labelledBy" | "onChange"> {
options: Array<string | { value: string; label: string }>;
value: string[];
labelledBy?: string;
onChange: (tags: string[]) => void;
className?: string;
}
export const Select: React.FC<SelectProps> = ({ options, value, onChange, className }) => {
const StyledSelect = styled(MultiSelect)`
color: black;
&.rmsc {
.dropdown-container {
border: none;
border-radius: 0;
background-color: #8e8e8e;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
0 0 4px 0 #000;
.gray {
color: #000 !important;
}
.dropdown-heading {
cursor: pointer;
&:hover {
color: #000;
text-decoration: none;
outline: 0;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 9px 2px -8px #fff, inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000,
inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
background-color: #e39827;
filter: drop-shadow(0 0 2px #f9b44b);
}
}
}
.panel-content {
border-radius: 0 !important;
}
}
`;
export const Select: React.FC<SelectProps> = ({
options,
value,
onChange,
labelledBy = "Select",
className,
...props
}) => {
const TAGS = options.map((tag) => {
return typeof tag === "string" ? { value: tag, label: tag.replace(/[_-]/g, " ") } : tag;
});
return (
<MultiSelect
css={{ color: "black" }}
<StyledSelect
className={className}
options={TAGS}
value={value.map((value) => ({ value, label: value.replace(/[_-]/g, " ") }))}
onChange={(tags: Tag[]) => onChange(tags.map((tag) => tag.value))}
labelledBy="Select"
labelledBy={labelledBy}
hasSelectAll={false}
{...props}
/>
);
};

14
apps/blueprints/src/pages/index.tsx
View File

@ -55,9 +55,13 @@ const sidebarCss = css({
width: "233px",
},
});
const SidebarRow = css({
marginTop: "1rem",
});
const SidebarRow = css`
margin-top: 1rem;
.chakra-text {
margin-bottom: 5px;
}
`;
const sidebarCheckbox = css(SidebarRow, {
display: "flex",
alignItems: "center",
@ -195,7 +199,6 @@ export const Index: NextPage<IndexProps> = ({
options={tagsOptions}
value={queryValueAsArray(router.query.tags)}
onChange={(tags) => router.push(routerQueryToHref({ tags }))}
css={{ width: "200px", marginRight: "1rem" }}
/>
</Box>
<Box css={SidebarRow}>
@ -204,7 +207,6 @@ export const Index: NextPage<IndexProps> = ({
options={entityOptions}
value={queryValueAsArray(router.query.entities)}
onChange={(entities) => router.push(routerQueryToHref({ entities }))}
css={{ width: "200px", marginRight: "1rem" }}
/>
</Box>
<Box css={SidebarRow}>
@ -213,7 +215,6 @@ export const Index: NextPage<IndexProps> = ({
options={recipeOptions}
value={queryValueAsArray(router.query.recipes)}
onChange={(recipes) => router.push(routerQueryToHref({ recipes }))}
css={{ width: "200px", marginRight: "1rem" }}
/>
</Box>
<Box css={SidebarRow}>
@ -222,7 +223,6 @@ export const Index: NextPage<IndexProps> = ({
options={itemOptions}
value={queryValueAsArray(router.query.items)}
onChange={(items) => router.push(routerQueryToHref({ items }))}
css={{ width: "200px", marginRight: "1rem" }}
/>
</Box>
<Box css={sidebarCheckbox}>