diginet-core-ui 1.3.90-beta.1 → 1.3.90-beta.2

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 (3) hide show
  1. package/components/form-control/calendar/function.js +63 -119
  2. package/package.json +1 -1
  3. package/styles/general.js +11 -11
package/components/form-control/calendar/function.js CHANGED
@@ -1,36 +1,18 @@
1
1
  /** @jsxRuntime classic */
2
2
  /** @jsx jsx */
3
-
4
3
  import { css, jsx } from '@emotion/core';
5
- import { render } from 'react-dom';
6
4
  import { Button, ButtonIcon, Typography } from "../..";
7
5
  import { getGlobal } from "../../../global";
8
6
  import locale from "../../../locale";
9
- import theme from "../../../theme/settings";
7
+ import { render } from 'react-dom';
8
+ import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
9
+ import { useTheme } from "../../../theme";
10
10
  import { date as moment } from "../../../utils";
11
- import { useColor as colors } from "../../../theme";
12
- import { typography } from "../../../styles/typography";
13
- import { itemsCenter, border, boxBorder, borderRadius4px, cursorPointer, flexCol, flexRow, displayInlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
14
- const {
15
- heading6
16
- } = typography;
17
11
  const {
18
- system: {
19
- active,
20
- white
21
- },
22
- fill: {
23
- hover: fillHover,
24
- focus: fillFocus,
25
- pressed: fillPressed
26
- },
27
- text: {
28
- main,
29
- normal_label
30
- },
31
- danger8,
32
- info8
33
- } = colors;
12
+ boxShadows: {
13
+ large: boxShadowsLarge
14
+ }
15
+ } = useTheme();
34
16
 
35
17
  /**
36
18
  * START STYLE
@@ -43,81 +25,52 @@ const {
43
25
  * @returns
44
26
  */
45
27
  const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
46
- ${borderRadius4px}
47
- ${boxBorder}
48
- ${flexCol}
49
- background-color: ${white};
50
- box-shadow: ${boxShadow ? theme.boxShadows.large : 'none'};
51
- max-width: 400px;
52
- min-width: 260px;
53
- width: 100%;
28
+ ${displayFlex};
29
+ ${flexCol};
30
+ ${boxBorder};
31
+ ${borderRadius('0px 0px 4px 4px')};
32
+ ${bgColor('system.white')};
33
+ ${parseWidth('100%')};
34
+ ${parseMinWidth(260)};
35
+ ${parseMaxWidth(400)};
36
+ box-shadow: ${boxShadow ? boxShadowsLarge : 'none'};
54
37
  .${unique.navigator.navigator} {
55
- ${flexRow}
56
- ${justifyBetween}
57
- height : 28px;
58
- margin: 0px 14px;
59
- margin-top: 14px;
60
- max-width: 400px;
61
- width: calc(100% - 28px);
38
+ ${displayFlex};
39
+ ${flexRow};
40
+ ${justifyBetween};
41
+ ${itemsCenter};
42
+ ${parseMaxWidth(400)};
43
+ ${mg([4, 4, 0])};
62
44
  .${unique.navigator.around} {
63
- ${flexRow}
64
- ${userSelectNone}
65
- height : 28px;
66
- width: 64px;
45
+ ${displayFlex};
46
+ ${flexRow};
67
47
  }
68
48
  .${unique.navigator.center} {
69
- ${displayInlineFlex}
70
- ${itemsCenter}
71
- ${textCenter}
72
- ${userSelectNone}
73
- height : 28px;
74
- margin: 0 4px;
75
- min-width: 150px;
76
- width: 100%;
77
- button {
78
- height: 28px;
79
- }
80
- .DGN-UI-Typography {
81
- min-width: 150px;
82
- }
83
- }
84
- }
85
- .${unique.icon} {
86
- height: 28px;
87
- margin: 0 2px;
88
- width: 28px;
89
- svg,
90
- path,
91
- g {
92
- ${pointerEventsNone}
49
+ ${parseWidth('100%')};
93
50
  }
94
51
  }
95
52
  .${unique.table.container} {
96
- ${flexRow}
97
- margin : 10px 0;
98
- margin-top: 6px;
99
- width: 100%;
53
+ ${displayFlex};
54
+ ${flexRow};
55
+ ${mg([2, 0])};
100
56
  }
101
57
  .${unique.table.table} {
58
+ ${mg([0, 4])};
59
+ ${parseWidth('calc(100% - 32px)')};
102
60
  border-collapse: separate;
103
- margin: 0 16px;
104
61
  padding: 0;
105
62
  table-layout: fixed;
106
- width: calc(100% - 32px);
107
63
  .${unique.table.data} {
108
- ${cursorPointer}
109
- ${positionRelative}
110
- ${textCenter}
111
- ${userSelectNone}
112
- color : ${main};
113
- height: 24px;
114
- min-width: 24px;
115
- padding: 1px;
64
+ ${cursorPointer};
65
+ ${positionRelative};
66
+ ${textCenter};
67
+ ${userSelectNone};
68
+ ${textColor('text.main')};
116
69
  &:nth-of-type(7n - 1) {
117
- color: ${info8} !important;
70
+ ${textColor('info8')};
118
71
  }
119
72
  &:nth-of-type(7n) {
120
- color: ${danger8} !important;
73
+ ${textColor('danger8')};
121
74
  }
122
75
  &.next_month,
123
76
  &.previous_month,
@@ -125,45 +78,42 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
125
78
  opacity: 0.25;
126
79
  }
127
80
  &.${unique.day.limit} {
128
- ${pointerEventsNone}
129
- cursor: default;
81
+ ${pointerEventsNone};
82
+ ${cursorDefault};
130
83
  }
131
84
  &:hover {
132
85
  span.${unique.day.day} {
133
- background-color: ${fillHover};
86
+ ${bgColor('fill.hover')};
134
87
  }
135
88
  }
136
- ${onClickActive ? `&:active {
137
- span.${unique.day.day} {
138
- background-color: ${fillPressed};
139
- }
140
- }` : ''}
89
+ ${onClickActive && css`
90
+ &:active {
91
+ span.${unique.day.day} {
92
+ ${bgColor('fill.pressed')};
93
+ }
94
+ }
95
+ `}
141
96
  &.${unique.day.active} {
142
97
  span.${unique.day.day} {
143
- ${heading6};
144
- background-color: ${fillFocus};
98
+ ${bgColor('fill.focus')};
145
99
  }
146
100
  }
147
101
  &.${unique.day.today} {
148
102
  span {
149
- ${heading6}
150
- ${boxBorder}
151
- ${border(1, active)}
152
- /* text-decoration-line : underline;
153
- text-decoration-thickness: 2px;
154
- text-underline-offset : 1px */
103
+ ${boxBorder};
104
+ ${border(1, 'system.active')};
155
105
  }
156
106
  }
157
107
  &.${unique.day.between} {
158
108
  opacity: 1;
159
109
  &::before {
160
- background-color: ${fillHover};
110
+ ${bgColor('fill.hover')};
161
111
  }
162
112
  }
163
113
  &.${unique.day.from} {
164
114
  opacity: 1;
165
115
  &::before {
166
- background-color: ${fillHover};
116
+ ${bgColor('fill.hover')};
167
117
  border-bottom-left-radius: 12px;
168
118
  border-top-left-radius: 12px;
169
119
  left: calc((100% - 24px) / 2);
@@ -172,31 +122,28 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
172
122
  &.${unique.day.to} {
173
123
  opacity: 1;
174
124
  &::before {
175
- background-color: ${fillHover};
125
+ ${bgColor('fill.hover')};
176
126
  border-bottom-right-radius: 12px;
177
127
  border-top-right-radius: 12px;
178
128
  right: calc((100% - 24px) / 2);
179
129
  }
180
130
  }
181
131
  ::before {
182
- ${positionAbsolute}
183
- inset: 1px -2px;
132
+ ${positionAbsolute};
133
+ ${inset('1px -2px')};
184
134
  content: '';
185
135
  }
186
136
  }
187
137
  .${unique.table.header} {
188
- ${userSelectNone}
189
- ${textCenter}
190
- color : ${normal_label};
191
- height: 24px;
192
- min-width: 24px;
193
- padding: 0;
194
- padding-bottom: 6px;
138
+ ${userSelectNone};
139
+ ${textCenter};
140
+ ${parseHeight(24)};
141
+ ${textColor('text.normal_label')};
195
142
  &:nth-of-type(6) {
196
- color: ${info8} !important;
143
+ ${textColor('info8')};
197
144
  }
198
145
  &:nth-of-type(7) {
199
- color: ${danger8} !important;
146
+ ${textColor('danger8')};
200
147
  }
201
148
  }
202
149
  }
@@ -280,10 +227,8 @@ const buttonIconProps = className => {
280
227
  return {
281
228
  className,
282
229
  circular: true,
283
- height: 28,
284
- viewBox: true,
285
230
  viewType: 'text',
286
- width: 28
231
+ size: 'small'
287
232
  };
288
233
  };
289
234
  /**
@@ -296,10 +241,9 @@ const buttonTextProps = fn => {
296
241
  return {
297
242
  onClick: fn,
298
243
  color: 'primary',
244
+ size: 'small',
299
245
  style: {
300
246
  borderRadius: 20,
301
- margin: 0,
302
- padding: '2px 4px',
303
247
  textTransform: 'initial',
304
248
  width: '100%'
305
249
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "diginet-core-ui",
3
- "version": "1.3.90-beta.1",
3
+ "version": "1.3.90-beta.2",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "license": "UNLICENSED",
package/styles/general.js CHANGED
@@ -4,10 +4,10 @@ export const rootSpacing = 4;
4
4
  export let rootZIndex = 1500;
5
5
  export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
6
6
 
7
- /**
8
- * get value spacing with rootZIndex
9
- * @param number
10
- * @return {number}
7
+ /**
8
+ * get value spacing with rootZIndex
9
+ * @param number
10
+ * @return {number}
11
11
  */
12
12
  export const zIndex = number => {
13
13
  number = Number(number || 0);
@@ -15,10 +15,10 @@ export const zIndex = number => {
15
15
  return rootZIndex + number;
16
16
  };
17
17
 
18
- /**
19
- * get value spacing with rootSpacing
20
- * @param {(number|number[])} vl - default 1
21
- * @returns {(number|string)}
18
+ /**
19
+ * get value spacing with rootSpacing
20
+ * @param {(number|number[])} vl - default 1
21
+ * @returns {(number|string)}
22
22
  */
23
23
 
24
24
  export const getSpacing = (vl = 1) => {
@@ -28,9 +28,9 @@ export const getSpacing = (vl = 1) => {
28
28
  } else return vl;
29
29
  };
30
30
 
31
- /**
32
- * replace rootZIndex
33
- * @param number
31
+ /**
32
+ * replace rootZIndex
33
+ * @param number
34
34
  */
35
35
  export const setZIndex = number => {
36
36
  number = Number(number || 0);