@helpscout/hsds-react/components/EditableTextarea/EditableTextarea.storiesHelpers.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ValidationApp = void 0;

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

var _EditableField = require("../EditableField/EditableField.storiesHelpers");

var _ = _interopRequireDefault(require("."));

var _jsxRuntime = require("react/jsx-runtime");

var ValidationApp = function ValidationApp() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_EditableField.ContainerUI, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_EditableField.NoteUI, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        children: "Type anywhere in the textarea (for multiple lines testing):"
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
            children: "\"off\""
          }), " to get the error style"]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
            children: "\"warn\""
          }), " to get a warning style"]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
            children: "\"other\""
          }), " to get a custom validation style"]
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
      label: "To do",
      maxRows: 4,
      validate: validateFieldValue,
      onCommit: function onCommit(_ref) {
        var data = _ref.data;
        console.log('commit data', data);
      }
    })]
  });
};

exports.ValidationApp = ValidationApp;

function validateFieldValue(payload) {
  var name = payload.name,
      value = payload.value;
  var isValid = !value.includes('off') && !value.includes('other') && !value.includes('warn');
  return new Promise(function (resolve) {
    setTimeout(function () {
      if (isValid) {
        resolve({
          isValid: isValid,
          name: name,
          value: value
        });
      } else {
        if (value.includes('off')) {
          resolve({
            isValid: isValid,
            name: name,
            value: value,
            type: 'error',
            message: 'That is definitely not right'
          });
        } else if (value.includes('warn')) {
          resolve({
            isValid: isValid,
            name: name,
            value: value,
            type: 'warning',
            message: "That's it, you have been warned"
          });
        } else if (value.includes('other')) {
          resolve({
            isValid: isValid,
            name: name,
            value: value,
            type: 'other',
            message: "I don't know what you're talking about, have a trophy",
            color: '#57c28d',
            icon: 'activity'
          });
        }
      }
    }, 500);
  });
}