playbook_ui 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7444 → 14.18.0.pre.alpha.play2034zonesandcolors7407
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -50
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +1 -5
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -10
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
- data/dist/chunks/{_typeahead-CZD3oEni.js → _typeahead-CvkGr9xV.js} +1 -1
- data/dist/chunks/_weekday_stacked-B-ran-L1.js +45 -0
- data/dist/chunks/{lib-B2aSh06s.js → lib-yWHJ_8mm.js} +1 -1
- data/dist/chunks/{pb_form_validation-B9ZIP6_x.js → pb_form_validation-CFPfX89U.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -13
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +0 -14
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +0 -20
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +0 -14
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +0 -110
- data/dist/chunks/_weekday_stacked-BnkP72lG.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 82af6f41e074ccd0c1072ae79ddb0855e52a009457ef0bba28f1e69184b1e1c9
|
4
|
+
data.tar.gz: 37b9ca3d21cbe1ef755604dac8072152649e5f8311860b5bcd02e12144153ec2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ead03cac479441c769277d456c4caec0f7709340dfeec40acee19d00b55053cd16d6eb5332472958b89f928db25063cb748bd8149d4593b052303fd9a88900a2
|
7
|
+
data.tar.gz: f231e8c3219d2968d1632f2663c911f3331624c7bfe3da26adc3105ad26154d701543ccb8b8b83f2b6233bf2f175a37fada397697b5f814ccc1ff2b5959f8634
|
@@ -50,10 +50,6 @@ type DatePickerProps = {
|
|
50
50
|
timeFormat?: string,
|
51
51
|
type?: string,
|
52
52
|
yearRange?: number[],
|
53
|
-
controlsStartId?: string,
|
54
|
-
controlsEndId?: string,
|
55
|
-
syncStartWith?: string,
|
56
|
-
syncEndWith?: string,
|
57
53
|
} & GlobalProps
|
58
54
|
|
59
55
|
const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
@@ -102,10 +98,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
102
98
|
staticPosition = true,
|
103
99
|
thisRangesEndToday = false,
|
104
100
|
yearRange = [1900, 2100],
|
105
|
-
controlsStartId,
|
106
|
-
controlsEndId,
|
107
|
-
syncStartWith,
|
108
|
-
syncEndWith,
|
109
101
|
} = props
|
110
102
|
|
111
103
|
const ariaProps = buildAriaProps(aria)
|
@@ -142,10 +134,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
142
134
|
staticPosition,
|
143
135
|
thisRangesEndToday,
|
144
136
|
yearRange,
|
145
|
-
controlsStartId,
|
146
|
-
controlsEndId,
|
147
|
-
syncStartWith,
|
148
|
-
syncEndWith,
|
149
137
|
required: false,
|
150
138
|
}, scrollContainer)
|
151
139
|
}, initializeOnce ? [] : undefined)
|
@@ -77,14 +77,6 @@ module Playbook
|
|
77
77
|
default: ""
|
78
78
|
prop :validation_message, type: Playbook::Props::String,
|
79
79
|
default: ""
|
80
|
-
prop :controls_start_id, type: Playbook::Props::String,
|
81
|
-
default: ""
|
82
|
-
prop :controls_end_id, type: Playbook::Props::String,
|
83
|
-
default: ""
|
84
|
-
prop :sync_start_with, type: Playbook::Props::String,
|
85
|
-
default: ""
|
86
|
-
prop :sync_end_with, type: Playbook::Props::String,
|
87
|
-
default: ""
|
88
80
|
|
89
81
|
def classname
|
90
82
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
@@ -116,10 +108,6 @@ module Playbook
|
|
116
108
|
staticPosition: static_position,
|
117
109
|
thisRangesEndToday: this_ranges_end_today,
|
118
110
|
yearRange: year_range,
|
119
|
-
controlsStartId: controls_start_id,
|
120
|
-
controlsEndId: controls_end_id,
|
121
|
-
syncStartWith: sync_start_with,
|
122
|
-
syncEndWith: sync_end_with,
|
123
111
|
}.to_json.html_safe
|
124
112
|
end
|
125
113
|
|
@@ -32,11 +32,7 @@ type DatePickerConfig = {
|
|
32
32
|
thisRangesEndToday?: boolean,
|
33
33
|
timeCaption?: string,
|
34
34
|
timeFormat?: string,
|
35
|
-
yearRange: number[]
|
36
|
-
controlsStartId?: string,
|
37
|
-
controlsEndId?: string,
|
38
|
-
syncStartWith?: string,
|
39
|
-
syncEndWith?: string,
|
35
|
+
yearRange: number[]
|
40
36
|
} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
|
41
37
|
|
42
38
|
const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
|
@@ -71,10 +67,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
71
67
|
timeCaption = 'Select Time',
|
72
68
|
timeFormat = 'at h:i K',
|
73
69
|
yearRange,
|
74
|
-
controlsStartId,
|
75
|
-
controlsEndId,
|
76
|
-
syncStartWith,
|
77
|
-
syncEndWith,
|
78
70
|
} = config
|
79
71
|
|
80
72
|
// ===========================================================
|
@@ -283,47 +275,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
283
275
|
})
|
284
276
|
}
|
285
277
|
|
286
|
-
// === Automatic Sync Logic for 3 input range pattern===
|
287
|
-
|
288
|
-
// If this is a quickpick that controls start and end
|
289
|
-
if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
|
290
|
-
picker.config.onClose.push((selectedDates:string) => {
|
291
|
-
const [start, end] = selectedDates;
|
292
|
-
|
293
|
-
if (controlsStartId) {
|
294
|
-
const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
295
|
-
startPicker?.setDate(start, true);
|
296
|
-
}
|
297
|
-
|
298
|
-
if (controlsEndId) {
|
299
|
-
const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
300
|
-
endPicker?.setDate(end, true);
|
301
|
-
}
|
302
|
-
});
|
303
|
-
}
|
304
|
-
|
305
|
-
// If this is a start picker that syncs with a quickpick
|
306
|
-
if (syncStartWith) {
|
307
|
-
picker.config.onClose.push((selectedDates: string) => {
|
308
|
-
if (selectedDates?.length) {
|
309
|
-
const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
310
|
-
quickpick?.clear();
|
311
|
-
}
|
312
|
-
});
|
313
|
-
}
|
314
|
-
|
315
|
-
// If this is an end picker that syncs with a quickpick
|
316
|
-
if (syncEndWith) {
|
317
|
-
picker.config.onClose.push((selectedDates: string) => {
|
318
|
-
if (selectedDates?.length) {
|
319
|
-
const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
|
320
|
-
quickpick?.clear();
|
321
|
-
}
|
322
|
-
});
|
323
|
-
}
|
324
|
-
// === End of Automatic Sync Logic ===
|
325
|
-
|
326
|
-
|
327
278
|
// Adding dropdown icons to year and month select
|
328
279
|
dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
|
329
280
|
if (picker.monthElements[0].parentElement) {
|
@@ -1,7 +1,3 @@
|
|
1
|
-
To use the `quickpick`:
|
2
|
-
- prop `mode` must be set to `range`
|
3
|
-
- prop `selection_type` must be set to `quickpick`
|
4
|
-
|
5
1
|
This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
|
6
2
|
|
7
3
|
Like all other date pickers, the quick pick does require a `picker_id`.
|
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
|
@@ -1,5 +1 @@
|
|
1
|
-
|
2
|
-
- prop `mode` must be set to `range`
|
3
|
-
- prop `selectionType` must be set to `quickpick`
|
4
|
-
|
5
|
-
Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.
|
1
|
+
Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
|
@@ -15,7 +15,6 @@ examples:
|
|
15
15
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
16
16
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
17
17
|
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
18
|
-
- date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
|
19
18
|
- date_picker_format: Format
|
20
19
|
- date_picker_disabled: Disabled Dates
|
21
20
|
- date_picker_min_max: Min Max
|
@@ -48,7 +47,6 @@ examples:
|
|
48
47
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
49
48
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
50
49
|
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
51
|
-
- date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
|
52
50
|
- date_picker_format: Format
|
53
51
|
- date_picker_disabled: Disabled Dates
|
54
52
|
- date_picker_min_max: Min Max
|
@@ -26,4 +26,3 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
|
26
26
|
export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
|
27
27
|
export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
|
28
28
|
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|
29
|
-
export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
|
@@ -238,16 +238,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
|
|
238
238
|
},
|
239
239
|
|
240
240
|
onClose(selectedDates: Array<Date>) {
|
241
|
-
// Patch .clear() to also remove active state if cleared
|
242
|
-
const originalClear = fp.clear;
|
243
|
-
fp.clear = function (...args: any) {
|
244
|
-
const current = pluginData.rangesNav.querySelector('.active');
|
245
|
-
if (current) {
|
246
|
-
current.classList.remove('active');
|
247
|
-
}
|
248
|
-
activeLabel = "";
|
249
|
-
return originalClear.apply(this, args);
|
250
|
-
};
|
251
241
|
// remove the active class from the button if the selected dates don't match the label
|
252
242
|
if (!isLabelMatchingSelectedDates(selectedDates)) {
|
253
243
|
pluginData.rangesButtons[activeLabel]?.classList.remove('active');
|
@@ -4,4 +4,3 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
|
|
4
4
|
export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
|
5
5
|
export { default as LineGraphHeight } from './_line_graph_height.jsx'
|
6
6
|
export { default as LineGraphColors } from './_line_graph_colors.jsx'
|
7
|
-
export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-yWHJ_8mm.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
|
2
2
|
/*!
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
4
4
|
Licensed under the MIT License (MIT), see
|