@mrshmllw/smores-react 15.1.5 → 15.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -52,7 +52,7 @@ const OuterContainer = styled.div(({ open }) => css `
|
|
|
52
52
|
position: absolute;
|
|
53
53
|
width: 100%;
|
|
54
54
|
border-radius: 12px;
|
|
55
|
-
margin-top:
|
|
55
|
+
margin-top: ${({ theme }) => theme.space[100]};
|
|
56
56
|
display: ${open ? 'block' : 'none'};
|
|
57
57
|
max-height: ${open ? '235px' : '48px'};
|
|
58
58
|
background-color: ${({ theme }) => theme.color.surface.base[300]};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAkB,IAAI,EAAE,MAAM,QAAQ,CAAA;AAG7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAA;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAe7D,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CACzC,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvC,KAAK,CACN,CAAA;IACD,MAAM,iBAAiB,GAAG,mBAAmB,CAC3C,KAAK,CAAC,SAAS,IAAI,iBAAiB,EACpC,KAAK,CACN,CAAA;IAED,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KACjD,WAAW,aAEd,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,YAC1C,KAAK,GACD,CACR,EAED,MAAC,KAAK,aAAQ,iBAAiB,SAAO,eAAe,aACnD,KAAC,cAAc,cAAE,KAAK,CAAC,KAAK,GAAkB,EAC9C,KAAC,aAAa,aACL,EAAE,EACT,KAAK,EAAE;4BACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;yBACjC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,iBAAiB,GAAI,GACpD,IACV,EACR,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,YACxB,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,GAAI,GAChC,IACP,CACb,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACZ,KAAK;wBACM,GAAG;;;;;;;;;;;;GAYxB,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKjC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;CAS5B,CAAA;AAMD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ActionDropdown.js","sourceRoot":"","sources":["../../src/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useState } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { ActionListItem, List } from './List'\n\nimport { MarginProps } from '../utils/space'\nimport { resolveToThemeColor } from '../ThemeProvider/utils/colourMap'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type ActionDropdownProps = {\n id?: string\n className?: string\n /** label displayed above the dropdown */\n label?: string\n /** value */\n value: ActionListItem\n /** list of items for the dropdown list */\n list: ActionListItem[]\n /** onSelect handler */\n onSelect: (action: ActionListItem) => void\n} & MarginProps\n\nexport const ActionDropdown: FC<ActionDropdownProps> = ({\n id,\n className = '',\n label,\n value,\n list,\n onSelect,\n ...marginProps\n}) => {\n const [open, setOpen] = useState(false)\n\n const theme = useTheme()\n\n const resolvedBgColor = resolveToThemeColor(\n value.bgColor ?? 'color.background.100',\n theme,\n )\n const resolvedTextColor = resolveToThemeColor(\n value.textColor ?? 'color.text.base',\n theme,\n )\n\n return (\n <Container\n id={id}\n className={className}\n onClick={() => setOpen((currentOpen) => !currentOpen)}\n {...marginProps}\n >\n {label && (\n <Text tag=\"label\" color=\"sesame\" typo=\"label\">\n {label}\n </Text>\n )}\n\n <Label $text={resolvedTextColor} $bg={resolvedBgColor}>\n <SelectedOption>{value.label}</SelectedOption>\n <IconContainer\n $size={20}\n style={{\n rotate: open ? '180deg' : '0deg',\n }}\n >\n <FontAwesomeIcon icon={faChevronDown} color={resolvedTextColor} />\n </IconContainer>\n </Label>\n <OuterContainer open={open}>\n <List options={list} selectOption={onSelect} />\n </OuterContainer>\n </Container>\n )\n}\n\ninterface ISelected {\n $text: string\n $bg: string\n}\n\nconst Label = styled.div<ISelected>(\n ({ $text, $bg }) => css`\n color: ${$text};\n background-color: ${$bg};\n position: relative;\n width: 100%;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: center;\n border-radius: 100px;\n padding: 16px 16px 14px;\n box-sizing: border-box;\n user-select: none;\n `,\n)\n\nconst SelectedOption = styled.span`\n font-size: 14px;\n font-weight: bold;\n white-space: nowrap;\n text-overflow: ellipsis;\n`\n\nconst Container = styled(Box)`\n position: relative;\n display: block;\n width: 210px;\n height: 48px;\n text-align: center;\n cursor: pointer;\n outline: none;\n border-radius: 8px;\n`\n\ninterface IOpen {\n open: boolean\n}\n\nconst OuterContainer = styled.div<IOpen>(\n ({ open }) => css`\n position: absolute;\n width: 100%;\n border-radius: 12px;\n margin-top: ${({ theme }) => theme.space[100]};\n display: ${open ? 'block' : 'none'};\n max-height: ${open ? '235px' : '48px'};\n background-color: ${({ theme }) => theme.color.surface.base[300]};\n overflow-y: ${open ? 'auto' : 'hidden'};\n z-index: 4;\n transition: all 0.2s ease-in-out;\n `,\n)\n"]}
|