@mrshmllw/smores-react 13.1.9 → 13.1.11
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.
package/dist/Modal/Modal.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { theme } from '../theme';
|
|
5
4
|
import { Box } from '../Box';
|
|
6
5
|
import { IconStrict } from '../IconStrict';
|
|
7
6
|
import { Text } from '../Text';
|
|
@@ -43,7 +42,7 @@ const Wrapper = styled(Box) `
|
|
|
43
42
|
`;
|
|
44
43
|
const Overlay = styled.div `
|
|
45
44
|
position: fixed;
|
|
46
|
-
background: ${theme.
|
|
45
|
+
background: ${({ theme }) => theme.color.surface.base[900]};
|
|
47
46
|
cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};
|
|
48
47
|
opacity: 0.4;
|
|
49
48
|
top: 0;
|
|
@@ -52,7 +51,7 @@ const Overlay = styled.div `
|
|
|
52
51
|
right: 0;
|
|
53
52
|
`;
|
|
54
53
|
const Container = styled.div(({ $drawer, $width }) => css `
|
|
55
|
-
background: ${theme.
|
|
54
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
56
55
|
box-sizing: border-box;
|
|
57
56
|
border-radius: 16px;
|
|
58
57
|
padding: 24px;
|
package/dist/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Text, type TextProps } from '../Text'\nimport { useBodyScrollLock } from '../hooks/useBodyScrollLock'\n\ninterface IModalContainer {\n // drawer state\n $drawer: boolean\n // modal width\n $width: string\n}\n\nexport type ModalProps = {\n /**\n * Title of the modal\n * @default \"\" (empty string)\n *\n * @example\n * ```tsx\n * <Modal title=\"MultiCar Account\" />\n * ```\n *\n * @example\n * ```tsx\n * <Modal title={{ typo: 'hero', children: 'MultiCar Account' }} />\n * ```\n */\n title?: string | TitleProps\n icon?: string\n children?: ReactNode\n rightPanel?: ReactNode\n showModal?: boolean\n handleClick: () => void\n drawer?: boolean\n cross?: boolean\n width?: string\n containerClass?: string\n portalContainer?: Element | DocumentFragment\n closeOnOverlayClick?: boolean\n}\n\nexport type TitleProps = TextProps\n\nconst getDefaultTitleProps = (title: string): TitleProps => ({\n children: title,\n tag: 'h2',\n typo: 'heading-small',\n align: 'left',\n})\n\nexport const Modal: FC<ModalProps> = ({\n title = '',\n children,\n rightPanel,\n showModal = false,\n handleClick,\n drawer = true,\n cross = true,\n width,\n containerClass,\n portalContainer = document.body,\n closeOnOverlayClick = true,\n}) => {\n const modalRef = useRef<HTMLDivElement>(null)\n\n useBodyScrollLock({ node: modalRef.current, showModal })\n\n const isTitleString = typeof title === 'string'\n const titleProps = isTitleString ? getDefaultTitleProps(title) : title\n\n if (!showModal) return null\n\n return createPortal(\n <Wrapper ref={modalRef}>\n <Overlay\n onClick={() => closeOnOverlayClick && handleClick()}\n $closeOnOverlayClick={closeOnOverlayClick}\n />\n <Container\n $drawer={drawer}\n $width={width || '460px'}\n className={containerClass}\n >\n <Box\n flex\n alignItems=\"flex-start\"\n justifyContent=\"space-between\"\n mb=\"8px\"\n >\n <TitleElements flex direction=\"column\">\n <Text {...titleProps} />\n </TitleElements>\n <Box flex alignItems=\"center\" gap={'8px'}>\n {rightPanel}\n {cross && (\n <IconStrict\n render=\"cross\"\n title=\"Close modal\"\n backgroundColor=\"oatmeal\"\n handleClick={handleClick}\n size={36}\n />\n )}\n </Box>\n </Box>\n <Box flex direction=\"column\">\n {children}\n </Box>\n </Container>\n </Wrapper>,\n portalContainer,\n )\n}\n\nconst Wrapper = styled(Box)`\n display: flex;\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n height: 100vh;\n width: 100%;\n justify-content: center;\n align-items: center;\n`\n\nconst Overlay = styled.div<{ $closeOnOverlayClick: boolean }>`\n position: fixed;\n background: ${({ theme }) => theme.color.surface.base[900]};\n cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};\n opacity: 0.4;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n`\n\nconst Container = styled.div<IModalContainer>(\n ({ $drawer, $width }) => css`\n background: ${({ theme }) => theme.color.background[100]};\n box-sizing: border-box;\n border-radius: 16px;\n padding: 24px;\n width: 100%;\n max-width: ${$width};\n position: fixed;\n max-height: calc(100vh - 64px);\n overflow: auto;\n transition: all 0.3s ease-in-out;\n\n ${$drawer === true &&\n css`\n @media (max-width: 768px) {\n max-width: none;\n border-radius: 16px 16px 0px 0px;\n padding: 10% 24px;\n max-height: 90vh;\n\n position: fixed;\n right: 0;\n left: 0;\n bottom: 0;\n }\n `}\n `,\n)\n\nconst TitleElements = styled(Box)`\n align-self: center;\n`\n"]}
|
|
@@ -3,7 +3,6 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { Text } from '../Text';
|
|
6
|
-
import { theme } from '../theme';
|
|
7
6
|
import { focusOutlineStyle } from '../utils/focusOutline';
|
|
8
7
|
const MAX_PAGES = 7;
|
|
9
8
|
const MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2);
|
|
@@ -112,7 +111,7 @@ const Container = styled(Box) `
|
|
|
112
111
|
}
|
|
113
112
|
`;
|
|
114
113
|
const PageBox = styled.button `
|
|
115
|
-
background: ${({ $active }) => $active ? theme.
|
|
114
|
+
background: ${({ $active, theme }) => $active ? theme.color.surface.base[300] : theme.color.surface.base['000']};
|
|
116
115
|
cursor: pointer;
|
|
117
116
|
display: flex;
|
|
118
117
|
justify-content: center;
|
|
@@ -123,10 +122,10 @@ const PageBox = styled.button `
|
|
|
123
122
|
min-width: 24px;
|
|
124
123
|
|
|
125
124
|
&:hover {
|
|
126
|
-
background-color: ${theme.
|
|
125
|
+
background-color: ${({ theme }) => theme.color.surface.base[300]};
|
|
127
126
|
}
|
|
128
127
|
&:active {
|
|
129
|
-
background-color: ${theme.
|
|
128
|
+
background-color: ${({ theme }) => theme.color.surface.base[200]};
|
|
130
129
|
}
|
|
131
130
|
|
|
132
131
|
${focusOutlineStyle}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\n\nimport { theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nconst MAX_PAGES = 7\nconst MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2)\n\nexport type PaginationProps = {\n /** Total number of records */\n total: number\n /** Number of records per page */\n partition: number\n /** Handle page change */\n handlePageChange: (page: number) => void\n /** Sets current page number */\n currentPage?: number\n} & MarginProps\n\nexport const Pagination: FC<PaginationProps> = ({\n total,\n partition,\n handlePageChange,\n currentPage,\n ...marginProps\n}) => {\n const [lastPage, setLastPage] = useState(0)\n const [activePage, setActivePage] = useState(1)\n const [pages, setPages] = useState<number[]>([])\n const [shownPages, setShownPages] = useState<number[]>([])\n const [showFirstDots, setShowFirstDots] = useState(false)\n const [showLastDots, setShowLastDots] = useState(false)\n\n useEffect(() => {\n // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time\n // Using lastPage seems to bypass that\n if (currentPage) {\n setActivePage(currentPage)\n } else {\n setActivePage(1)\n }\n }, [lastPage, currentPage])\n\n useEffect(() => {\n const numberOfPages = Math.ceil(total / partition)\n if (numberOfPages > 1) {\n setLastPage(numberOfPages)\n } else if (numberOfPages === 1) {\n // Sets last page to be null to avoid the last page being kept from previous state.\n setLastPage(0)\n }\n if (numberOfPages > 2) {\n const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1)\n setPages(allPages.slice(1, numberOfPages - 1))\n } else {\n // Sets pages to empty to avoid using the previous state if pages set before.\n setPages([])\n }\n }, [total, partition])\n\n useEffect(() => {\n if (lastPage <= MAX_PAGES) {\n setShownPages(pages)\n } else if (activePage <= MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES))\n } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES))\n } else {\n const activePageIndex = pages.indexOf(activePage)\n setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2))\n }\n }, [lastPage, activePage, pages])\n\n useEffect(() => {\n setShowFirstDots(shownPages[0] !== pages[0])\n setShowLastDots(\n shownPages[shownPages.length - 1] !== pages[pages.length - 1],\n )\n }, [shownPages, pages])\n\n const movePage = (page: number) => {\n if (page > 0 && page <= lastPage) {\n setActivePage(page)\n handlePageChange(page)\n }\n }\n\n return (\n <Container flex direction=\"row\" {...marginProps}>\n {activePage - 1 > 0 && (\n <IconBox\n aria-label=\"previous-page\"\n onClick={() => movePage(activePage - 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage - 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" />\n </IconBox>\n )}\n <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n <Text\n typo={activePage === 1 ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n 1\n </Text>\n </PageBox>\n {showFirstDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {shownPages.map((i) => {\n return (\n <PageBox\n $active={activePage === i}\n key={i}\n onClick={() => movePage(i)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(i)\n }\n }}\n >\n <Text\n typo={activePage === i ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n {i}\n </Text>\n </PageBox>\n )\n })}\n {showLastDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {Boolean(lastPage) && (\n <PageBox\n $active={activePage === lastPage}\n onClick={() => movePage(lastPage)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(lastPage)\n }\n }}\n >\n <Text\n typo={activePage === lastPage ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n {lastPage}\n </Text>\n </PageBox>\n )}\n {activePage + 1 <= lastPage && (\n <IconBox\n aria-label=\"next-page\"\n onClick={() => movePage(activePage + 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage + 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" rotate={180} />\n </IconBox>\n )}\n </Container>\n )\n}\n\ninterface IPageBox {\n $active?: boolean\n}\n\nconst Container = styled(Box)`\n align-items: center;\n > button {\n margin-right: 4px;\n\n &:last-child {\n margin-right: 0;\n }\n }\n`\n\nconst PageBox = styled.button<IPageBox>`\n background: ${({ $active }) =>\n $active ? theme.colors.custard : theme.colors.cream};\n cursor: pointer;\n display: flex;\n justify-content: center;\n border-radius: 24px;\n width: fit-content;\n padding: 0px 4px;\n height: 24px;\n min-width: 24px;\n\n &:hover {\n background-color: ${theme.colors.mascarpone};\n }\n &:active {\n background-color: ${theme.colors.custard};\n }\n\n ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n cursor: pointer;\n\n ${focusOutlineStyle}\n`\n"]}
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\n\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nconst MAX_PAGES = 7\nconst MAX_ADDITIONAL_PAGES = Math.ceil(MAX_PAGES / 2)\n\nexport type PaginationProps = {\n /** Total number of records */\n total: number\n /** Number of records per page */\n partition: number\n /** Handle page change */\n handlePageChange: (page: number) => void\n /** Sets current page number */\n currentPage?: number\n} & MarginProps\n\nexport const Pagination: FC<PaginationProps> = ({\n total,\n partition,\n handlePageChange,\n currentPage,\n ...marginProps\n}) => {\n const [lastPage, setLastPage] = useState(0)\n const [activePage, setActivePage] = useState(1)\n const [pages, setPages] = useState<number[]>([])\n const [shownPages, setShownPages] = useState<number[]>([])\n const [showFirstDots, setShowFirstDots] = useState(false)\n const [showLastDots, setShowLastDots] = useState(false)\n\n useEffect(() => {\n // This is a rather hacky fix, in theory it should be listening to total, but because the total comes from the same endpoint as the data, it forces a reset to 1 every time\n // Using lastPage seems to bypass that\n if (currentPage) {\n setActivePage(currentPage)\n } else {\n setActivePage(1)\n }\n }, [lastPage, currentPage])\n\n useEffect(() => {\n const numberOfPages = Math.ceil(total / partition)\n if (numberOfPages > 1) {\n setLastPage(numberOfPages)\n } else if (numberOfPages === 1) {\n // Sets last page to be null to avoid the last page being kept from previous state.\n setLastPage(0)\n }\n if (numberOfPages > 2) {\n const allPages = Array.from({ length: numberOfPages }, (_, i) => i + 1)\n setPages(allPages.slice(1, numberOfPages - 1))\n } else {\n // Sets pages to empty to avoid using the previous state if pages set before.\n setPages([])\n }\n }, [total, partition])\n\n useEffect(() => {\n if (lastPage <= MAX_PAGES) {\n setShownPages(pages)\n } else if (activePage <= MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(0, MAX_ADDITIONAL_PAGES))\n } else if (activePage > lastPage - MAX_ADDITIONAL_PAGES) {\n setShownPages(pages.slice(pages.length - MAX_ADDITIONAL_PAGES))\n } else {\n const activePageIndex = pages.indexOf(activePage)\n setShownPages(pages.slice(activePageIndex - 1, activePageIndex + 2))\n }\n }, [lastPage, activePage, pages])\n\n useEffect(() => {\n setShowFirstDots(shownPages[0] !== pages[0])\n setShowLastDots(\n shownPages[shownPages.length - 1] !== pages[pages.length - 1],\n )\n }, [shownPages, pages])\n\n const movePage = (page: number) => {\n if (page > 0 && page <= lastPage) {\n setActivePage(page)\n handlePageChange(page)\n }\n }\n\n return (\n <Container flex direction=\"row\" {...marginProps}>\n {activePage - 1 > 0 && (\n <IconBox\n aria-label=\"previous-page\"\n onClick={() => movePage(activePage - 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage - 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" />\n </IconBox>\n )}\n <PageBox $active={activePage === 1} onClick={() => movePage(1)}>\n <Text\n typo={activePage === 1 ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n 1\n </Text>\n </PageBox>\n {showFirstDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {shownPages.map((i) => {\n return (\n <PageBox\n $active={activePage === i}\n key={i}\n onClick={() => movePage(i)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(i)\n }\n }}\n >\n <Text\n typo={activePage === i ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n {i}\n </Text>\n </PageBox>\n )\n })}\n {showLastDots && (\n <PageBox>\n <Text tag=\"p\">...</Text>\n </PageBox>\n )}\n {Boolean(lastPage) && (\n <PageBox\n $active={activePage === lastPage}\n onClick={() => movePage(lastPage)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(lastPage)\n }\n }}\n >\n <Text\n typo={activePage === lastPage ? 'headline-small' : 'body-regular'}\n tag=\"p\"\n >\n {lastPage}\n </Text>\n </PageBox>\n )}\n {activePage + 1 <= lastPage && (\n <IconBox\n aria-label=\"next-page\"\n onClick={() => movePage(activePage + 1)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n movePage(activePage + 1)\n }\n }}\n >\n <Icon size={18} render=\"arrow\" rotate={180} />\n </IconBox>\n )}\n </Container>\n )\n}\n\ninterface IPageBox {\n $active?: boolean\n}\n\nconst Container = styled(Box)`\n align-items: center;\n > button {\n margin-right: 4px;\n\n &:last-child {\n margin-right: 0;\n }\n }\n`\n\nconst PageBox = styled.button<IPageBox>`\n background: ${({ $active, theme }) =>\n $active ? theme.color.surface.base[300] : theme.color.surface.base['000']};\n cursor: pointer;\n display: flex;\n justify-content: center;\n border-radius: 24px;\n width: fit-content;\n padding: 0px 4px;\n height: 24px;\n min-width: 24px;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.surface.base[300]};\n }\n &:active {\n background-color: ${({ theme }) => theme.color.surface.base[200]};\n }\n\n ${focusOutlineStyle}\n`\n\nconst IconBox = styled.button<IPageBox>`\n cursor: pointer;\n\n ${focusOutlineStyle}\n`\n"]}
|