Merge pull request #19 from dennispassway/feature/custom-type-select

add select component
Aratramba · Feb 3, 2021 · 0ee7ac3 · 0ee7ac3
2 parents 39b833c + 5f5853b
commit 0ee7ac3
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -180,7 +180,18 @@ Example with asset fields listed and custom fields added:
       "name": "location",
       "label": "Location",
       "type": "location"
-    }
+    },
+    {
+      "label": "Copyright",
+      "name": "copyright",
+      "placeholder": "pick one…",
+      "type": "select",
+      "options": [
+        { "title": "Copyright", "value": "copyright" },
+        { "title": "Public Domain", "value": "public-domain" },
+        { "title": "Creative Commons", "value": "creative-commons" }
+      ]
+    },
   ],
 }
 ```

diff --git a/src/components/LabelWithInput.tsx b/src/components/LabelWithInput.tsx
@@ -14,6 +14,7 @@ interface Props {
     | 'email'
     | 'location'
     | 'number'
+    | 'select'
     | 'tel'
     | 'text'
     | 'time'
@@ -84,17 +85,51 @@ const StyledTextArea = styled.textarea`
   width: 100%;
 `;
 
+const StyledSelectWrapper = styled.div`
+  position: relative;
+`;
+
+const StyledSelectArrow = styled.span`
+  background-color: ${({ theme }) => theme.inputTextColor};
+  bottom: 0;
+  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+  content: '';
+  height: 0.5em;
+  pointer-events: none;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.8em;
+`;
+
+const StyledSelect = styled.select`
+  appearance: none;
+  background-color: ${({ theme }) => theme.inputBackgroundColor};
+  border-radius: ${({ theme }) => theme.appBorderRadius};
+  border: 0;
+  color: ${({ theme }) => theme.inputTextColor};
+  font-family: ${({ theme }) => theme.appFontFamily};
+  font-size: 16px 16px 34px 16px;
+  line-height: 1.1;
+  outline: 0;
+  padding: 16px;
+  width: 100%;
+`;
+
 export const LabelWithInput = ({ label, onChange, type = 'text', ...rest }: Props) => {
   const elementsMap: { [key: string]: any } = {
     checkbox: Checkbox,
     location: Location,
     textArea: StyledTextArea,
+    select: Select,
   };
 
   const onChangeMap: { [key: string]: (e: any) => void } = {
     checkbox: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked),
     location: (value: Geopoint | undefined) => onChange(value),
     number: (e: ChangeEvent<HTMLInputElement>) => onChange(parseFloat(e.target.value)),
+    select: (e: ChangeEvent<HTMLSelectElement>) => onChange(e.target.value),
   };
 
   const defaultOnChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
@@ -140,3 +175,33 @@ const Location = ({
     </StyledContainer>
   );
 };
+
+type SelectOption = {
+  title: string;
+  value: string;
+};
+
+const Select = ({
+  options,
+  placeholder,
+  value,
+  ...rest
+}: {
+  options: Array<SelectOption>;
+  placeholder: string | undefined;
+  value: string | undefined;
+}) => {
+  return (
+    <StyledSelectWrapper>
+      <StyledSelect {...rest}>
+        <option value="">{placeholder}</option>
+        {options?.map((option: SelectOption) => (
+          <option key={option.value} value={option.value} selected={option.value === value}>
+            {option.title}
+          </option>
+        ))}
+      </StyledSelect>
+      <StyledSelectArrow />
+    </StyledSelectWrapper>
+  );
+};