@zohodesk/components 1.0.0-temp-47 → 1.0.0-temp-50
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.
- package/README.md +24 -0
- package/assets/Appearance/dark/mode/darkMode.module.css +2 -0
- package/assets/Appearance/default/mode/defaultMode.module.css +2 -0
- package/es/Animation/Animation.js +7 -8
- package/es/Avatar/Avatar.js +13 -12
- package/es/Avatar/__tests__/Avatar.spec.js +0 -1
- package/es/AvatarTeam/__tests__/AvatarTeam.spec.js +0 -1
- package/es/Button/Button.js +15 -16
- package/es/Button/Button.module.css +6 -2
- package/es/Button/__tests__/Button.spec.js +0 -1
- package/es/Buttongroup/__test__/Buttongroup.spec.js +0 -1
- package/es/Card/Card.js +4 -5
- package/es/DateTime/DateTime.js +6 -3
- package/es/DateTime/DateWidget.js +5 -2
- package/es/DateTime/YearView.js +6 -5
- package/es/DateTime/common.js +9 -2
- package/es/DateTime/dateFormatUtils/dateFormat.js +76 -57
- package/es/DateTime/dateFormatUtils/index.js +12 -7
- package/es/DateTime/dateFormatUtils/timeChange.js +4 -3
- package/es/DateTime/dateFormatUtils/yearChange.js +4 -3
- package/es/DateTime/validator.js +0 -1
- package/es/DropBox/DropBox.js +2 -2
- package/es/Label/__tests__/Label.spec.js +0 -2
- package/es/Layout/utils.js +2 -1
- package/es/ListItem/ListContainer.js +3 -8
- package/es/ListItem/ListItem.js +58 -39
- package/es/ListItem/ListItem.module.css +11 -0
- package/es/ListItem/ListItemWithAvatar.js +74 -53
- package/es/ListItem/ListItemWithCheckBox.js +54 -33
- package/es/ListItem/ListItemWithIcon.js +66 -47
- package/es/ListItem/ListItemWithRadio.js +55 -34
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +12 -4
- package/es/MultiSelect/AdvancedMultiSelect.js +20 -7
- package/es/MultiSelect/MultiSelect.js +24 -8
- package/es/MultiSelect/MultiSelectWithAvatar.js +1 -1
- package/es/PopOver/PopOver.js +19 -20
- package/es/Popup/Popup.js +15 -9
- package/es/Popup/viewPort.js +14 -9
- package/es/Provider/IdProvider.js +5 -4
- package/es/Provider/LibraryContext.js +6 -5
- package/es/Provider/NumberGenerator/NumberGenerator.js +17 -15
- package/es/Provider/ZindexProvider.js +5 -4
- package/es/Responsive/CustomResponsive.js +11 -8
- package/es/Responsive/ResizeComponent.js +3 -1
- package/es/Responsive/Responsive.js +12 -9
- package/es/Responsive/sizeObservers.js +13 -2
- package/es/Ribbon/Ribbon.js +8 -8
- package/es/Ribbon/__tests__/Ribbon.spec.js +0 -1
- package/es/Select/GroupSelect.js +3 -2
- package/es/Select/Select.js +3 -2
- package/es/Select/SelectWithAvatar.js +1 -1
- package/es/Select/SelectWithIcon.js +1 -1
- package/es/Stencils/Stencils.js +5 -6
- package/es/Stencils/__tests__/Stencils.spec.js +0 -1
- package/es/Tab/Tab.js +27 -26
- package/es/Tab/TabContent.js +17 -14
- package/es/Tab/TabContentWrapper.js +17 -14
- package/es/Tab/TabWrapper.js +15 -14
- package/es/Tab/Tabs.js +2 -1
- package/es/TextBox/__tests__/TextBox.spec.js +0 -1
- package/es/TextBoxIcon/TextBoxIcon.js +1 -1
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +0 -1
- package/es/Textarea/__tests__/Textarea.spec.js +0 -1
- package/es/Tooltip/Tooltip.js +0 -1
- package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -1
- package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -1
- package/es/a11y/FocusScope/FocusScope.js +10 -4
- package/es/beta/FocusRing/FocusRing.js +4 -1
- package/es/utils/Common.js +31 -11
- package/es/utils/datetime/common.js +6 -3
- package/es/utils/dropDownUtils.js +45 -6
- package/es/utils/getInitial.js +3 -1
- package/lib/Accordion/Accordion.js +3 -3
- package/lib/Accordion/AccordionItem.js +3 -3
- package/lib/Animation/Animation.js +10 -11
- package/lib/AppContainer/AppContainer.js +3 -3
- package/lib/Avatar/Avatar.js +14 -14
- package/lib/AvatarTeam/AvatarTeam.js +3 -3
- package/lib/Button/Button.js +18 -19
- package/lib/Button/Button.module.css +6 -2
- package/lib/Buttongroup/Buttongroup.js +3 -3
- package/lib/Card/Card.js +8 -9
- package/lib/Card/__tests__/Card.spec.js +1 -1
- package/lib/Card/index.js +7 -7
- package/lib/CheckBox/CheckBox.js +3 -3
- package/lib/DateTime/CalendarView.js +4 -4
- package/lib/DateTime/DateTime.js +3 -3
- package/lib/DateTime/DateTimePopupFooter.js +3 -3
- package/lib/DateTime/DateTimePopupHeader.js +3 -3
- package/lib/DateTime/DateWidget.js +3 -3
- package/lib/DateTime/DaysRow.js +3 -3
- package/lib/DateTime/Time.js +3 -3
- package/lib/DateTime/YearView.js +3 -3
- package/lib/DateTime/__tests__/CalendarView.spec.js +1 -1
- package/lib/DateTime/__tests__/DateTime.spec.js +1 -1
- package/lib/DateTime/constants.js +1 -1
- package/lib/DateTime/dateFormatUtils/dateFormat.js +2 -2
- package/lib/DateTime/dateFormatUtils/index.js +13 -13
- package/lib/DateTime/objectUtils.js +2 -2
- package/lib/DropBox/DropBox.js +9 -5
- package/lib/DropDown/DropDown.js +4 -4
- package/lib/DropDown/DropDownHeading.js +3 -3
- package/lib/DropDown/DropDownItem.js +3 -3
- package/lib/DropDown/DropDownSearch.js +3 -3
- package/lib/DropDown/DropDownSeparator.js +3 -3
- package/lib/Label/Label.js +3 -3
- package/lib/Layout/Box.js +1 -1
- package/lib/Layout/Container.js +1 -1
- package/lib/Layout/index.js +4 -4
- package/lib/Layout/utils.js +2 -2
- package/lib/ListItem/ListContainer.js +3 -8
- package/lib/ListItem/ListItem.js +61 -40
- package/lib/ListItem/ListItem.module.css +11 -0
- package/lib/ListItem/ListItemWithAvatar.js +77 -56
- package/lib/ListItem/ListItemWithCheckBox.js +57 -36
- package/lib/ListItem/ListItemWithIcon.js +69 -48
- package/lib/ListItem/ListItemWithRadio.js +58 -37
- package/lib/Modal/Modal.js +3 -3
- package/lib/Modal/__docs__/Modal__default.docs.js +3 -3
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +4 -4
- package/lib/MultiSelect/AdvancedMultiSelect.js +20 -8
- package/lib/MultiSelect/EmptyState.js +3 -3
- package/lib/MultiSelect/MultiSelect.js +16 -7
- package/lib/MultiSelect/MultiSelectHeader.js +3 -3
- package/lib/MultiSelect/MultiSelectWithAvatar.js +4 -4
- package/lib/MultiSelect/SelectedOptions.js +3 -3
- package/lib/MultiSelect/Suggestions.js +5 -5
- package/lib/PopOver/PopOver.js +23 -24
- package/lib/Popup/Popup.js +35 -32
- package/lib/Popup/__tests__/Popup.spec.js +3 -3
- package/lib/Provider/IdProvider.js +3 -3
- package/lib/Provider/LibraryContext.js +3 -3
- package/lib/Provider/NumberGenerator/NumberGenerator.js +2 -2
- package/lib/Provider/ZindexProvider.js +1 -1
- package/lib/Provider.js +3 -3
- package/lib/Radio/Radio.js +3 -3
- package/lib/Responsive/CustomResponsive.js +4 -4
- package/lib/Responsive/RefWrapper.js +1 -1
- package/lib/Responsive/ResizeComponent.js +3 -3
- package/lib/Responsive/ResizeObserver.js +1 -1
- package/lib/Responsive/Responsive.js +6 -5
- package/lib/Responsive/sizeObservers.js +14 -6
- package/lib/Responsive/utils/index.js +3 -2
- package/lib/Responsive/utils/shallowCompare.js +1 -1
- package/lib/Ribbon/Ribbon.js +11 -11
- package/lib/Select/GroupSelect.js +4 -4
- package/lib/Select/Select.js +4 -4
- package/lib/Select/SelectWithAvatar.js +4 -4
- package/lib/Select/SelectWithIcon.js +4 -4
- package/lib/Stencils/Stencils.js +8 -9
- package/lib/Switch/Switch.js +3 -3
- package/lib/Tab/Tab.js +1 -1
- package/lib/Tab/TabWrapper.js +1 -1
- package/lib/Tab/Tabs.js +3 -3
- package/lib/Tab/index.js +10 -10
- package/lib/Tag/Tag.js +3 -3
- package/lib/TextBox/TextBox.js +3 -3
- package/lib/TextBoxIcon/TextBoxIcon.js +4 -4
- package/lib/Textarea/Textarea.js +3 -3
- package/lib/Tooltip/Tooltip.js +3 -3
- package/lib/Tooltip/__tests__/Tooltip.spec.js +3 -3
- package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +8 -6
- package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +8 -6
- package/lib/a11y/FocusScope/FocusScope.js +2 -2
- package/lib/beta/FocusRing/FocusRing.js +3 -3
- package/lib/deprecated/PortalLayer/PortalLayer.js +3 -3
- package/lib/index.js +310 -310
- package/lib/semantic/Button/Button.js +3 -3
- package/lib/utils/Common.js +20 -16
- package/lib/utils/datetime/common.js +10 -10
- package/lib/utils/dropDownUtils.js +46 -3
- package/lib/utils/shallowEqual.js +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -32,6 +32,30 @@ In this Package, we Provide Some Basic Components to Build Web App
|
|
|
32
32
|
- TextBoxIcon
|
|
33
33
|
- Tooltip
|
|
34
34
|
|
|
35
|
+
# 1.0.0-alpha-230
|
|
36
|
+
|
|
37
|
+
- Avatar, AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar, SelectWithIcon, TextBoxIcon => Tooltip undefined case solved
|
|
38
|
+
|
|
39
|
+
# 1.0.0-alpha-229
|
|
40
|
+
|
|
41
|
+
- MultiSelect, AdvancedMultiSelect => disabledOption Clear icon handled properly
|
|
42
|
+
|
|
43
|
+
# 1.0.0-alpha-228
|
|
44
|
+
|
|
45
|
+
- Button => danger, primary loader color issue solved
|
|
46
|
+
# 1.0.0-alpha-227
|
|
47
|
+
|
|
48
|
+
- isReadOnly and needEffect prop added in Tag Component for read-only case
|
|
49
|
+
- needEffect prop added for the below components: ( This props has been added for read-only case )
|
|
50
|
+
=> Advanced Group Multi Select
|
|
51
|
+
=> Advanced Multi Select
|
|
52
|
+
=> Multi Select
|
|
53
|
+
=> Multi Select With Avatar
|
|
54
|
+
=> Select With Avatar
|
|
55
|
+
- isReadonly prop added for SelectedOption component
|
|
56
|
+
- Read-only class added for TextBoxIcon component
|
|
57
|
+
- Removed click action in tag multi select component for read-only case
|
|
58
|
+
- Changed the cursor default to not-allowed in Radio component for read-only case
|
|
35
59
|
# 1.0.0-alpha-226
|
|
36
60
|
|
|
37
61
|
- ListContainer Implemented in => ListItem,ListItemWithAvatar,ListItemWithIcon,ListItemWithRadio,ListItemWithCheckBox
|
|
@@ -66,6 +66,8 @@
|
|
|
66
66
|
--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
|
|
67
67
|
--zdt_button_loading_default_bg: var(--dot_ebonyclay);
|
|
68
68
|
--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
69
|
+
--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
|
|
70
|
+
--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
|
|
69
71
|
|
|
70
72
|
/* button group */
|
|
71
73
|
--zdt_buttongroup_default_bg: var(--dot_ebonyclay);
|
|
@@ -66,6 +66,8 @@
|
|
|
66
66
|
--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
|
|
67
67
|
--zdt_button_loading_default_bg: var(--dot_white);
|
|
68
68
|
--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
|
|
69
|
+
--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
|
|
70
|
+
--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
|
|
69
71
|
|
|
70
72
|
/* button group */
|
|
71
73
|
--zdt_buttongroup_default_bg: var(--dot_white);
|
|
@@ -139,14 +139,13 @@ Animation.defaultProps = {
|
|
|
139
139
|
isActive: false,
|
|
140
140
|
name: 'fadeIn',
|
|
141
141
|
unmountOnExit: true
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
};
|
|
142
|
+
}; // Animation.propTypesDescription = {
|
|
143
|
+
// name: ' ',
|
|
144
|
+
// children: ' ',
|
|
145
|
+
// enterDuration: ' ',
|
|
146
|
+
// exitDuration: ' ',
|
|
147
|
+
// isActive: ' '
|
|
148
|
+
// };
|
|
150
149
|
|
|
151
150
|
if (false) {
|
|
152
151
|
Animation.docs = {
|
package/es/Avatar/Avatar.js
CHANGED
|
@@ -93,7 +93,8 @@ export default class Avatar extends React.Component {
|
|
|
93
93
|
/* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
|
|
94
94
|
|
|
95
95
|
|
|
96
|
-
getInitialByFullName(
|
|
96
|
+
getInitialByFullName() {
|
|
97
|
+
let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
97
98
|
fullName = (fullName || '').trim();
|
|
98
99
|
let nameList = fullName.split(' ');
|
|
99
100
|
|
|
@@ -144,7 +145,7 @@ export default class Avatar extends React.Component {
|
|
|
144
145
|
borderStyle = showAlternateAvatar ? '' : borderStyle;
|
|
145
146
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
146
147
|
className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
|
|
147
|
-
"data-title": needTitle ? title ? title : name :
|
|
148
|
+
"data-title": needTitle ? title ? title : name : null,
|
|
148
149
|
"data-id": dataId,
|
|
149
150
|
onClick: onClick
|
|
150
151
|
}, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
|
|
@@ -196,16 +197,16 @@ Avatar.propTypes = {
|
|
|
196
197
|
customProps: PropTypes.shape({
|
|
197
198
|
AvatarProps: PropTypes.object
|
|
198
199
|
})
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
200
|
+
}; // Avatar.propTypesDescription = {
|
|
201
|
+
// name: ' ',
|
|
202
|
+
// size: ' ',
|
|
203
|
+
// src: ' ',
|
|
204
|
+
// palette: ' ',
|
|
205
|
+
// onClick: ' ',
|
|
206
|
+
// shape: ' ',
|
|
207
|
+
// title: ' '
|
|
208
|
+
// };
|
|
209
|
+
|
|
209
210
|
Avatar.invalidImageURLs = [];
|
|
210
211
|
Avatar.validImageURLs = [];
|
|
211
212
|
|
package/es/Button/Button.js
CHANGED
|
@@ -36,7 +36,7 @@ export default class Button extends React.Component {
|
|
|
36
36
|
let paletteLower = palette.toLowerCase();
|
|
37
37
|
let statusLower = status.toLowerCase();
|
|
38
38
|
let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]}
|
|
39
|
-
${rounded ? style[`${size}Btn${paletteLower}`] : ''}`}` : `${style.default}`;
|
|
39
|
+
${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
|
|
40
40
|
return /*#__PURE__*/React.createElement("button", {
|
|
41
41
|
className: `${customButton} ${classList} ${isBold ? style.bold : ''} `,
|
|
42
42
|
"data-id": disabled ? `${dataId}_disabled` : dataId,
|
|
@@ -45,12 +45,12 @@ export default class Button extends React.Component {
|
|
|
45
45
|
"data-title": title,
|
|
46
46
|
type: "button",
|
|
47
47
|
ref: getRef
|
|
48
|
-
}, children ? children : text,
|
|
48
|
+
}, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
|
|
49
49
|
className: style.overlay
|
|
50
50
|
}, /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`]}` : style.success}`
|
|
51
|
+
className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`
|
|
52
52
|
}, /*#__PURE__*/React.createElement("div", {
|
|
53
|
-
className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`]}` : `${style.successelement} ${style[`${paletteLower}success`]}`}`
|
|
53
|
+
className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`] ? style[`${paletteLower}element`] : ''}` : `${style.successelement} ${style[`${paletteLower}success`] ? style[`${paletteLower}success`] : ''}`}`
|
|
54
54
|
}))));
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -89,18 +89,17 @@ Button.propTypes = {
|
|
|
89
89
|
customStatus: PropTypes.string,
|
|
90
90
|
customStatusSize: PropTypes.string
|
|
91
91
|
})
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
};
|
|
92
|
+
}; // Button.propTypesDescription = {
|
|
93
|
+
// onClick: ' ',
|
|
94
|
+
// text: ' ',
|
|
95
|
+
// palette: ' ',
|
|
96
|
+
// disabled: ' ',
|
|
97
|
+
// size: ' ',
|
|
98
|
+
// rounded: ' ',
|
|
99
|
+
// status: ' ',
|
|
100
|
+
// isBold: ' ',
|
|
101
|
+
// children: ' '
|
|
102
|
+
// };
|
|
104
103
|
|
|
105
104
|
if (false) {
|
|
106
105
|
Button.docs = {
|
|
@@ -362,17 +362,20 @@
|
|
|
362
362
|
|
|
363
363
|
.primaryelement:before {
|
|
364
364
|
--button_loading_bg_color: var(--zdt_button_primaryfill_bg);
|
|
365
|
+
--zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
|
|
365
366
|
transform: rotateX(180deg);
|
|
366
367
|
}
|
|
367
368
|
|
|
368
369
|
.dangerelement:before {
|
|
369
370
|
--button_loading_bg_color: var(--zdt_button_dangerfill_bg);
|
|
371
|
+
--zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
|
|
370
372
|
transform: rotateX(180deg);
|
|
371
373
|
}
|
|
372
374
|
|
|
373
375
|
.primarysuccess {
|
|
374
376
|
--button_success_border_color: var(--zdt_button_default_border);
|
|
375
377
|
}
|
|
378
|
+
|
|
376
379
|
.primaryfilled .successelement {
|
|
377
380
|
--button_success_border_color: var(--zdt_button_tick_primary_border);
|
|
378
381
|
}
|
|
@@ -456,7 +459,6 @@
|
|
|
456
459
|
top: calc(var(--zd_size2) * -1);
|
|
457
460
|
width: var(--zd_size6);
|
|
458
461
|
transform: scaleX(-1) rotate(135deg);
|
|
459
|
-
-ms-transform: scaleX(-1) rotate(135deg);
|
|
460
462
|
-moz-transform: scaleX(-1) rotate(135deg);
|
|
461
463
|
-webkit-transform: scaleX(-1) rotate(135deg);
|
|
462
464
|
transform-origin: center;
|
|
@@ -515,4 +517,6 @@
|
|
|
515
517
|
height: var(--zd_size15);
|
|
516
518
|
width: var(--zd_size6);
|
|
517
519
|
}
|
|
518
|
-
}
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.loader{color:var(--dot_mirror)}
|
package/es/Card/Card.js
CHANGED
|
@@ -278,11 +278,10 @@ Card.defaultProps = {
|
|
|
278
278
|
scrollAt: '10',
|
|
279
279
|
a11y: {},
|
|
280
280
|
isPercentageScroll: false
|
|
281
|
-
};
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
};
|
|
281
|
+
}; // Card.propTypesDescription = {
|
|
282
|
+
// children: ' ',
|
|
283
|
+
// isScrollAttribute: ' '
|
|
284
|
+
// };
|
|
286
285
|
|
|
287
286
|
if (false) {
|
|
288
287
|
Card.docs = {
|
package/es/DateTime/DateTime.js
CHANGED
|
@@ -16,7 +16,8 @@ import { getIsEmptyValue } from '../utils/Common';
|
|
|
16
16
|
import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
|
|
17
17
|
import { getHourDetails } from './dateFormatUtils';
|
|
18
18
|
|
|
19
|
-
function title(date, year, month
|
|
19
|
+
function title(date, year, month) {
|
|
20
|
+
let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
|
20
21
|
const HeadingText = `${monthNames[month] || ''} ${year}`;
|
|
21
22
|
return HeadingText;
|
|
22
23
|
}
|
|
@@ -179,7 +180,8 @@ export default class DateTime extends React.PureComponent {
|
|
|
179
180
|
return hours;
|
|
180
181
|
}
|
|
181
182
|
|
|
182
|
-
handleGetSelectedDate(
|
|
183
|
+
handleGetSelectedDate() {
|
|
184
|
+
let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
183
185
|
const {
|
|
184
186
|
min,
|
|
185
187
|
max,
|
|
@@ -285,7 +287,8 @@ export default class DateTime extends React.PureComponent {
|
|
|
285
287
|
}
|
|
286
288
|
}
|
|
287
289
|
|
|
288
|
-
handleChange(
|
|
290
|
+
handleChange() {
|
|
291
|
+
let selectedInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
289
292
|
const {
|
|
290
293
|
onError,
|
|
291
294
|
onChange,
|
|
@@ -708,7 +708,8 @@ class DateWidgetComponent extends React.Component {
|
|
|
708
708
|
}
|
|
709
709
|
}
|
|
710
710
|
|
|
711
|
-
handleSelection(
|
|
711
|
+
handleSelection() {
|
|
712
|
+
let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
712
713
|
const isAllowedDateType = this.handleGetAllowedType();
|
|
713
714
|
|
|
714
715
|
if (isAllowedDateType) {
|
|
@@ -907,7 +908,9 @@ class DateWidgetComponent extends React.Component {
|
|
|
907
908
|
});
|
|
908
909
|
}
|
|
909
910
|
|
|
910
|
-
handleBlurSelectionRange(
|
|
911
|
+
handleBlurSelectionRange() {
|
|
912
|
+
let focusOrder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
913
|
+
let oldFocusOrder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
911
914
|
const isAllowedDateType = this.handleGetAllowedType();
|
|
912
915
|
|
|
913
916
|
if (isAllowedDateType) {
|
package/es/DateTime/YearView.js
CHANGED
|
@@ -185,11 +185,12 @@ export default class YearView extends React.PureComponent {
|
|
|
185
185
|
onSelectYear && onSelectYear(year);
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
renderListItem({
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
188
|
+
renderListItem(_ref) {
|
|
189
|
+
let {
|
|
190
|
+
index,
|
|
191
|
+
style: virtualizerStyle,
|
|
192
|
+
ref
|
|
193
|
+
} = _ref;
|
|
193
194
|
const {
|
|
194
195
|
years
|
|
195
196
|
} = this;
|
package/es/DateTime/common.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
export function bind(
|
|
1
|
+
export function bind() {
|
|
2
|
+
for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3
|
+
handlers[_key] = arguments[_key];
|
|
4
|
+
}
|
|
5
|
+
|
|
2
6
|
handlers.forEach(handler => {
|
|
3
7
|
this[handler] = this[handler].bind(this);
|
|
4
8
|
});
|
|
5
9
|
}
|
|
6
|
-
export function formatValue(
|
|
10
|
+
export function formatValue() {
|
|
11
|
+
let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
12
|
+
let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
|
|
13
|
+
let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
|
|
7
14
|
return values && values.map(value => {
|
|
8
15
|
let formattedValue = value;
|
|
9
16
|
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import "core-js/modules/es.string.replace";
|
|
2
|
-
|
|
3
1
|
/* eslint-disable no-param-reassign */
|
|
4
2
|
|
|
5
3
|
/** * Libraries ** */
|
|
@@ -14,7 +12,9 @@ import { formatDate } from '../../utils/datetime/common';
|
|
|
14
12
|
import { defaultFormat, supportedPatterns, // patternChangeStr,
|
|
15
13
|
patternSplitStr, INCONSTANT, flags } from '../constants';
|
|
16
14
|
|
|
17
|
-
function getDateFormatString(
|
|
15
|
+
function getDateFormatString() {
|
|
16
|
+
let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
17
|
+
let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
18
18
|
return dateFormatArr.reduce((res, dateStr, index) => {
|
|
19
19
|
const patternStr = datePatternArr[index] || '';
|
|
20
20
|
res += dateStr + patternStr;
|
|
@@ -22,8 +22,14 @@ function getDateFormatString(dateFormatArr = [], datePatternArr = []) {
|
|
|
22
22
|
}, '');
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
function getIsValidPattern(
|
|
26
|
-
|
|
25
|
+
function getIsValidPattern() {
|
|
26
|
+
let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
27
|
+
let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
28
|
+
|
|
29
|
+
const isValueInArray = function () {
|
|
30
|
+
let possibleFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
31
|
+
return possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
|
|
32
|
+
};
|
|
27
33
|
|
|
28
34
|
const haveDay = isValueInArray(flags.day);
|
|
29
35
|
const haveMonth = isValueInArray(flags.month);
|
|
@@ -32,12 +38,14 @@ function getIsValidPattern(dateFormatArr = [], datePatternArr = []) {
|
|
|
32
38
|
return haveDay && haveMonth && (haveYear || !haveYear) && isValidPattern;
|
|
33
39
|
}
|
|
34
40
|
|
|
35
|
-
export function getDateFormatDetails(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
export function getDateFormatDetails() {
|
|
42
|
+
let dateFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
43
|
+
let {
|
|
44
|
+
isHideCurrentYear,
|
|
45
|
+
value,
|
|
46
|
+
timeZone,
|
|
47
|
+
isDateTime
|
|
48
|
+
} = arguments.length > 1 ? arguments[1] : undefined;
|
|
41
49
|
let dayInfo = {};
|
|
42
50
|
let monthInfo = {};
|
|
43
51
|
let yearInfo = {};
|
|
@@ -118,10 +126,11 @@ export function getDateFormatDetails(dateFormat = '', {
|
|
|
118
126
|
};
|
|
119
127
|
}
|
|
120
128
|
|
|
121
|
-
function getDisplayFormatValue(dateVal, formatVal
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
129
|
+
function getDisplayFormatValue(dateVal, formatVal) {
|
|
130
|
+
let {
|
|
131
|
+
i18nShortMonths = [],
|
|
132
|
+
i18nMonths = []
|
|
133
|
+
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
125
134
|
const {
|
|
126
135
|
length,
|
|
127
136
|
type
|
|
@@ -142,10 +151,11 @@ function getDisplayFormatValue(dateVal, formatVal, {
|
|
|
142
151
|
return addZero(dateVal, length);
|
|
143
152
|
}
|
|
144
153
|
|
|
145
|
-
function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
154
|
+
function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
|
|
155
|
+
let {
|
|
156
|
+
i18nShortMonths,
|
|
157
|
+
i18nMonths
|
|
158
|
+
} = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
149
159
|
const dateString = dateFormatArr.reduce((res, formatVal, index) => {
|
|
150
160
|
const {
|
|
151
161
|
type: dateFormatVal = ''
|
|
@@ -162,11 +172,15 @@ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder, {
|
|
|
162
172
|
return dateString;
|
|
163
173
|
}
|
|
164
174
|
|
|
165
|
-
export function getDateTimeString(
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
175
|
+
export function getDateTimeString() {
|
|
176
|
+
let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
177
|
+
let dateFormatDetails = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
178
|
+
let isDateTime = arguments.length > 2 ? arguments[2] : undefined;
|
|
179
|
+
let {
|
|
180
|
+
i18nShortMonths,
|
|
181
|
+
i18nMonths,
|
|
182
|
+
is24Hour
|
|
183
|
+
} = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
170
184
|
const {
|
|
171
185
|
day,
|
|
172
186
|
month,
|
|
@@ -199,9 +213,10 @@ export function getDateTimeString(values = {}, dateFormatDetails = {}, isDateTim
|
|
|
199
213
|
|
|
200
214
|
return `${dateString}${timeString}`;
|
|
201
215
|
}
|
|
202
|
-
export function getDateDetails(value, localValues, isDateTime, timeZone, {
|
|
203
|
-
|
|
204
|
-
|
|
216
|
+
export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
|
|
217
|
+
let {
|
|
218
|
+
is24Hour
|
|
219
|
+
} = _ref;
|
|
205
220
|
const {
|
|
206
221
|
day,
|
|
207
222
|
month,
|
|
@@ -251,9 +266,10 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, {
|
|
|
251
266
|
|
|
252
267
|
return localValues;
|
|
253
268
|
}
|
|
254
|
-
export function getIsValidDate(values, isDateTime, {
|
|
255
|
-
|
|
256
|
-
|
|
269
|
+
export function getIsValidDate(values, isDateTime, _ref2) {
|
|
270
|
+
let {
|
|
271
|
+
is24Hour
|
|
272
|
+
} = _ref2;
|
|
257
273
|
const {
|
|
258
274
|
day,
|
|
259
275
|
month,
|
|
@@ -409,20 +425,22 @@ export function getSelectedDate(values, props) {
|
|
|
409
425
|
};
|
|
410
426
|
}
|
|
411
427
|
|
|
412
|
-
function getDateFormatLength(type, length
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
428
|
+
function getDateFormatLength(type, length) {
|
|
429
|
+
let formatVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
430
|
+
let {
|
|
431
|
+
i18nShortMonths,
|
|
432
|
+
i18nMonths,
|
|
433
|
+
selectedValue,
|
|
434
|
+
day,
|
|
435
|
+
month,
|
|
436
|
+
year,
|
|
437
|
+
hour,
|
|
438
|
+
minute,
|
|
439
|
+
noon,
|
|
440
|
+
timeZone,
|
|
441
|
+
isDateTime,
|
|
442
|
+
is24Hour
|
|
443
|
+
} = arguments.length > 3 ? arguments[3] : undefined;
|
|
426
444
|
const {
|
|
427
445
|
month: selectedMonth
|
|
428
446
|
} = getDateDetails(selectedValue, {
|
|
@@ -449,19 +467,20 @@ function getDateFormatLength(type, length, formatVal = '', {
|
|
|
449
467
|
return length;
|
|
450
468
|
}
|
|
451
469
|
|
|
452
|
-
export function getDateFormatSelection(dateFormatDetails, isDateTime
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
470
|
+
export function getDateFormatSelection(dateFormatDetails, isDateTime) {
|
|
471
|
+
let {
|
|
472
|
+
i18nShortMonths,
|
|
473
|
+
i18nMonths,
|
|
474
|
+
selectedValue,
|
|
475
|
+
day,
|
|
476
|
+
month,
|
|
477
|
+
year,
|
|
478
|
+
hour,
|
|
479
|
+
minute,
|
|
480
|
+
noon,
|
|
481
|
+
timeZone,
|
|
482
|
+
is24Hour
|
|
483
|
+
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
465
484
|
const {
|
|
466
485
|
dateFormatArr = [],
|
|
467
486
|
patternArr = []
|
|
@@ -11,7 +11,9 @@ import { flags, INVALID_DATE } from '../constants';
|
|
|
11
11
|
export function convertYearToTwoDigit(year) {
|
|
12
12
|
return parseInt(year.toString().slice(-2));
|
|
13
13
|
}
|
|
14
|
-
export function addZero(
|
|
14
|
+
export function addZero() {
|
|
15
|
+
let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
16
|
+
let length = arguments.length > 1 ? arguments[1] : undefined;
|
|
15
17
|
let newValue = value.toString();
|
|
16
18
|
|
|
17
19
|
for (let i = 0; i < length; i++) {
|
|
@@ -98,7 +100,9 @@ export function getYearDetails(yearLength) {
|
|
|
98
100
|
currentYear: year
|
|
99
101
|
};
|
|
100
102
|
}
|
|
101
|
-
export function convertTwoDigitToYear(
|
|
103
|
+
export function convertTwoDigitToYear() {
|
|
104
|
+
let digitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
105
|
+
let selectedYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
102
106
|
const dateObj = new Date();
|
|
103
107
|
let year = dateObj.getFullYear();
|
|
104
108
|
const digitValueStr = addZero(digitValue.toString(), 2);
|
|
@@ -191,11 +195,12 @@ export function getIsEmptyYear(value, yearLength) {
|
|
|
191
195
|
} = getYearDetails(yearLength);
|
|
192
196
|
return getIsEmptyValue(value, startPoint, endPoint);
|
|
193
197
|
}
|
|
194
|
-
export function getIsCurrentYear({
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
198
|
+
export function getIsCurrentYear(_ref) {
|
|
199
|
+
let {
|
|
200
|
+
isDateTime,
|
|
201
|
+
value,
|
|
202
|
+
timeZone
|
|
203
|
+
} = _ref;
|
|
199
204
|
let isCurrentYear = false;
|
|
200
205
|
|
|
201
206
|
if (value && value !== INVALID_DATE) {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/** * Methods ** */
|
|
2
2
|
import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from './index';
|
|
3
3
|
import { getIsEmptyValue } from '../../utils/Common';
|
|
4
|
-
export function getChangedHour(values, event, focusOrders, keyActions
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export function getChangedHour(values, event, focusOrders, keyActions) {
|
|
5
|
+
let {
|
|
6
|
+
is24Hour = false
|
|
7
|
+
} = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
|
|
7
8
|
const {
|
|
8
9
|
keyCode,
|
|
9
10
|
which
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/** * Methods ** */
|
|
2
2
|
import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from './index';
|
|
3
|
-
export function getChangedYear(values, event, focusOrders, keyActions, {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
|
|
4
|
+
let {
|
|
5
|
+
yearInfo
|
|
6
|
+
} = _ref;
|
|
6
7
|
const {
|
|
7
8
|
keyCode,
|
|
8
9
|
which
|
package/es/DateTime/validator.js
CHANGED
package/es/DropBox/DropBox.js
CHANGED
|
@@ -66,7 +66,7 @@ export class DropBoxElement extends React.Component {
|
|
|
66
66
|
} = this.props;
|
|
67
67
|
let {
|
|
68
68
|
isReducedMotion
|
|
69
|
-
} = this.context;
|
|
69
|
+
} = this.context || {};
|
|
70
70
|
|
|
71
71
|
if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
|
|
72
72
|
isAbsolutePositioningNeeded = true;
|
|
@@ -212,7 +212,7 @@ export default class DropBox extends React.Component {
|
|
|
212
212
|
} : {};
|
|
213
213
|
const {
|
|
214
214
|
direction
|
|
215
|
-
} = this.context;
|
|
215
|
+
} = this.context || {};
|
|
216
216
|
const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
|
|
217
217
|
isModel: isModel,
|
|
218
218
|
direction: direction
|