Как вы повторяете символ после содержимого и заполняете его до 100% ширины? JSX / React

Question

Я искал проекты и наткнулся на Material Design - Бэзил, просматривая описание, я видел, как Бэзил отображает ингредиенты, и мне было любопытно, как это делается.

Ссылка: https://material.io/design/material-studies/basil.html#components

это первый элемент в разделе «Компоненты».

Я пробовал что-то вроде

const varRecipeIngredientBuilder
    = jsnIngredients =>(
        <div>

        <ListItem>
            <Grid item xs={1}>
                <Checkbox/>
            </Grid>
            <Grid item xs={9}>
            <h5>{jsnIngredients.name}{" . ".repeat(38 - jsnIngredients.name.length )}</h5>
            </Grid>
            <Grid item xs={1}>

            <h5>{jsnIngredients.quantity}</h5>
            </Grid>
            <Grid item xs={1}>

            {jsnIngredients.measurement}
            </Grid>


        </ListItem>
        </div>
    )
function RecipeIngredients ({json}){
    return(
        <List>
            {json.map(varRecipeIngredientBuilder)}
        </List>
    )
};

export default RecipeIngredients;

Я чувствую, что я близок ... но возможно что «38» должно быть чем-то другим.

сейчас некоторые элементы в списке выстраиваются в ряд, а некоторые нет (даже при использовании «.»). конец слегка зазубренный, может быть, в 10% списка, и не такой плавный, как в примере.

кто знает, может быть,. сбивает меня с толку, и это не текстовое повторение.

Отказ от ответственности: я использую js / реакции уже около 2 недель. Я архитектор данных о карьере, поэтому я понимаю шаблоны проектирования ... но это все еще новый язык для меня. Поэтому, чтобы узнать, я пытаюсь повторить то, что вижу.

Answer 1

Ниже приведен пример одного из способов сделать это. Подход в моем примере заключается в том, чтобы просто иметь более чем достаточно точек для заполнения доступного пространства, затем использовать noWrap на Typography, чтобы дополнительные точки были скрыты, и переопределить стиль noWrap по умолчанию для удалить textOverflow: 'ellipsis'.

import React from "react";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

const ingredients = [
  { name: "Basil", amount: "6 tbsp" },
  { name: "Gluten-free Spaghetti", amount: "2 cups" },
  { name: "Garlic", amount: "1 tbsp" }
];
const dots = " . ".repeat(500);
const TypographyNoEllipsis = withStyles({ noWrap: { textOverflow: "unset" } })(
  Typography
);
export default function App() {
  return (
    <List>
      {ingredients.map(ingredient => {
        return (
          <ListItem>
            <Grid container spacing={1}>
              <Grid item xs={10}>
                <TypographyNoEllipsis noWrap>
                  {ingredient.name}
                  {dots}
                </TypographyNoEllipsis>
              </Grid>
              <Grid item xs={2}>
                <Typography>{ingredient.amount}</Typography>
              </Grid>
            </Grid>
          </ListItem>
        );
      })}
    </List>
  );
}