58 |
69 |
70 | );
71 | });
72 | return (
73 |
74 | {items}
75 |
76 | );
77 | } else {
78 | let text = this.getCurrentChoiceLabel();
79 | return (
80 |
81 | {text}
82 |
83 | );
84 | }
85 | }
86 | }
87 |
88 | RadioButtons.defaultProps = {
89 | width: 300
90 | };
91 |
92 | export default formGroup(RadioButtons);
93 |
--------------------------------------------------------------------------------
/packages/react-dynamic-forms/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-dynamic-forms",
3 | "version": "1.0.3",
4 | "description": "Dynamic forms library for React",
5 | "keywords": [
6 | "forms",
7 | "dynamic",
8 | "react"
9 | ],
10 | "main": "lib/index.js",
11 | "author": "ESnet SEG
58 |
65 | );
66 | } else {
67 | return (
68 |
59 |
64 |
69 |
73 | );
74 | }
75 | }
76 |
77 | render() {
78 | /* const tagStyle = {
79 | background: "#EEE",
80 | padding: 5,
81 | borderRadius: 2,
82 | margin: 2,
83 | fontSize: "smaller"
84 | }; */
85 |
86 | const exampleName = this.props.match.params.example;
87 | // const ExampleMetaData = Meta[exampleName];
88 | const Component = Examples[exampleName];
89 | // const Link = Meta[exampleName].link;
90 | // const sourceCode = `https://github.com/esnet/react-dynamic-forms/tree/inline-editing-layouts2/src/website/examples/${Link}.js`;
91 |
92 | return (
93 |
70 | Loading...
71 |
72 |
94 |
102 | );
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/packages/react-dynamic-forms/src/components/CheckBoxes.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015 - present, The Regents of the University of California,
3 | * through Lawrence Berkeley National Laboratory (subject to receipt
4 | * of any required approvals from the U.S. Dept. of Energy).
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | import React from "react";
12 | import _ from "underscore";
13 | import Immutable from "immutable";
14 |
15 | import formGroup from "../js/formGroup";
16 |
17 | /**
18 | * Form control to select multiple items from a list,
19 | * uses checkboxes next to each item.
20 | */
21 | class CheckBoxes extends React.Component {
22 | componentWillReceiveProps(nextProps) {
23 | if (this.props.value !== nextProps.value) {
24 | const missingCount = this.isMissing(nextProps.value) ? 1 : 0;
25 | if (this.props.onMissingCountChange) {
26 | this.props.onMissingCountChange(this.props.name, missingCount);
27 | }
28 | }
29 | }
30 |
31 | handleChange(i) {
32 | let value;
33 | const option = this.props.optionList.get(i);
34 | if (this.props.value.includes(option)) {
35 | value = this.props.value.filterNot(item => item === option);
36 | } else {
37 | value = this.props.value.push(option);
38 | }
39 | if (this.props.onChange) {
40 | this.props.onChange(this.props.name, value);
41 | }
42 | }
43 |
44 | isEmpty(value) {
45 | if (Immutable.List.isList(value)) {
46 | return value.size === 0;
47 | }
48 | return _.isNull(value) || _.isUndefined(value);
49 | }
50 |
51 | isMissing(value = this.props.value) {
52 | return this.props.required && !this.props.disabled && this.isEmpty(value);
53 | }
54 |
55 | inlineStyle(hasError, isMissing) {
56 | let color = "inherited";
57 | let background = "inherited";
58 | if (hasError) {
59 | color = "#b94a48";
60 | background = "#fff0f3";
61 | } else if (isMissing) {
62 | background = "floralwhite";
63 | }
64 | return {
65 | color,
66 | background,
67 | width: "100%",
68 | paddingLeft: 3
69 | };
70 | }
71 |
72 | render() {
73 | if (this.props.edit) {
74 | const items = [];
75 | this.props.optionList.forEach((option, i) => {
76 | items.push(
77 |
95 |
101 |
96 |
98 | {this.renderMarkdown()} 99 |
100 | 98 | {this.renderMarkdown()} 99 |
78 |
86 |
87 | );
88 | });
89 |
90 | return (
91 |
92 | {items}
93 |
94 | );
95 | } else {
96 | return (
97 |
98 | {this.props.value.join(", ")}
99 |
100 | );
101 | }
102 | }
103 | }
104 |
105 | export default formGroup(CheckBoxes);
106 |
--------------------------------------------------------------------------------
/packages/website/src/App.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017, The Regents of the University of California,
3 | * through Lawrence Berkeley National Laboratory (subject to receipt
4 | * of any required approvals from the U.S. Dept. of Energy).
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | body {
12 | padding: 0;
13 | margin: 0;
14 | overflow: hidden;
15 | }
16 |
17 | h2 {
18 | font-size: 27px;
19 | font-weight: 400;
20 | color: #333;
21 | }
22 |
23 | h4 {
24 | padding-top: 20px;
25 | }
26 |
27 | /* react-select dropdown conflicts with Bootstrap controls */
28 |
29 | .list-group-item.active,
30 | .list-group-item.active:focus,
31 | .list-group-item.active:hover {
32 | z-index: 0;
33 | }
34 |
35 | /* Hamburger sidebar expander */
36 |
37 | .sidebar-icon {
38 | font-size: 25px;
39 | margin-right: 45px;
40 | color: #a4a4a4;
41 | }
42 |
43 | .sidebar-icon:hover,
44 | .sidebar-icon.active {
45 | color: #4ec1e0;
46 | }
47 |
48 | .sidebar-link {
49 | display: block;
50 | font-weight: 500;
51 | font-family: "Open Sans Condensed", sans-serif;
52 | font-size: 14px;
53 | padding: 5px 0px;
54 | color: #757575;
55 | text-decoration: none;
56 | cursor: pointer;
57 | }
58 |
59 | .sidebar-link:hover {
60 | color: #4ec1e0;
61 | text-decoration: none;
62 | cursor: hand;
63 | }
64 |
65 | .sidebar-link.active {
66 | color: #4ec1e0;
67 | font-weight: 700;
68 | text-decoration: none;
69 | }
70 |
71 | /* Header customization */
72 |
73 | .navbar {
74 | height: 80px;
75 | background: -webkit-gradient(
76 | linear,
77 | left top,
78 | left bottom,
79 | color-stop(0, #fafafa),
80 | color-stop(1, #f5f5f5)
81 | );
82 | background: linear-gradient(to bottom, #fafafa, #f5f5f5);
83 | border-bottom: 1px solid #eee;
84 | border-top: 1px solid #eee;
85 | }
86 |
87 | .navbar-brand {
88 | font-family: "Open Sans", sans-serif;
89 | font-weight: 700;
90 | font-size: 32px;
91 | color: #6d6e71;
92 | }
93 |
94 | /* ESnet fasterdata and ESnet main site links */
95 |
96 | .tools-links > li:first-child a {
97 | border-left: 0;
98 | }
99 |
100 | .tools-links > li > a {
101 | text-align: left;
102 | font-size: 14px;
103 | margin-top: 20px;
104 | padding: 8px 10px;
105 | background-color: #6d6e71;
106 | border-left: 1px solid #fff;
107 | color: #fff;
108 | width: 119px;
109 | height: 34px;
110 | display: block;
111 | }
112 |
113 | .tools-links {
114 | margin-right: 10px !important;
115 | list-style-type: none;
116 | padding: 0;
117 | margin: 0;
118 | font-family: "Open Sans", sans-serif;
119 | font-weight: 700;
120 | text-align: right;
121 | font-size: 0;
122 | }
123 |
124 | .tools-links > li a.selected,
125 | .tools-links > li a:hover {
126 | background-color: #4ec1e0 !important;
127 | }
128 |
129 | /* Navigation pills altered to look like the links above */
130 |
131 | .nav-pills > li.active > a,
132 | .nav-pills > li.active > a:focus,
133 | .nav-pills > li.active > a:hover {
134 | background-color: #8c8d93 !important;
135 | }
136 |
137 | .nav-pills > li > a {
138 | border-radius: 0px !important;
139 | }
140 |
141 | .nav > li > a {
142 | padding: 7px 15px;
143 | }
144 |
145 | /* Hide the footer on small screens */
146 | @media (max-width: 600px) {
147 | .footer {
148 | display: none;
149 | }
150 | }
151 |
152 | .scrollable::-webkit-scrollbar {
153 | display: none;
154 | }
155 |
--------------------------------------------------------------------------------
/packages/website/src/components/API.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, The Regents of the University of California,
3 | * through Lawrence Berkeley National Laboratory (subject to receipt
4 | * of any required approvals from the U.S. Dept. of Energy).
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | /* eslint max-len:0 */
12 |
13 | import React, {Component} from "react";
14 | import { Link } from "react-router-dom";
15 | import _ from "underscore";
16 | import Flexbox from "flexbox-react";
17 |
18 | import Prism from "prismjs";
19 | import APIDoc from "./APIDoc";
20 |
21 | import Meta from "../examples/examples.json";
22 | import Examples from "../examples/examples.js";
23 | import docsFile from "../api/docs.json";
24 |
25 | import { headingStyle } from "../styles";
26 |
27 | class Example extends Component {
28 | render() {
29 | const style = {
30 | display: "inline-block",
31 | margin: 5,
32 | padding: 20,
33 | borderStyle: "solid",
34 | borderWidth: 1,
35 | borderColor: "#DDD",
36 | width: 160,
37 | height: 160
38 | };
39 | const { example } = this.props;
40 | const name = example.key;
41 | const imgName = `${name}_thumbnail`;
42 | const img = Examples[imgName];
43 | const link = {example.value.title};
44 | return (
45 |
47 | 
48 |
49 |
50 | {link}
51 |
52 |
73 |
75 | {examples}
76 |
77 |
78 | );
79 | } else {
80 | return ;
81 | }
82 | }
83 | };
84 |
85 | export default class extends Component {
86 | componentDidMount() {
87 | Prism.highlightAll();
88 | }
89 |
90 | componentDidUpdate() {
91 | Prism.highlightAll();
92 | }
93 |
94 | render() {
95 | const component = this.props.match.params.component;
96 | const path = `src/components/${component}.js`;
97 |
98 | if (!_.has(docsFile, path)) {
99 | return Examples
74 |API could not be found
;
100 | }
101 | const title = component;
102 | return (
103 |
104 |
112 | );
113 | }
114 | }
115 |
116 |
--------------------------------------------------------------------------------
/packages/website/src/styles.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017, The Regents of the University of California,
3 | * through Lawrence Berkeley National Laboratory (subject to receipt
4 | * of any required approvals from the U.S. Dept. of Energy).
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | export const sidebarStyle = {
12 | position: "fixed",
13 | right: 0,
14 | top: 80,
15 | width: 250,
16 | bottom: 0,
17 | overflowY: "auto",
18 | background: "#FEFEFE",
19 | color: "#4183C4",
20 | textDecoration: "none",
21 | borderWidth: 1,
22 | borderLeftStyle: "solid",
23 | borderLeftColor: "#ddd",
24 | marginLeft: 40
25 | };
26 |
27 | export const sidebarTitleStyle = {
28 | textTransform: "uppercase",
29 | letterSpacing: ".08em",
30 | color: "#5c666f",
31 | fontSize: 13,
32 | fontWeight: 500,
33 | marginBottom: 15,
34 | marginTop: 30,
35 | padding: "0 20px"
36 | };
37 |
38 | export const sidebarItemStyle = {
39 | fontFamily: "fakt-web,Helvetica Neue,Hevetica,sans-serif",
40 | fontSize: 14,
41 | fontWeight: 400,
42 | letterSpacing: 0,
43 | padding: "10px 20px",
44 | color: "#5c666f"
45 | };
46 |
47 | export const activeStyle = {
48 | color: "black",
49 | textDecoration: "none"
50 | };
51 |
52 | export const activeLinkStyle = {
53 | color: "#626466",
54 | fontWeight: "bold"
55 | };
56 |
57 | export const bodyStyle = {
58 | marginTop: 100,
59 | marginRight: 300,
60 | display: "flex",
61 | minHeight: "100vh",
62 | flexDirection: "column",
63 | overflowY: "hidden"
64 | };
65 |
66 | export const mainStyle = {
67 | display: "flex",
68 | flex: 1,
69 | marginLeft: 20,
70 | marginRight: 40
71 | };
72 |
73 | export const footerStyle = {
74 | flex: "none",
75 | height: 10,
76 | background: "#DDD"
77 | };
78 |
79 | export const contentStyle = {
80 | flex: 1
81 | };
82 |
83 | export const githubLogoStyle = {
84 | width: 24,
85 | paddingRight: 5,
86 | marginTop: -4
87 | };
88 |
89 | export const linkStyle = {
90 | color: "#4183C4",
91 | textDecoration: "none"
92 | };
93 |
94 | export const discussionStyle = {
95 | color: "#555",
96 | fontSize: 18,
97 | letterSpacing: ".25ch",
98 | lineHeight: "16px",
99 | margin: "1rem 0 .125rem",
100 | textTransform: "uppercase"
101 | };
102 |
103 | export const groupStyle = {
104 | color: "#9A9C9E",
105 | // fontSize: 12,
106 | fontSize: "1.5em",
107 | fontWeight: 300,
108 | margin: "2rem 0 2rem"
109 | };
110 |
111 | export const headingStyle = {
112 | fontFamily: 'fakt-web, "Helvetica Neue", Hevetica, sans-serif',
113 | fontSize: 32,
114 | fontWeight: 500,
115 | lineHeight: "72px",
116 | color: "#000"
117 | };
118 |
119 | export const methodHeadingStyle = {
120 | fontFamily: 'fakt-web, "Helvetica Neue", Hevetica, sans-serif',
121 | fontSize: 24,
122 | fontWeight: 500,
123 | lineHeight: "26px",
124 | color: "#000"
125 | };
126 |
127 | export const textStyle = {
128 | color: "#626466",
129 | fontFamily: 'fakt-web, "Helvetica Neue", Hevetica, sans-serif',
130 | fontSize: 14,
131 | lineHeight: "28px",
132 | padding: "3px 0px 0px 0px"
133 | };
134 |
135 | export const codeStyle = {
136 | backgroundColor: "rgb(245, 247, 249)",
137 | borderBottomLeftRadius: 3,
138 | borderBottomRightRadius: 3,
139 | borderTopLeftRadius: 3,
140 | borderTopRightRadius: 3,
141 | borderCollapse: "collapse",
142 | color: "rgba(0, 0, 0, 0.86)",
143 | fontFamily: "'Roboto Mono', Menlo, Monaco, Consolas, 'Courier New', monospace",
144 | fontSize: 12.6,
145 | lineHeight: "25.2px",
146 | paddingBottom: 2,
147 | paddingLeft: 6,
148 | paddingRight: 6,
149 | paddingTop: 0
150 | };
151 |
--------------------------------------------------------------------------------
/docs/static/media/list_docs.12101c16.md:
--------------------------------------------------------------------------------
1 | ### List example
2 |
3 | The first step is to render a form for entering an email address. In the case of this example we do have a little form that asks for the email address and email type. In that case we specify a schema and a form component to render that form:
4 |
5 | const schema = (
6 |
105 |
111 |
106 |
109 |
110 | {`${title}`}
107 |
93 | this.handleChange(value)}
103 | />
104 |
105 |
106 | );
107 | } else {
108 | const tagStyle = {
109 | cursor: "default",
110 | paddingTop: 2,
111 | paddingBottom: 2,
112 | paddingLeft: 5,
113 | paddingRight: 5,
114 | background: "#ececec",
115 | borderRadius: 2,
116 | marginLeft: 2,
117 | marginRight: 2
118 | };
119 | return (
120 |
121 | {this.props.value.map((tag, i) => {tag})}
122 |
123 | );
124 | }
125 | }
126 | }
127 |
128 | export default formGroup(TagsEdit);
129 |
--------------------------------------------------------------------------------
/packages/website/src/components/APIDoc.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from "react";
2 | import _ from "underscore";
3 | import Markdown from "react-markdown";
4 | import docsFile from "../api/docs.json";
5 | import Prism from "prismjs";
6 | import { codeRenderer, codeBlockRenderer } from "../renderers";
7 | import { textStyle } from "../styles";
8 |
9 | /**
10 | * Displays API data from the docs.json file
11 | */
12 | export default class extends Component {
13 | componentDidMount() {
14 | Prism.highlightAll();
15 | }
16 |
17 | componentDidUpdate() {
18 | Prism.highlightAll();
19 | }
20 |
21 | renderArrayOf(value) {
22 | if (value.name === "shape") {
23 | return "shape {" +
24 | _.map(value.value, (value, key) => {
25 | return key;
26 | }).join(", ") +
27 | "}";
28 | } else {
29 | return `array of ${value.name}s`;
30 | }
31 | }
32 |
33 | renderPropType(type) {
34 | if (!type) {
35 | return "unknown type";
36 | }
37 | if (type.name === "enum") {
38 | return "enum (" +
39 | _.map(type.value, value => {
40 | return value.value;
41 | }).join(", ") +
42 | ")";
43 | }
44 | if (type.name === "union") {
45 | return "one of (" +
46 | _.map(type.value, value => {
47 | return this.renderPropType(value);
48 | }).join(", ") +
49 | ")";
50 | }
51 | if (type.name === "instanceOf") {
52 | return `instance of a ${type.value}`;
53 | }
54 | if (type.name === "arrayOf") {
55 | return `array of ${this.renderArrayOf(type.value)}`;
56 | }
57 | if (type.name === "shapes") {
58 | return `shape of {` +
59 | _.map(type.value, (value, key) => {
60 | return key;
61 | }).join(", ") +
62 | "}";
63 | } else {
64 | return `${type.name}`;
65 | }
66 | }
67 |
68 | renderProps(props) {
69 | const propNameStyle = {
70 | padding: 3,
71 | marginRight: 5,
72 | borderRadius: 2,
73 | fontFamily: "'Fira Mono',Menlo,monospace",
74 | color: "#c7254e",
75 | background: "#f9f2f4",
76 | letterSpacing: -0.015
77 | };
78 |
79 | const infoStyle = {
80 | color: "#626466",
81 | fontFamily: "Fira Sans,Helvetica Neue,Helvetica,Arial,sans-serif",
82 | fontSize: 16,
83 | lineHeight: 1.625
84 | };
85 |
86 | const typeStyle = {
87 | color: "#626466",
88 | background: "#F5F4F4",
89 | fontFamily: "Fira Sans,Helvetica Neue,Helvetica,Arial,sans-serif",
90 | fontSize: 16,
91 | lineHeight: 1.625
92 | };
93 |
94 | return _.map(props, (prop, propName) => (
95 |
96 |
97 | {propName}
98 |
99 |
100 | {prop.defaultValue ? ` = ${prop.defaultValue.value}` : ""}
101 |
102 |
103 | {prop.required ? "Required" : ""}
104 |
105 |
115 |
116 | ));
117 | }
118 |
119 | /**
120 | * If we add back in auto props, add this to the JSX below:
121 | * {docs.props ? this.renderProps(docs.props) : ""}
122 | */
123 | render() {
124 | const file = this.props.file;
125 | const docs = docsFile[file];
126 | return (
127 |
106 |
111 |
112 | Type: {this.renderPropType(prop.type)}
113 |
114 | 115 |
128 |
134 |
136 | {docs.props ? this.renderProps(docs.props) : "none"} 137 |
138 | );
139 | }
140 | };
141 |
--------------------------------------------------------------------------------
/packages/react-dynamic-forms/src/components/DateEdit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015 - present, The Regents of the University of California,
3 | * through Lawrence Berkeley National Laboratory (subject to receipt
4 | * of any required approvals from the U.S. Dept. of Energy).
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | import React from "react";
12 | import _ from "underscore";
13 | import moment from "moment";
14 | import PropTypes from "prop-types";
15 | import DatePicker from "react-datepicker";
16 |
17 | import formGroup from "../js/formGroup";
18 |
19 | import "react-datepicker/dist/react-datepicker.css";
20 | import "../css/dateedit.css";
21 |
22 | /**
23 | * Form control to edit a date text field.
24 | *
25 | * Set the initial value with `initialValue` and set a callback for
26 | * value changed with `onChange`.
27 | */
28 | class DateEdit extends React.Component {
29 | isEmpty(value) {
30 | return _.isNull(value) || _.isUndefined(value) || value === "";
31 | }
32 |
33 | isMissing(v) {
34 | return this.props.required && !this.props.disabled && this.isEmpty(v);
35 | }
36 |
37 | componentWillReceiveProps(nextProps) {
38 | if (this.props.value && nextProps.value) {
39 | if (this.props.value.getTime() !== nextProps.value.getTime()) {
40 | const missing = this.isMissing(nextProps.value);
41 | if (this.props.onMissingCountChange) {
42 | this.props.onMissingCountChange(this.props.name, missing ? 1 : 0);
43 | }
44 | }
45 | }
46 | }
47 |
48 | componentDidMount() {
49 | const missing = this.isMissing(this.props.value);
50 | if (this.props.onMissingCountChange) {
51 | this.props.onMissingCountChange(this.props.name, missing ? 1 : 0);
52 | }
53 | }
54 |
55 | handleDateChange(v) {
56 | const value = v ? v.toDate() : null;
57 | const missing = this.isMissing(value);
58 |
59 | // Callbacks
60 | if (this.props.onChange) {
61 | this.props.onChange(this.props.name, value);
62 | }
63 | if (this.props.onMissingCountChange) {
64 | this.props.onMissingCountChange(this.props.name, missing ? 1 : 0);
65 | }
66 | if (this.props.onBlur) {
67 | this.props.onBlur(this.props.name);
68 | }
69 | }
70 |
71 | inlineStyle(hasError, isMissing) {
72 | let color = "inherited";
73 | let background = "inherited";
74 | if (hasError) {
75 | color = "#b94a48";
76 | background = "#fff0f3";
77 | } else if (isMissing) {
78 | background = "floralwhite";
79 | }
80 | return {
81 | color,
82 | background,
83 | height: 23,
84 | width: "100%",
85 | paddingLeft: 3
86 | };
87 | }
88 |
89 | render() {
90 | // Control state
91 | const isMissing = this.isMissing(this.props.value);
92 |
93 | // Selected date
94 | const selected = this.props.value ? moment(this.props.value) : null;
95 |
96 | let className = "datepicker__input rdf";
97 |
98 | if (isMissing) {
99 | className += " is-missing";
100 | }
101 |
102 | if (this.props.edit) {
103 | return (
104 | API
129 |134 |
Props
135 |136 | {docs.props ? this.renderProps(docs.props) : "none"} 137 |
105 |
117 | );
118 | } else {
119 | const hasError = false;
120 | let text = selected ? selected.format("MM/DD/YYYY") : "";
121 | if (isMissing) {
122 | text = " ";
123 | }
124 | const style = this.inlineStyle(hasError, isMissing);
125 | return
106 | { this.textInput = input; }}
109 | className={className}
110 | disabled={this.props.disabled}
111 | placeholderText={this.props.placeholder}
112 | selected={selected}
113 | onChange={v => this.handleDateChange(v)}
114 | />
115 |
116 | {text}
;
126 | }
127 | }
128 | }
129 |
130 | DateEdit.propTypes = {
131 | /**
132 | * width - Customize the horizontal size of the Chooser
133 | */
134 | width: PropTypes.number,
135 |
136 | /**
137 | * field - The identifier of the field being edited
138 | */
139 | field: PropTypes.string
140 | };
141 |
142 | DateEdit.defaultProps = {
143 | width: 100
144 | };
145 |
146 | export default formGroup(DateEdit);
147 |
--------------------------------------------------------------------------------
/packages/website/src/Sidebar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2017, The Regents of the University of California,
3 | * through Lawrence Berkeley National Laboratory (subject to receipt
4 | * of any required approvals from the U.S. Dept. of Energy).
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree.
9 | */
10 |
11 | import React, { Component } from "react";
12 | import { Link } from "react-router-dom";
13 | import { sidebarStyle, sidebarItemStyle, sidebarTitleStyle } from "./styles";
14 | import { AutoAffix } from "react-overlays";
15 |
16 | export default class extends Component {
17 | render() {
18 | return (
19 |
20 |
121 | );
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/docs/static/media/form_docs.c680d6e1.md:
--------------------------------------------------------------------------------
1 | ### Forms example
2 |
3 | The forms library is designed to help you build a complete form. In this example
4 | we create a simple contacts form. There are other examples too of forms which change
5 | their structure as the user interacts with tham, as well as demostrating the use
6 | of lists within the forms. But here we keep it relatively simple.
7 |
8 | **What do we want from our form?**
9 |
10 | Essentially we want to provide perhaps some initial data, our form `"value"`,
11 | defaults in the case of a new form, or maybe our current
12 | database state in the case of editing an existing entity.
13 |
14 | As the user edits the data, we'll want to track that. We may choose to save
15 | it on submit (if it's a new form, that's likely), or save it as the user edits it
16 | (perhaps if they are using inline editing we might
17 | want to save the data when any fields are changed). Either way, the forms library
18 | allows you to provide a callback function, which will be called whenever the values
19 | in the form change. How you want to respond to that is up to you, but this example
20 | demostrates one possible approach.
21 |
22 | In addition to knowing that the form values have changed, we also need to know if
23 | the form has any errors or missing fields. We do this via callbacks as well, where
24 | each callback will tell you the number of missing or empty fields that exist within
25 | the form. You can use that to control if the user can submit the form or not, as
26 | we do in this example.
27 |
28 | Okay, so we have initial values and we have some callbacks.
29 |
30 | **How do we get a form up and running to use those?**
31 |
32 | Forms have two concerns. Each form has a schema which we use to provide the meta
33 | data for fields within the form. This includes UI elements like the label for each
34 | fields, the placeholder text, etc, but also rules around the field itself. For
35 | example a field (called an Field in this library),
36 |
37 | The form elements are defined by a **schema**. Schemas can be defined with JSX or manually. Here's the schema used in this page:
38 |
39 | const schema = (
40 |
21 | GUIDE
22 |
23 | -
24 |
- 25 | Introduction 26 | 27 |
- 28 | Getting Started 29 | 30 |
33 | Examples
34 |
35 | -
36 |
- 37 | Basic form 38 | 39 |
- 40 | Dynamic form 41 | 42 |
- 43 | List example 44 | 45 |
- 46 | Schema example 47 | 48 |
51 | API
52 |
53 | -
54 |
- 55 | CheckBoxes 56 | 57 |
- 58 | Chooser 59 | 60 |
- 61 | DateEdit 62 | 63 |
- 64 | Field 65 | 66 |
- 67 | Form 68 | 69 |
- 70 | List 71 | 72 |
- 73 | RadioButtons 74 | 75 |
- 76 | Schema 77 | 78 |
- 79 | TagsEdit 80 | 81 |
- 82 | TextArea 83 | 84 |
- 85 | TextEdit 86 | 87 |
- 88 | View 89 | 90 |
93 | Links
94 |
95 | -
96 |
- 97 | GitHub 98 | 99 |
- 100 | ESnet 101 | 102 |
- 103 | Open Source 104 | 105 |
108 | Related Projects
109 |
110 | -
111 |
- 112 | pond.js 113 | 114 |
- 115 | 116 | Network Diagrams 117 | 118 | 119 |
156 |