orcs-design-system 3.2.7 → 3.2.9
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.
|
@@ -2,6 +2,7 @@ import React, { useState } from "react";
|
|
|
2
2
|
import DatePicker from ".";
|
|
3
3
|
import Box from "../Box";
|
|
4
4
|
import Spacer from "../Spacer";
|
|
5
|
+
import moment from "moment";
|
|
5
6
|
import "react-dates/lib/css/_datepicker.css";
|
|
6
7
|
import "react-dates/initialize";
|
|
7
8
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -85,8 +86,11 @@ const DateRange = () => {
|
|
|
85
86
|
});
|
|
86
87
|
};
|
|
87
88
|
const ShowClearDates = () => {
|
|
88
|
-
const [date, setDate] = useState(
|
|
89
|
-
const [dates, setDates] = useState({
|
|
89
|
+
const [date, setDate] = useState(moment()); // Default date for single DatePicker
|
|
90
|
+
const [dates, setDates] = useState({
|
|
91
|
+
startDate: moment(),
|
|
92
|
+
endDate: moment()
|
|
93
|
+
}); // Default dates for range DatePicker
|
|
90
94
|
const [focused1, setFocused1] = useState(null);
|
|
91
95
|
const [focused2, setFocused2] = useState(null);
|
|
92
96
|
const onDatesChange = _ref2 => {
|
|
@@ -73,7 +73,16 @@ const DatePickerLabel = styled.label.withConfig({
|
|
|
73
73
|
const DatePickerContainer = styled.div.withConfig({
|
|
74
74
|
displayName: "DatePicker__DatePickerContainer",
|
|
75
75
|
componentId: "sc-15292wq-1"
|
|
76
|
-
})([".SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center
|
|
76
|
+
})([".SingleDatePicker{width:", ";}.DateRangePicker{width:", ";}.SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:", ";background:none;position:relative;}.DateRangePickerInput_arrow_svg path{fill:", ";}.DateRangePickerInput_arrow{display:none;}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:", ";font-weight:", ";z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}&::placeholder{color:", ";}}.DateInput_input[disabled]{background:", ";color:", ";}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DateRangePickerInput .DateInput:first-child .DateInput_input{border-radius:", ";}.DateRangePickerInput .DateInput:last-child .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput .DateInput_input__disabled{border-radius:", ";}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{padding-right:0;.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{display:none;}.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .SingleDatePickerInput_clearDate,.DateInput:has(.DateInput_input:not([value=\"\"])) ~ .DateRangePickerInput_clearDates{display:flex;}}.SingleDatePickerInput__showClearDate,.DateRangePickerInput__showClearDates{display:flex;align-items:center;}.DateRangePickerInput__showClearDates .DateInput:first-child:has(.DateInput_input:not([value=\"\"])) ~ .DateInput .DateInput_input,.DateRangePickerInput__showClearDates .DateInput:first-child ~ .DateInput .DateInput_input:not([value=\"\"]){border-radius:", ";}.SingleDatePickerInput_clearDate,.DateRangePickerInput_clearDates{background-color:transparent;border-radius:", ";height:", ";display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:auto;right:0;transform:none;&:hover,&:focus{outline:0;svg path{fill:", ";}}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], props => props.width ? props.width : "134px", props => {
|
|
77
|
+
if (props.width) {
|
|
78
|
+
if (props.width.includes("px")) {
|
|
79
|
+
const widthValue = parseInt(props.width, 10);
|
|
80
|
+
return "".concat(widthValue * 2, "px");
|
|
81
|
+
}
|
|
82
|
+
return props.width;
|
|
83
|
+
}
|
|
84
|
+
return "calc(134px * 2)";
|
|
85
|
+
}, props => props.width ? props.width : "134px", props => themeGet("colors.greyLight")(props), props => props.zIndex ? props.zIndex : "1", props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.white")(props), props => themeGet("colors.greyDarkest")(props), props => props.height ? props.height : "40px", props => props.width ? props.width : "134px", props => themeGet("radii.2")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.black30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.grey")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("colors.grey")(props), props => themeGet("shadows.thinOutline")(props), props => themeGet("colors.primary30")(props), props => themeGet("colors.primary")(props), props => "".concat(themeGet("radii.2")(props), " 0 0 ").concat(themeGet("radii.2")(props)), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => "0 ".concat(themeGet("radii.2")(props), " ").concat(themeGet("radii.2")(props), " 0"), props => props.height ? props.height : "40px", props => props.invalid ? themeGet("colors.danger")(props) : themeGet("colors.primary")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primaryDark")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.primaryLight")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.primary")(props), props => themeGet("colors.white")(props), props => themeGet("colors.primaryDarker")(props), props => themeGet("colors.primaryDarker")(props), props => props.zIndex ? props.zIndex + 1 : "2");
|
|
77
86
|
|
|
78
87
|
/**
|
|
79
88
|
*
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Stack } from "@mui/material";
|
|
2
|
-
import { MRT_ExpandAllButton } from "material-react-table";
|
|
2
|
+
import { MRT_ExpandAllButton, MRT_ExpandButton } from "material-react-table";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Box from "../Box";
|
|
5
|
+
import Flex from "../Flex";
|
|
5
6
|
import { get } from "lodash";
|
|
6
7
|
import styled from "styled-components";
|
|
7
8
|
import { PropTypes } from "prop-types";
|
|
@@ -45,12 +46,18 @@ const GroupedCell = props => {
|
|
|
45
46
|
});
|
|
46
47
|
}
|
|
47
48
|
if (firstCol.Cell) {
|
|
48
|
-
return /*#__PURE__*/_jsx(
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
return /*#__PURE__*/_jsx(Flex, {
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
children: /*#__PURE__*/_jsx(firstCol.Cell, {
|
|
52
|
+
...props,
|
|
53
|
+
renderedCellValue: renderedCellValue
|
|
54
|
+
})
|
|
51
55
|
});
|
|
52
56
|
}
|
|
53
|
-
return
|
|
57
|
+
return /*#__PURE__*/_jsxs(Flex, {
|
|
58
|
+
alignItems: "center",
|
|
59
|
+
children: [renderedCellValue, " "]
|
|
60
|
+
});
|
|
54
61
|
};
|
|
55
62
|
GroupedCell.propTypes = PropTypes.Obj;
|
|
56
63
|
const HeaderCell = props => {
|
|
@@ -84,9 +91,14 @@ export default ((firstCol, tableConfig) => ({
|
|
|
84
91
|
firstCol: firstCol,
|
|
85
92
|
tableConfig: tableConfig
|
|
86
93
|
}),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
94
|
+
Cell: props => /*#__PURE__*/_jsxs(Flex, {
|
|
95
|
+
alignItems: "center",
|
|
96
|
+
children: [/*#__PURE__*/_jsx(MRT_ExpandButton, {
|
|
97
|
+
...props
|
|
98
|
+
}), /*#__PURE__*/_jsx(GroupedCell, {
|
|
99
|
+
...props,
|
|
100
|
+
firstCol: firstCol
|
|
101
|
+
})]
|
|
90
102
|
}),
|
|
91
103
|
enableResizing: true,
|
|
92
104
|
size: 200
|