yootd 0.0.34 → 0.0.36

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 (9) hide show
  1. package/dist/date-interval/index.d.ts +1 -1
  2. package/dist/date-interval/index.js +21 -7
  3. package/dist/date-picker/index.d.ts +2 -3
  4. package/dist/date-picker/index.js +1 -4
  5. package/dist/date-range/index.js +45 -29
  6. package/dist/modal/components/header-icon.js +1 -13
  7. package/dist/modal/index.js +16 -2
  8. package/dist/modal/index.scss +73 -65
  9. package/package.json +1 -1
package/dist/date-interval/index.d.ts CHANGED
@@ -9,7 +9,7 @@ export type DateIntervalProps = AntdDatePickerProps & {
9
9
  }[];
10
10
  value?: {
11
11
  date: dayjs.Dayjs;
12
- type: string;
12
+ type: PickerType;
13
13
  };
14
14
  onChange?: (record: {
15
15
  date: dayjs.Dayjs;
package/dist/date-interval/index.js CHANGED
@@ -10,7 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
10
10
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
11
  import { DatePicker as AntdDatePicker, Select } from 'antd';
12
12
  import dayjs from 'dayjs';
13
- import React, { useMemo, useState } from 'react';
13
+ import React, { useEffect, useMemo, useState } from 'react';
14
14
  export var DateInterval = function DateInterval(_ref) {
15
15
  var _options$;
16
16
  var options = _ref.options,
@@ -49,14 +49,14 @@ export var DateInterval = function DateInterval(_ref) {
49
49
  var datePickerMap = useMemo(function () {
50
50
  return {
51
51
  time: /*#__PURE__*/React.createElement(AntdDatePicker.TimePicker, _extends({}, props, {
52
- defaultValue: value === null || value === void 0 ? void 0 : value.date,
52
+ defaultValue: date,
53
53
  style: {
54
54
  width: 180
55
55
  },
56
56
  onChange: onChangeTime
57
57
  })),
58
58
  date: /*#__PURE__*/React.createElement(AntdDatePicker, _extends({}, props, {
59
- defaultValue: value === null || value === void 0 ? void 0 : value.date,
59
+ defaultValue: date,
60
60
  style: {
61
61
  width: 180
62
62
  },
@@ -65,7 +65,7 @@ export var DateInterval = function DateInterval(_ref) {
65
65
  week: /*#__PURE__*/React.createElement(AntdDatePicker, _extends({
66
66
  picker: "week"
67
67
  }, props, {
68
- defaultValue: value === null || value === void 0 ? void 0 : value.date,
68
+ defaultValue: date,
69
69
  style: {
70
70
  width: 180
71
71
  },
@@ -74,7 +74,7 @@ export var DateInterval = function DateInterval(_ref) {
74
74
  month: /*#__PURE__*/React.createElement(AntdDatePicker, _extends({
75
75
  picker: "month"
76
76
  }, props, {
77
- defaultValue: value === null || value === void 0 ? void 0 : value.date,
77
+ defaultValue: date,
78
78
  style: {
79
79
  width: 180
80
80
  },
@@ -83,7 +83,7 @@ export var DateInterval = function DateInterval(_ref) {
83
83
  quarter: /*#__PURE__*/React.createElement(AntdDatePicker, _extends({
84
84
  picker: "quarter"
85
85
  }, props, {
86
- defaultValue: value === null || value === void 0 ? void 0 : value.date,
86
+ defaultValue: date,
87
87
  style: {
88
88
  width: 180
89
89
  },
@@ -92,7 +92,7 @@ export var DateInterval = function DateInterval(_ref) {
92
92
  year: /*#__PURE__*/React.createElement(AntdDatePicker, _extends({
93
93
  picker: "year"
94
94
  }, props, {
95
- defaultValue: value === null || value === void 0 ? void 0 : value.date,
95
+ defaultValue: date,
96
96
  style: {
97
97
  width: 180
98
98
  },
@@ -100,6 +100,20 @@ export var DateInterval = function DateInterval(_ref) {
100
100
  }))
101
101
  };
102
102
  }, [type]);
103
+ // 设置初始值
104
+ useEffect(function () {
105
+ if ((value === null || value === void 0 ? void 0 : value.type) != null) {
106
+ setType(value.type);
107
+ } else {
108
+ var _options$2;
109
+ setType((options === null || options === void 0 || (_options$2 = options[0]) === null || _options$2 === void 0 ? void 0 : _options$2.value) || 'time');
110
+ }
111
+ if ((value === null || value === void 0 ? void 0 : value.date) != null) {
112
+ setDate(value.date);
113
+ } else {
114
+ setDate(dayjs());
115
+ }
116
+ }, [value]);
103
117
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
104
118
  value: type,
105
119
  style: {
package/dist/date-picker/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { type DatePickerProps as AntDatePickerProps } from 'antd';
2
- import { FC } from 'react';
1
+ import type { DatePickerProps as AntDatePickerProps } from 'antd';
3
2
  export type DatePickerProps = AntDatePickerProps;
4
- export declare const DatePicker: FC<DatePickerProps>;
3
+ export declare const DatePicker: import("antd/es/date-picker").DatePickerType;
package/dist/date-picker/index.js CHANGED
@@ -1,5 +1,2 @@
1
1
  import { DatePicker as AntDatePicker } from 'antd';
2
- import React from 'react';
3
- export var DatePicker = function DatePicker(props) {
4
- return /*#__PURE__*/React.createElement(AntDatePicker, props);
5
- };
2
+ export var DatePicker = AntDatePicker;
package/dist/date-range/index.js CHANGED
@@ -10,18 +10,38 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
10
10
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
11
  import { DatePicker, Select, TimePicker } from 'antd';
12
12
  import dayjs from 'dayjs';
13
- import React, { useMemo, useState } from 'react';
13
+ import React, { useEffect, useMemo, useState } from 'react';
14
+ var defaultOptions = [{
15
+ label: '时间',
16
+ value: 'time'
17
+ }, {
18
+ label: '日期',
19
+ value: 'date'
20
+ }, {
21
+ label: '周',
22
+ value: 'week'
23
+ }, {
24
+ label: '月份',
25
+ value: 'month'
26
+ }, {
27
+ label: '季度',
28
+ value: 'quarter'
29
+ }, {
30
+ label: '年份',
31
+ value: 'year'
32
+ }];
14
33
  export var DateRange = function DateRange(_ref) {
15
34
  var _options$;
16
- var options = _ref.options,
35
+ var _ref$options = _ref.options,
36
+ options = _ref$options === void 0 ? defaultOptions : _ref$options,
17
37
  value = _ref.value,
18
38
  onChange = _ref.onChange,
19
39
  props = _objectWithoutProperties(_ref, _excluded);
20
- var _useState = useState((options === null || options === void 0 || (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) || 'time'),
40
+ var _useState = useState(options === null || options === void 0 || (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value),
21
41
  _useState2 = _slicedToArray(_useState, 2),
22
42
  type = _useState2[0],
23
43
  setType = _useState2[1];
24
- var _useState3 = useState((value === null || value === void 0 ? void 0 : value.dates) || [dayjs(), dayjs()]),
44
+ var _useState3 = useState([dayjs(), dayjs()]),
25
45
  _useState4 = _slicedToArray(_useState3, 2),
26
46
  dates = _useState4[0],
27
47
  setDates = _useState4[1];
@@ -35,14 +55,14 @@ export var DateRange = function DateRange(_ref) {
35
55
  var datePickerMap = useMemo(function () {
36
56
  return {
37
57
  time: /*#__PURE__*/React.createElement(TimePicker.RangePicker, _extends({}, props, {
38
- defaultValue: value === null || value === void 0 ? void 0 : value.dates,
58
+ defaultValue: dates,
39
59
  style: {
40
60
  width: 244
41
61
  },
42
62
  onChange: onChangeDate
43
63
  })),
44
64
  date: /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({}, props, {
45
- defaultValue: value === null || value === void 0 ? void 0 : value.dates,
65
+ defaultValue: dates,
46
66
  style: {
47
67
  width: 244
48
68
  },
@@ -51,7 +71,7 @@ export var DateRange = function DateRange(_ref) {
51
71
  week: /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
52
72
  picker: "week"
53
73
  }, props, {
54
- defaultValue: value === null || value === void 0 ? void 0 : value.dates,
74
+ defaultValue: dates,
55
75
  style: {
56
76
  width: 244
57
77
  },
@@ -60,7 +80,7 @@ export var DateRange = function DateRange(_ref) {
60
80
  month: /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
61
81
  picker: "month"
62
82
  }, props, {
63
- defaultValue: value === null || value === void 0 ? void 0 : value.dates,
83
+ defaultValue: dates,
64
84
  style: {
65
85
  width: 244
66
86
  },
@@ -73,12 +93,12 @@ export var DateRange = function DateRange(_ref) {
73
93
  width: 244
74
94
  },
75
95
  onChange: onChangeDate,
76
- defaultValue: value === null || value === void 0 ? void 0 : value.dates
96
+ defaultValue: dates
77
97
  })),
78
98
  year: /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
79
99
  picker: "year"
80
100
  }, props, {
81
- defaultValue: value === null || value === void 0 ? void 0 : value.dates,
101
+ defaultValue: dates,
82
102
  style: {
83
103
  width: 244
84
104
  },
@@ -93,30 +113,26 @@ export var DateRange = function DateRange(_ref) {
93
113
  type: e
94
114
  });
95
115
  };
116
+ // 设置初始值
117
+ useEffect(function () {
118
+ if ((value === null || value === void 0 ? void 0 : value.type) != null) {
119
+ setType(value === null || value === void 0 ? void 0 : value.type);
120
+ } else {
121
+ var _options$2;
122
+ setType(options === null || options === void 0 || (_options$2 = options[0]) === null || _options$2 === void 0 ? void 0 : _options$2.value);
123
+ }
124
+ if ((value === null || value === void 0 ? void 0 : value.dates) != null) {
125
+ setDates(value === null || value === void 0 ? void 0 : value.dates);
126
+ } else {
127
+ setDates([dayjs(), dayjs()]);
128
+ }
129
+ }, [value]);
96
130
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
97
131
  value: type,
98
132
  style: {
99
133
  width: 92
100
134
  },
101
- options: options != null ? options : [{
102
- label: '时间',
103
- value: 'time'
104
- }, {
105
- label: '日期',
106
- value: 'date'
107
- }, {
108
- label: '周',
109
- value: 'week'
110
- }, {
111
- label: '月份',
112
- value: 'month'
113
- }, {
114
- label: '季度',
115
- value: 'quarter'
116
- }, {
117
- label: '年份',
118
- value: 'year'
119
- }],
135
+ options: options,
120
136
  onChange: handleSelectChange
121
137
  }), datePickerMap[type]);
122
138
  };
package/dist/modal/components/header-icon.js CHANGED
@@ -30,17 +30,5 @@ export var HeaderIcon = function HeaderIcon(_ref) {
30
30
  fillRule: "evenodd",
31
31
  clipRule: "evenodd",
32
32
  d: "M22.9552 13C22.9848 12.6706 23 12.3371 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 12.3371 1.01516 12.6706 1.04484 13H22.9552Z"
33
- })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
34
- id: "paint0_linear_589_9609",
35
- x1: "132.5",
36
- y1: "0",
37
- x2: "132.5",
38
- y2: "56",
39
- gradientUnits: "userSpaceOnUse"
40
- }, /*#__PURE__*/React.createElement("stop", {
41
- className: "stop-color-1"
42
- }), /*#__PURE__*/React.createElement("stop", {
43
- className: "stop-color-2",
44
- offset: "1"
45
- }))));
33
+ })));
46
34
  };
package/dist/modal/index.js CHANGED
@@ -17,7 +17,21 @@ var ModalComponent = function ModalComponent(_ref) {
17
17
 
18
18
  // title content block
19
19
  var tcb = mb.b('title').b('content');
20
- return /*#__PURE__*/React.createElement(AntModal, _extends({}, rest, {
20
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
21
+ className: "".concat(mb.e('color-defs'))
22
+ }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
23
+ id: "paint0_linear_589_9609",
24
+ x1: "132.5",
25
+ y1: "0",
26
+ x2: "132.5",
27
+ y2: "56",
28
+ gradientUnits: "userSpaceOnUse"
29
+ }, /*#__PURE__*/React.createElement("stop", {
30
+ className: "stop-color-1"
31
+ }), /*#__PURE__*/React.createElement("stop", {
32
+ className: "stop-color-2",
33
+ offset: "1"
34
+ })))), /*#__PURE__*/React.createElement(AntModal, _extends({}, rest, {
21
35
  className: "".concat(mb, " ").concat(className !== null && className !== void 0 ? className : ''),
22
36
  title: /*#__PURE__*/React.createElement("div", {
23
37
  className: "".concat(tcb)
@@ -26,7 +40,7 @@ var ModalComponent = function ModalComponent(_ref) {
26
40
  }), /*#__PURE__*/React.createElement("div", {
27
41
  className: "".concat(tcb.e('body'))
28
42
  }, title))
29
- }), children);
43
+ }), children));
30
44
  };
31
45
  export var Modal = ModalComponent;
32
46
  Modal.useModal = AntModal.useModal;
package/dist/modal/index.scss CHANGED
@@ -1,65 +1,73 @@
1
- .yot-modal {
2
- padding-top: 13px;
3
- position: relative;
4
- max-width: calc(2 / 3 * 100vw) !important;
5
-
6
- & > div:first-child {
7
- box-sizing: border-box;
8
- padding: 4px;
9
- background: linear-gradient(180deg, #3a8cff 0%, #c4ddff 100%);
10
- border-radius: 24px;
11
- }
12
-
13
- .ant-modal-header {
14
- width: 100%;
15
- position: absolute;
16
- left: 0;
17
- top: -13px;
18
- background-color: transparent;
19
- }
20
-
21
- .ant-modal-content {
22
- padding: var(--ant-margin-xl);
23
- padding-top: 71px;
24
- border-radius: 24px;
25
- }
26
-
27
- .ant-modal-body {
28
- max-height: 529px;
29
- overflow-y: auto;
30
- }
31
-
32
- .ant-modal-footer {
33
- margin-top: 40px;
34
- }
35
-
36
- &-title {
37
- &-content {
38
- width: 100%;
39
- display: flex;
40
- justify-content: center;
41
- align-items: center;
42
-
43
- &__body {
44
- position: absolute;
45
- color: var(--ant-color-bg-base);
46
- font-size: var(--ant-font-size-heading-3);
47
- }
48
-
49
- &__icon {
50
- .path-1 {
51
- fill: var(--yot-modal-color-tertiary);
52
- }
53
- .path-2 {
54
- fill: var(--yot-modal-color-tertiary);
55
- }
56
- .stop-color-1 {
57
- stop-color: var(--yot-modal-color-secondary);
58
- }
59
- .stop-color-2 {
60
- stop-color: var(--yot-modal-color-primary);
61
- }
62
- }
63
- }
64
- }
65
- }
1
+ .yot-modal {
2
+ padding-top: 13px;
3
+ position: relative;
4
+ max-width: calc(2 / 3 * 100vw) !important;
5
+
6
+ & > div:first-child {
7
+ box-sizing: border-box;
8
+ padding: 4px;
9
+ background: linear-gradient(180deg, #3a8cff 0%, #c4ddff 100%);
10
+ border-radius: 24px;
11
+ }
12
+
13
+ .ant-modal-header {
14
+ width: 100%;
15
+ position: absolute;
16
+ left: 0;
17
+ top: -13px;
18
+ background-color: transparent;
19
+ }
20
+
21
+ .ant-modal-content {
22
+ padding: var(--ant-margin-xl);
23
+ padding-top: 71px;
24
+ border-radius: 24px;
25
+ }
26
+
27
+ .ant-modal-body {
28
+ max-height: 529px;
29
+ overflow-y: auto;
30
+ }
31
+
32
+ .ant-modal-footer {
33
+ margin-top: 40px;
34
+ }
35
+
36
+ &-title {
37
+ &-content {
38
+ width: 100%;
39
+ display: flex;
40
+ justify-content: center;
41
+ align-items: center;
42
+
43
+ &__body {
44
+ position: absolute;
45
+ color: var(--ant-color-bg-base);
46
+ font-size: var(--ant-font-size-heading-3);
47
+ }
48
+
49
+ &__icon {
50
+ .path-1 {
51
+ fill: var(--yot-modal-color-tertiary);
52
+ }
53
+ .path-2 {
54
+ fill: var(--yot-modal-color-tertiary);
55
+ }
56
+ .stop-color-1 {
57
+ stop-color: var(--yot-modal-color-secondary);
58
+ }
59
+ .stop-color-2 {
60
+ stop-color: var(--yot-modal-color-primary);
61
+ }
62
+ }
63
+ }
64
+ }
65
+ &__color-defs {
66
+ .stop-color-1 {
67
+ stop-color: var(--yot-modal-color-secondary);
68
+ }
69
+ .stop-color-2 {
70
+ stop-color: var(--yot-modal-color-primary);
71
+ }
72
+ }
73
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yootd",
3
- "version": "0.0.34",
3
+ "version": "0.0.36",
4
4
  "description": "A react library developed with dumi",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",