Динамически растущие карты внутри колоды карт с одинаковым размером и горизонтальной прокруткой - PullRequest
0 голосов
/ 27 июня 2019

У меня есть колода карт, в которую будут добавлены карты динамически. И это должно быть с горизонтальной прокруткой.

Я хочу, чтобы карты, добавляемые в колоду карт, имели фиксированный размер, а колода карт должна иметь горизонтальную прокрутку по мере увеличения количества карт внутри колоды карт.

Это мой код CardDeck. При нажатии кнопки «плюс» в колоду карт добавляется карта.

<CardDeck
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "center",
                    width: "200em",
                    overflowX: "auto",
                    flexWrap: "nowrap"
                  }}
                >
                  {this.state.vehicleDetailsArr.length > 0 &&
                    this.state.vehicleDetailsArr.map(data => (
                      <Card style={{ flex: 1 }}>
                        <CardHeader tag="h6">Vehicle</CardHeader>
                        <CardBody>
                          <Row>
                            <Col>
                              <Downshift id="downshift-simple">
                                {({
                                  getInputProps,
                                  getItemProps,
                                  getLabelProps,
                                  getMenuProps,
                                  highlightedIndex,
                                  inputValue,
                                  isOpen,
                                  selectedItem
                                }) => {
                                  const {
                                    onBlur,
                                    onFocus,
                                    ...inputProps
                                  } = getInputProps({
                                    placeholder: "Search for a brand"
                                  });

                                  return (
                                    <div>
                                      {renderInput({
                                        fullWidth: true,
                                        label: "Car Make",
                                        InputLabelProps: getLabelProps({
                                          shrink: true
                                        }),
                                        InputProps: { onBlur, onFocus },
                                        inputProps
                                      })}

                                      <div {...getMenuProps()}>
                                        {isOpen ? (
                                          <Paper square>
                                            {getSuggestions(inputValue).map(
                                              (suggestion, index) =>
                                                renderSuggestion({
                                                  suggestion,
                                                  index,
                                                  itemProps: getItemProps({
                                                    item: suggestion.label
                                                  }),
                                                  highlightedIndex,
                                                  selectedItem
                                                })
                                            )}
                                          </Paper>
                                        ) : null}
                                      </div>
                                    </div>
                                  );
                                }}
                              </Downshift>
                            </Col>
                          </Row>
                          <Row>
                            <Col>
                              <TextField
                                id="vehicleDetail.carModel"
                                name="vehicleDetail.carModel"
                                label="Model"
                                placeholder="Car Model"
                                value={data.carModel}
                                onChange={this.handleTextFieldChange}
                                margin="normal"
                              />
                            </Col>
                          </Row>

                          <br />
                          <Row>
                            <Col>
                              <Button
                                size="Sm"
                                outline
                                color="secondary"
                                onClick={this.handleColorPickerClick}
                              >
                                <i class="fas fa-palette" />
                              </Button>

                              <div>
                                {data.toggleColorPalette && (
                                  <CompactPicker color={data.carColor} />
                                )}
                              </div>
                            </Col>
                          </Row>
                          <Row>
                            <Col>
                              <TextField
                                id="vehicleDetail.licensePlateNum"
                                name="vehicleDetail.licensePlateNum"
                                label="License plate number"
                                value={data.carLicensePlateNum}
                                onChange={this.handleTextFieldChange}
                                margin="normal"
                              />
                            </Col>
                          </Row>
                        </CardBody>
                        <CardFooter>
                          <Button size="sm" outline color="danger">
                            <i className="fas fa-edit" />
                          </Button>
                        </CardFooter>
                      </Card>
                    ))}
                  <Card style={{ flex: 1 }}>
                    <CardBody>
                      <Button size="lg" outline color="secondary">
                        <i class="fas fa-plus fa-9x" />
                      </Button>
                    </CardBody>
                  </Card>
                </CardDeck>

В настоящее время реализация не полностью корректна. Исходные две карты имеют очень большую ширину (поскольку размер картдека установлен на 200em. Но если я уберу ширину, на картдеке не будет включена горизонтальная прокрутка).

И чем больше карт я добавляю, тем они корректируются в пределах 200ем.

Есть ли способ динамически добавлять карты фиксированного размера с включенной прокруткой для колоды карт?

...