@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/datetime-picker/base/example.jsx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/showcase/./ui/components/datetime-picker/base/example.jsx.js"]=function(e){function t(t){for(var r,n,i=t[0],s=t[1],d=t[2],u=0,m=[];u<i.length;u++)n=i[u],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&m.push(o[n][0]),o[n]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(c&&c(t);m.length;)m.shift()();return l.push.apply(l,d||[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],r=!0,i=1;i<a.length;i++){var s=a[i];0!==o[s]&&(r=!1)}r&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var r={},o={58:0,6:0,13:0,14:0,22:0,24:0,26:0,36:0,37:0,56:0,72:0,73:0,79:0,93:0,94:0,96:0,97:0,98:0,103:0,104:0,112:0,117:0,119:0,123:0,125:0,128:0,132:0,134:0,136:0,137:0,138:0,141:0,143:0,146:0,147:0,148:0,151:0,155:0,158:0},l=[];function n(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=r,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(a,r,function(t){return e[t]}.bind(null,r));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],s=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var c=s;return l.push([641,0]),a()}({0:function(e,t){e.exports=React},16:function(e,t){e.exports=ReactDOM},641:function(e,t,a){"use strict";a.r(t),a.d(t,"examples",(function(){return E})),a.d(t,"states",(function(){return g}));var r=a(0),o=a.n(r),l=a(1),n=a.n(l),i=a(2),s=a.n(i),d=a(6),c=a(19),u=a(21),m=a(22),p=a(8),b=a(25),h=a(4),f=a(5),y=a(13);function T(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var r,o,l=[],n=!0,i=!1;try{for(a=a.call(e);!(n=(r=a.next()).done)&&(l.push(r.value),!t||l.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{n||null==a.return||a.return()}finally{if(i)throw o}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return _(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return _(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var D=function(e){var t=e.dateFormat,a=e.dropdown,l=e.dropdownIsOpen,n=e.hasFocus,i=e.hasError,m=e.isOpen,b=e.isRequired,_=e.isDisabled,D=e.listboxData,E=e.dateDefaultValue,g=e.showRequiredIndicator,v=e.hasTooltip,w=e.showTooltip,O=e.fieldLevelDateMessage,S=e.fieldLevelTimeMessage,x=e.showDateFormat,I=Object(r.useRef)(),k=T(Object(r.useState)(""),2),A=k[0],F=k[1],R=T(Object(r.useState)(""),2),M=R[0],q=R[1],j=T(Object(r.useState)(d.d.uniqueId("example-unique-id-")),1)[0],P=T(Object(r.useState)(d.d.uniqueId("example-unique-id-")),1)[0],N=T(Object(r.useState)(d.d.uniqueId("example-unique-id-")),1)[0];Object(r.useEffect)((function(){I.current&&("id"in I.current&&I.current.id&&F(I.current.id),"ariaChecked"in I.current&&I.current.ariaChecked&&q(I.current.textContent))}),[]);var L={"slds-is-open":l};return o.a.createElement("div",{className:"slds-form"},o.a.createElement("fieldset",{className:s()("slds-form-element slds-form-element_compound",{"slds-has-error":i,"slds-datetimepicker_has-tooltip":w})},o.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},b&&o.a.createElement("abbr",{className:"slds-required",title:"required"},"*"," "),"Date and Time"),o.a.createElement("div",{className:"slds-form-element__control"},o.a.createElement("div",{className:"slds-form-element__group"},o.a.createElement("div",{className:"slds-form-element__row"},o.a.createElement(f.b,{formElementClassName:s()("slds-dropdown-trigger slds-dropdown-trigger_click",L),labelContent:"Date",inputId:j,hasRightIcon:!0,dropdown:a,hasError:i,isRequired:b,showRequiredIndicator:g,hasTooltip:!(!v||!O)&&v,showTooltip:!(!w||!O)&&w,fieldLevelMessage:O,inlineMessage:!i&&t,hasHiddenInlineMessage:!x},o.a.createElement(y.a,{id:j,placeholder:"Select a date…",defaultValue:E,"aria-describedby":i&&j+"-error",required:b,disabled:_}),o.a.createElement(h.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:_})),o.a.createElement(c.b,{id:P,"aria-controls":N,"aria-activedescendant":A,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:_,hasTooltip:v&&S?v:null,showTooltip:w&&S?w:null,fieldLevelMessage:S,isOpen:m,rightInputIcon:o.a.createElement(p.UtilityIcon,{symbol:"clock",className:s()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":i,"slds-is-disabled":_}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(u.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:N,snapshot:D,type:"plain",count:6,focusedRef:I}),resultsType:"listbox",hasInteractions:!0,hasFocus:n,value:M})))),i&&o.a.createElement("div",{className:"slds-form-element__help",id:j+"-error"},"Complete this field.")))};D.propTypes={dropdown:n.a.node,dropdownIsOpen:n.a.bool,hasFocus:n.a.bool,isOpen:n.a.bool,isRequired:n.a.bool,hasError:n.a.bool,listboxIsOpen:n.a.bool,listboxData:n.a.object.isRequired,dateDefaultValue:n.a.string,showRequiredIndicator:n.a.bool,isDisabled:n.a.bool,format:n.a.string},D.defaultProps={dropdown:o.a.createElement(b.DatePicker,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1},t.default=o.a.createElement(D,{dateFormat:b.DATE_FORMAT_TEXT,listboxData:m.t});var E=[{id:"small-width-container",label:"Small Width Container",demoStyles:"height: auto; width: 200px; border: 1px dashed #ddd;",storybookStyles:!0,element:o.a.createElement(D,{dropdownIsOpen:!1,listboxData:m.t,dateFormat:b.DATE_FORMAT_TEXT})}],g=[{id:"date-example-text-visible",label:"Date and Time - date example text visible",demoStyles:"height: 6rem;",element:o.a.createElement(D,{dropdown:null,listboxData:m.t,dateFormat:b.DATE_FORMAT_TEXT,showDateFormat:!0})},{id:"date-selection",label:"Date selected",element:o.a.createElement(D,{dropdown:o.a.createElement(b.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:m.t,dateFormat:b.DATE_FORMAT_TEXT})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:o.a.createElement(D,{dropdown:o.a.createElement(b.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:m.v,dateFormat:b.DATE_FORMAT_TEXT})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:o.a.createElement(D,{dropdownIsOpen:!1,isRequired:!0,listboxData:m.t,dateFormat:b.DATE_FORMAT_TEXT})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:o.a.createElement(D,{dropdownIsOpen:!1,hasError:!0,listboxData:m.t})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:o.a.createElement(D,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:m.t})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:o.a.createElement(D,{dropdownIsOpen:!0,listboxData:m.t,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023",dateFormat:b.DATE_FORMAT_TEXT})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:o.a.createElement(D,{dropdown:o.a.createElement(b.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00 am"}),dropdownIsOpen:!1,dateDefaultValue:"Jan 1 2023",isOpen:!0,hasFocus:!0,hasTooltip:!0,showTooltip:!0,listboxData:m.v,fieldLevelTimeMessage:"Format: hh:mm a | ex: 12:00 AM",dateFormat:b.DATE_FORMAT_TEXT})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:o.a.createElement(D,{dropdownIsOpen:!1,listboxData:m.t,isDisabled:!0,dateFormat:b.DATE_FORMAT_TEXT})},{id:"mobile",label:"Mobile",element:o.a.createElement(f.b,{labelContent:"Date",inputId:"date-input-id-mobile"},o.a.createElement(y.a,{id:"date-input-id-mobile",type:"datetime-local"}))}]}});