jm2242

Keybase proof

I hereby claim:

• I am jm2242 on github.
• I am jmares (https://keybase.io/jmares) on keybase.
• I have a public key ASBiCanwF9ll52krTUdbO2tnUIbgpF4SrJTBUoy72c-pQgo

To claim this, I am signing this object:

jm2242

render() {
...
<div className=”column-icons” style={headerCellStyles.columnIcons}>
  { canHideColumns && renderHideColumnsTrigger() }
      { canSort && renderSortingIndicator() }
      { canSearch && renderSearchTrigger() }
      { canRemoveColumns && <RemoveColumnButton /> }
      { canAddColumns && <AddColumnButton }
...

jm2242

/**
* Encode an object of styles for the browser to understand
* @param {Object} styles - styles to decode
* @returns {Object} - Something
*/
export const encodeStyles = styles => {
    const encodedStyles = {}
    Object.entries(styles).forEach(
        ([key, value]) => {
            // add the pixels back in if the value is a number

jm2242

// — — — — — BEGIN handle styles — — — — — — — //
 // count the number of buttons we want to show
 const numberOfButtons = [canAddColumns, canHideColumns, canRemoveColumns, canSearch, canSort].reduce(
 (acc, showButton) => showButton ? acc+1 : acc,
 0
 )
const totalColumnIconsWidth = numberOfButtons * (sheetsVariables.columnIconsSize + sheetsVariables.columnIconsMargin)
// styles object
 const headerCellStyles = {
 columnIcons: encodeStyles({

jm2242

/**
* Decode a JSON object of style key/value pairs
* Currently only cleans out the 'px' from values
* and ignores styles with spaces to allow for fonts
* @param {Object} styles - styles to decode
* @returns {Object} - decoded key/value pairs
*/
export const decodeStyles = styles => {
    const decodedStyles = {}
    Object.entries(styles).forEach(

jm2242

{
 "columnIconsSize": "26px",
 "columnIconsMargin": "6px",
 "columnNameFont": "normal normal 300 16px Helvetica"
}

jm2242

render() { // render method of component
// ...
<div className={`column-icons-${numberOfButtons}`}
    { canHideColumns && renderHideColumnsTrigger() }
    { canSort && renderSortingIndicator() }
    { canSearch && renderSearchTrigger() }
    { canRemoveColumns && <RemoveColumnButton /> }
    { canAddColumns && <AddColumnButton }
</div>
// ...

jm2242

//(contents of the React component, simplified)
render() { // render method of component
// ...
// count the number of truthy booleans
const numberOfButtons = [canAddColumns, canHideColumns, canRemoveColumns, canSearch, canSort].reduce(
        (acc, showButton) => showButton ? acc+1 : acc,
        0
    )
<div className={
    classNames(

jm2242

render() {
// ...
    <div
        className={
            classNames(
                "column-name-text",
                { "column-name-pointer": canRenameColumns }
            )
        }
        style={{ maxWidth: `${maxWidth}px` }}

jm2242

// (contents of stylus)
ColumnIconsMargin = 6
ColumnIconsSize = 26
TotalColumnIconsWidth = 5 * (ColumnIconsSize + ColumnIconsMargin)
.column-icons
    // ...
    width TotalColumnIconsWidth
    // ...