@secondstaxorg/sscomp 1.0.9 → 1.1.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.
@@ -4,19 +4,31 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import styled from "styled-components";
6
6
  import theme from "../../theme";
7
- export var DatePickerComp = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n position: absolute;\n width: 100%;\n /* height: 421px; */\n background-color: ", ";\n box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);\n top: 58px;\n z-index: 10;\n padding: 16px;\n border-radius: 16px;\n\n .calendar_head {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 19px;\n padding: 0.5rem 1rem;\n background-color: ", ";\n\n svg {\n cursor: pointer;\n }\n\n .calendar_head_month_year {\n display: flex;\n flex-direction: row;\n font-size: 1rem;\n\n .calendar_head_month_name {\n margin-right: 0.5rem;\n }\n }\n }\n\n .datepicker_month {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .datepicker_main {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 0 0 0;\n align-items: center;\n\n table {\n width: 100%;\n display: table;\n height: 80%;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead {\n width: 100%;\n }\n\n tbody {\n width: 100%;\n\n tr {\n height: 35px;\n\n td {\n }\n }\n }\n }\n\n ", "\n ", "\n }\n\n .date-picker_right {\n grid-area: 1 / 9 / 2 / 10;\n }\n"], ["\n \n position: absolute;\n width: 100%;\n /* height: 421px; */\n background-color: ", ";\n box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);\n top: 58px;\n z-index: 10;\n padding: 16px;\n border-radius: 16px;\n\n .calendar_head {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 19px;\n padding: 0.5rem 1rem;\n background-color: ", ";\n\n svg {\n cursor: pointer;\n }\n\n .calendar_head_month_year {\n display: flex;\n flex-direction: row;\n font-size: 1rem;\n\n .calendar_head_month_name {\n margin-right: 0.5rem;\n }\n }\n }\n\n .datepicker_month {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .datepicker_main {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 0 0 0;\n align-items: center;\n\n table {\n width: 100%;\n display: table;\n height: 80%;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead {\n width: 100%;\n }\n\n tbody {\n width: 100%;\n\n tr {\n height: 35px;\n\n td {\n }\n }\n }\n }\n\n ", "\n ", "\n }\n\n .date-picker_right {\n grid-area: 1 / 9 / 2 / 10;\n }\n"])), theme.colors.white, theme.colors["white"], function (_a) {
7
+ export var DatePickerComp = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n position: absolute;\n width: ", ";\n /* height: 421px; */\n background-color: ", ";\n box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);\n top: 58px;\n z-index: 10;\n padding: 16px;\n border-radius: 16px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .calendar_head {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 19px;\n padding: 0.5rem 1rem;\n background-color: ", ";\n\n svg {\n cursor: pointer;\n }\n\n .calendar_head_month_year {\n display: flex;\n flex-direction: row;\n font-size: 1rem;\n\n .calendar_head_month_name {\n margin-right: 0.5rem;\n }\n }\n }\n\n .datepicker_month {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .datepicker_main {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 0 0 0;\n align-items: center;\n\n table {\n width: 100%;\n display: table;\n height: 80%;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead {\n width: 100%;\n }\n\n tbody {\n width: 100%;\n\n tr {\n height: 35px;\n\n td {\n }\n }\n }\n }\n\n ", "\n ", "\n }\n\n .date-picker_right {\n grid-area: 1 / 9 / 2 / 10;\n }\n"], ["\n \n position: absolute;\n width: ", ";\n /* height: 421px; */\n background-color: ", ";\n box-shadow: 0 0 24px rgba(0, 0, 0, 0.04);\n top: 58px;\n z-index: 10;\n padding: 16px;\n border-radius: 16px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .calendar_head {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n height: 19px;\n padding: 0.5rem 1rem;\n background-color: ", ";\n\n svg {\n cursor: pointer;\n }\n\n .calendar_head_month_year {\n display: flex;\n flex-direction: row;\n font-size: 1rem;\n\n .calendar_head_month_name {\n margin-right: 0.5rem;\n }\n }\n }\n\n .datepicker_month {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n\n .datepicker_main {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 0 0 0;\n align-items: center;\n\n table {\n width: 100%;\n display: table;\n height: 80%;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead {\n width: 100%;\n }\n\n tbody {\n width: 100%;\n\n tr {\n height: 35px;\n\n td {\n }\n }\n }\n }\n\n ", "\n ", "\n }\n\n .date-picker_right {\n grid-area: 1 / 9 / 2 / 10;\n }\n"])), function (_a) {
8
+ var range = _a.range;
9
+ return (range ? "650px" : "300px");
10
+ }, theme.colors.white, theme.colors["white"], function (_a) {
8
11
  var calendarPosition = _a.calendarPosition;
9
12
  return calendarPosition.topOffset < 150 ? "bottom: 421px;" : "top: -100px;";
10
13
  }, function (_a) {
11
14
  var calendarPosition = _a.calendarPosition;
12
15
  return calendarPosition.leftOffset < 150 ? "right: 0px;" : "left: 0px;";
13
16
  });
14
- export var DateCellContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n :hover {\n border-color: black;\n }\n ", "\n ", "\n \n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n }\n\n .month {\n color: grey;\n }\n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n :hover {\n border-color: black;\n }\n ", "\n ", "\n \n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n }\n\n .month {\n color: grey;\n }\n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"])), function (_a) {
17
+ export var DateCellContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n ", "\n :hover {\n border-color: black;\n }\n ", "\n ", "\n ", "\n *{\n ", "\n }\n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n &.invalid {\n pointer-events: none;\n }\n }\n\n .month {\n color: grey;\n }\n\n \n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n margin: 0.3rem;\n height: 2rem;\n width: 2rem;\n border-bottom:1px solid;\n border-color:transparent;\n ", "\n :hover {\n border-color: black;\n }\n ", "\n ", "\n ", "\n *{\n ", "\n }\n p{\n font-family: \"Circular Book\", sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 17px;\n ", "\n &.invalid {\n pointer-events: none;\n }\n }\n\n .month {\n color: grey;\n }\n\n \n\n .today {\n color: ", ";\n font-weight: 900;\n }\n"])), function (_a) {
18
+ var fallsWithinRange = _a.fallsWithinRange;
19
+ return fallsWithinRange && "background-color: ".concat(theme.colors["black-100"]);
20
+ }, function (_a) {
15
21
  var selected = _a.selected;
16
22
  return selected && "background-color: ".concat(theme.colors["black"], ";");
17
23
  }, function (_a) {
18
24
  var selected = _a.selected;
19
25
  return selected && "border-radius: 50%;";
26
+ }, function (_a) {
27
+ var notSelectable = _a.notSelectable;
28
+ return notSelectable && "cursor: not-allowed !important;";
29
+ }, function (_a) {
30
+ var selected = _a.selected;
31
+ return selected && "color:white !important";
20
32
  }, function (_a) {
21
33
  var selected = _a.selected;
22
34
  return selected && "color:white";
@@ -25,6 +37,9 @@ export var DateCellContainer = styled.div(templateObject_2 || (templateObject_2
25
37
  return selected ? "white" : "".concat(theme.colors["black"]);
26
38
  });
27
39
  export var TimePickerComp = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 8px;\n grid-row-gap: 0;\n padding: 10px;\n margin-top: 12px;\n border-top: 1px solid ", ";\n\n .timepicker_hours {\n \n }\n \n .tsc ul{\n border:1px solid ", ";\n border-radius:8px;\n }\n\n ul {\n height: 64px;\n overflow-y: scroll;\n padding: 2px;\n }\n li {\n cursor: pointer;\n list-style: none;\n padding: 3px;\n border-radius: 1px;\n\n &.selected {\n background-color: ", ";\n color: white;\n }\n\n &:hover {\n background-color: ", ";\n color: white;\n }\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 8px;\n grid-row-gap: 0;\n padding: 10px;\n margin-top: 12px;\n border-top: 1px solid ", ";\n\n .timepicker_hours {\n \n }\n \n .tsc ul{\n border:1px solid ", ";\n border-radius:8px;\n }\n\n ul {\n height: 64px;\n overflow-y: scroll;\n padding: 2px;\n }\n li {\n cursor: pointer;\n list-style: none;\n padding: 3px;\n border-radius: 1px;\n\n &.selected {\n background-color: ", ";\n color: white;\n }\n\n &:hover {\n background-color: ", ";\n color: white;\n }\n }\n"])), theme.colors["neutral-200"], theme.colors["neutral-200"], theme.colors["neutral-900"], theme.colors["neutral-400"]);
28
- export var DatePickerContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n position: relative;\n width: 100%;\n height: 50px;\n background: white;\n .date_picker_input_holder {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50px;\n border: 1px solid #d2ddee;\n border-radius: 8px;\n overflow: hidden;\n transition: 300ms ease-out;\n\n &:focus,&:focus-within{\n border: 1px solid ", ";\n outline: none;\n }\n &:hover {\n border: 1px solid ", ";\n }\n &.error{\n border: 1px solid ", ";\n }\n\n .date_picker_input_holder_icon {\n display: flex;\n cursor: pointer;\n padding: 13px 16px;\n }\n\n .date-time-parent-wrapper {\n height: 100%;\n width: 100%;\n }\n\n .date-picker-wrapper {\n position: relative;\n height: 100%;\n display: flex;\n width: 100%;\n svg {\n width: 20px;\n height: 22px;\n position: absolute;\n pointer-events: none;\n background-color: white;\n z-index: 100;\n /* center element */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n input {\n border: none;\n height: 100%;\n width: 95%;\n font-family: \"Circular Book\", sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n padding: 13px 16px;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &#datePickerTime {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n\n width: 24px;\n height: 24px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &.showTime {\n visibility: visible;\n width: 30px;\n height: 100%;\n z-index: 200;\n }\n }\n }\n }\n"], ["\n display: flex;\n position: relative;\n width: 100%;\n height: 50px;\n background: white;\n .date_picker_input_holder {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50px;\n border: 1px solid #d2ddee;\n border-radius: 8px;\n overflow: hidden;\n transition: 300ms ease-out;\n\n &:focus,&:focus-within{\n border: 1px solid ", ";\n outline: none;\n }\n &:hover {\n border: 1px solid ", ";\n }\n &.error{\n border: 1px solid ", ";\n }\n\n .date_picker_input_holder_icon {\n display: flex;\n cursor: pointer;\n padding: 13px 16px;\n }\n\n .date-time-parent-wrapper {\n height: 100%;\n width: 100%;\n }\n\n .date-picker-wrapper {\n position: relative;\n height: 100%;\n display: flex;\n width: 100%;\n svg {\n width: 20px;\n height: 22px;\n position: absolute;\n pointer-events: none;\n background-color: white;\n z-index: 100;\n /* center element */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n input {\n border: none;\n height: 100%;\n width: 95%;\n font-family: \"Circular Book\", sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n padding: 13px 16px;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &#datePickerTime {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n\n width: 24px;\n height: 24px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &.showTime {\n visibility: visible;\n width: 30px;\n height: 100%;\n z-index: 200;\n }\n }\n }\n }\n"])), theme.colors["primary-500"], theme.colors["primary-300"], theme.colors["error-500"], theme.colors["neutral-200"]);
40
+ export var DatePickerContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n position: relative;\n width: ", ";\n height: 50px;\n background: white;\n .date_picker_input_holder {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50px;\n border: 1px solid #d2ddee;\n border-radius: 8px;\n overflow: hidden;\n transition: 300ms ease-out;\n padding: 2px 4px;\n\n &:focus,&:focus-within{\n border: 1px solid ", ";\n outline: none;\n }\n &:hover {\n border: 1px solid ", ";\n }\n &.error{\n border: 1px solid ", ";\n }\n\n .date_picker_input_holder_icon {\n display: flex;\n cursor: pointer;\n padding: 13px 16px;\n }\n\n .date-time-parent-wrapper {\n height: 100%;\n width: 100%;\n }\n\n .date-picker-wrapper {\n position: relative;\n height: 100%;\n display: flex;\n width: 100%;\n svg {\n width: 20px;\n height: 22px;\n position: absolute;\n pointer-events: none;\n background-color: white;\n z-index: 100;\n /* center element */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n input {\n border: none;\n height: 100%;\n width: 95%;\n font-family: \"Circular Book\", sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n \n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &#datePickerTime {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n\n width: 24px;\n height: 24px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &.showTime {\n visibility: visible;\n width: 30px;\n height: 100%;\n z-index: 200;\n }\n }\n }\n }\n"], ["\n display: flex;\n position: relative;\n width: ", ";\n height: 50px;\n background: white;\n .date_picker_input_holder {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 50px;\n border: 1px solid #d2ddee;\n border-radius: 8px;\n overflow: hidden;\n transition: 300ms ease-out;\n padding: 2px 4px;\n\n &:focus,&:focus-within{\n border: 1px solid ", ";\n outline: none;\n }\n &:hover {\n border: 1px solid ", ";\n }\n &.error{\n border: 1px solid ", ";\n }\n\n .date_picker_input_holder_icon {\n display: flex;\n cursor: pointer;\n padding: 13px 16px;\n }\n\n .date-time-parent-wrapper {\n height: 100%;\n width: 100%;\n }\n\n .date-picker-wrapper {\n position: relative;\n height: 100%;\n display: flex;\n width: 100%;\n svg {\n width: 20px;\n height: 22px;\n position: absolute;\n pointer-events: none;\n background-color: white;\n z-index: 100;\n /* center element */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n input {\n border: none;\n height: 100%;\n width: 95%;\n font-family: \"Circular Book\", sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n \n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n\n &#datePickerTime {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n\n width: 24px;\n height: 24px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &.showTime {\n visibility: visible;\n width: 30px;\n height: 100%;\n z-index: 200;\n }\n }\n }\n }\n"])), function (_a) {
41
+ var width = _a.width;
42
+ return (width ? "".concat(width, "px") : "100%");
43
+ }, theme.colors["primary-500"], theme.colors["primary-300"], theme.colors["error-500"], theme.colors["neutral-200"]);
29
44
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
30
45
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/DatePicker/style.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,KAAK,MAAM,aAAa,CAAC;AAGhC,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,+4CAGtC,2FAKoB,EAAkB,iUAchB,EAAqB,w1BAsDvC,EACsE,QACtE,EACkE,wEAMvE,KA7EqB,KAAK,CAAC,MAAM,CAAC,KAAK,EAchB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAsDvC,UAAC,EAAkB;QAAjB,gBAAgB,sBAAA;IAChB,OAAA,gBAAgB,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc;AAApE,CAAoE,EACtE,UAAC,EAAkB;QAAjB,gBAAgB,sBAAA;IAChB,OAAA,gBAAgB,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY;AAAhE,CAAgE,CAMvE,CAAC;AAMF,MAAM,CAAC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,2mBAAgB,0SAevD,EAA2E,MAC3E,EAAmD,wIAOjD,EAAyC,uEAQlC,EACwC,iCAGpD,KApBG,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,4BAAqB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAG;AAAzD,CAAyD,EAC3E,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,qBAAqB;AAAjC,CAAiC,EAOjD,UAAC,EAAU;QAAT,QAAQ,cAAA;IAAM,OAAA,QAAQ,IAAI,aAAa;AAAzB,CAAyB,EAQlC,UAAC,EAAY;QAAV,QAAQ,cAAA;IAClB,OAAA,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAE;AAA/C,CAA+C,CAGpD,CAAC;AAEF,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,gvBAAA,wMAQd,EAA2B,8EAO9B,EAA2B,2QAgBpB,EAA2B,sFAK3B,EAA2B,8CAIxD,KAhCyB,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,EAO9B,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,EAgBpB,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,EAK3B,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAIxD,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,07DAAA,8XAiBnB,EAA2B,yEAI3B,EAA2B,kDAG3B,EAAyB,84BA4ClC,EAA2B,weA6B3C,KAhFyB,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,EAI3B,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,EAG3B,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EA4ClC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CA6B3C,CAAC"}
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/DatePicker/style.ts"],"names":[],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export interface CalendarProps {
3
- onDateChange: (date: Date) => void;
3
+ onDateChange: (date: Date, range?: boolean, fromDate?: Date, toDate?: Date) => void;
4
4
  selectedDate: Date;
5
5
  minDate?: Date;
6
6
  maxDate?: Date;
@@ -19,12 +19,17 @@ export interface CalendarProps {
19
19
  parentRef: React.RefObject<HTMLDivElement>;
20
20
  showCalendar?: (x: boolean) => void;
21
21
  onTimeChange?: (hour: string, minute: string, ampm: string) => void;
22
+ width?: number;
23
+ range?: boolean;
24
+ fromDate?: string;
25
+ toDate?: string;
26
+ dateObject: dayInDate;
22
27
  }
23
28
  export interface TimePickerProps {
24
29
  onTimeChange?: (hour: string, minute: string, ampm: string) => void;
25
30
  }
26
31
  export interface DatePickerProps {
27
- onDateChange: (date: Date) => void;
32
+ onDateChange: (date: Date | string, fromDate?: Date, toDate?: Date) => void;
28
33
  selectedDate: Date;
29
34
  minDate?: Date;
30
35
  maxDate?: Date;
@@ -37,24 +42,35 @@ export interface DatePickerProps {
37
42
  timeFormat?: string;
38
43
  dateRange?: DateRange;
39
44
  active: boolean;
45
+ width?: number;
46
+ range?: boolean;
40
47
  }
41
48
  interface DateRange {
42
49
  startDate: Date;
43
50
  endDate: Date;
44
51
  }
45
52
  export interface dayInDate {
46
- Month: string;
47
- DayName: string;
48
- Day: number;
53
+ month: string;
54
+ dayName: string;
55
+ day: number;
49
56
  isToday: boolean;
50
57
  isMonth: boolean;
51
- Year: number;
52
- Date: Date;
58
+ year: number;
59
+ date: Date;
60
+ fromDate?: Date;
61
+ toDate?: Date;
62
+ range?: boolean;
53
63
  }
54
64
  export interface CellProps extends React.HTMLAttributes<HTMLDivElement> {
55
65
  day: dayInDate;
56
66
  selectDate: (a: dayInDate) => void;
57
67
  onDateChange: (date: Date) => void;
68
+ fromDate?: string;
69
+ toDate?: string;
70
+ dateSelected?: dayInDate;
71
+ startCalendar: boolean;
72
+ endCalendar: boolean;
73
+ dateObject: dayInDate;
58
74
  }
59
75
  export interface CalendarPositionProps {
60
76
  topOffset: number;
@@ -1 +1 @@
1
- {"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/type.ts"],"names":[],"mappings":";AAAA,MAAM,WAAW,aAAa;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAC,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvE;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvE;AAED,MAAM,WAAW,eAAe;IAC5B,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,SAAS;IACf,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;CACd;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE,GAAG,EAAE,SAAS,CAAC;IACf,UAAU,EAAE,CAAC,CAAC,EAAC,SAAS,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACtB"}
1
+ {"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/type.ts"],"names":[],"mappings":"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"}