RubyGems - playbook_ui - Versions diffs - 11.16.0.pre.alpha.paginationrails1 → 11.16.0.pre.alpha.reactupgrade1 - Mend

playbook_ui 11.16.0.pre.alpha.paginationrails1 → 11.16.0.pre.alpha.reactupgrade1

Files changed (47) hide show

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED Viewed

@@ -71,26 +71,26 @@ const GaugeComplex = (props) => (
               orientation="column"
               wrap
           >
-              <Body
-                  color="light"
-                  text="% Abandoned"
-               />
+            <Body
+                color="light"
+                text="% Abandoned"
+            />
             <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              >
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
-                    height="150"
+                    height="100%"
                     id="gauge-complex"
                     suffix="%"
                     {...props}
                 />
-               </FlexItem>
-            </Flex>
+              </FlexItem>
+            </Flex>
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_gauge/gauge.html.erb CHANGED Viewed

@@ -1,2 +1,12 @@
-<%= react_component('Gauge', object.chart_options) %>
+<%= content_tag(:div, "",
+    id: object.id,
+    data: object.data,
+    class: object.classname) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    window.addEventListener('DOMContentLoaded', function() {
+      new pbChart('.selector', <%= object.chart_options %>)
+    })
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_gauge/gauge.rb CHANGED Viewed

@@ -22,10 +22,15 @@ module Playbook
       prop :max, type: Playbook::Props::Numeric, default: 100
       prop :colors, type: Playbook::Props::Array, default: []
+      def chart_data_formatted
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
+      end
       def chart_options
         {
           id: id,
-          chartData: chart_data,
+          chartData: chart_data_formatted,
           circumference: full_circle ? [0, 360] : [-100, 100],
           dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
@@ -38,9 +43,9 @@ module Playbook
           showLabels: show_labels,
           style: style,
           tooltipHtml: tooltip_html,
-          type: style,
+          type: "gauge",
           colors: colors,
-        }
+        }.to_json.html_safe
       end
       def classname

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx ADDED Viewed

@@ -0,0 +1,113 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+type LineGraphProps = {
+  align?: "left" | "right" | "center",
+  axisTitle?: string,
+  dark?: Boolean,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
+  chartData: array<{
+      name: string,
+      data: array<number>,
+  }>,
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: array,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  }
+export default class LineGraph extends React.Component<LineGraphProps> {
+  static defaultProps = {
+    align: "center",
+    className: 'pb_bar_graph',
+    dark: false,
+    gradient: false,
+    type: 'line',
+    legend: false,
+    toggleLegendClick: true,
+    layout: "horizontal",
+    verticalAlign: "bottom",
+    x: 0,
+    y: 0,
+  }
+  componentDidMount() {
+    const {
+      align,
+      axisTitle,
+      dark,
+      xAxisCategories,
+      yAxisMin,
+      yAxisMax,
+      className,
+      chartData,
+      id,
+      pointStart,
+      subTitle,
+      title,
+      type,
+      legend,
+      toggleLegendClick,
+      height,
+      colors = [],
+      layout,
+      verticalAlign,
+      x,
+      y,
+    } = this.props
+    new pbChart(`.${className}`, {
+      align,
+      axisTitle: axisTitle,
+      chartData: chartData,
+      colors: colors,
+      dark,
+      id: id,
+      pointStart: pointStart,
+      subtitle: subTitle,
+      type,
+      title: title,
+      xAxisCategories: xAxisCategories,
+      yAxisMin: yAxisMin,
+      yAxisMax: yAxisMax,
+      legend: legend,
+      toggleLegendClick: toggleLegendClick,
+      height: height,
+      layout,
+      verticalAlign,
+      x,
+      y,
+    })
+  }
+  props: LineGraphProps
+  render() {
+    const { className, id } = this.props
+    return (
+      <div
+          className={classnames(globalProps(this.props), className)}
+          id={id}
+      />
+    )
+  }
+}

data/app/pb_kits/playbook/pb_popover/_popover.jsx CHANGED Viewed

@@ -1,19 +1,25 @@
+/* eslint-disable react/no-multi-comp */
 // @flow
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React, {useEffect} from "react";
+import ReactDOM from "react-dom";
 import {
   Popper,
   Manager as PopperManager,
   PopperProps,
   Reference as PopperReference,
-} from 'react-popper'
+} from "react-popper";
-import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  noop,
+} from "../utilities/props";
-import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import classnames from "classnames";
+import { globalProps } from "../utilities/globalProps";
 type PbPopoverProps = {
   aria?: object,
@@ -25,7 +31,7 @@ type PbPopoverProps = {
   reference: PopperReference,
   show?: boolean,
   shouldClosePopover?: () => boolean,
-} & PopperProps
+} & PopperProps;
 // Prop enabled default modifiers here
 // https://popper.js.org/docs/v2/modifiers
@@ -34,17 +40,17 @@ const POPOVER_MODIFIERS = {
   offset: {
     //https://popper.js.org/docs/v2/modifiers/offset/
     enabled: true,
-    name: 'offset',
+    name: "offset",
     options: {
       offset: [0, 20],
     },
-    phase: 'main',
+    phase: "main",
   },
-}
+};
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
-}
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
+};
 const Popover = (props: PbPopoverProps) => {
   const {
@@ -62,11 +68,14 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
-  } = props
-  const popoverSpacing = globalProps(props).includes('dark') || !globalProps(props) ? 'p_sm' : globalProps(props)
-  const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
-  const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
+  } = props;
+  const popoverSpacing =
+    globalProps(props).includes("dark") || !globalProps(props)
+      ? "p_sm"
+      : globalProps(props);
+  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
     return Object.assign(
       {},
@@ -74,15 +83,15 @@ const Popover = (props: PbPopoverProps) => {
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
       minWidth ? { minWidth: minWidth } : {}
-    )
-  }
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+    );
+  };
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
   const classes = classnames(
-    buildCss('pb_popover_kit'),
+    buildCss("pb_popover_kit"),
     globalProps(props),
     className
-  )
+  );
   return (
     <Popper
@@ -99,20 +108,14 @@ const Popover = (props: PbPopoverProps) => {
               data-placement={placement}
               id={id}
               ref={ref}
-              style={Object.assign(
-                {},
-                style,
-                zIndexStyle
-              )}
+              style={Object.assign({}, style, zIndexStyle)}
           >
             <div
-                className={classnames(
-                `${buildCss('pb_popover_tooltip')} show`
-              )}
+                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
               <div
                   className={classnames(
-                  'pb_popover_body',
+                  "pb_popover_body",
                   popoverSpacing,
                   overflowHandling
                 )}
@@ -122,25 +125,33 @@ const Popover = (props: PbPopoverProps) => {
               </div>
             </div>
           </div>
-        )
+        );
       }}
     </Popper>
-  )
-}
-export default class PbReactPopover extends React.Component<PbPopoverProps> {
-  static defaultProps = {
-    modifiers: [],
-    offset: false,
-    placement: 'left',
-    portal: 'body',
-    show: false,
-    shouldClosePopover: noop,
-    usePortal: true,
-  }
-  componentDidMount() {
-    const { closeOnClick, shouldClosePopover } = this.props
+  );
+};
+const PbReactPopover = (props: PbPopoverProps) => {
+  const {
+    className,
+    children,
+    modifiers = [],
+    offset = false,
+    placement = "left",
+    portal = "body",
+    reference,
+    referenceElement,
+    show = false,
+    usePortal = true,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  } = props;
+  useEffect(() => {
+    const { closeOnClick, shouldClosePopover = noop } = props
     if (!closeOnClick) return
@@ -151,87 +162,66 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
         target.closest('.pb_popover_reference_wrapper') !== null
       switch (closeOnClick) {
-      case 'outside':
-        if (!targetIsPopover || targetIsReference) {
-          shouldClosePopover(true)
-        }
-        break
-      case 'inside':
-        if (targetIsPopover || targetIsReference) {
+        case 'outside':
+          if (!targetIsPopover || targetIsReference) {
+            shouldClosePopover(true)
+          }
+          break
+        case 'inside':
+          if (targetIsPopover || targetIsReference) {
+            shouldClosePopover(true)
+          }
+          break
+        case 'any':
           shouldClosePopover(true)
-        }
-        break
-      case 'any':
-        shouldClosePopover(true)
-        break
+          break
       }
-    })
-  }
-  props: PbPopoverProps
-  render() {
-    const {
-      className,
-      children,
-      modifiers,
-      offset,
-      placement,
-      portal,
-      reference,
-      referenceElement,
-      show,
-      usePortal,
-      zIndex,
-      maxHeight,
-      maxWidth,
-      minHeight,
-      minWidth,
-    } = this.props
-    const popoverComponent = (
-      <Popover
-          {...this.props}
-          className={className}
-          maxHeight={maxHeight}
-          maxWidth={maxWidth}
-          minHeight={minHeight}
-          minWidth={minWidth}
-          modifiers={modifiers}
-          offset={offset}
-          placement={placement}
-          referenceElement={referenceElement}
-          zIndex={zIndex}
-      >
-        {children}
-      </Popover>
-    )
-    return (
-      <PopperManager>
-        <If condition={reference && !referenceElement}>
-          <PopperReference>
-            {({ ref }) => (
-              <span
-                  className="pb_popover_reference_wrapper"
-                  ref={ref}
-              >
-                <reference.type {...reference.props} />
-              </span>
-            )}
-          </PopperReference>
-        </If>
-        <If condition={show}>
-          <If condition={usePortal}>
-            {ReactDOM.createPortal(
-              popoverComponent,
-              document.querySelector(portal)
-            )}
-            <Else />
-            {popoverComponent}
-          </If>
+    }, { capture: true })
+  }, [])
+  const popoverComponent = (
+    <Popover
+        className={className}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        minWidth={minWidth}
+        modifiers={modifiers}
+        offset={offset}
+        placement={placement}
+        referenceElement={referenceElement}
+        zIndex={zIndex}
+        {...props}
+    >
+      {children}
+    </Popover>
+  );
+  return (
+    <PopperManager>
+      <If condition={reference && !referenceElement}>
+        <PopperReference>
+          {({ ref }) => (
+            <span className="pb_popover_reference_wrapper"
+                ref={ref}
+            >
+              <reference.type {...reference.props} />
+            </span>
+          )}
+        </PopperReference>
+      </If>
+      <If condition={show}>
+        <If condition={usePortal}>
+          {ReactDOM.createPortal(
+            popoverComponent,
+            document.querySelector(portal)
+          )}
+          <Else />
+          {popoverComponent}
         </If>
-      </PopperManager>
-    )
-  }
-}
+      </If>
+    </PopperManager>
+  );
+};
+export default PbReactPopover;

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx CHANGED Viewed

@@ -31,7 +31,7 @@ const PopoverClose = (props) => {
   }
   const handleAnyTogglePopover = () => {
-    setAnyShowPopover(!showOutsidePopover)
+    setAnyShowPopover(!showAnyPopover)
   }
   const insidePopoverTrigger = (

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx ADDED Viewed

@@ -0,0 +1,79 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+type TreemapChartProps = {
+  chartData: array<{
+    name: string,
+    parent?: string | number,
+    value: number,
+    color?: string,
+    id?: string | number,
+  }>,
+  className?: string,
+  colors: array,
+  dark?: boolean,
+  drillable: boolean,
+  grouped: boolean,
+  height?: string,
+  id: number,
+  title: string,
+  tooltipHtml: string,
+  type?: string,
+}
+export default class TreemapChart extends React.Component<TreemapChartProps> {
+  static defaultProps = {
+    className: 'pb_treemap_chart',
+    dark: false,
+    drillable: false,
+    grouped: false,
+    type: 'treemap',
+  }
+  componentDidMount() {
+    const {
+      chartData,
+      className,
+      colors  = [],
+      dark,
+      drillable,
+      grouped,
+      height,
+      id,
+      title = "",
+      tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
+      type,
+    } = this.props
+    new pbChart(`.${className}`, {
+      chartData: chartData,
+      colors: colors,
+      dark,
+      drillable,
+      grouped,
+      height: height,
+      id: id,
+      title: title,
+      tooltipHtml,
+      type,
+    })
+  }
+  props: TreemapChartProps
+  render() {
+    const { className, id } = this.props
+    return (
+      <div
+          className={classnames(globalProps(this.props), className)}
+          id={id}
+      />
+    )
+  }
+}

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx CHANGED Viewed

@@ -39,7 +39,7 @@ const TreemapChartTooltip = (props) => (
         chartData={chartData}
         id="treemap-tooltip"
         title="Favored Pizza Toppings"
-        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
+        tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
         {...props}
     />
   </div>

data/app/pb_kits/playbook/playbook-doc.js CHANGED Viewed

@@ -60,7 +60,6 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
-import * as Pagination from 'pb_pagination/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -158,7 +157,6 @@ WebpackerReact.setup({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
-  ...Pagination,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/app/pb_kits/playbook/playbook-rails-react-bindings.js CHANGED Viewed

@@ -4,13 +4,11 @@ import WebpackerReact from 'webpacker-react'
 import ujs from 'webpacker-react/ujs'
 import BarGraph from './pb_bar_graph/_bar_graph'
-import CircleChart from './pb_circle_chart/_circle_chart'
 import Dialog from './pb_dialog/_dialog'
 import DialogBody from './pb_dialog/child_kits/_dialog_body'
 import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
 import DialogHeader from './pb_dialog/child_kits/_dialog_header'
 import DistributionBar from './pb_distribution_bar/_distribution_bar'
-import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import Passphrase from './pb_passphrase/_passphrase'
@@ -20,7 +18,6 @@ import Typeahead from './pb_typeahead/_typeahead'
 WebpackerReact.registerComponents({
   BarGraph,
-  CircleChart,
   Dialog,
   DialogBody,
   DialogFooter,
@@ -32,7 +29,6 @@ WebpackerReact.registerComponents({
   RichTextEditor,
   TreemapChart,
   Typeahead,
-  Gauge,
 })
 ujs.setup(

data/app/pb_kits/playbook/playbook-rails.js CHANGED Viewed

@@ -1,3 +1,7 @@
+// Charts
+import pbChart from './plugins/pb_chart'
+window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'