Rtl.js

import React from 'react';
import styled from '@emotion/styled';
import { Heading } from './components/Heading';
import Select from '../../../src';

const options = [
  { value: 'UG', label: 'אוגנדה' },
  { value: 'UZ', label: 'אוזבקיסטן' },
  { value: 'AT', label: 'אוסטריה' },
  { value: 'AU', label: 'אוסטרליה' },
  { value: 'UA', label: 'אוקראינה' },
  { value: 'UY', label: 'אורוגוואי' },
  { value: 'AZ', label: 'אזרבייג׳ן' },
  { value: 'AE', label: 'איחוד האמירויות הערביות' },
  { value: 'IT', label: 'איטליה' },
  { value: 'AX', label: 'איי אולנד' },
  { value: 'BS', label: 'איי בהאמה' },
  { value: 'VG', label: 'איי הבתולה הבריטיים' },
  { value: 'VI', label: 'איי הבתולה של ארצות הברית' },
  { value: 'WF', label: 'איי ווליס ופוטונה' },
  { value: 'TC', label: 'איי טורקס וקאיקוס' },
  { value: 'MP', label: 'איי מריאנה הצפוניים' },
  { value: 'MH', label: 'איי מרשל' },
  { value: 'NF', label: 'איי נורפוק' },
  { value: 'SC', label: 'איי סיישל' },
  { value: 'FO', label: 'איי פארו' },
  { value: 'FK', label: 'איי פוקלנד' },
  { value: 'PN', label: 'איי פיטקרן' },
  { value: 'CK', label: 'איי קוק' },
  { value: 'CC', label: 'איי קוקוס (קילינג)' },
  { value: 'KY', label: 'איי קיימן' },
  { value: 'SB', label: 'איי שלמה' },
  { value: 'ID', label: 'אינדונזיה' },
  { value: 'IS', label: 'איסלנד' },
  { value: 'IR', label: 'איראן' },
  { value: 'IE', label: 'אירלנד' },
  { value: 'SV', label: 'אל סלבדור' },
  { value: 'AL', label: 'אלבניה' },
  { value: 'DZ', label: 'אלג׳יריה' },
  { value: 'AO', label: 'אנגולה' },
  { value: 'AI', label: 'אנגילה' },
  { value: 'AD', label: 'אנדורה' },
  { value: 'AQ', label: 'אנטארקטיקה' },
  { value: 'AG', label: 'אנטיגואה וברבודה' },
  { value: 'EE', label: 'אסטוניה' },
  { value: 'AF', label: 'אפגניסטן' },
  { value: 'EC', label: 'אקוודור' },
  { value: 'AR', label: 'ארגנטינה' },
  { value: 'AW', label: 'ארובה' },
  { value: 'ER', label: 'אריתריאה' },
  { value: 'AM', label: 'ארמניה' },
  { value: 'US', label: 'ארצות הברית' },
  { value: 'ET', label: 'אתיופיה' },
  { value: 'BT', label: 'בהוטן' },
  { value: 'BG', label: 'בולגריה' },
  { value: 'BO', label: 'בוליביה' },
  { value: 'BA', label: 'בוסניה והרצגובינה' },
  { value: 'BW', label: 'בוצוואנה' },
  { value: 'BI', label: 'בורונדי' },
  { value: 'BF', label: 'בורקינה פאסו' },
  { value: 'BH', label: 'בחריין' },
  { value: 'BY', label: 'בלארוס' },
  { value: 'BE', label: 'בלגיה' },
  { value: 'BZ', label: 'בליז' },
  { value: 'BD', label: 'בנגלדש' },
  { value: 'BJ', label: 'בנין' },
  { value: 'BB', label: 'ברבדוס' },
  { value: 'BN', label: 'ברוניי' },
  { value: 'BR', label: 'ברזיל' },
  { value: 'BM', label: 'ברמודה' },
  { value: 'GS', label: 'ג׳ורג׳יה הדרומית ואיי סנדוויץ׳ הדרומיים' },
  { value: 'DJ', label: 'ג׳יבוטי' },
  { value: 'JM', label: 'ג׳מייקה' },
  { value: 'JE', label: 'ג׳רסי' },
  { value: 'GE', label: 'גאורגיה' },
  { value: 'GH', label: 'גאנה' },
  { value: 'GA', label: 'גבון' },
  { value: 'GT', label: 'גואטמלה' },
  { value: 'GU', label: 'גואם' },
  { value: 'GP', label: 'גוואדלופ' },
  { value: 'GY', label: 'גיאנה' },
  { value: 'GF', label: 'גיאנה הצרפתית' },
  { value: 'GI', label: 'גיברלטר' },
  { value: 'GN', label: 'גינאה' },
  { value: 'GW', label: 'גינאה ביסאו' },
  { value: 'GQ', label: 'גינאה המשוונית' },
  { value: 'GM', label: 'גמביה' },
  { value: 'GL', label: 'גרינלנד' },
  { value: 'DE', label: 'גרמניה' },
  { value: 'GD', label: 'גרנדה' },
  { value: 'GG', label: 'גרנסי' },
  { value: 'DM', label: 'דומיניקה' },
  { value: 'DG', label: 'דייגו גרסיה' },
  { value: 'DK', label: 'דנמרק' },
  { value: 'ZA', label: 'דרום אפריקה' },
  { value: 'SS', label: 'דרום סודן' },
  { value: 'UN', label: 'האומות המאוחדות' },
  { value: 'AC', label: 'האי אסנשן' },
  { value: 'CX', label: 'האי כריסטמס' },
  { value: 'IM', label: 'האי מאן' },
  { value: 'HT', label: 'האיטי' },
  { value: 'MV', label: 'האיים המלדיביים' },
  { value: 'UM', label: 'האיים המרוחקים הקטנים של ארה״ב' },
  { value: 'IC', label: 'האיים הקנריים' },
  { value: 'BQ', label: 'האיים הקריביים ההולנדיים' },
  { value: 'IN', label: 'הודו' },
  { value: 'VA', label: 'הוותיקן' },
  { value: 'NL', label: 'הולנד' },
  { value: 'HK', label: 'הונג קונג (מחוז מנהלי מיוחד של סין)' },
  { value: 'HU', label: 'הונגריה' },
  { value: 'HN', label: 'הונדורס' },
  { value: 'IO', label: 'הטריטוריה הבריטית באוקיינוס ההודי' },
  { value: 'TF', label: 'הטריטוריות הדרומיות של צרפת' },
  { value: 'GB', label: 'הממלכה המאוחדת' },
  { value: 'PH', label: 'הפיליפינים' },
  { value: 'DO', label: 'הרפובליקה הדומיניקנית' },
  { value: 'CF', label: 'הרפובליקה של מרכז אפריקה' },
  { value: 'PS', label: 'השטחים הפלסטיניים' },
  { value: 'VN', label: 'וייטנאם' },
  { value: 'VU', label: 'ונואטו' },
  { value: 'VE', label: 'ונצואלה' },
  { value: 'ZW', label: 'זימבבואה' },
  { value: 'ZM', label: 'זמביה' },
  { value: 'CI', label: 'חוף השנהב' },
  { value: 'TJ', label: 'טג׳יקיסטן' },
  { value: 'TV', label: 'טובאלו' },
  { value: 'TG', label: 'טוגו' },
  { value: 'TO', label: 'טונגה' },
  { value: 'TN', label: 'טוניסיה' },
  { value: 'TK', label: 'טוקלאו' },
  { value: 'TR', label: 'טורקיה' },
  { value: 'TM', label: 'טורקמניסטן' },
  { value: 'TW', label: 'טייוואן' },
  { value: 'TL', label: 'טימור לסטה' },
  { value: 'TZ', label: 'טנזניה' },
  { value: 'TT', label: 'טרינידד וטובגו' },
  { value: 'TA', label: 'טריסטן דה קונה' },
  { value: 'GR', label: 'יוון' },
  { value: 'JP', label: 'יפן' },
  { value: 'JO', label: 'ירדן' },
  { value: 'IL', label: 'ישראל' },
  { value: 'KW', label: 'כווית' },
  { value: 'CV', label: 'כף ורדה' },
  { value: 'LA', label: 'לאוס' },
  { value: 'LB', label: 'לבנון' },
  { value: 'LY', label: 'לוב' },
  { value: 'LU', label: 'לוקסמבורג' },
  { value: 'LV', label: 'לטביה' },
  { value: 'LR', label: 'ליבריה' },
  { value: 'LT', label: 'ליטא' },
  { value: 'LI', label: 'ליכטנשטיין' },
  { value: 'LS', label: 'לסוטו' },
  { value: 'MR', label: 'מאוריטניה' },
  { value: 'MU', label: 'מאוריציוס' },
  { value: 'YT', label: 'מאיוט' },
  { value: 'ML', label: 'מאלי' },
  { value: 'MG', label: 'מדגסקר' },
  { value: 'MZ', label: 'מוזמביק' },
  { value: 'MD', label: 'מולדובה' },
  { value: 'MN', label: 'מונגוליה' },
  { value: 'ME', label: 'מונטנגרו' },
  { value: 'MS', label: 'מונסראט' },
  { value: 'MC', label: 'מונקו' },
  { value: 'MM', label: 'מיאנמר (בורמה)' },
  { value: 'FM', label: 'מיקרונזיה' },
  { value: 'MW', label: 'מלאווי' },
  { value: 'MY', label: 'מלזיה' },
  { value: 'MT', label: 'מלטה' },
  { value: 'EG', label: 'מצרים' },
  { value: 'MO', label: 'מקאו (מחוז מנהלי מיוחד של סין)' },
  { value: 'MK', label: 'מקדוניה' },
  { value: 'MX', label: 'מקסיקו' },
  { value: 'MA', label: 'מרוקו' },
  { value: 'MQ', label: 'מרטיניק' },
  { value: 'NR', label: 'נאורו' },
  { value: 'NO', label: 'נורווגיה' },
  { value: 'NG', label: 'ניגריה' },
  { value: 'NZ', label: 'ניו זילנד' },
  { value: 'NU', label: 'ניווה' },
  { value: 'NE', label: 'ניז׳ר' },
  { value: 'NI', label: 'ניקרגואה' },
  { value: 'NA', label: 'נמיביה' },
  { value: 'NP', label: 'נפאל' },
  { value: 'ST', label: 'סאו טומה ופרינסיפה' },
  { value: 'EA', label: 'סאוטה ומלייה' },
  { value: 'EH', label: 'סהרה המערבית' },
  { value: 'SD', label: 'סודן' },
  { value: 'SZ', label: 'סווזילנד' },
  { value: 'SJ', label: 'סוולבארד ויאן מאיין' },
  { value: 'SO', label: 'סומליה' },
  { value: 'SY', label: 'סוריה' },
  { value: 'SR', label: 'סורינם' },
  { value: 'SL', label: 'סיירה לאונה' },
  { value: 'CN', label: 'סין' },
  { value: 'SG', label: 'סינגפור' },
  { value: 'SI', label: 'סלובניה' },
  { value: 'SK', label: 'סלובקיה' },
  { value: 'WS', label: 'סמואה' },
  { value: 'AS', label: 'סמואה האמריקנית' },
  { value: 'MF', label: 'סן מרטן' },
  { value: 'SM', label: 'סן מרינו' },
  { value: 'SN', label: 'סנגל' },
  { value: 'BL', label: 'סנט ברתולומיאו' },
  { value: 'SH', label: 'סנט הלנה' },
  { value: 'VC', label: 'סנט וינסנט והגרנדינים' },
  { value: 'LC', label: 'סנט לוסיה' },
  { value: 'SX', label: 'סנט מארטן' },
  { value: 'PM', label: 'סנט פייר ומיקלון' },
  { value: 'KN', label: 'סנט קיטס ונוויס' },
  { value: 'ES', label: 'ספרד' },
  { value: 'RS', label: 'סרביה' },
  { value: 'LK', label: 'סרי לנקה' },
  { value: 'OM', label: 'עומאן' },
  { value: 'IQ', label: 'עיראק' },
  { value: 'SA', label: 'ערב הסעודית' },
  { value: 'PR', label: 'פוארטו ריקו' },
  { value: 'PL', label: 'פולין' },
  { value: 'PF', label: 'פולינזיה הצרפתית' },
  { value: 'PT', label: 'פורטוגל' },
  { value: 'FJ', label: 'פיג׳י' },
  { value: 'FI', label: 'פינלנד' },
  { value: 'PW', label: 'פלאו' },
  { value: 'PA', label: 'פנמה' },
  { value: 'PG', label: 'פפואה גינאה החדשה' },
  { value: 'PK', label: 'פקיסטן' },
  { value: 'PY', label: 'פרגוואי' },
  { value: 'PE', label: 'פרו' },
  { value: 'TD', label: 'צ׳אד' },
  { value: 'CL', label: 'צ׳ילה' },
  { value: 'CZ', label: 'צ׳כיה' },
  { value: 'FR', label: 'צרפת' },
  { value: 'CU', label: 'קובה' },
  { value: 'CO', label: 'קולומביה' },
  { value: 'KM', label: 'קומורו' },
  { value: 'CG', label: 'קונגו - ברזאויל' },
  { value: 'CD', label: 'קונגו - קינשאסה' },
  { value: 'XK', label: 'קוסובו' },
  { value: 'CR', label: 'קוסטה ריקה' },
  { value: 'CW', label: 'קוראסאו' },
  { value: 'KR', label: 'קוריאה הדרומית' },
  { value: 'KP', label: 'קוריאה הצפונית' },
  { value: 'KZ', label: 'קזחסטן' },
  { value: 'QA', label: 'קטאר' },
  { value: 'KG', label: 'קירגיזסטן' },
  { value: 'KI', label: 'קיריבאטי' },
  { value: 'NC', label: 'קלדוניה החדשה' },
  { value: 'KH', label: 'קמבודיה' },
  { value: 'CM', label: 'קמרון' },
  { value: 'CA', label: 'קנדה' },
  { value: 'KE', label: 'קניה' },
  { value: 'CY', label: 'קפריסין' },
  { value: 'HR', label: 'קרואטיה' },
  { value: 'RE', label: 'ראוניון' },
  { value: 'RW', label: 'רואנדה' },
  { value: 'RO', label: 'רומניה' },
  { value: 'RU', label: 'רוסיה' },
  { value: 'SE', label: 'שוודיה' },
  { value: 'CH', label: 'שווייץ' },
  { value: 'TH', label: 'תאילנד' },
  { value: 'YE', label: 'תימן' },
  { value: 'EZ', label: 'Eurozone' },
  { value: 'LONG', label: 'https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Rtl.js' }
];

const Rtl = ({ title }) => (
  <React.Fragment>
    <Heading
      title={title}
      source="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Rtl.js"
    />

    <Select
      multi
      options={options}
      values={[options.find((country) => country.label === 'ישראל')]}
      direction="rtl"
      placeholder="בחירה מהרשימה או חיפוש"
      noDataRenderer={() => <StyledNoData>אין תוצאות חיפוש</StyledNoData>}
      onChange={(value) =>
        console.log(`%c > onChange ${title} `, 'background: #555; color: tomato', value)
      }
    />
  </React.Fragment>
);

const StyledNoData = styled.div`
  padding: 10px;
  color: #555;
  border-radius: 5px;
  margin: 3px;
`;

export default Rtl;