@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
305 lines (275 loc) • 9.13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.normalizeFieldValue = normalizeFieldValue;
exports.createNewValueFieldObject = createNewValueFieldObject;
exports.generateFieldActions = generateFieldActions;
exports.isEllipsisActive = isEllipsisActive;
exports.findParentByClassName = findParentByClassName;
exports.getValidationColor = getValidationColor;
exports.COLOURS = exports.STATES_CLASSNAMES = exports.OTHERCOMPONENTS_CLASSNAMES = exports.TRUNCATED_CLASSNAMES = exports.MASK_CLASSNAMES = exports.ACTIONS_CLASSNAMES = exports.INPUT_CLASSNAMES = exports.COMPOSITE_CLASSNAMES = exports.EDITABLEFIELD_CLASSNAMES = exports.SIZES = exports.TRUNCATED_COMPONENT_KEY = exports.MASK_COMPONENT_KEY = exports.INPUT_COMPONENT_KEY = exports.ACTIONS_COMPONENT_KEY = exports.COMPOSITE_COMPONENT_KEY = exports.EF_COMPONENT_KEY = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _lodash = _interopRequireDefault(require("lodash.isnil"));
var _lodash2 = _interopRequireDefault(require("lodash.isplainobject"));
var _color = require("../../styles/utilities/color");
var _id = require("../../utilities/id");
var uniqueID = (0, _id.createUniqueIDFactory)('EditableField');
var EF_COMPONENT_KEY = 'EditableField';
exports.EF_COMPONENT_KEY = EF_COMPONENT_KEY;
var COMPOSITE_COMPONENT_KEY = 'EditableFieldComposite';
exports.COMPOSITE_COMPONENT_KEY = COMPOSITE_COMPONENT_KEY;
var ACTIONS_COMPONENT_KEY = 'FieldActions';
exports.ACTIONS_COMPONENT_KEY = ACTIONS_COMPONENT_KEY;
var INPUT_COMPONENT_KEY = 'FieldInput';
exports.INPUT_COMPONENT_KEY = INPUT_COMPONENT_KEY;
var MASK_COMPONENT_KEY = 'FieldMask';
exports.MASK_COMPONENT_KEY = MASK_COMPONENT_KEY;
var TRUNCATED_COMPONENT_KEY = 'Truncated';
exports.TRUNCATED_COMPONENT_KEY = TRUNCATED_COMPONENT_KEY;
function normalizeFieldValue(_ref) {
var value = _ref.value,
name = _ref.name,
defaultOption = _ref.defaultOption,
currentFieldValue = _ref.currentFieldValue;
if (Array.isArray(value)) {
if (value.length === 0) {
return [createNewValueFieldObject('', name, defaultOption)];
}
return value.map(function (val) {
return createNewValueFieldObject(val, name, defaultOption);
});
} else {
var currentId = currentFieldValue && currentFieldValue[0].id;
return [createNewValueFieldObject(value, name, defaultOption, currentId)];
}
}
function createNewValueFieldObject(value, name, defaultOption, currentId) {
// If it's an object already, grab the fields first
if ((0, _lodash2.default)(value)) {
var _fieldObj = (0, _extends2.default)({}, value, {
id: currentId || value.id || name + "_" + uniqueID(),
validated: false
});
if (!(0, _lodash.default)(defaultOption) && !Boolean(value.option)) {
_fieldObj.option = defaultOption;
}
return _fieldObj;
}
var fieldObj = {
value: value,
id: currentId || name + "_" + uniqueID(),
validated: false
};
if (!(0, _lodash.default)(defaultOption)) {
fieldObj.option = defaultOption;
}
return fieldObj;
}
var deleteAction = {
name: 'delete'
};
function generateFieldActions(actions) {
/**
* We need different handling of `null` and `undefined`,
* because by default the "delete" action gets added (so if actions is `undefined`, you get "delete")
* and if you explicitly want to remove this behaviour, you can pass `null`.
*/
if (actions === null) return [];
if (actions === undefined) {
return [deleteAction];
} // User is also able to override the action
var actionsArray = Array.isArray(actions) ? actions : [actions];
var isDeleteActionPresent = actionsArray.find(function (action) {
return action.name === 'delete';
});
return isDeleteActionPresent ? actionsArray : actionsArray.concat(deleteAction);
}
function isEllipsisActive(element) {
if (!element) return false;
return element.offsetWidth < element.scrollWidth;
}
function findParentByClassName(childNode, className) {
if (!childNode) return;
var parent = childNode.parentElement;
while (!(0, _lodash.default)(parent) && !parent.classList.contains(className)) {
parent = parent.parentElement;
}
return parent;
}
var SIZES = {
field: {
height: {
medium: '25px',
large: '28px'
},
lineHeight: {
medium: '25px',
large: '28px'
},
font: {
large: '18px',
medium: '14px'
}
},
fieldLabel: {
font: {
medium: '11px'
}
},
floatingLabel: {
font: {
medium: '12px'
}
},
input: {
height: {
medium: '23px',
large: '28px'
}
},
mask: {
height: {
medium: '23px',
large: '28px'
}
},
compositeMask: {
font: {
large: '20px',
medium: '14px'
},
height: {
medium: '24px',
large: '27px'
},
lineHeight: {
medium: '25px',
large: '28px'
}
},
focusIndicator: {
active: '2px',
inactive: '1px'
}
};
exports.SIZES = SIZES;
var EDITABLEFIELD_CLASSNAMES = {
component: "c-" + EF_COMPONENT_KEY,
optionsWrapper: EF_COMPONENT_KEY + "__optionsWrapper",
addButton: EF_COMPONENT_KEY + "__addButton",
fieldWrapper: EF_COMPONENT_KEY + "__fieldWrapper",
field: EF_COMPONENT_KEY + "__field",
label: EF_COMPONENT_KEY + "__label",
labelText: EF_COMPONENT_KEY + "__labelText"
};
exports.EDITABLEFIELD_CLASSNAMES = EDITABLEFIELD_CLASSNAMES;
var COMPOSITE_CLASSNAMES = {
component: "c-" + COMPOSITE_COMPONENT_KEY,
mask: 'ComposedMask',
maskItem: 'ComposedMask__item'
};
exports.COMPOSITE_CLASSNAMES = COMPOSITE_CLASSNAMES;
var INPUT_CLASSNAMES = {
component: "c-" + INPUT_COMPONENT_KEY,
content: INPUT_COMPONENT_KEY + "__content",
inputWrapper: INPUT_COMPONENT_KEY + "__inputWrapper",
input: INPUT_COMPONENT_KEY + "__input",
optionsWrapper: INPUT_COMPONENT_KEY + "__optionsWrapper",
dropdown: INPUT_COMPONENT_KEY + "__dropdown",
optionsTrigger: INPUT_COMPONENT_KEY + "__optionsTrigger",
optionsDropdown: INPUT_COMPONENT_KEY + "__optionsDropdown",
selectedOption: INPUT_COMPONENT_KEY + "__selectedOption",
focusIndicator: INPUT_COMPONENT_KEY + "__focusIndicator",
validation: INPUT_COMPONENT_KEY + "__validation"
};
exports.INPUT_CLASSNAMES = INPUT_CLASSNAMES;
var ACTIONS_CLASSNAMES = {
actions: ACTIONS_COMPONENT_KEY,
fieldButton: ACTIONS_COMPONENT_KEY + "_button"
};
exports.ACTIONS_CLASSNAMES = ACTIONS_CLASSNAMES;
var MASK_CLASSNAMES = {
component: "" + MASK_COMPONENT_KEY,
option: MASK_COMPONENT_KEY + "__option",
value: MASK_COMPONENT_KEY + "__value"
};
exports.MASK_CLASSNAMES = MASK_CLASSNAMES;
var TRUNCATED_CLASSNAMES = {
component: TRUNCATED_COMPONENT_KEY,
withSplitter: 'withSplitter',
firstChunk: TRUNCATED_COMPONENT_KEY + "__firstChunk",
secondChunk: TRUNCATED_COMPONENT_KEY + "__secondChunk"
};
exports.TRUNCATED_CLASSNAMES = TRUNCATED_CLASSNAMES;
var OTHERCOMPONENTS_CLASSNAMES = {
dropdownItem: 'c-DropdownItem',
truncate: 'c-Truncate',
truncateContent: 'c-Truncate__content',
dropdownTrigger: 'c-DropdownTrigger',
icon: 'c-Icon'
};
exports.OTHERCOMPONENTS_CLASSNAMES = OTHERCOMPONENTS_CLASSNAMES;
var STATES_CLASSNAMES = {
hasOptions: 'has-options',
hasActiveFields: 'has-activeFields',
fieldDisabled: 'field-disabled',
isActive: 'is-active',
isDisabled: 'is-disabled',
isEmphasized: 'is-emphasized',
isEmpty: 'is-empty',
isHidden: 'is-hidden',
isInline: 'is-inline',
isLarge: 'is-large',
isPlaceholder: 'is-placeholder',
isTemporaryValue: 'is-temporary-value',
error: 'is-error',
warning: 'is-warning',
withPlaceholder: 'with-placeholder',
withValidation: 'with-validation',
withFloatingLabels: 'with-floatingLabels'
};
exports.STATES_CLASSNAMES = STATES_CLASSNAMES;
var COLOURS = {
mask: {
border: (0, _color.getColor)('charcoal.200'),
disabled: (0, _color.getColor)('charcoal.300'),
focused: 'rgba(197, 208, 217, 0.5)',
regular: (0, _color.getColor)('charcoal.800'),
placeholder: {
regular: (0, _color.getColor)('charcoal.300'),
disabled: (0, _color.getColor)('charcoal.200'),
border: {
regular: (0, _color.getColor)('grey.800'),
hover: (0, _color.getColor)('blue.500')
}
}
},
input: {
regular: (0, _color.getColor)('charcoal.800'),
placeholder: (0, _color.getColor)('grey.800')
},
floatingLabel: (0, _color.getColor)('grey.800'),
focusIndicator: {
active: (0, _color.getColor)('blue.500'),
inactive: '#c6d0d8'
},
invisible: 'transparent',
button: {
regular: 'slategray',
hover: '#3c5263',
delete: (0, _color.getColor)('red.500')
},
states: {
default: (0, _color.getColor)('blue.500'),
error: (0, _color.getColor)('red.500'),
warning: (0, _color.getColor)('yellow.500')
}
};
exports.COLOURS = COLOURS;
function getValidationColor(validationInfo) {
var color = COLOURS.states[validationInfo && validationInfo.type || 'default'];
if (validationInfo && validationInfo.color) {
color = validationInfo.color;
}
return color;
}