Merge pull request #141 from web3ui/feat/select_nodata

feat(Select): added nodata icon
web3ui · Feb 14, 2022 · 443625f · 443625f
2 parents 79187b0 + e03532c
commit 443625f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 31 deletions.
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Select from './Select';
-import { Icon } from '../Icon';
-import { iconTypes } from '../Icon/collection';
+import { Icon, iconTypes } from '../Icon';
 import color from '../../styles/colors';
 
 export default {
@@ -138,3 +137,11 @@ Disabled.args = {
     disabled: true,
     defaultOptionIndex: 0,
 };
+
+export const Nodata = Template.bind({});
+Nodata.args = {
+    // options: [],
+    onChange: onTestOptionChange,
+    label: 'Label Text',
+    defaultOptionIndex: 0,
+};
diff --git a/src/components/Select/Select.styles.ts b/src/components/Select/Select.styles.ts
@@ -4,36 +4,35 @@ import color from '../../styles/colors';
 import styled, { css } from 'styled-components';
 import { SelectProps, LabelProps, SelectedItemProps } from './types';
 
-export const DivStyledWrapper = styled.div<Pick<SelectProps, 'state'>>`
+const DivStyledWrapper = styled.div<Pick<SelectProps, 'state'>>`
     ${resetCSS};
     display: inline-block;
     position: relative;
 `;
 
-export const LabelStyled = styled.label<LabelProps>`
+const LabelStyled = styled.label<LabelProps>`
     ${resetCSS}
     ${fonts.text}
     background-color: ${color.white};
     height: 24px;
     left: 12px;
     line-height: 1;
-    padding: 2px 4px;
     pointer-events: none;
     position: absolute;
     padding: 0 4px;
     transition: all 0.1s ease-out;
     ${({ hasSelectedIndex }) =>
-        hasSelectedIndex ? `top: -12px; font-size: 14px;` : `top: 20px;`};
+        hasSelectedIndex ? 'top: -12px; font-size: 14px;' : 'top: 20px;'};
 `;
 
-export const SelectStyled = styled.div`
+const SelectStyled = styled.div`
     ${resetCSS}
     ${fonts.text}
     background-color: transparent;
     overflow: hidden;
 `;
 
-export const SelectedItem = styled.div<SelectedItemProps>`
+const SelectedItem = styled.div<SelectedItemProps>`
     ${resetCSS}
     ${fonts.text}
     background-color: ${color.white};
@@ -119,7 +118,7 @@ const iconStyle = css`
     width: 100%;
 `;
 
-export const PrefixIcon = styled.div`
+const PrefixIcon = styled.div`
     ${resetCSS}
     ${iconStyle}
     margin-right: 8px;
@@ -129,13 +128,13 @@ export const PrefixIcon = styled.div`
     }
 `;
 
-export const DropDownIcon = styled.div`
-    ${iconStyle}
+const DropDownIcon = styled.div`
+    ${iconStyle};
     position: absolute;
     right: 16px;
 `;
 
-export const ErrorLabel = styled.label`
+const ErrorLabel = styled.label`
     ${resetCSS}
     ${fonts.text}
     bottom: -23px;
@@ -147,7 +146,7 @@ export const ErrorLabel = styled.label`
     position: absolute;
 `;
 
-export const Options = styled.div`
+const Options = styled.div`
     ${resetCSS}
     ${fonts.text}
     background-color: ${color.blueLight};
@@ -181,8 +180,8 @@ export const Options = styled.div`
     }
 `;
 
-export const Option = styled.div`
-    ${resetCSS}
+const Option = styled.div`
+    ${resetCSS};
     align-items: center;
     cursor: pointer;
     display: flex;
@@ -200,16 +199,23 @@ export const Option = styled.div`
     }
 `;
 
+const NoDataTextStyled = styled.p`
+    text-align: center;
+    margin-top: -12px;
+    margin-bottom: 5px;
+`;
+
 const SelectStyles = {
+    DivStyledWrapper,
     DropDownIcon,
     ErrorLabel,
     LabelStyled,
+    NoDataTextStyled,
     Option,
     Options,
     PrefixIcon,
     SelectedItem,
     SelectStyled,
-    DivStyledWrapper,
 };
 
 export default SelectStyles;
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,19 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import color from '../../styles/colors';
 import { Icon } from '../Icon';
-import { iconTypes } from '../Icon/collection';
+import { iconTypes } from '../Icon';
+import { Illustration } from '../Illustrations';
 import SelectStyles from './Select.styles';
 import type { SelectProps } from './types';
 
 const {
+    DivStyledWrapper,
     DropDownIcon,
     ErrorLabel,
     LabelStyled,
+    NoDataTextStyled,
     Option,
     Options,
     PrefixIcon,
     SelectedItem,
-    DivStyledWrapper,
 } = SelectStyles;
 
 const Select: React.FC<SelectProps> = ({
@@ -27,6 +29,7 @@ const Select: React.FC<SelectProps> = ({
     state = disabled ? 'disabled' : undefined,
     style,
     width = '200px',
+    customNoDataText = 'No Data',
 }: SelectProps) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedOptionIndex, setSelectedOptionIndex] =
@@ -105,19 +108,34 @@ const Select: React.FC<SelectProps> = ({
             )}
             {isOpen && (
                 <Options aria-label="select-options" data-testid="test-options">
-                    {options.map(
-                        (option, index) =>
-                            index !== selectedOptionIndex && (
-                                <Option
-                                    onClick={onOptionClicked(index)}
-                                    key={option?.label}
-                                    data-testid="test-option"
-                                    aria-label="select-option"
-                                >
-                                    <PrefixIcon>{option?.prefix}</PrefixIcon>
-                                    {option?.label}
-                                </Option>
-                            ),
+                    {options?.length ? (
+                        options.map(
+                            (option, index) =>
+                                index !== selectedOptionIndex && (
+                                    <Option
+                                        onClick={onOptionClicked(index)}
+                                        key={option?.label}
+                                        data-testid="test-option"
+                                        aria-label="select-option"
+                                    >
+                                        <PrefixIcon>
+                                            {option?.prefix}
+                                        </PrefixIcon>
+                                        {option?.label}
+                                    </Option>
+                                ),
+                        )
+                    ) : (
+                        <>
+                            <Illustration
+                                logo="servers"
+                                width="100%"
+                                height="60px"
+                            />
+                            <NoDataTextStyled>
+                                {customNoDataText}
+                            </NoDataTextStyled>
+                        </>
                     )}
                 </Options>
             )}

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -51,6 +51,11 @@ export interface SelectProps {
      * index of selected option by default
      */
     defaultOptionIndex?: number | undefined;
+
+    /**
+     * To replace no data text with a different text, but still keep image
+     */
+    customNoDataText?: string;
 }
 
 export interface OptionProps {