1.0.1 • Published 1 year ago

@licuido-ui/ui_language-choice

Licence

MIT

Version

1.0.1

Deps

Size

43 kB

Vulns

Weekly

Summary Dependency Versions

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

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

alt text

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)