playbook_ui 7.3.0.pre.alpha7 → 7.3.0.pre.alpha12
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +42 -50
- data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb +2 -2
- data/app/pb_kits/playbook/pb_collapsible/useToggler.js +10 -0
- data/lib/playbook/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d1ae42d076ae177de10c6ae634260583ce2c56034d5562ef212bf3400cdec1f3
|
4
|
+
data.tar.gz: b86670d2e736072dc5cfa9dfe9134535eb06c257e68c26eba05c42b7fbbb4ad4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b25282fe2aa8b8c1dd5d3b1dddc01bfb34d7e79bf726a95c4fe2b2ce20c76c3a57d72ba5ef1e4275069f0b6942a77f9a2807cdb4c3f754f1d81c491c00efeba5
|
7
|
+
data.tar.gz: 7caf7691c67d48d5a9b343d0f79cfdcef59095774ec9aa0e7d2e95449f4c231f34a658967c89d52cf2ab61cfeebba3cf48849bdc6a2ed3e71a4ed14c6cb58c3d
|
@@ -1,12 +1,12 @@
|
|
1
1
|
/* @flow */
|
2
2
|
|
3
|
-
import classnames from
|
4
|
-
import { get } from
|
5
|
-
import { Flex, FlexItem } from
|
6
|
-
import React, { useState } from
|
7
|
-
import AnimateHeight from
|
8
|
-
import { buildAriaProps, buildCss, buildDataProps } from
|
9
|
-
import { globalProps } from
|
3
|
+
import classnames from "classnames"
|
4
|
+
import { get } from "lodash"
|
5
|
+
import { Flex, FlexItem } from "../"
|
6
|
+
import React, { useState } from "react"
|
7
|
+
import AnimateHeight from "react-animate-height"
|
8
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
|
9
|
+
import { globalProps } from "../utilities/globalProps.js"
|
10
10
|
|
11
11
|
type CollapsibleProps = {
|
12
12
|
children: React.ChildrenArray<React.Element<typeof Main | Content>>,
|
@@ -29,8 +29,8 @@ type CollapsibleContentProps = {
|
|
29
29
|
}
|
30
30
|
|
31
31
|
const Main = (props: CollapsibleMainProps) => {
|
32
|
-
const { children, className, padding =
|
33
|
-
const mainCSS = buildCss(
|
32
|
+
const { children, className, padding = "sm" } = props
|
33
|
+
const mainCSS = buildCss("pb_collapsible_main_kit")
|
34
34
|
const mainSpacing = globalProps(props, { padding })
|
35
35
|
|
36
36
|
return (
|
@@ -41,8 +41,8 @@ const Main = (props: CollapsibleMainProps) => {
|
|
41
41
|
}
|
42
42
|
|
43
43
|
const Content = (props: CollapsibleContentProps) => {
|
44
|
-
const { children, className, padding =
|
45
|
-
const contentCSS = buildCss(
|
44
|
+
const { children, className, padding = "md" } = props
|
45
|
+
const contentCSS = buildCss("pb_collapsible_content_kit")
|
46
46
|
const contentSpacing = globalProps(props, { padding })
|
47
47
|
|
48
48
|
return (
|
@@ -53,89 +53,81 @@ const Content = (props: CollapsibleContentProps) => {
|
|
53
53
|
}
|
54
54
|
|
55
55
|
const Collapsible = (props: CollapsibleProps) => {
|
56
|
-
const {
|
57
|
-
aria = {},
|
58
|
-
className,
|
59
|
-
children = [],
|
60
|
-
data = {},
|
61
|
-
id,
|
62
|
-
} = props
|
56
|
+
const { aria = {}, className, children = [], data = {}, id } = props
|
63
57
|
|
64
58
|
const ariaProps = buildAriaProps(aria)
|
65
59
|
const dataProps = buildDataProps(data)
|
66
|
-
const classes = classnames(
|
60
|
+
const classes = classnames(
|
61
|
+
buildCss("pb_collapsible"),
|
62
|
+
className,
|
63
|
+
globalProps(props)
|
64
|
+
)
|
67
65
|
|
68
66
|
const [height, setHeight] = useState(0)
|
69
67
|
const toggleExpand = () => {
|
70
|
-
setHeight(height === 0 ?
|
68
|
+
setHeight(height === 0 ? "auto" : 0)
|
71
69
|
}
|
72
70
|
|
73
71
|
const collapsibleChildren =
|
74
|
-
typeof children ===
|
72
|
+
typeof children === "object" && children.length ? children : [children]
|
73
|
+
|
74
|
+
console.log("CollapsibleChildren:", collapsibleChildren)
|
75
75
|
|
76
76
|
const subComponentTags = (tagName) => {
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
77
|
+
console.log("TagName:", tagName)
|
78
|
+
return collapsibleChildren
|
79
|
+
.filter((c) => get(c, "type.displayName") === tagName)
|
80
|
+
.map((child, i) => {
|
81
|
+
console.log("the child:", child)
|
82
|
+
return React.cloneElement(child, {
|
83
|
+
key: `${tagName.toLowerCase()}-${i}`,
|
84
|
+
})
|
85
|
+
})
|
82
86
|
}
|
83
87
|
|
84
88
|
const renderChevron = (height) => {
|
85
|
-
const direction = height === 0 ?
|
89
|
+
const direction = height === 0 ? "down" : "up"
|
86
90
|
|
87
91
|
return (
|
88
|
-
<div
|
89
|
-
|
90
|
-
style={{ verticalAlign: 'middle' }}
|
91
|
-
>
|
92
|
-
<i className={`far fa-2x fa-chevron-${direction} fa-fw`} />
|
92
|
+
<div key={direction} style={{ verticalAlign: "middle" }}>
|
93
|
+
<i className={`far fa-chevron-${direction} fa-fw`} />
|
93
94
|
</div>
|
94
95
|
)
|
95
96
|
}
|
96
97
|
|
97
98
|
const renderMain = () => {
|
98
|
-
const mainTags = subComponentTags(
|
99
|
+
const mainTags = subComponentTags("Main")
|
99
100
|
|
100
101
|
return (
|
101
102
|
<div onClick={toggleExpand}>
|
102
|
-
<Flex
|
103
|
-
spacing="between"
|
104
|
-
vertical="center"
|
105
|
-
>
|
103
|
+
<Flex spacing='between' vertical='center'>
|
106
104
|
<FlexItem>{mainTags}</FlexItem>
|
107
105
|
<FlexItem>{renderChevron(height)}</FlexItem>
|
108
106
|
</Flex>
|
109
107
|
</div>
|
110
|
-
|
111
108
|
)
|
112
109
|
}
|
113
110
|
|
114
111
|
const renderContent = () => {
|
115
|
-
const nonMainChildren = collapsibleChildren.filter(
|
112
|
+
const nonMainChildren = collapsibleChildren.filter(
|
113
|
+
(child) => get(child, "type.displayName") !== "Main"
|
114
|
+
)
|
115
|
+
console.log("NonMainChildren:", nonMainChildren)
|
116
116
|
return (
|
117
|
-
<AnimateHeight
|
118
|
-
duration={500}
|
119
|
-
height={height}
|
120
|
-
id="bottom-section"
|
121
|
-
>
|
117
|
+
<AnimateHeight duration={500} height={height} id='bottom-section'>
|
122
118
|
{nonMainChildren}
|
123
119
|
</AnimateHeight>
|
124
120
|
)
|
125
121
|
}
|
126
122
|
|
127
123
|
return (
|
128
|
-
<div
|
129
|
-
{...ariaProps}
|
130
|
-
{...dataProps}
|
131
|
-
className={classes}
|
132
|
-
id={id}
|
133
|
-
>
|
124
|
+
<div {...ariaProps} {...dataProps} className={classes} id={id}>
|
134
125
|
{renderMain()}
|
135
126
|
{renderContent()}
|
136
127
|
</div>
|
137
128
|
)
|
138
129
|
}
|
130
|
+
|
139
131
|
Collapsible.Main = Main
|
140
132
|
Collapsible.Content = Content
|
141
133
|
|
@@ -9,8 +9,8 @@
|
|
9
9
|
<%= capture(&object.children) %>
|
10
10
|
<% end %>
|
11
11
|
<%= pb_rails("flex/flex_item") do %>
|
12
|
-
<i class="far fa-chevron-down
|
13
|
-
<i class="far fa-chevron-up
|
12
|
+
<i class="far fa-chevron-down"></i>
|
13
|
+
<i class="far fa-chevron-up" style="display: none"></i>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
16
16
|
<% end %>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 7.3.0.pre.
|
4
|
+
version: 7.3.0.pre.alpha12
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-10-
|
12
|
+
date: 2020-10-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -640,6 +640,7 @@ files:
|
|
640
640
|
- app/pb_kits/playbook/pb_collapsible/docs/example.yml
|
641
641
|
- app/pb_kits/playbook/pb_collapsible/docs/index.js
|
642
642
|
- app/pb_kits/playbook/pb_collapsible/index.js
|
643
|
+
- app/pb_kits/playbook/pb_collapsible/useToggler.js
|
643
644
|
- app/pb_kits/playbook/pb_contact/_contact.html.erb
|
644
645
|
- app/pb_kits/playbook/pb_contact/_contact.jsx
|
645
646
|
- app/pb_kits/playbook/pb_contact/_contact.scss
|