@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
31 lines • 2.21 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { memo, useCallback } from 'react';
import clsx from 'clsx';
import InternalFormField from '../../../form-field/internal';
import { useInternalI18n } from '../../../i18n/context';
import InternalMultiselect from '../../../multiselect/internal';
import { getBaseProps } from '../../base-component';
import styles from './styles.css.js';
export default memo(ChartFilter);
function ChartFilter({ series, i18nStrings, selectedSeries, onChange, ...restProps }) {
const baseProps = getBaseProps(restProps);
const className = clsx(baseProps.className, styles.root);
const i18n = useInternalI18n('[charts]');
const defaultOptions = series.map((d, i) => ({
label: d.label,
value: '' + i,
datum: d.datum,
__customIcon: React.createElement("span", { className: styles['custom-icon-wrapper'] }, d.marker),
}));
const selectedOptions = defaultOptions.filter(option => (selectedSeries === null || selectedSeries === void 0 ? void 0 : selectedSeries.indexOf(option.datum)) !== -1);
const updateSelection = useCallback(({ detail: { selectedOptions } }) => {
const selectedSeries = defaultOptions
.filter(option => selectedOptions.indexOf(option) !== -1)
.map(option => option.datum);
onChange(selectedSeries);
}, [onChange, defaultOptions]);
return (React.createElement(InternalFormField, { ...baseProps, label: i18n('i18nStrings.filterLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterLabel), className: className },
React.createElement(InternalMultiselect, { placeholder: i18n('i18nStrings.filterPlaceholder', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterPlaceholder), options: defaultOptions, selectedOptions: selectedOptions, onChange: updateSelection, className: styles['chart-filter'], selectedAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.filterSelectedAriaLabel, filteringType: "none", statusType: "finished", keepOpen: true, hideTokens: true })));
}
//# sourceMappingURL=index.js.map