playbook_ui 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4478 → 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4492
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_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
|
*
|