UNPKG

@sap-ux/ui-components

Version:

SAP UI Components Library

SAP/open-ux-tools

7 lines (5 loc) • 13.7 kB
1
2
3
4
5
6
7
(()=>{(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[191],{"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UIDatePicker/UIDatePicker.scss"(u,r,t){var c=t("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),s=t("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"),e=s(c);e.push([u.id,".ui-DatePicker{display:flex;align-items:center;height:24px;max-height:24px;min-height:24px;margin:0}.ui-DatePicker-toggle{position:relative;margin-left:10px}.ui-DatePicker-toggle input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.ui-DatePicker-toggle input::-webkit-calendar-picker-indicator{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer}body[data-vscode-theme-kind=vscode-dark] .ui-DatePicker-toggle input{color-scheme:dark}",""]),u.exports=e},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"(u){"use strict";u.exports=function(r){var t=[];return t.toString=function(){return this.map(function(s){var e="",_=typeof s[5]!="undefined";return s[4]&&(e+="@supports (".concat(s[4],") {")),s[2]&&(e+="@media ".concat(s[2]," {")),_&&(e+="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {")),e+=r(s),_&&(e+="}"),s[2]&&(e+="}"),s[4]&&(e+="}"),e}).join("")},t.i=function(s,e,_,n,l){typeof s=="string"&&(s=[[null,s,void 0]]);var o={};if(_)for(var a=0;a<this.length;a++){var i=this[a][0];i!=null&&(o[i]=!0)}for(var p=0;p<s.length;p++){var d=[].concat(s[p]);_&&o[d[0]]||(typeof l!="undefined"&&(typeof d[5]=="undefined"||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=l),e&&(d[2]&&(d[1]="@media ".concat(d[2]," {").concat(d[1],"}")),d[2]=e),n&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=n):d[4]="".concat(n)),t.push(d))}},t}},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"(u){"use strict";u.exports=function(r){return r[1]}},"./src/components/UIDatePicker/UIDatePicker.scss"(u,r,t){"use strict";t.r(r),t.d(r,{default:()=>P});var c=t("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),s=t.n(c),e=t("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),_=t.n(e),n=t("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"),l=t.n(n),o=t("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),a=t.n(o),i=t("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),p=t.n(i),d=t("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=t.n(d),h=t("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UIDatePicker/UIDatePicker.scss"),m=t.n(h),w={};for(const v in h)v!=="default"&&(w[v]=()=>h[v]);t.d(r,w);var y={};y.styleTagTransform=f(),y.setAttributes=a(),y.insert=l().bind(null,"head"),y.domAPI=_(),y.insertStyleElement=p();var E=s()(m(),y);const P=m()&&m().locals?m().locals:void 0},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"(u){"use strict";var r=[];function t(e){for(var _=-1,n=0;n<r.length;n++)if(r[n].identifier===e){_=n;break}return _}function c(e,_){for(var n={},l=[],o=0;o<e.length;o++){var a=e[o],i=_.base?a[0]+_.base:a[0],p=n[i]||0,d="".concat(i," ").concat(p);n[i]=p+1;var f=t(d),h={css:a[1],media:a[2],sourceMap:a[3],supports:a[4],layer:a[5]};if(f!==-1)r[f].references++,r[f].updater(h);else{var m=s(h,_);_.byIndex=o,r.splice(o,0,{identifier:d,updater:m,references:1})}l.push(d)}return l}function s(e,_){var n=_.domAPI(_);n.update(e);var l=function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap&&a.supports===e.supports&&a.layer===e.layer)return;n.update(e=a)}else n.remove()};return l}u.exports=function(e,_){_=_||{},e=e||[];var n=c(e,_);return function(o){o=o||[];for(var a=0;a<n.length;a++){var i=n[a],p=t(i);r[p].references--}for(var d=c(o,_),f=0;f<n.length;f++){var h=n[f],m=t(h);r[m].references===0&&(r[m].updater(),r.splice(m,1))}n=d}}},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"(u){"use strict";var r={};function t(s){if(typeof r[s]=="undefined"){var e=document.querySelector(s);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(_){e=null}r[s]=e}return r[s]}function c(s,e){var _=t(s);if(!_)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");_.appendChild(e)}u.exports=c},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"(u){"use strict";function r(t){var c=document.createElement("style");return t.setAttributes(c,t.attributes),t.insert(c,t.options),c}u.exports=r},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"(u,r,t){"use strict";function c(s){var e=t.nc;e&&s.setAttribute("nonce",e)}u.exports=c},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"(u){"use strict";function r(s,e,_){var n="";_.supports&&(n+="@supports (".concat(_.supports,") {")),_.media&&(n+="@media ".concat(_.media," {"));var l=typeof _.layer!="undefined";l&&(n+="@layer".concat(_.layer.length>0?" ".concat(_.layer):""," {")),n+=_.css,l&&(n+="}"),_.media&&(n+="}"),_.supports&&(n+="}");var o=_.sourceMap;o&&typeof btoa!="undefined"&&(n+=` /*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleTagTransform(n,s,e.options)}function t(s){if(s.parentNode===null)return!1;s.parentNode.removeChild(s)}function c(s){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var e=s.insertStyleElement(s);return{update:function(n){r(e,s,n)},remove:function(){t(e)}}}u.exports=c},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"(u){"use strict";function r(t,c){if(c.styleSheet)c.styleSheet.cssText=t;else{for(;c.firstChild;)c.removeChild(c.firstChild);c.appendChild(document.createTextNode(t))}}u.exports=r},"./src/components/UIDatePicker/UIDatePicker.tsx"(u,r,t){"use strict";var c=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(r,"__esModule",{value:!0}),r.UIDatePicker=void 0;const s=c(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=t("./src/components/UIInput/index.tsx"),_=t("./src/components/UIIcon/index.tsx"),n=t("./src/components/Icons.tsx");t("./src/components/UIDatePicker/UIDatePicker.scss");class l extends s.default.Component{constructor(a){var i;super(a),this.state={value:""},this.dateRegex=/^\d{4}-\d{2}-\d{2}$/,this.dateTimeRegex=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/,this.state.value=(i=a.defaultValue)!=null?i:"",this.onInputChange=this.onInputChange.bind(this),this.onPickerChange=this.onPickerChange.bind(this)}onInputChange(a,i=""){var p,d;i=i.trim(),(d=(p=this.props).onChange)==null||d.call(p,a,i),this.setState({value:i})}onPickerChange(a){var p,d;let i=a.target.value;!this.props.dateOnly&&!this.dateTimeRegex.test(i)&&(i=`${a.target.value}:00`),(d=(p=this.props).onChange)==null||d.call(p,a,i),this.setState({value:i})}render(){const a=this.dateRegex.test(this.state.value)||this.dateTimeRegex.test(this.state.value);return s.default.createElement("div",{className:"ui-DatePicker",onKeyDown:this.props.onKeyDown,onClick:this.props.onClick},s.default.createElement(e.UITextInput,{componentRef:this.props.componentRef,errorMessage:this.props.errorMessage,value:this.state.value,onChange:this.onInputChange}),s.default.createElement("div",{className:"ui-DatePicker-toggle"},s.default.createElement(_.UIIcon,{iconName:n.UiIcons.Calendar}),s.default.createElement("input",{type:this.props.dateOnly?"date":"datetime-local",step:"1",value:a?this.state.value:"",onChange:this.onPickerChange})))}}r.UIDatePicker=l,l.__docgenInfo={description:`UIDatePicker component. @exports @class {UIDatePicker} @extends {React.Component<UIDatePickerProps>}`,methods:[],displayName:"UIDatePicker",props:{componentRef:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<ITextField>",elements:[{name:"ITextField"}]},description:""},errorMessage:{required:!1,tsType:{name:"union",raw:"string | JSX.Element",elements:[{name:"string"},{name:"JSX.Element"}]},description:""},defaultValue:{required:!1,tsType:{name:"string"},description:""},dateOnly:{required:!1,tsType:{name:"boolean"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: string) => void",signature:{arguments:[{type:{name:"ReactFormEvent",raw:"React.FormEvent<HTMLInputElement | HTMLTextAreaElement>",elements:[{name:"union",raw:"HTMLInputElement | HTMLTextAreaElement",elements:[{name:"HTMLInputElement"},{name:"HTMLTextAreaElement"}]}]},name:"event"},{type:{name:"string"},name:"newValue"}],return:{name:"void"}}},description:""},onKeyDown:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.KeyboardEvent) => void",signature:{arguments:[{type:{name:"ReactKeyboardEvent",raw:"React.KeyboardEvent"},name:"event"}],return:{name:"void"}}},description:""},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.MouseEvent) => void",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent"},name:"event"}],return:{name:"void"}}},description:""}}}},"./src/components/UIDatePicker/index.tsx"(u,r,t){"use strict";var c=this&&this.__createBinding||(Object.create?(function(e,_,n,l){l===void 0&&(l=n);var o=Object.getOwnPropertyDescriptor(_,n);(!o||("get"in o?!_.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return _[n]}}),Object.defineProperty(e,l,o)}):(function(e,_,n,l){l===void 0&&(l=n),e[l]=_[n]})),s=this&&this.__exportStar||function(e,_){for(var n in e)n!=="default"&&!Object.prototype.hasOwnProperty.call(_,n)&&c(_,e,n)};Object.defineProperty(r,"__esModule",{value:!0}),s(t("./src/components/UIDatePicker/UIDatePicker.tsx"),r)},"./stories/UIDatePicker.story.tsx"(u,r,t){"use strict";var c=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(r,"__esModule",{value:!0}),r.defaultUsage=void 0;const s=c(t("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),e=t("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),_=t("./src/components/UIDatePicker/index.tsx");r.default={title:"Basic Inputs/DatePicker"};const n={childrenGap:40},l=()=>s.default.createElement(e.Stack,{tokens:n,style:{width:300}},s.default.createElement(e.Stack,{tokens:{childrenGap:16}},s.default.createElement(e.Text,{variant:"large",className:"textColor"},"UIDatePicker"),s.default.createElement(_.UIDatePicker,{defaultValue:"2018-06-12T19:30"})),s.default.createElement(e.Stack,{tokens:{childrenGap:16}},s.default.createElement(e.Text,{variant:"large",className:"textColor"},"UIDatePicker with only date"),s.default.createElement(_.UIDatePicker,{defaultValue:"2020-07-21",dateOnly:!0})));r.defaultUsage=l}}]);})();