@appbuckets/react-ui-core
Version:
Core utilities built for AppBuckets React UI Framework
224 lines (216 loc) • 6.64 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var kindOf = require('kind-of');
function _interopDefaultLegacy(e) {
return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(
n,
k,
d.get
? d
: {
enumerable: true,
get: function () {
return e[k];
},
}
);
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);
var kindOf__default = /*#__PURE__*/ _interopDefaultLegacy(kindOf);
/* --------
* Main Create Shorthand Function
* -------- */
/**
* A more robust React.createElement.
* It can create elements from primitive values.
*
* @param Component Component to Create
* @param mapValueToProps Function to transform props
* @param getKey Function to get key from props
* @param value Value to use
* @param options Options to Apply
*/
function createShorthand(Component, mapValueToProps, getKey, value, options) {
/** If no value, return an empty component */
if (value == null || typeof value === 'boolean') {
return null;
}
// Check value type
var valueIsString = kindOf__default['default'](value) === 'string';
var valueIsNumber = kindOf__default['default'](value) === 'number';
var valueIsReactElement = React__namespace.isValidElement(value);
var valueIsPropsObject = kindOf__default['default'](value) === 'object';
var valueIsPrimitiveValue =
valueIsString ||
valueIsNumber ||
kindOf__default['default'](value) === 'array';
// Check value validity
if (!valueIsReactElement && !valueIsPrimitiveValue && !valueIsPropsObject) {
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error(
[
'Shorthand value must be a string|number|array|object|ReactElement|function.',
'Use null|undefined|boolean for none.',
'Received '.concat(kindOf__default['default'](value)),
].join(' ')
);
}
return null;
}
/** Build Props */
var defaultProps = options.defaultProps;
// Get user props
var userProps =
(valueIsReactElement && value.props) ||
(valueIsPropsObject && value) ||
(valueIsPrimitiveValue && mapValueToProps(value)) ||
{};
// Override Props
var overrideProps = options.overrideProps;
if (typeof overrideProps === 'function') {
overrideProps = overrideProps(
tslib.__assign(tslib.__assign({}, defaultProps), userProps)
);
}
// Merge Props together
var props = tslib.__assign(
tslib.__assign(tslib.__assign({}, defaultProps), userProps),
overrideProps
);
// Merge className
if (
(defaultProps === null || defaultProps === void 0
? void 0
: defaultProps.className) ||
(overrideProps === null || overrideProps === void 0
? void 0
: overrideProps.className) ||
userProps.className
) {
var mergedClassNames = clsx__default['default'](
defaultProps === null || defaultProps === void 0
? void 0
: defaultProps.className,
userProps.className,
overrideProps === null || overrideProps === void 0
? void 0
: overrideProps.className
);
props.className = Array.from(
new Set(mergedClassNames.split(' ')).values()
).join(' ');
}
// Merge Style
if (
(defaultProps === null || defaultProps === void 0
? void 0
: defaultProps.style) ||
(overrideProps === null || overrideProps === void 0
? void 0
: overrideProps.style) ||
userProps.style
) {
props.style = tslib.__assign(
tslib.__assign(
tslib.__assign(
{},
defaultProps === null || defaultProps === void 0
? void 0
: defaultProps.style
),
userProps.style
),
overrideProps === null || overrideProps === void 0
? void 0
: overrideProps.style
);
}
// Create the Key
if (props.key == null) {
var autoGenerateKey = options.autoGenerateKey,
childKey = options.childKey;
if (typeof getKey === 'function') {
props.key = getKey(props);
} else if (childKey != null) {
// Apply and Consume the Child Key props
props.key = typeof childKey === 'function' ? childKey(props) : childKey;
} else if (autoGenerateKey && (valueIsString || valueIsNumber)) {
props.key = value;
}
}
// Create the element
if (valueIsReactElement) {
return React__namespace.cloneElement(value, props);
}
// Render as Component
if (valueIsPrimitiveValue || valueIsPropsObject) {
return React__namespace.createElement(Component, tslib.__assign({}, props));
}
// Render as Function
if (typeof value === 'function') {
return value(Component, props, props.children);
}
// Fallback to null
return null;
}
/* --------
* Create a function to create shorthand factory
* -------- */
/**
* Get a callback function to be used to easily generate
* a new component based on shorthand value
*
* @param Component The Component to Generate
* @param mapValueToProps The function to map value to props
* @param getKey A function that will be used to get key
*/
function createShorthandFactory(Component, mapValueToProps, getKey) {
return function createFactoryElement(value, options) {
return createShorthand(Component, mapValueToProps, getKey, value, options);
};
}
var createHTMLLabel = createShorthandFactory('label', function (val) {
return {
children: val,
};
});
var createHTMLImage = createShorthandFactory('img', function (val) {
return {
src: val,
};
});
var createHTMLInput = createShorthandFactory('input', function (val) {
return {
type: val,
};
});
var createHTMLParagraph = createShorthandFactory('p', function (val) {
return {
children: val,
};
});
exports.createHTMLImage = createHTMLImage;
exports.createHTMLInput = createHTMLInput;
exports.createHTMLLabel = createHTMLLabel;
exports.createHTMLParagraph = createHTMLParagraph;
exports.createShorthand = createShorthand;
exports.createShorthandFactory = createShorthandFactory;