@thejones/react-common-components
Version:
React component - semantic ui
200 lines (154 loc) • 7.99 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createShorthand = createShorthand;
exports.createShorthandFactory = createShorthandFactory;
exports.createHTMLParagraph = exports.createHTMLLabel = exports.createHTMLInput = exports.createHTMLImage = exports.createHTMLIframe = exports.createHTMLDivision = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
var _isString2 = _interopRequireDefault(require("lodash/isString"));
var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
// ============================================================
// Factories
// ============================================================
/**
* A more robust React.createElement. It can create elements from primitive values.
*
* @param {function|string} Component A ReactClass or string
* @param {function} mapValueToProps A function that maps a primitive value to the Component props
* @param {string|object|function} val The value to create a ReactElement from
* @param {Object} [options={}]
* @param {object} [options.defaultProps={}] Default props object
* @param {object|function} [options.overrideProps={}] Override props object or function (called with regular props)
* @param {boolean} [options.autoGenerateKey=true] Whether or not automatic key generation is allowed
* @returns {object|null}
*/
function createShorthand(Component, mapValueToProps, val) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (typeof Component !== 'function' && typeof Component !== 'string') {
throw new Error('createShorthand() Component must be a string or function.');
} // short circuit noop values
if ((0, _isNil2.default)(val) || (0, _isBoolean2.default)(val)) return null;
var valIsString = (0, _isString2.default)(val);
var valIsNumber = (0, _isNumber2.default)(val);
var valIsFunction = (0, _isFunction2.default)(val);
var valIsReactElement = (0, _react.isValidElement)(val);
var valIsPropsObject = (0, _isPlainObject2.default)(val);
var valIsPrimitiveValue = valIsString || valIsNumber || (0, _isArray2.default)(val); // unhandled type return null
/* eslint-disable no-console */
if (!valIsFunction && !valIsReactElement && !valIsPropsObject && !valIsPrimitiveValue) {
if (process.env.NODE_ENV !== 'production') {
console.error(['Shorthand value must be a string|number|array|object|ReactElement|function.', ' Use null|undefined|boolean for none', " Received ".concat((0, _typeof2.default)(val), ".")].join(''));
}
return null;
}
/* eslint-enable no-console */
// ----------------------------------------
// Build up props
// ----------------------------------------
var _options$defaultProps = options.defaultProps,
defaultProps = _options$defaultProps === void 0 ? {} : _options$defaultProps; // User's props
var usersProps = valIsReactElement && val.props || valIsPropsObject && val || valIsPrimitiveValue && mapValueToProps(val); // Override props
var _options$overrideProp = options.overrideProps,
overrideProps = _options$overrideProp === void 0 ? {} : _options$overrideProp;
overrideProps = (0, _isFunction2.default)(overrideProps) ? overrideProps((0, _objectSpread2.default)({}, defaultProps, usersProps)) : overrideProps; // Merge props
/* eslint-disable react/prop-types */
var props = (0, _objectSpread2.default)({}, defaultProps, usersProps, overrideProps); // Merge className
if (defaultProps.className || overrideProps.className || usersProps.className) {
var mergedClassesNames = (0, _classnames.default)(defaultProps.className, overrideProps.className, usersProps.className);
props.className = (0, _uniq2.default)(mergedClassesNames.split(' ')).join(' ');
} // Merge style
if (defaultProps.style || overrideProps.style || usersProps.style) {
props.style = (0, _objectSpread2.default)({}, defaultProps.style, usersProps.style, overrideProps.style);
} // ----------------------------------------
// Get key
// ----------------------------------------
// Use key, childKey, or generate key
if ((0, _isNil2.default)(props.key)) {
var childKey = props.childKey;
var _options$autoGenerate = options.autoGenerateKey,
autoGenerateKey = _options$autoGenerate === void 0 ? true : _options$autoGenerate;
if (!(0, _isNil2.default)(childKey)) {
// apply and consume the childKey
props.key = typeof childKey === 'function' ? childKey(props) : childKey;
delete props.childKey;
} else if (autoGenerateKey && (valIsString || valIsNumber)) {
// use string/number shorthand values as the key
props.key = val;
}
} // ----------------------------------------
// Create Element
// ----------------------------------------
// Clone ReactElements
if (valIsReactElement) return (0, _react.cloneElement)(val, props); // Create ReactElements from built up props
if (valIsPrimitiveValue || valIsPropsObject) return _react.default.createElement(Component, props); // Call functions with args similar to createElement()
if (valIsFunction) return val(Component, props, props.children);
/* eslint-enable react/prop-types */
} // ============================================================
// Factory Creators
// ============================================================
/**
* Creates a `createShorthand` function that is waiting for a value and options.
*
* @param {function|string} Component A ReactClass or string
* @param {function} mapValueToProps A function that maps a primitive value to the Component props
* @returns {function} A shorthand factory function waiting for `val` and `defaultProps`.
*/
createShorthand.handledProps = [];
function createShorthandFactory(Component, mapValueToProps) {
if (typeof Component !== 'function' && typeof Component !== 'string') {
throw new Error('createShorthandFactory() Component must be a string or function.');
}
return function (val, options) {
return createShorthand(Component, mapValueToProps, val, options);
};
} // ============================================================
// HTML Factories
// ============================================================
var createHTMLDivision = createShorthandFactory('div', function (val) {
return {
children: val
};
});
exports.createHTMLDivision = createHTMLDivision;
var createHTMLIframe = createShorthandFactory('iframe', function (src) {
return {
src: src
};
});
exports.createHTMLIframe = createHTMLIframe;
var createHTMLImage = createShorthandFactory('img', function (val) {
return {
src: val
};
});
exports.createHTMLImage = createHTMLImage;
var createHTMLInput = createShorthandFactory('input', function (val) {
return {
type: val
};
});
exports.createHTMLInput = createHTMLInput;
var createHTMLLabel = createShorthandFactory('label', function (val) {
return {
children: val
};
});
exports.createHTMLLabel = createHTMLLabel;
var createHTMLParagraph = createShorthandFactory('p', function (val) {
return {
children: val
};
});
exports.createHTMLParagraph = createHTMLParagraph;