From 2d62285c96783d76a2d640417cccdf7b00a3b4fb Mon Sep 17 00:00:00 2001 From: Marcos Ricardo Date: Thu, 9 Feb 2023 17:58:32 -0300 Subject: [PATCH] refactor: use DropdownInput.theme.js --- .../components/dropdowninput/index.mdx | 1 - .../src/DropdownInput/DropdownInput.theme.js | 49 ++++- .../src/DropdownInput/web/DropdownInput.jsx | 178 ++++++++++-------- 3 files changed, 151 insertions(+), 77 deletions(-) diff --git a/packages/doc/content/components/components/dropdowninput/index.mdx b/packages/doc/content/components/components/dropdowninput/index.mdx index d6d2835bf6..01fc770037 100644 --- a/packages/doc/content/components/components/dropdowninput/index.mdx +++ b/packages/doc/content/components/components/dropdowninput/index.mdx @@ -34,7 +34,6 @@ render(() => { return ( ({ +const DropdownInput = ({ + colors, + radii, + spacing, + borders, + fontSizes, + fontWeights, +}) => ({ width: 320, + container: { + background: colors.white, + height: 52, + border: { + width: borders.small, + radius: radii.small, + color: colors.medium, + }, + margin: { + top: spacing.xxsmall, + }, + }, + clear: { + background: 'none', + border: 'none', + cursor: 'pointer', + display: 'none', + outline: 'none', + padding: spacing.medium, + }, + containerDropDown: { + margin: 0, + height: 272, + overflowY: 'scroll', + background: colors.white, + padding: { + right: spacing.small, + left: spacing.small, + }, + border: { + width: borders.small, + radius: radii.small, + color: colors.medium, + }, + }, + itemDropDown: { + fontSize: fontSizes.medium, + fontWeight: fontWeights.medium, + height: 72, + }, }); export default DropdownInput; diff --git a/packages/yoga/src/DropdownInput/web/DropdownInput.jsx b/packages/yoga/src/DropdownInput/web/DropdownInput.jsx index 3d42c8b56e..b1410b95b4 100644 --- a/packages/yoga/src/DropdownInput/web/DropdownInput.jsx +++ b/packages/yoga/src/DropdownInput/web/DropdownInput.jsx @@ -3,7 +3,6 @@ import PropTypes, { bool } from 'prop-types'; import { theme, Box, Icon, Text } from '@gympass/yoga'; import styled, { css } from 'styled-components'; import { Check, ChevronUp, ChevronDown, Close } from '@gympass/yoga-icons'; -import { display, flexes } from '@gympass/yoga-system'; import { useOnClickOutside } from '../../hooks'; const Wrapper = styled.div` @@ -21,25 +20,39 @@ const Wrapper = styled.div` `; const Container = styled.div` - ${display} - ${flexes} - border-radius: ${theme.radii.small}px; - background: #fff; - border: ${theme.borders.small}px solid #ccc; + ${({ + showDropDown, + theme: { + yoga: { + components: { dropdowninput }, + }, + }, + }) => ` + display: flex; + justify-content: flex-start; + align-items: center; + border-radius: ${dropdowninput.container.border.radius}px; + background: ${dropdowninput.container.background}; + border: ${dropdowninput.container.border.width}px solid ${ + dropdowninput.container.border.color + }; box-sizing: border-box; - background: #fff; - height: 52px; - margin: ${theme.spacing.xxsmall}px 0 0; + background: ${dropdowninput.container.background}; + height: ${dropdowninput.container.height}px; + margin: ${dropdowninput.container.margin.top}px 0 0; transition: all 0.1s ease-in-out; - ${({ showDropDown }) => + + ${ showDropDown && css` - border-top: ${theme.borders.small}px solid #ccc; - border-left: ${theme.borders.small}px solid #ccc; - border-right: ${theme.borders.small}px solid #ccc; - border-radius: ${theme.radii.small}px ${theme.radii.small}px 0px 0px; + border-top: 1px solid ${dropdowninput.container.border.color}; + border-left: 1px solid ${dropdowninput.container.border.color}; + border-right: 1px solid ${dropdowninput.container.border.color}; + border-radius: 8px 8px 0 0; border-bottom: 0; - `} + ` + } + `} `; const Clear = styled.button` @@ -58,10 +71,9 @@ const Input = styled.input` flex: 1; font-family: ${({ theme: { yoga } }) => yoga.baseFont.family}; font-size: ${theme.fontSizes.small}px; - font-style: normal; font-weight: ${theme.fontWeights.regular}; height: 100%; - letter-spacing: 0px; + letter-spacing: 0; line-height: ${theme.lineHeights.small}px; outline: none; text-align: left; @@ -87,21 +99,31 @@ const Divisor = styled.div` `; const ContainerDropDown = styled.ul` - margin: 0; - height: 272px; - width: ${props => `${props.width}px`}; - overflow-y: scroll; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - list-style: none; - padding: 0 16px 0 16px; - transition: all 0.1s ease-in-out; - border-radius: 0px 0px ${theme.radii.small}px ${theme.radii.small}px; - background: #fff; - position: absolute; - top: ${props => `${props.position}px`}; - z-index: 9999; + ${({ + width, + position, + theme: { + yoga: { + components: { dropdowninput }, + }, + }, + }) => ` + margin: ${dropdowninput.containerDropDown.margin}; + height: ${dropdowninput.containerDropDown.height}px; + width: ${width}px; + overflow-y: scroll; + border-left: ${dropdowninput.containerDropDown.border.width}px solid ${dropdowninput.containerDropDown.border.color}; + border-right: ${dropdowninput.containerDropDown.border.width}px solid ${dropdowninput.containerDropDown.border.color}; + border-bottom: ${dropdowninput.containerDropDown.border.width}px solid ${dropdowninput.containerDropDown.border.color}; + list-style: none; + padding: 0 ${dropdowninput.containerDropDown.padding.right}px 0 ${dropdowninput.containerDropDown.padding.left}px; + transition: all 0.1s ease-in-out; + border-radius: 0px 0px ${dropdowninput.containerDropDown.border.radius}px ${dropdowninput.containerDropDown.border.radius}px; + background: ${dropdowninput.containerDropDown.background}; + position: absolute; + top: ${position}px; + z-index: 9999; + `} `; const ButtonDropDown = styled.button` @@ -117,28 +139,30 @@ const ButtonDropDown = styled.button` `; const ItemDropDown = styled.li` + ${({ + theme: { + yoga: { + components: { dropdowninput }, + }, + }, + }) => ` display: flex; align-items: center; justify-content: space-between; align-content: center; width: 100%; - height: 72px; + height: ${dropdowninput.itemDropDown.height}px; cursor: pointer; - font-size: 16px; - font-weight: 500; + font-size: ${dropdowninput.itemDropDown.fontSize}px; + font-weight: ${dropdowninput.itemDropDown.fontWeight}; div { display: flex; align-items: center; } - - &:last-child { - border: none; - } + `} `; -const ContainerName = styled.div``; - const DropdownInput = ({ full, placeholder, @@ -151,14 +175,14 @@ const DropdownInput = ({ }) => { const [showDropDown, setShowDropDown] = useState(false); const inputRef = useRef(null); - const DropDownRef = useRef(null); + const dropDownRef = useRef(null); const containerRef = useRef(null); const toggleShowDropDown = () => { setShowDropDown(!showDropDown); }; - useOnClickOutside(DropDownRef, e => { + useOnClickOutside(dropDownRef, e => { if (e.target.id !== 'button-drop-down') { toggleShowDropDown(); } @@ -170,36 +194,6 @@ const DropdownInput = ({ inputRef.current.focus(); }; - const renderListCountries = () => { - return countries.map(country => { - const isCountrySelected = selectedCountry.id === country.id; - - return ( - - - - - - - {country.name} - - - {isCountrySelected && ( - - )} - - ); - }); - }; - return ( - {renderListCountries()} + {countries.map(country => { + const isCountrySelected = selectedCountry.id === country.id; + + return ( + +
+ + + + + {country.name} + +
+ {isCountrySelected && ( + + )} + + ); + })} )}