Как изменить ValueContainer реагировать на выбор, чтобы минимизация не привела к странному поведению? - PullRequest
Новая
       20

Как изменить ValueContainer реагировать на выбор, чтобы минимизация не привела к странному поведению?

0 голосов
/ 27 апреля 2020

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

        ValueContainer = ({ children, getValue, ...props }) => {
            let values = getValue();
            let valueLabel = "";

            if (values.length > 0) valueLabel += props.selectProps.getOptionLabel(values[0]);
            if (values.length > 1) valueLabel += ` (${values.length})`;

            // Keep standard placeholder and input from react-select
            let childrenToRender = React.Children.toArray(children).filter((child) => ['Input', 'DummyInput', 'Placeholder'].indexOf(child.type.name) >= 0);

            return (
            <components.ValueContainer {...props}>
                {!props.selectProps.inputValue && valueLabel }
                { childrenToRender }
            </components.ValueContainer>
            );
        };


        customStyles = {
            valueContainer: (provided, state) => ({
              ...provided,
              textOverflow: "ellipsis",
              //maxWidth: "90%",
              //whiteSpace: "nowrap",
              overflow: "hidden",
              display: "initial"
            })
        };

//inside render()
            const employeeFilter = (
                                    <div className="multi-select col-6 col-md-3 filter-element btn">
                                        <span className="filter-label">Filter by employee(s)</span>
                                        <Select
                                            options={this.props.employeeProps.employeeData}
                                            onChange={this.handleEmployeeChange}
                                            value={selectedEmployee}
                                            isMulti={true}
                                            inputId='clickableInput'
                                            components={{
                                                ValueContainer
                                            }}
                                            closeMenuOnSelect={false}
                                            hideSelectedOptions={false}
                                            styles={customStyles}
                                            isSearchable={false}
                                        />
                                    </div>
            );

ValueContainer и customStyles определены до компонента React, и он отлично работает на моей машине для разработки. Однако на производстве он не работает должным образом:

  • нажатие за пределы раскрывающегося списка не закрывает его (как на компьютере разработчика)
  • текст-заполнитель едва виден (область имеет очень маленькая высота)

Причиной этого, кажется, является процесс минификации. Я использую TerserPlugin в веб-пакете. Использование Uglify JS не вариант, так как я пишу код ES6 (рекомендация здесь: Почему минификация Webpack 4 препятствует стилям для компонентаact-select? )

Я пробовал все в этом нить https://github.com/JedWatson/react-select/issues/2597 но не смог заставить его работать. Возможно, мое непонимание того, как работает система компонентов вact-select (я взял код из примера).

Спасибо за помощь!

...