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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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'