Towards CSS-based layout for ListField. Not very good.

indexdata · Jan 19, 2024 · a57a102 · a57a102
1 parent a2a5283
commit a57a102
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/components/ListField.css b/src/components/ListField.css
@@ -0,0 +1,8 @@
+.row {
+    display: flex;
+    justify-content: space-between; /* Can be changed in the live sample */
+}
+
+.field {
+    width: 70%
+}
diff --git a/src/components/ListField.js b/src/components/ListField.js
@@ -4,6 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { Field } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import { Row, Col, TextField, Label, IconButton, Button } from '@folio/stripes/components';
+import css from './ListField.css';
+
 
 const ListField = ({ name, label, renderEntry, component, emptyValue }) => {
   return (
@@ -13,19 +15,19 @@ const ListField = ({ name, label, renderEntry, component, emptyValue }) => {
         {({ fields }) => (
           <>
             {fields.map((subname, index) => (
-              <Row>
-                <Col xs={8}>
+              <div key={index} className={css.row}>
+                <div className={css.field}>
                   {renderEntry ?
                     renderEntry(subname) :
                     <Field name={subname} component={component || TextField} />
                   }
-                </Col>
-                <Col xs={4}>
+                </div>
+                <div>
                   <IconButton icon="arrow-up" disabled={index === 0} onClick={() => fields.swap(index - 1, index)} />
                   <IconButton icon="arrow-down" disabled={index === fields.length - 1} onClick={() => fields.swap(index, index + 1)} />
                   <IconButton icon="trash" onClick={() => fields.remove(index)} />
-                </Col>
-              </Row>
+                </div>
+              </div>
             ))}
             <Button onClick={() => fields.push(emptyValue || '')}>
               <FormattedMessage id="ui-harvester-admin.add" />