LanguageChoice

The LanguageChoice component is implemented to select the language get use of it. It also suggest through suggestion language and we can switch language by the select component

Author

• @author G Balaji [email protected]

Link

Story Book Link language

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_language-choice

Import component

import { LanguageChoice } from '@licuido-ui/ui_language-choice';

Usage

<LanguageChoice
  title='Select your language'
  titleStyle={{}}
  selectId='select'
  allLangArray={allData}
  allLangState={allLangState}
  suggestedLangArray={suggestionData}
  suggestedLangState={suggestedLangState}
  languagesBoxStyle={{}}
  languageCardProps={{
    allLangTitle: 'All languages',
    suggestedLangTitle: 'Suggested for you',
    languageId: 'language-id',
    languageTitleStyle: {},
    cardStyle: {},
    selectedCardSx: {},
    cardTitleStyle: {},
    cardSubtitleStyle: {},
    handleClick: (val, index, parent) => handleClick(val, index, parent),
  }}
  selectProps={{
    componentStylePropSx: {
      paddingRight: '3px',
    },
    label: '',
    labelPropsSx: {},
    selectParentSx: {
      display: 'flex',
      justifyContent: 'end',
    },
    rootStyleSx: {
      background: '#fff',
      paddingLeft: '6px',
    },
    inputRootStyleSx: {
      '& div': {
        paddingRight: '3px',
      },
    },
    value: optionValue,
    options: options,
    handleChange: handleChange,
    islabel: false,
    inputMaxWidth: '200px',
    inputMinHeight: '',
    inputMinWidth: '200px',
    inputMaxHeight: '',
    dropdownMaxHeight: '',
    dropdownMaxWidth: '200px',
    dropdownMinHeight: '',
    dropdownMinWidth: '200px',
    inputBackgroundColor: '',
    inputBorder: '',
    inputBorderRadius: '8px',
    inputColor: '',
    inputPropsSx: {
      fontWeight: '500',
    },
    inputStartEndornment: <GlobeSvg />,
    inputEndEndornment: <ArrowDown width='18px' color='red' />,
  }}
/>

Image

Sample Code

import { LanguageChoice} from '@licuido-ui/ui_language-choice';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { useState } from 'react';
import ArrowDown from './assets/arrowDown';
import SearchIcon from './assets/searchIcon';
import GlobeSvg from './assets/globleSvg';

function App() {

  // Update the selected options when the user makes a selection
  const handleSelectChange = (event: any, newValue: any) => {
    setSelectedOptions(newValue);
  };

  // Selected options state
  const [selectedOptions, setSelectedOptions] = useState([]);

  // All language selected state
  const [allLangState, setAllLangState] = useState({ langName: '', langText: '' });

  // Suggested language selected state
  const [suggestedLangState, setSuggestedLangState] = useState({ langName: '', langText: '' });

  const [optionValue, setOptionValue] = useState<any | any[]>([]);

  const allData = [
    {
      langName: 'Hindi',
      langText: 'हिन्दी',
    },
    {
      langName: 'Tamil',
      langText: 'தமிழ்',
    },
    {
      langName: 'Malayalam',
      langText: 'മലയാളം',
    },
    {
      langName: 'English',
      langText: 'English',
    },
    {
      langName: 'Arabic',
      langText: 'اَلْعَرَبِيَّةُ',
    },
    {
      langName: 'Sanskrit',
      langText: 'संस्कृत ',
    },
    {
      langName: 'Greek',
      langText: 'Ελληνικά',
    },
    {
      langName: 'Chinese',
      langText: '中國人',
    },
    {
      langName: 'Russian',
      langText: 'французский',
    },
    {
      langName: 'Marathi',
      langText: 'मराठी',
    },
  ];

  const suggestionData = [
    {
      langName: 'Hindi',
      langText: 'हिन्दी',
    },
    {
      langName: 'Tamil',
      langText: 'தமிழ்',
    },
    {
      langName: 'Malayalam',
      langText: 'മലയാളം',
    },
    {
      langName: 'English',
      langText: 'English',
    },
    {
      langName: 'Arabic',
      langText: 'اَلْعَرَبِيَّةُ',
    },
  ];

  const handleClick = (val: { langName: string; langText: string }, index: number, parent: string) => {
    // if all languages, set into all language selected state; otherwise, set in suggested language selected state
    if (parent === 'allData') {
      setAllLangState(val);
    } else {
      setSuggestedLangState(val);
    }
  };

  // This function maps your language data into options
  const options = allData.map((val) => {
    return {
      label: val.langName,
      value: val.langText,
    };
  });

  // handleChange function for the Select component
  const handleChange = (e: React.SyntheticEvent, val: any | any[]) => {
    const newValue = Array.isArray(val) ? val[0] : val;
    setOptionValue(val); // Update the optionValue state

    setAllLangState({
      langName: newValue.label as string,
      langText: newValue.value as string,
    });
  };

  return (
        <LanguageChoice
        title='Select your language'
        titleStyle={{ color: 'red' }}
        selectId='select'
        allLangArray={allData}
        allLangState={allLangState}
        suggestedLangArray={suggestionData}
        suggestedLangState={suggestedLangState}
        languagesBoxStyle={{}}
        languageCardProps={{
          allLangTitle: 'All languages',
          suggestedLangTitle: 'Suggested for you',
          languageId: 'language-id',
          languageTitleStyle: {},
          cardStyle: {},
          selectedCardSx: {},
          cardTitleStyle: {},
          cardSubtitleStyle: {},
          handleClick: (val, index, parent) => handleClick(val, index, parent),
        }}
        selectProps={{
          componentStylePropSx: {},
          label: '',
          labelPropsSx: {},
          selectParentSx: {
            display: 'flex',
            justifyContent: 'end',
          },
          rootStyleSx: {
            background: '#fff',
            paddingLeft: '6px',
          },
          inputRootStyleSx: {},
          value: optionValue,
          options: options,
          handleChange: handleChange,
          islabel: false,
          inputMaxWidth: '160px',
          inputMinHeight: '',
          inputMinWidth: '160px',
          inputMaxHeight: '500px',
          dropdownMaxHeight: '',
          dropdownMaxWidth: '150px',
          dropdownMinHeight: '',
          dropdownMinWidth: '150px',
          inputBackgroundColor: 'red',
          inputBorder: '',
          inputBorderRadius: '8px',
          inputColor: '',
          inputPropsSx: {
            fontWeight: '500',
            padding: '0 !important',
          },
          inputStartEndornment: <GlobeSvg />,
          inputEndEndornment: <ArrowDown width='18px' color='red' />,
        }}
      />

  );
}

export default App;

Props

| Prop | Type | Description | Default Value | | -------------------- | ----------------- | -------------------------------------------------------------------- | ------------------------------ | | className | string | The className of the container. | '' (empty string) | | sx | SxProps | Style props for Material-UI components. | {} (empty object) | | selectId | string | The unique identifier for the select component. | '' (empty string) | | title | string | The title of the component. | '' (empty string) | | titleStyle | SxProps | Style for the component's title. | {} (empty object) | | languagesBoxStyle | SxProps | Styles for the parent box containing language cards. | {} (empty object) | | allLangArray | LanguageArray[] | An array of objects representing all languages. | [] (empty array) | | allLangState | languageItemProps | The selected language state for all languages. | { langName: '', langText: '' } | | suggestedLangArray | LanguageArray[] | An array of objects representing suggested languages. | [] (empty array) | | suggestedLangState | languageItemProps | The selected language state for suggested languages. | { langName: '', langText: '' } | | languageCardProps | LanguageCardProps | Props related to language cards. Includes styles and other settings. | {} (empty object) | | selectProps | SelectProps | Props for the select dropdown component. | {} (empty object) |

select props contains,

| Prop | Type | Description | Default Value | | ---------------------- | -------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------- | | componentStylePropSx | SxProps | Styles for the entire component parent box. | {} (empty object) | | multiple | boolean | Whether the select allows multiple selections. | false | | rootStyleSx | SxProps | Styles for the select root. | {} (empty object) | | selectParentSx | SxProps | Styles for the select parent. | {} (empty object) | | inputRootStyleSx | SxProps | Styles for the input root. | {} (empty object) | | selectId | string | Unique identifier for the select component, useful for BDD testing. | '' (empty string) | | handleChange | function | A callback function to handle changes in the select component. | () => null | | value | OptionType or OptionType[] | The selected value(s) of the select component. | OptionType: undefined, OptionType[]: [] (empty array) | | options | OptionType[] | An array of options for the select component. | [] (empty array) | | label | string | Label for the select component. | '' (empty string) | | labelPropsSx | object | Styles for the label heading. | {} (empty object) | | islabel | boolean | Whether a label is displayed. | false | | dropdownMinHeight | string | Minimum height for the dropdown. | '' (empty string) | | dropdownMaxWidth | string | Maximum width for the dropdown. | '' (empty string) | | dropdownMinWidth | string | Minimum width for the dropdown. | '' (empty string) | | dropdownMaxHeight | string | Maximum height for the dropdown. | '' (empty string) | | inputMinHeight | string | Minimum height for the input. | '' (empty string) | | inputMaxWidth | string | Maximum width for the input. | '' (empty string) | | inputMinWidth | string | Minimum width for the input. | '' (empty string) | | inputMaxHeight | string | Maximum height for the input. | '' (empty string) | | inputBackgroundColor | string | Background color for the input. | '' (empty string) | | inputColor | string | Color for the input text. | '' (empty string) | | inputBorder | string | Border style for the input. | '' (empty string) | | inputBorderRadius | string | Border radius for the input. | '' (empty string) | | inputPropsSx | object | Custom styles for the input. | {} (empty object) | | inputStartEndornment | JSX.Element | The element to be displayed at the start of the input. | <></> (empty JSX element) | | inputEndEndornment | JSX.Element | The element to be displayed at the end of the input. | <></> (empty JSX element) |