@antscorp/antsomi-ui 1.3.5-beta.281 → 1.3.5-beta.283

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 (4) hide show
  1. package/es/components/molecules/DrawerDetail/DrawerDetail.js +32 -19
  2. package/es/components/molecules/DrawerDetail/types.d.ts +2 -0
  3. package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js +2 -2
  4. package/package.json +1 -1
package/es/components/molecules/DrawerDetail/DrawerDetail.js CHANGED
@@ -20,9 +20,10 @@ import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMA
20
20
  import { ToggleDrawerSizeButton } from './components';
21
21
  // Hooks
22
22
  import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
23
+ import { ConfigProvider } from 'antd';
23
24
  export const DrawerDetail = props => {
24
25
  // Props
25
- const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth"]);
26
+ const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max' } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize"]);
26
27
  const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
27
28
  const { onClose = () => { } } = props;
28
29
  const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
@@ -32,8 +33,19 @@ export const DrawerDetail = props => {
32
33
  const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
33
34
  // Effects
34
35
  useEffect(() => {
35
- toggleCollapseDrawer(!matchesSmallScreen);
36
- }, [matchesSmallScreen, toggleCollapseDrawer]);
36
+ if (matchesSmallScreen) {
37
+ toggleCollapseDrawer(false);
38
+ }
39
+ switch (defaultSize) {
40
+ case 'max':
41
+ toggleCollapseDrawer(false);
42
+ break;
43
+ case 'min':
44
+ default:
45
+ toggleCollapseDrawer(true);
46
+ break;
47
+ }
48
+ }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
37
49
  // Memo
38
50
  const drawerWidth = useMemo(() => {
39
51
  if (fullScreen)
@@ -63,22 +75,23 @@ export const DrawerDetail = props => {
63
75
  }
64
76
  }
65
77
  }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
66
- return (React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
67
- body: 'drawer-detail-body',
68
- } }),
69
- showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
70
- onCloseIconClick(e);
71
- onClose(e);
78
+ return (React.createElement(ConfigProvider, { theme: { components: { Drawer: { motionDurationSlow: '0ms' } } } },
79
+ React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
80
+ body: 'drawer-detail-body',
72
81
  } }),
73
- React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
74
- showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
75
- showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
76
- React.createElement("div", null,
77
- showClose && (React.createElement(CloseBtn, { onClick: onClose },
78
- React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
79
- React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
80
- React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
81
- React.createElement(MenuFooter, null, footer))),
82
- React.createElement(Content, null, children)));
82
+ showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
83
+ onCloseIconClick(e);
84
+ onClose(e);
85
+ } }),
86
+ React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
87
+ showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
88
+ showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
89
+ React.createElement("div", null,
90
+ showClose && (React.createElement(CloseBtn, { onClick: onClose },
91
+ React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
92
+ React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
93
+ React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
94
+ React.createElement(MenuFooter, null, footer))),
95
+ React.createElement(Content, null, children))));
83
96
  };
84
97
  DrawerDetail.defaultProps = {};
package/es/components/molecules/DrawerDetail/types.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import type { DrawerProps, MenuProps as AntdProps } from 'antd';
3
3
  import { ItemType } from 'antd/es/menu/hooks/useItems';
4
+ export type TDefaultSize = 'max' | 'min';
4
5
  export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
5
6
  fullScreen?: boolean;
6
7
  maxWidth?: string | number;
7
8
  minWidth?: string | number;
9
+ defaultSize?: TDefaultSize;
8
10
  menuProps?: DrawerDetailMenuProps;
9
11
  closeIconProps?: DrawerDetailCloseIconProps;
10
12
  }
package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js CHANGED
@@ -104,7 +104,7 @@ export const ImageSlider = props => {
104
104
  e.target.files = new DataTransfer().files;
105
105
  message.error({
106
106
  content: 'File size too big',
107
- style: { fontSize: '11px', fontFamily: 'Roboto' },
107
+ style: { fontSize: '12px', fontFamily: 'Roboto' },
108
108
  });
109
109
  return;
110
110
  }
@@ -120,7 +120,7 @@ export const ImageSlider = props => {
120
120
  if (((_b = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files[0].size) > SIZE_LIMIT) {
121
121
  message.error({
122
122
  content: 'File size too big',
123
- style: { fontSize: '11px', fontFamily: 'Roboto' },
123
+ style: { fontSize: '12px', fontFamily: 'Roboto' },
124
124
  });
125
125
  return;
126
126
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.281",
3
+ "version": "1.3.5-beta.283",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",