@laerdal/life-react-components 3.2.2-dev.2 → 3.2.3-dev.1
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.
|
@@ -50,6 +50,7 @@ var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
50
50
|
justifyContent: 'center'
|
|
51
51
|
},
|
|
52
52
|
children: [!yearPickerMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
53
|
+
type: "button",
|
|
53
54
|
className: "react-datepicker__navigation react-datepicker__navigation--previous",
|
|
54
55
|
onClick: handleDecreaseMonth,
|
|
55
56
|
disabled: prevMonthButtonDisabled
|
|
@@ -66,6 +67,7 @@ var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
66
67
|
size: "24px"
|
|
67
68
|
})]
|
|
68
69
|
}), !yearPickerMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
70
|
+
type: "button",
|
|
69
71
|
className: "react-datepicker__navigation react-datepicker__navigation--next",
|
|
70
72
|
onClick: handleIncreaseMonth,
|
|
71
73
|
disabled: nextMonthButtonDisabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n </button>\n )}\n <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n </HeaderLabelContainer>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n </button>\n )}\n </div>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAoBnC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,giBAc1BC,cAAM,CAACC,WAAW,EAG3BC,gCAAwB,EAIbF,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,EAMlBH,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,CAGhC;AAEM,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDa,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACZ,cAAc,iBACd;QAAQ,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN;MAAwB,
|
|
1
|
+
{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n </button>\n )}\n <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n </HeaderLabelContainer>\n {!yearPickerMode && (\n <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n </button>\n )}\n </div>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAoBnC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,giBAc1BC,cAAM,CAACC,WAAW,EAG3BC,gCAAwB,EAIbF,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,EAMlBH,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,CAGhC;AAEM,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDa,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACZ,cAAc,iBACd;QAAQ,IAAI,EAAC,QAAQ;QAAC,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN;MAAwB,EAEvK,eACD,sBAAC,oBAAoB;QAAC,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAc,CAAC;QAAA,CAAC;QAAA,wBACtE;UAAK,SAAS,EAAC,iCAAiC;UAAA,oBAAKE,MAAM,CAACR,IAAI,CAACW,QAAQ,EAAE,CAAC,cAAIX,IAAI,CAACmB,WAAW,EAAE;QAAA,EAAS,EAC1Gb,cAAc,gBAAG,qBAAC,kBAAW,CAAC,WAAW;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,qBAAC,kBAAW,CAAC,aAAa;UAAC,IAAI,EAAC;QAAM,EAAG;MAAA,EAChF,EACtB,CAACA,cAAc,iBACd;QAAQ,IAAI,EAAC,QAAQ;QAAC,SAAS,EAAC,iEAAiE;QAAC,OAAO,EAAEO,mBAAoB;QAAC,QAAQ,EAAET;MAAwB,EAEnK;IAAA;EACG,EACL;AAEP,CAAC;AAAC;AAAA;EA1GAJ,IAAI;EAGJoB,iBAAiB;EAGjBjB,uBAAuB;EACvBC,uBAAuB;EAGvBiB,sBAAsB;EACtBC,sBAAsB;EACtBhB,cAAc;AAAA"}
|
|
@@ -45,6 +45,7 @@ export var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
45
45
|
justifyContent: 'center'
|
|
46
46
|
},
|
|
47
47
|
children: [!yearPickerMode && /*#__PURE__*/_jsx("button", {
|
|
48
|
+
type: "button",
|
|
48
49
|
className: "react-datepicker__navigation react-datepicker__navigation--previous",
|
|
49
50
|
onClick: handleDecreaseMonth,
|
|
50
51
|
disabled: prevMonthButtonDisabled
|
|
@@ -61,6 +62,7 @@ export var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
|
|
|
61
62
|
size: "24px"
|
|
62
63
|
})]
|
|
63
64
|
}), !yearPickerMode && /*#__PURE__*/_jsx("button", {
|
|
65
|
+
type: "button",
|
|
64
66
|
className: "react-datepicker__navigation react-datepicker__navigation--next",
|
|
65
67
|
onClick: handleIncreaseMonth,
|
|
66
68
|
disabled: nextMonthButtonDisabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n </button>\n )}\n <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n </HeaderLabelContainer>\n {!yearPickerMode && (\n <button className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n </button>\n )}\n </div>\n </>\n );\n};\n"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,UAAU;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,wBAAwB,QAAQ,WAAW;AACpD,SAASC,MAAM,QAAQ,WAAW;AAAC;AAAA;AAAA;AAoBnC,IAAMC,oBAAoB,GAAGH,MAAM,CAACI,GAAG,khBAc1BF,MAAM,CAACG,WAAW,EAG3BJ,wBAAwB,EAIbC,MAAM,CAACI,WAAW,EAGlBJ,MAAM,CAACI,WAAW,EAMlBJ,MAAM,CAACI,WAAW,EAGlBJ,MAAM,CAACI,WAAW,CAGhC;AAED,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDZ,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpBR,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLgB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACX,cAAc,iBACd;QAAQ,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN;MAAwB,
|
|
1
|
+
{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n date: Date;\n changeYear(year: number): void;\n changeMonth(month: number): void;\n customHeaderCount: number;\n decreaseMonth(): void;\n increaseMonth(): void;\n prevMonthButtonDisabled: boolean;\n nextMonthButtonDisabled: boolean;\n decreaseYear(): void;\n increaseYear(): void;\n prevYearButtonDisabled: boolean;\n nextYearButtonDisabled: boolean;\n yearPickerMode: boolean;\n setYearPickerMode(val: boolean): void;\n setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 10px;\n cursor: pointer;\n\n button {\n background: transparent;\n padding: 0px;\n width: auto;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n\n ${CommonInteractionStyling}\n\n &:hover {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n &:active {\n div {\n color: ${COLORS.primary_600} !important;\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport const DatepickerFieldHeader = ({\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n setYearPickerMode,\n yearPickerMode,\n setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n const handleDecreaseMonth = () => {\n let previousMonth = date.getMonth() - 1;\n if (previousMonth < 0) previousMonth = months.length - 1;\n setActiveMonthPage(previousMonth);\n decreaseMonth();\n };\n\n const handleIncreaseMonth = () => {\n let nextMonth = date.getMonth() + 1;\n if (nextMonth >= months.length - 1) nextMonth = 0;\n setActiveMonthPage(nextMonth);\n increaseMonth();\n };\n\n React.useEffect(() => {\n setActiveMonthPage(date.getMonth());\n }, [date]);\n\n return (\n <>\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}>\n {!yearPickerMode && (\n <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n </button>\n )}\n <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n </HeaderLabelContainer>\n {!yearPickerMode && (\n <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n </button>\n )}\n </div>\n </>\n );\n};\n"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,UAAU;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,wBAAwB,QAAQ,WAAW;AACpD,SAASC,MAAM,QAAQ,WAAW;AAAC;AAAA;AAAA;AAoBnC,IAAMC,oBAAoB,GAAGH,MAAM,CAACI,GAAG,khBAc1BF,MAAM,CAACG,WAAW,EAG3BJ,wBAAwB,EAIbC,MAAM,CAACI,WAAW,EAGlBJ,MAAM,CAACI,WAAW,EAMlBJ,MAAM,CAACI,WAAW,EAGlBJ,MAAM,CAACI,WAAW,CAGhC;AAED,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDZ,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpBR,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLgB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACX,cAAc,iBACd;QAAQ,IAAI,EAAC,QAAQ;QAAC,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN;MAAwB,EAEvK,eACD,MAAC,oBAAoB;QAAC,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAc,CAAC;QAAA,CAAC;QAAA,wBACtE;UAAK,SAAS,EAAC,iCAAiC;UAAA,oBAAKE,MAAM,CAACR,IAAI,CAACW,QAAQ,EAAE,CAAC,cAAIX,IAAI,CAACkB,WAAW,EAAE;QAAA,EAAS,EAC1GZ,cAAc,gBAAG,KAAC,WAAW,CAAC,WAAW;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,KAAC,WAAW,CAAC,aAAa;UAAC,IAAI,EAAC;QAAM,EAAG;MAAA,EAChF,EACtB,CAACA,cAAc,iBACd;QAAQ,IAAI,EAAC,QAAQ;QAAC,SAAS,EAAC,iEAAiE;QAAC,OAAO,EAAEO,mBAAoB;QAAC,QAAQ,EAAET;MAAwB,EAEnK;IAAA;EACG,EACL;AAEP,CAAC;AAAC;EA1GAJ,IAAI;EAGJmB,iBAAiB;EAGjBhB,uBAAuB;EACvBC,uBAAuB;EAGvBgB,sBAAsB;EACtBC,sBAAsB;EACtBf,cAAc;AAAA"}
|