75cf47b8c5
## Description Core features of Auto Layout and mobile responsiveness, hidden under a feature flag. > Add a TL;DR when description is extra long (helps content team) Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? > Manual regression and sanity tests for all fixed canvas functionality. - Manual - Jest - Cypress ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Arsalan <arsalanyaldram0211@outlook.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
141 lines
3.8 KiB
TypeScript
141 lines
3.8 KiB
TypeScript
import { ButtonVariantTypes } from "components/constants";
|
|
import { Colors } from "constants/Colors";
|
|
import { Positioning } from "utils/autoLayout/constants";
|
|
import { GridDefaults } from "constants/WidgetConstants";
|
|
import { WidgetProps } from "widgets/BaseWidget";
|
|
|
|
import IconSVG from "./icon.svg";
|
|
import Widget from "./widget";
|
|
|
|
export const CONFIG = {
|
|
features: {
|
|
dynamicHeight: {
|
|
sectionIndex: 0,
|
|
active: true,
|
|
},
|
|
},
|
|
type: Widget.getWidgetType(),
|
|
name: "Stats Box",
|
|
iconSVG: IconSVG,
|
|
needsMeta: true,
|
|
isCanvas: true,
|
|
canvasHeightOffset: (props: WidgetProps): number => {
|
|
const offset =
|
|
props.borderWidth && props.borderWidth > 1
|
|
? Math.ceil(
|
|
(2 * parseInt(props.borderWidth, 10) || 0) /
|
|
GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
|
|
)
|
|
: 0;
|
|
|
|
return offset;
|
|
},
|
|
defaults: {
|
|
rows: 14,
|
|
columns: 22,
|
|
animateLoading: true,
|
|
widgetName: "Statbox",
|
|
backgroundColor: "white",
|
|
borderWidth: "1",
|
|
borderColor: Colors.GREY_5,
|
|
minDynamicHeight: 14,
|
|
children: [],
|
|
positioning: Positioning.Fixed,
|
|
blueprint: {
|
|
view: [
|
|
{
|
|
type: "CANVAS_WIDGET",
|
|
position: { top: 0, left: 0 },
|
|
props: {
|
|
containerStyle: "none",
|
|
canExtend: false,
|
|
detachFromLayout: true,
|
|
children: [],
|
|
version: 1,
|
|
blueprint: {
|
|
view: [
|
|
{
|
|
type: "TEXT_WIDGET",
|
|
size: {
|
|
rows: 4,
|
|
cols: 36,
|
|
},
|
|
position: { top: 0, left: 1 },
|
|
props: {
|
|
text: "Page Views",
|
|
fontSize: "0.875rem",
|
|
textColor: "#999999",
|
|
version: 1,
|
|
},
|
|
},
|
|
{
|
|
type: "TEXT_WIDGET",
|
|
size: {
|
|
rows: 4,
|
|
cols: 36,
|
|
},
|
|
position: {
|
|
top: 4,
|
|
left: 1,
|
|
},
|
|
props: {
|
|
text: "2.6 M",
|
|
fontSize: "1.25rem",
|
|
fontStyle: "BOLD",
|
|
version: 1,
|
|
},
|
|
},
|
|
{
|
|
type: "TEXT_WIDGET",
|
|
size: {
|
|
rows: 4,
|
|
cols: 36,
|
|
},
|
|
position: {
|
|
top: 8,
|
|
left: 1,
|
|
},
|
|
props: {
|
|
text: "21% more than last month",
|
|
fontSize: "0.875rem",
|
|
textColor: Colors.GREEN,
|
|
version: 1,
|
|
},
|
|
},
|
|
{
|
|
type: "ICON_BUTTON_WIDGET",
|
|
size: {
|
|
rows: 8,
|
|
cols: 16,
|
|
},
|
|
position: {
|
|
top: 2,
|
|
left: 46,
|
|
},
|
|
props: {
|
|
iconName: "arrow-top-right",
|
|
buttonStyle: "PRIMARY",
|
|
buttonVariant: ButtonVariantTypes.PRIMARY,
|
|
version: 1,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
properties: {
|
|
derived: Widget.getDerivedPropertiesMap(),
|
|
default: Widget.getDefaultPropertiesMap(),
|
|
meta: Widget.getMetaPropertiesMap(),
|
|
config: Widget.getPropertyPaneConfig(),
|
|
contentConfig: Widget.getPropertyPaneContentConfig(),
|
|
styleConfig: Widget.getPropertyPaneStyleConfig(),
|
|
stylesheetConfig: Widget.getStylesheetConfig(),
|
|
},
|
|
};
|
|
|
|
export default Widget;
|