@finos/legend-extension-dsl-data-quality/lib/components/DataQualityCustomSelector.js

Legend extension for Data Quality

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2026-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { BaseMenuItem, CaretDownIcon, Checkbox, ControlledDropdownMenu, CustomSelectorInput, MenuContent, MenuContentItem, TimesIcon, } from '@finos/legend-art';
export const DataQualityCustomSelector = (props) => {
    const { value, options, onChange, disabled = false, placeholder = 'Choose option...', className, title = 'Choose option...', renderLabel, clearable = false, } = props;
    const selectedOption = options.find((opt) => opt.value === value?.value);
    const selectedLabel = selectedOption
        ? (renderLabel?.(selectedOption) ?? selectedOption.label)
        : placeholder;
    return (_jsxs(ControlledDropdownMenu, { className: className ?? 'data-quality-custom-selector', title: title, disabled: disabled, content: _jsx(MenuContent, { children: options.map((opt) => (_jsx(MenuContentItem, { className: "data-quality-custom-selector__dropdown__option", onClick: () => onChange(opt), children: renderLabel?.(opt) ?? opt.label }, String(opt.value)))) }), menuProps: {
            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
            transformOrigin: { vertical: 'top', horizontal: 'left' },
            elevation: 7,
        }, children: [_jsx("div", { className: "data-quality-custom-selector__label", children: selectedLabel }), clearable && selectedOption && (_jsx("button", { className: "data-quality-custom-selector__clear", onClick: (e) => {
                    e.stopPropagation();
                    onChange(undefined);
                }, children: _jsx(TimesIcon, {}) })), _jsx("div", { className: "data-quality-custom-selector__dropdown__trigger", children: _jsx(CaretDownIcon, {}) })] }));
};
export const DataQualityMultiCustomSelector = (props) => {
    const { value = [], onChange, options = [], placeholder = 'Select options', darkMode, disabled, renderLabel, } = props;
    const CustomOption = ({ children, ...optionProps }) => {
        const { data, isSelected, selectOption } = optionProps;
        const handleClick = (event) => {
            event.preventDefault();
            selectOption(data);
        };
        return (_jsxs(BaseMenuItem, { onClick: handleClick, className: "data-quality-validation-gui-editor__column-list-item", dense: true, children: [_jsx(Checkbox, { size: "small", checked: isSelected, onClick: handleClick }), _jsx("div", { children: children })] }));
    };
    return (_jsx(CustomSelectorInput, { value: value, placeholder: placeholder, isMulti: true, options: options, hideSelectedOptions: false, closeMenuOnSelect: false, formatOptionLabel: (option) => renderLabel?.(option) ?? option.label, components: {
            Option: CustomOption,
            MultiValueContainer: ({ children }) => {
                return (_jsx("div", { className: "data-quality-validation-gui-editor__column-list-item", children: children }));
            },
            MultiValueLabel: ({ data }) => renderLabel?.(data) ?? data.label,
            MultiValueRemove: () => null,
        }, onChange: (newValue) => onChange(newValue ? [...newValue] : []), darkMode: darkMode, disabled: disabled }));
};
//# sourceMappingURL=DataQualityCustomSelector.js.map