New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@christianhugoch/builder

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@christianhugoch/builder - npm Package Compare versions

Comparing version 0.6.4-beta.14 to 0.7.2-beta.7

src/components/elements/DropMenu.js

2

package.json
{
"name": "@christianhugoch/builder",
"version": "0.6.4-beta.14",
"version": "0.7.2-beta.7",
"description": "Drag and drop view builder for Saltcorn, open-source no-code platform",

@@ -5,0 +5,0 @@ "main": "index.js",

16

src/components/Builder.js

@@ -29,2 +29,3 @@ /**

import { DropDownFilter } from "./elements/DropDownFilter";
import { DropMenu } from "./elements/DropMenu";
import { ToggleFilter } from "./elements/ToggleFilter";

@@ -215,3 +216,3 @@ import optionsCtx from "./context";

<button className="btn btn-sm btn-danger" onClick={deleteThis}>
<FontAwesomeIcon icon={faTrashAlt} className="mr-1" />
<FontAwesomeIcon icon={faTrashAlt} className="me-1" />
Delete

@@ -225,3 +226,3 @@ </button>

>
<FontAwesomeIcon icon={faTrashAlt} className="mr-1" />
<FontAwesomeIcon icon={faTrashAlt} className="me-1" />
Delete contents

@@ -232,6 +233,6 @@ </button>

title="Duplicate element with its children"
className="btn btn-sm btn-secondary ml-2"
className="btn btn-sm btn-secondary ms-2"
onClick={duplicate}
>
<FontAwesomeIcon icon={faCopy} className="mr-1" />
<FontAwesomeIcon icon={faCopy} className="me-1" />
Clone

@@ -278,3 +279,3 @@ </button>

<button
className="btn btn-sm btn-outline-secondary mr-2 builder-save-ajax"
className="btn btn-sm btn-outline-secondary me-2 builder-save-ajax"
onClick={onClick}

@@ -323,3 +324,3 @@ >

<button
className="btn btn-sm btn-secondary ml-2 mr-2"
className="btn btn-sm btn-secondary ms-2 me-2"
title="Undo"

@@ -421,3 +422,3 @@ onClick={() => actions.history.undo()}

</div>
<div className="card toolbox-card pr-0">
<div className="card toolbox-card pe-0">
<div className="card-header">Layers</div>

@@ -456,2 +457,3 @@ {showLayers && (

DropDownFilter,
DropMenu,
Tabs,

@@ -458,0 +460,0 @@ ToggleFilter,

30

src/components/elements/Action.js

@@ -22,4 +22,4 @@ /**

export /**
*
* @param {object} props
*
* @param {object} props
* @param {string} props.name

@@ -39,4 +39,3 @@ * @param {string} props.block

*/
const Action =
({
const Action = ({
name,

@@ -56,10 +55,10 @@ block,

} = useNode((node) => ({ selected: node.events.selected }));
/**
* @type {object}
*/
const btn = (
return (
<button
className={`btn ${action_style || "btn-primary"} ${action_size || ""}`}
{...blockProps(block)}
className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${
selected ? "selected-node" : ""
} ${block ? "d-block" : ""}`}
ref={(dom) => connect(drag(dom))}

@@ -76,10 +75,9 @@ style={

>
<DynamicFontAwesomeIcon icon={action_icon} className="mr-1" />
<DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
{action_label || name}
</button>
);
return selected ? <span className={"selected-node"}>{btn}</span> : btn;
};
export /**
export /**
* @category saltcorn-builder

@@ -90,3 +88,3 @@ * @subcategory components

*/
const ActionSettings = () => {
const ActionSettings = () => {
const node = useNode((node) => ({

@@ -131,3 +129,3 @@ name: node.data.props.name,

value={name}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -176,3 +174,3 @@ setProp((prop) => (prop.name = e.target.value));

</table>
{options.mode === "show" ? (
{options.mode === "show" || name === "Delete" || name === "Reset" ? (
<div className="form-check">

@@ -205,4 +203,4 @@ <input

/**
* @type {object}
/**
* @type {object}
*/

@@ -209,0 +207,0 @@ Action.craft = {

21

src/components/elements/Aggregation.js

@@ -13,3 +13,3 @@ /**

export /**
* @param {object} props
* @param {object} props
* @param {string} props.agg_relation

@@ -25,9 +25,3 @@ * @param {string} props.agg_field

*/
const Aggregation = ({
agg_relation,
agg_field,
stat,
block,
textStyle,
}) => {
const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
const {

@@ -81,3 +75,3 @@ selected,

<select
className="form-control"
className="form-control form-select"
value={agg_relation}

@@ -106,3 +100,3 @@ onChange={(e) =>

<select
className="form-control"
className="form-control form-select"
value={agg_field}

@@ -128,3 +122,3 @@ onChange={(e) =>

value={stat}
className="form-control"
className="form-control form-select"
onChange={(e) => setProp((prop) => (prop.stat = e.target.value))}

@@ -137,2 +131,3 @@ >

<option value={"Min"}>Min</option>
<option value={"Array_Agg"}>Array_Agg</option>
{options.fields

@@ -172,4 +167,4 @@ .filter((f) => f.type.name === "Date")

/**
* @type {object}
/**
* @type {object}
*/

@@ -176,0 +171,0 @@ Aggregation.craft = {

4

src/components/elements/Card.js

@@ -44,4 +44,4 @@ /**

<div className="card-header">
{isFormula.title ? (
<span className="text-monospace">={title}</span>
{isFormula?.title ? (
<span className="font-monospace">={title}</span>
) : (

@@ -48,0 +48,0 @@ title

2

src/components/elements/Columns.js

@@ -162,3 +162,3 @@ /**

<select
className="form-control"
className="form-control form-select"
value={breakpoints[ix]}

@@ -165,0 +165,0 @@ onChange={(e) =>

37

src/components/elements/Container.js

@@ -232,2 +232,3 @@ /**

style: node.data.props.style,
imgResponsiveWidths: node.data.props.imgResponsiveWidths,
}));

@@ -261,2 +262,3 @@ const {

htmlElement,
imgResponsiveWidths,
} = node;

@@ -400,3 +402,2 @@ const options = useContext(optionsCtx);

{ value: "right", title: "Right", label: <AlignEnd /> },
{ value: "justify", title: "Justify", label: <Justify /> },
],

@@ -494,3 +495,3 @@ }}

value={bgFileId}
className="form-control-sm w-100"
className="form-control-sm w-100 form-select"
onChange={setAProp("bgFileId")}

@@ -519,3 +520,3 @@ >

value={imageSize}
className="form-control-sm"
className="form-control-sm form-select"
onChange={setAProp("imageSize")}

@@ -529,2 +530,22 @@ >

</tr>
{imageSize !== "repeat" && (
<tr>
<td>
<label>Responsive widths</label>
</td>
<td>
<input
type="text"
value={imgResponsiveWidths}
className="form-control"
onChange={setAProp("imgResponsiveWidths")}
/>
<small>
<i>List of widths to serve resized images,
e.g. 300, 400, 600</i>
</small>
</td>
</tr>
)}
</Fragment>

@@ -552,3 +573,3 @@ )}

label: "Font family",
type: "String",
type: "Font",
}}

@@ -752,3 +773,3 @@ node={node}

<div style={{ marginTop: "-5px" }}>
<small className="text-muted text-monospace">FORMULA</small>
<small className="text-muted font-monospace">FORMULA</small>
</div>

@@ -814,3 +835,3 @@ </td>

value={minScreenWidth}
className="form-control"
className="form-control form-select"
onChange={setAProp("minScreenWidth")}

@@ -833,3 +854,3 @@ >

value={maxScreenWidth}
className="form-control"
className="form-control form-select"
onChange={setAProp("maxScreenWidth")}

@@ -860,3 +881,3 @@ >

value={hoverColor}
className="form-control"
className="form-control form-select"
onChange={setAProp("hoverColor")}

@@ -863,0 +884,0 @@ >

2

src/components/elements/DropDownFilter.js

@@ -72,3 +72,3 @@ /**

value={name}
className="form-control"
className="form-control form-select"
onChange={(e) => setProp((prop) => (prop.name = e.target.value))}

@@ -75,0 +75,0 @@ >

36

src/components/elements/Field.js

@@ -49,3 +49,4 @@ /**

const options = useContext(optionsCtx);
const blockDisplays = (options.blockDisplay || {})[name];
const blockDisplay = blockDisplays && blockDisplays.includes(fieldview);
useEffect(() => {

@@ -64,3 +65,5 @@ fetchFieldPreview({

className={`${textStyle} ${selected ? "selected-node" : ""} ${
isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
isBlock(block, inline, textStyle) || blockDisplay
? "d-block"
: "d-inline-block"
}`}

@@ -111,2 +114,3 @@ ref={(dom) => connect(drag(dom))}

const handlesTextStyle = (options.handlesTextStyle || {})[name];
const blockDisplay = (options.blockDisplay || {})[name];
const getCfgFields = (fv) =>

@@ -140,3 +144,3 @@ ((options.fieldViewConfigForms || {})[name] || {})[fv];

value={name}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -171,3 +175,3 @@ setProp((prop) => (prop.name = e.target.value));

value={fieldview}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -192,13 +196,15 @@ setProp((prop) => (prop.fieldview = e.target.value));

)}
<tr>
<td></td>
<td>
<BlockOrInlineSetting
block={block}
inline={inline}
textStyle={textStyle}
setProp={setProp}
/>
</td>
</tr>
{!(blockDisplay && blockDisplay.includes(fieldview)) && (
<tr>
<td></td>
<td>
<BlockOrInlineSetting
block={block}
inline={inline}
textStyle={textStyle}
setProp={setProp}
/>
</td>
</tr>
)}
{!(handlesTextStyle && handlesTextStyle.includes(fieldview)) && (

@@ -205,0 +211,0 @@ <TextStyleRow textStyle={textStyle} setProp={setProp} />

30

src/components/elements/Image.js

@@ -74,2 +74,3 @@ /**

isFormula: node.data.props.isFormula,
imgResponsiveWidths: node.data.props.imgResponsiveWidths,
}));

@@ -86,2 +87,3 @@ const {

filepath,
imgResponsiveWidths,
style,

@@ -147,3 +149,3 @@ } = node;

value={srctype}
className="form-control"
className="form-control form-select"
onChange={setAProp("srctype")}

@@ -166,3 +168,3 @@ >

value={fileid}
className="form-control"
className="form-control form-select"
onChange={setAProp("fileid")}

@@ -224,3 +226,3 @@ >

value={field}
className="form-control"
className="form-control form-select"
onChange={setAProp("field")}

@@ -262,2 +264,23 @@ >

<tr>
<td>
<label>Responsive widths</label>
</td>
<td>
<input
type="text"
value={imgResponsiveWidths}
className="form-control"
onChange={setAProp("imgResponsiveWidths")}
/>
<small>
<i>
List of widths to serve resized images, e.g. 300, 400, 600
</i>
</small>
</td>
</tr>
)}
{srctype !== "Upload" && (
<tr>
<td colSpan="2">

@@ -299,2 +322,3 @@ <BlockSetting block={block} setProp={setProp} />

"block",
"imgResponsiveWidths",
{ name: "style", default: {} },

@@ -301,0 +325,0 @@ ],

4

src/components/elements/JoinField.js

@@ -123,3 +123,3 @@ /**

value={name}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -154,3 +154,3 @@ setProp((prop) => (prop.name = e.target.value));

value={fieldview}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -157,0 +157,0 @@ setProp((prop) => (prop.fieldview = e.target.value));

27

src/components/elements/Link.js

@@ -56,3 +56,3 @@ /**

selected ? "selected-node" : ""
} ${isFormula.text ? "text-monospace" : ""} ${link_style} ${link_size}`}
} ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${link_size}`}
{...blockProps(block)}

@@ -70,4 +70,4 @@ ref={(dom) => connect(drag(dom))}

>
<DynamicFontAwesomeIcon icon={link_icon} className="mr-1" />
{isFormula.text ? `=${text}` : text}
<DynamicFontAwesomeIcon icon={link_icon} className="me-1" />
{isFormula?.text ? `=${text}` : text}
</span>

@@ -91,2 +91,3 @@ );

nofollow: node.data.props.nofollow,
in_modal: node.data.props.in_modal,
link_src: node.data.props.link_src,

@@ -111,2 +112,3 @@ target_blank: node.data.props.target_blank,

link_src,
in_modal,
} = node;

@@ -146,3 +148,3 @@ const options = useContext(optionsCtx);

value={link_src}
className="form-control"
className="form-control form-select"
onChange={(e) =>

@@ -189,3 +191,3 @@ setProp((prop) => {

value={url}
className="form-control"
className="form-control form-select"
onChange={setAProp("url")}

@@ -209,3 +211,3 @@ >

value={url}
className="form-control"
className="form-control form-select"
onChange={setAProp("url")}

@@ -257,2 +259,14 @@ >

</div>
<div className="form-check">
<input
className="form-check-input"
name="block"
type="checkbox"
checked={in_modal}
onChange={(e) =>
setProp((prop) => (prop.in_modal = e.target.checked))
}
/>
<label className="form-check-label">Open in popup modal?</label>
</div>
<BlockSetting block={block} setProp={setProp} />

@@ -296,4 +310,5 @@ <TextStyleSetting textStyle={textStyle} setProp={setProp} />

"link_textcol",
"in_modal",
],
},
};

55

src/components/elements/SearchBar.js

@@ -42,7 +42,6 @@ /**

>
<div className="input-group-prepend">
<button className="btn btn-outline-secondary" disabled>
<i className="fas fa-search"></i>
</button>
</div>
<button className="btn btn-outline-secondary" disabled>
<i className="fas fa-search"></i>
</button>
<input

@@ -55,27 +54,25 @@ type="text"

<div className="input-group-append">
{show_badges && (
<div className="input-group-text">
<span className="badge badge-primary">X:Y</span>
{show_badges && (
<div className="input-group-text">
<span className="badge bg-primary">X:Y</span>
</div>
)}
{has_dropdown && (
<Fragment>
<button
className="btn btn-outline-secondary"
onClick={() => setDropdown(!showDropdown)}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
<div
className={`dropdown-menu searchbar-dropdown ${
showDropdown ? "show" : ""
}`}
style={{ width: dropWidth, left: 0 }}
>
<div className="canvas">{children}</div>
</div>
)}
{has_dropdown && (
<Fragment>
<button
className="btn btn-outline-secondary"
onClick={() => setDropdown(!showDropdown)}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
<div
className={`dropdown-menu searchbar-dropdown ${
showDropdown ? "show" : ""
}`}
style={{ width: dropWidth, left: 0 }}
>
<div className="canvas">{children}</div>
</div>
</Fragment>
)}
</div>
</Fragment>
)}
</div>

@@ -82,0 +79,0 @@ );

259

src/components/elements/Tabs.js

@@ -7,5 +7,6 @@ /**

import React, { Fragment, useState } from "react";
import React, { Fragment, useState, useContext, useEffect } from "react";
import { ntimes } from "./Columns";
import { Column } from "./Column";
import optionsCtx from "../context";

@@ -25,3 +26,3 @@ import { Element, useNode } from "@craftjs/core";

*/
const Tabs = ({ contents, titles, tabsStyle, ntabs, independent }) => {
const Tabs = ({ contents, titles, tabsStyle, ntabs, independent, field }) => {
const {

@@ -33,3 +34,2 @@ selected,

const [showTabs, setShowTabs] = useState([true]);
if (tabsStyle === "Accordion")

@@ -94,26 +94,56 @@ return (

>
{ntimes(ntabs, (ix) => (
<li key={ix} className="nav-item" role="presentation">
<a
className={`nav-link ${ix === showTab ? `active` : ""}`}
onClick={() => setShowTab(ix)}
>
{titles[ix]}
</a>
</li>
))}
{ntimes(ntabs, (ix) => {
if (!titles[ix]) return null;
const targetIx =
typeof titles[ix].value === "undefined" ? ix : titles[ix].value;
return (
<li key={ix} className="nav-item" role="presentation">
<a
className={`nav-link ${targetIx === showTab ? `active` : ""}`}
onClick={() => setShowTab(targetIx)}
>
{titles[ix] &&
(typeof titles[ix].label === "undefined"
? titles[ix]
: titles[ix].label === ""
? "(empty)"
: titles[ix].label)}
</a>
</li>
);
})}
</ul>
<div className="tab-content" id="myTabContent">
{ntimes(ntabs, (ix) => (
<div
key={ix}
className={`tab-pane fade ${ix === showTab ? `show active` : ""}`}
role="tabpanel"
aria-labelledby="home-tab"
>
<Element canvas id={`Tab${ix}`} is={Column}>
{contents[ix]}
</Element>
</div>
))}
{ntimes(ntabs, (ix) => {
if (!titles[ix]) return null;
const useIx =
typeof titles[ix].value === "undefined" ? ix : titles[ix].value;
if (useIx !== showTab)
return (
<div className="d-none" key={ix}>
<Element canvas id={`Tab${useIx}`} is={Column}>
{contents[useIx]}
</Element>
</div>
);
//d-none display of useIx is bug workaround? needed
else
return (
<div
key={ix}
className={`tab-pane fade ${
useIx === showTab ? `show active` : ""
}`}
role="tabpanel"
aria-labelledby="home-tab"
>
<div className="d-none">{useIx}</div>
<Element canvas id={`Tab${useIx}`} is={Column}>
{contents[useIx]}
</Element>
</div>
);
})}
</div>

@@ -135,3 +165,5 @@ </Fragment>

independent: node.data.props.independent,
deeplink: node.data.props.deeplink,
titles: node.data.props.titles,
field: node.data.props.field,
}));

@@ -142,5 +174,30 @@ const {

tabsStyle,
deeplink,
independent,
ntabs,
field,
} = node;
const options = useContext(optionsCtx);
useEffect(() => {
if (field)
fetch(`/api/${options.tableName}/distinct/${field}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"CSRF-Token": options.csrfToken,
},
})
.then(function (response) {
if (response.status < 399) return response.json();
else return "";
})
.then(function (data) {
if (data.success) {
const len = data.success.length;
setProp((prop) => (prop.ntabs = len));
setProp((prop) => (prop.titles = data.success));
}
});
}, [field]);
return (

@@ -156,3 +213,3 @@ <table className="w-100" accordiontitle="Placement">

value={tabsStyle}
className="form-control"
className="form-control form-select"
onChange={(e) =>

@@ -167,58 +224,111 @@ setProp((prop) => {

<option>Accordion</option>
{["show", "edit"].includes(options.mode) && (
<option>Value switch</option>
)}
</select>
</td>
</tr>
<tr>
<th>
<label>Number of sections</label>
</th>
<td>
<input
type="number"
className="form-control"
value={ntabs}
step="1"
min="0"
max="20"
onChange={(e) => setProp((prop) => (prop.ntabs = e.target.value))}
/>
</td>
</tr>
<tr>
<th colSpan="2">Titles</th>
</tr>
{ntimes(ntabs, (ix) => (
<tr key={ix}>
<th>{ix + 1}</th>
{tabsStyle === "Value switch" ? (
<tr>
<td>
<input
type="text"
className="form-control text-to-display"
value={titles[ix]}
onChange={(e) =>
setProp((prop) => (prop.titles[ix] = e.target.value))
}
/>
<label>Field</label>
</td>
<td>
<select
value={field}
className="form-control form-select"
onChange={(e) => {
setProp((prop) => (prop.field = e.target.value));
}}
>
{options.fields.map((f, ix) => (
<option key={ix} value={f.name}>
{f.label}
</option>
))}
</select>
</td>
</tr>
))}
{tabsStyle === "Accordion" && (
<tr>
<td colSpan="2">
<div className="form-check">
) : (
<Fragment>
<tr>
<th>
<label>Number of sections</label>
</th>
<td>
<input
className="form-check-input"
name="block"
type="checkbox"
checked={independent}
onChange={(e) => {
if (e.target) {
setProp((prop) => (prop.independent = e.target.checked));
type="number"
className="form-control"
value={ntabs}
step="1"
min="0"
max="20"
onChange={(e) =>
setProp((prop) => (prop.ntabs = e.target.value))
}
/>
</td>
</tr>
<tr>
<th colSpan="2">Titles</th>
</tr>
{ntimes(ntabs, (ix) => (
<tr key={ix}>
<th>{ix + 1}</th>
<td>
<input
type="text"
className="form-control text-to-display"
value={titles[ix]}
onChange={(e) =>
setProp((prop) => (prop.titles[ix] = e.target.value))
}
}}
/>
<label className="form-check-label">Open independently</label>
</div>
</td>
</tr>
/>
</td>
</tr>
))}
{tabsStyle === "Accordion" ? (
<tr>
<td colSpan="2">
<div className="form-check">
<input
className="form-check-input"
name="block"
type="checkbox"
checked={independent}
onChange={(e) => {
if (e.target) {
setProp(
(prop) => (prop.independent = e.target.checked)
);
}
}}
/>
<label className="form-check-label">
Open independently
</label>
</div>
</td>
</tr>
) : (
<tr>
<td colSpan="2">
<div className="form-check">
<input
className="form-check-input"
name="block"
type="checkbox"
checked={deeplink}
onChange={(e) => {
if (e.target) {
setProp((prop) => (prop.deeplink = e.target.checked));
}
}}
/>
<label className="form-check-label">Deep link</label>
</div>
</td>
</tr>
)}
</Fragment>
)}

@@ -239,2 +349,3 @@ </tbody>

independent: false,
deeplink: true,
},

@@ -241,0 +352,0 @@ displayName: "Tabs",

86

src/components/elements/Text.js

@@ -18,2 +18,4 @@ /**

isBlock,
reactifyStyles,
SettingsRow,
} from "./utils";

@@ -78,3 +80,12 @@ import ContentEditable from "react-contenteditable";

*/
const Text = ({ text, block, inline, isFormula, textStyle, icon, font }) => {
const Text = ({
text,
block,
inline,
isFormula,
textStyle,
icon,
font,
style,
}) => {
const {

@@ -97,3 +108,3 @@ connectors: { connect, drag },

isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
} ${textStyle} is-text ${isFormula.text ? "text-monospace" : ""} ${
} ${textStyle} is-text ${isFormula.text ? "font-monospace" : ""} ${
selected ? "selected-node" : ""

@@ -103,5 +114,8 @@ }`}

onClick={(e) => selected && setEditable(true)}
style={font ? { fontFamily: font } : {}}
style={{
...(font ? { fontFamily: font } : {}),
...reactifyStyles(style || {}),
}}
>
<DynamicFontAwesomeIcon icon={icon} className="mr-1" />
<DynamicFontAwesomeIcon icon={icon} className="me-1" />
{isFormula.text ? (

@@ -153,2 +167,3 @@ <Fragment>

font: node.data.props.font,
style: node.data.props.style,
}));

@@ -165,2 +180,3 @@ const {

font,
style,
} = node;

@@ -217,3 +233,7 @@ const { mode, fields } = useContext(optionsCtx);

<label>Label for Field</label>
<select value={labelFor} onChange={setAProp("labelFor")}>
<select
value={labelFor}
onChange={setAProp("labelFor")}
className="form-control form-select"
>
<option value={""}></option>

@@ -245,15 +265,44 @@ {fields.map((f, ix) => (

</tr>
<tr>
<td>
<label>Font</label>
</td>
<td>
<input
type="text"
className="form-control"
value={font}
onChange={setAProp("font")}
/>
</td>
</tr>
<SettingsRow
field={{
name: "font",
label: "Font family",
type: "Font",
}}
node={node}
setProp={setProp}
/>
<SettingsRow
field={{
name: "font-size",
label: "Font size",
type: "DimUnits",
}}
node={node}
setProp={setProp}
isStyle={true}
/>
<SettingsRow
field={{
name: "font-weight",
label: "Weight",
type: "Integer",
min: 100,
max: 900,
step: 100,
}}
node={node}
setProp={setProp}
isStyle={true}
/>
<SettingsRow
field={{
name: "line-height",
label: "Line height",
type: "DimUnits",
}}
node={node}
setProp={setProp}
isStyle={true}
/>
</tbody>

@@ -283,2 +332,3 @@ </table>

font: "",
style: {},
},

@@ -285,0 +335,0 @@ displayName: "Text",

10

src/components/elements/ToggleFilter.js

@@ -97,3 +97,3 @@ /**

value={name}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -125,3 +125,3 @@ setProp((prop) => (prop.name = e.target.value));

value={value}
className="w-100"
className="w-100 form-select"
onChange={setAProp("value")}

@@ -150,3 +150,3 @@ >

value={preset_value}
className="form-control"
className="form-control form-select"
onChange={setAProp("preset_value")}

@@ -182,3 +182,3 @@ >

<select
className="form-control"
className="form-control form-select"
value={size}

@@ -202,3 +202,3 @@ onChange={setAProp("size")}

<select
className="form-control"
className="form-control form-select"
value={style}

@@ -205,0 +205,0 @@ onChange={setAProp("style")}

157

src/components/elements/utils.js

@@ -133,18 +133,17 @@ /**

)}
<div className="input-group-append">
<button
className={`btn activate-formula ${
isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
}`}
title="Calculated formula"
type="button"
onClick={switchIsFml}
>
<i className="fas fa-calculator"></i>
</button>
</div>
<button
className={`btn activate-formula ${
isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
}`}
title="Calculated formula"
type="button"
onClick={switchIsFml}
>
<i className="fas fa-calculator"></i>
</button>
</div>
{isFormula[nodekey] && (
<div style={{ marginTop: "-5px" }}>
<small className="text-muted text-monospace">FORMULA</small>
<small className="text-muted font-monospace">FORMULA</small>
</div>

@@ -171,2 +170,3 @@ )}

<select
className="form-control form-select"
value={minRole}

@@ -209,3 +209,3 @@ onChange={(e) => (e) => {

value={minRole}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -242,3 +242,3 @@ if (e.target) {

value={textStyle}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -258,8 +258,8 @@ if (e.target) {

<option value="h6">Heading 6</option>
<option value="font-weight-bold">Bold</option>
<option value="font-italic">Italics</option>
<option value="fw-bold">Bold</option>
<option value="fst-italic">Italics</option>
<option value="small">Small</option>
<option value="text-muted">Muted</option>
<option value="text-underline">Underline</option>
<option value="text-monospace">Monospace</option>
<option value="font-monospace">Monospace</option>
</select>

@@ -329,3 +329,3 @@ );

isCurrent ? "primary" : "secondary"
} pl-1 text-white w-100 mt-1`}
} ps-1 text-white w-100 mt-1`}
onClick={() => setCurrentTab(ix)}

@@ -396,19 +396,21 @@ >

*/
export const fetchFieldPreview = (args = {}) => (changes = {}) => {
const { node_id, options, name, fieldview, setPreviews } = {
...args,
...changes,
export const fetchFieldPreview =
(args = {}) =>
(changes = {}) => {
const { node_id, options, name, fieldview, setPreviews } = {
...args,
...changes,
};
const configuration = {
...(args.configuration || {}),
...(changes.configuration || {}),
};
fetchPreview({
options,
node_id,
setPreviews,
url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
body: { configuration },
});
};
const configuration = {
...(args.configuration || {}),
...(changes.configuration || {}),
};
fetchPreview({
options,
node_id,
setPreviews,
url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
body: { configuration },
});
};

@@ -420,27 +422,29 @@ /**

*/
export const fetchViewPreview = (args = {}) => (changes = {}) => {
const { node_id, options, view, setPreviews, configuration } = {
...args,
...changes,
export const fetchViewPreview =
(args = {}) =>
(changes = {}) => {
const { node_id, options, view, setPreviews, configuration } = {
...args,
...changes,
};
let viewname,
body = configuration ? { ...configuration } : {};
if (view.includes(":")) {
const [reltype, rest] = view.split(":");
const [vnm] = rest.split(".");
viewname = vnm;
body.reltype = reltype;
body.path = rest;
} else viewname = view;
fetchPreview({
options,
node_id,
setPreviews,
url: `/view/${viewname}/preview`,
body,
isView: true,
});
};
let viewname,
body = configuration ? { ...configuration } : {};
if (view.includes(":")) {
const [reltype, rest] = view.split(":");
const [vnm] = rest.split(".");
viewname = vnm;
body.reltype = reltype;
body.path = rest;
} else viewname = view;
fetchPreview({
options,
node_id,
setPreviews,
url: `/view/${viewname}/preview`,
body,
isView: true,
});
};
export /**

@@ -576,8 +580,8 @@ * @param {object} props

{fields.map((f, ix) => {
if (f.showIf && node && node.configuration) {
if (f.showIf && configuration) {
let noshow = false;
Object.entries(f.showIf).forEach(([nm, value]) => {
if (Array.isArray(value))
noshow = noshow || value.includes(node.configuration[nm]);
else noshow = noshow || value !== node.configuration[nm];
noshow = noshow || value.includes(configuration[nm]);
else noshow = noshow || value !== configuration[nm];
});

@@ -637,2 +641,4 @@ if (noshow) return null;

*/
const options = useContext(optionsCtx);
const myOnChange = (v) => {

@@ -661,4 +667,7 @@ setProp((prop) => {

field.input_type = "select";
field.options = field.attributes.options;
if (!field.required) field.options.unshift("");
field.options =
typeof field.attributes.options === "string"
? field.attributes.options.split(",").map((s) => s.trim())
: field.attributes.options;
if (!field.required && field.options) field.options.unshift("");
}

@@ -674,3 +683,3 @@ const dispatch = {

<select
className="form-control"
className="form-control form-select"
value={value || ""}

@@ -699,2 +708,16 @@ onChange={(e) => e.target && myOnChange(e.target.value)}

},
Font: () => (
<select
className="form-control form-select"
value={value || ""}
onChange={(e) => e.target && myOnChange(e.target.value)}
>
<option value={""}></option>
{Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
<option key={ix} value={ff}>
{nm}
</option>
))}
</select>
),
Integer: () => (

@@ -752,3 +775,3 @@ <input

<select
className="form-control"
className="form-control form-select"
value={value || ""}

@@ -1048,3 +1071,3 @@ onChange={(e) => e.target && myOnChange(e.target.value)}

<select
className="form-control"
className="form-control form-select"
value={values[keyPrefix + "style"]}

@@ -1081,3 +1104,3 @@ onChange={setAProp(keyPrefix + "style")}

<select
className="form-control"
className="form-control form-select"
value={values[keyPrefix + "size"]}

@@ -1084,0 +1107,0 @@ onChange={setAProp(keyPrefix + "size")}

20

src/components/elements/View.js

@@ -82,2 +82,3 @@ /**

state: node.data.props.state,
extra_state_fml: node.data.props.extra_state_fml,
configuration: node.data.props.configuration, // fixed states

@@ -94,2 +95,3 @@ node_id: node.id,

configuration,
extra_state_fml,
} = node;

@@ -114,3 +116,3 @@ const options = useContext(optionsCtx);

value={view}
className="form-control"
className="form-control form-select"
onChange={(e) => {

@@ -133,3 +135,3 @@ setProp((prop) => (prop.view = e.target.value));

value={state}
className="form-control"
className="form-control form-select"
onChange={setAProp("state")}

@@ -156,2 +158,16 @@ >

)}
{(state === "shared" || options.mode === "page") && (
<Fragment>
{" "}
<label>Extra state Formula</label>
<input
type="text"
className="viewlink-label form-control"
value={extra_state_fml}
onChange={(e) =>
setProp((prop) => (prop.extra_state_fml = e.target.value))
}
/>
</Fragment>
)}
{view ? (

@@ -158,0 +174,0 @@ <a

23

src/components/elements/ViewLink.js

@@ -36,3 +36,3 @@ /**

* @subcategory components
* @namespace
* @namespace
*/

@@ -76,3 +76,3 @@ const ViewLink = ({

>
{link_icon ? <i className={`${link_icon} mr-1`}></i> : ""}
{link_icon ? <i className={`${link_icon} me-1`}></i> : ""}
{displabel}

@@ -104,2 +104,3 @@ </span>

link_textcol: node.data.props.link_textcol,
extra_state_fml: node.data.props.extra_state_fml,
}));

@@ -115,2 +116,3 @@ const {

textStyle,
extra_state_fml,
} = node;

@@ -127,3 +129,3 @@ const options = useContext(optionsCtx);

value={name}
className="form-control"
className="form-control form-select"
onChange={(e) =>

@@ -156,2 +158,16 @@ setProp((prop) => (prop.name = e.target.value))

</tr>
<tr>
<td colSpan="2">
<label>Extra state Formula</label>
<input
type="text"
className="viewlink-label form-control"
value={extra_state_fml}
onChange={(e) =>
setProp((prop) => (prop.extra_state_fml = e.target.value))
}
/>
</td>
</tr>
<ButtonOrLinkSettingsRows

@@ -212,4 +228,5 @@ setProp={setProp}

"link_textcol",
"extra_state_fml",
],
},
};

6

src/components/Library.js

@@ -171,3 +171,3 @@ /**

>
<FontAwesomeIcon icon={faPlus} className="mr-1" />
<FontAwesomeIcon icon={faPlus} className="me-1" />
Add

@@ -196,7 +196,7 @@ </button>

<button className={`btn btn-primary mt-3`} onClick={addSelected}>
<FontAwesomeIcon icon={faPlus} className="mr-1" />
<FontAwesomeIcon icon={faPlus} className="me-1" />
Add
</button>
<button
className={`btn btn-outline-secondary ml-2 mt-3`}
className={`btn btn-outline-secondary ms-2 mt-3`}
onClick={() => setAdding(false)}

@@ -203,0 +203,0 @@ >

14

src/components/RenderNode.js

@@ -130,3 +130,3 @@ /**

>
<div className="dispname mr-3">{name}</div>{" "}
<div className="dispname me-3">{name}</div>{" "}
{moveable && isActive && (

@@ -137,3 +137,3 @@ <button

>
<FontAwesomeIcon icon={faArrowsAlt} className="mr-2" />
<FontAwesomeIcon icon={faArrowsAlt} className="me-2" />
</button>

@@ -144,3 +144,3 @@ )}

icon={faArrowUp}
className="mr-2"
className="me-2"
onClick={() => {

@@ -157,3 +157,3 @@ actions.selectNode(parent);

onClick={duplicate}
className="mr-2"
className="me-2"
/>,

@@ -163,3 +163,3 @@ <FontAwesomeIcon

icon={faTrashAlt}
className="mr-2"
className="me-2"
onMouseDown={(e) => {

@@ -183,3 +183,3 @@ e.stopPropagation();

{moveable ? (
<Btn className="mr-2 cursor-move" ref={drag}>
<Btn className="me-2 cursor-move" ref={drag}>
<Move />

@@ -190,3 +190,3 @@ </Btn>

<Btn
className="mr-2 cursor-pointer"
className="me-2 cursor-pointer"
onClick={() => {

@@ -193,0 +193,0 @@ actions.selectNode(parent);

37

src/components/storage.js

@@ -28,2 +28,3 @@ /**

import { ToggleFilter } from "./elements/ToggleFilter";
import { DropMenu } from "./elements/DropMenu";

@@ -73,2 +74,3 @@ /**

ToggleFilter,
DropMenu,
];

@@ -133,2 +135,3 @@

labelFor={segment.labelFor || ""}
style={segment.style || {}}
icon={segment.icon}

@@ -145,2 +148,3 @@ font={segment.font || ""}

state={segment.state}
extra_state_fml={segment.extra_state_fml}
configuration={segment.configuration || {}}

@@ -209,2 +213,3 @@ />

imageSize={segment.imageSize || "contain"}
imgResponsiveWidths={segment.imgResponsiveWidths}
bgType={segment.bgType || "None"}

@@ -227,2 +232,10 @@ style={segment.style || {}}

} else if (segment.type === "tabs") {
let contentsArray = segment.contents.map(toTag);
let contents;
if (segment.tabsStyle === "Value switch") {
contents = {};
segment.titles.forEach(({ label, value }, ix) => {
contents[value] = contentsArray[ix];
});
} else contents = contentsArray;
return (

@@ -234,4 +247,6 @@ <Tabs

independent={segment.independent}
deeplink={segment.deeplink}
field={segment.field}
tabsStyle={segment.tabsStyle}
contents={segment.contents.map(toTag)}
contents={contents}
/>

@@ -325,2 +340,3 @@ );

const go = (node) => {
if (!node) return;
const matchElement = allElements.find(

@@ -378,2 +394,3 @@ (e) =>

imageSize: node.props.imageSize,
imgResponsiveWidths: node.props.imgResponsiveWidths,
bgColor: node.props.bgColor,

@@ -406,2 +423,3 @@ setTextColor: node.props.setTextColor,

labelFor: node.props.labelFor,
style: node.props.style,
icon: node.props.icon,

@@ -422,10 +440,20 @@ font: node.props.font,

if (node.displayName === Tabs.craft.displayName) {
let contents;
if (node.props.tabsStyle === "Value switch") {
contents = node.props.titles.map(({ value }, ix) => {
const useIx = typeof value === "undefined" ? ix : value;
return go(nodes[node.linkedNodes["Tab" + useIx]]);
});
} else
contents = ntimes(node.props.ntabs, (ix) =>
go(nodes[node.linkedNodes["Tab" + ix]])
);
return {
type: "tabs",
contents: ntimes(node.props.ntabs, (ix) =>
go(nodes[node.linkedNodes["Tab" + ix]])
),
contents,
titles: node.props.titles,
tabsStyle: node.props.tabsStyle,
field: node.props.field,
independent: node.props.independent,
deeplink: node.props.deeplink,
ntabs: node.props.ntabs,

@@ -443,2 +471,3 @@ };

configuration: node.props.configuration,
extra_state_fml: node.props.extra_state_fml,
};

@@ -445,0 +474,0 @@ }

24

src/components/Toolbox.js

@@ -19,2 +19,3 @@ /**

import { DropDownFilter } from "./elements/DropDownFilter";
import { DropMenu } from "./elements/DropMenu";
import { ToggleFilter } from "./elements/ToggleFilter";

@@ -282,3 +283,3 @@ import { Empty } from "./elements/Empty";

>
<SearchBar />
<Element canvas is={SearchBar}></Element>
</WrapElem>

@@ -341,3 +342,3 @@ );

title="Dropdown filter"
label="Dropdown"
label="Select"
>

@@ -352,2 +353,14 @@ <DropDownFilter

);
const DropMenuElem = ({ connectors }) => (
<WrapElem
connectors={connectors}
icon="far fa-caret-square-down"
title="Dropdown menu"
label="DropMenu"
>
<Element canvas is={DropMenu}></Element>
</WrapElem>
);
/**

@@ -463,3 +476,3 @@ * @param {object} props

title="Aggregation"
label="Calc"
label="Aggreg8"
bold

@@ -537,2 +550,3 @@ fontSize="16px"

<HTMLElem connectors={connectors} />
<DropMenuElem connectors={connectors} />
</div>

@@ -633,2 +647,3 @@ </Fragment>

<JoinFieldElem connectors={connectors} options={options} />
<DropMenuElem connectors={connectors} />
</div>

@@ -675,4 +690,7 @@ </Fragment>

</div>
<div className="toolbar-row">
<DropMenuElem connectors={connectors} />
</div>
</Fragment>
);
};
dist/builder_bundle.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc