es-grid-template/es/grid-component/control/InputControl/InputControl.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import { Controller } from "react-hook-form";
import { Input } from "rc-master-ui";
import { Typography } from "antd";
import classnames from "classnames";
import React, { Fragment } from "react";
import { isNullOrUndefined } from "../../hooks";
import { Col, Row } from "rc-master-ui/es/grid";
// import {isNullOrUndefined} from "../../../hooks"

const {
  Text
} = Typography;
const InputControl = props => {
  const {
    id,
    control,
    name,
    type,
    label,
    labelSize,
    required,
    errors,
    height,
    disabled,
    row,
    isLabel,
    placeholder,
    autoFocus,
    inLine,
    callback,
    readOnly,
    classes,
    isView,
    t,
    onKeyDown,
    ...rest
  } = props;
  const renderLabel = () => {
    return /*#__PURE__*/React.createElement(Col, {
      span: 6
    }, isLabel === false ? '' : /*#__PURE__*/React.createElement("label", {
      className: "form-label"
    }, t ? t(label ? label : '') : label ? label : '', " ", required ? /*#__PURE__*/React.createElement("span", {
      className: "text-danger"
    }, "*") : '', " "));
  };

  // const renderText = () => {
  //   return (
  //     <Fragment>
  //       <Controller
  //         name={name}
  //         control={control}
  //         render={({ field: { value } }) => (
  //           <span>{value}</span>
  //         )}
  //       />
  //     </Fragment>
  //   )
  // }

  const renderInput = () => {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column'
      }
    }, /*#__PURE__*/React.createElement(Controller, {
      name: name,
      control: control,
      render: ({
        field: {
          value,
          onChange
        }
      }) => /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
        id: id,
        value: !isNullOrUndefined(value) ? value : '',
        onChange: val => {
          onChange(val.target.value);
          if (callback) {
            callback(val);
          }
        },
        style: {
          height: `${height}px`
        },
        autoFocus: autoFocus,
        disabled: disabled,
        placeholder: placeholder,
        type: type ? type : 'text'
        // invalid={errors && true}
        ,
        status: errors && true ? 'error' : undefined
        // rows={row}
        ,
        readOnly: readOnly,
        onKeyDown: onKeyDown
      }))
    }), errors && /*#__PURE__*/React.createElement(Text, {
      type: "danger"
    }, errors?.message));
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Row, {
    gutter: [4, 4]
    // className={classnames(' align', {
    //   [labelSize ? labelSize : '']: labelSize,
    //   [classes ? classes : '']: classes,
    //   'form-row-inline-error': errors
    // }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'
    // )}
  }, renderLabel(), /*#__PURE__*/React.createElement(Col, {
    span: 18,
    className: classnames('', {
      'hidden-label': isLabel === false
    })
  }, renderInput())));
};
export default InputControl;