@e-group/material-module/SurveyQuestions/QuestionOptionEditable/QuestionOptionEditable.js

EGroup Team react component modules.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _isLength = _interopRequireDefault(require("validator/lib/isLength"));

var _clsx = _interopRequireDefault(require("clsx"));

var _useInputActions2 = _interopRequireDefault(require("@e-group/hooks/useInputActions"));

var _core = require("@material-ui/core");

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Icomoon = _interopRequireDefault(require("@e-group/material/Icomoon"));

var _QuestionTextField = _interopRequireDefault(require("../QuestionTextField"));

var _QuestionOptionDecorated = _interopRequireDefault(require("../QuestionOptionDecorated"));

var _DragIcon = _interopRequireDefault(require("../DragIcon"));

const useStyles = (0, _core.makeStyles)(theme => ({
  option: {
    display: 'flex',
    alignItems: 'center',
    '& $dragIcon': {
      visibility: 'hidden'
    },
    '&:hover': {
      '& $dragIcon': {
        visibility: 'visible'
      }
    }
  },
  hideDragIcon: {
    '&:hover': {
      '& $dragIcon': {
        visibility: 'hidden'
      }
    }
  },
  hide: {
    visibility: 'hidden'
  },
  dragIcon: {
    paddingLeft: 4,
    color: theme.egPalette.text[2]
  }
}));
const MAX_OPTION = 50;
const QuestionOptionEditable = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const className = props.className,
        _props$type = props.type,
        type = _props$type === void 0 ? 'radio' : _props$type,
        index = props.index,
        hideDragIcon = props.hideDragIcon,
        hideCloseIconButton = props.hideCloseIconButton,
        DragHandleProps = props.DragHandleProps,
        _props$MuiTextFieldPr = props.MuiTextFieldProps,
        MuiTextFieldProps = _props$MuiTextFieldPr === void 0 ? {} : _props$MuiTextFieldPr,
        _props$MuiIconButtonP = props.MuiIconButtonProps,
        MuiIconButtonProps = _props$MuiIconButtonP === void 0 ? {} : _props$MuiIconButtonP,
        other = (0, _objectWithoutProperties2.default)(props, ["className", "type", "index", "hideDragIcon", "hideCloseIconButton", "DragHandleProps", "MuiTextFieldProps", "MuiIconButtonProps"]);
  const classes = useStyles();
  const onChange = MuiTextFieldProps.onChange,
        _onFocus = MuiTextFieldProps.onFocus,
        autoFocus = MuiTextFieldProps.autoFocus,
        otherMuiTextFieldProps = (0, _objectWithoutProperties2.default)(MuiTextFieldProps, ["onChange", "onFocus", "autoFocus"]);

  const _useState = (0, _react.useState)(),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        value = _useState2[0],
        setValue = _useState2[1];

  const _useInputActions = (0, _useInputActions2.default)(),
        inputEl = _useInputActions.inputEl,
        select = _useInputActions.select;

  const isError = !(0, _isLength.default)(value || '', {
    min: 0,
    max: MAX_OPTION
  });
  (0, _react.useEffect)(() => {
    if (autoFocus) {
      select();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);

  const handleChange = e => {
    setValue(e.target.value);

    if (onChange && (0, _isLength.default)(e.target.value, {
      min: 0,
      max: MAX_OPTION
    })) {
      onChange(e);
    }
  };

  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _clsx.default)(className, classes.option, {
      [classes.hideDragIcon]: hideDragIcon
    }),
    ref: ref
  }, other), /*#__PURE__*/_react.default.createElement("div", DragHandleProps, /*#__PURE__*/_react.default.createElement(_DragIcon.default, {
    className: classes.dragIcon,
    fontSize: "small"
  })), /*#__PURE__*/_react.default.createElement(_QuestionOptionDecorated.default, {
    type: type,
    index: index
  }), /*#__PURE__*/_react.default.createElement(_QuestionTextField.default, (0, _extends2.default)({
    inputRef: inputEl,
    onChange: handleChange,
    onFocus: e => {
      select();

      if (_onFocus) {
        _onFocus(e);
      }
    },
    value: value,
    error: isError,
    helperText: isError ? "\u9078\u9805\u8ACB\u52FF\u8D85\u904E ".concat(MAX_OPTION, " \u500B\u5B57\u5143") : undefined,
    autoFocus: autoFocus
  }, otherMuiTextFieldProps)), /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({}, MuiIconButtonProps, {
    className: (0, _clsx.default)(MuiIconButtonProps.className, {
      [classes.hide]: hideCloseIconButton
    })
  }), /*#__PURE__*/_react.default.createElement(_Icomoon.default, {
    type: "delete_1",
    color: "error"
  })));
});
var _default = QuestionOptionEditable;
exports.default = _default;