VSinerva/freesewing
1
0
Fork 0
Code Activity

🚧 Component updates

Browse source
This commit is contained in:
Joost De Cock 2019-05-20 16:25:08 +02:00
parent ae977fcd7b
commit e5f63520f9
5 changed files with 142 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/components/package.json
View file

@ -31,6 +31,9 @@
"@freesewing/pattern-info": "^2.0.0-beta.3",
"@freesewing/mui-theme": "^2.0.0-beta.3",
"@freesewing/css-theme": "^2.0.0-beta.3",
"@freesewing/core": "^2.0.0-beta.3",
"@freesewing/examples": "^2.0.0-beta.3",
"@freesewing/rendertest": "^2.0.0-beta.3",
"typeface-roboto-condensed": "latest",
"@freesewing/i18n": "^2.0.0-beta.3",
"@freesewing/utils": "^2.0.0-beta.3",

128
packages/components/src/Example/index.js Normal file
View file

@ -0,0 +1,128 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import examples from "@freesewing/examples";
import rendertest from "@freesewing/rendertest";
import i18nPlugin from "@freesewing/plugin-i18n";
import Draft from "../Draft";
import Design from "../Workbench/Design";
import { FormattedMessage } from "react-intl";
const Example = props => {
const [design, setDesign] = useState(false);
const [focus, setFocus] = useState(null);
const raiseEvent = (type, data) => {
if (type === "clearFocusAll") return setFocus(null);
let f = {};
if (focus !== null) f = { ...focus };
if (typeof f[data.part] === "undefined")
f[data.part] = { paths: [], points: [], coords: [] };
if (type === "point") f[data.part].points.push(data.name);
else if (type === "path") f[data.part].paths.push(data.name);
else if (type === "coords") f[data.part].coords.push(data.coords);
else if (type === "clearFocus") {
let i = focus[data.part][data.type].indexOf(data.name);
f[data.part][data.type].splice(i, 1);
}
setFocus(f);
};
let focusCount = 0;
if (focus !== null) {
for (let p of Object.keys(focus)) {
for (let i in focus[p].points) focusCount++;
for (let i in focus[p].paths) focusCount++;
for (let i in focus[p].coords) focusCount++;
}
}
const patterns = {
examples,
rendertest
};
const settings = { options: { ...props.options } };
if (props.part !== "") settings.only = [props.part];
const pattern = new patterns[props.pattern](settings);
const styles = {
paragraph: {
padding: "0 1rem"
}
};
pattern.draft();
const patternProps = pattern.getRenderProps();
return (
<figure className={design ? "design" : ""}>
<Draft
{...patternProps}
design={design}
focus={focus}
raiseEvent={raiseEvent}
/>
<figcaption>
{props.caption}&nbsp;|&nbsp;
{design ? (
<React.Fragment>
<FormattedMessage id="cfp.designModeIsOn" />
&nbsp; (
<a href="#logo" onClick={() => setDesign(false)}>
<FormattedMessage id="cfp.turnOff" />
</a>
)
{focusCount > 0 ? (
<React.Fragment>
&ensp; (
<a
href="#logo"
onClick={() => raiseEvent("clearFocusAll", null)}
>
<FormattedMessage id="app.reset" />
</a>
)
</React.Fragment>
) : null}
</React.Fragment>
) : (
<React.Fragment>
<FormattedMessage id="cfp.designModeIsOff" />
&nbsp; (
<a href="#logo" onClick={() => setDesign(true)}>
<FormattedMessage id="cfp.turnOn" />
</a>
)
</React.Fragment>
)}
{design ? (
<div className="design">
<Design
focus={focus}
design={design}
raiseEvent={raiseEvent}
parts={patternProps.parts}
/>
</div>
) : null}
</figcaption>
</figure>
);
};
Example.propTypes = {
pattern: PropTypes.string,
design: PropTypes.bool,
caption: PropTypes.string,
part: PropTypes.string,
options: PropTypes.obj
};
Example.defaultProps = {
pattern: "examples",
design: false,
caption: "",
options: {},
part: ""
};
export default Example;

1
packages/components/src/Navbar/index.js
View file

@ -55,7 +55,6 @@ const Navbar = props => {
<a {...homeProps}>{props.emblem}</a>
</div>
);
console.log(props);
return (
<header className="navbar">
<div>

20
packages/components/src/Workbench/Design/index.js
View file

@ -132,10 +132,10 @@ const Design = props => {
container: {
padding: "0 1rem"
},
h3: {
h5: {
margin: "0.5rem 0"
},
h4: {
h6: {
margin: "0.25rem 0 0 0.5rem"
},
ul: {
@ -152,21 +152,21 @@ const Design = props => {
let info = [];
for (let part of Object.keys(props.focus)) {
info.push(
<h3 key={"part-" + part} style={styles.h3}>
<h5 key={"part-" + part} style={styles.h5}>
parts.<b>{part}</b>
</h3>
</h5>
);
for (let i in props.focus[part].paths) {
let name = props.focus[part].paths[i];
let path = props.parts[part].paths[name];
info.push(
<h4
<h6
key={"patitle-" + name}
style={styles.h4}
style={styles.h6}
className={"path c" + (i % 4)}
>
path.<b>{name}</b>
</h4>
</h6>
);
info.push(
<ul className="links" key={"ops-" + name} style={styles.ul}>
@ -183,13 +183,13 @@ const Design = props => {
let name = props.focus[part].points[i];
let point = props.parts[part].points[name];
info.push(
<h4
<h6
key={"potitle-" + name}
style={styles.h4}
style={styles.h6}
className={"point c" + (i % 4)}
>
point.<b>{name}</b>
</h4>
</h6>
);
info.push(
<ul className="links" key={"pdata-" + name} style={styles.ul}>

1
packages/components/src/index.js
View file

@ -2,6 +2,7 @@ export { default as Blockquote } from "./Blockquote";
export { default as Draft } from "./Draft";
export { default as DraftConfigurator } from "./DraftConfigurator";
export { default as Emblem } from "./Emblem";
export { default as Example } from "./Example";
export { default as Footer } from "./Footer";
export { default as Icon } from "./Icon";
export { default as Logo } from "./Logo";