@doopage/react-ui-kit/dist/es/SelectLocale/index.js

UI-kit for DooPage project

import _extends from "@babel/runtime/helpers/extends";
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';
import Space from '../Space';
import Select from '../Select';
import Button from '../Button';
import { Radio } from '../index';
import Menu from '../Menu';
import useStyles from './styles';
export var defaultLocaleOptions = [{
  id: 'af_ZA',
  name: 'Afrikaans'
}, {
  id: 'ar',
  name: 'Arabic'
}, {
  id: 'bg_BG',
  name: 'Bulgarian'
}, {
  id: 'ca_AD',
  name: 'Catalan'
}, {
  id: 'cs_CZ',
  name: 'Czech'
}, {
  id: 'cy_GB',
  name: 'Welsh'
}, {
  id: 'da_DK',
  name: 'Danish'
}, {
  id: 'de_AT',
  name: 'German (Austria)'
}, {
  id: 'de_CH',
  name: 'German (Switzerland)'
}, {
  id: 'de_DE',
  name: 'German (Germany)'
}, {
  id: 'el_GR',
  name: 'Greek'
}, {
  id: 'en_GB',
  name: 'English (UK)'
}, {
  id: 'en_US',
  name: 'English (US)'
}, {
  id: 'es_CL',
  name: 'Spanish (Chile)'
}, {
  id: 'es_ES',
  name: 'Spanish (Spain)'
}, {
  id: 'es_MX',
  name: 'Spanish (Mexico)'
}, {
  id: 'et_EE',
  name: 'Estonian'
}, {
  id: 'eu',
  name: 'Basque'
}, {
  id: 'fa_IR',
  name: 'Persian'
}, {
  id: 'fi_FI',
  name: 'Finnish'
}, {
  id: 'fr_CA',
  name: 'French (Canada)'
}, {
  id: 'fr_FR',
  name: 'French (France)'
}, {
  id: 'he_IL',
  name: 'Hebrew'
}, {
  id: 'hi_IN',
  name: 'Hindi'
}, {
  id: 'hr_HR',
  name: 'Croatian'
}, {
  id: 'hu_HU',
  name: 'Hungarian'
}, {
  id: 'id_ID',
  name: 'Indonesian'
}, {
  id: 'is_IS',
  name: 'Icelandic'
}, {
  id: 'it_IT',
  name: 'Italian'
}, {
  id: 'ja_JP',
  name: 'Japanese'
}, {
  id: 'km_KH',
  name: 'Khmer'
}, {
  id: 'ko_KR',
  name: 'Korean'
}, {
  id: 'la',
  name: 'Latin'
}, {
  id: 'lt_LT',
  name: 'Lithuanian'
}, {
  id: 'lv_LV',
  name: 'Latvian'
}, {
  id: 'mn_MN',
  name: 'Mongolian'
}, {
  id: 'nb_NO',
  name: 'Norwegian (Bokmål)'
}, {
  id: 'nl_NL',
  name: 'Dutch'
}, {
  id: 'nn_NO',
  name: 'Norwegian (Nynorsk)'
}, {
  id: 'pl_PL',
  name: 'Polish'
}, {
  id: 'pt_BR',
  name: 'Portuguese (Brazil)'
}, {
  id: 'pt_PT',
  name: 'Portuguese (Portugal)'
}, {
  id: 'ro_RO',
  name: 'Romanian'
}, {
  id: 'ru_RU',
  name: 'Russian'
}, {
  id: 'sk_SK',
  name: 'Slovak'
}, {
  id: 'sl_SI',
  name: 'Slovenian'
}, {
  id: 'sr_RS',
  name: 'Serbian'
}, {
  id: 'sv_SE',
  name: 'Swedish'
}, {
  id: 'th_TH',
  name: 'Thai'
}, {
  id: 'tr_TR',
  name: 'Turkish'
}, {
  id: 'uk_UA',
  name: 'Ukrainian'
}, {
  id: 'vi_VN',
  name: 'Vietnamese'
}, {
  id: 'zh_CN',
  name: 'Chinese (PRC)'
}, {
  id: 'zh_TW',
  name: 'Chinese (Taiwan)'
}];

var SelectLocale = function (props) {
  var _ref, _defaultOptions$;

  var hide = props.hide,
      selectProps = props.selectProps,
      addIcon = props.addIcon,
      removeIcon = props.removeIcon,
      addButtonProps = props.addButtonProps,
      removeButtonProps = props.removeButtonProps,
      showCheckedDefaultLocale = props.showCheckedDefaultLocale,
      onSelectedChange = props.onSelectedChange,
      onCheckedDefaultLocale = props.onCheckedDefaultLocale,
      defaultOptions = props.defaultOptions,
      onOptionsChange = props.onOptionsChange,
      _props$defaultLocale = props.defaultLocale,
      initValue = _props$defaultLocale === void 0 ? '' : _props$defaultLocale,
      defaultSelectedLocale = props.defaultSelectedLocale,
      _props$localeOptions = props.localeOptions,
      localeOptions = _props$localeOptions === void 0 ? defaultLocaleOptions : _props$localeOptions;
  var classes = useStyles(props);

  var _useState = useState(initValue),
      defaultLocale = _useState[0],
      setDefaultLocale = _useState[1];

  var _useState2 = useState(defaultOptions || []),
      addItems = _useState2[0],
      setAddItems = _useState2[1];

  var _useState3 = useState((_ref = defaultSelectedLocale != null ? defaultSelectedLocale : defaultOptions == null ? void 0 : (_defaultOptions$ = defaultOptions[0]) == null ? void 0 : _defaultOptions$.id) != null ? _ref : ''),
      selected = _useState3[0],
      setSelected = _useState3[1];

  var action = useRef();
  var allowRemove = useMemo(function () {
    var _addItems$find;

    return (addItems == null ? void 0 : (_addItems$find = addItems.find(function (item) {
      return item.id === selected;
    })) == null ? void 0 : _addItems$find.allowRemove) !== false;
  }, [selected]);

  var handleSelect = function (item) {
    // @ts-ignore
    action.current = 'add';
    setAddItems(function (preValue) {
      if (!preValue.some(function (el) {
        return el.id === item.id;
      })) return [].concat(preValue, [{
        id: item.id,
        name: item.name
      }]);
      return preValue;
    });
  };

  useEffect(function () {
    if (action.current === 'add') {
      var _addItems;

      setSelected(addItems == null ? void 0 : (_addItems = addItems[addItems.length - 1]) == null ? void 0 : _addItems.id);

      if (addItems.length === 1 && showCheckedDefaultLocale) {
        var _addItems$id, _addItems2;

        setDefaultLocale((_addItems$id = addItems == null ? void 0 : (_addItems2 = addItems[addItems.length - 1]) == null ? void 0 : _addItems2.id) != null ? _addItems$id : '');
      }
    }

    if (action.current === 'remove' && addItems.length > 0) {
      var _addItems$;

      setSelected(addItems == null ? void 0 : (_addItems$ = addItems[0]) == null ? void 0 : _addItems$.id);
    }
  }, [addItems]);
  useEffect(function () {
    if (selected) onSelectedChange == null ? void 0 : onSelectedChange(selected);
  }, [selected]);
  useEffect(function () {
    if (showCheckedDefaultLocale) onCheckedDefaultLocale == null ? void 0 : onCheckedDefaultLocale(defaultLocale);
  }, [defaultLocale]);
  useEffect(function () {
    onOptionsChange == null ? void 0 : onOptionsChange(addItems);
  }, [addItems]);
  if (hide) return null; // @ts-ignore

  return /*#__PURE__*/React.createElement(Space, {
    className: classes.container
  }, /*#__PURE__*/React.createElement(Select, _extends({
    fullWidth: true,
    disabled: !(addItems != null && addItems.length),
    label: "Locale",
    options: addItems,
    value: selected,
    placeholder: "Add locale before select",
    onChange: function onChange(e) {
      return setSelected(e.target.value);
    }
  }, selectProps)), /*#__PURE__*/React.createElement("div", {
    className: classes.action
  }, /*#__PURE__*/React.createElement(Menu, {
    button: /*#__PURE__*/React.createElement(Button, _extends({
      justIcon: true,
      round: true,
      color: "info",
      simple: true,
      helperText: "Add locale"
    }, addButtonProps), addIcon || /*#__PURE__*/React.createElement(AddIcon, null)),
    options: localeOptions.filter(function (item) {
      return !addItems.some(function (el) {
        return el.id === item.id;
      });
    }).map(function (item) {
      return _extends({}, item, {
        onClick: handleSelect
      });
    })
  }), /*#__PURE__*/React.createElement(Button, _extends({
    round: true,
    disabled: defaultLocale === selected || !allowRemove,
    justIcon: true,
    color: "danger",
    simple: true,
    helperText: "Remove locale",
    onClick: function removeItem() {
      action.current = 'remove';
      setAddItems(function (preValue) {
        return preValue.filter(function (item) {
          return item.id !== selected;
        });
      });
    }
  }, removeButtonProps), removeIcon || /*#__PURE__*/React.createElement(DeleteIcon, null)), showCheckedDefaultLocale && /*#__PURE__*/React.createElement("div", {
    className: classes.defaultLocale
  }, /*#__PURE__*/React.createElement(Radio, {
    key: "" + (defaultLocale === selected),
    label: "Default locale",
    checked: defaultLocale === selected && !!selected,
    onClick: function onClick() {
      return setDefaultLocale(selected || '');
    }
  }))));
};

export default /*#__PURE__*/memo(SelectLocale);