playbook_ui 12.13.0.pre.alpha.addingProductTokens439 → 12.14.0
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_date_picker/_date_picker.tsx +8 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +43 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +23 -9
- data/app/pb_kits/playbook/tokens/_positioning.scss +13 -0
- data/app/pb_kits/playbook/utilities/_positioning.scss +20 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +11 -2
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/position.rb +33 -0
- data/lib/playbook/version.rb +1 -1
- metadata +9 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a42d45fa9c0cb3563d9253c5c676edcd535e813873bca8f31162258372554bb9
|
4
|
+
data.tar.gz: 162a8abeed8d622e81d218e90c6a1d693a17d068d489234cbd0fb39f2c50ac7e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: de1b0f03c8ca91aedae5581617fab0920bde4bfbaa034137021a0f3fe87932a6cb963231f9add0470a606046341d3c5a0b8d3819803ae7eb34af9415f4c340b6
|
7
|
+
data.tar.gz: e5f9702e6a3f812e3ae0080cc604406fbc7f115f2b1fcf7f83e2537e9502a833d93436abe3f3c9c0795d013791f62ba43631be32298891143a8fbf58728f2ef4
|
@@ -78,6 +78,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
78
78
|
mode = 'single',
|
79
79
|
name,
|
80
80
|
onChange = () => { void 0 },
|
81
|
+
onClose,
|
81
82
|
pickerId,
|
82
83
|
placeholder = 'Select Date',
|
83
84
|
plugins = false,
|
@@ -95,9 +96,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
95
96
|
const inputAriaProps = buildAriaProps(inputAria)
|
96
97
|
const inputDataProps = buildDataProps(inputData)
|
97
98
|
|
99
|
+
const filteredProps = {...props}
|
100
|
+
delete filteredProps?.position
|
101
|
+
|
98
102
|
const classes = classnames(
|
99
103
|
buildCss('pb_date_picker_kit'),
|
100
|
-
|
104
|
+
//@ts-ignore
|
105
|
+
globalProps(filteredProps),
|
101
106
|
error ? 'error' : null,
|
102
107
|
className
|
103
108
|
)
|
@@ -117,8 +122,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
117
122
|
minDate,
|
118
123
|
mode,
|
119
124
|
onChange,
|
125
|
+
onClose,
|
120
126
|
pickerId,
|
121
127
|
plugins,
|
128
|
+
// @ts-ignore
|
122
129
|
position,
|
123
130
|
positionElement,
|
124
131
|
selectionType,
|
@@ -19,6 +19,7 @@ type DatePickerConfig = {
|
|
19
19
|
hideIcon?: boolean;
|
20
20
|
inLine?: boolean,
|
21
21
|
onChange: (dateStr: string, selectedDates: Date[]) => void,
|
22
|
+
onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
|
22
23
|
selectionType?: "month" | "week" | "",
|
23
24
|
showTimezone?: boolean,
|
24
25
|
staticPosition: boolean,
|
@@ -41,6 +42,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
41
42
|
minDate,
|
42
43
|
mode,
|
43
44
|
onChange = () => {},
|
45
|
+
onClose = () => {},
|
44
46
|
pickerId,
|
45
47
|
plugins,
|
46
48
|
position = "auto",
|
@@ -151,9 +153,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
151
153
|
window.addEventListener('resize', calendarResizer)
|
152
154
|
if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
|
153
155
|
}],
|
154
|
-
onClose: [() => {
|
156
|
+
onClose: [(selectedDates, dateStr) => {
|
155
157
|
window.removeEventListener('resize', calendarResizer)
|
156
158
|
if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
|
159
|
+
onClose(selectedDates, dateStr)
|
157
160
|
}],
|
158
161
|
onChange: [(selectedDates, dateStr) => {
|
159
162
|
onChange(dateStr, selectedDates)
|
@@ -0,0 +1,43 @@
|
|
1
|
+
/* eslint-disable react/no-multi-comp */
|
2
|
+
import React, { useState } from 'react'
|
3
|
+
import { DatePicker,LabelValue } from '../..'
|
4
|
+
|
5
|
+
|
6
|
+
const DatePickerOnClose = (props) => {
|
7
|
+
const today = new Date()
|
8
|
+
const [dateString, setDateString] = useState(today.toLocaleDateString())
|
9
|
+
const [dateObj, setDateObj] = useState([today])
|
10
|
+
|
11
|
+
const handleOnClose = (selectedDates, dateStr) => {
|
12
|
+
setDateString(dateStr)
|
13
|
+
setDateObj(selectedDates)
|
14
|
+
}
|
15
|
+
|
16
|
+
|
17
|
+
return (
|
18
|
+
<div>
|
19
|
+
<DatePicker
|
20
|
+
defaultDate={dateString}
|
21
|
+
enableTime
|
22
|
+
marginBottom="lg"
|
23
|
+
onClose={handleOnClose}
|
24
|
+
pickerId="date-picker-on-close"
|
25
|
+
showTimezone
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
<LabelValue
|
29
|
+
label="Date Object"
|
30
|
+
marginBottom="lg"
|
31
|
+
value={dateObj[0] ? dateObj[0].toString() : ''}
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
<LabelValue
|
35
|
+
label="Date String"
|
36
|
+
value={dateString}
|
37
|
+
{...props}
|
38
|
+
/>
|
39
|
+
</div>
|
40
|
+
)
|
41
|
+
}
|
42
|
+
|
43
|
+
export default DatePickerOnClose
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
|
2
|
+
|
3
|
+
The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
|
@@ -19,3 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
|
|
19
19
|
export { default as DatePickerPositions } from './_date_picker_positions.jsx'
|
20
20
|
export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
|
21
21
|
export { default as DatePickerAllowInput } from './_date_picker_allow_input'
|
22
|
+
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
@@ -151,6 +151,10 @@ const Layout = (props: LayoutPropTypes) => {
|
|
151
151
|
const nonSideChildren = layoutChildren.filter(
|
152
152
|
(child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
|
153
153
|
)
|
154
|
+
|
155
|
+
const filteredProps = {...props}
|
156
|
+
delete filteredProps?.position
|
157
|
+
|
154
158
|
return (
|
155
159
|
<div
|
156
160
|
{...ariaProps}
|
@@ -159,7 +163,8 @@ const Layout = (props: LayoutPropTypes) => {
|
|
159
163
|
layoutCss,
|
160
164
|
layoutCollapseCss,
|
161
165
|
className,
|
162
|
-
|
166
|
+
//@ts-ignore
|
167
|
+
globalProps(filteredProps)
|
163
168
|
)}
|
164
169
|
>
|
165
170
|
{subComponentTags('Side')}
|
@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
89
89
|
const [itiInit, setItiInit] = useState<any>()
|
90
90
|
const [error, setError] = useState('')
|
91
91
|
const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
|
92
|
+
const [selectedData, setSelectedData] = useState()
|
92
93
|
|
93
94
|
const validateTooLongNumber = (itiInit: any) => {
|
94
95
|
const error = itiInit.getValidationError()
|
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
121
122
|
validateOnlyNumbers()
|
122
123
|
}
|
123
124
|
|
125
|
+
const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
|
126
|
+
return { ...itiInit.getSelectedCountryData(), number: inputValue }
|
127
|
+
}
|
128
|
+
|
124
129
|
const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
|
125
130
|
setInputValue(evt.target.value)
|
126
131
|
validateTooLongNumber(itiInit)
|
127
|
-
|
132
|
+
const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
|
133
|
+
setSelectedData(phoneNumberData)
|
134
|
+
onChange(phoneNumberData)
|
128
135
|
isValid(itiInit.isValidNumber())
|
129
136
|
}
|
130
137
|
|
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
136
143
|
|
137
144
|
useEffect(() => {
|
138
145
|
const telInputInit = new intlTelInput(inputRef.current, {
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
146
|
+
separateDialCode: true,
|
147
|
+
preferredCountries,
|
148
|
+
allowDropdown: !disabled,
|
149
|
+
initialCountry,
|
150
|
+
onlyCountries,
|
151
|
+
}
|
145
152
|
)
|
146
|
-
|
147
|
-
inputRef.current.addEventListener("countrychange", () =>
|
153
|
+
|
154
|
+
inputRef.current.addEventListener("countrychange", (evt: Event) => {
|
155
|
+
validateTooLongNumber(telInputInit)
|
156
|
+
const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
|
157
|
+
setSelectedData(phoneNumberData)
|
158
|
+
onChange(phoneNumberData)
|
159
|
+
})
|
160
|
+
|
148
161
|
inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
|
149
162
|
inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
|
150
163
|
|
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
156
169
|
<TextInput
|
157
170
|
className={dropDownIsOpen ? 'dropdown_open' : ''}
|
158
171
|
dark={dark}
|
172
|
+
data-phone-number={JSON.stringify(selectedData)}
|
159
173
|
disabled={disabled}
|
160
174
|
error={error}
|
161
175
|
id={id}
|
@@ -1,3 +1,16 @@
|
|
1
|
+
$relative: relative !default;
|
2
|
+
$absolute: absolute !default;
|
3
|
+
$fixed: fixed !default;
|
4
|
+
$sticky: sticky !default;
|
5
|
+
$static: static !default;
|
6
|
+
$position: (
|
7
|
+
relative: $relative,
|
8
|
+
absolute: $absolute,
|
9
|
+
fixed: $fixed,
|
10
|
+
sticky: $sticky,
|
11
|
+
static: $static
|
12
|
+
);
|
13
|
+
|
1
14
|
// z_index variables
|
2
15
|
$z_1: 100 !default;
|
3
16
|
$z_2: 200 !default;
|
@@ -1,3 +1,23 @@
|
|
1
|
+
.position_relative {
|
2
|
+
position: relative;
|
3
|
+
}
|
4
|
+
|
5
|
+
.position_absolute {
|
6
|
+
position: absolute;
|
7
|
+
}
|
8
|
+
|
9
|
+
.position_fixed {
|
10
|
+
position: fixed;
|
11
|
+
}
|
12
|
+
|
13
|
+
.position_sticky {
|
14
|
+
position: sticky;
|
15
|
+
}
|
16
|
+
|
17
|
+
.position_static {
|
18
|
+
position: static;
|
19
|
+
}
|
20
|
+
|
1
21
|
.z_index_1 {
|
2
22
|
z-index: 100;
|
3
23
|
}
|
@@ -100,6 +100,10 @@ type Padding = {
|
|
100
100
|
padding?: AllSizes,
|
101
101
|
}
|
102
102
|
|
103
|
+
type Position = {
|
104
|
+
position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
|
105
|
+
}
|
106
|
+
|
103
107
|
type Shadow = {
|
104
108
|
shadow?: "none" | "deep" | "deeper" | "deepest",
|
105
109
|
}
|
@@ -115,7 +119,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
|
115
119
|
BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
|
116
120
|
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
117
121
|
LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
|
118
|
-
Shadow & ZIndex
|
122
|
+
Position & Shadow & ZIndex
|
119
123
|
|
120
124
|
const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
|
121
125
|
const keys: string[] = Object.keys(prop)
|
@@ -283,7 +287,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
283
287
|
} else {
|
284
288
|
return order ? `flex_order_${order}` : ''
|
285
289
|
}
|
286
|
-
}
|
290
|
+
},
|
291
|
+
positionProps: ({ position }: Position) => {
|
292
|
+
let css = ''
|
293
|
+
css += position && position !== 'static' ? `position_${position}` : ''
|
294
|
+
return css
|
295
|
+
},
|
287
296
|
}
|
288
297
|
|
289
298
|
type DefaultProps = {[key: string]: string} | Record<string, unknown>
|
data/lib/playbook/classnames.rb
CHANGED
data/lib/playbook/kit_base.rb
CHANGED
@@ -19,6 +19,7 @@ require "playbook/flex"
|
|
19
19
|
require "playbook/flex_grow"
|
20
20
|
require "playbook/flex_shrink"
|
21
21
|
require "playbook/order"
|
22
|
+
require "playbook/position"
|
22
23
|
|
23
24
|
module Playbook
|
24
25
|
class KitBase < ViewComponent::Base
|
@@ -43,6 +44,7 @@ module Playbook
|
|
43
44
|
include Playbook::FlexGrow
|
44
45
|
include Playbook::FlexShrink
|
45
46
|
include Playbook::Order
|
47
|
+
include Playbook::Position
|
46
48
|
|
47
49
|
prop :id
|
48
50
|
prop :data, type: Playbook::Props::Hash, default: {}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module Position
|
5
|
+
def self.included(base)
|
6
|
+
base.prop :position
|
7
|
+
end
|
8
|
+
|
9
|
+
private
|
10
|
+
|
11
|
+
def position_props
|
12
|
+
selected_props = position_options.keys.select { |sk| try(sk) }
|
13
|
+
return nil unless selected_props.present?
|
14
|
+
|
15
|
+
selected_props.map do |k|
|
16
|
+
value = send(k)
|
17
|
+
return nil unless position_values.include? value
|
18
|
+
|
19
|
+
"position_#{value}"
|
20
|
+
end.compact.join(" ")
|
21
|
+
end
|
22
|
+
|
23
|
+
def position_options
|
24
|
+
{
|
25
|
+
position: "position",
|
26
|
+
}
|
27
|
+
end
|
28
|
+
|
29
|
+
def position_values
|
30
|
+
%w[relative absolute fixed sticky]
|
31
|
+
end
|
32
|
+
end
|
33
|
+
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.
|
4
|
+
version: 12.14.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
12
|
date: 2023-04-06 00:00:00.000000000 Z
|
@@ -738,6 +738,8 @@ files:
|
|
738
738
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
|
739
739
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
|
740
740
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
|
741
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
|
742
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
|
741
743
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
|
742
744
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
|
743
745
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
|
@@ -2438,6 +2440,7 @@ files:
|
|
2438
2440
|
- lib/playbook/pb_doc_helper.rb
|
2439
2441
|
- lib/playbook/pb_forms_helper.rb
|
2440
2442
|
- lib/playbook/pb_kit_helper.rb
|
2443
|
+
- lib/playbook/position.rb
|
2441
2444
|
- lib/playbook/props.rb
|
2442
2445
|
- lib/playbook/props/array.rb
|
2443
2446
|
- lib/playbook/props/base.rb
|
@@ -2462,7 +2465,7 @@ homepage: http://playbook.powerapp.cloud
|
|
2462
2465
|
licenses:
|
2463
2466
|
- ISC
|
2464
2467
|
metadata: {}
|
2465
|
-
post_install_message:
|
2468
|
+
post_install_message:
|
2466
2469
|
rdoc_options: []
|
2467
2470
|
require_paths:
|
2468
2471
|
- lib
|
@@ -2473,12 +2476,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2473
2476
|
version: '0'
|
2474
2477
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2475
2478
|
requirements:
|
2476
|
-
- - "
|
2479
|
+
- - ">="
|
2477
2480
|
- !ruby/object:Gem::Version
|
2478
|
-
version:
|
2481
|
+
version: '0'
|
2479
2482
|
requirements: []
|
2480
2483
|
rubygems_version: 3.3.7
|
2481
|
-
signing_key:
|
2484
|
+
signing_key:
|
2482
2485
|
specification_version: 4
|
2483
2486
|
summary: Playbook Design System
|
2484
2487
|
test_files: []
|