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

EGroup Team react component modules.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { forwardRef, useEffect, useState } from 'react';
import isLength from 'validator/lib/isLength';
import clsx from 'clsx';
import useInputActions from '@e-group/hooks/useInputActions';
import { makeStyles } from '@material-ui/core';
import IconButton from '@material-ui/core/IconButton';
import Icomoon from '@e-group/material/Icomoon';
import QuestionTextField from '../QuestionTextField';
import QuestionOptionDecorated from '../QuestionOptionDecorated';
import DragIcon from '../DragIcon';
const useStyles = 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__*/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 = _objectWithoutProperties(props, ["className", "type", "index", "hideDragIcon", "hideCloseIconButton", "DragHandleProps", "MuiTextFieldProps", "MuiIconButtonProps"]);

  const classes = useStyles();

  const onChange = MuiTextFieldProps.onChange,
        _onFocus = MuiTextFieldProps.onFocus,
        autoFocus = MuiTextFieldProps.autoFocus,
        otherMuiTextFieldProps = _objectWithoutProperties(MuiTextFieldProps, ["onChange", "onFocus", "autoFocus"]);

  const _useState = useState(),
        _useState2 = _slicedToArray(_useState, 2),
        value = _useState2[0],
        setValue = _useState2[1];

  const _useInputActions = useInputActions(),
        inputEl = _useInputActions.inputEl,
        select = _useInputActions.select;

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

  }, []);

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

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

  return /*#__PURE__*/React.createElement("div", _extends({
    className: clsx(className, classes.option, {
      [classes.hideDragIcon]: hideDragIcon
    }),
    ref: ref
  }, other), /*#__PURE__*/React.createElement("div", DragHandleProps, /*#__PURE__*/React.createElement(DragIcon, {
    className: classes.dragIcon,
    fontSize: "small"
  })), /*#__PURE__*/React.createElement(QuestionOptionDecorated, {
    type: type,
    index: index
  }), /*#__PURE__*/React.createElement(QuestionTextField, _extends({
    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.createElement(IconButton, _extends({}, MuiIconButtonProps, {
    className: clsx(MuiIconButtonProps.className, {
      [classes.hide]: hideCloseIconButton
    })
  }), /*#__PURE__*/React.createElement(Icomoon, {
    type: "delete_1",
    color: "error"
  })));
});
export default QuestionOptionEditable;