@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
291 lines (259 loc) • 10.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ContainerUI = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = _interopRequireWildcard(require("."));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var BARCELONA = {
value: 'FC Barcelona',
id: 'TEAM_1',
someOtherProp: 'the best, Jerry, the best'
};
var ARSENAL = {
value: 'Arsenal',
disabled: true,
id: 'TEAM_2',
someOtherProp: 'the best, Jerry, the best'
};
var ATLAS = {
value: 'Atlas',
disabled: true,
id: 'TEAM_3',
someOtherProp: 'the best, Jerry, the best'
};
var ContainerUI = (0, _styledComponents.default)('div').withConfig({
displayName: "EditableFieldslabs__ContainerUI",
componentId: "sc-1509vp7-0"
})(["width:300px;padding:20px;background-color:white;margin:10px auto;border:1px solid rgba(155,155,195,0.4);border-radius:3px;"]); // Passing value as props example
exports.ContainerUI = ContainerUI;
var ValuePropsApp = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2.default)(ValuePropsApp, _React$Component);
function ValuePropsApp() {
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 = {
value: BARCELONA,
multiValue: ['barcelona', 'atlas'],
compositeValue: ['Johnny', 'Cash']
};
return _this;
}
var _proto = ValuePropsApp.prototype;
_proto.render = function render() {
var _this2 = this;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContainerUI, {
onSubmit: function onSubmit(e) {
e.preventDefault();
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
children: "Single value field"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "Team",
name: "team",
placeholder: "Add a sports team name",
type: "text",
value: this.state.value
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
value: BARCELONA
});
},
children: "Barcelona"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
value: ARSENAL
});
},
children: "Arsenal"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
value: ATLAS
});
},
children: "Atlas"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
onClick: function onClick() {
if (!_this2.state.loop) {
var interval = setInterval(function () {
_this2.setState({
value: (0, _extends2.default)({}, ATLAS, {
disabled: !_this2.state.value.disabled
})
});
}, 500);
_this2.setState({
loop: interval
});
} else {
clearInterval(_this2.state.loop);
_this2.setState({
loop: null
});
}
},
children: ["Atlas enabling/disabling loop", ' ', this.state.loop ? '(click again to turn off)' : '']
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
children: JSON.stringify(this.state.value, null, 2)
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
children: "Multiple value fields"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "Team",
name: "team",
placeholder: "Add a sports team name",
type: "text",
value: this.state.multiValue
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
multiValue: ['barcelona', 'atlas', 'arsenal']
});
},
children: "3 teams"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
multiValue: ['barcelona', 'atlas']
});
},
children: "2 teams"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
multiValue: [ATLAS]
});
},
children: "1 team"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
multiValue: []
});
},
children: "No teams"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
children: JSON.stringify(this.state.multiValue, null, 2)
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
children: "Composite Fields"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.EditableFieldComposite, {
placeholder: "Add a name",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "First Name",
name: "first_name",
type: "text",
placeholder: "First Name",
value: this.state.compositeValue[0]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "Last Name",
name: "last_name",
type: "text",
placeholder: "Last Name",
value: this.state.compositeValue[1]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
compositeValue: ['George', 'Harrison']
});
},
children: "George Harrison"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
_this2.setState({
compositeValue: ['Johhny', 'Cash']
});
},
children: "Johhny Cash"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
children: JSON.stringify(this.state.compositeValue, null, 2)
})
})]
});
};
return ValuePropsApp;
}(_react.default.Component); // On commit example
var PAINT_OPTIONS = ['Acrylics', 'Oil', 'Pastels', 'Watercolour', 'Other'];
var OnCommitApp = /*#__PURE__*/function (_React$PureComponent) {
(0, _inheritsLoose2.default)(OnCommitApp, _React$PureComponent);
function OnCommitApp() {
var _this3;
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this3 = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this3.state = {
passed: null
};
return _this3;
}
var _proto2 = OnCommitApp.prototype;
_proto2.render = function render() {
var _this4 = this;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContainerUI, {
onSubmit: function onSubmit(e) {
e.preventDefault();
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
label: "Teams (individual fields disabled)",
name: "teams",
type: "text",
placeholder: "Add a team name",
value: [BARCELONA, (0, _extends2.default)({}, ARSENAL, {
disabled: false
}), (0, _extends2.default)({}, ATLAS, {
disabled: false
})],
onCommit: function onCommit(passed) {
_this4.setState({
commit: passed
});
}
}), /*#__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,
onCommit: function onCommit(passed) {
_this4.setState({
commit: passed
});
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
children: "Data passed to onCommit: "
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
children: this.state.commit ? JSON.stringify(this.state.commit, null, 2) : ''
})
})]
});
};
return OnCommitApp;
}(_react.default.PureComponent); // stories.add('On Commit', () => <OnCommitApp />)