@servicenow/library-enhanced-element/lib/manageable-properties.js

Base element for Now Design System components

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.extendWithManageableProperties = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _scopedActionName = require('./scoped-action-name');

var _scopedActionName2 = _interopRequireDefault(_scopedActionName);

var _reduce = require('lodash/reduce');

var _reduce2 = _interopRequireDefault(_reduce);

var _forEach = require('lodash/forEach');

var _forEach2 = _interopRequireDefault(_forEach);

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _mapValues = require('lodash/mapValues');

var _mapValues2 = _interopRequireDefault(_mapValues);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

var _constantCase = require('./constant-case');

var _constantCase2 = _interopRequireDefault(_constantCase);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const toManagedPropName = propName => 'manage' + propName[0].toUpperCase() + propName.slice(1);

const omitManagedKey = descriptor => (0, _omit2.default)(descriptor, 'manageable');

/* Extracted from https://code.devsnc.com/dev/sn-seismic/blob/5aff3fb9bc51ada3bc487f78a5d3b02c04bf410b/packages/core/src/utils/combinePropertyDefs.js */
const getComponentProperties = config => {
	const { properties = {}, behaviors = [] } = config;

	return (0, _reduce2.default)(behaviors, (acc, behavior) => {
		const properties = (0, _get2.default)(behavior, 'behavior.properties', (0, _get2.default)(behavior, 'properties', {}));

		(0, _forEach2.default)(properties, (value, key) => {
			acc[key] = value;
		});

		return acc;
	}, _extends({}, properties));
};

const extendWithManageableProperties = exports.extendWithManageableProperties = (tagName, baseConfig) => {
	const properties = getComponentProperties(baseConfig);

	const propNamesToManage = Object.keys(properties).reduce((acc, propName) => {
		if (properties[propName].manageable) {
			acc.push(propName);
		}

		return acc;
	}, []);

	if (!propNamesToManage.length) {
		return baseConfig;
	}

	const managedActions = propNamesToManage.reduce((acc, propName) => {
		const actionName = (0, _scopedActionName2.default)(tagName, (0, _constantCase2.default)(propName) + '_SET');
		const managedPropName = toManagedPropName(propName);
		const actionHandler = ({ host, state, action, updateProperties }) => {
			let value = action.payload.value;
			const isPropertySelector = typeof value === 'string' && value[0] === '@' && value.indexOf('/') > 0;

			const isManaged = state.properties[managedPropName];
			// if a component is a descendant of itself, need to make sure that SET
			// actions from the child don't change the property of the parent
			const isActionForCurrentHost = host.nowId === action.meta.id;

			if (isManaged || !isActionForCurrentHost) {
				return;
			}

			/*
    * Here we're escaping the value to prevent selectable properties from
    * intercepting and overriding the original value. Managed properties
    * need to be escaped by the customer.
    *
    * This only happens when the value matches the pattern: '@abc/def'
    */
			if (isPropertySelector) {
				value = `\\${value}`;
			}

			updateProperties({ [propName]: value });
		};
		acc[actionName] = actionHandler;
		return acc;
	}, {});

	const managedProperties = propNamesToManage.reduce((acc, propName) => {
		acc[toManagedPropName(propName)] = {};
		return acc;
	}, {});

	return _extends({}, baseConfig, {
		actionHandlers: _extends({}, managedActions, baseConfig.actionHandlers),
		properties: _extends({}, managedProperties, (0, _mapValues2.default)(baseConfig.properties, omitManagedKey))
	});
};