@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 S})),a.d(t,"states",(function(){return _}));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),f=a(36),h=a(4),b=a(5),y=a(13);function v(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 w(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 w(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 w(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 g=function(e){var t=e.dropdown,a=e.dropdownIsOpen,l=e.hasFocus,n=e.hasError,i=e.isOpen,m=e.isRequired,f=e.isDisabled,w=e.listboxData,g=e.dateDefaultValue,S=e.showRequiredIndicator,_=e.hasTooltip,D=e.showTooltip,x=e.fieldLevelDateMessage,O=e.fieldLevelTimeMessage,E=Object(r.useRef)(),k=v(Object(r.useState)(""),2),I=k[0],T=k[1],q=v(Object(r.useState)(""),2),j=q[0],R=q[1],P=v(Object(r.useState)(d.d.uniqueId("example-unique-id-")),1)[0],M=v(Object(r.useState)(d.d.uniqueId("example-unique-id-")),1)[0],N=v(Object(r.useState)(d.d.uniqueId("example-unique-id-")),1)[0];Object(r.useEffect)((function(){E.current&&("id"in E.current&&E.current.id&&T(E.current.id),"ariaChecked"in E.current&&E.current.ariaChecked&&R(E.current.textContent))}),[]);var L={"slds-is-open":a};return o.a.createElement("div",{className:"slds-form"},o.a.createElement("fieldset",{className:s()("slds-form-element slds-form-element_compound",{"slds-has-error":n,"slds-datetimepicker_has-tooltip":D})},o.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},m&&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(b.b,{formElementClassName:s()("slds-dropdown-trigger slds-dropdown-trigger_click",L),labelContent:"Date",inputId:P,hasRightIcon:!0,dropdown:t,hasError:n,isRequired:m,showRequiredIndicator:S,hasTooltip:!(!_||!x)&&_,showTooltip:!(!D||!x)&&D,fieldLevelMessage:x},o.a.createElement(y.a,{id:P,placeholder:"Select a date…",defaultValue:g,"aria-describedby":n&&P+"-error",required:m,disabled:f}),o.a.createElement(h.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:f})),o.a.createElement(c.b,{id:M,"aria-controls":N,"aria-activedescendant":I,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:n,isDisabled:f,hasTooltip:_&&O?_:null,showTooltip:D&&O?D:null,fieldLevelMessage:O,isOpen:i,rightInputIcon:o.a.createElement(p.UtilityIcon,{symbol:"clock",className:s()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":n,"slds-is-disabled":f}),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:w,type:"plain",count:6,focusedRef:E}),resultsType:"listbox",hasInteractions:!0,hasFocus:l,value:j})))),n&&o.a.createElement("div",{className:"slds-form-element__help",id:P+"-error"},"Complete this field.")))};g.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},g.defaultProps={dropdown:o.a.createElement(f.DatePicker,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1},t.default=o.a.createElement(g,{listboxData:m.t});var S=[{id:"small-width-container",label:"Small Width Container",demoStyles:"height: auto; width: 200px; border: 1px dashed #ddd;",storybookStyles:!0,element:o.a.createElement(g,{dropdownIsOpen:!1,listboxData:m.t})}],_=[{id:"date-selection",label:"Date selected",element:o.a.createElement(g,{dropdown:o.a.createElement(f.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:m.t})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:o.a.createElement(g,{dropdown:o.a.createElement(f.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:m.v})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:o.a.createElement(g,{dropdownIsOpen:!1,isRequired:!0,listboxData:m.t})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:o.a.createElement(g,{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(g,{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(g,{dropdownIsOpen:!0,listboxData:m.t,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023"})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:o.a.createElement(g,{dropdown:o.a.createElement(f.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"})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:o.a.createElement(g,{dropdownIsOpen:!1,listboxData:m.t,isDisabled:!0})}]}});