🚧 Progress on React components
This commit is contained in:
Joost De Cock
parent
3d9192a5ae
commit
ea87274eb2
10 changed files with 270 additions and 107 deletions
89
packages/components/src/DraftActions/index.js
Normal file
89
packages/components/src/DraftActions/index.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { gistDefaults } from "../utils";
|
||||
import { patternInfo, patternList } from "@freesewing/patterns";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import List from "@material-ui/core/List";
|
||||
import DraftSettingSa from "../DraftSettingSa";
|
||||
import DraftSettingMargin from "../DraftSettingMargin";
|
||||
import DraftSettingComplete from "../DraftSettingComplete";
|
||||
import DraftSettingPaperless from "../DraftSettingPaperless";
|
||||
import DraftSettingUnits from "../DraftSettingUnits";
|
||||
import DraftSettingLanguage from "../DraftSettingLanguage";
|
||||
import DraftSettingOnly from "../DraftSettingOnly";
|
||||
import DownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
|
||||
const DraftActions = props => {
|
||||
const [expanded, setExpanded] = useState([]);
|
||||
|
||||
const toggleGroup = group => {
|
||||
let shown = expanded.slice(0);
|
||||
let index = shown.indexOf(group);
|
||||
if (index === -1) shown.push(group);
|
||||
else shown.splice(index, 1);
|
||||
setExpanded(shown);
|
||||
};
|
||||
|
||||
let paperSizes = ["A4", "Letter", "A3", "Tabloid", "A2", "A1", "A0"];
|
||||
let groups = {
|
||||
saveDraft: [
|
||||
<li>
|
||||
<FormattedMessage id="app.saveDraftToYourAccount" />
|
||||
</li>,
|
||||
<li>
|
||||
<FormattedMessage id="app.saveGistAsJSON" />
|
||||
</li>,
|
||||
<li>
|
||||
<FormattedMessage id="app.saveGistAsYAML" />
|
||||
</li>,
|
||||
<li>
|
||||
<FormattedMessage id="app.saveSvg" />
|
||||
</li>
|
||||
],
|
||||
exportDraft: [
|
||||
<li>
|
||||
<FormattedMessage id="app.exportDraft" />: PDF
|
||||
</li>,
|
||||
paperSizes.map(size => (
|
||||
<li>
|
||||
<FormattedMessage id="app.exportTiledPdf" />: {size}
|
||||
</li>
|
||||
))
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<ul className="nav l2">
|
||||
{Object.keys(groups).map(group => {
|
||||
let open = true;
|
||||
if (expanded.indexOf(group) === -1) open = false;
|
||||
let children = null;
|
||||
if (open) children = groups[group].map(component => component);
|
||||
return (
|
||||
<React.Fragment>
|
||||
<li
|
||||
className={open ? "expanded" : "collapsed"}
|
||||
key={group + "-ghead"}
|
||||
>
|
||||
<h3 onClick={() => toggleGroup(group)}>
|
||||
<DownIcon
|
||||
className={
|
||||
"icon-col-exp " + (open ? "expanded" : "collapsed")
|
||||
}
|
||||
/>
|
||||
<FormattedMessage id={"app." + group} />
|
||||
</h3>
|
||||
</li>
|
||||
{children}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
DraftActions.propTypes = {};
|
||||
|
||||
DraftActions.defaultProps = {};
|
||||
|
||||
export default DraftActions;
|
||||
31
packages/components/src/DraftActions/stories.js
Normal file
31
packages/components/src/DraftActions/stories.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import DraftSettings from ".";
|
||||
|
||||
const props = {
|
||||
triggerAction: (type, data) =>
|
||||
console.log(`Action of type ${type} triggered, data passed is`, data),
|
||||
updateValue: (type, data) =>
|
||||
console.log(`Update ${type} with new value`, data),
|
||||
gist: {
|
||||
settings: {
|
||||
options: {}
|
||||
}
|
||||
},
|
||||
languages: {
|
||||
de: "German",
|
||||
en: "English",
|
||||
es: "Spanish",
|
||||
fr: "French",
|
||||
nl: "Dutch"
|
||||
},
|
||||
language: "en"
|
||||
};
|
||||
|
||||
storiesOf("DraftActions", module)
|
||||
.add("Simon metric", () => (
|
||||
<DraftSettings pattern="simon" gist={false} units="metric" {...props} />
|
||||
))
|
||||
.add("Trayvon imperial", () => (
|
||||
<DraftSettings pattern="trayvon" gist={false} units="imperial" {...props} />
|
||||
));
|
||||
|
|
@ -5,6 +5,7 @@ import OptionPreamble from "../OptionPreamble";
|
|||
|
||||
const DraftSettingLanguage = props => {
|
||||
const [value, setValue] = useState(props.dflt);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const update = (name, newValue, evt) => {
|
||||
props.updateValue(props.name, newValue);
|
||||
|
|
@ -16,8 +17,22 @@ const DraftSettingLanguage = props => {
|
|||
props.updateValue(props.name, props.dflt);
|
||||
};
|
||||
|
||||
const toggleExpanded = () => setExpanded(!expanded);
|
||||
|
||||
const option = (
|
||||
<FormFieldList
|
||||
name={props.name}
|
||||
value={value}
|
||||
dflt={props.dflt}
|
||||
onChange={update}
|
||||
label={"po-list-" + props.name}
|
||||
updateValue={update}
|
||||
list={props.languages}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={"pattern-option list"}>
|
||||
<li>
|
||||
<OptionPreamble
|
||||
dflt={props.dflt}
|
||||
value={value}
|
||||
|
|
@ -26,23 +41,17 @@ const DraftSettingLanguage = props => {
|
|||
id={"po-list-" + props.name}
|
||||
displayValue={props.languages[value]}
|
||||
reset={reset}
|
||||
toggleExpanded={toggleExpanded}
|
||||
expanded={expanded}
|
||||
showHelp={() =>
|
||||
props.triggerAction("showHelp", {
|
||||
type: "draftSetting",
|
||||
value: props.name
|
||||
})
|
||||
}
|
||||
option={option}
|
||||
/>
|
||||
<FormFieldList
|
||||
name={props.name}
|
||||
value={value}
|
||||
dflt={props.dflt}
|
||||
onChange={update}
|
||||
label={"po-list-" + props.name}
|
||||
updateValue={update}
|
||||
list={props.languages}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import OptionPreamble from "../OptionPreamble";
|
|||
const DraftSettingOnly = props => {
|
||||
const [value, setValue] = useState(props.dflt);
|
||||
const [parts, setParts] = useState([]);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const update = (name, newValue, evt) => {
|
||||
setValue(newValue);
|
||||
|
|
@ -26,38 +27,28 @@ const DraftSettingOnly = props => {
|
|||
setParts(newValue);
|
||||
};
|
||||
|
||||
const toggleExpanded = () => setExpanded(!expanded);
|
||||
|
||||
const list = {
|
||||
dflt: props.labels.dflt,
|
||||
custom: props.labels.custom
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={"pattern-option list"}>
|
||||
<OptionPreamble
|
||||
dflt="dflt"
|
||||
value={value}
|
||||
desc={props.desc}
|
||||
title={props.title}
|
||||
id="po-list-only"
|
||||
displayValue={props.labels[value]}
|
||||
reset={reset}
|
||||
showHelp={() =>
|
||||
props.triggerAction("showHelp", {
|
||||
type: "draftSetting",
|
||||
value: "only"
|
||||
})
|
||||
}
|
||||
/>
|
||||
<FormFieldList
|
||||
name="only"
|
||||
value={value}
|
||||
dflt={props.dflt}
|
||||
onChange={update}
|
||||
label="po-list-only"
|
||||
updateValue={update}
|
||||
list={list}
|
||||
/>
|
||||
{value === "custom" ? (
|
||||
let option = (
|
||||
<FormFieldList
|
||||
name="only"
|
||||
value={value}
|
||||
dflt={props.dflt}
|
||||
onChange={update}
|
||||
label="po-list-only"
|
||||
updateValue={update}
|
||||
list={list}
|
||||
/>
|
||||
);
|
||||
if (value === "custom")
|
||||
option = (
|
||||
<React.Fragment>
|
||||
{option}
|
||||
<FormFieldChecks
|
||||
checks={props.parts}
|
||||
name="parts"
|
||||
|
|
@ -68,10 +59,30 @@ const DraftSettingOnly = props => {
|
|||
updateValue={updateCustom}
|
||||
list={list}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<OptionPreamble
|
||||
dflt="dflt"
|
||||
value={value}
|
||||
desc={props.desc}
|
||||
title={props.title}
|
||||
id="po-list-only"
|
||||
displayValue={props.labels[value]}
|
||||
reset={reset}
|
||||
toggleExpanded={toggleExpanded}
|
||||
expanded={expanded}
|
||||
showHelp={() =>
|
||||
props.triggerAction("showHelp", {
|
||||
type: "draftSetting",
|
||||
value: "only"
|
||||
})
|
||||
}
|
||||
option={option}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const DraftSettingSa = props => {
|
|||
const [value, setValue] = useState("dflt");
|
||||
const [saValue, setSaValue] = useState(defaultSa[props.units]);
|
||||
const [customValue, setCustomValue] = useState(10);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const update = (name, newValue, evt) => {
|
||||
switch (newValue) {
|
||||
|
|
@ -35,6 +36,7 @@ const DraftSettingSa = props => {
|
|||
setSaValue(defaultSa[props.units]);
|
||||
props.updateValue("sa", defaultSa[props.units]);
|
||||
};
|
||||
const toggleExpanded = () => setExpanded(!expanded);
|
||||
|
||||
const updateCustom = (name, newValue, evt) => {
|
||||
newValue = roundMm(newValue);
|
||||
|
|
@ -56,33 +58,21 @@ const DraftSettingSa = props => {
|
|||
custom: props.labels.custom
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={"pattern-option list"}>
|
||||
<OptionPreamble
|
||||
dflt={"dflt"}
|
||||
value={value}
|
||||
desc={props.desc}
|
||||
title={props.title}
|
||||
id="po-list-sa"
|
||||
displayValue={formatMm(saValue, props.units)}
|
||||
reset={reset}
|
||||
showHelp={() =>
|
||||
props.triggerAction("showHelp", {
|
||||
type: "draftSetting",
|
||||
value: "sa"
|
||||
})
|
||||
}
|
||||
/>
|
||||
<FormFieldList
|
||||
name="sa"
|
||||
value={value}
|
||||
dflt={"dflt"}
|
||||
onChange={update}
|
||||
label="po-bool-sa"
|
||||
updateValue={update}
|
||||
list={list}
|
||||
/>
|
||||
{value === "custom" ? (
|
||||
let option = (
|
||||
<FormFieldList
|
||||
name="sa"
|
||||
value={value}
|
||||
dflt={"dflt"}
|
||||
onChange={update}
|
||||
label="po-bool-sa"
|
||||
updateValue={update}
|
||||
list={list}
|
||||
/>
|
||||
);
|
||||
if (value === "custom")
|
||||
option = (
|
||||
<React.Fragment>
|
||||
{option}
|
||||
<FormFieldSlider
|
||||
name="customSa"
|
||||
value={saValue}
|
||||
|
|
@ -93,10 +83,30 @@ const DraftSettingSa = props => {
|
|||
max={25.4}
|
||||
step={sliderStep[props.units]}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<OptionPreamble
|
||||
dflt={"dflt"}
|
||||
value={value}
|
||||
desc={props.desc}
|
||||
title={props.title}
|
||||
id="po-list-sa"
|
||||
displayValue={formatMm(saValue, props.units)}
|
||||
reset={reset}
|
||||
toggleExpanded={toggleExpanded}
|
||||
expanded={expanded}
|
||||
showHelp={() =>
|
||||
props.triggerAction("showHelp", {
|
||||
type: "draftSetting",
|
||||
value: "sa"
|
||||
})
|
||||
}
|
||||
option={option}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import OptionPreamble from "../OptionPreamble";
|
|||
|
||||
const DraftSettingUnits = props => {
|
||||
const [value, setValue] = useState(props.dflt);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const update = (name, newValue, evt) => {
|
||||
props.updateValue(props.name, newValue);
|
||||
|
|
@ -15,8 +16,22 @@ const DraftSettingUnits = props => {
|
|||
props.updateValue(props.name, props.dflt);
|
||||
};
|
||||
|
||||
const toggleExpanded = () => setExpanded(!expanded);
|
||||
|
||||
let option = (
|
||||
<FormFieldList
|
||||
name="units"
|
||||
value={value}
|
||||
dflt={props.dflt}
|
||||
onChange={update}
|
||||
label="po-bool-units"
|
||||
updateValue={update}
|
||||
list={props.list}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={"pattern-option list"}>
|
||||
<li>
|
||||
<OptionPreamble
|
||||
dflt={props.dflt}
|
||||
value={value}
|
||||
|
|
@ -25,23 +40,17 @@ const DraftSettingUnits = props => {
|
|||
id="po-list-units"
|
||||
displayValue={props.list[value]}
|
||||
reset={reset}
|
||||
toggleExpanded={toggleExpanded}
|
||||
expanded={expanded}
|
||||
showHelp={() =>
|
||||
props.triggerAction("showHelp", {
|
||||
type: "draftSetting",
|
||||
value: "units"
|
||||
})
|
||||
}
|
||||
option={option}
|
||||
/>
|
||||
<FormFieldList
|
||||
name="units"
|
||||
value={value}
|
||||
dflt={props.dflt}
|
||||
onChange={update}
|
||||
label="po-bool-units"
|
||||
updateValue={update}
|
||||
list={props.list}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,6 @@ import { gistDefaults } from "../utils";
|
|||
import { patternInfo, patternList } from "@freesewing/patterns";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListSubheader from "@material-ui/core/ListSubheader";
|
||||
import CollapsedIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
import ExpandedIcon from "@material-ui/icons/ArrowRight";
|
||||
import DraftSettingSa from "../DraftSettingSa";
|
||||
import DraftSettingMargin from "../DraftSettingMargin";
|
||||
import DraftSettingComplete from "../DraftSettingComplete";
|
||||
|
|
@ -14,6 +11,7 @@ import DraftSettingPaperless from "../DraftSettingPaperless";
|
|||
import DraftSettingUnits from "../DraftSettingUnits";
|
||||
import DraftSettingLanguage from "../DraftSettingLanguage";
|
||||
import DraftSettingOnly from "../DraftSettingOnly";
|
||||
import DownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
|
||||
const DraftSettings = props => {
|
||||
const [expanded, setExpanded] = useState([]);
|
||||
|
|
@ -104,27 +102,24 @@ const DraftSettings = props => {
|
|||
{Object.keys(groups).map(group => {
|
||||
let open = true;
|
||||
if (expanded.indexOf(group) === -1) open = false;
|
||||
let children = null;
|
||||
if (open) children = groups[group].map(component => component);
|
||||
return (
|
||||
<React.Fragment key={group + "-ghead"}>
|
||||
<ListSubheader
|
||||
className="optiongroup-heading"
|
||||
className={
|
||||
(open ? "expanded" : "collapsed") + " optiongroup-heading"
|
||||
}
|
||||
onClick={() => toggleGroup(group)}
|
||||
<React.Fragment>
|
||||
<li
|
||||
className={open ? "expanded" : "collapsed"}
|
||||
key={group + "-ghead"}
|
||||
>
|
||||
<h3>
|
||||
{open ? (
|
||||
<CollapsedIcon className="collapse-icon" />
|
||||
) : (
|
||||
<ExpandedIcon className="collapse-icon" />
|
||||
)}
|
||||
<h3 onClick={() => toggleGroup(group)}>
|
||||
<DownIcon
|
||||
className={
|
||||
"icon-col-exp " + (open ? "expanded" : "collapsed")
|
||||
}
|
||||
/>
|
||||
<FormattedMessage id={"optiongroups." + group} />
|
||||
</h3>
|
||||
</ListSubheader>
|
||||
{expanded.indexOf(group) === -1
|
||||
? null
|
||||
: groups[group].map(component => component)}
|
||||
</li>
|
||||
{children}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import CollapsedIcon from "@material-ui/icons/ArrowDropDown";
|
|||
import ExpandedIcon from "@material-ui/icons/ArrowRight";
|
||||
import PatternOptions from "../PatternOptions";
|
||||
import DraftSettings from "../DraftSettings";
|
||||
import DraftActions from "../DraftActions";
|
||||
|
||||
const GistConfigurator = props => {
|
||||
console.log(languages);
|
||||
|
|
@ -60,6 +61,12 @@ const GistConfigurator = props => {
|
|||
languages={languages[props.intl.locale]}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<h2>
|
||||
<FormattedMessage id="app.save" />
|
||||
</h2>
|
||||
<DraftActions />
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import { optionType, defaultGist, gistDefaults } from "../utils";
|
|||
import { patternInfo, patternList } from "@freesewing/patterns";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListSubheader from "@material-ui/core/ListSubheader";
|
||||
import DownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
|
||||
const PatternOptions = props => {
|
||||
|
|
@ -48,7 +47,9 @@ const PatternOptions = props => {
|
|||
output.push(
|
||||
<li className={open ? "expanded" : "collapsed"} key={group + "-ghead"}>
|
||||
<h3 onClick={() => toggleGroup(group)}>
|
||||
<DownIcon className={"icon-col-exp "+ (open ? "expanded" : "collapsed")}/>
|
||||
<DownIcon
|
||||
className={"icon-col-exp " + (open ? "expanded" : "collapsed")}
|
||||
/>
|
||||
<FormattedMessage id={"optiongroups." + group} />
|
||||
</h3>
|
||||
{children}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue