@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
202 lines (183 loc) • 6.99 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ValidationApp = exports.ATLAS = exports.ARSENAL = exports.BARCELONA = exports.PAINT_OPTIONS = exports.PHONE_OPTIONS = exports.NoteUI = exports.ContainerUI = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = _interopRequireDefault(require("."));
var _jsxRuntime = require("react/jsx-runtime");
var ContainerUI = (0, _styledComponents.default)('div').withConfig({
displayName: "EditableFieldstoriesHelpers__ContainerUI",
componentId: "na8w4r-0"
})(["width:300px;padding:20px;background-color:white;margin:10px auto;border:1px solid rgba(155,155,195,0.4);border-radius:3px;"]);
exports.ContainerUI = ContainerUI;
var NoteUI = (0, _styledComponents.default)('div').withConfig({
displayName: "EditableFieldstoriesHelpers__NoteUI",
componentId: "na8w4r-1"
})(["width:100%;padding:20px;background-color:rgba(155,155,195,0.1);margin:20px auto;border:1px solid #6bc0ff;border-radius:3px;color:rgba(155,155,195,1);p{margin:0 0 20px 0;&:last-child{margin:0;}}ul{padding:0;margin:0;list-style-position:inside;}li{margin-bottom:10px;}code{border:1px solid rgba(125,115,165,0.5);display:inline-block;padding:2px 3px;}"]);
exports.NoteUI = NoteUI;
var PHONE_OPTIONS = ['Home', 'Work', 'Other'];
exports.PHONE_OPTIONS = PHONE_OPTIONS;
var PAINT_OPTIONS = ['Acrylics', 'Oil', 'Pastels', 'Watercolour', 'Other'];
exports.PAINT_OPTIONS = PAINT_OPTIONS;
var BARCELONA = {
value: 'FC Barcelona',
id: 'TEAM_1',
someOtherProp: 'the best, Jerry, the best'
};
exports.BARCELONA = BARCELONA;
var ARSENAL = {
value: 'Arsenal',
disabled: true,
id: 'TEAM_2',
someOtherProp: 'the best, Jerry, the best'
};
exports.ARSENAL = ARSENAL;
var ATLAS = {
value: 'Atlas',
disabled: true,
id: 'TEAM_3',
someOtherProp: 'the best, Jerry, the best'
};
exports.ATLAS = ATLAS;
var ValidationApp = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2.default)(ValidationApp, _React$Component);
function ValidationApp() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.state = {
timeout: 100
};
_this.validateFieldValue = function (payload) {
console.log('validating');
var name = payload.name,
value = payload.value;
var isValid = !value.includes('off') && value !== 'other' && value !== '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 === 'warn') {
resolve({
isValid: isValid,
name: name,
value: value,
type: 'warning',
message: "That's it, you have been warned"
});
} else if (value === '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'
});
}
}
}, _this.state.timeout);
});
};
return _this;
}
var _proto = ValidationApp.prototype;
_proto.render = function render() {
var _this2 = this;
var timeout = this.state.timeout;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContainerUI, {
onSubmit: function onSubmit(e) {
e.preventDefault();
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteUI, {
children: ["Type:", /*#__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)("p", {
children: "Delay the time it takes for the validation to resolve:"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
htmlFor: "timoeut",
children: ["Timeout:", /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
style: {
marginLeft: '10px',
width: '70px',
padding: '3px',
textAlign: 'right',
borderRadius: '3px',
border: '0'
},
type: "number",
value: timeout,
onChange: function onChange(event) {
_this2.setState({
timeout: event.target.value
});
}
}), ' ', "ms"]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "team",
name: "team",
placeholder: "Add a team name",
type: "text",
value: "atlas",
validate: this.validateFieldValue
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "Musicians",
name: "musicians",
type: "text",
placeholder: "Add a musician name",
value: ['George Harrison', 'Neil Young'],
validate: this.validateFieldValue
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "Favourite Paint Colour",
name: "paint",
placeholder: "Add a colour",
type: "text",
valueOptions: PAINT_OPTIONS,
value: [{
option: PAINT_OPTIONS[0],
value: 'Anthraquinone Blue PB60'
}, {
option: PAINT_OPTIONS[3],
value: 'Ultramarine Violet'
}, {
option: PAINT_OPTIONS[1],
value: 'Bismuth Yellow'
}],
validate: this.validateFieldValue
})]
});
};
return ValidationApp;
}(_react.default.Component);
exports.ValidationApp = ValidationApp;