wip

packages/strapi-plugin-i18n/admin/src/components/ModalCreate/AdvancedForm.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, Checkbox, Padded } from '@buffetjs/core';
+import { useFormikContext } from 'formik';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import { getTrad } from '../../utils';
+
+const AdvancedForm = () => {
+  const { values, setFieldValue } = useFormikContext();
+  const { formatMessage } = useIntl();
+
+  return (
+    <div>
+      <BaselineAlignment top size="2px" />
+      <Padded bottom size="sm">
+        <Text color="grey" textTransform="uppercase">
+          {formatMessage({
+            id: getTrad('Settings.locales.modal.advanced.settings'),
+          })}
+        </Text>
+      </Padded>
+
+      <BaselineAlignment top size="10px" />
+      <Checkbox
+        id="default-checkbox"
+        name="default-checkbox"
+        onChange={() => setFieldValue('isDefault', !values.isDefault)}
+        message={formatMessage({
+          id: getTrad('Settings.locales.modal.advanced.setAsDefault'),
+        })}
+        someChecked={false}
+        value={values.isDefault}
+        htmlFor="default-checkbox"
+      />
+
+      <Text color="grey">
+        {formatMessage({
+          id: getTrad('Settings.locales.modal.advanced.setAsDefault.hint'),
+        })}
+      </Text>
+    </div>
+  );
+};
+
+export default AdvancedForm;

packages/strapi-plugin-i18n/admin/src/components/ModalCreate/BaseForm.js

@@ -5,6 +5,7 @@ import { Inputs } from '@buffetjs/custom';
 import Select from 'react-select';
 import { Col, Row } from 'reactstrap';
 import { useIntl } from 'react-intl';
+import { BaselineAlignment } from 'strapi-helper-plugin';
 import { useFormikContext } from 'formik';
 import { getTrad } from '../../utils';
 
@@ -23,6 +24,8 @@ const BaseForm = ({ options, defaultOption }) => {
           </Label>
         </span>
 
+        <BaselineAlignment top size="5px" />
+
         <Select
           aria-labelledby="locale-code"
           options={options}
@@ -31,10 +34,15 @@ const BaseForm = ({ options, defaultOption }) => {
             setFieldValue('displayName', selection.value);
             setFieldValue('code', selection.label);
           }}
+          styles={{
+            control: base => ({ ...base, height: '34px', minHeight: 'unset' }),
+          }}
         />
       </Col>
 
       <Col>
+        <BaselineAlignment top size="2px" />
+
         <Inputs
           label={formatMessage({
             id: getTrad('Settings.locales.modal.locales.displayName'),

packages/strapi-plugin-i18n/admin/src/components/ModalCreate/index.js

@@ -10,6 +10,7 @@ import SettingsModal from '../SettingsModal';
 import useDefaultLocales from '../../hooks/useDefaultLocales';
 import useAddLocale from '../../hooks/useAddLocale';
 import BaseForm from './BaseForm';
+import AdvancedForm from './AdvancedForm';
 
 const ModalCreate = ({ onClose, isOpened }) => {
   const { defaultLocales, isLoading } = useDefaultLocales();
@@ -38,9 +39,17 @@ const ModalCreate = ({ onClose, isOpened }) => {
   return (
     <Modal isOpen={isOpened} onToggle={onClose}>
       <Formik
-        initialValues={{ code: defaultOption.label, displayName: defaultOption.value }}
+        initialValues={{
+          code: defaultOption.label,
+          displayName: defaultOption.value,
+          isDefault: false,
+        }}
         onSubmit={values =>
-          addLocale({ code: values.code, name: values.displayName, isDefault: false }).then(onClose)}
+          addLocale({
+            code: values.code,
+            name: values.displayName,
+            isDefault: values.isDefault,
+          }).then(onClose)}
         validationSchema={localeFormSchema}
       >
         {({ handleSubmit, errors }) => (
@@ -58,7 +67,9 @@ const ModalCreate = ({ onClose, isOpened }) => {
               <TabPanel>
                 <BaseForm options={options} defaultOption={defaultOption} />
               </TabPanel>
-              <TabPanel>advanced</TabPanel>
+              <TabPanel>
+                <AdvancedForm />
+              </TabPanel>
             </SettingsModal>
 
             <ModalFooter>