lukaszhanusik

Group array of JavaScript objects by keys

This fork of JamieMason's implementation changes the key parameter to be an array of keys instead of just a single key. This makes it possible to group by multiple properties instead of just one.

Implementation

const groupBy = keys => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = keys.map(key => obj[key]).join('-');

lukaszhanusik

repro-recalc

Minimal repro for the Chrome style recalc issue.

lukaszhanusik

Component.cmp

<aura:attribute name="width" type="Integer" default="50" />
<aura:html tag="style">
    :host {
        --width: {!v.width}%;
    }
</aura:html>

lukaszhanusik

({ /*
    JWaggoner:
    This was merely to understand the idea of adding a background utility. 
    I may keep using this to try and probe how to reach different objects or figure out how to do things.
    */


    onTabCreated: function (component) {
        var workspaceAPI = component.find("workspace");
        workspaceAPI.getAllTabInfo().then(function (tabInfo) {

lukaszhanusik

Base Helptext

<div class="slds-form-element__icon">
    <button class="slds-button slds-button_icon">
        <lightning-icon size="xx-small" icon-name="utility:info" alternative-text="Tooltip" 
            data-popover-id="tooltipSc1" onmouseover={handleOpenPopover}>
        </lightning-icon>
    </button>
 

lukaszhanusik

Popover Component

Configuration

The list of SLDS components exceeds the LWC component library by a long distance. There are many awesome component blueprints defined in SLDS which are not available in LWC library. This comes in as a challenge during implementation. SLDS only provides the plain HTML without working implementation whereas LWC components are fully functional and can be used readily.

One such component in SLDS is Popover. This does not have a corresponding component in LWC library. As an attempt to create a working SLDS Popover, I have created this utility. The Popover would comprise of three sections i.e. header, body and footer. The component is built on LWC .

To keep the configuration about the component, it takes following parameters:

lukaszhanusik

‎‎​

lukaszhanusik

Snippets on Popover

lukaszhanusik

LWC DOM Manual

Render HTML markup dynamically

Html Template

<!-- LWC:DOM MANUAL -->
<div lwc:dom="manual" class="slds-var-p-around_x-small slds-scrollable_y templatePreviewMarkup">
 

lukaszhanusik

handleCreateModal: function (component, event, helper) {
	let modalHeader;
	let modalBody;
	let modalFooter;
	$A.createComponents([
		["c:UWB_modalHeader", { 'label': 'Approve' }],
		["c:UWB_utilityModal", { 'modalName': 'approve', 'approvalId': data.proccessInstanceToPiwi[data.approvalHistory[0].ProcessInstanceId], 'relatedObject': recordData }],
		["c:UWB_modalFooter", { 'cancelLabel': 'Cancel', 'submitLabel': 'Approve' }]
	],
		function (components, status) {