[elm-discuss] Basic behavioral composition

[suttlecommakevin]

Apologies if this has been posted elsewhere, but I keep coming back to it. 

Let's get basic. Like *super *basic.

I get a spec from a designer for a button with 3 types of children. 

   1. A button with a label only
   2. A button with an icon only
   3. A button with an icon *and* a label


In a object-oriented programming environment, you could make a ButtonBase 
class and extend it. 
In React's bizarro world, they try to promote this Higher-order Components 
technique, which is really just a function factory.
In Flow, you can at least start making types, and then, share and intersect 
<https://flowtype.org/docs/functions.html#overloading> them. 


*ButtonProps.js*

// @flow
/* eslint-disable import/prefer-default-export */

export type ButtonProps = {
  type?: 'button' | 'reset' | 'submit',
  design: 'primary' | 'secondary',
  className?: string,
  children?: Array<HTMLElement>,
  onClick?: () => void,
  onFocus?: () => void,
  onmouseover?: () => void,
  onmouseout?: () => void,
}


*Button.jsx*

// @flow

import React from 'react';
import type { ButtonProps } from './ButtonProps';
import './Button.css';

/* eslint-disable flowtype/space-after-type-colon */
const Button = ({
  design = 'primary',
  className = 'btn',
  type = 'button',
  children } :ButtonProps) =>

  <button className={[`${design} ${className}`]} type={type}>
    {children}
  </button>;

export default Button;


*Icon.jsx*

// @flow

import React from 'react';
import Button from './Button.jsx';
import type { ButtonProps } from './ButtonProps';
import Icon from '../Icons/Icon.jsx';
import type { IconProps } from '../Icons/IconProps';

type IconButtonProps = ButtonProps & IconProps;

const IconButton = (props: IconButtonProps) =>
  <Button
    design={props.design}
    onClick={props.onClick}
    className={`iconBtn ${props.className}`}
  >
    <Icon glyph={props.glyph} />
  </Button>;

export default IconButton;


Notice this line: type IconButtonProps = ButtonProps & IconProps; which is 
just a fancy Object.assign() really. 
It's easy to read, easy to understand, but many would claim it doesn't 
follow "best practices".


My question is, how would Elm/FP handle this? 



Thanks, folks. 

-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.