Skip to content

Instantly share code, notes, and snippets.

@davo
Created May 6, 2019 15:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davo/20899eeed5c50924124503557abb0223 to your computer and use it in GitHub Desktop.
Save davo/20899eeed5c50924124503557abb0223 to your computer and use it in GitHub Desktop.
Component with Hover via StyledComponents
import * as React from 'react'
import { useState, useEffect } from 'react'
import { Frame, addPropertyControls, ControlType } from 'framer'
import styled, { css } from 'styled-components'
interface Props {
padding?: number
paddingLeft?: number
color?: string
listBackgroundColor?: string
icon?: string
iconColor?: string
iconSize?: number
iconTop?: number
bgColor?: string
backgroundImage?: string
width?: number
height?: number
listItemLineHeight?: number
listItemMarginTopBottom?: number
listItemHoverColor?: string
ddListExpandedHeight?: number
options?: string[]
placeholder?: string
borderColor?: string
}
const StyledDropdown = styled('div')`
position: relative;
height: 48px;
min-height: 100% !important;
display: flex;
justify-content: left;
border-radius: 2px;
border: solid 1px;
font-size: 16px;
color: ${(props: Props) => props.color};
.dd-wrapper {
width: 100%;
}
/* select {
border: 1px solid #000;
} */
.dd-header {
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-radius: 3px;
cursor: default;
position: relative;
background-color: white;
height: 100%;
padding: 0 16px;
}
.dd-header span {
margin-right: 20px;
}
.dd-header-title {
font-weight: 300;
}
.dd-list {
z-index: 10;
min-height: 100% !important;
border: 1px solid ${(props: Props) => props.borderColor};
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-box-shadow: 0 2px 5px -1px #e8e8e8;
box-shadow: 0 2px 5px -1px #e8e8e8;
font-weight: 700;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
list-style: none;
padding: 16px 0;
margin: 0 auto;
transition: height 0.4s ease;
background: ${(props: Props) => props.listBackgroundColor};
}
.dd-list-item {
cursor: pointer;
outline: 1px solid hsl(120, 99%, 50%);
font-size: 16px;
line-height: 24px;
padding: 0 12px;
margin: 8px auto;
background: hsl(120, 99%, 50%);
&:hover {
background: ${(props: Props) => props.listItemHoverColor};
}
}
`
const StyledIcon = styled('div')`
width: 20px;
height: 20px;
transition: 0.1s;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
`
const StyledList = styled('ul')`
z-index: 10;
min-height: 100% !important;
border: 1px solid;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-box-shadow: 0 2px 5px -1px #e8e8e8;
box-shadow: 0 2px 5px -1px #e8e8e8;
font-weight: 700;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
list-style: none;
padding: 16px 0;
margin: 0 auto;
transition: height 0.4s ease;
`
export function ComponentHoverStyledComponents(props) {
const [item, setItem] = useState(null)
const [listOpen, setListOpen] = useState(false)
useEffect(() => {
return () => {
console.log('cleanup')
}
}, [item])
const handleToggleList = () => {
listOpen === false ? setListOpen(true) : setListOpen(false)
}
return (
<Frame size={'100%'}>
<StyledDropdown
style={{
width: props.width,
color: props.color,
borderColor: props.borderColor
}}
{...props}
>
<div className="dd-wrapper">
<div className="dd-header" onClick={handleToggleList}>
<div className="dd-header-title">{item ? item : props.placeholder}</div>
<StyledIcon
style={{
backgroundImage:
"url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1%201L7%207L13%201%22%20stroke%3D%22" +
props.iconColor +
"%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E%0A')",
transform: listOpen ? 'rotate(180deg)' : 'rotate(0deg)'
}}
/>
</div>
{listOpen && (
<ul className="dd-list">
{props.options.map((item, index) => (
<li className="dd-list-item" key={index}>
{item}
</li>
))}
</ul>
)}
</div>
</StyledDropdown>
</Frame>
)
}
ComponentHoverStyledComponents.defaultProps = {
options: [],
placeholder: 'Click to open',
color: 'blue',
borderColor: 'blue',
chevronColor: 'blue',
padding: 16,
paddingLeft: 16,
width: 220,
height: 48,
iconColor: '#dfdfdf',
iconSize: 0.7,
iconTop: 2,
listItemLineHeight: 24,
listItemMarginTopBottom: 8,
listBackgroundColor: 'yellow',
listItemHoverColor: 'blue'
}
addPropertyControls(ComponentHoverStyledComponents, {
options: {
type: ControlType.Array,
title: 'Add options here',
propertyControl: { type: ControlType.String },
defaultValue: ['a', 'b', 'c', 'd']
},
color: {
type: ControlType.Color,
title: 'Text Color',
defaultValue: '#212B38'
},
borderColor: {
type: ControlType.Color,
title: 'Border Color',
defaultValue: '#dfdfdf'
},
chevronColor: {
type: ControlType.Color,
title: 'Chevron Color',
defaultValue: '#dfdfdf'
},
listBackgroundColor: {
type: ControlType.Color,
title: 'List Background Color',
defaultValue: '#fff'
},
listItemHoverColor: {
type: ControlType.Color,
title: 'List Item Hover Color',
defaultValue: '#dfdfdf'
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment