feat: build repeater component that can accept any arbitrary componen…

…t as a child that can repeat. #106
Chia-Network · Dec 21, 2021 · b5fcb7b · b5fcb7b
1 parent 863d22f
commit b5fcb7b
Show file tree

Hide file tree

Showing 22 changed files with 246 additions and 68 deletions.
diff --git a/src/components/blocks/Alert.js b/src/components/blocks/Alert.js
@@ -13,7 +13,7 @@ import {
   WarningIconSmall,
 } from '..';
 
-const AlertCard = withTheme(styled('div')`
+const AlertCard = styled('div')`
   display: flex;
   justify-content: space-between;
   border: none;
@@ -50,9 +50,9 @@ const AlertCard = withTheme(styled('div')`
     (props.type === 'error' &&
       props.banner &&
       `background-color: ${props.theme.colors.default.status.error.secondary};`)}
-`);
+`;
 
-const CloseTextButton = withTheme(styled('button')`
+const CloseTextButton = styled('button')`
   width: 6.25rem;
   height: 1.125rem;
   background-color: unset;
@@ -63,18 +63,18 @@ const CloseTextButton = withTheme(styled('button')`
     props.alertBody
       ? 'margin-right: 1rem; margin-top: 1rem;'
       : 'margin-right: 1rem; margin-top: 0.5625rem;'}
-`);
+`;
 
-const CloseButton = withTheme(styled('div')`
+const CloseButton = styled('div')`
   cursor: pointer;
   height: fit-content;
   ${props =>
     props.alertBody
       ? 'margin-right: 1.1675rem; margin-top: 1rem;'
       : 'margin-right: 1.1675rem; align-self: center'}
-`);
+`;
 
-const AlertTitle = withTheme(styled('div')`
+const AlertTitle = styled('div')`
   font-size: 1rem;
   font-family: ${props => props.theme.typography.primary.regular};
   height: ${props => (props.alertBody ? '1.5rem;' : '1.375rem;')};
@@ -97,23 +97,23 @@ const AlertTitle = withTheme(styled('div')`
     !props.showIcon &&
     props.alertBody &&
     'margin-left: 1rem;margin-top: 1rem;'};
-`);
+`;
 
-const AlertBody = withTheme(styled('div')`
+const AlertBody = styled('div')`
   font-family: ${props => props.theme.typography.primary.light};
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.3125rem;
   margin-bottom: 1rem;
   ${props => (props.showIcon ? 'margin-left: 1.0938rem;' : 'margin-left: 1rem')}
-`);
+`;
 
-const ShowIcons = withTheme(styled('div')`
+const ShowIcons = styled('div')`
   ${props =>
     props.alertBody
       ? 'margin-left: 1.0938rem; margin-top: 1.0938rem;'
       : 'margin-left: 1.0625rem; margin-top: 0.75rem;'}
-`);
+`;
 
 const Alert = withTheme(
   ({

diff --git a/src/components/blocks/Modal.js b/src/components/blocks/Modal.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import styled, { css, withTheme } from 'styled-components';
+import {
+  SuccessIcon,
+  InfoIcon,
+  ErrorIcon,
+  WarningIcon,
+  Body,
+  PrimaryButton,
+  CloseIcon,
+  Divider,
+} from '..';
+
+const Container = styled('div')`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.25);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContainer = styled('div')`
+  height: ${props => (props.basic ? '12.625rem' : '11.75rem')};
+  width: ${props => (props.basic ? '32.5rem' : '25rem')};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff;
+  box-shadow: 0rem 0.5625rem 1.75rem 0.5rem rgba(0, 0, 0, 0.05),
+    0rem 0.375rem 1rem rgba(0, 0, 0, 0.08),
+    0rem 0.1875rem 0.375rem -0.25rem rgba(0, 0, 0, 0.12);
+`;
+
+const ButtonContainer = styled('div')`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  ${props =>
+    props.basic &&
+    css`
+      height: 3.25rem;
+      width: 29.5rem;
+      align-self: center;
+      align-items: center;
+    `};
+`;
+
+const IconContainer = styled('div')`
+  align-self: center;
+  height: 8.25rem;
+  margin-right: 1.0938rem;
+`;
+
+const MessageContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  height: ${props => (props.basic ? '100%' : '8.25rem')};
+  width: ${props => (props.basic ? '100%' : '18.5rem')};
+  justify-content: space-evenly;
+  align-items: ${props => (props.basic ? 'unset' : 'center')};
+`;
+
+const BodyContainer = styled('div')`
+  margin-bottom: 1.5rem;
+  ${props =>
+    props.basic &&
+    css`
+      display: flex;
+      align-items: center;
+      height: 2.75rem;
+      width: 29.5rem;
+      flex-grow: 0.5;
+      align-self: center;
+      margin-bottom: 0%;
+    `};
+`;
+
+const TitleContainer = styled('div')`
+  align-self: flex-start;
+  ${props =>
+    props.basic &&
+    css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 29.5rem;
+      height: 1.5rem;
+      align-self: center;
+      flex-grow: 0.25;
+    `};
+`;
+
+const OkContainer = styled('div')`
+  margin-left: 0.5rem;
+`;
+const Modal = withTheme(
+  ({ title, body, showButtons, onClose, onOk, type, confirmation, basic }) => {
+    return (
+      <>
+        <Container>
+          <ModalContainer basic={basic}>
+            {type === 'info' && !basic && (
+              <IconContainer>
+                <InfoIcon height="21" width="21" />
+              </IconContainer>
+            )}
+            {type === 'error' && !basic && (
+              <IconContainer>
+                <ErrorIcon height="21" width="21" />
+              </IconContainer>
+            )}
+            {type === 'success' && !basic && (
+              <IconContainer>
+                <SuccessIcon height="21" width="21" />
+              </IconContainer>
+            )}
+            {(type === 'warning' || confirmation) && !basic && (
+              <IconContainer>
+                <WarningIcon height="21" width="21" />
+              </IconContainer>
+            )}
+            <MessageContainer basic={basic}>
+              <TitleContainer basic={basic}>
+                <Body size="Bold">{title}</Body>
+                {basic && <CloseIcon height="8.91" width="8.66" />}
+              </TitleContainer>
+              {basic && <Divider height="1" width="520" />}
+              <BodyContainer basic={basic}>
+                <Body size="Small">{body}</Body>
+              </BodyContainer>
+
+              {basic && <Divider height="1" width="520" />}
+              {showButtons && (
+                <ButtonContainer basic={basic}>
+                  {(confirmation || basic) && (
+                    <PrimaryButton
+                      size="large"
+                      label="Cancel"
+                      onClose={onClose}
+                    />
+                  )}
+                  <OkContainer>
+                    <PrimaryButton size="large" label="Ok" onClick={onOk} />
+                  </OkContainer>
+                </ButtonContainer>
+              )}
+            </MessageContainer>
+          </ModalContainer>
+        </Container>
+      </>
+    );
+  },
+);
+
+export { Modal };
diff --git a/src/components/blocks/Pagination.js b/src/components/blocks/Pagination.js
@@ -36,7 +36,7 @@ const ControlsContainer = styled('div')`
     transform: rotate(270deg);`};
 `;
 
-const PagesContainer = withTheme(styled(ControlsContainer)`
+const PagesContainer = styled(ControlsContainer)`
   font-family: ${props => props.theme.typography.primary.regular};
   font-style: normal;
   font-weight: bold;
@@ -51,9 +51,9 @@ const PagesContainer = withTheme(styled(ControlsContainer)`
                     color: #262626;`;
     }
   }};
-`);
+`;
 
-const Pagination = ({ pages, current = 1, showLast = false, callback }) => {
+const Pagination = withTheme(({ pages, current = 1, showLast = false, callback }) => {
   let displayedPages = [current];
 
   let numberOfAddedPages = 1;
@@ -106,6 +106,6 @@ const Pagination = ({ pages, current = 1, showLast = false, callback }) => {
       </ControlsContainer>
     </PaginationContainer>
   );
-};
+});
 
 export { Pagination };
diff --git a/src/components/blocks/index.js b/src/components/blocks/index.js
@@ -12,4 +12,5 @@ export * from './LeftNav';
 export * from './Notifications';
 export * from './Pagination';
 export * from './TableDrawer';
-export * from './ComponentRepeater';
+export * from './ComponentRepeater';
+export * from './Modal';
diff --git a/src/components/form/PrimaryButton.js b/src/components/form/PrimaryButton.js
@@ -4,7 +4,7 @@ import styled, { withTheme } from 'styled-components';
 import { CircularProgress } from '@mui/material';
 import { ButtonText } from '../typography';
 
-const Button = withTheme(styled('button')`
+const Button = styled('button')`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -48,7 +48,7 @@ const Button = withTheme(styled('button')`
     box-sizing: border-box;
     cursor: default;
   }
-`);
+`;
 
 const PrimaryButton = withTheme(
   ({

diff --git a/src/components/form/SearchInput.js b/src/components/form/SearchInput.js
@@ -73,14 +73,14 @@ const SearchIconContainer = styled('div')`
       'background-color: #1890FF;height:1.75rem;')};
 `;
 
-const SearchContainer = withTheme(styled('div')`
+const SearchContainer = styled('div')`
   font-family: ${props => props.theme.typography.primary.regular};
   display: flex;
   justify-content: center;
   align-items: center;
-`);
+`;
 
-const ButtonSearchText = withTheme(styled('p')`
+const ButtonSearchText = styled('p')`
   margin: 0;
   display: flex;
   justify-content: center;
@@ -89,7 +89,7 @@ const ButtonSearchText = withTheme(styled('p')`
   height: 2.5rem;
   width: 3.125rem;
   color: ${props => (props.usePrimaryButton ? '#ffffff' : '#000000')};
-`);
+`;
 
 const SearchInput = withTheme(
   ({

diff --git a/src/components/form/Select.js b/src/components/form/Select.js
@@ -199,15 +199,20 @@ const StyledSearchInput = styled('input')`
   }
 `;
 
+  const StyledSelectLabel = styled('div')`
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+  `;
+
 const Select = withTheme(({
   size = SelectSizeEnum.default,
   type = SelectTypeEnum.basic,
   state = SelectStateEnum.default,
   options,
   selected = null,
   placeholder = 'Select',
-  width = '200px',
-  theme
+  width = '200px'
 }) => {
   const [menuIsVisible, setMenuIsVisible] = useState(false);
   const [selectState, setSelectState] = useState(state);
@@ -323,17 +328,11 @@ const Select = withTheme(({
     setSearchInputValue(e.target.value);
   };
 
-  const StyledSelectLabel = styled('div')`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: clip;
-  `;
-
   return (
     <div style={{ position: 'relative' }} ref={ref}>
       {/* Select for Basic type */}
       {type === SelectTypeEnum.basic && (
-        <StyledSelect theme={theme} 
+        <StyledSelect  
           ref={selectRef}
           size={size}
           width={width}
@@ -357,7 +356,7 @@ const Select = withTheme(({
       )}
       {/* Select for Multiple type */}
       {type === SelectTypeEnum.multiple && (
-        <StyledSelect theme={theme} 
+        <StyledSelect  
           ref={selectRef}
           width={width}
           size={size}
@@ -368,7 +367,7 @@ const Select = withTheme(({
           <StyledMultipleSelect>
             {selectedOptions != null && selectedOptions.length > 0
               ? selectedOptions.map(option => (
-                  <StyledMultipleSelectItem theme={theme} key={option.value}>
+                  <StyledMultipleSelectItem  key={option.value}>
                     {option.label}
                     <div
                       style={{ marginLeft: '5px' }}
@@ -394,7 +393,7 @@ const Select = withTheme(({
       )}
       {/* Select for Search type */}
       {type === SelectTypeEnum.search && (
-        <StyledSelect theme={theme} 
+        <StyledSelect  
           ref={selectRef}
           width={width}
           size={size}
@@ -449,7 +448,7 @@ const Select = withTheme(({
               selectedOptions.find(selected => selected.value === option.value);
 
             return (
-              <StyledBasicMenuItem theme={theme} 
+              <StyledBasicMenuItem  
                 key={option.value}
                 isSelected={isSelected}
                 onClick={() =>
@@ -473,7 +472,7 @@ const Select = withTheme(({
               option.label
                 .toLowerCase()
                 .includes(searchInputValue.toLowerCase()) && (
-                <StyledBasicMenuItem theme={theme} 
+                <StyledBasicMenuItem  
                   key={option.value}
                   isSelected={
                     selectedOptions != null &&