@antscorp/antsomi-ui 1.3.3-beta.44 → 1.3.3-beta.45

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/CHANGELOG.md +619 -0
  2. package/dist/index.js +1 -1
  3. package/es/components/molecules/ResizeGrid/ResizeGrid.js +9 -1
  4. package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js +1 -1
  5. package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.d.ts +1 -0
  6. package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js +3 -3
  7. package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.d.ts +1 -0
  8. package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.js +17 -1
  9. package/package.json +1 -1
package/es/components/molecules/ResizeGrid/ResizeGrid.js CHANGED
@@ -52,6 +52,8 @@ export const ResizeGrid = props => {
52
52
  const acceptUpdateRef = useRef(false);
53
53
  const firstChangeRef = useRef(true);
54
54
  const ctrlKeyRef = useRef(false);
55
+ const initRef = useRef(0);
56
+ const initDoneRef = useRef(false);
55
57
  // console.log('grid', grid)
56
58
  function lineVertical(isShow = true, left = 0) {
57
59
  if (verticalLineRef.current && layersRef.current) {
@@ -107,8 +109,11 @@ export const ResizeGrid = props => {
107
109
  }, [grid]);
108
110
  useDeepCompareEffect(() => {
109
111
  // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
110
- if (acceptUpdateRef.current && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
112
+ if ((initRef.current < 2 || !initDoneRef.current || acceptUpdateRef.current) &&
113
+ (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) &&
114
+ (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
111
115
  // console.log('apply change...', buildGrid(initGrid))
116
+ initRef.current += 1;
112
117
  firstChangeRef.current = true;
113
118
  setGrid(buildGrid(initGrid));
114
119
  resetBackgroundCellRef();
@@ -116,6 +121,9 @@ export const ResizeGrid = props => {
116
121
  // eslint-disable-next-line react-hooks/exhaustive-deps
117
122
  }, [initGrid]);
118
123
  useEffect(() => {
124
+ setTimeout(() => {
125
+ initDoneRef.current = true;
126
+ }, 3000);
119
127
  const handleMove = e => {
120
128
  // Resize Grid
121
129
  if (startRef.current && gridRef.current && containerRef.current) {
package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js CHANGED
@@ -44,7 +44,7 @@ export const RichMenuBlock = props => {
44
44
  }
45
45
  }
46
46
  }, PATH);
47
- const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
47
+ const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isPreview: isPreview, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
48
48
  return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange }, Object.assign({}, (isSingleUploadMode && {
49
49
  image: imageUrl,
50
50
  imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.d.ts CHANGED
@@ -4,6 +4,7 @@ interface RichMenuCellProps {
4
4
  cell: TChildrenCell;
5
5
  context: number;
6
6
  isSingleMode: boolean;
7
+ isPreview?: boolean;
7
8
  onClick: (index: number) => void;
8
9
  }
9
10
  export declare const RichMenuCell: FC<RichMenuCellProps>;
package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js CHANGED
@@ -23,14 +23,14 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
23
23
  import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
24
24
  const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuCell';
25
25
  export const RichMenuCell = props => {
26
- const { cell, context, isSingleMode, onClick } = props;
26
+ const { cell, context, isSingleMode, isPreview, onClick } = props;
27
27
  const { areaStyles } = cell;
28
28
  // Translations
29
29
  const { t } = i18nInstance;
30
30
  const renderCellContent = (isShow, cellInfo) => {
31
31
  if (!isShow)
32
32
  return null;
33
- const { image } = cellInfo;
33
+ const { image, active } = cellInfo;
34
34
  const { imageUrl, imageStyles } = image;
35
35
  const { objectPosition, objectFit } = imageStyles, restImageStyles = __rest(imageStyles, ["objectPosition", "objectFit"]);
36
36
  const isBlank = isEmpty(imageUrl);
@@ -38,7 +38,7 @@ export const RichMenuCell = props => {
38
38
  return (React.createElement(AddContainer, null,
39
39
  React.createElement(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }),
40
40
  React.createElement(AddLabel, null, t(translations.cellAction).toString())));
41
- return (React.createElement(CellImage, { src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
41
+ return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
42
42
  };
43
43
  return (React.createElement(CellContainer, { key: context, style: !isSingleMode ? areaStyles : {}, onClick: e => {
44
44
  e.stopPropagation();
package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.d.ts CHANGED
@@ -2,6 +2,7 @@ export declare const CellContainer: import("styled-components").StyledComponent<
2
2
  export declare const AddContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export declare const AddLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
4
4
  export declare const CellImage: import("styled-components").StyledComponent<"div", any, {
5
+ active?: boolean | undefined;
5
6
  src: string;
6
7
  imagePosition: string;
7
8
  imageSize: string;
package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // Libraries
2
- import styled from 'styled-components';
2
+ import styled, { css } from 'styled-components';
3
3
  export const CellContainer = styled.div `
4
4
  width: 100%;
5
5
  height: 100%;
@@ -33,4 +33,20 @@ export const CellImage = styled.div `
33
33
  background-image: url(${({ src }) => src});
34
34
  background-size: ${({ imageSize }) => imageSize};
35
35
  background-position: ${({ imagePosition }) => imagePosition};
36
+
37
+ ${props => props.active &&
38
+ css `
39
+ position: relative;
40
+
41
+ &::after {
42
+ content: '';
43
+ position: absolute;
44
+ top: 0;
45
+ right: 0;
46
+ bottom: 0;
47
+ left: 0;
48
+ background-color: rgba(0, 95, 184, 0.5);
49
+ display: block;
50
+ }
51
+ `}
36
52
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.3-beta.44",
3
+ "version": "1.3.3-beta.45",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",