@pisell/date-picker 1.0.14 → 1.0.16

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.
Files changed (7) hide show
  1. package/es/PisellDateRangePicker/index.d.ts +4 -0
  2. package/es/PisellDateRangePicker/index.js +27 -6
  3. package/es/PisellDateRangePicker/index.less +15 -8
  4. package/lib/PisellDateRangePicker/index.d.ts +4 -0
  5. package/lib/PisellDateRangePicker/index.js +56 -32
  6. package/lib/PisellDateRangePicker/index.less +15 -8
  7. package/package.json +1 -1
package/es/PisellDateRangePicker/index.d.ts CHANGED
@@ -15,6 +15,10 @@ export interface PisellDateRangePickerProps {
15
15
  placeholder?: string;
16
16
  disableDate?: (day: Dayjs) => boolean;
17
17
  format?: string;
18
+ suffixIcon?: React.ReactNode;
19
+ bordered?: boolean;
20
+ open?: boolean;
21
+ onClose?: () => void;
18
22
  }
19
23
  declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
20
24
  export default PisellDateRangePicker;
package/es/PisellDateRangePicker/index.js CHANGED
@@ -34,11 +34,19 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
34
34
  placeholder = props.placeholder,
35
35
  disableDate = props.disableDate,
36
36
  format = props.format,
37
- defaultValue = props.defaultValue;
38
- var _useState = useState(false),
37
+ defaultValue = props.defaultValue,
38
+ suffixIcon = props.suffixIcon,
39
+ _props$bordered = props.bordered,
40
+ bordered = _props$bordered === void 0 ? true : _props$bordered,
41
+ propsOpen = props.open,
42
+ onClose = props.onClose;
43
+ var _useState = useState(propsOpen !== null && propsOpen !== void 0 ? propsOpen : false),
39
44
  _useState2 = _slicedToArray(_useState, 2),
40
45
  open = _useState2[0],
41
46
  setOpen = _useState2[1];
47
+ useEffect(function () {
48
+ setOpen(propsOpen);
49
+ }, [propsOpen]);
42
50
  var _useState3 = useState(function () {
43
51
  return transDayjsArr(propsValue, defaultValue);
44
52
  }),
@@ -53,10 +61,12 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
53
61
  };
54
62
  var handleClose = function handleClose() {
55
63
  setOpen(false);
64
+ onClose === null || onClose === void 0 ? void 0 : onClose();
56
65
  setValue(transDayjsArr(propsValue, defaultValue));
57
66
  };
58
67
  var handleOk = function handleOk() {
59
68
  setOpen(false);
69
+ onClose === null || onClose === void 0 ? void 0 : onClose();
60
70
  propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(_value);
61
71
  };
62
72
  var _presets = useMemo(function () {
@@ -83,12 +93,15 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
83
93
  }
84
94
  setValue(newVal);
85
95
  };
86
- return /*#__PURE__*/React.createElement(DateRangePicker
96
+ return /*#__PURE__*/React.createElement("span", {
97
+ className: classNames(className, "pisell-date-range-picker", {
98
+ "pisell-date-range-picker-no-border": !bordered
99
+ })
100
+ }, /*#__PURE__*/React.createElement(DateRangePicker
87
101
  // defaultValue={defaultValue}
88
102
  , {
89
103
  format: format,
90
104
  label: placeholder,
91
- className: classNames(className, "pisell-date-range-picker"),
92
105
  value: _value,
93
106
  closeOnSelect: false,
94
107
  onClose: handleClose,
@@ -101,6 +114,9 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
101
114
  shortcuts: Shortcuts,
102
115
  field: SingleInputDateRangeField
103
116
  },
117
+ dayOfWeekFormatter: function dayOfWeekFormatter(day) {
118
+ return day;
119
+ },
104
120
  slotProps: {
105
121
  shortcuts: {
106
122
  items: _presets,
@@ -115,9 +131,14 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
115
131
  },
116
132
  field: {
117
133
  size: "small",
118
- fullWidth: true
134
+ fullWidth: true,
135
+ // variant: "standard",
136
+ // hiddenLabel: true,
137
+ InputProps: {
138
+ endAdornment: suffixIcon
139
+ }
119
140
  }
120
141
  }
121
- });
142
+ }));
122
143
  };
123
144
  export default PisellDateRangePicker;
package/es/PisellDateRangePicker/index.less CHANGED
@@ -1,4 +1,6 @@
1
1
  .pisell-date-range-picker {
2
+ display: inline-block;
3
+ width: 100%;
2
4
  //width: 350px;
3
5
  //.MuiInputBase-input {
4
6
  // padding: 10px;
@@ -6,14 +8,19 @@
6
8
  label {
7
9
  font-size: 14px;
8
10
  }
11
+ }
12
+ .pisell-date-range-picker-no-border {
9
13
  .MuiOutlinedInput-notchedOutline {
10
- legend {
11
- color: inherit;
12
- width: auto;
13
- margin-bottom: 0.5em;
14
- font-size: 1.5em;
15
- line-height: 11px;
16
- border: none;
17
- }
14
+ border: none;
15
+ }
16
+ }
17
+ .MuiOutlinedInput-notchedOutline {
18
+ legend {
19
+ color: inherit;
20
+ width: auto;
21
+ margin-bottom: 0.5em;
22
+ font-size: 1.5em;
23
+ line-height: 11px;
24
+ border: none;
18
25
  }
19
26
  }
package/lib/PisellDateRangePicker/index.d.ts CHANGED
@@ -15,6 +15,10 @@ export interface PisellDateRangePickerProps {
15
15
  placeholder?: string;
16
16
  disableDate?: (day: Dayjs) => boolean;
17
17
  format?: string;
18
+ suffixIcon?: React.ReactNode;
19
+ bordered?: boolean;
20
+ open?: boolean;
21
+ onClose?: () => void;
18
22
  }
19
23
  declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
20
24
  export default PisellDateRangePicker;
package/lib/PisellDateRangePicker/index.js CHANGED
@@ -58,9 +58,16 @@ var PisellDateRangePicker = (props) => {
58
58
  placeholder,
59
59
  disableDate,
60
60
  format,
61
- defaultValue
61
+ defaultValue,
62
+ suffixIcon,
63
+ bordered = true,
64
+ open: propsOpen,
65
+ onClose
62
66
  } = props;
63
- const [open, setOpen] = (0, import_react.useState)(false);
67
+ const [open, setOpen] = (0, import_react.useState)(propsOpen ?? false);
68
+ (0, import_react.useEffect)(() => {
69
+ setOpen(propsOpen);
70
+ }, [propsOpen]);
64
71
  const [_value, setValue] = (0, import_react.useState)(
65
72
  () => transDayjsArr(propsValue, defaultValue)
66
73
  );
@@ -72,10 +79,12 @@ var PisellDateRangePicker = (props) => {
72
79
  };
73
80
  const handleClose = () => {
74
81
  setOpen(false);
82
+ onClose == null ? void 0 : onClose();
75
83
  setValue(transDayjsArr(propsValue, defaultValue));
76
84
  };
77
85
  const handleOk = () => {
78
86
  setOpen(false);
87
+ onClose == null ? void 0 : onClose();
79
88
  propsOnChange == null ? void 0 : propsOnChange(_value);
80
89
  };
81
90
  const _presets = (0, import_react.useMemo)(() => {
@@ -105,41 +114,56 @@ var PisellDateRangePicker = (props) => {
105
114
  setValue(newVal);
106
115
  };
107
116
  return /* @__PURE__ */ React.createElement(
108
- import_DateRangePicker.DateRangePicker,
117
+ "span",
109
118
  {
110
- format,
111
- label: placeholder,
112
- className: (0, import_classnames.default)(className, "pisell-date-range-picker"),
113
- value: _value,
114
- closeOnSelect: false,
115
- onClose: handleClose,
116
- onChange: handleChange,
117
- onOpen: handleOpen,
118
- open,
119
- shouldDisableDate: disableDate,
120
- slots: {
121
- actionBar: import_ActionBar.default,
122
- shortcuts: import_Shortcuts.default,
123
- field: import_SingleInputDateRangeField.SingleInputDateRangeField
124
- },
125
- slotProps: {
126
- shortcuts: {
127
- items: _presets,
128
- changeImportance: "set",
129
- onChange: handleChange
119
+ className: (0, import_classnames.default)(className, "pisell-date-range-picker", {
120
+ "pisell-date-range-picker-no-border": !bordered
121
+ })
122
+ },
123
+ /* @__PURE__ */ React.createElement(
124
+ import_DateRangePicker.DateRangePicker,
125
+ {
126
+ format,
127
+ label: placeholder,
128
+ value: _value,
129
+ closeOnSelect: false,
130
+ onClose: handleClose,
131
+ onChange: handleChange,
132
+ onOpen: handleOpen,
133
+ open,
134
+ shouldDisableDate: disableDate,
135
+ slots: {
136
+ actionBar: import_ActionBar.default,
137
+ shortcuts: import_Shortcuts.default,
138
+ field: import_SingleInputDateRangeField.SingleInputDateRangeField
130
139
  },
131
- actionBar: {
132
- onOk: handleOk,
133
- onCancel: handleClose,
134
- showTime,
135
- onChange: handleChange
140
+ dayOfWeekFormatter: (day) => {
141
+ return day;
136
142
  },
137
- field: {
138
- size: "small",
139
- fullWidth: true
143
+ slotProps: {
144
+ shortcuts: {
145
+ items: _presets,
146
+ changeImportance: "set",
147
+ onChange: handleChange
148
+ },
149
+ actionBar: {
150
+ onOk: handleOk,
151
+ onCancel: handleClose,
152
+ showTime,
153
+ onChange: handleChange
154
+ },
155
+ field: {
156
+ size: "small",
157
+ fullWidth: true,
158
+ // variant: "standard",
159
+ // hiddenLabel: true,
160
+ InputProps: {
161
+ endAdornment: suffixIcon
162
+ }
163
+ }
140
164
  }
141
165
  }
142
- }
166
+ )
143
167
  );
144
168
  };
145
169
  var PisellDateRangePicker_default = PisellDateRangePicker;
package/lib/PisellDateRangePicker/index.less CHANGED
@@ -1,4 +1,6 @@
1
1
  .pisell-date-range-picker {
2
+ display: inline-block;
3
+ width: 100%;
2
4
  //width: 350px;
3
5
  //.MuiInputBase-input {
4
6
  // padding: 10px;
@@ -6,14 +8,19 @@
6
8
  label {
7
9
  font-size: 14px;
8
10
  }
11
+ }
12
+ .pisell-date-range-picker-no-border {
9
13
  .MuiOutlinedInput-notchedOutline {
10
- legend {
11
- color: inherit;
12
- width: auto;
13
- margin-bottom: 0.5em;
14
- font-size: 1.5em;
15
- line-height: 11px;
16
- border: none;
17
- }
14
+ border: none;
15
+ }
16
+ }
17
+ .MuiOutlinedInput-notchedOutline {
18
+ legend {
19
+ color: inherit;
20
+ width: auto;
21
+ margin-bottom: 0.5em;
22
+ font-size: 1.5em;
23
+ line-height: 11px;
24
+ border: none;
18
25
  }
19
26
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisell/date-picker",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "sideEffects": [
5
5
  "*.less"
6
6
  ],