playbook_ui 11.18.0 → 11.19.0.pre.alpha.pagpassthrough1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 39519a8938c7fb8a9489e3be29b15fc9ace9caa5c6686328ca2e4b9e551aba91
4
- data.tar.gz: 6534fa189af42de89d9a3f4df359ac402e1c0228ab675449cdf76d5dac001dbb
3
+ metadata.gz: ff556241a73204fa1fcb1b7f9e8c5d3d41dde1cbab356e52f52c42ccab521c0d
4
+ data.tar.gz: be66d4782e1117833f5e34036a010f71486d91318ad6241e82487964d9583602
5
5
  SHA512:
6
- metadata.gz: e85a07433af032820340c4f5e8e29ac807637c994350df2ef518afad3fe0c9cb09955aa10dcea2429242863af4f906fea5bf89d011fd0dfc2244ab4056a53a42
7
- data.tar.gz: 0e1c3a2e97f4a36db0caf31debc8f04aa9434b0dc2627a99ff22ebfe67fe91a3be577bb91f2412dde9081874bc34995365721a09e4bf1eba1110bca1a31fe373
6
+ metadata.gz: 9763ce291cf8f35999f873b742e258a28c07f6c1cc42fc59399ff8f2d32cf80a27cb3a583188726c0449757d19edcde02460b4e0744f8fd1599343c1aa995ced
7
+ data.tar.gz: 6a93d271d454a850b50bc5a940242c97ba55962a9dc6cca4faf375eaf223e07385137f2c2409554d10be4291a7f052553a3bde48c9027e12b58869606f6ee71a
@@ -103,3 +103,5 @@
103
103
  @import './utilities/line_height';
104
104
  @import './utilities/display';
105
105
  @import './utilities/flexbox';
106
+ @import './utilities/pagination';
107
+ @import 'pb_paginate/paginate';
@@ -104,3 +104,4 @@ kits:
104
104
  - title_detail
105
105
  - user_badge
106
106
  - walkthrough
107
+ - paginate
@@ -23,15 +23,15 @@ const CollapsibleContent = ({
23
23
  const contentSpacing = globalProps(props, { padding })
24
24
 
25
25
  return (
26
- <div className={classnames(contentCSS, className, contentSpacing)}>
27
- <AnimateHeight
28
- duration={300}
29
- height={context.collapsed ? 0 : 'auto'}
30
- id="bottom-section"
31
- >
26
+ <AnimateHeight
27
+ duration={400}
28
+ height={context.collapsed ? 0 : 'auto'}
29
+ id="bottom-section"
30
+ >
31
+ <div className={classnames(contentCSS, className, contentSpacing)}>
32
32
  {children}
33
- </AnimateHeight>
34
- </div>
33
+ </div>
34
+ </AnimateHeight>
35
35
  )
36
36
  }
37
37
 
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useCallback, useRef } from 'react'
2
- import { useDropzone } from 'react-dropzone'
2
+ import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
3
3
  import classnames from 'classnames'
4
4
 
5
5
  import { buildCss, buildDataProps, noop } from '../utilities/props'
@@ -38,13 +38,20 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
38
38
  onFilesAccepted(files)
39
39
  }, [onFilesAccepted])
40
40
 
41
- const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
41
+ type DropZoneProps = {
42
+ getRootProps: () => DropzoneRootProps & any;
43
+ getInputProps: () => DropzoneInputProps & any;
44
+ isDragActive: boolean;
45
+ rejectedFiles: File[];
46
+ }
47
+
48
+ const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
42
49
  accept,
43
50
  maxSize,
44
51
  onDrop,
45
52
  })
46
53
 
47
- const prevRejected: any = useRef();
54
+ const prevRejected = useRef<File[] | null>(null);
48
55
 
49
56
  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
50
57
 
@@ -0,0 +1,97 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
4
+ import { globalProps } from "../utilities/globalProps";
5
+
6
+ type ListProps = {
7
+ aria?: { [key: string]: string };
8
+ borderless?: boolean;
9
+ className?: string;
10
+ children: React.ReactNode[] | React.ReactNode;
11
+ dark?: boolean;
12
+ data?: object;
13
+ id?: string;
14
+ layout: "" | "left" | "right";
15
+ ordered?: boolean;
16
+ role?: string;
17
+ tabIndex?: number;
18
+ text?: string;
19
+ size?: string;
20
+ variant?: string;
21
+ xpadding: boolean;
22
+ };
23
+
24
+ const List = (props: ListProps) => {
25
+ const {
26
+ aria = {},
27
+ borderless = false,
28
+ children,
29
+ className,
30
+ dark = false,
31
+ data = {},
32
+ id,
33
+ layout = "",
34
+ ordered = false,
35
+ role,
36
+ size = "",
37
+ tabIndex,
38
+ xpadding = false,
39
+ variant,
40
+ text,
41
+ } = props;
42
+
43
+ const layoutClass: { [key: string]: string } = {
44
+ left: "layout_left",
45
+ right: "layout_right",
46
+ default: "",
47
+ };
48
+
49
+ const childrenWithProps = React.Children.map(
50
+ children,
51
+ (child: React.ReactElement) => {
52
+ return React.cloneElement(child, { text, variant });
53
+ }
54
+ );
55
+ const ariaProps = buildAriaProps(aria);
56
+ const dataProps = buildDataProps(data);
57
+ const classes = classnames(
58
+ buildCss("pb_list_kit", layoutClass[layout], size, {
59
+ dark: dark,
60
+ borderless: borderless,
61
+ ordered: ordered,
62
+ xpadding: xpadding,
63
+ }),
64
+ globalProps(props),
65
+ className
66
+ );
67
+
68
+ return (
69
+ <div className={classes}>
70
+ {ordered ? (
71
+ <ol
72
+ {...ariaProps}
73
+ {...dataProps}
74
+ className={className}
75
+ id={id}
76
+ role={role}
77
+ tabIndex={tabIndex}
78
+ >
79
+ {childrenWithProps}
80
+ </ol>
81
+ ) : (
82
+ <ul
83
+ {...ariaProps}
84
+ {...dataProps}
85
+ className={className}
86
+ id={id}
87
+ role={role}
88
+ tabIndex={tabIndex}
89
+ >
90
+ {childrenWithProps}
91
+ </ul>
92
+ )}
93
+ </div>
94
+ );
95
+ };
96
+
97
+ export default List;
@@ -1,17 +1,15 @@
1
- /* @flow */
2
-
3
- import React, { type Node } from 'react'
1
+ import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
4
  import { globalProps } from '../utilities/globalProps'
7
5
 
8
6
  type ListItemProps = {
9
- aria?: object,
10
- children: array<Node> | Node,
7
+ aria?: { [key: string]: string },
8
+ children: React.ReactNode[] | React.ReactNode,
11
9
  className?: string,
12
10
  data?: object,
13
11
  id?: string,
14
- tabIndex?: string,
12
+ tabIndex?: number,
15
13
  }
16
14
 
17
15
  const ListItem = (props: ListItemProps) => {
@@ -0,0 +1,3 @@
1
+ .pb_paginate {
2
+
3
+ }
@@ -0,0 +1,19 @@
1
+ <%= pb_rails("title", props: { size: 4, text: "Default will_paginate"}) %>
2
+ <%= will_paginate @users %>
3
+ <%= pb_rails("body") do %>
4
+ You need to add: <code> require 'will_paginate'</code> in your app to use.
5
+ <% end %>
6
+ <br><br>
7
+
8
+ <%= pb_rails("title", props: { size: 4, text: "Playbook Renderer"}) %>
9
+ <%= will_paginate @users, renderer: Playbook::Pagination::Rails %>
10
+ <%= pb_rails("body") do %>
11
+ You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
12
+ <% end %>
13
+ <br><br>
14
+
15
+ <%= pb_rails("title", props: { size: 4, text: "Playbook Kit (Passthrough)"}) %>
16
+ <%= pb_rails("paginate", props: { stragety: "will_paginate", model: @users }) %>
17
+ <%= pb_rails("body") do %>
18
+ Same...You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
19
+ <% end %>
@@ -0,0 +1,6 @@
1
+ examples:
2
+
3
+ rails:
4
+ - paginate_default: Default
5
+
6
+
@@ -0,0 +1,5 @@
1
+ <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
2
+
3
+ <%# Couldn't get this working %>
4
+ <%# Need a Rails Dev to look %>
5
+ <%# <%= eval(object.stragety) object.model, renderer: Playbook::Pagination::Rails %>
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbPaginate
5
+ class Paginate < ::Playbook::KitBase
6
+ prop :stragety # Need to add protection
7
+ prop :model # Need to add protection
8
+
9
+ def classname
10
+ generate_classname("pb_paginate")
11
+ end
12
+ end
13
+ end
14
+ end
@@ -0,0 +1,239 @@
1
+ import React, { useEffect } from "react";
2
+ import ReactDOM from "react-dom";
3
+
4
+ import {
5
+ Popper,
6
+ Manager as PopperManager,
7
+ Modifier,
8
+ PopperProps,
9
+ Reference as PopperReference,
10
+ } from "react-popper";
11
+
12
+ import {
13
+ buildAriaProps,
14
+ buildCss,
15
+ buildDataProps,
16
+ noop,
17
+ } from "../utilities/props";
18
+
19
+ import classnames from "classnames";
20
+ import { globalProps, GlobalProps } from "../utilities/globalProps";
21
+
22
+ type PbPopoverProps = {
23
+ aria?: { [key: string]: string };
24
+ className?: string;
25
+ closeOnClick?: "outside" | "inside" | "any";
26
+ data?: object;
27
+ id?: string;
28
+ offset?: boolean;
29
+ reference: PopperReference & any;
30
+ show?: boolean;
31
+ shouldClosePopover?: (arg0: boolean) => boolean | boolean;
32
+ } & GlobalProps &
33
+ PopperProps<any>;
34
+
35
+ // Prop enabled default modifiers here
36
+ // https://popper.js.org/docs/v2/modifiers
37
+
38
+ const POPOVER_MODIFIERS = {
39
+ offset: {
40
+ //https://popper.js.org/docs/v2/modifiers/offset/
41
+ enabled: true,
42
+ name: "offset",
43
+ options: {
44
+ offset: [0, 20],
45
+ },
46
+ phase: "main",
47
+ },
48
+ };
49
+
50
+ const popoverModifiers = ({
51
+ modifiers,
52
+ offset,
53
+ }: {
54
+ modifiers: Modifier<any> & any;
55
+ offset: {};
56
+ }) => {
57
+ return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
58
+ };
59
+
60
+ const Popover = (props: PbPopoverProps) => {
61
+ const {
62
+ aria = {},
63
+ className,
64
+ children,
65
+ data = {},
66
+ id,
67
+ modifiers,
68
+ offset,
69
+ placement,
70
+ referenceElement,
71
+ zIndex,
72
+ maxHeight,
73
+ maxWidth,
74
+ minHeight,
75
+ minWidth,
76
+ } = props;
77
+
78
+ const popoverSpacing =
79
+ globalProps(props).includes("dark") || !globalProps(props)
80
+ ? "p_sm"
81
+ : globalProps(props);
82
+ const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
83
+ const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
84
+ const widthHeightStyles = () => {
85
+ return Object.assign(
86
+ {},
87
+ maxHeight ? { maxHeight: maxHeight } : {},
88
+ maxWidth ? { maxWidth: maxWidth } : {},
89
+ minHeight ? { minHeight: minHeight } : {},
90
+ minWidth ? { minWidth: minWidth } : {}
91
+ );
92
+ };
93
+ const ariaProps = buildAriaProps(aria);
94
+ const dataProps = buildDataProps(data);
95
+ const classes = classnames(
96
+ buildCss("pb_popover_kit"),
97
+ globalProps(props),
98
+ className
99
+ );
100
+
101
+ return (
102
+ <Popper
103
+ modifiers={popoverModifiers({ modifiers, offset })}
104
+ placement={placement}
105
+ referenceElement={referenceElement}
106
+ >
107
+ {({ placement, ref, style }) => {
108
+ return (
109
+ <div
110
+ {...ariaProps}
111
+ {...dataProps}
112
+ className={classes}
113
+ data-placement={placement}
114
+ id={id}
115
+ ref={ref}
116
+ style={Object.assign({}, style, zIndexStyle)}
117
+ >
118
+ <div
119
+ className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
120
+ >
121
+ <div
122
+ className={classnames(
123
+ "pb_popover_body",
124
+ popoverSpacing,
125
+ overflowHandling
126
+ )}
127
+ style={widthHeightStyles()}
128
+ >
129
+ {children}
130
+ </div>
131
+ </div>
132
+ </div>
133
+ );
134
+ }}
135
+ </Popper>
136
+ );
137
+ };
138
+
139
+ const PbReactPopover = (props: PbPopoverProps) => {
140
+ const {
141
+ className,
142
+ children,
143
+ modifiers = [],
144
+ offset = false,
145
+ placement = "left",
146
+ portal = "body",
147
+ reference,
148
+ referenceElement,
149
+ show = false,
150
+ usePortal = true,
151
+ zIndex,
152
+ maxHeight,
153
+ maxWidth,
154
+ minHeight,
155
+ minWidth,
156
+ } = props;
157
+
158
+ useEffect(() => {
159
+ const { closeOnClick, shouldClosePopover = noop } = props;
160
+
161
+ if (!closeOnClick) return;
162
+
163
+ document.body.addEventListener(
164
+ "click",
165
+ ({ target }) => {
166
+ const targetIsPopover =
167
+ (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
168
+ null;
169
+ const targetIsReference =
170
+ (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
171
+ null;
172
+
173
+ switch (closeOnClick) {
174
+ case "outside":
175
+ if (!targetIsPopover || targetIsReference) {
176
+ shouldClosePopover(true);
177
+ }
178
+ break;
179
+ case "inside":
180
+ if (targetIsPopover || targetIsReference) {
181
+ shouldClosePopover(true);
182
+ }
183
+ break;
184
+ case "any":
185
+ shouldClosePopover(true);
186
+ break;
187
+ }
188
+ },
189
+ { capture: true }
190
+ );
191
+ }, []);
192
+
193
+ const popoverComponent = (
194
+ <Popover
195
+ className={className}
196
+ maxHeight={maxHeight}
197
+ maxWidth={maxWidth}
198
+ minHeight={minHeight}
199
+ minWidth={minWidth}
200
+ modifiers={modifiers}
201
+ offset={offset}
202
+ placement={placement}
203
+ referenceElement={referenceElement}
204
+ zIndex={zIndex}
205
+ {...props}
206
+ >
207
+ {children}
208
+ </Popover>
209
+ );
210
+
211
+ return (
212
+ <PopperManager>
213
+ <>
214
+ {reference && !referenceElement && (
215
+ <PopperReference>
216
+ {({ ref }) => (
217
+ <span className="pb_popover_reference_wrapper" ref={ref}>
218
+ <reference.type {...reference.props} />
219
+ </span>
220
+ )}
221
+ </PopperReference>
222
+ )}
223
+ {show &&
224
+ (usePortal ? (
225
+ <>
226
+ {ReactDOM.createPortal(
227
+ popoverComponent,
228
+ document.querySelector(portal)
229
+ )}
230
+ </>
231
+ ) : (
232
+ { popoverComponent }
233
+ ))}
234
+ </>
235
+ </PopperManager>
236
+ );
237
+ };
238
+
239
+ export default PbReactPopover;
@@ -1,9 +1,13 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
- import { createPopper } from '@popperjs/core'
2
+ import { createPopper, Instance, Placement } from '@popperjs/core'
3
3
 
4
4
  const POPOVER_OFFSET_Y = [0, 20]
5
5
 
6
6
  export default class PbPopover extends PbEnhancedElement {
7
+ popper: Instance
8
+ _triggerElement: HTMLElement
9
+ _tooltip: HTMLElement
10
+ element: HTMLElement
7
11
  static get selector() {
8
12
  return '[data-pb-popover-kit]'
9
13
  }
@@ -14,8 +18,8 @@ export default class PbPopover extends PbEnhancedElement {
14
18
 
15
19
  connect() {
16
20
  this.moveTooltip()
17
- this.popper = createPopper(this.triggerElement, this.tooltip, {
18
- placement: this.position,
21
+ this.popper = createPopper (this.triggerElement, this.tooltip, {
22
+ placement: this.position as Placement,
19
23
  strategy: 'fixed',
20
24
  modifiers: [
21
25
  {
@@ -27,7 +31,7 @@ export default class PbPopover extends PbEnhancedElement {
27
31
  ],
28
32
  })
29
33
 
30
- this.triggerElement.addEventListener('click', (event) => {
34
+ this.triggerElement.addEventListener('click', (event: Event) => {
31
35
  event.preventDefault()
32
36
  event.stopPropagation()
33
37
 
@@ -43,8 +47,8 @@ export default class PbPopover extends PbEnhancedElement {
43
47
  }
44
48
 
45
49
  checkCloseTooltip() {
46
- document.querySelector('body').addEventListener('click', ({ target }) => {
47
- const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
50
+ document.querySelector('body').addEventListener('click', ({ target } ) => {
51
+ const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
48
52
 
49
53
  switch (this.closeOnClick) {
50
54
  case 'any':