playbook_ui 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4478 → 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4492
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_card/docs/_card_light.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb +42 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +5 -4
- data/dist/chunks/{_typeahead-BXzFhaTy.js → _typeahead-DZmYDBaL.js} +1 -1
- data/dist/chunks/{_weekday_stacked-CWQekIDV.js → _weekday_stacked-CgPamJiY.js} +1 -1
- data/dist/chunks/{lib-lcEbe0vX.js → lib-BC6ESsxG.js} +1 -1
- data/dist/chunks/{pb_form_validation-yoi2KCvh.js → pb_form_validation-B_Z9rEbg.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 +8 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: cabb1b07b6bb3785907ca83644f3d7f43e29d11abfe1fca5935f7a0a35acf129
|
4
|
+
data.tar.gz: f36d58a2b45618e78ed4c6946604afa443127de9d4ce9f7f68c6deddc1062329
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d20a7497d705050c8820b4ce8a028a9ca347353da2e15f66338a006b2513f97fa51b3f534c8ad48f3ddd921260f3f494025822f00416f96f627bcafab7a8f116
|
7
|
+
data.tar.gz: cce97684299c02d9d4b2745f3755da992ce4f34bd3f64aa074a5cc1ad97dcc637c078d35b799c741cc7e008ea4280dcda833660e6e261790a79a9017aa252dd6
|
@@ -1 +1 @@
|
|
1
|
-
Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
|
1
|
+
Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
allow_input: true,
|
3
|
+
default_date: "This month",
|
4
|
+
end_date_id: "quick-pick-end-date",
|
5
|
+
end_date_name: "quick-pick-end-date",
|
6
|
+
mode: "range",
|
7
|
+
picker_id: "quick-pick-default-date",
|
8
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
9
|
+
selection_type: "quickpick",
|
10
|
+
start_date_id: "quick-pick-start-date",
|
11
|
+
start_date_name: "quick-pick-start-date"
|
12
|
+
}) %>
|
13
|
+
|
14
|
+
<%= pb_rails("date_picker", props: {
|
15
|
+
allow_input: true,
|
16
|
+
custom_quick_pick_dates: {
|
17
|
+
dates: [
|
18
|
+
{
|
19
|
+
label: "Last 15 months",
|
20
|
+
value: {
|
21
|
+
timePeriod: "months",
|
22
|
+
amount: 15,
|
23
|
+
},
|
24
|
+
},
|
25
|
+
{
|
26
|
+
label: "First Week of June 2022",
|
27
|
+
value: ["06/01/2022", "06/07/2022"],
|
28
|
+
},
|
29
|
+
],
|
30
|
+
},
|
31
|
+
default_date: "First Week of June 2022",
|
32
|
+
end_date_id: "quick-pick-end-date",
|
33
|
+
end_date_name: "quick-pick-end-date",
|
34
|
+
label: "Custom Date Picker",
|
35
|
+
mode: "range",
|
36
|
+
picker_id: "custom-quick-pick-default-date",
|
37
|
+
placeholder: "mm/dd/yyyy to mm/dd/yyyy",
|
38
|
+
selection_type: "quickpick",
|
39
|
+
start_date_id: "quick-pick-start-date",
|
40
|
+
start_date_name: "quick-pick-start-date"
|
41
|
+
}) %>
|
42
|
+
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import DatePicker from "../_date_picker"
|
3
|
+
|
4
|
+
const DatePickerQuickPickDefaultDate = (props) => (
|
5
|
+
<>
|
6
|
+
<DatePicker
|
7
|
+
allowInput
|
8
|
+
defaultDate="This month"
|
9
|
+
mode="range"
|
10
|
+
pickerId="quick-pick-default-date"
|
11
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
12
|
+
selectionType="quickpick"
|
13
|
+
{...props}
|
14
|
+
/>
|
15
|
+
|
16
|
+
<DatePicker
|
17
|
+
allowInput
|
18
|
+
customQuickPickDates={{
|
19
|
+
dates: [
|
20
|
+
{
|
21
|
+
label: "Last 15 months",
|
22
|
+
value: {
|
23
|
+
timePeriod: "months",
|
24
|
+
amount: 15,
|
25
|
+
},
|
26
|
+
},
|
27
|
+
{
|
28
|
+
label: "First Week of June 2022",
|
29
|
+
value: ["06/01/2022", "06/07/2022"],
|
30
|
+
},
|
31
|
+
],
|
32
|
+
}}
|
33
|
+
defaultDate="First Week of June 2022"
|
34
|
+
label="Custom Date Picker"
|
35
|
+
mode="range"
|
36
|
+
pickerId="custom-quick-pick-default-date"
|
37
|
+
placeholder="mm/dd/yyyy to mm/dd/yyyy"
|
38
|
+
selectionType="quickpick"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
</>
|
42
|
+
)
|
43
|
+
|
44
|
+
export default DatePickerQuickPickDefaultDate
|
@@ -0,0 +1 @@
|
|
1
|
+
To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.
|
@@ -12,6 +12,7 @@ examples:
|
|
12
12
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
13
13
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
14
14
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
15
|
+
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
15
16
|
- date_picker_format: Format
|
16
17
|
- date_picker_disabled: Disabled Dates
|
17
18
|
- date_picker_min_max: Min Max
|
@@ -42,6 +43,7 @@ examples:
|
|
42
43
|
- date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
|
43
44
|
- date_picker_quick_pick_custom: Custom Quick Pick Dates
|
44
45
|
- date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
|
46
|
+
- date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
|
45
47
|
- date_picker_format: Format
|
46
48
|
- date_picker_disabled: Disabled Dates
|
47
49
|
- date_picker_min_max: Min Max
|
@@ -25,3 +25,4 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
|
|
25
25
|
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
|
+
export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
|
@@ -185,7 +185,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
|
|
185
185
|
return {
|
186
186
|
// onReady is a hook from flatpickr that runs when calendar is in a ready state
|
187
187
|
onReady(selectedDates: Array<Date>) {
|
188
|
-
let defaultDateRange
|
188
|
+
let defaultDateRange
|
189
189
|
|
190
190
|
// loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
|
191
191
|
for (const [label, range] of Object.entries(pluginData.ranges)) {
|
@@ -204,10 +204,11 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
|
|
204
204
|
}
|
205
205
|
});
|
206
206
|
|
207
|
+
// check if there is a default date and set the default date range and label for quick pick
|
207
208
|
if (defaultDate) {
|
208
209
|
if (label.toLowerCase() === defaultDate.toLowerCase()) {
|
210
|
+
activeLabel = label
|
209
211
|
defaultDateRange = range
|
210
|
-
defaultDateLabel = label
|
211
212
|
}
|
212
213
|
}
|
213
214
|
}
|
@@ -226,9 +227,9 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
|
|
226
227
|
selectActiveRangeButton(selectedDates);
|
227
228
|
}
|
228
229
|
|
229
|
-
if
|
230
|
+
// set the default date range if there is one and select the active button
|
231
|
+
if (defaultDateRange) {
|
230
232
|
fp.setDate(defaultDateRange, false);
|
231
|
-
activeLabel = defaultDateLabel
|
232
233
|
selectActiveRangeButton(defaultDateRange);
|
233
234
|
}
|
234
235
|
},
|
@@ -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,useEffect,useMemo,useContext,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H 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,useEffect,useMemo,useContext,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-BC6ESsxG.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 Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},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 draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e2,container)=>{e2.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e2,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
|
2
2
|
/*!
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
4
4
|
Licensed under the MIT License (MIT), see
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{r as requireLazysizes}from"./lazysizes-B7xYodB-.js";import{jsx,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{useEffect,createContext,useContext,useState,useCallback,createElement,forwardRef,useRef,useImperativeHandle,Fragment as Fragment$1,useReducer,useMemo,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,F as Flex,I as Icon,n as FlexItem,o as Body$1,p as Caption,A as Avatar,q as domSafeProps,r as Title,S as SectionSeparator,s as DialogContext,t as Modal,u as Draggable,v as TextInput,_ as __awaiter,w as __generator,x as __spread,y as PropTypes,z as Card,E as noop$3,H as PbReactPopover,J as CircleIconButton,K as Button,N as HighchartsReact,O as Badge,Q as joinPresent,U as titleize,V as IconCircle,W as Image,X as Checkbox,Y as Radio}from"./_typeahead-
|
1
|
+
import{r as requireLazysizes}from"./lazysizes-B7xYodB-.js";import{jsx,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{useEffect,createContext,useContext,useState,useCallback,createElement,forwardRef,useRef,useImperativeHandle,Fragment as Fragment$1,useReducer,useMemo,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,F as Flex,I as Icon,n as FlexItem,o as Body$1,p as Caption,A as Avatar,q as domSafeProps,r as Title,S as SectionSeparator,s as DialogContext,t as Modal,u as Draggable,v as TextInput,_ as __awaiter,w as __generator,x as __spread,y as PropTypes,z as Card,E as noop$3,H as PbReactPopover,J as CircleIconButton,K as Button,N as HighchartsReact,O as Badge,Q as joinPresent,U as titleize,V as IconCircle,W as Image,X as Checkbox,Y as Radio}from"./_typeahead-DZmYDBaL.js";import{h as PbTable,j as getAllIcons,D as DateTime$1,a as datePickerHelper,u as useDropdown,o as omitBy,k as isEmpty,m as map,p as partial,l as find$1,n as commonjsGlobal,q as getDefaultExportFromCjs,r as highchartsDarkTheme,s as highchartsTheme,t as noop$4,v as colors,i as PbTextarea}from"./lib-BC6ESsxG.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";var ls_attrchange={exports:{}};(function(module){(function(window2,factory){if(!window2){return}var globalInstall=function(){factory(window2.lazySizes);window2.removeEventListener("lazyunveilread",globalInstall,true)};factory=factory.bind(null,window2,window2.document);if(module.exports){factory(requireLazysizes())}else if(window2.lazySizes){globalInstall()}else{window2.addEventListener("lazyunveilread",globalInstall,true)}})(typeof window!="undefined"?window:0,(function(window2,document2,lazySizes){var addObserver=function(){var connect,disconnect,observer,connected;var lsCfg=lazySizes.cfg;var attributes={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1};var regClassTest="(\\s|^)("+lsCfg.loadedClass;var docElem=document2.documentElement;var setClass=function(target){lazySizes.rAF((function(){lazySizes.rC(target,lsCfg.loadedClass);if(lsCfg.unloadedClass){lazySizes.rC(target,lsCfg.unloadedClass)}lazySizes.aC(target,lsCfg.lazyClass);if(target.style.display=="none"||target.parentNode&&target.parentNode.style.display=="none"){setTimeout((function(){lazySizes.loader.unveil(target)}),0)}}))};var onMutation=function(mutations){var i,len,mutation,target;for(i=0,len=mutations.length;i<len;i++){mutation=mutations[i];target=mutation.target;if(!target.getAttribute(mutation.attributeName)){continue}if(target.localName=="source"&&target.parentNode){target=target.parentNode.querySelector("img")}if(target&®ClassTest.test(target.className)){setClass(target)}}};if(lsCfg.unloadedClass){regClassTest+="|"+lsCfg.unloadedClass}regClassTest+="|"+lsCfg.loadingClass+")(\\s|$)";regClassTest=new RegExp(regClassTest);attributes[lsCfg.srcAttr]=1;attributes[lsCfg.srcsetAttr]=1;if(window2.MutationObserver){observer=new MutationObserver(onMutation);connect=function(){if(!connected){connected=true;observer.observe(docElem,{subtree:true,attributes:true,attributeFilter:Object.keys(attributes)})}};disconnect=function(){if(connected){connected=false;observer.disconnect()}}}else{docElem.addEventListener("DOMAttrModified",function(){var runs;var modifications=[];var callMutations=function(){onMutation(modifications);modifications=[];runs=false};return function(e){if(connected&&attributes[e.attrName]&&e.newValue){modifications.push({target:e.target,attributeName:e.attrName});if(!runs){setTimeout(callMutations);runs=true}}}}(),true);connect=function(){connected=true};disconnect=function(){connected=false}}addEventListener("lazybeforeunveil",disconnect,true);addEventListener("lazybeforeunveil",connect);addEventListener("lazybeforesizes",disconnect,true);addEventListener("lazybeforesizes",connect);connect();removeEventListener("lazybeforeunveil",addObserver)};addEventListener("lazybeforeunveil",addObserver)}))})(ls_attrchange);
|
2
2
|
/**
|
3
3
|
* table-core
|
4
4
|
*
|