@nuskin/foundation-ui-components 1.1.1 → 1.3.0

package/src/common/select/NsSelect.tsx

@@ -1,8 +1,17 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { SelectContainer, SelectButton, SelectList, SelectHead, SelectLabel } from './NsSelect.styled';
+import React, { useState, useRef, useEffect, Children } from 'react';
+import {
+    SelectContainer,
+    SelectButton,
+    SelectList,
+    SelectHead,
+    SelectLabel,
+    SelectMain,
+    LeftArrowContainer,
+    RightArrowContainer,
+    ErrorContainer,
+} from './NsSelect.styled';
 import { NsIcon } from '../icon';
 import { SelectProps } from './types.d';
-
 const NsSelect: React.FC<SelectProps> = ({
     selectedValue,
     selectedLabel,
@@ -17,9 +26,14 @@ const NsSelect: React.FC<SelectProps> = ({
     label,
     readOnly = false,
     errorMessage,
+    hasArrows,
+    // eslint-disable-next-line no-unused-vars
+    rules,
+    reverseArrowControls,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
+    const [selectedIndex, setSelectedIndex] = useState(-1);
     const selectContainerRef = useRef<HTMLDivElement>(null);
     const selectHeadRef = useRef<HTMLDivElement>(null);
 
@@ -29,19 +43,16 @@ const NsSelect: React.FC<SelectProps> = ({
         }
     };
 
-    const handleSelect = (input: string) => {
+    const handleSelect = (input: string, index: number) => {
         onSelect(input);
         setIsOpen(false);
         setValue(input);
+        setSelectedIndex(index);
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleClickOutside = (event: MouseEvent) => {
-        if (
-            selectContainerRef.current &&
-            !selectContainerRef.current.contains(event.target as Node) &&
-            isOpen
-        ) {
+        if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node) && isOpen) {
             setIsOpen(false);
         }
     };
@@ -55,6 +66,40 @@ const NsSelect: React.FC<SelectProps> = ({
             }, 0);
         }
     };
+    const handleArrowRightClick = () => {
+        if (selectedIndex !== -1) {
+            const nextIndex = reverseArrowControls ? selectedIndex - 1 : selectedIndex + 1;
+            const childrenArray = Children.toArray(children);
+            const optionAtIndex = childrenArray[nextIndex];
+            const { value } = (optionAtIndex as any)?.props ?? {};
+            handleSelect(value, nextIndex);
+        } else {
+            if (!reverseArrowControls) {
+                const nextIndex = selectedIndex + 1;
+                const childrenArray = Children.toArray(children);
+                const optionAtIndex = childrenArray[nextIndex];
+                const { value } = (optionAtIndex as any)?.props ?? {};
+                handleSelect(value, nextIndex);
+            }
+        }
+    };
+    const handleArrowLeftClick = () => {
+        if (selectedIndex !== -1) {
+            const nextIndex = reverseArrowControls ? selectedIndex + 1 : selectedIndex - 1;
+            const childrenArray = Children.toArray(children);
+            const optionAtIndex = childrenArray[nextIndex];
+            const { value } = (optionAtIndex as any)?.props ?? {};
+            handleSelect(value, nextIndex);
+        } else {
+            if (reverseArrowControls) {
+                const nextIndex = selectedIndex + 1;
+                const childrenArray = Children.toArray(children);
+                const optionAtIndex = childrenArray[nextIndex];
+                const { value } = (optionAtIndex as any)?.props ?? {};
+                handleSelect(value, nextIndex);
+            }
+        }
+    };
 
     useEffect(() => {
         document.addEventListener('click', handleClickOutside);
@@ -64,53 +109,73 @@ const NsSelect: React.FC<SelectProps> = ({
     }, [handleClickOutside, isOpen]);
 
     return (
-        <SelectContainer
-            data-testid="select-container"
-            disabled={disabled || readOnly}
-            ref={selectContainerRef}
-            style={{
-                borderColor: errorMessage ? 'red' : undefined,
-                color: errorMessage ? 'red' : 'inherit',
-            }}
-        >
-            {label && <SelectLabel style={{ color: errorMessage ? 'red' : 'inherit' }}>{label}</SelectLabel>}
-            <SelectHead
-                data-testid="select-head"
+        <SelectMain>
+            {hasArrows && (
+                <LeftArrowContainer
+                    onClick={handleArrowLeftClick}
+                    className="LeftArrow"
+                    style={{
+                        visibility:
+                            !reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                    }}
+                >
+                    <NsIcon name="arrowLeft" color="primary" />
+                </LeftArrowContainer>
+            )}
+            <SelectContainer
+                data-testid="select-container"
                 disabled={disabled || readOnly}
-                type={type}
-                onMouseDown={handleMouseClick}
-                tabIndex={0}
-                ref={selectHeadRef}
+                ref={selectContainerRef}
+                errorMessage={errorMessage}
             >
-                <SelectButton>{selectedLabel || placeholder}</SelectButton>
-                {!readOnly && (
-                    <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
-                )}
-            </SelectHead>
-            {isOpen ? (
-                <SelectList
-                    data-testid="select-list"
-                    onMouseLeave={closeSelect}
-                    borderColor={selectBorderColor}
-                    className='selectList'
+                {label && <SelectLabel errorMessage={errorMessage}>{label}</SelectLabel>}
+                <SelectHead
+                    data-testid="select-head"
+                    disabled={disabled || readOnly}
+                    type={type}
+                    onMouseDown={handleMouseClick}
+                    tabIndex={0}
+                    ref={selectHeadRef}
                 >
-                    <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
-                        {React.Children.map(children, (child) => {
+                    <SelectButton>{selectedLabel || placeholder}</SelectButton>
+                    {!readOnly && <NsIcon name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />}
+                </SelectHead>
+                {isOpen ? (
+                    <SelectList
+                        data-testid="select-list"
+                        onMouseLeave={closeSelect}
+                        borderColor={selectBorderColor}
+                        className="selectList"
+                    >
+                        {React.Children.map(children, (child, index) => {
                             if (React.isValidElement(child)) {
                                 return React.cloneElement(child, {
                                     // @ts-ignore
-                                    onSelect: handleSelect,
+                                    onSelect: (input: string) => handleSelect(input, index),
                                     selectedValue: value,
                                     showListDivider,
+                                    index,
                                 });
                             }
                             return null;
                         })}
-                    </div>
-                </SelectList>
-            ) : null}
-            {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
-        </SelectContainer>
+                    </SelectList>
+                ) : null}
+                {errorMessage && <ErrorContainer>{errorMessage}</ErrorContainer>}
+            </SelectContainer>
+            {hasArrows && (
+                <RightArrowContainer
+                    onClick={handleArrowRightClick}
+                    className="RightArrow"
+                    style={{
+                        visibility:
+                            reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                    }}
+                >
+                    <NsIcon name="arrowRight" color="primary" />
+                </RightArrowContainer>
+            )}
+        </SelectMain>
     );
 };
 

package/src/common/select/NsSelectOption.tsx

@@ -24,7 +24,6 @@ export const NsSelectOption: React.FC<SelectOptionProps> = ({
         >
             <ListItem isSelected={value === selectedValue}>{label}</ListItem>
         </ListItemContainer>
-
     );
 };
 export default NsSelectOption;

package/src/common/select/stories/NsSelect.stories.tsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import NsSelect from '../NsSelect';
 import NsSelectOption from '../NsSelectOption';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsSelect;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/Inputs/NsSelect',
-    decorators: [
-        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
-    ],
+    decorators: [withCenterDecorator],
     component: NsSelect,
     argTypes: {
         type: { control: 'select', options: ['unfilled', 'outlined'] },
@@ -26,6 +29,7 @@ export default {
         validateOnBlur: { control: 'boolean' },
         autoComplete: { control: 'text' },
         rules: { control: 'array' },
+        hasArrows: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -100,17 +104,16 @@ export default {
         validateOnBlur: false,
         autoComplete: '',
         rules: [],
+        hasArrows: false,
     },
-} as ComponentMeta<typeof NsSelect>;
-
-export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
-    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+} as MetaStory;
 
-    const options = context.parameters.options;
+const AppSelect = (props: any) => {
+    const [selectedLabel, setSelectedLabel] = useState(props.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(props.selectedValue);
     const handleSelect = (value: string) => {
         setSelectedValue(value);
-        options.find((option: any) => {
+        props.options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(option.label);
             }
@@ -120,15 +123,21 @@ export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
 
     return (
         <NsSelect
-            {...args}
+            {...props}
             selectedValue={selectedValue}
             selectedLabel={selectedLabel}
             onSelect={handleSelect}
-            label={args.label}
+            label={props.label}
         >
-            {options.map((option: any) => (
+            {props.options.map((option: any) => (
                 <NsSelectOption key={option.value} value={option.value} label={option.label} />
             ))}
         </NsSelect>
     );
 };
+export const Select: Story = {
+    render: (args, context) => {
+        const options = context.parameters.options;
+        return <AppSelect options={options} {...args} />;
+    },
+};

package/src/common/select/types.d.ts

@@ -22,7 +22,9 @@ export interface SelectProps {
     itemValue?: string;
     validateOnBlur?: boolean;
     autoComplete?: string;
-    rules?: any[];
+    // eslint-disable-next-line no-undef
+    rules?: Array;
+    hasArrows?: boolean;
 }
 
 export interface SelectOptionProps {