Merge branch 'release' into 'master'
Release Closes #37 and #36 See merge request theappsmith/internal-tools-client!48
This commit is contained in:
Abhinav Jha
commit
56771a81e1
|
|
@ -1,10 +1,3 @@
|
|||
## GIT Commit Hooks
|
||||
|
||||
This project has scripts to ESLint fix and Prettier write the code on the git commit hook.
|
||||
It is recommended to install ESLint and Prettier global for successful git commits
|
||||
|
||||
`yarn global add eslint`
|
||||
`yarn global add prettier`
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
|
|
|
|||
|
|
@ -39,13 +39,13 @@
|
|||
"node-sass": "^4.11.0",
|
||||
"normalizr": "^3.3.0",
|
||||
"prettier": "^1.18.2",
|
||||
"re-resizable": "^6.0.0",
|
||||
"react": "^16.7.0",
|
||||
"react-dnd": "^9.3.4",
|
||||
"react-dnd-html5-backend": "^9.3.4",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-netlify-identity": "^0.1.9",
|
||||
"react-redux": "^6.0.0",
|
||||
"react-rnd": "^10.1.1",
|
||||
"react-router": "^5.0.1",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-scripts": "^3.1.1",
|
||||
|
|
@ -83,7 +83,6 @@
|
|||
"eslint-config-react": "^1.1.7",
|
||||
"eslint-plugin-prettier": "^3.1.0",
|
||||
"eslint-plugin-react": "^7.14.3",
|
||||
"icon-font-generator": "^2.1.10",
|
||||
"redux-devtools": "^3.5.0",
|
||||
"redux-devtools-extension": "^2.13.8"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { FetchPageRequest } from "../api/PageApi";
|
||||
import { ResponseMeta } from "../api/ApiResponses";
|
||||
import { RenderMode } from "../constants/WidgetConstants";
|
||||
import { WidgetProps, WidgetOperation } from "../widgets/BaseWidget";
|
||||
import { WidgetType } from "../constants/WidgetConstants";
|
||||
|
|
@ -8,7 +7,6 @@ import {
|
|||
ReduxAction,
|
||||
UpdateCanvasPayload,
|
||||
SavePagePayload,
|
||||
SavePageErrorPayload,
|
||||
SavePageSuccessPayload,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import { ContainerWidgetProps } from "../widgets/ContainerWidget";
|
||||
|
|
@ -26,13 +24,6 @@ export const fetchPage = (
|
|||
};
|
||||
};
|
||||
|
||||
export const fetchPageError = (payload: ResponseMeta) => {
|
||||
return {
|
||||
type: ReduxActionTypes.FETCH_PAGE_ERROR,
|
||||
payload,
|
||||
};
|
||||
};
|
||||
|
||||
export const addWidget = (
|
||||
pageId: string,
|
||||
widget: WidgetProps,
|
||||
|
|
@ -86,13 +77,6 @@ export const savePageSuccess = (payload: SavePageSuccessPayload) => {
|
|||
};
|
||||
};
|
||||
|
||||
export const savePageError = (payload: SavePageErrorPayload) => {
|
||||
return {
|
||||
type: ReduxActionTypes.SAVE_PAGE_ERROR,
|
||||
payload,
|
||||
};
|
||||
};
|
||||
|
||||
export type WidgetAddChild = {
|
||||
widgetId: string;
|
||||
type: WidgetType;
|
||||
|
|
@ -108,12 +92,13 @@ export type WidgetMove = {
|
|||
widgetId: string;
|
||||
leftColumn: number;
|
||||
topRow: number;
|
||||
parentId: string;
|
||||
/*
|
||||
If parentWidgetId is different from what we have in redux store,
|
||||
If newParentId is different from what we have in redux store,
|
||||
then we have to delete this,
|
||||
as it has been dropped in another container somewhere.
|
||||
*/
|
||||
parentWidgetId: string;
|
||||
newParentId: string;
|
||||
};
|
||||
|
||||
export type WidgetRemoveChild = {
|
||||
|
|
@ -123,12 +108,15 @@ export type WidgetRemoveChild = {
|
|||
|
||||
export type WidgetDelete = {
|
||||
widgetId: string;
|
||||
parentId: string;
|
||||
};
|
||||
|
||||
export type WidgetResize = {
|
||||
widgetId: string;
|
||||
width: number; // delta/diff
|
||||
height: number; // delta/diff
|
||||
leftColumn: number;
|
||||
rightColumn: number;
|
||||
topRow: number;
|
||||
bottomRow: number;
|
||||
};
|
||||
|
||||
export const updateWidget = (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import { ReduxActionTypes } from "../constants/ReduxActionConstants";
|
||||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxActionErrorTypes,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import { WidgetCardProps } from "../widgets/BaseWidget";
|
||||
|
||||
export const fetchWidgetCards = () => {
|
||||
|
|
@ -9,7 +12,7 @@ export const fetchWidgetCards = () => {
|
|||
|
||||
export const errorFetchingWidgetCards = (error: any) => {
|
||||
return {
|
||||
type: ReduxActionTypes.ERROR_FETCHING_WIDGET_CARDS,
|
||||
type: ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
|
@ -18,7 +21,7 @@ export const successFetchingWidgetCards = (cards: {
|
|||
[id: string]: WidgetCardProps[];
|
||||
}) => {
|
||||
return {
|
||||
type: ReduxActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
|
||||
type: ReduxActionTypes.FETCH_WIDGET_CARDS_SUCCESS,
|
||||
cards,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export type FetchPageResponse = ApiResponse & {
|
|||
};
|
||||
};
|
||||
|
||||
export interface SavePageResponse {
|
||||
export interface SavePageResponse extends ApiResponse {
|
||||
pageId: string;
|
||||
}
|
||||
|
||||
|
|
|
|||
3
app/client/src/assets/icons/control/address.svg
Normal file
3
app/client/src/assets/icons/control/address.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 14.4479C12 14.0035 11.9707 13.5955 11.9121 13.224C11.8535 12.8524 11.7575 12.4948 11.624 12.151C11.4906 11.8073 11.2936 11.5365 11.0332 11.3385C10.7728 11.1406 10.457 11.0417 10.0859 11.0417C10.0469 11.0694 9.94922 11.1319 9.79297 11.2292C9.63672 11.3264 9.51465 11.401 9.42676 11.4531C9.33887 11.5052 9.22331 11.566 9.08008 11.6354C8.93685 11.7049 8.79688 11.7552 8.66016 11.7865C8.52344 11.8177 8.38672 11.8333 8.25 11.8333C8.11329 11.8333 7.97657 11.8177 7.83985 11.7865C7.70313 11.7552 7.56316 11.7049 7.41993 11.6354C7.2767 11.566 7.16114 11.5052 7.07325 11.4531C6.98536 11.401 6.86329 11.3264 6.70704 11.2292C6.55079 11.1319 6.45313 11.0694 6.41407 11.0417C6.04297 11.0417 5.72722 11.1406 5.4668 11.3385C5.20638 11.5365 5.00944 11.8073 4.87598 12.151C4.74252 12.4948 4.64649 12.8524 4.5879 13.224C4.5293 13.5955 4.5 14.0035 4.5 14.4479C4.5 14.8924 4.62045 15.2621 4.86133 15.5573C5.10222 15.8524 5.39844 16 5.75 16H10.75C11.1016 16 11.3978 15.8524 11.6387 15.5573C11.8796 15.2621 12 14.8924 12 14.4479ZM10.4668 9.03125C10.4668 8.37847 10.2503 7.82118 9.81739 7.35937C9.38444 6.89756 8.86198 6.66666 8.25 6.66666C7.63803 6.66666 7.11556 6.89756 6.68262 7.35937C6.24968 7.82118 6.03321 8.37847 6.03321 9.03125C6.03321 9.68402 6.24968 10.2413 6.68262 10.7031C7.11556 11.1649 7.63803 11.3958 8.25 11.3958C8.86198 11.3958 9.38444 11.1649 9.81739 10.7031C10.2503 10.2413 10.4668 9.68402 10.4668 9.03125ZM19.5 14.3333V13.6667C19.5 13.5694 19.4707 13.4896 19.4121 13.4271C19.3535 13.3646 19.2787 13.3333 19.1875 13.3333H13.5625C13.4714 13.3333 13.3965 13.3646 13.3379 13.4271C13.2793 13.4896 13.25 13.5694 13.25 13.6667V14.3333C13.25 14.4306 13.2793 14.5104 13.3379 14.5729C13.3965 14.6354 13.4714 14.6667 13.5625 14.6667H19.1875C19.2787 14.6667 19.3535 14.6354 19.4121 14.5729C19.4707 14.5104 19.5 14.4306 19.5 14.3333ZM19.5 11.625V11.0417C19.5 10.9375 19.4658 10.849 19.3975 10.776C19.3291 10.7031 19.2461 10.6667 19.1484 10.6667H13.6016C13.5039 10.6667 13.4209 10.7031 13.3525 10.776C13.2842 10.849 13.25 10.9375 13.25 11.0417V11.625C13.25 11.7292 13.2842 11.8177 13.3525 11.8906C13.4209 11.9635 13.5039 12 13.6016 12H19.1484C19.2461 12 19.3291 11.9635 19.3975 11.8906C19.4658 11.8177 19.5 11.7292 19.5 11.625ZM19.5 9V8.33333C19.5 8.23611 19.4707 8.15625 19.4121 8.09375C19.3535 8.03125 19.2787 8 19.1875 8H13.5625C13.4714 8 13.3965 8.03125 13.3379 8.09375C13.2793 8.15625 13.25 8.23611 13.25 8.33333V9C13.25 9.09722 13.2793 9.17708 13.3379 9.23958C13.3965 9.30208 13.4714 9.33333 13.5625 9.33333H19.1875C19.2787 9.33333 19.3535 9.30208 19.4121 9.23958C19.4707 9.17708 19.5 9.09722 19.5 9ZM22 5.66666V18.3333C22 18.7917 21.847 19.184 21.541 19.5104C21.235 19.8368 20.8672 20 20.4375 20H17V19C17 18.9028 16.9707 18.8229 16.9121 18.7604C16.8535 18.6979 16.7787 18.6667 16.6875 18.6667H16.0625C15.9714 18.6667 15.8965 18.6979 15.8379 18.7604C15.7793 18.8229 15.75 18.9028 15.75 19V20H8.25V19C8.25 18.9028 8.22071 18.8229 8.16211 18.7604C8.10352 18.6979 8.02865 18.6667 7.9375 18.6667H7.3125C7.22136 18.6667 7.14649 18.6979 7.0879 18.7604C7.0293 18.8229 7 18.9028 7 19V20H3.5625C3.13282 20 2.76498 19.8368 2.45899 19.5104C2.153 19.184 2 18.7917 2 18.3333V5.66666C2 5.20833 2.153 4.81597 2.45899 4.48958C2.76498 4.16319 3.13282 4 3.5625 4H20.4375C20.8672 4 21.235 4.16319 21.541 4.48958C21.847 4.81597 22 5.20833 22 5.66666Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
3
app/client/src/assets/icons/control/bold.svg
Normal file
3
app/client/src/assets/icons/control/bold.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.7157 11.7348C15.3655 11.2472 15.9313 10.4625 15.9313 9.20802V9.17591C15.9313 8.37853 15.6636 7.68599 15.1358 7.1175C15.1333 7.11477 15.1307 7.11208 15.1281 7.10944C14.4137 6.38363 13.3447 6 12.0367 6H8.38389C8.17185 6 8 6.17185 8 6.38389V17.6161C8 17.8281 8.17185 18 8.38389 18H12.2369C13.4903 18 14.5529 17.6923 15.3098 17.1101C16.1092 16.4953 16.5317 15.6105 16.5317 14.5514V14.5192C16.5317 13.2609 15.9075 12.3103 14.7157 11.7348ZM12.2677 16.093H9.96879V12.8974H12.0521C12.8939 12.8974 13.5595 13.0489 13.9771 13.3355C14.3506 13.5919 14.5322 13.9528 14.5322 14.439V14.4711C14.5322 15.935 12.9485 16.093 12.2677 16.093ZM11.8356 11.0064H9.96879V7.90703H11.929C13.2017 7.90703 13.9317 8.43385 13.9317 9.35241V9.38449C13.9316 10.7957 12.6184 11.0064 11.8356 11.0064Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 900 B |
3
app/client/src/assets/icons/control/center-align.svg
Normal file
3
app/client/src/assets/icons/control/center-align.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.88889 5.93433H18.1111C18.602 5.93433 19 6.3323 19 6.82322V7.04544C19 7.53636 18.602 7.93433 18.1111 7.93433H5.88889C5.39797 7.93433 5 7.53636 5 7.04544V6.82322C5 6.3323 5.39797 5.93433 5.88889 5.93433ZM8.74314 10.9343H15.2569C15.7478 10.9343 16.1457 11.3323 16.1457 11.8232V12.0454C16.1457 12.5364 15.7478 12.9343 15.2569 12.9343H8.74314C8.25222 12.9343 7.85425 12.5364 7.85425 12.0454V11.8232C7.85425 11.3323 8.25222 10.9343 8.74314 10.9343ZM5.88889 15.9343H18.1111C18.602 15.9343 19 16.3323 19 16.8232V17.0454C19 17.5364 18.602 17.9343 18.1111 17.9343H5.88889C5.39797 17.9343 5 17.5364 5 17.0454V16.8232C5 16.3323 5.39797 15.9343 5.88889 15.9343Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 782 B |
3
app/client/src/assets/icons/control/chevron-down.svg
Normal file
3
app/client/src/assets/icons/control/chevron-down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 15.5C11.8684 15.5008 11.7379 15.4755 11.6161 15.4258C11.4943 15.376 11.3834 15.3027 11.29 15.21L7.29 11.21C7.19676 11.1168 7.1228 11.0061 7.07234 10.8843C7.02188 10.7624 6.99591 10.6319 6.99591 10.5C6.99591 10.3681 7.02188 10.2376 7.07234 10.1158C7.1228 9.99393 7.19676 9.88324 7.29 9.79C7.38324 9.69676 7.49393 9.6228 7.61575 9.57234C7.73758 9.52188 7.86814 9.49591 8 9.49591C8.13186 9.49591 8.26243 9.52188 8.38425 9.57234C8.50607 9.6228 8.61676 9.69676 8.71 9.79L12 13.1L15.3 9.92C15.392 9.81771 15.5041 9.7355 15.6293 9.67852C15.7545 9.62153 15.8902 9.59099 16.0277 9.58881C16.1653 9.58664 16.3018 9.61286 16.4287 9.66585C16.5557 9.71884 16.6704 9.79746 16.7655 9.89678C16.8607 9.99611 16.9344 10.114 16.9819 10.2431C17.0295 10.3722 17.0499 10.5097 17.0418 10.647C17.0338 10.7844 16.9975 10.9186 16.9353 11.0413C16.873 11.1639 16.7861 11.2724 16.68 11.36L12.68 15.22C12.4971 15.3963 12.254 15.4964 12 15.5Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
4
app/client/src/assets/icons/control/copy.svg
Normal file
4
app/client/src/assets/icons/control/copy.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1Z" fill="#BCCCD9"/>
|
||||
<path d="M8 7V21H19V7H8ZM8 5H19C19.5304 5 20.0391 5.21071 20.4142 5.58579C20.7893 5.96086 21 6.46957 21 7V21C21 21.5304 20.7893 22.0391 20.4142 22.4142C20.0391 22.7893 19.5304 23 19 23H8C7.46957 23 6.96086 22.7893 6.58579 22.4142C6.21071 22.0391 6 21.5304 6 21V7C6 6.46957 6.21071 5.96086 6.58579 5.58579C6.96086 5.21071 7.46957 5 8 5Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 521 B |
3
app/client/src/assets/icons/control/currency.svg
Normal file
3
app/client/src/assets/icons/control/currency.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 15H9C9 16.084 10.374 17 12 17C13.626 17 15 16.084 15 15C15 13.901 13.962 13.521 11.757 12.97C9.637 12.44 7 11.78 7 9C7 7.212 8.474 5.695 10.5 5.184V3H13.5V5.184C15.526 5.694 17 7.212 17 9H15C15 7.916 13.626 7 12 7C10.374 7 9 7.916 9 9C9 10.1 10.039 10.479 12.243 11.03C14.363 11.56 17 12.22 17 15C17 16.788 15.526 18.305 13.5 18.816V21H10.5V18.816C8.474 18.306 7 16.788 7 15Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
3
app/client/src/assets/icons/control/datepicker.svg
Normal file
3
app/client/src/assets/icons/control/datepicker.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.625 3.1875C17.625 3.80882 18.1287 4.3125 18.75 4.3125H19.3125C20.2445 4.3125 21 5.06802 21 6V19.1875C21 20.2921 20.1046 21.1875 19 21.1875H5C3.89543 21.1875 3 20.2921 3 19.1875V6C3 5.06802 3.75552 4.3125 4.6875 4.3125H5.25C5.87132 4.3125 6.375 3.80882 6.375 3.1875C6.375 2.72625 6.54375 2.3325 6.87 1.995C7.19625 1.66875 7.60125 1.5 8.0625 1.5C8.52375 1.5 8.92875 1.66875 9.255 1.995C9.58125 2.3325 9.75 2.72625 9.75 3.1875C9.75 3.80882 10.2537 4.3125 10.875 4.3125H13.125C13.7463 4.3125 14.25 3.80882 14.25 3.1875C14.25 2.72625 14.4187 2.3325 14.745 1.995C15.0712 1.66875 15.4762 1.5 15.9375 1.5C16.3988 1.5 16.8038 1.66875 17.13 1.995C17.4563 2.3325 17.625 2.72625 17.625 3.1875ZM7.5 3.1875V6C7.49863 6.07425 7.51224 6.14801 7.54002 6.21687C7.5678 6.28574 7.60918 6.3483 7.66169 6.40081C7.7142 6.45332 7.77676 6.4947 7.84563 6.52248C7.91449 6.55026 7.98825 6.56387 8.0625 6.5625C8.13675 6.56387 8.21051 6.55026 8.27937 6.52248C8.34824 6.4947 8.4108 6.45332 8.46331 6.40081C8.51582 6.3483 8.5572 6.28574 8.58498 6.21687C8.61276 6.14801 8.62637 6.07425 8.625 6V3.1875C8.625 3.03 8.56875 2.895 8.45625 2.79375C8.355 2.68125 8.22 2.625 8.0625 2.625C7.905 2.625 7.77 2.68125 7.66875 2.79375C7.55625 2.895 7.5 3.03 7.5 3.1875ZM15.375 3.1875V6C15.375 6.1575 15.4313 6.2925 15.5325 6.405C15.645 6.50625 15.78 6.5625 15.9375 6.5625C16.095 6.5625 16.23 6.50625 16.3425 6.405C16.4437 6.2925 16.5 6.1575 16.5 6V3.1875C16.5014 3.11325 16.4878 3.03949 16.46 2.97063C16.4322 2.90176 16.3908 2.8392 16.3383 2.78669C16.2858 2.73418 16.2232 2.6928 16.1544 2.66502C16.0855 2.63724 16.0117 2.62363 15.9375 2.625C15.8633 2.62363 15.7895 2.63724 15.7206 2.66502C15.6518 2.6928 15.5892 2.73418 15.5367 2.78669C15.4842 2.8392 15.4428 2.90176 15.415 2.97063C15.3872 3.03949 15.3736 3.11325 15.375 3.1875ZM17.875 20.0625C18.9796 20.0625 19.875 19.1671 19.875 18.0625V10.8125C19.875 9.70793 18.9796 8.8125 17.875 8.8125H6.125C5.02043 8.8125 4.125 9.70793 4.125 10.8125V18.0625C4.125 19.1671 5.02043 20.0625 6.125 20.0625H17.875ZM7.5 9.9375C8.12132 9.9375 8.625 10.4412 8.625 11.0625C8.625 11.6838 8.12132 12.1875 7.5 12.1875C6.87868 12.1875 6.375 11.6838 6.375 11.0625C6.375 10.4412 6.87868 9.9375 7.5 9.9375ZM10.875 11.0625C10.875 10.4412 11.3787 9.9375 12 9.9375C12.6213 9.9375 13.125 10.4412 13.125 11.0625C13.125 11.6838 12.6213 12.1875 12 12.1875C11.3787 12.1875 10.875 11.6838 10.875 11.0625ZM16.5 12.1875C15.8787 12.1875 15.375 11.6838 15.375 11.0625C15.375 10.4412 15.8787 9.9375 16.5 9.9375C17.1213 9.9375 17.625 10.4412 17.625 11.0625C17.625 11.6838 17.1213 12.1875 16.5 12.1875ZM7.5 13.3125C8.12132 13.3125 8.625 13.8162 8.625 14.4375C8.625 15.0588 8.12132 15.5625 7.5 15.5625C6.87868 15.5625 6.375 15.0588 6.375 14.4375C6.375 13.8162 6.87868 13.3125 7.5 13.3125ZM10.875 14.4375C10.875 13.8162 11.3787 13.3125 12 13.3125C12.6213 13.3125 13.125 13.8162 13.125 14.4375C13.125 15.0588 12.6213 15.5625 12 15.5625C11.3787 15.5625 10.875 15.0588 10.875 14.4375ZM16.5 15.5625C15.8787 15.5625 15.375 15.0588 15.375 14.4375C15.375 13.8162 15.8787 13.3125 16.5 13.3125C17.1213 13.3125 17.625 13.8162 17.625 14.4375C17.625 15.0588 17.1213 15.5625 16.5 15.5625ZM7.5 16.6875C8.12132 16.6875 8.625 17.1912 8.625 17.8125C8.625 18.4338 8.12132 18.9375 7.5 18.9375C6.87868 18.9375 6.375 18.4338 6.375 17.8125C6.375 17.1912 6.87868 16.6875 7.5 16.6875ZM13.125 17.8125C13.125 18.4338 12.6213 18.9375 12 18.9375C11.3787 18.9375 10.875 18.4338 10.875 17.8125C10.875 17.1912 11.3787 16.6875 12 16.6875C12.6213 16.6875 13.125 17.1912 13.125 17.8125ZM17.625 17.8125C17.625 18.4338 17.1213 18.9375 16.5 18.9375C15.8787 18.9375 15.375 18.4338 15.375 17.8125C15.375 17.1912 15.8787 16.6875 16.5 16.6875C17.1213 16.6875 17.625 17.1912 17.625 17.8125Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
3
app/client/src/assets/icons/control/decimal.svg
Normal file
3
app/client/src/assets/icons/control/decimal.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.4123 12.3086C7.4123 12.3623 7.4123 12.416 7.4123 12.4746C7.4123 14.1152 6.9582 14.999 6.11836 14.999C5.57148 14.999 5.19063 14.623 4.99043 13.9053L7.4123 12.3086ZM4.8293 12.6504C4.8293 12.5918 4.8293 12.5332 4.8293 12.4746C4.8293 10.8389 5.2834 9.9502 6.11836 9.9502C6.67012 9.9502 7.05098 10.3311 7.25117 11.0537L4.8293 12.6504ZM6.11836 8.80273C4.42891 8.80273 3.47188 10.126 3.47188 12.4746C3.47188 14.8232 4.42891 16.1465 6.11836 16.1465C7.8127 16.1465 8.76973 14.8232 8.76973 12.4746C8.76973 10.126 7.8127 8.80273 6.11836 8.80273ZM13 16.0928C13.5908 16.0928 14.0742 15.5947 14.0742 14.9941C14.0742 14.3887 13.5908 13.8906 13 13.8906C12.4092 13.8906 11.9258 14.3887 11.9258 14.9941C11.9258 15.5947 12.4092 16.0928 13 16.0928ZM20.8143 14.8428V8.9541H19.4568L17.5525 10.2285V11.5371L19.3689 10.3311H19.4568V14.8428H17.5574V16H19.4568H20.8143H22.616V14.8428H20.8143Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1000 B |
4
app/client/src/assets/icons/control/delete.svg
Normal file
4
app/client/src/assets/icons/control/delete.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="10" cy="10" r="10" fill="#21282C"/>
|
||||
<path d="M11.75 5.5H14C14.45 5.5 14.75 5.8 14.75 6.25V7H5V6.25C5 5.8 5.375 5.5 5.75 5.5H8C8.15 4.675 8.975 4 9.875 4C10.775 4 11.6 4.675 11.75 5.5ZM8.75 5.5H11C10.85 5.05 10.325 4.75 9.875 4.75C9.425 4.75 8.9 5.05 8.75 5.5ZM5.75 7.75H14L13.325 15.325C13.325 15.7 12.95 16 12.575 16H7.175C6.8 16 6.5 15.7 6.425 15.325L5.75 7.75Z" fill="#F2FAFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 497 B |
3
app/client/src/assets/icons/control/email.svg
Normal file
3
app/client/src/assets/icons/control/email.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 4H2V20H22V4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 178 B |
3
app/client/src/assets/icons/control/info.svg
Normal file
3
app/client/src/assets/icons/control/info.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 351 B |
4
app/client/src/assets/icons/control/input.svg
Normal file
4
app/client/src/assets/icons/control/input.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 7.5C24 6.6 23.4 6 22.5 6H1.5C0.6 6 0 6.6 0 7.5V16.5C0 17.4 0.6 18 1.5 18H22.5C23.4 18 24 17.4 24 16.5V7.5ZM22.5 16.5H1.5V7.5H22.5V16.5Z" fill="#BCCCD9"/>
|
||||
<path d="M3 9H4.5V15H3V9Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 314 B |
3
app/client/src/assets/icons/control/integer.svg
Normal file
3
app/client/src/assets/icons/control/integer.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.02344 14.8428V8.9541H5.66602L3.76172 10.2285V11.5371L5.57812 10.3311H5.66602V14.8428H3.7666V16H5.66602H7.02344H8.8252V14.8428H7.02344ZM10.4432 11.0781V11.1074H11.7322V11.0732C11.7322 10.3994 12.201 9.94043 12.8992 9.94043C13.5828 9.94043 14.0271 10.3408 14.0271 10.9512C14.0271 11.4248 13.7781 11.7959 12.8162 12.7578L10.5213 15.0283V16H15.4871V14.833H12.4061V14.7451L13.783 13.4316C14.9744 12.2891 15.3797 11.6299 15.3797 10.8584C15.3797 9.6377 14.3982 8.8125 12.9432 8.8125C11.4637 8.8125 10.4432 9.73047 10.4432 11.0781ZM18.9947 12.9092H19.8346C20.6451 12.9092 21.1676 13.3145 21.1676 13.9443C21.1676 14.5645 20.6549 14.96 19.8492 14.96C19.0924 14.96 18.5846 14.5791 18.5357 13.9785H17.2516C17.315 15.2969 18.3502 16.1416 19.8883 16.1416C21.4654 16.1416 22.5445 15.2871 22.5445 14.0371C22.5445 13.1045 21.9781 12.4795 21.026 12.3672V12.2793C21.7975 12.123 22.2711 11.5127 22.2711 10.6826C22.2711 9.56934 21.2994 8.8125 19.8687 8.8125C18.3795 8.8125 17.4371 9.62305 17.3883 10.9463H18.6236C18.6676 10.3262 19.1314 9.93066 19.8248 9.93066C20.5328 9.93066 20.982 10.3018 20.982 10.8877C20.982 11.4785 20.523 11.8643 19.8199 11.8643H18.9947V12.9092Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
app/client/src/assets/icons/control/italics.svg
Normal file
3
app/client/src/assets/icons/control/italics.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.841 16.2857H11.9343L13.5975 7.71429H14.6883C14.7878 7.71429 14.8841 7.67972 14.9608 7.6165C15.0376 7.55328 15.09 7.46535 15.109 7.36776L15.2762 6.51062C15.3278 6.246 15.1252 6 14.8555 6H10.577C10.4776 6 10.3812 6.03457 10.3045 6.09779C10.2277 6.16101 10.1754 6.24894 10.1563 6.34653L9.98914 7.20367C9.93752 7.46829 10.1402 7.71429 10.4098 7.71429H11.3164L9.65325 16.2857H8.59599C8.49657 16.2857 8.40024 16.3203 8.3235 16.3835C8.24676 16.4467 8.19439 16.5346 8.17534 16.6322L8.00807 17.4893C7.95645 17.754 8.15908 18 8.42874 18H12.6737C12.7731 18 12.8695 17.9654 12.9462 17.9022C13.0229 17.839 13.0753 17.7511 13.0944 17.6535L13.2616 16.7964C13.3132 16.5317 13.1106 16.2857 12.841 16.2857Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 823 B |
3
app/client/src/assets/icons/control/left-align.svg
Normal file
3
app/client/src/assets/icons/control/left-align.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.1112 6H5.88894C5.39802 6 5.00005 6.39797 5.00005 6.88889V7.11111C5.00005 7.60203 5.39802 8 5.88894 8H18.1112C18.6021 8 19 7.60203 19 7.11111V6.88889C19 6.39797 18.6021 6 18.1112 6ZM13.1112 11H5.88894C5.39802 11 5.00005 11.398 5.00005 11.8889V12.1111C5.00005 12.602 5.39802 13 5.88894 13H13.1112C13.6021 13 14 12.602 14 12.1111V11.8889C14 11.398 13.6021 11 13.1112 11ZM18.1112 16H5.88894C5.39802 16 5.00005 16.398 5.00005 16.8889V17.1111C5.00005 17.602 5.39802 18 5.88894 18H18.1112C18.6021 18 19 17.602 19 17.1111V16.8889C19 16.398 18.6021 16 18.1112 16Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 689 B |
4
app/client/src/assets/icons/control/move.svg
Normal file
4
app/client/src/assets/icons/control/move.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="10" cy="10" r="10" fill="#21282C"/>
|
||||
<path d="M16 10L13.3333 12.6667V10.6667H10.6667V13.3333H12.6667L10 16L7.33333 13.3333H9.33333V10.6667H6.66667V12.6667L4 10L6.66667 7.33333V9.33333H9.33333V6.66667H7.33333L10 4L12.6667 6.66667H10.6667V9.33333H13.3333V7.33333L16 10Z" fill="#F2FAFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 400 B |
8
app/client/src/assets/icons/control/multiline.svg
Normal file
8
app/client/src/assets/icons/control/multiline.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 15.7895C22 16.2546 21.623 16.6316 21.1579 16.6316H2.84211C2.37702 16.6316 2 16.2546 2 15.7895C2 15.3244 2.37702 14.9474 2.84211 14.9474H21.1579C21.623 14.9474 22 15.3244 22 15.7895Z" fill="#BCCCD9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 19.1579C22 19.623 21.623 20 21.1579 20H2.84211C2.37702 20 2 19.623 2 19.1579C2 18.6928 2.37702 18.3158 2.84211 18.3158H21.1579C21.623 18.3158 22 18.6928 22 19.1579Z" fill="#BCCCD9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 4.84211C22 5.30719 21.623 5.68421 21.1579 5.68421H15.3421C14.877 5.68421 14.5 5.30719 14.5 4.84211C14.5 4.37702 14.877 4 15.3421 4H21.1579C21.623 4 22 4.37702 22 4.84211Z" fill="#BCCCD9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 8.21052C22 8.6756 21.623 9.05263 21.1579 9.05263H15.3421C14.877 9.05263 14.5 8.6756 14.5 8.21052C14.5 7.74544 14.877 7.36842 15.3421 7.36842H21.1579C21.623 7.36842 22 7.74544 22 8.21052Z" fill="#BCCCD9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 11.579C22 12.044 21.623 12.4211 21.1579 12.4211H15.3421C14.877 12.4211 14.5 12.044 14.5 11.579C14.5 11.1139 14.877 10.7368 15.3421 10.7368H21.1579C21.623 10.7368 22 11.1139 22 11.579Z" fill="#BCCCD9"/>
|
||||
<path d="M5.31543 12.421L5.73657 10.7372H8.09253L8.50146 12.421H11.0771L8.52588 4.00203H5.49854L2.92896 12.421H5.31543ZM6.98779 6.0559L7.6958 9.01026H6.14551L6.87183 6.0559H6.98779Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
9
app/client/src/assets/icons/control/password.svg
Normal file
9
app/client/src/assets/icons/control/password.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5C11.173 13.5 10.5 12.827 10.5 12C10.5 11.173 11.173 10.5 12 10.5C12.827 10.5 13.5 11.173 13.5 12C13.5 12.827 12.827 13.5 12 13.5ZM12 8.5C10.07 8.5 8.5 10.07 8.5 12C8.5 13.93 10.07 15.5 12 15.5C13.93 15.5 15.5 13.93 15.5 12C15.5 10.07 13.93 8.5 12 8.5ZM12.2197 16.9976C7.9137 17.0976 5.1047 13.4146 4.1727 11.9956C5.1987 10.3906 7.7827 7.1046 11.7807 7.0026C16.0697 6.8936 18.8947 10.5856 19.8267 12.0046C18.8017 13.6096 16.2167 16.8956 12.2197 16.9976ZM21.8677 11.5026C21.2297 10.3906 17.7057 4.8166 11.7297 5.0036C6.2017 5.1436 2.9867 10.0136 2.1327 11.5026C1.9557 11.8106 1.9557 12.1896 2.1327 12.4976C2.7617 13.5946 6.1617 18.9996 12.0247 18.9996C12.1067 18.9996 12.1887 18.9986 12.2707 18.9966C17.7977 18.8556 21.0137 13.9866 21.8677 12.4976C22.0437 12.1896 22.0437 11.8106 21.8677 11.5026Z" fill="#BCCCD9"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="20" height="15">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.5C11.173 13.5 10.5 12.827 10.5 12C10.5 11.173 11.173 10.5 12 10.5C12.827 10.5 13.5 11.173 13.5 12C13.5 12.827 12.827 13.5 12 13.5ZM12 8.5C10.07 8.5 8.5 10.07 8.5 12C8.5 13.93 10.07 15.5 12 15.5C13.93 15.5 15.5 13.93 15.5 12C15.5 10.07 13.93 8.5 12 8.5ZM12.2197 16.9976C7.9137 17.0976 5.1047 13.4146 4.1727 11.9956C5.1987 10.3906 7.7827 7.1046 11.7807 7.0026C16.0697 6.8936 18.8947 10.5856 19.8267 12.0046C18.8017 13.6096 16.2167 16.8956 12.2197 16.9976ZM21.8677 11.5026C21.2297 10.3906 17.7057 4.8166 11.7297 5.0036C6.2017 5.1436 2.9867 10.0136 2.1327 11.5026C1.9557 11.8106 1.9557 12.1896 2.1327 12.4976C2.7617 13.5946 6.1617 18.9996 12.0247 18.9996C12.1067 18.9996 12.1887 18.9986 12.2707 18.9966C17.7977 18.8556 21.0137 13.9866 21.8677 12.4976C22.0437 12.1896 22.0437 11.8106 21.8677 11.5026Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<rect width="24" height="24" fill="#BCCCD9"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
3
app/client/src/assets/icons/control/phone.svg
Normal file
3
app/client/src/assets/icons/control/phone.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.23 15.26L16.69 14.97C16.3913 14.9349 16.0886 14.968 15.8046 15.0667C15.5205 15.1654 15.2625 15.3273 15.05 15.54L13.21 17.38C10.3712 15.9362 8.06378 13.6288 6.61999 10.79L8.47 8.94C8.89999 8.51 9.10999 7.91 9.03999 7.3L8.74999 4.78C8.6933 4.29218 8.45919 3.84224 8.09223 3.51585C7.72527 3.18946 7.2511 3.00942 6.76 3.01H5.03C3.9 3.01 2.95999 3.95 3.02999 5.08C3.55999 13.62 10.39 20.44 18.92 20.97C20.05 21.04 20.99 20.1 20.99 18.97V17.24C21 16.23 20.24 15.38 19.23 15.26Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 606 B |
3
app/client/src/assets/icons/control/redo.svg
Normal file
3
app/client/src/assets/icons/control/redo.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.4129 18.9997C5.60096 19.0051 5.78522 18.946 5.93501 18.8322C6.0848 18.7184 6.19107 18.5566 6.23615 18.374C6.60682 16.9053 7.42309 15.5874 8.57285 14.6013C9.7226 13.6151 11.1495 13.0091 12.6575 12.8665V13.7885C12.6576 14.0769 12.7428 14.3588 12.9024 14.599C13.062 14.8391 13.289 15.0268 13.5548 15.1386C13.843 15.2711 14.1634 15.3175 14.4775 15.2723C14.7915 15.227 15.0857 15.092 15.3248 14.8834L19.4904 11.2529C19.6501 11.1169 19.7784 10.9478 19.8664 10.7573C19.9544 10.5669 19.9999 10.3596 19.9999 10.1498C19.9999 9.93996 19.9544 9.73266 19.8664 9.54219C19.7784 9.35173 19.6501 9.18264 19.4904 9.04662L15.3248 5.40787C15.0825 5.19573 14.7834 5.05927 14.4645 5.01537C14.1455 4.97148 13.8206 5.02207 13.5301 5.1609C13.2643 5.27268 13.0373 5.46041 12.8777 5.70057C12.7181 5.94073 12.6329 6.22265 12.6328 6.51102V7.47422C10.3966 7.64711 8.30655 8.65185 6.7749 10.2902C5.24325 11.9285 4.38131 14.0814 4.35915 16.3241C4.36028 17.0153 4.44598 17.7037 4.61435 18.374C4.65943 18.5566 4.7657 18.7184 4.91549 18.8322C5.06528 18.946 5.24954 19.0051 5.4376 18.9997H5.4129Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
app/client/src/assets/icons/control/right-align.svg
Normal file
3
app/client/src/assets/icons/control/right-align.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.88889 6H18.1111C18.602 6 19 6.39797 19 6.88889V7.11111C19 7.60203 18.602 8 18.1111 8H5.88889C5.39797 8 5 7.60203 5 7.11111V6.88889C5 6.39797 5.39797 6 5.88889 6ZM10.8889 11H18.1111C18.602 11 19 11.398 19 11.8889V12.1111C19 12.602 18.602 13 18.1111 13H10.8889C10.398 13 10 12.602 10 12.1111V11.8889C10 11.398 10.398 11 10.8889 11ZM5.88889 16H18.1111C18.602 16 19 16.398 19 16.8889V17.1111C19 17.602 18.602 18 18.1111 18H5.88889C5.39797 18 5 17.602 5 17.1111V16.8889C5 16.398 5.39797 16 5.88889 16Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 630 B |
3
app/client/src/assets/icons/control/search.svg
Normal file
3
app/client/src/assets/icons/control/search.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 560 B |
3
app/client/src/assets/icons/control/underline.svg
Normal file
3
app/client/src/assets/icons/control/underline.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2 15.4286C9.8795 15.4286 8 13.6203 8 11.3878V6.7619C8 6.34112 8.34112 6 8.7619 6H8.98808C9.40887 6 9.74999 6.34112 9.74999 6.7619V11.3878C9.74999 12.6909 10.8455 13.7449 12.2 13.7449C13.5545 13.7449 14.65 12.6909 14.65 11.3878V6.7619C14.65 6.34112 14.9911 6 15.4119 6H15.6381C16.0589 6 16.4 6.34112 16.4 6.7619V11.3878C16.4 13.6203 14.5205 15.4286 12.2 15.4286ZM8.7619 16.2857H15.8095C16.2303 16.2857 16.5714 16.6268 16.5714 17.0476V17.2381C16.5714 17.6589 16.2303 18 15.8095 18H8.7619C8.34112 18 8 17.6589 8 17.2381V17.0476C8 16.6268 8.34112 16.2857 8.7619 16.2857Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 701 B |
3
app/client/src/assets/icons/control/undo.svg
Normal file
3
app/client/src/assets/icons/control/undo.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.5871 18.9997C18.399 19.0051 18.2148 18.946 18.065 18.8322C17.9152 18.7184 17.8089 18.5566 17.7639 18.374C17.3932 16.9053 16.5769 15.5874 15.4272 14.6013C14.2774 13.6151 12.8505 13.0091 11.3425 12.8665V13.7885C11.3424 14.0769 11.2572 14.3588 11.0976 14.599C10.938 14.8391 10.711 15.0268 10.4452 15.1386C10.157 15.2711 9.83655 15.3175 9.52255 15.2723C9.20855 15.227 8.91431 15.092 8.67523 14.8834L4.50961 11.2529C4.34987 11.1169 4.22158 10.9478 4.1336 10.7573C4.04562 10.5669 4.00006 10.3596 4.00006 10.1498C4.00006 9.93996 4.04562 9.73266 4.1336 9.54219C4.22158 9.35173 4.34987 9.18264 4.50961 9.04662L8.67523 5.40787C8.91745 5.19573 9.21656 5.05927 9.53554 5.01537C9.85453 4.97148 10.1794 5.02207 10.4699 5.1609C10.7357 5.27268 10.9627 5.46041 11.1223 5.70057C11.2819 5.94073 11.3671 6.22265 11.3672 6.51102V7.47422C13.6034 7.64711 15.6934 8.65185 17.2251 10.2902C18.7567 11.9285 19.6187 14.0814 19.6409 16.3241C19.6397 17.0153 19.554 17.7037 19.3856 18.374C19.3406 18.5566 19.2343 18.7184 19.0845 18.8322C18.9347 18.946 18.7505 19.0051 18.5624 18.9997H18.5871Z" fill="#BCCCD9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
app/client/src/assets/icons/control/zoomin.svg
Normal file
3
app/client/src/assets/icons/control/zoomin.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12H12V13C12 13.55 11.55 14 11 14C10.45 14 10 13.55 10 13V12H9C8.45 12 8 11.55 8 11C8 10.45 8.45 10 9 10H10V9C10 8.45 10.45 8 11 8C11.55 8 12 8.45 12 9V10H13C13.55 10 14 10.45 14 11C14 11.55 13.55 12 13 12ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z" fill="#A3B3BF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
3
app/client/src/assets/icons/control/zoomout.svg
Normal file
3
app/client/src/assets/icons/control/zoomout.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12H9C8.45 12 8 11.55 8 11C8 10.45 8.45 10 9 10H13C13.55 10 14 10.45 14 11C14 11.55 13.55 12 13 12ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z" fill="#A3B3BF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 562 B |
|
|
@ -35,13 +35,13 @@ export const getEditorConfigs = () => {
|
|||
return {
|
||||
currentPageId: "5d807e7f795dc6000482bc78",
|
||||
currentLayoutId: "5d807e7f795dc6000482bc77",
|
||||
currentPageName: "page1",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
currentPageId: "5d807e76795dc6000482bc76",
|
||||
currentLayoutId: "5d807e76795dc6000482bc75",
|
||||
currentPageName: "page1",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
console.log("here", process.env.NODE_ENV);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export const Colors: Record<string, string> = {
|
|||
RED: "#CE4257",
|
||||
PURPLE: "#6871EF",
|
||||
OXFORD_BLUE: "#2E3D49",
|
||||
FRENCH_PASS: "#BBE8FE",
|
||||
};
|
||||
|
||||
export type Color = (typeof Colors)[keyof typeof Colors];
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export type Theme = {
|
|||
};
|
||||
|
||||
export const theme: Theme = {
|
||||
radii: [0, 4, 8, 10, 20],
|
||||
radii: [0, 4, 8, 10, 20, 50],
|
||||
fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64],
|
||||
spaces: [0, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
|
||||
spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
|
||||
fontWeights: [0, 400, 500, 700],
|
||||
colors: {
|
||||
primary: Colors.GREEN,
|
||||
|
|
@ -38,15 +38,16 @@ export const theme: Theme = {
|
|||
border: Colors.GEYSER,
|
||||
paneCard: Colors.SHARK,
|
||||
paneBG: Colors.OUTER_SPACE,
|
||||
grid: Colors.POLAR,
|
||||
grid: Colors.GEYSER,
|
||||
containerBorder: Colors.FRENCH_PASS,
|
||||
},
|
||||
lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80],
|
||||
fonts: [FontFamilies.DMSans, FontFamilies.AppsmithWidget],
|
||||
borders: [
|
||||
{
|
||||
thickness: "2px",
|
||||
style: "dashed",
|
||||
color: Colors.POLAR,
|
||||
thickness: "1px",
|
||||
style: "solid",
|
||||
color: Colors.FRENCH_PASS,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
|
||||
|
||||
export const ReduxActionTypes: { [key: string]: string } = {
|
||||
REPORT_ERROR: "REPORT_ERROR",
|
||||
FLUSH_ERRORS: "FLUSH_ERRORS",
|
||||
UPDATE_CANVAS: "UPDATE_CANVAS",
|
||||
FETCH_CANVAS: "FETCH_CANVAS",
|
||||
CLEAR_CANVAS: "CLEAR_CANVAS",
|
||||
|
|
@ -16,8 +18,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
|
|||
LOAD_PROPERTY_CONFIG: "LOAD_PROPERTY_CONFIG",
|
||||
PUBLISH: "PUBLISH",
|
||||
FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
|
||||
SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
|
||||
ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS",
|
||||
FETCH_WIDGET_CARDS_SUCCESS: "FETCH_WIDGET_CARDS_SUCCESS",
|
||||
ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET",
|
||||
REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET",
|
||||
LOAD_API_RESPONSE: "LOAD_API_RESPONSE",
|
||||
|
|
@ -26,8 +27,6 @@ export const ReduxActionTypes: { [key: string]: string } = {
|
|||
LOAD_CANVAS_ACTIONS: "LOAD_CANVAS_ACTIONS",
|
||||
SAVE_PAGE_INIT: "SAVE_PAGE_INIT",
|
||||
SAVE_PAGE_SUCCESS: "SAVE_PAGE_SUCCESS",
|
||||
SAVE_PAGE_ERROR: "SAVE_PAGE_ERROR",
|
||||
FETCH_PAGE_ERROR: "FETCH_PAGE_ERROR",
|
||||
UPDATE_LAYOUT: "UPDATE_LAYOUT",
|
||||
WIDGET_ADD_CHILD: "WIDGET_ADD_CHILD",
|
||||
WIDGET_REMOVE_CHILD: "WIDGET_REMOVE_CHILD",
|
||||
|
|
@ -37,18 +36,38 @@ export const ReduxActionTypes: { [key: string]: string } = {
|
|||
SHOW_PROPERTY_PANE: "SHOW_PROPERTY_PANE",
|
||||
UPDATE_WIDGET_PROPERTY: "UPDATE_WIDGET_PROPERTY",
|
||||
};
|
||||
|
||||
export type ReduxActionType = (typeof ReduxActionTypes)[keyof typeof ReduxActionTypes];
|
||||
|
||||
export const ReduxActionErrorTypes: { [key: string]: string } = {
|
||||
API_ERROR: "API_ERROR",
|
||||
WIDGET_DELETE_ERROR: "WIDGET_DELETE_ERROR",
|
||||
WIDGET_MOVE_ERROR: "WIDGET_MOVE_ERROR",
|
||||
WIDGET_RESIZE_ERROR: "WIDGET_RESIZE_ERROR",
|
||||
WIDGET_REMOVE_CHILD_ERROR: "WIDGET_REMOVE_CHILD_ERROR",
|
||||
WIDGET_ADD_CHILD_ERROR: "WIDGET_ADD_CHILD_ERROR",
|
||||
FETCH_PAGE_ERROR: "FETCH_PAGE_ERROR",
|
||||
SAVE_PAGE_ERROR: "SAVE_PAGE_ERROR",
|
||||
FETCH_WIDGET_CARDS_ERROR: "FETCH_WIDGET_CARDS_ERROR",
|
||||
WIDGET_OPERATION_ERROR: "WIDGET_OPERATION_ERROR",
|
||||
};
|
||||
export type ReduxActionErrorType = (typeof ReduxActionErrorTypes)[keyof typeof ReduxActionErrorTypes];
|
||||
|
||||
export interface ReduxAction<T> {
|
||||
type: ReduxActionType;
|
||||
type: ReduxActionType | ReduxActionErrorType;
|
||||
payload: T;
|
||||
}
|
||||
|
||||
export interface ReduxActionErrorPayload {
|
||||
message: string;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export interface UpdateCanvasPayload {
|
||||
pageWidgetId: string;
|
||||
widgets: { [widgetId: string]: WidgetProps };
|
||||
layoutId: string;
|
||||
currentLayoutId: string;
|
||||
currentPageId: string;
|
||||
currentPageName: string;
|
||||
}
|
||||
|
||||
export interface ShowPropertyPanePayload {
|
||||
|
|
|
|||
|
|
@ -71,4 +71,5 @@ export const GridDefaults = {
|
|||
DEFAULT_WIDGET_HEIGHT: 100,
|
||||
DEFAULT_GRID_COLUMNS: 16,
|
||||
DEFAULT_GRID_ROWS: 32,
|
||||
DEFAULT_GRID_ROW_HEIGHT: 40,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ export interface BaseStyle {
|
|||
|
||||
export interface ComponentProps {
|
||||
widgetId: string;
|
||||
widgetName?: string;
|
||||
style: BaseStyle;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import * as React from "react";
|
||||
import React from "react";
|
||||
import { Button, MaybeElement } from "@blueprintjs/core";
|
||||
import { TextComponentProps } from "./TextComponent";
|
||||
import { Container } from "./ContainerComponent";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ComponentProps } from "./BaseComponent";
|
||||
import { ContainerOrientation } from "../constants/WidgetConstants";
|
||||
import styled from "../constants/DefaultTheme";
|
||||
import React from "react";
|
||||
import React, { createContext, Context, useRef } from "react";
|
||||
|
||||
export const Container = styled("div")<ContainerProps>`
|
||||
display: flex;
|
||||
|
|
@ -13,15 +13,44 @@ export const Container = styled("div")<ContainerProps>`
|
|||
position: ${props => {
|
||||
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative";
|
||||
}};
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: ${props => props.theme.spaces[8]}px ${props =>
|
||||
props.theme.spaces[1]}px ${props => props.theme.spaces[1]}px;
|
||||
&:after {
|
||||
content: "${props => props.widgetName}";
|
||||
position: absolute;
|
||||
left: ${props => props.theme.spaces[1]}px;
|
||||
top: ${props => props.theme.spaces[1]}px;
|
||||
font-size: ${props => props.theme.fontSizes[2]}px;
|
||||
color: ${props => props.theme.colors.containerBorder};
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ParentBoundsContext: Context<{
|
||||
boundingParent?: React.RefObject<HTMLDivElement>;
|
||||
}> = createContext({});
|
||||
|
||||
const ContainerComponent = (props: ContainerProps) => {
|
||||
return <Container {...props}>{props.children}</Container>;
|
||||
const container = useRef(null);
|
||||
|
||||
return (
|
||||
<ParentBoundsContext.Provider value={{ boundingParent: container }}>
|
||||
<Container ref={container} {...props}>
|
||||
{props.children}
|
||||
</Container>
|
||||
</ParentBoundsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export interface ContainerProps extends ComponentProps {
|
||||
children?: JSX.Element[] | JSX.Element;
|
||||
orientation?: ContainerOrientation;
|
||||
isRoot?: boolean;
|
||||
}
|
||||
|
||||
export default ContainerComponent;
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@ import { useDragLayer, XYCoord } from "react-dnd";
|
|||
import DropZone from "./Dropzone";
|
||||
import { noCollision } from "../utils/WidgetPropsUtils";
|
||||
import { OccupiedSpace } from "../widgets/ContainerWidget";
|
||||
import DropTargetMask from "./DropTargetMask";
|
||||
|
||||
const WrappedDragLayer = styled.div`
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
|
@ -23,6 +24,8 @@ type DragLayerProps = {
|
|||
visible: boolean;
|
||||
dropTargetOffset: XYCoord;
|
||||
occupiedSpaces: OccupiedSpace[] | null;
|
||||
onBoundsUpdate: Function;
|
||||
isOver: boolean;
|
||||
};
|
||||
|
||||
const DragLayerComponent = (props: DragLayerProps) => {
|
||||
|
|
@ -54,8 +57,15 @@ const DragLayerComponent = (props: DragLayerProps) => {
|
|||
}
|
||||
return (
|
||||
<WrappedDragLayer>
|
||||
<DropTargetMask
|
||||
rowHeight={props.parentRowHeight}
|
||||
columnWidth={props.parentColumnWidth}
|
||||
setBounds={props.onBoundsUpdate}
|
||||
showGrid={isDragging && props.isOver}
|
||||
/>
|
||||
<DropZone
|
||||
{...props}
|
||||
visible={props.visible && props.isOver}
|
||||
width={widgetWidth}
|
||||
height={widgetHeight}
|
||||
currentOffset={currentOffset as XYCoord}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,69 @@
|
|||
import React from "react";
|
||||
import { Icon } from "@blueprintjs/core";
|
||||
import React, { useContext, createContext, useState, Context } from "react";
|
||||
import styled from "styled-components";
|
||||
import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
|
||||
import { useDrag, DragPreviewImage, DragSourceMonitor } from "react-dnd";
|
||||
import blankImage from "../assets/images/blank.png";
|
||||
import { ContainerProps } from "./ContainerComponent";
|
||||
import { FocusContext } from "../pages/Editor/Canvas";
|
||||
import { WidgetFunctionsContext } from "../pages/Editor";
|
||||
import { ControlIcons } from "../icons/ControlIcons";
|
||||
import { theme } from "../constants/DefaultTheme";
|
||||
|
||||
// FontSizes array in DefaultTheme.tsx
|
||||
// Change this to toggle the size of delete and move handles.
|
||||
const CONTROL_THEME_FONTSIZE_INDEX = 6;
|
||||
|
||||
const DraggableWrapper = styled.div<{ show: boolean }>`
|
||||
& > div.control {
|
||||
display: ${props => (props.show ? "block" : "none")};
|
||||
}
|
||||
display: block;
|
||||
`;
|
||||
|
||||
const DragHandle = styled.div`
|
||||
position: absolute;
|
||||
left: ${props => props.theme.spaces[2]}px;
|
||||
top: -${props => props.theme.spaces[8]}px;
|
||||
left: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
|
||||
top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
|
||||
cursor: move;
|
||||
display: none;
|
||||
cursor: grab;
|
||||
z-index: 11;
|
||||
`;
|
||||
|
||||
const DeleteControl = styled.div`
|
||||
position: absolute;
|
||||
right: ${props => props.theme.spaces[2]}px;
|
||||
top: -${props => props.theme.spaces[8]}px;
|
||||
right: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
|
||||
top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
z-index: 11;
|
||||
`;
|
||||
|
||||
const moveControlIcon = ControlIcons.MOVE_CONTROL({
|
||||
width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
|
||||
height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
|
||||
});
|
||||
|
||||
const deleteControlIcon = ControlIcons.DELETE_CONTROL({
|
||||
width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
|
||||
height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
|
||||
});
|
||||
|
||||
type DraggableComponentProps = WidgetProps & ContainerProps;
|
||||
|
||||
export const ResizingContext: Context<{
|
||||
setIsResizing?: Function;
|
||||
}> = createContext({});
|
||||
|
||||
const DraggableComponent = (props: DraggableComponentProps) => {
|
||||
const { isFocused, setFocus } = useContext(FocusContext);
|
||||
const { updateWidget } = useContext(WidgetFunctionsContext);
|
||||
const [isResizing, setIsResizing] = useState(false);
|
||||
const deleteWidget = () => {
|
||||
props.updateWidget &&
|
||||
props.updateWidget(WidgetOperations.DELETE, props.widgetId);
|
||||
updateWidget &&
|
||||
updateWidget(WidgetOperations.DELETE, props.widgetId, {
|
||||
parentId: props.parentId,
|
||||
});
|
||||
};
|
||||
const [{ isDragging }, drag, preview] = useDrag({
|
||||
item: props,
|
||||
|
|
@ -32,11 +71,19 @@ const DraggableComponent = (props: DraggableComponentProps) => {
|
|||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ResizingContext.Provider value={{ setIsResizing }}>
|
||||
<DragPreviewImage src={blankImage} connect={preview} />
|
||||
<div
|
||||
<DraggableWrapper
|
||||
ref={preview}
|
||||
onClick={(e: any) => {
|
||||
if (setFocus) {
|
||||
setFocus(props.widgetId);
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
show={props.widgetId === isFocused && !isResizing}
|
||||
style={{
|
||||
display: isDragging ? "none" : "flex",
|
||||
flexDirection: "column",
|
||||
|
|
@ -47,17 +94,21 @@ const DraggableComponent = (props: DraggableComponentProps) => {
|
|||
top: props.style
|
||||
? props.style.yPosition + props.style.yPositionUnit
|
||||
: 0,
|
||||
minWidth:
|
||||
props.style.componentWidth + (props.style.widthUnit || "px"),
|
||||
minHeight:
|
||||
props.style.componentHeight + (props.style.heightUnit || "px"),
|
||||
}}
|
||||
>
|
||||
<DragHandle ref={drag}>
|
||||
<Icon icon="drag-handle-horizontal" iconSize={20} />
|
||||
<DragHandle className="control" ref={drag}>
|
||||
{moveControlIcon}
|
||||
</DragHandle>
|
||||
<DeleteControl onClick={deleteWidget}>
|
||||
<Icon icon="trash" iconSize={20} />
|
||||
<DeleteControl className="control" onClick={deleteWidget}>
|
||||
{deleteControlIcon}
|
||||
</DeleteControl>
|
||||
{props.children}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</DraggableWrapper>
|
||||
</ResizingContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState, useContext } from "react";
|
||||
import { WidgetProps } from "../widgets/BaseWidget";
|
||||
import { OccupiedSpace } from "../widgets/ContainerWidget";
|
||||
import { WidgetConfigProps } from "../reducers/entityReducers/widgetConfigReducer";
|
||||
import { useDrop, XYCoord } from "react-dnd";
|
||||
import { ContainerProps } from "./ContainerComponent";
|
||||
import WidgetFactory from "../utils/WidgetFactory";
|
||||
|
||||
import { widgetOperationParams, noCollision } from "../utils/WidgetPropsUtils";
|
||||
import DragLayerComponent from "./DragLayerComponent";
|
||||
import DropTargetMask from "./DropTargetMask";
|
||||
import { WidgetFunctionsContext } from "../pages/Editor";
|
||||
|
||||
type DropTargetComponentProps = ContainerProps & {
|
||||
updateWidget?: Function;
|
||||
|
|
@ -29,15 +28,15 @@ type DropTargetBounds = {
|
|||
export const DropTargetComponent = (props: DropTargetComponentProps) => {
|
||||
// Hook to keep the offset of the drop target container in state
|
||||
const [dropTargetOffset, setDropTargetOffset] = useState({ x: 0, y: 0 });
|
||||
|
||||
const { updateWidget } = useContext(WidgetFunctionsContext);
|
||||
// Make this component a drop target
|
||||
const [{ isOver }, drop] = useDrop({
|
||||
const [{ isOver, isExactlyOver }, drop] = useDrop({
|
||||
accept: Object.values(WidgetFactory.getWidgetTypes()),
|
||||
drop(widget: WidgetProps & Partial<WidgetConfigProps>, monitor) {
|
||||
// Make sure we're dropping in this container.
|
||||
if (isOver && monitor.canDrop()) {
|
||||
props.updateWidget &&
|
||||
props.updateWidget(
|
||||
if (isOver) {
|
||||
updateWidget &&
|
||||
updateWidget(
|
||||
...widgetOperationParams(
|
||||
widget,
|
||||
monitor.getClientOffset() as XYCoord,
|
||||
|
|
@ -52,13 +51,18 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
|
|||
},
|
||||
// Collect isOver for ui transforms when hovering over this component
|
||||
collect: monitor => ({
|
||||
isOver: !!monitor.isOver({ shallow: true }),
|
||||
isOver:
|
||||
(monitor.isOver({ shallow: true }) &&
|
||||
props.widgetId !== monitor.getItem().widgetId) ||
|
||||
(monitor.isOver() && props.widgetId !== monitor.getItem().widgetId),
|
||||
isExactlyOver: monitor.isOver({ shallow: true }),
|
||||
}),
|
||||
// Only allow drop if the drag object is directly over this component
|
||||
// As opposed to the drag object being over a child component, or outside the component bounds
|
||||
// Also only if the dropzone does not overlap any existing children
|
||||
canDrop: (widget, monitor) => {
|
||||
if (monitor.isOver({ shallow: true })) {
|
||||
// Check if the draggable is the same as the dropTarget
|
||||
if (isOver) {
|
||||
return noCollision(
|
||||
monitor.getClientOffset() as XYCoord,
|
||||
props.snapColumnSpace,
|
||||
|
|
@ -84,27 +88,31 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
|
|||
return (
|
||||
<div
|
||||
ref={drop}
|
||||
className="dropTarget"
|
||||
style={{
|
||||
position: "relative",
|
||||
left: props.style.xPosition + props.style.xPositionUnit,
|
||||
height: props.style.componentHeight,
|
||||
width: props.style.componentWidth,
|
||||
top: props.style.yPosition + props.style.yPositionUnit,
|
||||
left: 0,
|
||||
height: props.isRoot
|
||||
? props.style.componentHeight + (props.style.heightUnit || "px")
|
||||
: "100%",
|
||||
width: props.isRoot
|
||||
? props.style.componentWidth + (props.style.widthUnit || "px")
|
||||
: "100%",
|
||||
top: 0,
|
||||
background: "white",
|
||||
}}
|
||||
>
|
||||
<DropTargetMask
|
||||
rowHeight={props.snapRowSpace}
|
||||
columnWidth={props.snapColumnSpace}
|
||||
setBounds={handleBoundsUpdate}
|
||||
/>
|
||||
<DragLayerComponent
|
||||
parentOffset={dropTargetOffset}
|
||||
parentRowHeight={props.snapRowSpace}
|
||||
parentColumnWidth={props.snapColumnSpace}
|
||||
visible={isOver}
|
||||
isOver={isExactlyOver}
|
||||
dropTargetOffset={dropTargetOffset}
|
||||
occupiedSpaces={props.occupiedSpaces}
|
||||
onBoundsUpdate={handleBoundsUpdate}
|
||||
/>
|
||||
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React, { useLayoutEffect, MutableRefObject } from "react";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
type DropTargetMaskProps = {
|
||||
rowHeight: number;
|
||||
columnWidth: number;
|
||||
setBounds: Function;
|
||||
showGrid: boolean;
|
||||
};
|
||||
|
||||
export const DropTargetMaskWrapper = styled.div<DropTargetMaskProps>`
|
||||
|
|
@ -16,13 +17,19 @@ export const DropTargetMaskWrapper = styled.div<DropTargetMaskProps>`
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
${props => props.theme.colors.grid} 2px,
|
||||
transparent 0
|
||||
);
|
||||
background-size: ${props => props.columnWidth}px ${props => props.rowHeight}px;
|
||||
background-position: -50% -50%;
|
||||
${props =>
|
||||
props.showGrid &&
|
||||
css`
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
${props => props.theme.colors.grid} 2px,
|
||||
transparent 0
|
||||
);
|
||||
background-size: ${props => props.columnWidth}px
|
||||
${props => props.rowHeight}px;
|
||||
background-position: -${props => props.columnWidth / 2}px -${props =>
|
||||
props.rowHeight / 2}px;
|
||||
`}
|
||||
`;
|
||||
/* eslint-disable react/display-name */
|
||||
export const DropTargetMask = (props: DropTargetMaskProps) => {
|
||||
|
|
@ -38,7 +45,6 @@ export const DropTargetMask = (props: DropTargetMaskProps) => {
|
|||
props.setBounds(rect);
|
||||
}
|
||||
});
|
||||
|
||||
return <DropTargetMaskWrapper {...props} ref={dropTargetMask} />;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@ import React from "react";
|
|||
import { XYCoord } from "react-dnd";
|
||||
import styled from "styled-components";
|
||||
import { snapToGrid } from "../utils/helpers";
|
||||
import { theme } from "../constants/DefaultTheme";
|
||||
|
||||
const DropZoneWrapper = styled.div`
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
z-index: 10;
|
||||
background: ${props => props.theme.colors.hover};
|
||||
border: 1px dashed ${props => props.theme.colors.textAnchor};
|
||||
opacity: 0.7;
|
||||
|
|
@ -57,7 +58,7 @@ export const DropZone = (props: DropZoneProps) => {
|
|||
width: wrapperProps.width + "px",
|
||||
top: wrapperProps.top + "px",
|
||||
height: wrapperProps.height + "px",
|
||||
background: props.canDrop ? "blue" : "red",
|
||||
background: props.canDrop ? theme.colors.hover : theme.colors.error,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,46 +1,94 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Icon } from "@blueprintjs/core";
|
||||
import { Resizable, ResizeDirection } from "re-resizable";
|
||||
import { Rnd } from "react-rnd";
|
||||
import { XYCoord } from "react-dnd";
|
||||
import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
|
||||
import { ContainerProps } from "./ContainerComponent";
|
||||
import { ContainerProps, ParentBoundsContext } from "./ContainerComponent";
|
||||
import { ResizingContext } from "./DraggableComponent";
|
||||
import { WidgetFunctionsContext } from "../pages/Editor";
|
||||
|
||||
export type ResizableComponentProps = WidgetProps & ContainerProps;
|
||||
|
||||
const ResizableContainer = styled(Resizable)`
|
||||
const ResizableContainer = styled(Rnd)`
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border: ${props => {
|
||||
return Object.values(props.theme.borders[0]).join(" ");
|
||||
}};
|
||||
&:after,
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: ${props => props.theme.spaces[2]}px;
|
||||
height: ${props => props.theme.spaces[2]}px;
|
||||
border-radius: ${props => props.theme.radii[5]}%;
|
||||
z-index: 9;
|
||||
background: ${props => props.theme.colors.containerBorder};
|
||||
}
|
||||
&:after {
|
||||
right: -${props => props.theme.spaces[1]}px;
|
||||
top: calc(50% - ${props => props.theme.spaces[1]}px);
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: calc(50% - ${props => props.theme.spaces[1]}px);
|
||||
bottom: -${props => props.theme.spaces[1]}px;
|
||||
}
|
||||
`;
|
||||
|
||||
const CustomHandle = (props: any) => <div {...props} />;
|
||||
const BottomRightHandle = () => (
|
||||
<CustomHandle>
|
||||
<Icon iconSize={15} icon="arrow-bottom-right" />
|
||||
</CustomHandle>
|
||||
);
|
||||
|
||||
export const ResizableComponent = (props: ResizableComponentProps) => {
|
||||
const { setIsResizing } = useContext(ResizingContext);
|
||||
const { boundingParent } = useContext(ParentBoundsContext);
|
||||
const { updateWidget } = useContext(WidgetFunctionsContext);
|
||||
let bounds = "body";
|
||||
if (boundingParent && boundingParent.current) {
|
||||
bounds = "." + boundingParent.current.className.split(" ")[1];
|
||||
}
|
||||
const updateSize = (
|
||||
e: Event,
|
||||
dir: ResizeDirection,
|
||||
dir: any,
|
||||
ref: any,
|
||||
delta: { width: number; height: number },
|
||||
position: XYCoord,
|
||||
) => {
|
||||
props.updateWidget &&
|
||||
props.updateWidget(WidgetOperations.RESIZE, props.widgetId, delta);
|
||||
setIsResizing && setIsResizing(false);
|
||||
const leftColumn = props.leftColumn + position.x / props.parentColumnSpace;
|
||||
const topRow = props.topRow + position.y / props.parentRowSpace;
|
||||
|
||||
const rightColumn =
|
||||
props.rightColumn + (delta.width + position.x) / props.parentColumnSpace;
|
||||
const bottomRow =
|
||||
props.bottomRow + (delta.height + position.y) / props.parentRowSpace;
|
||||
|
||||
updateWidget &&
|
||||
updateWidget(WidgetOperations.RESIZE, props.widgetId, {
|
||||
leftColumn,
|
||||
rightColumn,
|
||||
topRow,
|
||||
bottomRow,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<ResizableContainer
|
||||
position={{
|
||||
x: 0,
|
||||
y: 0,
|
||||
}}
|
||||
size={{
|
||||
width: props.style.componentWidth as number,
|
||||
height: props.style.componentHeight as number,
|
||||
}}
|
||||
disableDragging
|
||||
minWidth={props.parentColumnSpace}
|
||||
minHeight={props.parentRowSpace}
|
||||
style={{ ...props.style }}
|
||||
handleComponent={{ bottomRight: <BottomRightHandle /> }}
|
||||
onResizeStop={updateSize}
|
||||
grid={[props.parentColumnSpace, props.parentRowSpace]}
|
||||
enable={{
|
||||
onResizeStart={() => {
|
||||
setIsResizing && setIsResizing(true);
|
||||
}}
|
||||
resizeGrid={[props.parentColumnSpace, props.parentRowSpace]}
|
||||
bounds={bounds}
|
||||
enableResizing={{
|
||||
top: true,
|
||||
right: true,
|
||||
bottom: true,
|
||||
|
|
@ -48,7 +96,7 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
|
|||
topRight: false,
|
||||
topLeft: false,
|
||||
bottomRight: true,
|
||||
bottomLeft: true,
|
||||
bottomLeft: false,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
|
|
|
|||
21
app/client/src/icons/ControlIcons.tsx
Normal file
21
app/client/src/icons/ControlIcons.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
import { IconProps, IconWrapper } from "../constants/IconConstants";
|
||||
import { ReactComponent as DeleteIcon } from "../assets/icons/control/delete.svg";
|
||||
import { ReactComponent as MoveIcon } from "../assets/icons/control/move.svg";
|
||||
|
||||
/* eslint-disable react/display-name */
|
||||
|
||||
export const ControlIcons: {
|
||||
[id: string]: Function;
|
||||
} = {
|
||||
DELETE_CONTROL: (props: IconProps) => (
|
||||
<IconWrapper {...props}>
|
||||
<DeleteIcon />
|
||||
</IconWrapper>
|
||||
),
|
||||
MOVE_CONTROL: (props: IconProps) => (
|
||||
<IconWrapper {...props}>
|
||||
<MoveIcon />
|
||||
</IconWrapper>
|
||||
),
|
||||
};
|
||||
|
|
@ -1,99 +1,99 @@
|
|||
import { WidgetCardsPaneReduxState } from "../reducers/uiReducers/widgetCardsPaneReducer";
|
||||
import { WidgetCardProps } from "../widgets/BaseWidget";
|
||||
import { generateReactKey } from "../utils/generators";
|
||||
|
||||
const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
|
||||
cards: {
|
||||
common: [
|
||||
{
|
||||
type: "TEXT_WIDGET",
|
||||
icon: "icon-text",
|
||||
widgetCardName: "Text",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "BUTTON_WIDGET",
|
||||
icon: "icon-button",
|
||||
widgetCardName: "Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "SPINNER_WIDGET",
|
||||
icon: "icon-switch",
|
||||
widgetCardName: "Spinner",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "CONTAINER_WIDGET",
|
||||
icon: "icon-container",
|
||||
widgetCardName: "Container",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
],
|
||||
form: [
|
||||
{
|
||||
type: "BUTTON_WIDGET",
|
||||
icon: "icon-button",
|
||||
widgetCardName: "Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "BUTTON_WIDGET",
|
||||
icon: "icon-button",
|
||||
widgetCardName: "Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "DROP_DOWN_WIDGET",
|
||||
icon: "icon-dropdown",
|
||||
widgetCardName: "Dropdown",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "DATE_PICKER_WIDGET",
|
||||
icon: "icon-datepicker",
|
||||
widgetCardName: "DatePicker",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "RADIO_GROUP_WIDGET",
|
||||
icon: "icon-radio",
|
||||
widgetCardName: "Radio Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "SWITCH_WIDGET",
|
||||
icon: "icon-switch",
|
||||
widgetCardName: "Toggle",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
],
|
||||
view: [
|
||||
{
|
||||
type: "TEXT_WIDGET",
|
||||
icon: "icon-text",
|
||||
widgetCardName: "Text",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "CONTAINER_WIDGET",
|
||||
icon: "icon-container",
|
||||
widgetCardName: "Container",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "SPINNER_WIDGET",
|
||||
icon: "icon-spinner",
|
||||
widgetCardName: "Spinner",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "TABLE_WIDGET",
|
||||
icon: "icon-table",
|
||||
widgetCardName: "Table",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
],
|
||||
},
|
||||
const WidgetCardsPaneResponse: {
|
||||
[id: string]: WidgetCardProps[];
|
||||
} = {
|
||||
common: [
|
||||
{
|
||||
type: "TEXT_WIDGET",
|
||||
icon: "icon-text",
|
||||
widgetCardName: "Text",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "BUTTON_WIDGET",
|
||||
icon: "icon-button",
|
||||
widgetCardName: "Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "SPINNER_WIDGET",
|
||||
icon: "icon-switch",
|
||||
widgetCardName: "Spinner",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "CONTAINER_WIDGET",
|
||||
icon: "icon-container",
|
||||
widgetCardName: "Container",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
],
|
||||
form: [
|
||||
{
|
||||
type: "BUTTON_WIDGET",
|
||||
icon: "icon-button",
|
||||
widgetCardName: "Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "BUTTON_WIDGET",
|
||||
icon: "icon-button",
|
||||
widgetCardName: "Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "DROP_DOWN_WIDGET",
|
||||
icon: "icon-dropdown",
|
||||
widgetCardName: "Dropdown",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "DATE_PICKER_WIDGET",
|
||||
icon: "icon-datepicker",
|
||||
widgetCardName: "DatePicker",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "RADIO_GROUP_WIDGET",
|
||||
icon: "icon-radio",
|
||||
widgetCardName: "Radio Button",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "SWITCH_WIDGET",
|
||||
icon: "icon-switch",
|
||||
widgetCardName: "Toggle",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
],
|
||||
view: [
|
||||
{
|
||||
type: "TEXT_WIDGET",
|
||||
icon: "icon-text",
|
||||
widgetCardName: "Text",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "CONTAINER_WIDGET",
|
||||
icon: "icon-container",
|
||||
widgetCardName: "Container",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "SPINNER_WIDGET",
|
||||
icon: "icon-spinner",
|
||||
widgetCardName: "Spinner",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
{
|
||||
type: "TABLE_WIDGET",
|
||||
icon: "icon-table",
|
||||
widgetCardName: "Table",
|
||||
key: generateReactKey(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default WidgetCardsPaneResponse;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
|
|||
buttonStyle: "PRIMARY_BUTTON",
|
||||
rows: 1,
|
||||
columns: 2,
|
||||
widgetName: "Button",
|
||||
},
|
||||
TEXT_WIDGET: {
|
||||
text: "Not all labels are bad!",
|
||||
textStyle: "LABEL",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
widgetName: "Text",
|
||||
},
|
||||
IMAGE_WIDGET: {
|
||||
defaultImage: "",
|
||||
|
|
@ -20,27 +22,32 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
|
|||
image: "",
|
||||
rows: 3,
|
||||
columns: 3,
|
||||
widgetName: "Image",
|
||||
},
|
||||
INPUT_WIDGET: {
|
||||
inputType: "TEXT",
|
||||
label: "Label me",
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
widgetName: "Input",
|
||||
},
|
||||
SWITCH_WIDGET: {
|
||||
isOn: false,
|
||||
label: "Turn me on",
|
||||
rows: 1,
|
||||
columns: 4,
|
||||
widgetName: "Switch",
|
||||
},
|
||||
CONTAINER_WIDGET: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
rows: 1,
|
||||
columns: 4,
|
||||
widgetName: "Container",
|
||||
},
|
||||
SPINNER_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 1,
|
||||
widgetName: "Spinner",
|
||||
},
|
||||
DATE_PICKER_WIDGET: {
|
||||
enableTime: false,
|
||||
|
|
@ -48,23 +55,27 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
|
|||
rows: 1,
|
||||
columns: 3,
|
||||
label: "Date",
|
||||
widgetName: "Datepicker",
|
||||
},
|
||||
TABLE_WIDGET: {
|
||||
rows: 5,
|
||||
columns: 7,
|
||||
label: "Don't table me!",
|
||||
widgetName: "Table",
|
||||
},
|
||||
DROP_DOWN_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
selectionType: "SINGLE_SELECT",
|
||||
label: "Pick me!",
|
||||
widgetName: "Dropdown",
|
||||
},
|
||||
CHECKBOX_WIDGET: {
|
||||
rows: 1,
|
||||
columns: 3,
|
||||
label: "Label - CHECK!",
|
||||
defaultCheckedState: true,
|
||||
widgetName: "Checkbox",
|
||||
},
|
||||
RADIO_GROUP_WIDGET: {
|
||||
rows: 3,
|
||||
|
|
@ -76,6 +87,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
|
|||
{ label: "Charlie", value: "3" },
|
||||
],
|
||||
defaultOptionValue: "1",
|
||||
widgetName: "RadioGroup",
|
||||
},
|
||||
ALERT_WIDGET: {
|
||||
alertType: "NOTIFICATION",
|
||||
|
|
@ -84,6 +96,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
|
|||
columns: 3,
|
||||
header: "",
|
||||
message: "",
|
||||
widgetName: "Alert",
|
||||
},
|
||||
},
|
||||
configVersion: 1,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
import React from "react";
|
||||
import React, {
|
||||
createContext,
|
||||
useState,
|
||||
Context,
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
} from "react";
|
||||
import styled from "styled-components";
|
||||
import WidgetFactory from "../../utils/WidgetFactory";
|
||||
import { RenderModes } from "../../constants/WidgetConstants";
|
||||
import { WidgetFunctions } from "../../widgets/BaseWidget";
|
||||
import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
|
||||
import { WidgetProps } from "../../widgets/BaseWidget";
|
||||
|
||||
|
|
@ -15,21 +20,22 @@ const ArtBoard = styled.div`
|
|||
|
||||
interface CanvasProps {
|
||||
dsl: ContainerWidgetProps<WidgetProps>;
|
||||
widgetFunctions: WidgetFunctions;
|
||||
}
|
||||
|
||||
export const FocusContext: Context<{
|
||||
isFocused?: string;
|
||||
setFocus?: Dispatch<SetStateAction<string>>;
|
||||
}> = createContext({});
|
||||
|
||||
const Canvas = (props: CanvasProps) => {
|
||||
const [isFocused, setFocus] = useState("");
|
||||
return (
|
||||
<React.Fragment>
|
||||
<FocusContext.Provider value={{ isFocused, setFocus }}>
|
||||
<ArtBoard>
|
||||
{props.dsl.widgetId &&
|
||||
WidgetFactory.createWidget(
|
||||
props.dsl,
|
||||
props.widgetFunctions,
|
||||
RenderModes.CANVAS,
|
||||
)}
|
||||
WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)}
|
||||
</ArtBoard>
|
||||
</React.Fragment>
|
||||
</FocusContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,57 @@
|
|||
import React, { Component } from "react";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
// import { connect } from "react-redux";
|
||||
// import { AppState } from "../../reducers";
|
||||
// import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
|
||||
import { Breadcrumbs, IBreadcrumbProps, Spinner } from "@blueprintjs/core";
|
||||
|
||||
const Header = styled.header`
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0px 30px;
|
||||
box-shadow: 0px 0px 3px #ccc;
|
||||
background: #fff;
|
||||
font-size: ${props => props.theme.fontSizes[1]}px;
|
||||
`;
|
||||
|
||||
class EditorHeader extends Component {
|
||||
render() {
|
||||
return <Header></Header>;
|
||||
const NotificationText = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
const StretchedBreadCrumb = styled(Breadcrumbs)`
|
||||
flex-grow: 10;
|
||||
* {
|
||||
font-family: ${props => props.theme.fonts[0]};
|
||||
font-size: ${props => props.theme.fontSizes[2]}px;
|
||||
}
|
||||
}
|
||||
li:after {
|
||||
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='rgba(92,112,128,1)'/%3E%3C/svg%3E");
|
||||
}
|
||||
`;
|
||||
|
||||
type EditorHeaderProps = {
|
||||
notificationText?: string;
|
||||
pageName: string;
|
||||
};
|
||||
|
||||
export const EditorHeader = (props: EditorHeaderProps) => {
|
||||
const navigation: IBreadcrumbProps[] = [
|
||||
{ href: "#", icon: "folder-close", text: "appsmith-dev" },
|
||||
{ href: "#", icon: "folder-close", text: "application" },
|
||||
{ icon: "page-layout", text: props.pageName, current: true },
|
||||
];
|
||||
|
||||
return (
|
||||
<Header>
|
||||
<StretchedBreadCrumb items={navigation} />
|
||||
<NotificationText>
|
||||
{props.notificationText && <Spinner size={Spinner.SIZE_SMALL} />}
|
||||
<span>{props.notificationText}</span>
|
||||
</NotificationText>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditorHeader;
|
||||
|
||||
// const mapStateToProps = (
|
||||
// state: AppState,
|
||||
// props: any,
|
||||
// ): EditorHeaderReduxState => {
|
||||
// return state;
|
||||
// };
|
||||
|
||||
// const mapDispatchToProps = (dispatch: any) => {
|
||||
// return {};
|
||||
// };
|
||||
|
||||
// export default connect(
|
||||
// mapStateToProps,
|
||||
// mapDispatchToProps,
|
||||
// )(EditorHeader);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ export const Wrapper = styled.div`
|
|||
path {
|
||||
fill: ${props => props.theme.colors.textDefault};
|
||||
}
|
||||
rect {
|
||||
stroke: ${props => props.theme.colors.textDefault};
|
||||
}
|
||||
}
|
||||
}
|
||||
& i {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const CardsPaneWrapper = styled.div`
|
|||
const CardsWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: ${props => props.theme.spaces[2]}px;
|
||||
grid-gap: ${props => props.theme.spaces[1]}px;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { Component } from "react";
|
||||
import { Position, Toaster } from "@blueprintjs/core";
|
||||
import React, { Component, Context, createContext } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import styled from "styled-components";
|
||||
import Canvas from "./Canvas";
|
||||
|
|
@ -7,6 +6,7 @@ import {
|
|||
WidgetCardProps,
|
||||
WidgetProps,
|
||||
WidgetOperation,
|
||||
WidgetFunctions,
|
||||
} from "../../widgets/BaseWidget";
|
||||
import { AppState } from "../../reducers";
|
||||
import { EditorReduxState } from "../../reducers/uiReducers/editorReducer";
|
||||
|
|
@ -20,10 +20,6 @@ import { executeAction } from "../../actions/widgetActions";
|
|||
import { ActionPayload } from "../../constants/ActionConstants";
|
||||
import PropertyPane from "./PropertyPane";
|
||||
|
||||
const SaveToast = Toaster.create({
|
||||
position: Position.TOP,
|
||||
});
|
||||
|
||||
const CanvasContainer = styled.section`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -37,7 +33,7 @@ const CanvasContainer = styled.section`
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
z-index: 11;
|
||||
pointer-events: none;
|
||||
}
|
||||
`;
|
||||
|
|
@ -60,50 +56,41 @@ type EditorProps = {
|
|||
updateWidget: Function;
|
||||
cards: { [id: string]: WidgetCardProps[] } | any;
|
||||
savePageLayout: Function;
|
||||
page: string;
|
||||
currentPageName: string;
|
||||
currentPageId: string;
|
||||
currentLayoutId: string;
|
||||
isSaving: boolean;
|
||||
};
|
||||
|
||||
export const WidgetFunctionsContext: Context<WidgetFunctions> = createContext(
|
||||
{},
|
||||
);
|
||||
|
||||
class Editor extends Component<EditorProps> {
|
||||
componentDidMount() {
|
||||
this.props.fetchCanvasWidgets(this.props.currentPageId);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: EditorProps) {
|
||||
if (this.props.isSaving && prevProps.isSaving !== this.props.isSaving) {
|
||||
SaveToast.clear();
|
||||
SaveToast.show({ message: "Saving Page..." });
|
||||
} else if (
|
||||
!this.props.isSaving &&
|
||||
prevProps.isSaving !== this.props.isSaving
|
||||
) {
|
||||
SaveToast.clear();
|
||||
SaveToast.show({ message: "Page Saved" });
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<EditorHeader></EditorHeader>
|
||||
<WidgetFunctionsContext.Provider
|
||||
value={{
|
||||
executeAction: this.props.executeAction,
|
||||
updateWidget: this.props.updateWidget,
|
||||
}}
|
||||
>
|
||||
<EditorHeader
|
||||
notificationText={this.props.isSaving ? "Saving page..." : undefined}
|
||||
pageName={this.props.currentPageName}
|
||||
/>
|
||||
<EditorWrapper>
|
||||
<WidgetCardsPane cards={this.props.cards} />
|
||||
<CanvasContainer>
|
||||
{this.props.dsl && (
|
||||
<Canvas
|
||||
dsl={this.props.dsl}
|
||||
widgetFunctions={{
|
||||
executeAction: this.props.executeAction,
|
||||
updateWidget: this.props.updateWidget,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{this.props.dsl && <Canvas dsl={this.props.dsl} />}
|
||||
</CanvasContainer>
|
||||
<PropertyPane />
|
||||
</EditorWrapper>
|
||||
</React.Fragment>
|
||||
</WidgetFunctionsContext.Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -120,14 +107,14 @@ const mapStateToProps = (state: AppState): EditorReduxState => {
|
|||
state.ui.editor.pageWidgetId,
|
||||
state.entities,
|
||||
);
|
||||
const configs = state.entities.widgetConfig.config;
|
||||
|
||||
const cards = state.ui.widgetCardsPane.cards;
|
||||
Object.keys(cards).forEach((group: string) => {
|
||||
cards[group] = cards[group].map((widget: WidgetCardProps) => ({
|
||||
...widget,
|
||||
...configs[widget.type],
|
||||
}));
|
||||
const cards = state.ui.editor.cards;
|
||||
const groups: string[] = Object.keys(cards);
|
||||
groups.forEach((group: string) => {
|
||||
cards[group] = cards[group].map((widget: WidgetCardProps) => {
|
||||
const { rows, columns } = state.entities.widgetConfig.config[widget.type];
|
||||
return { ...widget, rows, columns };
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
|
|
@ -136,6 +123,7 @@ const mapStateToProps = (state: AppState): EditorReduxState => {
|
|||
pageWidgetId: state.ui.editor.pageWidgetId,
|
||||
currentPageId: state.ui.editor.currentPageId,
|
||||
currentLayoutId: state.ui.editor.currentLayoutId,
|
||||
currentPageName: state.ui.editor.currentPageName,
|
||||
isSaving: state.ui.editor.isSaving,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { combineReducers } from "redux";
|
|||
import entityReducer from "./entityReducers";
|
||||
import uiReducer from "./uiReducers";
|
||||
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducer";
|
||||
import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer";
|
||||
import { EditorReduxState } from "./uiReducers/editorReducer";
|
||||
import { ErrorReduxState } from "./uiReducers/errorReducer";
|
||||
import { APIDataState } from "./entityReducers/apiDataReducer";
|
||||
import { QueryDataState } from "./entityReducers/queryDataReducer";
|
||||
import { ActionDataState } from "./entityReducers/actionsReducer";
|
||||
|
|
@ -20,9 +20,9 @@ export default appReducer;
|
|||
|
||||
export interface AppState {
|
||||
ui: {
|
||||
widgetCardsPane: WidgetCardsPaneReduxState;
|
||||
editor: EditorReduxState;
|
||||
propertyPane: PropertyPaneReduxState;
|
||||
errors: ErrorReduxState;
|
||||
};
|
||||
entities: {
|
||||
canvasWidgets: CanvasWidgetsReduxState;
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import { createReducer } from "../../utils/AppsmithUtils";
|
||||
|
||||
const initialState = {};
|
||||
|
||||
const editorHeaderReducer = createReducer(initialState, {});
|
||||
|
||||
// export interface EditorHeaderReduxState {}
|
||||
|
||||
export default editorHeaderReducer;
|
||||
|
|
@ -7,15 +7,18 @@ import {
|
|||
} from "../../constants/ReduxActionConstants";
|
||||
import { WidgetCardProps, WidgetProps } from "../../widgets/BaseWidget";
|
||||
import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
|
||||
import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse";
|
||||
|
||||
const editorConfigs = getEditorConfigs();
|
||||
const initialState: EditorReduxState = {
|
||||
pageWidgetId: "0",
|
||||
...editorConfigs,
|
||||
isSaving: false,
|
||||
cards: WidgetCardsPaneResponse,
|
||||
};
|
||||
|
||||
const editorReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
|
||||
[ReduxActionTypes.FETCH_WIDGET_CARDS_SUCCESS]: (
|
||||
state: EditorReduxState,
|
||||
action: ReduxAction<LoadWidgetCardsPanePayload>,
|
||||
) => {
|
||||
|
|
@ -27,19 +30,17 @@ const editorReducer = createReducer(initialState, {
|
|||
[ReduxActionTypes.SAVE_PAGE_SUCCESS]: (state: EditorReduxState) => {
|
||||
return { ...state, isSaving: false };
|
||||
},
|
||||
[ReduxActionTypes.SAVE_PAGE_ERROR]: (state: EditorReduxState) => {
|
||||
return { ...state, isSaving: false };
|
||||
},
|
||||
});
|
||||
|
||||
export interface EditorReduxState {
|
||||
dsl?: ContainerWidgetProps<WidgetProps>;
|
||||
cards?: {
|
||||
cards: {
|
||||
[id: string]: WidgetCardProps[];
|
||||
};
|
||||
pageWidgetId: string;
|
||||
currentPageId: string;
|
||||
currentLayoutId: string;
|
||||
currentPageName: string;
|
||||
isSaving: boolean;
|
||||
}
|
||||
|
||||
|
|
|
|||
31
app/client/src/reducers/uiReducers/errorReducer.tsx
Normal file
31
app/client/src/reducers/uiReducers/errorReducer.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { createReducer } from "../../utils/AppsmithUtils";
|
||||
import {
|
||||
ReduxAction,
|
||||
ReduxActionTypes,
|
||||
ReduxActionErrorPayload,
|
||||
} from "../../constants/ReduxActionConstants";
|
||||
|
||||
const initialState: ErrorReduxState = { sourceAction: "", message: "" };
|
||||
|
||||
const errorReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.REPORT_ERROR]: (
|
||||
state: ErrorReduxState,
|
||||
action: ReduxAction<ReduxActionErrorPayload>,
|
||||
) => {
|
||||
return {
|
||||
sourceAction: action.payload.source,
|
||||
message: action.payload.message,
|
||||
};
|
||||
},
|
||||
[ReduxActionTypes.FLUSH_ERRORS]: () => {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
|
||||
export interface ErrorReduxState {
|
||||
// Expiration?
|
||||
sourceAction?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export default errorReducer;
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
import { combineReducers } from "redux";
|
||||
import widgetCardsPaneReducer from "./widgetCardsPaneReducer";
|
||||
import editorHeaderReducer from "./editorHeaderReducer";
|
||||
import editorReducer from "./editorReducer";
|
||||
import errorReducer from "./errorReducer";
|
||||
import propertyPaneReducer from "./propertyPaneReducer";
|
||||
|
||||
const uiReducer = combineReducers({
|
||||
widgetCardsPane: widgetCardsPaneReducer,
|
||||
editorHeader: editorHeaderReducer,
|
||||
editor: editorReducer,
|
||||
errors: errorReducer,
|
||||
propertyPane: propertyPaneReducer,
|
||||
});
|
||||
export default uiReducer;
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
import { createReducer } from "../../utils/AppsmithUtils";
|
||||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxAction,
|
||||
LoadWidgetCardsPanePayload,
|
||||
} from "../../constants/ReduxActionConstants";
|
||||
import { WidgetCardProps } from "../../widgets/BaseWidget";
|
||||
import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse";
|
||||
|
||||
const initialState: WidgetCardsPaneReduxState = WidgetCardsPaneResponse;
|
||||
|
||||
const widgetCardsPaneReducer = createReducer(initialState, {
|
||||
[ReduxActionTypes.ERROR_FETCHING_WIDGET_CARDS]: (
|
||||
state: WidgetCardsPaneReduxState,
|
||||
action: ReduxAction<LoadWidgetCardsPanePayload>,
|
||||
) => {
|
||||
return { cards: action.payload.cards };
|
||||
},
|
||||
});
|
||||
|
||||
export interface WidgetCardsPaneReduxState {
|
||||
cards: {
|
||||
[id: string]: WidgetCardProps[];
|
||||
};
|
||||
}
|
||||
|
||||
export default widgetCardsPaneReducer;
|
||||
39
app/client/src/sagas/ErrorSagas.tsx
Normal file
39
app/client/src/sagas/ErrorSagas.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxActionErrorTypes,
|
||||
ReduxAction,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
|
||||
import { ApiResponse } from "../api/ApiResponses";
|
||||
import { put, takeLatest } from "redux-saga/effects";
|
||||
|
||||
export function* validateResponse(response: ApiResponse) {
|
||||
if (response.responseMeta.success) {
|
||||
return true;
|
||||
} else {
|
||||
yield put({
|
||||
type: ReduxActionErrorTypes.API_ERROR,
|
||||
payload: {
|
||||
error: response.responseMeta.error,
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function* errorSaga(errorAction: ReduxAction<{ error: any }>) {
|
||||
// Just a pass through for now.
|
||||
// Add procedures to customize errors here
|
||||
console.log(errorAction.payload.error);
|
||||
yield put({
|
||||
type: ReduxActionTypes.REPORT_ERROR,
|
||||
payload: {
|
||||
message: errorAction.payload.error,
|
||||
source: errorAction.type,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default function* errorSagas() {
|
||||
yield takeLatest(Object.values(ReduxActionErrorTypes), errorSaga);
|
||||
}
|
||||
|
|
@ -1,15 +1,11 @@
|
|||
import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer";
|
||||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxActionErrorTypes,
|
||||
ReduxAction,
|
||||
UpdateCanvasPayload,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import {
|
||||
updateCanvas,
|
||||
savePageError,
|
||||
savePageSuccess,
|
||||
fetchPageError,
|
||||
} from "../actions/pageActions";
|
||||
import { updateCanvas, savePageSuccess } from "../actions/pageActions";
|
||||
import PageApi, {
|
||||
FetchPageResponse,
|
||||
SavePageResponse,
|
||||
|
|
@ -25,27 +21,31 @@ import {
|
|||
takeEvery,
|
||||
all,
|
||||
} from "redux-saga/effects";
|
||||
|
||||
import { extractCurrentDSL } from "../utils/WidgetPropsUtils";
|
||||
import { getEditorConfigs } from "./selectors";
|
||||
import { validateResponse } from "./ErrorSagas";
|
||||
|
||||
export function* fetchPageSaga(
|
||||
pageRequestAction: ReduxAction<FetchPageRequest>,
|
||||
) {
|
||||
const pageRequest = pageRequestAction.payload;
|
||||
try {
|
||||
const pageRequest = pageRequestAction.payload;
|
||||
const fetchPageResponse: FetchPageResponse = yield call(
|
||||
PageApi.fetchPage,
|
||||
pageRequest,
|
||||
);
|
||||
|
||||
if (fetchPageResponse.responseMeta.success) {
|
||||
const isValidResponse = yield validateResponse(fetchPageResponse);
|
||||
if (isValidResponse) {
|
||||
const normalizedResponse = CanvasWidgetsNormalizer.normalize(
|
||||
extractCurrentDSL(fetchPageResponse),
|
||||
);
|
||||
const canvasWidgetsPayload: UpdateCanvasPayload = {
|
||||
pageWidgetId: normalizedResponse.result,
|
||||
currentPageName: fetchPageResponse.data.name,
|
||||
currentPageId: fetchPageResponse.data.id,
|
||||
widgets: normalizedResponse.entities.canvasWidgets,
|
||||
layoutId: fetchPageResponse.data.layouts[0].id, // TODO(abhinav): Handle for multiple layouts
|
||||
currentLayoutId: fetchPageResponse.data.layouts[0].id, // TODO(abhinav): Handle for multiple layouts
|
||||
};
|
||||
yield all([
|
||||
put(updateCanvas(canvasWidgetsPayload)),
|
||||
|
|
@ -56,8 +56,12 @@ export function* fetchPageSaga(
|
|||
]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
yield put(fetchPageError(error));
|
||||
yield put({
|
||||
type: ReduxActionErrorTypes.FETCH_PAGE_ERROR,
|
||||
payload: {
|
||||
error,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,10 +72,17 @@ export function* savePageSaga(savePageAction: ReduxAction<SavePageRequest>) {
|
|||
PageApi.savePage,
|
||||
savePageRequest,
|
||||
);
|
||||
yield put(savePageSuccess(savePageResponse));
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
yield put(savePageError(err));
|
||||
const isValidResponse = validateResponse(savePageResponse);
|
||||
if (isValidResponse) {
|
||||
yield put(savePageSuccess(savePageResponse));
|
||||
}
|
||||
} catch (error) {
|
||||
yield put({
|
||||
type: ReduxActionErrorTypes.SAVE_PAGE_ERROR,
|
||||
payload: {
|
||||
error,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +98,6 @@ export function* saveLayoutSaga(
|
|||
{ canvasWidgets: widgets },
|
||||
);
|
||||
const editorConfigs = yield select(getEditorConfigs) as any;
|
||||
console.log(editorConfigs);
|
||||
yield put({
|
||||
type: ReduxActionTypes.SAVE_PAGE_INIT,
|
||||
payload: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
|
||||
import { ReduxActionTypes } from "../constants/ReduxActionConstants";
|
||||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxActionErrorTypes,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import WidgetCardsPaneApi, {
|
||||
WidgetCardsPaneResponse,
|
||||
} from "../api/WidgetCardsPaneApi";
|
||||
|
|
@ -13,7 +15,7 @@ export function* fetchWidgetCards() {
|
|||
]);
|
||||
yield put(successFetchingWidgetCards(widgetCards.cards));
|
||||
} catch (err) {
|
||||
yield put({ type: ReduxActionTypes.ERROR_FETCHING_WIDGET_CARDS, err });
|
||||
yield put({ type: ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR, err });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {
|
||||
ReduxActionTypes,
|
||||
ReduxActionErrorTypes,
|
||||
ReduxAction,
|
||||
} from "../constants/ReduxActionConstants";
|
||||
import {
|
||||
|
|
@ -9,13 +10,13 @@ import {
|
|||
WidgetDelete,
|
||||
} from "../actions/pageActions";
|
||||
import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
|
||||
import { getWidgets, getWidget, getWidgetParent } from "./selectors";
|
||||
import { getWidgets, getWidget, getDefaultWidgetConfig } from "./selectors";
|
||||
import {
|
||||
generateWidgetProps,
|
||||
updateWidgetSize,
|
||||
updateWidgetPosition,
|
||||
} from "../utils/WidgetPropsUtils";
|
||||
import { put, select, takeEvery, takeLatest, all } from "redux-saga/effects";
|
||||
import { getNextWidgetName } from "../utils/AppsmithUtils";
|
||||
|
||||
export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
|
||||
try {
|
||||
|
|
@ -31,7 +32,7 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
|
|||
} = addChildAction.payload;
|
||||
const widget: FlattenedWidgetProps = yield select(getWidget, widgetId);
|
||||
const widgets = yield select(getWidgets);
|
||||
|
||||
const defaultWidgetConfig = yield select(getDefaultWidgetConfig, type);
|
||||
const childWidget = generateWidgetProps(
|
||||
widget,
|
||||
type,
|
||||
|
|
@ -41,6 +42,8 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
|
|||
rows,
|
||||
parentRowSpace,
|
||||
parentColumnSpace,
|
||||
getNextWidgetName(defaultWidgetConfig.widgetName, widgets),
|
||||
defaultWidgetConfig,
|
||||
);
|
||||
widgets[childWidget.widgetId] = childWidget;
|
||||
if (widget && widget.children) {
|
||||
|
|
@ -51,93 +54,112 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
|
|||
type: ReduxActionTypes.UPDATE_LAYOUT,
|
||||
payload: { widgets },
|
||||
});
|
||||
} catch (err) {
|
||||
} catch (error) {
|
||||
yield put({
|
||||
type: ReduxActionTypes.WIDGET_OPERATION_ERROR,
|
||||
action: ReduxActionTypes.WIDGET_ADD_CHILD,
|
||||
...err,
|
||||
type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
|
||||
payload: {
|
||||
action: ReduxActionTypes.WIDGET_ADD_CHILD,
|
||||
error,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
|
||||
try {
|
||||
const { widgetId } = deleteAction.payload;
|
||||
const { widgetId, parentId } = deleteAction.payload;
|
||||
const widgets = yield select(getWidgets);
|
||||
delete widgets[widgetId];
|
||||
const parent = yield select(getWidgetParent, widgetId);
|
||||
const parent = yield select(getWidget, parentId);
|
||||
parent.children = parent.children.filter(
|
||||
(child: string) => child !== widgetId,
|
||||
);
|
||||
widgets[parent.widgetId] = parent;
|
||||
delete widgets[widgetId];
|
||||
widgets[parentId] = parent;
|
||||
yield put({
|
||||
type: ReduxActionTypes.UPDATE_LAYOUT,
|
||||
payload: { widgets },
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
} catch (error) {
|
||||
yield put({
|
||||
type: ReduxActionTypes.WIDGET_OPERATION_ERROR,
|
||||
action: ReduxActionTypes.WIDGET_DELETE,
|
||||
...err,
|
||||
type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
|
||||
payload: {
|
||||
action: ReduxActionTypes.WIDGET_DELETE,
|
||||
error,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function* moveSaga(moveAction: ReduxAction<WidgetMove>) {
|
||||
try {
|
||||
const { widgetId, leftColumn, topRow, parentWidgetId } = moveAction.payload;
|
||||
const {
|
||||
widgetId,
|
||||
leftColumn,
|
||||
topRow,
|
||||
parentId,
|
||||
newParentId,
|
||||
} = moveAction.payload;
|
||||
let widget: FlattenedWidgetProps = yield select(getWidget, widgetId);
|
||||
// Get all widgets from DSL/Redux Store
|
||||
const widgets = yield select(getWidgets) as any;
|
||||
// Get parent from DSL/Redux Store
|
||||
const parent = yield select(getWidgetParent, widgetId);
|
||||
const parent = yield select(getWidget, parentId);
|
||||
// Update position of widget
|
||||
widget = updateWidgetPosition(widget, leftColumn, topRow, parent);
|
||||
// Replace widget with update widget props
|
||||
widgets[widgetId] = widget;
|
||||
// If the parent has changed i.e parentWidgetId is not parent.widgetId
|
||||
if (parent.widgetId !== parentWidgetId) {
|
||||
if (parent.widgetId !== newParentId && widgetId !== newParentId) {
|
||||
// Remove from the previous parent
|
||||
parent.children = parent.children.filter(
|
||||
(child: string) => child !== widgetId,
|
||||
);
|
||||
widgets[parent.widgetId] = parent;
|
||||
// Add to new parent
|
||||
widgets[parentWidgetId].children.push(widgetId);
|
||||
widgets[newParentId].children.push(widgetId);
|
||||
}
|
||||
yield put({
|
||||
type: ReduxActionTypes.UPDATE_LAYOUT,
|
||||
payload: { widgets },
|
||||
});
|
||||
} catch (err) {
|
||||
} catch (error) {
|
||||
yield put({
|
||||
type: ReduxActionTypes.WIDGET_OPERATION_ERROR,
|
||||
action: ReduxActionTypes.WIDGET_MOVE,
|
||||
...err,
|
||||
type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
|
||||
payload: {
|
||||
action: ReduxActionTypes.WIDGET_MOVE,
|
||||
error,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function* resizeSaga(resizeAction: ReduxAction<WidgetResize>) {
|
||||
try {
|
||||
const { widgetId, height, width } = resizeAction.payload;
|
||||
const {
|
||||
widgetId,
|
||||
leftColumn,
|
||||
rightColumn,
|
||||
topRow,
|
||||
bottomRow,
|
||||
} = resizeAction.payload;
|
||||
|
||||
let widget: FlattenedWidgetProps = yield select(getWidget, widgetId);
|
||||
const widgets = yield select(getWidgets);
|
||||
|
||||
widget = updateWidgetSize(widget, height, width);
|
||||
widget = { ...widget, leftColumn, rightColumn, topRow, bottomRow };
|
||||
widgets[widgetId] = widget;
|
||||
|
||||
yield put({
|
||||
type: ReduxActionTypes.UPDATE_LAYOUT,
|
||||
payload: { widgets },
|
||||
});
|
||||
} catch (err) {
|
||||
} catch (error) {
|
||||
yield put({
|
||||
type: ReduxActionTypes.WIDGET_OPERATION_ERROR,
|
||||
action: ReduxActionTypes.WIDGET_RESIZE,
|
||||
...err,
|
||||
type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
|
||||
payload: {
|
||||
action: ReduxActionTypes.WIDGET_RESIZE,
|
||||
error,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import pageSagas from "../sagas/PageSagas";
|
|||
import { fetchWidgetCardsSaga } from "./WidgetCardsPaneSagas";
|
||||
import { watchExecuteActionSaga } from "./ActionSagas";
|
||||
import widgetOperationSagas from "./WidgetOperationSagas";
|
||||
import errorSagas from "./ErrorSagas";
|
||||
|
||||
export function* rootSaga() {
|
||||
yield all([
|
||||
|
|
@ -10,5 +11,6 @@ export function* rootSaga() {
|
|||
spawn(fetchWidgetCardsSaga),
|
||||
spawn(watchExecuteActionSaga),
|
||||
spawn(widgetOperationSagas),
|
||||
spawn(errorSagas),
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { AppState } from "../reducers";
|
||||
import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
|
||||
import { WidgetProps } from "../widgets/BaseWidget";
|
||||
|
||||
import { WidgetType } from "../constants/WidgetConstants";
|
||||
export const getWidgets = (
|
||||
state: AppState,
|
||||
): { [widgetId: string]: FlattenedWidgetProps } => {
|
||||
|
|
@ -22,16 +22,13 @@ export const getEditorConfigs = (
|
|||
};
|
||||
};
|
||||
|
||||
export const getWidgetParent = (
|
||||
export const getDefaultWidgetConfig = (
|
||||
state: AppState,
|
||||
widgetId: string,
|
||||
): FlattenedWidgetProps | undefined => {
|
||||
const widgets = state.entities.canvasWidgets;
|
||||
return Object.values(widgets).find(
|
||||
(widget: FlattenedWidgetProps) =>
|
||||
widget &&
|
||||
widget.children &&
|
||||
widget.children.length > 0 &&
|
||||
widget.children.indexOf(widgetId) > -1,
|
||||
);
|
||||
type: WidgetType,
|
||||
): Partial<WidgetProps> => {
|
||||
const configs = state.entities.widgetConfig.config;
|
||||
const widgetConfig = { ...configs[type] };
|
||||
delete widgetConfig.rows;
|
||||
delete widgetConfig.columns;
|
||||
return widgetConfig;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import FontFaceObserver from "fontfaceobserver";
|
|||
import PropertyControlRegistry from "./PropertyControlRegistry";
|
||||
import WidgetBuilderRegistry from "./WidgetRegistry";
|
||||
import { Property } from "../api/ActionAPI";
|
||||
import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
|
||||
import _ from "lodash";
|
||||
|
||||
export const createReducer = (
|
||||
|
|
@ -60,3 +61,26 @@ export const mapToPropList = (map: Record<string, string>): Property[] => {
|
|||
return { key: key, value: value };
|
||||
});
|
||||
};
|
||||
|
||||
export const getNextWidgetName = (
|
||||
prefix: string,
|
||||
widgets: {
|
||||
[id: string]: FlattenedWidgetProps;
|
||||
},
|
||||
) => {
|
||||
const regex = new RegExp(`^${prefix}(\\d+)$`);
|
||||
const usedIndices: number[] = Object.values(widgets).map(widget => {
|
||||
if (widget && widget.widgetName && regex.test(widget.widgetName)) {
|
||||
const name = widget.widgetName || "";
|
||||
const matches = name.match(regex);
|
||||
const ind =
|
||||
matches && Array.isArray(matches) ? parseInt(matches[1], 10) : 0;
|
||||
return Number.isNaN(ind) ? 0 : ind;
|
||||
}
|
||||
return 0;
|
||||
}) as number[];
|
||||
|
||||
const lastIndex = Math.max(...usedIndices);
|
||||
|
||||
return prefix + (lastIndex + 1);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { WidgetType, RenderMode } from "../constants/WidgetConstants";
|
|||
import {
|
||||
WidgetBuilder,
|
||||
WidgetProps,
|
||||
WidgetFunctions,
|
||||
WidgetDataProps,
|
||||
} from "../widgets/BaseWidget";
|
||||
|
||||
|
|
@ -18,13 +17,11 @@ class WidgetFactory {
|
|||
|
||||
static createWidget(
|
||||
widgetData: WidgetDataProps,
|
||||
widgetFunctions: WidgetFunctions,
|
||||
renderMode: RenderMode,
|
||||
): JSX.Element {
|
||||
const widgetProps: WidgetProps = {
|
||||
key: widgetData.widgetId,
|
||||
renderMode: renderMode,
|
||||
...widgetFunctions,
|
||||
...widgetData,
|
||||
};
|
||||
const widgetBuilder = this.widgetMap.get(widgetData.type);
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ export const getDropZoneOffsets = (
|
|||
|
||||
const areIntersecting = (r1: Rect, r2: Rect) => {
|
||||
return !(
|
||||
r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top
|
||||
r2.left >= r1.right ||
|
||||
r2.right <= r1.left ||
|
||||
r2.top >= r1.bottom ||
|
||||
r2.bottom <= r1.top
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -71,7 +71,10 @@ export const isDropZoneOccupied = (
|
|||
) => {
|
||||
if (occupied) {
|
||||
occupied = occupied.filter(widgetDetails => {
|
||||
return widgetDetails.id !== widget.widgetId;
|
||||
return (
|
||||
widgetDetails.id !== widget.widgetId &&
|
||||
widgetDetails.parentId !== widget.widgetId
|
||||
);
|
||||
});
|
||||
for (let i = 0; i < occupied.length; i++) {
|
||||
if (areIntersecting(occupied[i], offset)) {
|
||||
|
|
@ -139,7 +142,8 @@ export const widgetOperationParams = (
|
|||
{
|
||||
leftColumn,
|
||||
topRow,
|
||||
parentWidgetId: widgetId,
|
||||
parentId: widget.parentId,
|
||||
newParentId: widgetId,
|
||||
},
|
||||
];
|
||||
// If this is not an existing widget, we'll not have the widgetId
|
||||
|
|
@ -211,6 +215,8 @@ export const generateWidgetProps = (
|
|||
rows: number,
|
||||
parentRowSpace: number,
|
||||
parentColumnSpace: number,
|
||||
widgetName: string,
|
||||
widgetConfig: Partial<WidgetProps>,
|
||||
): ContainerWidgetProps<WidgetProps> => {
|
||||
if (parent && parent.snapColumns && parent.snapRows) {
|
||||
const sizes = {
|
||||
|
|
@ -230,10 +236,10 @@ export const generateWidgetProps = (
|
|||
};
|
||||
}
|
||||
return {
|
||||
...widgetConfig,
|
||||
type,
|
||||
executeAction: () => {},
|
||||
widgetId: generateReactKey(),
|
||||
widgetName: generateReactKey(), //TODO: figure out what this is to populate appropriately
|
||||
widgetName: widgetName || generateReactKey(), //TODO: figure out what this is to populate appropriately
|
||||
isVisible: true,
|
||||
parentColumnSpace,
|
||||
parentRowSpace,
|
||||
|
|
|
|||
|
|
@ -8,15 +8,3 @@ export const snapToGrid = (
|
|||
const snappedY = Math.floor(y / rowHeight);
|
||||
return [snappedX, snappedY];
|
||||
};
|
||||
|
||||
export const getRowColSizes = (
|
||||
rowCount: number,
|
||||
columnCount: number,
|
||||
width: number,
|
||||
height: number,
|
||||
): { rowHeight: number; columnWidth: number } => {
|
||||
return {
|
||||
columnWidth: width / columnCount,
|
||||
rowHeight: height / rowCount,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@ import {
|
|||
RenderModes,
|
||||
CSSUnits,
|
||||
} from "../constants/WidgetConstants";
|
||||
import { Component } from "react";
|
||||
import React, { Component } from "react";
|
||||
import { BaseStyle } from "../editorComponents/BaseComponent";
|
||||
import _ from "lodash";
|
||||
import React from "react";
|
||||
import DraggableComponent from "../editorComponents/DraggableComponent";
|
||||
import ResizableComponent from "../editorComponents/ResizableComponent";
|
||||
import { ActionPayload } from "../constants/ActionConstants";
|
||||
import { WidgetFunctionsContext } from "../pages/Editor";
|
||||
|
||||
abstract class BaseWidget<
|
||||
T extends WidgetProps & WidgetFunctions,
|
||||
T extends WidgetProps,
|
||||
K extends WidgetState
|
||||
> extends Component<T, K> {
|
||||
constructor(props: T) {
|
||||
|
|
@ -32,6 +32,13 @@ abstract class BaseWidget<
|
|||
this.state = initialState as K;
|
||||
}
|
||||
|
||||
static contextType = WidgetFunctionsContext;
|
||||
|
||||
executeAction(actionPayloads?: ActionPayload[]): void {
|
||||
const { executeAction } = this.context;
|
||||
executeAction && executeAction(actionPayloads);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this.calculateWidgetBounds(
|
||||
this.props.rightColumn,
|
||||
|
|
@ -94,24 +101,28 @@ abstract class BaseWidget<
|
|||
|
||||
getCanvasView(): JSX.Element {
|
||||
const style = this.getPositionStyle();
|
||||
return (
|
||||
<DraggableComponent
|
||||
{...this.props}
|
||||
style={{ ...style }}
|
||||
orientation={"VERTICAL"}
|
||||
>
|
||||
<ResizableComponent style={{ ...style }} {...this.props}>
|
||||
{this.getPageView()}
|
||||
</ResizableComponent>
|
||||
</DraggableComponent>
|
||||
);
|
||||
if (!this.props.parentId) {
|
||||
return this.getPageView();
|
||||
} else {
|
||||
return (
|
||||
<DraggableComponent
|
||||
{...this.props}
|
||||
style={{ ...style }}
|
||||
orientation={"VERTICAL"}
|
||||
>
|
||||
<ResizableComponent style={{ ...style }} {...this.props}>
|
||||
{this.getPageView()}
|
||||
</ResizableComponent>
|
||||
</DraggableComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
abstract getWidgetType(): WidgetType;
|
||||
|
||||
getPositionStyle(): BaseStyle {
|
||||
return {
|
||||
positionType: "CONTAINER_DIRECTION",
|
||||
positionType: "ABSOLUTE",
|
||||
componentHeight: this.state.componentHeight,
|
||||
componentWidth: this.state.componentWidth,
|
||||
yPosition: this.props.topRow * this.props.parentRowSpace,
|
||||
|
|
@ -134,17 +145,11 @@ export interface WidgetState {
|
|||
componentWidth: number;
|
||||
}
|
||||
|
||||
export interface DraggableWidget {
|
||||
type: string;
|
||||
widget: WidgetProps;
|
||||
key: string;
|
||||
}
|
||||
|
||||
export interface WidgetBuilder<T extends WidgetProps> {
|
||||
buildWidget(widgetProps: T): JSX.Element;
|
||||
}
|
||||
|
||||
export interface WidgetProps extends WidgetFunctions, WidgetDataProps {
|
||||
export interface WidgetProps extends WidgetDataProps {
|
||||
key?: string;
|
||||
renderMode: RenderMode;
|
||||
}
|
||||
|
|
@ -164,7 +169,7 @@ export interface WidgetDataProps {
|
|||
}
|
||||
|
||||
export interface WidgetFunctions {
|
||||
executeAction: (actionPayloads?: ActionPayload[]) => void;
|
||||
executeAction?: (actionPayloads?: ActionPayload[]) => void;
|
||||
updateWidget?: Function;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ActionPayload } from "../constants/ActionConstants";
|
|||
|
||||
class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
|
||||
onButtonClick() {
|
||||
this.props.executeAction(this.props.onClick);
|
||||
super.executeAction(this.props.onClick);
|
||||
}
|
||||
|
||||
getPageView() {
|
||||
|
|
@ -14,6 +14,7 @@ class ButtonWidget extends BaseWidget<ButtonWidgetProps, WidgetState> {
|
|||
<ButtonComponent
|
||||
style={this.getPositionStyle()}
|
||||
widgetId={this.props.widgetId}
|
||||
widgetName={this.props.widgetName}
|
||||
key={this.props.widgetId}
|
||||
text={this.props.text}
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React from "react";
|
||||
import BaseWidget, {
|
||||
WidgetProps,
|
||||
WidgetState,
|
||||
WidgetFunctions,
|
||||
} from "./BaseWidget";
|
||||
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
|
||||
import ContainerComponent from "../editorComponents/ContainerComponent";
|
||||
import { ContainerOrientation, WidgetType } from "../constants/WidgetConstants";
|
||||
import WidgetFactory from "../utils/WidgetFactory";
|
||||
|
|
@ -14,7 +10,7 @@ import { GridDefaults } from "../constants/WidgetConstants";
|
|||
import DraggableComponent from "../editorComponents/DraggableComponent";
|
||||
import ResizableComponent from "../editorComponents/ResizableComponent";
|
||||
|
||||
const { DEFAULT_GRID_COLUMNS, DEFAULT_GRID_ROWS } = GridDefaults;
|
||||
const { DEFAULT_GRID_COLUMNS, DEFAULT_GRID_ROW_HEIGHT } = GridDefaults;
|
||||
|
||||
class ContainerWidget extends BaseWidget<
|
||||
ContainerWidgetProps<WidgetProps>,
|
||||
|
|
@ -34,21 +30,15 @@ class ContainerWidget extends BaseWidget<
|
|||
componentDidUpdate(previousProps: ContainerWidgetProps<WidgetProps>) {
|
||||
super.componentDidUpdate(previousProps);
|
||||
let snapColumnSpace = this.state.snapColumnSpace;
|
||||
let snapRowSpace = this.state.snapRowSpace;
|
||||
if (this.state.componentWidth)
|
||||
snapColumnSpace =
|
||||
snapColumnSpace = Math.floor(
|
||||
this.state.componentWidth /
|
||||
(this.props.snapColumns || DEFAULT_GRID_COLUMNS);
|
||||
if (this.state.componentHeight)
|
||||
snapRowSpace =
|
||||
this.state.componentHeight / (this.props.snapRows || DEFAULT_GRID_ROWS);
|
||||
if (
|
||||
this.state.snapColumnSpace !== snapColumnSpace ||
|
||||
this.state.snapRowSpace !== snapRowSpace
|
||||
) {
|
||||
(this.props.snapColumns || DEFAULT_GRID_COLUMNS),
|
||||
);
|
||||
if (this.state.snapColumnSpace !== snapColumnSpace) {
|
||||
this.setState({
|
||||
snapColumnSpace,
|
||||
snapRowSpace,
|
||||
snapRowSpace: DEFAULT_GRID_ROW_HEIGHT,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -57,12 +47,7 @@ class ContainerWidget extends BaseWidget<
|
|||
childWidgetData.parentColumnSpace = this.state.snapColumnSpace;
|
||||
childWidgetData.parentRowSpace = this.state.snapRowSpace;
|
||||
childWidgetData.parentId = this.props.widgetId;
|
||||
const widgetFunctions: WidgetFunctions = this.props as WidgetFunctions;
|
||||
return WidgetFactory.createWidget(
|
||||
childWidgetData,
|
||||
widgetFunctions,
|
||||
this.props.renderMode,
|
||||
);
|
||||
return WidgetFactory.createWidget(childWidgetData, this.props.renderMode);
|
||||
}
|
||||
|
||||
getPageView() {
|
||||
|
|
@ -72,25 +57,31 @@ class ContainerWidget extends BaseWidget<
|
|||
style={{
|
||||
...this.getPositionStyle(),
|
||||
}}
|
||||
isRoot={!this.props.parentId}
|
||||
orientation={this.props.orientation || "VERTICAL"}
|
||||
widgetName={this.props.widgetName}
|
||||
>
|
||||
{_.map(this.props.children, this.renderChildWidget)}
|
||||
</ContainerComponent>
|
||||
);
|
||||
}
|
||||
|
||||
getCanvasView() {
|
||||
const style = this.getPositionStyle();
|
||||
const occupiedSpaces: OccupiedSpace[] | null = this.props.children
|
||||
getOccupiedSpaces(): OccupiedSpace[] | null {
|
||||
return this.props.children
|
||||
? this.props.children.map(child => ({
|
||||
id: child.widgetId,
|
||||
parentId: this.props.widgetId,
|
||||
left: child.leftColumn,
|
||||
top: child.topRow,
|
||||
bottom: child.bottomRow,
|
||||
right: child.rightColumn,
|
||||
}))
|
||||
: null;
|
||||
return (
|
||||
}
|
||||
getCanvasView() {
|
||||
const style = this.getPositionStyle();
|
||||
const occupiedSpaces = this.getOccupiedSpaces();
|
||||
const renderComponent = (
|
||||
<DropTargetComponent
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
|
|
@ -98,18 +89,24 @@ class ContainerWidget extends BaseWidget<
|
|||
style={{
|
||||
...style,
|
||||
}}
|
||||
isRoot={!this.props.parentId}
|
||||
>
|
||||
<DraggableComponent
|
||||
style={{ ...style, xPosition: 0, yPosition: 0 }}
|
||||
{...this.props}
|
||||
orientation={"VERTICAL"}
|
||||
>
|
||||
<ResizableComponent style={{ ...style }} {...this.props}>
|
||||
{this.getPageView()}
|
||||
</ResizableComponent>
|
||||
</DraggableComponent>
|
||||
{this.getPageView()}
|
||||
</DropTargetComponent>
|
||||
);
|
||||
const renderDraggableComponent = (
|
||||
<DraggableComponent
|
||||
style={{ ...style }}
|
||||
{...this.props}
|
||||
orientation={"VERTICAL"}
|
||||
>
|
||||
<ResizableComponent style={{ ...style }} {...this.props}>
|
||||
{renderComponent}
|
||||
</ResizableComponent>
|
||||
</DraggableComponent>
|
||||
);
|
||||
|
||||
return this.props.parentId ? renderDraggableComponent : renderComponent;
|
||||
}
|
||||
|
||||
getWidgetType(): WidgetType {
|
||||
|
|
@ -137,6 +134,7 @@ export type OccupiedSpace = {
|
|||
top: number;
|
||||
bottom: number;
|
||||
id: string;
|
||||
parentId?: string;
|
||||
};
|
||||
|
||||
export default ContainerWidget;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, WidgetState> {
|
|||
<SpinnerComponent
|
||||
style={this.getPositionStyle()}
|
||||
widgetId={this.props.widgetId}
|
||||
widgetName={this.props.widgetName}
|
||||
key={this.props.widgetId}
|
||||
size={this.props.size}
|
||||
value={this.props.value}
|
||||
|
|
|
|||
|
|
@ -2090,7 +2090,7 @@ are-we-there-yet@~1.1.2:
|
|||
delegates "^1.0.0"
|
||||
readable-stream "^2.0.6"
|
||||
|
||||
argparse@^1.0.6, argparse@^1.0.7:
|
||||
argparse@^1.0.7:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
|
||||
integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
|
||||
|
|
@ -2562,13 +2562,6 @@ binary-extensions@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
|
||||
integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
|
||||
|
||||
bindings@^1.2.1:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
|
||||
integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
|
||||
dependencies:
|
||||
file-uri-to-path "1.0.0"
|
||||
|
||||
block-stream@*:
|
||||
version "0.0.9"
|
||||
resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
|
||||
|
|
@ -2782,13 +2775,6 @@ buffer@^4.3.0:
|
|||
ieee754 "^1.1.4"
|
||||
isarray "^1.0.0"
|
||||
|
||||
bufferstreams@^1.1.0:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/bufferstreams/-/bufferstreams-1.1.3.tgz#a8515ac024fa90e8fa7d58c11b13dea1f28abe72"
|
||||
integrity sha512-HaJnVuslRF4g2kSDeyl++AaVizoitCpL9PglzCYwy0uHHyvWerfvEb8jWmYbF1z4kiVFolGomnxSGl+GUQp2jg==
|
||||
dependencies:
|
||||
readable-stream "^2.0.2"
|
||||
|
||||
builtin-modules@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
|
||||
|
|
@ -3031,7 +3017,7 @@ class-utils@^0.3.5:
|
|||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@^2.2:
|
||||
classnames@^2.2, classnames@^2.2.5:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
|
||||
|
|
@ -3190,11 +3176,6 @@ color@^3.0.0:
|
|||
color-convert "^1.9.1"
|
||||
color-string "^1.5.2"
|
||||
|
||||
colors@^1.2.1:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d"
|
||||
integrity sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==
|
||||
|
||||
combined-stream@^1.0.6, combined-stream@~1.0.6:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
|
||||
|
|
@ -3207,7 +3188,7 @@ commander@2.17.x:
|
|||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
|
||||
integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
|
||||
|
||||
commander@^2.11.0, commander@^2.19.0, commander@^2.20.0, commander@^2.9.0, commander@~2.20.0:
|
||||
commander@^2.11.0, commander@^2.19.0, commander@^2.20.0, commander@~2.20.0:
|
||||
version "2.20.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
|
||||
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
|
||||
|
|
@ -3707,11 +3688,6 @@ csstype@^2.2.0:
|
|||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
|
||||
integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
|
||||
|
||||
cubic2quad@^1.0.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/cubic2quad/-/cubic2quad-1.1.1.tgz#69b19c61a3f5b41ecf2f1d5fae8fb03415aa8b15"
|
||||
integrity sha1-abGcYaP1tB7PLx1fro+wNBWqixU=
|
||||
|
||||
currently-unhandled@^0.4.1:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
|
||||
|
|
@ -4856,11 +4832,6 @@ file-loader@3.0.1:
|
|||
loader-utils "^1.0.2"
|
||||
schema-utils "^1.0.0"
|
||||
|
||||
file-uri-to-path@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
|
||||
integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
|
||||
|
||||
filesize@3.6.1:
|
||||
version "3.6.1"
|
||||
resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
|
||||
|
|
@ -5369,7 +5340,7 @@ handle-thing@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
|
||||
integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
|
||||
|
||||
handlebars@^4.0.5, handlebars@^4.1.2:
|
||||
handlebars@^4.1.2:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.2.0.tgz#57ce8d2175b9bbb3d8b3cf3e4217b1aec8ddcb2e"
|
||||
integrity sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==
|
||||
|
|
@ -5688,16 +5659,6 @@ husky@^3.0.5:
|
|||
run-node "^1.0.0"
|
||||
slash "^3.0.0"
|
||||
|
||||
icon-font-generator@^2.1.10:
|
||||
version "2.1.10"
|
||||
resolved "https://registry.yarnpkg.com/icon-font-generator/-/icon-font-generator-2.1.10.tgz#95d6d7f3c44dc68a5fbc37b2e1a9511487387eba"
|
||||
integrity sha512-p8iMm+eG9toP/nRt3K7u19NPgPkjOzJS+zdf/FG7TXH0SE7teiBQIzge2aDvQOZf4HYtCVswz0Do3/nEQHLAhA==
|
||||
dependencies:
|
||||
colors "^1.2.1"
|
||||
glob "^7.1.2"
|
||||
minimist "^1.2.0"
|
||||
webfonts-generator "^0.4.0"
|
||||
|
||||
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
|
||||
version "0.4.24"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
||||
|
|
@ -7214,7 +7175,7 @@ lodash.uniq@^4.5.0:
|
|||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.0, lodash@~4.17.10:
|
||||
"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.0, lodash@~4.17.10:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
|
|
@ -7448,11 +7409,6 @@ micro-api-client@^3.2.1:
|
|||
resolved "https://registry.yarnpkg.com/micro-api-client/-/micro-api-client-3.3.0.tgz#52dd567d322f10faffe63d19d4feeac4e4ffd215"
|
||||
integrity sha512-y0y6CUB9RLVsy3kfgayU28746QrNMpSm9O/AYGNsBgOkJr/X/Jk0VLGoO8Ude7Bpa8adywzF+MzXNZRFRsNPhg==
|
||||
|
||||
microbuffer@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/microbuffer/-/microbuffer-1.0.0.tgz#8b3832ed40c87d51f47bb234913a698a756d19d2"
|
||||
integrity sha1-izgy7UDIfVH0e7I0kTppinVtGdI=
|
||||
|
||||
microevent.ts@~0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
|
||||
|
|
@ -7689,7 +7645,7 @@ mute-stream@0.0.7:
|
|||
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
|
||||
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
|
||||
|
||||
nan@^2.1.0, nan@^2.12.1, nan@^2.13.2:
|
||||
nan@^2.12.1, nan@^2.13.2:
|
||||
version "2.14.0"
|
||||
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
|
||||
integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
|
||||
|
|
@ -7721,13 +7677,6 @@ natural-compare@^1.4.0:
|
|||
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
|
||||
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
|
||||
|
||||
neatequal@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/neatequal/-/neatequal-1.0.0.tgz#2ee1211bc9fa6e4c55715fd210bb05602eb1ae3b"
|
||||
integrity sha1-LuEhG8n6bkxVcV/SELsFYC6xrjs=
|
||||
dependencies:
|
||||
varstream "^0.3.2"
|
||||
|
||||
needle@^2.2.1:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
|
||||
|
|
@ -7774,7 +7723,7 @@ node-forge@0.8.2:
|
|||
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.8.2.tgz#b4bcc59fb12ce77a8825fc6a783dfe3182499c5a"
|
||||
integrity sha512-mXQ9GBq1N3uDCyV1pdSzgIguwgtVpM7f5/5J4ipz12PKWElmPpVWLDuWl8iXmhysr21+WmX/OJ5UKx82wjomgg==
|
||||
|
||||
node-gyp@^3.0.3, node-gyp@^3.8.0:
|
||||
node-gyp@^3.8.0:
|
||||
version "3.8.0"
|
||||
resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
|
||||
integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==
|
||||
|
|
@ -8347,7 +8296,7 @@ p-try@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
|
||||
integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
|
||||
|
||||
pako@^1.0.0, pako@~1.0.5:
|
||||
pako@~1.0.5:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
|
||||
integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
|
||||
|
|
@ -9365,11 +9314,6 @@ private@^0.1.6:
|
|||
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
|
||||
integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
|
||||
|
||||
process-nextick-args@~1.0.6:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
|
||||
integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
|
||||
|
||||
process-nextick-args@~2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
|
||||
|
|
@ -9576,10 +9520,10 @@ rc@^1.2.7:
|
|||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
re-resizable@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.0.0.tgz#84258f098b0dde214a39ca6d9ca9959aeefbc26d"
|
||||
integrity sha512-RTrnhbGgYyZ4hTc6db4JeMnRfmloEPWtuYaXZEa2PRaEC4mreWNFnZtMVsHil3z3iX+WchD+da8BLlTJBcstMA==
|
||||
re-resizable@6.1.0:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.1.0.tgz#ba4ece505b48f05691446d57837151349d7575e8"
|
||||
integrity sha512-Jj9zdYW6SnUto8pmH4b/3Kms/PKPv9CuWE70W1IuUIR1HlrEibgsqhbUe8BYDRBTuagH1gav09806k7TieUeSA==
|
||||
dependencies:
|
||||
fast-memoize "^2.5.1"
|
||||
|
||||
|
|
@ -9661,6 +9605,14 @@ react-dom@^16.7.0:
|
|||
prop-types "^15.6.2"
|
||||
scheduler "^0.15.0"
|
||||
|
||||
react-draggable@4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.0.3.tgz#6b9f76f66431c47b9070e9b805bbc520df8ca481"
|
||||
integrity sha512-4vD6zms+9QGeZ2RQXzlUBw8PBYUXy+dzYX5r22idjp9YwQKIIvD/EojL0rbjS1GK4C3P0rAJnmKa8gDQYWUDyA==
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-error-overlay@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
|
||||
|
|
@ -9708,6 +9660,15 @@ react-redux@^6.0.0:
|
|||
prop-types "^15.7.2"
|
||||
react-is "^16.8.2"
|
||||
|
||||
react-rnd@^10.1.1:
|
||||
version "10.1.1"
|
||||
resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.1.1.tgz#4f4d9d28c46a6060acb64600df7a88490862a324"
|
||||
integrity sha512-KwNUbNd4Kg2DTLdw/Eb8dSC3T5nMRQIRfyyVjdoLT85hKXpeCkMRb2zo4BHCzkgdgCbFGgYLDmj1qRH5DUkTGA==
|
||||
dependencies:
|
||||
re-resizable "6.1.0"
|
||||
react-draggable "4.0.3"
|
||||
tslib "1.10.0"
|
||||
|
||||
react-router-dom@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
|
||||
|
|
@ -9878,7 +9839,7 @@ read-pkg@^5.1.1:
|
|||
parse-json "^5.0.0"
|
||||
type-fest "^0.6.0"
|
||||
|
||||
"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
|
||||
"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
|
||||
version "2.3.6"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
|
||||
integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
|
||||
|
|
@ -9891,16 +9852,6 @@ read-pkg@^5.1.1:
|
|||
string_decoder "~1.1.1"
|
||||
util-deprecate "~1.0.1"
|
||||
|
||||
readable-stream@^1.0.33:
|
||||
version "1.1.14"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
|
||||
integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
|
||||
dependencies:
|
||||
core-util-is "~1.0.0"
|
||||
inherits "~2.0.1"
|
||||
isarray "0.0.1"
|
||||
string_decoder "~0.10.x"
|
||||
|
||||
readable-stream@^3.0.6, readable-stream@^3.1.1:
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
|
||||
|
|
@ -9910,18 +9861,6 @@ readable-stream@^3.0.6, readable-stream@^3.1.1:
|
|||
string_decoder "^1.1.1"
|
||||
util-deprecate "^1.0.1"
|
||||
|
||||
readable-stream@~2.0.4:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
|
||||
integrity sha1-j5A0HmilPMySh4jaz80Rs265t44=
|
||||
dependencies:
|
||||
core-util-is "~1.0.0"
|
||||
inherits "~2.0.1"
|
||||
isarray "~1.0.0"
|
||||
process-nextick-args "~1.0.6"
|
||||
string_decoder "~0.10.x"
|
||||
util-deprecate "~1.0.1"
|
||||
|
||||
readdirp@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
|
||||
|
|
@ -10523,7 +10462,7 @@ sass-loader@7.2.0:
|
|||
pify "^4.0.1"
|
||||
semver "^5.5.0"
|
||||
|
||||
sax@^1.1.5, sax@^1.2.4, sax@~1.2.4:
|
||||
sax@^1.2.4, sax@~1.2.4:
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
|
||||
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
|
||||
|
|
@ -11075,16 +11014,6 @@ string-width@^3.0.0, string-width@^3.1.0:
|
|||
is-fullwidth-code-point "^2.0.0"
|
||||
strip-ansi "^5.1.0"
|
||||
|
||||
string.fromcodepoint@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/string.fromcodepoint/-/string.fromcodepoint-0.2.1.tgz#8d978333c0bc92538f50f383e4888f3e5619d653"
|
||||
integrity sha1-jZeDM8C8klOPUPOD5IiPPlYZ1lM=
|
||||
|
||||
string.prototype.codepointat@^0.2.0:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
|
||||
integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==
|
||||
|
||||
string.prototype.trimleft@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
|
||||
|
|
@ -11108,11 +11037,6 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
|
|||
dependencies:
|
||||
safe-buffer "~5.2.0"
|
||||
|
||||
string_decoder@~0.10.x:
|
||||
version "0.10.31"
|
||||
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
|
||||
integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
|
||||
|
||||
string_decoder@~1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
|
||||
|
|
@ -11267,38 +11191,6 @@ svg-parser@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
|
||||
integrity sha512-1gtApepKFweigFZj3sGO8KT8LvVZK8io146EzXrpVuWCDAbISz/yMucco3hWTkpZNoPabM+dnMOpy6Swue68Zg==
|
||||
|
||||
svg-pathdata@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-1.0.4.tgz#7a681342aac7effd8d52afba7999910c9da3b959"
|
||||
integrity sha1-emgTQqrH7/2NUq+6eZmRDJ2juVk=
|
||||
dependencies:
|
||||
readable-stream "~2.0.4"
|
||||
|
||||
svg2ttf@^4.0.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/svg2ttf/-/svg2ttf-4.3.0.tgz#433440c7e9062f8fdcec3cad721cd08a2c7e51e3"
|
||||
integrity sha512-LZ0B7zzHWLWbzLzwaKGHQvPOuxCXLReIb3LSxFSGUy1gMw2Utk6KGNbTmbmRL6Rk1qDSmTixnDrQgnXaL9n0CA==
|
||||
dependencies:
|
||||
argparse "^1.0.6"
|
||||
cubic2quad "^1.0.0"
|
||||
lodash "^4.17.10"
|
||||
microbuffer "^1.0.0"
|
||||
svgpath "^2.1.5"
|
||||
xmldom "~0.1.22"
|
||||
|
||||
svgicons2svgfont@^5.0.0:
|
||||
version "5.0.2"
|
||||
resolved "https://registry.yarnpkg.com/svgicons2svgfont/-/svgicons2svgfont-5.0.2.tgz#0511823c6491be1a7d543292e29a8ae627ad0406"
|
||||
integrity sha1-BRGCPGSRvhp9VDKS4pqK5ietBAY=
|
||||
dependencies:
|
||||
commander "^2.9.0"
|
||||
neatequal "^1.0.0"
|
||||
readable-stream "^2.0.4"
|
||||
sax "^1.1.5"
|
||||
string.fromcodepoint "^0.2.1"
|
||||
string.prototype.codepointat "^0.2.0"
|
||||
svg-pathdata "^1.0.4"
|
||||
|
||||
svgo@^1.0.0, svgo@^1.2.2:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.0.tgz#bae51ba95ded9a33a36b7c46ce9c359ae9154313"
|
||||
|
|
@ -11318,11 +11210,6 @@ svgo@^1.0.0, svgo@^1.2.2:
|
|||
unquote "~1.1.1"
|
||||
util.promisify "~1.0.0"
|
||||
|
||||
svgpath@^2.1.5:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.2.2.tgz#1c70d44e27f7b6bd42a74ed3c960be93e411def3"
|
||||
integrity sha512-7cXFbkZvPkZpKLC+3QIfyUd3/Un/CvJONjTD3Gz5qLuEa73StPOt8kZjTi9apxO6zwCaza0bPNnmzTyrQ4qQlw==
|
||||
|
||||
symbol-observable@^1.0.2, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
|
||||
|
|
@ -11650,16 +11537,16 @@ tsdx@^0.6.0:
|
|||
tslib "^1.9.3"
|
||||
typescript "^3.4.5"
|
||||
|
||||
tslib@1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
|
||||
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
|
||||
|
||||
tslib@1.9.3, tslib@~1.9.0:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
|
||||
|
||||
tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
|
||||
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
|
||||
|
||||
tsutils@^3.17.1, tsutils@^3.7.0:
|
||||
version "3.17.1"
|
||||
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
|
||||
|
|
@ -11667,33 +11554,6 @@ tsutils@^3.17.1, tsutils@^3.7.0:
|
|||
dependencies:
|
||||
tslib "^1.8.1"
|
||||
|
||||
ttf2eot@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ttf2eot/-/ttf2eot-2.0.0.tgz#8e6337a585abd1608a0c84958ab483ce69f6654b"
|
||||
integrity sha1-jmM3pYWr0WCKDISVirSDzmn2ZUs=
|
||||
dependencies:
|
||||
argparse "^1.0.6"
|
||||
microbuffer "^1.0.0"
|
||||
|
||||
ttf2woff2@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/ttf2woff2/-/ttf2woff2-2.0.3.tgz#5e020afe6e643287f3ad7687abed20fe654eb329"
|
||||
integrity sha1-XgIK/m5kMofzrXaHq+0g/mVOsyk=
|
||||
dependencies:
|
||||
bindings "^1.2.1"
|
||||
bufferstreams "^1.1.0"
|
||||
nan "^2.1.0"
|
||||
node-gyp "^3.0.3"
|
||||
|
||||
ttf2woff@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/ttf2woff/-/ttf2woff-2.0.1.tgz#871832240024b09db9570904c7c1928b8057c969"
|
||||
integrity sha1-hxgyJAAksJ25VwkEx8GSi4BXyWk=
|
||||
dependencies:
|
||||
argparse "^1.0.6"
|
||||
microbuffer "^1.0.0"
|
||||
pako "^1.0.0"
|
||||
|
||||
tty-browserify@0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
|
||||
|
|
@ -11786,11 +11646,6 @@ uglify-js@^3.1.4:
|
|||
commander "~2.20.0"
|
||||
source-map "~0.6.1"
|
||||
|
||||
underscore@^1.7.0:
|
||||
version "1.9.1"
|
||||
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
|
||||
integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==
|
||||
|
||||
unicode-canonical-property-names-ecmascript@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
|
||||
|
|
@ -11893,11 +11748,6 @@ urix@^0.1.0:
|
|||
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
|
||||
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
|
||||
|
||||
url-join@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
|
||||
integrity sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg=
|
||||
|
||||
url-loader@2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.1.0.tgz#bcc1ecabbd197e913eca23f5e0378e24b4412961"
|
||||
|
|
@ -11988,13 +11838,6 @@ value-equal@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
|
||||
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
|
||||
|
||||
varstream@^0.3.2:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/varstream/-/varstream-0.3.2.tgz#18ac6494765f3ff1a35ad9a4be053bec188a5de1"
|
||||
integrity sha1-GKxklHZfP/GjWtmkvgU77BiKXeE=
|
||||
dependencies:
|
||||
readable-stream "^1.0.33"
|
||||
|
||||
vary@~1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
|
||||
|
|
@ -12072,22 +11915,6 @@ wcwidth@^1.0.1:
|
|||
dependencies:
|
||||
defaults "^1.0.3"
|
||||
|
||||
webfonts-generator@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/webfonts-generator/-/webfonts-generator-0.4.0.tgz#5f89fc81c7160e6e0cbbc9b7387e42a5851fda46"
|
||||
integrity sha1-X4n8gccWDm4Mu8m3OH5CpYUf2kY=
|
||||
dependencies:
|
||||
handlebars "^4.0.5"
|
||||
mkdirp "^0.5.0"
|
||||
q "^1.1.2"
|
||||
svg2ttf "^4.0.0"
|
||||
svgicons2svgfont "^5.0.0"
|
||||
ttf2eot "^2.0.0"
|
||||
ttf2woff "^2.0.1"
|
||||
ttf2woff2 "^2.0.3"
|
||||
underscore "^1.7.0"
|
||||
url-join "^1.1.0"
|
||||
|
||||
webidl-conversions@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
|
||||
|
|
@ -12525,11 +12352,6 @@ xmlchars@^2.1.1:
|
|||
resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
|
||||
integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
|
||||
|
||||
xmldom@~0.1.22:
|
||||
version "0.1.27"
|
||||
resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
|
||||
integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
|
||||
|
||||
xregexp@4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user