67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { colors } from 'ts/style/colors';
|
|
|
|
import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
|
|
import {Heading, Paragraph} from 'ts/@next/components/text';
|
|
|
|
export interface SelectItemConfig {
|
|
label: string;
|
|
value?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
interface SelectProps {
|
|
value?: string;
|
|
id: string;
|
|
items: SelectItemConfig[];
|
|
emptyText?: string;
|
|
}
|
|
|
|
export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText }) => {
|
|
return (
|
|
<Container>
|
|
<StyledSelect id={id}>
|
|
<option value="">{emptyText}</option>
|
|
{items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
|
|
</StyledSelect>
|
|
<Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></Caret>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
Select.defaultProps = {
|
|
emptyText: 'Select...',
|
|
};
|
|
|
|
const Container = styled.div`
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
`;
|
|
|
|
const StyledSelect = styled.select`
|
|
appearance: none;
|
|
border: 0;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
padding: 20px 20px 20px 20px;
|
|
`;
|
|
|
|
const SelectAllButton = styled.button`
|
|
appearance: none;
|
|
border: 0;
|
|
font-size: 0.777777778rem;
|
|
display: block;
|
|
opacity: 0.75;
|
|
`;
|
|
|
|
const Caret = styled.svg`
|
|
position: absolute;
|
|
right: 20px;
|
|
top: calc(50% - 4px);
|
|
`;
|