🚧 More work on React components
This commit is contained in:
Joost De Cock
parent
e7b7c5a7dd
commit
f8e3d6ceb5
27 changed files with 25 additions and 233 deletions
|
|
@ -22,8 +22,7 @@
|
|||
"build": "./scripts/build.sh",
|
||||
"test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",
|
||||
"pubtest": "npm publish --registry http://localhost:6662",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
"storybook": "start-storybook -p 6663"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.4.1",
|
||||
|
|
@ -43,19 +42,5 @@
|
|||
"engines": {
|
||||
"node": ">=8.0.0",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@freesewing/i18n": "0.11.3",
|
||||
"@freesewing/patterns": "0.18.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.3",
|
||||
"@storybook/addon-actions": "^5.0.10",
|
||||
"@storybook/addon-console": "^1.1.0",
|
||||
"@storybook/addon-links": "^5.0.10",
|
||||
"@storybook/addons": "^5.0.10",
|
||||
"@storybook/react": "^5.0.10",
|
||||
"babel-loader": "^8.0.5",
|
||||
"storybook-addon-material-ui": "^0.9.0-alpha.18"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ cd $DIR/../src/
|
|||
rm -rf ../../../dist/components
|
||||
for d in * ; do {
|
||||
cd ..
|
||||
# do something here
|
||||
mkdir -p ../../dist/components/$d
|
||||
echo "Building $d"
|
||||
rollup -c ./rollup.config.js ./src/$d/index.js -m -o ../../dist/components/$d/index.js -f cjs
|
||||
rollup -c ./rollup.config.js ./src/$d/index.js -m -o ../../dist/components/$d/index.mjs -f es
|
||||
rollup --silent -c ./rollup.config.js ./src/$d/index.js -m -o ../../dist/components/$d/index.mjs -f es
|
||||
cd src
|
||||
}
|
||||
done
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormControl from "@material-ui/core/FormControl";
|
||||
import FormGroup from "@material-ui/core/FormGroup";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import FormHelperText from "@material-ui/core/FormHelperText";
|
||||
import Checkbox from "@material-ui/core/Checkbox";
|
||||
|
||||
const FormFieldChecks = props => {
|
||||
1
packages/components/src/.form/index.js
Normal file
1
packages/components/src/.form/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
// noop
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormFieldList from "../../form/FormFieldList";
|
||||
import FormFieldList from "../../.form/FormFieldList";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
import { injectIntl } from "react-intl";
|
||||
import { i18n as languages } from "@freesewing/i18n";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormFieldList from "../../form/FormFieldList";
|
||||
import FormFieldSlider from "../../form/FormFieldSlider";
|
||||
import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
|
||||
import FormFieldSlider from "../../.form/FormFieldSlider";
|
||||
import { formatMm, roundMm, defaultSa, sliderStep } from "../../.utils";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const DraftSettingMargin = props => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useState } from "react";
|
||||
import FormFieldChecks from "../../form/FormFieldChecks";
|
||||
import FormFieldList from "../../form/FormFieldList";
|
||||
import FormFieldSlider from "../../form/FormFieldSlider";
|
||||
import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
|
||||
import FormFieldChecks from "../../.form/FormFieldChecks";
|
||||
import FormFieldList from "../../.form/FormFieldList";
|
||||
import FormFieldSlider from "../../.form/FormFieldSlider";
|
||||
import { formatMm, roundMm, defaultSa, sliderStep } from "../../.utils";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const DraftSettingOnly = props => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormFieldList from "../../form/FormFieldList";
|
||||
import FormFieldSlider from "../../form/FormFieldSlider";
|
||||
import { formatMm, roundMm, defaultSa, sliderStep } from "../../utils";
|
||||
import FormFieldList from "../../.form/FormFieldList";
|
||||
import FormFieldSlider from "../../.form/FormFieldSlider";
|
||||
import { formatMm, roundMm, defaultSa, sliderStep } from "../../.utils";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const DraftSettingSa = props => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import FormFieldList from "../../form/FormFieldList";
|
||||
import FormFieldList from "../../.form/FormFieldList";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const DraftSettingUnits = props => {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { gistDefaults } from "../../utils";
|
||||
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";
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import Mm from "../PatternOptionMillimeter";
|
|||
import Bool from "../PatternOptionBool";
|
||||
import List from "../PatternOptionList";
|
||||
import Count from "../PatternOptionCount";
|
||||
import { optionType } from "../../utils";
|
||||
import { optionType } from "../../.utils";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { injectIntl } from "react-intl";
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import DownIcon from "@material-ui/icons/KeyboardArrowDown";
|
|||
import ResetIcon from "@material-ui/icons/SettingsBackupRestore";
|
||||
import HelpIcon from "@material-ui/icons/Help";
|
||||
import { injectIntl } from "react-intl";
|
||||
import ListSubheader from "@material-ui/core/ListSubheader";
|
||||
|
||||
const OptionPreamble = props => {
|
||||
const styles = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormFieldBool from "../../form/FormFieldBool";
|
||||
import FormFieldBool from "../../.form/FormFieldBool";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const PatternOptionBool = props => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormFieldList from "../../form/FormFieldList";
|
||||
import FormFieldList from "../../.form/FormFieldList";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const PatternOptionList = props => {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import {
|
|||
roundMmUp,
|
||||
roundMmDown,
|
||||
formatMm
|
||||
} from "../../utils";
|
||||
import FormFieldSlider from "../../form/FormFieldSlider";
|
||||
} from "../../.utils";
|
||||
import FormFieldSlider from "../../.form/FormFieldSlider";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const PatternOptionMillimeter = props => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import FormFieldSlider from "../../form/FormFieldSlider";
|
||||
import FormFieldSlider from "../../.form/FormFieldSlider";
|
||||
import OptionPreamble from "../OptionPreamble";
|
||||
|
||||
const PatternOptionPctDegCount = props => {
|
||||
|
|
|
|||
|
|
@ -5,10 +5,9 @@ import Deg from "../PatternOptionDegree";
|
|||
import Mm from "../PatternOptionMillimeter";
|
||||
import Bool from "../PatternOptionBool";
|
||||
import OptionGroup from "../OptionGroup";
|
||||
import { optionType, defaultGist, gistDefaults } from "../../utils";
|
||||
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 DownIcon from "@material-ui/icons/KeyboardArrowDown";
|
||||
|
||||
const PatternOptions = props => {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,9 @@ import Deg from "./PatternOptionDegree";
|
|||
import Mm from "./PatternOptionMillimeter";
|
||||
import Bool from "./PatternOptionBool";
|
||||
import OptionGroup from "./OptionGroup";
|
||||
import { optionType, gistDefaults } from "../utils";
|
||||
import { optionType, gistDefaults } from "../.utils";
|
||||
import { patternInfo, patternList } from "@freesewing/patterns";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
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";
|
||||
|
|
|
|||
|
|
@ -1,186 +0,0 @@
|
|||
// Needed to use JSX
|
||||
import React from "react";
|
||||
|
||||
export const smallestImperialStep = 0.396875;
|
||||
|
||||
export const roundMm = (val, units) => {
|
||||
if (units === "imperial") return Math.round(val * 1000000) / 1000000;
|
||||
else return Math.round(val * 10) / 10;
|
||||
};
|
||||
|
||||
export const roundMmDown = (val, units) => {
|
||||
if (units === "imperial") return val - (val % smallestImperialStep);
|
||||
else return Math.floor(val * 10) / 10;
|
||||
};
|
||||
|
||||
export const roundMmUp = (val, units) => {
|
||||
if (units === "imperial") return val - (val % 0.396875);
|
||||
else return Math.ceil(val * 10) / 10;
|
||||
};
|
||||
|
||||
const formatImperial = (
|
||||
neg,
|
||||
inch,
|
||||
numo = false,
|
||||
deno = false,
|
||||
format = "html"
|
||||
) => {
|
||||
if (format === "html") {
|
||||
if (numo)
|
||||
return (
|
||||
<span>
|
||||
{neg}
|
||||
{inch} <sup>{numo}</sup>/<sub>{deno}</sub>"
|
||||
</span>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<span>
|
||||
{neg}
|
||||
{inch}"
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
if (numo) return neg + inch;
|
||||
else return neg + inch + " " + numo + "/" + deno;
|
||||
}
|
||||
};
|
||||
|
||||
export const formatMm = (val, units, format = "html") => {
|
||||
val = roundMm(val);
|
||||
let H = format === "html" ? true : false;
|
||||
if (units === "imperial") {
|
||||
if (val == 0) return formatImperial("", 0, false, false, format);
|
||||
let negative = "";
|
||||
let inches = "";
|
||||
let rest = "";
|
||||
let fraction = val / 25.4;
|
||||
if (fraction < 0) {
|
||||
fraction = fraction * -1;
|
||||
negative = "-";
|
||||
}
|
||||
if (Math.abs(fraction) < 1) rest = fraction;
|
||||
else {
|
||||
inches = Math.floor(fraction);
|
||||
rest = fraction - inches;
|
||||
}
|
||||
let fraction128 = Math.round(rest * 128);
|
||||
if (fraction128 == 0) return formatImperial(negative, inches);
|
||||
if (fraction128 % 64 == 0)
|
||||
return formatImperial(negative, inches, fraction128 / 64, 2);
|
||||
if (fraction128 % 32 == 0)
|
||||
return formatImperial(negative, inches, fraction128 / 32, 4);
|
||||
if (fraction128 % 16 == 0)
|
||||
return formatImperial(negative, inches, fraction128 / 16, 8);
|
||||
if (fraction128 % 8 == 0)
|
||||
return formatImperial(negative, inches, fraction128 / 8, 16);
|
||||
if (fraction128 % 4 == 0)
|
||||
return formatImperial(negative, inches, fraction128 / 4, 32);
|
||||
if (fraction128 % 2 == 0)
|
||||
return formatImperial(negative, inches, fraction128 / 2, 64);
|
||||
return negative + fraction;
|
||||
} else {
|
||||
if (format === "html") return roundMm(val / 10) + "cm";
|
||||
else return roundMm(val / 10);
|
||||
}
|
||||
};
|
||||
|
||||
export const defaultSa = {
|
||||
imperial: 15.875,
|
||||
metric: 10
|
||||
};
|
||||
|
||||
export const sliderStep = {
|
||||
metric: 0.1,
|
||||
imperial: 0.396875
|
||||
};
|
||||
|
||||
export const optionType = option => {
|
||||
if (typeof option === "object") {
|
||||
if (typeof option.pct !== "undefined") return "pct";
|
||||
if (typeof option.mm !== "undefined") return "mm";
|
||||
if (typeof option.deg !== "undefined") return "deg";
|
||||
if (typeof option.count !== "undefined") return "count";
|
||||
if (typeof option.bool !== "undefined") return "bool";
|
||||
if (typeof option.list !== "undefined") return "list";
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
return "constant";
|
||||
};
|
||||
|
||||
export const defaultGist = {
|
||||
settings: {
|
||||
embed: true,
|
||||
sa: 0,
|
||||
complete: true,
|
||||
paperless: false,
|
||||
locale: "en",
|
||||
units: "metric",
|
||||
margin: 2,
|
||||
options: {}
|
||||
}
|
||||
};
|
||||
|
||||
export const gistDefaults = (config, gist = { settings: {} }) => {
|
||||
let options = {};
|
||||
for (let option of Object.keys(config.options)) {
|
||||
if (
|
||||
typeof gist.options !== "undefined" &&
|
||||
typeof gist.options[option] !== undefined
|
||||
)
|
||||
options[option] = gist.options[option];
|
||||
else options[option] = optionDefault(config.options[option]);
|
||||
}
|
||||
delete gist.options;
|
||||
let settings = JSON.parse(JSON.stringify(defaultGist.settings));
|
||||
delete settings.locale;
|
||||
delete settings.units;
|
||||
for (let setting of Object.keys(settings)) {
|
||||
if (typeof gist.settings[setting] !== "undefined") {
|
||||
settings[setting] = gist.settings[setting];
|
||||
}
|
||||
}
|
||||
settings.options = options;
|
||||
|
||||
return settings;
|
||||
};
|
||||
|
||||
export const optionDefault = option => {
|
||||
let type = optionType(option);
|
||||
switch (optionType(option)) {
|
||||
case "constant":
|
||||
return option;
|
||||
break;
|
||||
case "list":
|
||||
return option.dflt;
|
||||
break;
|
||||
default:
|
||||
return option[type];
|
||||
}
|
||||
};
|
||||
|
||||
export const storage = {
|
||||
set: (key, value, raw) => {
|
||||
if (typeof localStorage === "undefined")
|
||||
throw(new Error("No localStorage support. And we need it. Bailing out."));
|
||||
|
||||
const _key = "fs_" + key;
|
||||
|
||||
if (typeof value === "undefined" || value === null)
|
||||
localStorage.removeItem(_key);
|
||||
else localStorage.setItem(_key, raw ? value : JSON.stringify(value));
|
||||
|
||||
return value;
|
||||
},
|
||||
get: (key, raw) => {
|
||||
if (typeof localStorage === "undefined")
|
||||
throw(new Error("No localStorage support. And we need it. Bailing out."));
|
||||
|
||||
const value = localStorage.getItem("fs_"+key);
|
||||
|
||||
return raw ? value : JSON.parse(value);
|
||||
}
|
||||
}
|
||||
|
||||
export const cloneObject = src => Object.assign({}, src);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { storage, cloneObject } from "../utils";
|
||||
import { storage, cloneObject } from "../.utils";
|
||||
|
||||
const withGist = (WrappedComponent, settings={gist:{}, store:false}) => {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue