@procore/core-react
Version:
React library of Procore Design Guidelines
542 lines (540 loc) • 16.5 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["component", "debug", "initialValue", "view", "variant", "useLabelAsInlineLabel", "useDescriptionAsInlineDescription"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { pick } from 'ramda';
import React from 'react';
import { Box, Button, Form, useFormContext } from '../../index';
var stylesFormDebugger = {
backgroundColor: '#444',
color: '#f1f1f1',
fontSize: '0.8rem'
};
export function FormDebugger() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var fields = useFormContext();
var record = {};
if (!Object.keys(props).length) {
record = fields;
} else {
record = pick(Object.keys(props), fields);
}
return /*#__PURE__*/React.createElement(Box, {
flex: "1",
padding: "md",
margin: "lg none",
style: stylesFormDebugger
}, /*#__PURE__*/React.createElement("pre", {
style: {
whiteSpace: 'break-spaces'
}
}, JSON.stringify(record, null, 2)));
}
/**
* Takes a Form Field component, e.g. Form.Select, and creates
* a full Form of one view and variant. Empty value examples,
* examples with values, various text or state formats.
*/
var SingleForm = function SingleForm(_ref) {
var _ref$component = _ref.component,
FieldComponent = _ref$component === void 0 ? Form.Field : _ref$component,
debug = _ref.debug,
initialValue = _ref.initialValue,
view = _ref.view,
variant = _ref.variant,
useLabelAsInlineLabel = _ref.useLabelAsInlineLabel,
useDescriptionAsInlineDescription = _ref.useDescriptionAsInlineDescription,
props = _objectWithoutProperties(_ref, _excluded);
// removes colStart from DOM for traditional variant
var columnOne = variant === 'traditional' ? {} : {
colStart: 1
};
var columnTwo = variant === 'traditional' ? {} : {
colStart: 7
};
return /*#__PURE__*/React.createElement(Form, {
enableReinitialize: true,
initialValues: {
value: initialValue
},
variant: variant,
view: view,
onSubmit: function onSubmit(values) {
return alert(JSON.stringify(values, null, 2));
}
}, /*#__PURE__*/React.createElement(Form.Form, null, debug && /*#__PURE__*/React.createElement(FormDebugger, null), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
name: "empty"
}, useLabelAsInlineLabel ? {
inlineLabel: 'Empty Text'
} : {
label: 'Empty Text'
}, useDescriptionAsInlineDescription ? {
inlineDescription: 'Empty Description'
} : {
description: 'Empty Description'
}, columnOne, props)), /*#__PURE__*/React.createElement(FieldComponent, _extends({
name: "value"
}, useLabelAsInlineLabel ? {
inlineLabel: 'Initial Value Text'
} : {
label: 'Initial Value Text'
}, useDescriptionAsInlineDescription ? {
inlineDescription: 'Initial Value Description'
} : {
description: 'Initial Value Description'
}, columnTwo, props))), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
name: "disabled-empty",
disabled: true
}, useLabelAsInlineLabel ? {
inlineLabel: 'Disabled Empty Text'
} : {
label: 'Disabled Empty Text'
}, useDescriptionAsInlineDescription ? {
inlineDescription: 'Disabled Empty Description'
} : {
description: 'Disabled Empty Description'
}, columnOne, props)), /*#__PURE__*/React.createElement(FieldComponent, _extends({
name: "disabled-value",
disabled: true
}, useLabelAsInlineLabel ? {
inlineLabel: 'Disabled Initial Value Text'
} : {
label: 'Disabled Initial Value Text'
}, useDescriptionAsInlineDescription ? {
inlineDescription: 'Disabled Initial Description'
} : {
description: 'Disabled Initial Description'
}, columnTwo, props))), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(FieldComponent, _extends({
name: "error-value",
error: "Some error message that should be read red"
}, useLabelAsInlineLabel ? {
inlineLabel: 'Error Message Initial Value Text'
} : {
label: 'Error Message Initial Value Text'
}, useDescriptionAsInlineDescription ? {
inlineDescription: 'Error Message Initial Description'
} : {
description: 'Error Message Initial Description'
}, columnOne, props)))));
};
export var DemoForm = function DemoForm(_ref2) {
var _ref2$view = _ref2.view,
view = _ref2$view === void 0 ? 'create' : _ref2$view,
_ref2$enableConfirmNa = _ref2.enableConfirmNavigation,
enableConfirmNavigation = _ref2$enableConfirmNa === void 0 ? true : _ref2$enableConfirmNa;
return /*#__PURE__*/React.createElement(Form, {
view: view,
onSubmit: function onSubmit() {
alert(JSON.stringify(arguments.length <= 0 ? undefined : arguments[0], null, 2));
// Necessary to return success to notify the client the data
// is saved on the server and this `form` is pristine once again.
return Promise.resolve();
},
enableConfirmNavigation: enableConfirmNavigation
}, /*#__PURE__*/React.createElement(Form.Form, null, /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.Text, {
name: "text",
label: "Text",
colStart: 1
}), /*#__PURE__*/React.createElement(Form.Number, {
name: "number",
label: "Number",
required: true,
tooltip: "An example tooltip for any field, this value goes directly to the Tooltip overlay prop",
colStart: 7
})), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.Select, {
name: "select",
label: "Select",
options: formSelectOptions,
colStart: 1
}), /*#__PURE__*/React.createElement(Form.MultiSelect, {
name: "multiselect",
label: "MultiSelect",
options: formSelectOptions,
colStart: 7
})), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.Select, {
name: "select",
label: "Select with Groups",
getGroup: function getGroup(option) {
return option.groupAssociation;
},
groupGetId: function groupGetId(group) {
return group.uuid;
},
groupGetLabel: function groupGetLabel(group) {
return group.displayName;
},
options: formSelectOptions,
optgroups: formSelectGroupOptions
}), /*#__PURE__*/React.createElement(Form.PillSelect, {
name: "pillselect",
label: "Status",
options: formPillSelectOptions,
colStart: 7
})), /*#__PURE__*/React.createElement(Form.Row, null, /*#__PURE__*/React.createElement(Form.TieredSelect, {
name: "tieredselect",
label: "Tiered Select",
options: formTieredSelectOptions,
colStart: 1
}), /*#__PURE__*/React.createElement(Form.GroupSelect, {
name: "groupselect",
label: "Group Select for Distribution",
options: formGroupSelectOptions,
groups: formGroupSelectGroups,
colStart: 7
})), /*#__PURE__*/React.createElement(Box, {
textAlign: "center",
marginTop: "sm",
marginBottom: "xl"
}, /*#__PURE__*/React.createElement(Button, {
variant: "secondary",
type: "reset"
}, "Reset"), ' ', /*#__PURE__*/React.createElement(Button, {
type: "submit"
}, "Save"))));
};
/** All variations for a field. views, with values, no values, text variations, etc.
* @example
* <BaseCRU
component={Form.Number}
initialValue={100}
/>
*/
export function BaseCRU(props) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Standard"), /*#__PURE__*/React.createElement("h2", null, "Create"), /*#__PURE__*/React.createElement(SingleForm, _extends({
view: "create"
}, props)), /*#__PURE__*/React.createElement("h2", null, "Read"), /*#__PURE__*/React.createElement(SingleForm, _extends({
view: "read"
}, props)), /*#__PURE__*/React.createElement("h2", null, "Update"), /*#__PURE__*/React.createElement(SingleForm, _extends({
view: "update"
}, props)), /*#__PURE__*/React.createElement("h1", null, "Traditional"), /*#__PURE__*/React.createElement("h2", null, "Create"), /*#__PURE__*/React.createElement(SingleForm, _extends({
view: "create",
variant: "traditional"
}, props)), /*#__PURE__*/React.createElement("h2", null, "Read"), /*#__PURE__*/React.createElement(SingleForm, _extends({
view: "read",
variant: "traditional"
}, props)), /*#__PURE__*/React.createElement("h2", null, "Update"), /*#__PURE__*/React.createElement(SingleForm, _extends({
view: "update",
variant: "traditional"
}, props)));
}
export var formGroupSelectOptions = [{
id: 5139977,
label: 'Cat'
}, {
id: 1279548,
label: 'Cow'
}, {
id: 1690,
label: 'Duck'
}, {
id: 3116635,
label: 'Crocodile'
}, {
id: 1037291,
label: 'Dog'
}, {
id: 1987946,
label: 'Elephant'
}, {
id: 1665038,
label: 'Fox'
}, {
id: 10338,
label: 'Frog'
}, {
id: 4177019,
label: 'Giraffe'
}, {
id: 5136274,
label: 'Lion'
}, {
id: 1819065,
label: 'Owl'
}, {
id: 3733119,
label: 'Parrot'
}, {
id: 2142072,
label: 'Pig'
}, {
id: 1360365,
label: 'Wolf'
}];
export var formGroupSelectGroups = [{
id: 180604,
label: 'Group #1',
options: [5139977, 1037291, 1279548, 5136274]
}, {
id: 183915,
label: 'Group #2',
options: [1037291, 1279548]
}, {
id: 187138,
label: 'Group #3',
options: [1665038, 10338]
}, {
id: 127496,
label: 'Group #4',
options: [3116635, 1819065]
}, {
id: 126261,
label: 'Group #5',
options: [1690]
}].map(function (group) {
return _objectSpread(_objectSpread({}, group), {}, {
options: group.options.map(function (groupOpt) {
return formGroupSelectOptions.find(function (option) {
return option.id === groupOpt;
});
})
});
});
export var formTieredSelectOptions = [{
id: 1,
groupId: null,
nextGroupId: 10,
label: 'Apple Farm'
}, {
id: 3,
groupId: null,
nextGroupId: 30,
label: 'Sports R Us'
}, {
id: 4,
groupId: null,
nextGroupId: 30,
label: 'Sail It Again Ports'
}, {
id: 5,
groupId: null,
nextGroupId: 30,
label: 'Dublix'
}, {
id: 6,
groupId: null,
nextGroupId: 30,
label: 'The Hardees Boys'
}, {
id: 7,
groupId: null,
nextGroupId: 30,
label: 'Carls Senior'
}, {
id: 8,
groupId: null,
nextGroupId: 30,
label: 'Tar J'
}, {
id: 9,
groupId: null,
nextGroupId: 30,
label: 'Innovation Station'
}, {
id: 10,
groupId: null,
nextGroupId: 30,
label: 'Innovation Nation'
}, {
id: 11,
groupId: null,
nextGroupId: 30,
label: 'Global Studios'
}, {
id: 12,
groupId: null,
nextGroupId: 30,
label: "Ralphie's"
}, {
id: 13,
groupId: null,
nextGroupId: 30,
label: 'Humble State University'
}, {
id: 14,
groupId: null,
nextGroupId: 30,
label: 'Test Driven Devolvement'
}, {
id: 15,
groupId: null,
nextGroupId: 30,
label: 'The Drilling Company'
}, {
id: 16,
groupId: null,
nextGroupId: 30,
label: 'Wrapping text that is very long and will definitely wrap onto two or more lines'
}, {
id: 17,
groupId: 10,
nextGroupId: 100,
label: 'Granny Smith'
}, {
id: 18,
groupId: 10,
nextGroupId: 101,
label: 'Gala'
}, {
id: 21,
groupId: 30,
nextGroupId: 300,
label: 'Project Basketball'
}, {
id: 22,
groupId: 30,
nextGroupId: 301,
label: 'Table Tennis'
}, {
id: 23,
groupId: 30,
label: 'Table Ten'
}, {
id: 24,
groupId: 100,
label: 'Michigan'
}, {
id: 25,
groupId: 101,
label: 'Washington'
}, {
id: 26,
groupId: 200,
label: 'Georgia'
}, {
id: 27,
groupId: 201,
label: 'California'
}, {
id: 28,
groupId: 300,
label: 'Toronto'
}, {
id: 29,
groupId: 301,
nextGroupId: 302,
label: 'Court Complex Uno'
}, {
id: 30,
groupId: 302,
nextGroupId: 303,
label: 'Wrap'
}, {
id: 31,
groupId: 303,
nextGroupId: 304,
label: 'Wrap'
}, {
id: 32,
groupId: 304,
nextGroupId: 305,
label: 'Wrap'
}, {
id: 33,
groupId: 305,
nextGroupId: 306,
label: 'Wrap'
}, {
id: 34,
groupId: 306,
nextGroupId: 307,
label: 'Wrap'
}, {
id: 35,
groupId: 307,
label: 'Wrap'
}];
export var formSelectOptions = [{
id: 1,
label: 'Option Example Uno',
groupAssociation: 1
}, {
id: 2,
label: 'Item Deux 2',
groupAssociation: 2
}, {
id: 3,
label: 'Three Three Three',
groupAssociation: 1
}, {
id: 4,
label: 'Next Item In List Is Design System Design System',
groupAssociation: 2
}, {
id: 5,
label: '5 Entries',
groupAssociation: 2
}, {
id: 6,
label: 'Another Option With A Longer Amount of Important Information To Read',
groupAssociation: 3
}];
export var formSelectGroupOptions = [{
uuid: 1,
displayName: 'Group 1'
}, {
uuid: 2,
displayName: 'Group Having a Longer Group Label, Group Two Is That Group'
}, {
uuid: 3,
displayName: 'Group 3'
}];
export var formPillSelectOptions = [{
id: '1',
label: 'Questionable',
color: 'yellow'
}, {
id: '2',
label: 'False',
color: 'red'
}, {
id: '3',
label: 'The Sky Is Blue',
color: 'blue'
}, {
id: '4',
label: 'Pending Resolution',
color: 'gray'
}, {
id: '5',
label: 'A very long STATUS that has to wrap cause it is so long',
color: 'green'
}];
export var formInitialValues = {
text: 'Hello String',
number: 123456.789,
checkbox: true,
checkboxes: [formSelectOptions[1], formSelectOptions[2]],
currency: 1200300.55,
date: new Date(2020, 9, 31, 14, 30, 42),
// Halloween, a Saturday at 2:30 PM
textarea: 'Hello\nWorld !!\n\n Hello World',
select: formSelectOptions[1],
multiselect: [formSelectOptions[1], formSelectOptions[3], formSelectOptions[0]],
pillselect: formPillSelectOptions[0],
groupselect: [formGroupSelectOptions[0], formGroupSelectOptions[2]],
tieredselect: [{
id: 4,
groupId: null,
nextGroupId: 30,
label: 'Sail It Again Ports'
}, {
id: 22,
groupId: 30,
nextGroupId: 301,
label: 'Table Tennis'
}, {
id: 29,
groupId: 301,
nextGroupId: 302,
label: 'Court Complex Uno'
}],
radiobuttons: formSelectOptions[5],
richtext: '<p><span style="font-size: 18pt; background-color: #00ff00;">Rich Text Is <strong>Bold</strong></span></p> '
};
//# sourceMappingURL=util.js.map