@talend/react-faceted-search/lib/components/Badges/BadgeSlider/BadgeSliderForm.component.js

Faceted search

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BadgeSliderForm = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _utils = require("@talend/utils");
var _usage = require("../../../helpers/usage.helpers");
var _BadgeSliderModule = _interopRequireDefault(require("./BadgeSlider.module.scss"));
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const getSliderMode = ({
  name
}) => {
  switch (name) {
    case 'greaterThan':
      return _reactComponents.Slider.MODES.GREATER_THAN;
    case 'equals':
      return _reactComponents.Slider.MODES.EQUALS;
    default:
      return null;
  }
};
const getValidator = (decimal, min, max) => v => v != null && (v < min || v > max) || !decimal && v % 1 !== 0;
const getErrorMessage = (t, decimal, min, max, value) => {
  if (!decimal && value % 1 !== 0) {
    return t('FACETED_SEARCH_VALUE_SHOULD_BE_AN_INTEGER', {
      defaultValue: 'Please fill with an integer value'
    });
  }
  if (value < min || value > max) {
    return t('FACETED_SEARCH_VALUES_OUT_OF_RANGE', {
      defaultValue: 'The value must be between {{min}} and {{max}}',
      min,
      max
    });
  }
  return null;
};
const BadgeSliderForm = ({
  id,
  onChange,
  onSubmit,
  feature,
  t,
  unit,
  icon,
  operator = {},
  decimal = false,
  min = 0,
  max = 100,
  step = 1,
  value: initialValue = min,
  defaultValue,
  ...rest
}) => {
  const applyDataFeature = (0, _react.useMemo)(() => (0, _usage.getApplyDataFeature)(feature), [feature]);
  const [value, setValue] = (0, _react.useState)(initialValue);
  const [slider, setSlider] = (0, _react.useState)(initialValue);
  const [input, setInput] = (0, _react.useState)(initialValue);
  const [editing, setEditing] = (0, _react.useState)(false);
  const error = (0, _react.useMemo)(() => getErrorMessage(t, decimal, min, max, input), [t, decimal, min, max, input]);
  const isErroneous = (0, _react.useMemo)(() => getValidator(decimal, min, max), [decimal, min, max]);
  (0, _react.useEffect)(() => onChange(null, value), [onChange, value]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form, {
    id: `${id}-slider`,
    onSubmit: onSubmit,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _BadgeSliderModule.default['tc-badge-slider-form-body'],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: _BadgeSliderModule.default['tc-badge-slider-form-body-row'],
        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: _BadgeSliderModule.default['tc-badge-slider-form-body-row-icon'],
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.Icon, {
            name: icon.name,
            className: (0, _classnames.default)(_BadgeSliderModule.default['tc-badge-icon'], icon.class || icon.className)
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: _BadgeSliderModule.default['tc-badge-slider-form-body-row-value'],
          children: editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Number, {
            id: `${id}-input`,
            min: min,
            max: max,
            step: step,
            onChange: event => {
              const v = event.target.value;
              setInput(v);
              setValue(!isErroneous(v) ? v : defaultValue);
            },
            onBlur: () => {
              setInput(value);
              setValue(value);
              setSlider(value);
              setEditing(false);
            },
            value: input
          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
            className: _BadgeSliderModule.default['tc-badge-value-unit'],
            onClick: () => setEditing(true),
            title: t('FACETED_SEARCH_EDIT_DIRECTLY', {
              defaultValue: 'Edit directly'
            }),
            "aria-label": t('FACETED_SEARCH_EDIT_DIRECTLY', {
              defaultValue: 'Edit directly'
            }),
            children: [value, unit]
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.Slider, {
        value: slider,
        captionTextStepNumber: 2,
        mode: getSliderMode(operator),
        onChange: v => {
          setValue(v);
          setInput(v);
          setSlider(v);
        },
        min: min,
        max: max,
        step: step,
        hideTooltip: true
      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.InlineMessageDestructive, {
        description: error
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Buttons, {
      padding: {
        x: 0,
        bottom: 0,
        top: 'M'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonPrimary, {
        type: "submit",
        "data-feature": applyDataFeature,
        disabled: !!error,
        ...(0, _utils.getDataAttrFromProps)(rest),
        children: t('APPLY', {
          defaultValue: 'Apply'
        })
      })
    })]
  });
};
exports.BadgeSliderForm = BadgeSliderForm;
BadgeSliderForm.propTypes = {
  id: _propTypes.default.string.isRequired,
  onChange: _propTypes.default.func,
  onSubmit: _propTypes.default.func.isRequired,
  value: _propTypes.default.number,
  feature: _propTypes.default.string.isRequired,
  t: _propTypes.default.func.isRequired,
  unit: _propTypes.default.string,
  decimal: _propTypes.default.bool,
  min: _propTypes.default.number,
  max: _propTypes.default.number,
  step: _propTypes.default.number,
  defaultValue: _propTypes.default.number,
  icon: _propTypes.default.shape({
    name: _propTypes.default.string,
    class: _propTypes.default.string,
    className: _propTypes.default.string
  }),
  operator: _propTypes.default.shape({
    name: _propTypes.default.string
  })
};

// eslint-disable-next-line import/prefer-default-export
//# sourceMappingURL=BadgeSliderForm.component.js.map