antonjb

Drop in replace functions for setTimeout() & setInterval() that 
make use of requestAnimationFrame() for performance where available
http://www.joelambert.co.uk

Copyright 2011, Joe Lambert.
Free to use under the MIT license.
http://www.opensource.org/licenses/mit-license.php

antonjb

/*
 * Layers to SVG - layers_export.jsx
 * @version 0.1
 * Improved PageItem selection, which fixed centering
 *
 * @author Anton Ball
 * Exports all layers to SVG Files
 * I didn't want every layer in the SVG file so it first creates a new document
 * and one by one copies each layer to that new document while exporting it out
 * as an SVG.

antonjb

.property-order {
   position: relative;
   top: 10px;
   display: flex;
   flex-wrap: wrap;
   flex-grow: 1;
   align-items: stretch;
   width: 100%;
   height: 60vh;
   background-color: orange;

antonjb

.alphabetical {
   align-items: stretch;
   background-color: orange;
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;
   font-size: 0.875rem;
   height: 60vh;
   overflow-wrap: break-word;
   padding: 1rem;

antonjb

.alphabetical-border {
    border-left: 1px solid orange;
    border-right: 1px solid orange;
    border-top: 1px solid orange;
}

antonjb

export const SiteHeader = createRegisterableComponent(
  "site-header",
  (props: { title: string }, services) => (
    <header>
      <h1>{props.title}</h1>
    </header>
  )
);

antonjb

import {
  getRegistrationCreators,
  LayoutRegistration
} from "json-react-layouts";

const {
  createRegisterableComponent,
  createRegisterableComposition
} = getRegistrationCreators<LayoutServices>();

antonjb

const Layout = new LayoutRegistration<LayoutServices>()
  .registerComponents(registrar =>
    registrar
      .registerComponent(SiteHeader)
      .registerComponent(ContentBox)
  )
  .registerCompositions(registrar =>
    registrar
      .registerComposition(SiteComposition)
      .registerComposition(SplitComposition)

antonjb

export const SiteComposition = createRegisterableComposition<
  "header" | "content"
>()("site-composition", contentAreas => (
  <div>
    <header>{contentAreas.header}</header>
    <main>{contentAreas.content}</main>
  </div>
));

antonjb

const definition = Layout.composition({
  type: "site-composition",
  props: {},
  contentAreas: {
    header: [
      {
        type: "site-header",
        props: {
          title: "Main title"
        }