@talend/react-faceted-search/lib-esm/components/Badges/BadgePeriod/BadgePeriod.component.js

Faceted search

import { useMemo } from 'react';
import { format, isValid } from 'date-fns';
import PropTypes from 'prop-types';
import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propTypes';
import { BadgeFaceted } from '../BadgeFaceted';
import { BadgePeriodForm } from './BadgePeriodForm.component';
import { Badge } from "@talend/react-components";
import { isEmpty } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
const DATE_FORMAT_YYYY_DD_MM = 'yyyy-MM-dd';
function isDateRange(value) {
  return value.id === 'CUSTOM';
}
function formatDate(date) {
  return format(date, DATE_FORMAT_YYYY_DD_MM);
}
function getRangeLabel(startDateTime, endDateTime, t) {
  return `${formatDate(startDateTime)} ${t('TO', {
    defaultValue: 'to'
  })} ${formatDate(endDateTime)}`;
}
const getSelectBadgeLabel = (value, t) => {
  const labelAll = t('FACETED_SEARCH_VALUE_ALL', {
    defaultValue: 'All'
  });
  if (isEmpty(value)) return labelAll;
  if (isDateRange(value) && isValid(value.startDateTime) && isValid(value.endDateTime)) {
    return getRangeLabel(value.startDateTime, value.endDateTime, t);
  }
  return value.label || labelAll;
};

// eslint-disable-next-line import/prefer-default-export
export const BadgePeriod = ({
  displayType,
  filterBarPlaceholder,
  id,
  initialOperatorOpened,
  initialValueOpened,
  label,
  readOnly,
  removable,
  operator,
  operators,
  size,
  value,
  values,
  t,
  ...rest
}) => {
  const currentOperator = operator || (operators === null || operators === void 0 ? void 0 : operators[0]);
  const badgePeriodId = `${id}-badge-period`;
  const badgeLabel = useMemo(() => getSelectBadgeLabel(value, t), [value, t]);
  return /*#__PURE__*/_jsx(BadgeFaceted, {
    badgeId: id,
    displayType: displayType,
    id: badgePeriodId,
    initialOperatorOpened: initialOperatorOpened,
    initialValueOpened: initialValueOpened,
    labelCategory: label,
    labelValue: badgeLabel,
    operator: currentOperator,
    operators: operators,
    readOnly: readOnly,
    removable: removable,
    size: size,
    t: t,
    value: value || {},
    type: "period",
    children: ({
      onSubmitBadge,
      onChangeValue,
      badgeValue
    }) => /*#__PURE__*/_jsx(BadgePeriodForm, {
      id: badgePeriodId,
      onChange: onChangeValue,
      onSubmit: onSubmitBadge,
      value: badgeValue,
      values: values,
      t: t,
      ...rest
    })
  });
};
BadgePeriod.propTypes = {
  displayType: PropTypes.oneOf(Object.values(Badge.TYPES)),
  filterBarPlaceholder: PropTypes.string,
  id: PropTypes.string.isRequired,
  readOnly: PropTypes.bool,
  removable: PropTypes.bool,
  label: PropTypes.string,
  initialOperatorOpened: PropTypes.bool,
  initialValueOpened: PropTypes.bool,
  operator: operatorPropTypes,
  operators: operatorsPropTypes,
  size: PropTypes.oneOf(Object.values(Badge.SIZES)),
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    checked: PropTypes.bool,
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired
  })]),
  values: PropTypes.array,
  t: PropTypes.func.isRequired
};
BadgePeriod.defaultProps = {
  readOnly: false,
  removable: true,
  initialOperatorOpened: false,
  initialValueOpened: false
};
//# sourceMappingURL=BadgePeriod.component.js.map