mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 14:07:20 +03:00
refactor list editor and notifications and more documentation
This commit is contained in:
Martina
parent
ef48aeb0c3
commit
e0357f093f
@ -222,8 +222,10 @@ export default class SystemPage extends React.Component {
|
||||
<SidebarLink url={url} href="/system/inputs" title="Inputs" />
|
||||
<SidebarLink url={url} href="/system/dropdowns" title="Dropdowns" />
|
||||
<SidebarLink url={url} href="/system/datepicker" title="Datepicker" />
|
||||
<SidebarLink url={url} href="/system/list-editor" title="List Editor" />
|
||||
<SidebarLink url={url} href="/system/card-tabs" title="Card Tabs" />
|
||||
<SidebarLink url={url} href="/system/tabs" title="Tabs" />
|
||||
<SidebarLink url={url} href="/system/notifications" title="Notifications" />
|
||||
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
|
||||
@ -140,14 +140,13 @@ export class DatePicker extends React.Component {
|
||||
this.state = {
|
||||
value: "",
|
||||
validation: null,
|
||||
date: "",
|
||||
cal: null,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
if (this.props.defaultValue) {
|
||||
this.processChange(moment(this.props.defaultValue).format("MM/DD/YYYY"));
|
||||
if (moment(this.props.value).isValid()) {
|
||||
this.processChange(moment(this.props.value).format("MM/DD/YYYY"));
|
||||
}
|
||||
};
|
||||
|
||||
@ -155,6 +154,16 @@ export class DatePicker extends React.Component {
|
||||
this.processChange(e.target.value);
|
||||
};
|
||||
|
||||
selectDay = (day) => {
|
||||
if (!this.isDisabled(day)) {
|
||||
this.setState({
|
||||
value: day.format("MM/DD/YYYY"),
|
||||
cal: null,
|
||||
});
|
||||
this.registerChange(day.format("YYYY-MM-DD"));
|
||||
}
|
||||
};
|
||||
|
||||
processChange = (value) => {
|
||||
let validation = null;
|
||||
let date = "";
|
||||
@ -176,19 +185,10 @@ export class DatePicker extends React.Component {
|
||||
validation = result;
|
||||
}
|
||||
}
|
||||
this.setState({ value, validation, date, cal }, () => {
|
||||
if (cal) {
|
||||
this.setCalendar();
|
||||
}
|
||||
this.setState({ value, validation, cal }, () => {
|
||||
if (cal) this.setCalendar();
|
||||
});
|
||||
var myInput = this.myInput.current;
|
||||
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype,
|
||||
"value"
|
||||
).set;
|
||||
nativeInputValueSetter.call(myInput, date);
|
||||
var inputEvent = new Event("input", { bubbles: true });
|
||||
myInput.dispatchEvent(inputEvent);
|
||||
this.registerChange(date);
|
||||
};
|
||||
|
||||
checkInput = (value) => {
|
||||
@ -206,7 +206,9 @@ export class DatePicker extends React.Component {
|
||||
date.date() !== Number(value.substring(3, 5))
|
||||
)
|
||||
return "ERROR";
|
||||
if (this.isDisabled(date)) return "WARNING";
|
||||
if (this.isDisabled(date)) {
|
||||
return "WARNING";
|
||||
}
|
||||
return date;
|
||||
};
|
||||
|
||||
@ -223,8 +225,8 @@ export class DatePicker extends React.Component {
|
||||
} else {
|
||||
this.setState(
|
||||
{
|
||||
cal: this.state.date
|
||||
? moment(this.state.date).date(1)
|
||||
cal: this.props.value
|
||||
? moment(this.props.value).date(1)
|
||||
: moment().date(1),
|
||||
},
|
||||
this.setCalendar
|
||||
@ -253,19 +255,21 @@ export class DatePicker extends React.Component {
|
||||
return false;
|
||||
};
|
||||
|
||||
selectDay = (day) => {
|
||||
if (!this.isDisabled(day)) {
|
||||
this.setState({
|
||||
value: day.format("MM/DD/YYYY"),
|
||||
date: day.format("YYYY-MM-DD"),
|
||||
cal: null,
|
||||
});
|
||||
}
|
||||
registerChange = (date) => {
|
||||
var myInput = this.myInput.current;
|
||||
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype,
|
||||
"value"
|
||||
).set;
|
||||
nativeInputValueSetter.call(myInput, date);
|
||||
var inputEvent = new Event("input", { bubbles: true });
|
||||
myInput.dispatchEvent(inputEvent);
|
||||
this.props.onChange(inputEvent);
|
||||
};
|
||||
|
||||
getStyle = (day) => {
|
||||
if (this.isDisabled(day)) return STYLES_DISABLED_DAY;
|
||||
if (this.state.date && day.isSame(this.state.date, "day"))
|
||||
if (this.props.value && day.isSame(moment(this.props.value), "day"))
|
||||
return STYLES_CHOSEN_DAY;
|
||||
return STYLES_DAY;
|
||||
};
|
||||
@ -290,7 +294,7 @@ export class DatePicker extends React.Component {
|
||||
css={
|
||||
this.isDisabled(day)
|
||||
? STYLES_DISABLED_DAY
|
||||
: this.state.date && day.isSame(this.state.date, "day")
|
||||
: this.props.value && day.isSame(moment(this.props.value), "day")
|
||||
? STYLES_CHOSEN_DAY
|
||||
: STYLES_DAY
|
||||
}
|
||||
@ -308,7 +312,7 @@ export class DatePicker extends React.Component {
|
||||
css={STYLES_HIDDEN_INPUT}
|
||||
type="date"
|
||||
name={this.props.name}
|
||||
value={this.state.date}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
<div>
|
||||
|
||||
@ -35,6 +35,7 @@ const STYLES_INPUT = css`
|
||||
${INPUT_STYLES}
|
||||
padding: 0 24px 0 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
|
||||
inset 0 0 0 1px ${Constants.system.darkGray};
|
||||
|
||||
|
||||
@ -26,6 +26,21 @@ const INPUT = css`
|
||||
width: calc(100% - 80px);
|
||||
`;
|
||||
|
||||
const INPUT_HIDDEN = css`
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 0;
|
||||
`;
|
||||
|
||||
const MODAL_BACKGROUND = css`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const BUTTON = css`
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
@ -79,29 +94,35 @@ const STYLES_LIST_ITEM = css`
|
||||
padding: 0 5px;
|
||||
background-color: ${Constants.system.white};
|
||||
border: 1px solid ${Constants.system.gray};
|
||||
transition: 200ms ease all;
|
||||
`;
|
||||
|
||||
export class ListEditor extends React.Component {
|
||||
state = {
|
||||
expand: false,
|
||||
selected: this.props.selected,
|
||||
options: this.props.options,
|
||||
reordering: null,
|
||||
deltaY: 0,
|
||||
search: "",
|
||||
};
|
||||
|
||||
_handleToggle = () => {
|
||||
if (this.state.expand) {
|
||||
this.props.onChange({ name: this.props.name, value: this.state.options });
|
||||
}
|
||||
this.setState({ expand: !this.state.expand });
|
||||
};
|
||||
|
||||
_handleDelete = (i) => {
|
||||
let selected = this.state.selected;
|
||||
selected.splice(i, 1);
|
||||
this.setState({ selected });
|
||||
let options = this.state.options;
|
||||
options.splice(i, 1);
|
||||
this.setState({ options });
|
||||
};
|
||||
|
||||
_handleAdd = () => {
|
||||
if (this.state.search.length) {
|
||||
let selected = this.state.selected;
|
||||
selected.splice(0, 0, this.state.search);
|
||||
this.setState({ selected, search: "" });
|
||||
let options = this.state.options;
|
||||
options.splice(0, 0, this.state.search);
|
||||
this.setState({ options, search: "" });
|
||||
}
|
||||
};
|
||||
|
||||
@ -112,12 +133,12 @@ export class ListEditor extends React.Component {
|
||||
};
|
||||
|
||||
_handleStop = () => {
|
||||
let selected = this.state.selected;
|
||||
let options = this.state.options;
|
||||
let index = this.state.reordering;
|
||||
let newIndex = index + this.state.deltaY / ITEM_HEIGHT;
|
||||
let item = selected.splice(index, 1)[0];
|
||||
selected.splice(newIndex, 0, item);
|
||||
this.setState({ reordering: null, selected, deltaY: 0 });
|
||||
let item = options.splice(index, 1)[0];
|
||||
options.splice(newIndex, 0, item);
|
||||
this.setState({ reordering: null, options, deltaY: 0 });
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
@ -125,36 +146,7 @@ export class ListEditor extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this.state.expand) {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
css={INPUT}
|
||||
onFocus={() => {
|
||||
this.setState({ expand: true });
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
name={this.props.name}
|
||||
value={this.state.selected}
|
||||
readOnly
|
||||
tooltip={this.props.tooltip}
|
||||
label={this.props.label}
|
||||
description={this.props.description}
|
||||
/>
|
||||
</div>
|
||||
<ButtonPrimary
|
||||
css={BUTTON}
|
||||
onClick={() => {
|
||||
this.setState({ expand: true });
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</ButtonPrimary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
let selected = this.state.selected.map((item, i) => (
|
||||
let options = this.state.options.map((item, i) => (
|
||||
<Draggable
|
||||
axis="y"
|
||||
grid={[ITEM_HEIGHT, ITEM_HEIGHT]}
|
||||
@ -175,7 +167,7 @@ export class ListEditor extends React.Component {
|
||||
top: -i * ITEM_HEIGHT,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: (this.state.selected.length - i - 1) * ITEM_HEIGHT,
|
||||
bottom: (this.state.options.length - i - 1) * ITEM_HEIGHT,
|
||||
}}
|
||||
onStart={() => this.setState({ reordering: i })}
|
||||
onDrag={this._handleDrag}
|
||||
@ -200,7 +192,24 @@ export class ListEditor extends React.Component {
|
||||
));
|
||||
return (
|
||||
<div>
|
||||
<div css={INPUT}>
|
||||
<div
|
||||
css={this.state.expand ? INPUT_HIDDEN : INPUT}
|
||||
onFocus={this._handleToggle}
|
||||
>
|
||||
<Input
|
||||
name={this.props.name}
|
||||
style={{ cursor: "pointer" }}
|
||||
value={this.state.options}
|
||||
readOnly
|
||||
tooltip={this.props.tooltip}
|
||||
label={this.props.label}
|
||||
description={this.props.description}
|
||||
/>
|
||||
</div>
|
||||
{this.state.expand ? (
|
||||
<div css={MODAL_BACKGROUND} onClick={this._handleToggle} />
|
||||
) : null}
|
||||
<div css={this.state.expand ? INPUT : INPUT_HIDDEN}>
|
||||
<Input
|
||||
value={this.state.search}
|
||||
tooltip={this.props.tooltip}
|
||||
@ -212,15 +221,10 @@ export class ListEditor extends React.Component {
|
||||
onSubmit={this._handleAdd}
|
||||
/>
|
||||
</div>
|
||||
<ButtonPrimary
|
||||
css={BUTTON}
|
||||
onClick={() => {
|
||||
this.setState({ expand: false });
|
||||
}}
|
||||
>
|
||||
Save
|
||||
<ButtonPrimary css={BUTTON} onClick={this._handleToggle}>
|
||||
{this.state.expand ? "Save" : "Edit"}
|
||||
</ButtonPrimary>
|
||||
<div css={STYLES_LIST}>{selected}</div>
|
||||
{this.state.expand ? <div css={STYLES_LIST}>{options}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -79,6 +79,24 @@ const ICON_MAP = {
|
||||
};
|
||||
|
||||
export class Notification extends React.Component {
|
||||
componentDidMount = () => {
|
||||
this.startInterval();
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
this.stopInterval();
|
||||
};
|
||||
|
||||
stopInterval = () => {
|
||||
clearInterval(this.interval);
|
||||
};
|
||||
|
||||
startInterval = () => {
|
||||
if (this.props.interval) {
|
||||
this.interval = setInterval(this.props.onClose, this.props.interval);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
@ -88,6 +106,8 @@ export class Notification extends React.Component {
|
||||
NOTIF_COLOR_MAP[this.props.status || "INFO"]
|
||||
}`,
|
||||
}}
|
||||
onMouseEnter={this.stopInterval}
|
||||
onMouseLeave={this.startInterval}
|
||||
>
|
||||
{ICON_MAP[this.props.status || "INFO"]}
|
||||
<DescriptionGroup
|
||||
|
||||
@ -269,7 +269,7 @@ export const XCircle = (props) => {
|
||||
|
||||
export const X = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
|
||||
@ -17,7 +17,7 @@ export default class SystemPageDatepicker extends React.Component {
|
||||
state = {
|
||||
exampleOne: "",
|
||||
exampleTwo: "",
|
||||
exampleThree: "",
|
||||
exampleThree: "2020-07-13",
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
@ -38,6 +38,7 @@ export default class SystemPageDatepicker extends React.Component {
|
||||
<br />
|
||||
<System.P>
|
||||
The DatePicker component is used to allow the user to select a date.
|
||||
It returns a string in the yyyy-mm-dd form.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
@ -60,6 +61,7 @@ export default class SystemPageDatepicker extends React.Component {
|
||||
<System.DatePicker
|
||||
label="Pick a date with weekends disabled"
|
||||
name="exampleOne"
|
||||
value={this.state.exampleOne}
|
||||
isDisabled={weekdaysOnly}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
@ -97,6 +99,7 @@ const weekdaysOnly = (date) => {
|
||||
<DatePicker
|
||||
label="Pick a date with weekends disabled"
|
||||
name="exampleOne"
|
||||
value={this.state.exampleOne}
|
||||
isDisabled={weekdaysOnly}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
@ -114,6 +117,7 @@ const weekdaysOnly = (date) => {
|
||||
label="Pick a date with a minimum value"
|
||||
tooltip="Date must be today or after"
|
||||
name="exampleTwo"
|
||||
value={this.state.exampleTwo}
|
||||
min={new Date()}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
@ -138,6 +142,7 @@ const weekdaysOnly = (date) => {
|
||||
label="Pick a date with a minimum value"
|
||||
tooltip="Date must be today or after"
|
||||
name="exampleTwo"
|
||||
value={this.state.exampleTwo}
|
||||
min={new Date()}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
@ -154,7 +159,7 @@ const weekdaysOnly = (date) => {
|
||||
<System.DatePicker
|
||||
label="Pick a date with a default value"
|
||||
name="exampleThree"
|
||||
defaultValue="2020-07-13"
|
||||
value={this.state.exampleThree}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
@ -166,7 +171,7 @@ const weekdaysOnly = (date) => {
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleThree extends React.Component {
|
||||
state = { exampleThree: '' }
|
||||
state = { exampleThree: "2020-07-13" }
|
||||
|
||||
_handleChange = e => this.setState(
|
||||
{ [e.target.name]: e.target.value }
|
||||
@ -177,7 +182,7 @@ const weekdaysOnly = (date) => {
|
||||
<DatePicker
|
||||
label="Pick a date with a default value"
|
||||
name="exampleThree"
|
||||
defaultValue="2020-07-13"
|
||||
value={this.state.exampleThree}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
)
|
||||
@ -213,35 +218,11 @@ const weekdaysOnly = (date) => {
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "name",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Input name",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "label",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Label text",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: "description",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Description text",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
a: "tooltip",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Tooltip text",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
a: "defaultValue",
|
||||
a: (
|
||||
<span style={{ fontFamily: Constants.font.semiBold }}>
|
||||
value
|
||||
</span>
|
||||
),
|
||||
b: (
|
||||
<div>
|
||||
<System.CodeText nowrap>string</System.CodeText>
|
||||
@ -249,7 +230,36 @@ const weekdaysOnly = (date) => {
|
||||
</div>
|
||||
),
|
||||
c: "null",
|
||||
d: "Default date. String must be in yyyy-mm-dd form",
|
||||
d:
|
||||
"The value of the datepicker. Can be used to assign default values as well",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "name",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Input name",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: "label",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Label text",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
a: "description",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Description text",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
a: "tooltip",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Tooltip text",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
@ -12,7 +13,7 @@ export default class SystemPageInputs extends React.Component {
|
||||
exampleTwo: "",
|
||||
exampleThree: "",
|
||||
exampleFour: "aaaaa-bbbbb-ccccc-ddddd-eeee",
|
||||
exampleFive: "",
|
||||
exampleFive: "Click the 'x'",
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
@ -204,7 +205,53 @@ import { Input, Textarea } from 'slate-react-system';`}
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Input with icon and onSubmit</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
Declare the Input component with an icon and an onSubmit function.
|
||||
onSubmit will be triggered upon click of the icon and upon key down of
|
||||
the enter key.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.Input
|
||||
label="Icon and submit function"
|
||||
name="exampleFive"
|
||||
icon={SVG.X}
|
||||
onSubmit={() => {
|
||||
this.setState({ exampleFive: "" });
|
||||
}}
|
||||
value={this.state.exampleFive}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleCopyPaste extends React.Component {
|
||||
state = { exampleFive: "Click the 'x'" }
|
||||
|
||||
_handleChange = e => this.setState(
|
||||
{ [e.target.name]: e.target.value }
|
||||
);
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Input
|
||||
label="Icon with submit function"
|
||||
name="exampleFive"
|
||||
icon={SVG.X}
|
||||
onSubmit={() => {
|
||||
this.setState({ exampleFive: "" });
|
||||
}}
|
||||
value={this.state.exampleFive}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
@ -351,6 +398,22 @@ class ExampleError extends React.Component {
|
||||
c: "null",
|
||||
d: "Validation style. Use: SUCCESS, WARNING or ERROR",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
a: "icon",
|
||||
b: <System.CodeText nowrap>SVG</System.CodeText>,
|
||||
c: "null",
|
||||
d:
|
||||
"Icon on the right side of the input box. If an onSubmit is specified, it will trigger on click. Specifying an icon overrides copyable",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
a: "onSubmit",
|
||||
b: <System.CodeText nowrap>function</System.CodeText>,
|
||||
c: "null",
|
||||
d:
|
||||
"Function called when the enter key is pressed and when the icon (if present) is clicked",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
|
||||
167
pages/system/list-editor.js
Normal file
167
pages/system/list-editor.js
Normal file
@ -0,0 +1,167 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import moment from "moment";
|
||||
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageListEditor extends React.Component {
|
||||
state = {
|
||||
flavors: [
|
||||
"Chocolate",
|
||||
"Vanilla",
|
||||
"Mint Chip",
|
||||
"Pistachio",
|
||||
"Neapolitan",
|
||||
"Toffee",
|
||||
"Rocky Road",
|
||||
],
|
||||
};
|
||||
|
||||
_handleListChange = ({ name, value }) => {
|
||||
this.setState({ [name]: value });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: List Editor"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/system/list-editor"
|
||||
>
|
||||
<System.H1>
|
||||
List Editor <ViewSourceLink file="system/listeditor.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
The List Editor component allows the user to add to, delete from, and
|
||||
reorder a list of strings.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Imports</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import React and the ListEditor Component.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
import { ListEditor } from 'slate-react-system';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>List Editor</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.ListEditor
|
||||
name="flavors"
|
||||
options={this.state.flavors}
|
||||
onChange={this._handleListChange}
|
||||
/>
|
||||
<br />
|
||||
<System.P>
|
||||
Define the List Editor component. Note that the _handleListChange
|
||||
takes a different shape than the other onChange functions in this
|
||||
design system.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleOne extends React.Component {
|
||||
state = { flavors: ["Chocolate", "Vanilla", "Mint Chip", "Pistachio", "Neapolitan", "Toffee", "Rocky Road"] }
|
||||
|
||||
_handleListChange = ({ name, value }) => {
|
||||
this.setState({ [name]: value });
|
||||
};
|
||||
|
||||
render() {
|
||||
return(
|
||||
<ListEditor
|
||||
name="flavors"
|
||||
options={this.state.flavors}
|
||||
onChange={this._handleListChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted React Properties</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="List Editor">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Name", width: "128px" },
|
||||
{ key: "b", name: "Type", width: "88px" },
|
||||
{ key: "c", name: "Default", width: "88px" },
|
||||
{ key: "d", name: "Description", width: "100%" },
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
a: (
|
||||
<span style={{ fontFamily: Constants.font.semiBold }}>
|
||||
onChange
|
||||
</span>
|
||||
),
|
||||
b: <System.CodeText nowrap>function</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Function called upon an onChange event",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
a: (
|
||||
<span style={{ fontFamily: Constants.font.semiBold }}>
|
||||
options
|
||||
</span>
|
||||
),
|
||||
b: <System.CodeText nowrap>Array</System.CodeText>,
|
||||
c: "null",
|
||||
d:
|
||||
"Values to choose from and reorder. Can be used to specify the default value. An array of strings.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "name",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Input name",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "label",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Label text",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: "description",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Description text",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
a: "tooltip",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Tooltip text",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
289
pages/system/notifications.js
Normal file
289
pages/system/notifications.js
Normal file
@ -0,0 +1,289 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageNotifications extends React.Component {
|
||||
state = {
|
||||
exampleOne: true,
|
||||
exampleTwo: true,
|
||||
exampleThree: true,
|
||||
};
|
||||
|
||||
_handleChange = (name) => {
|
||||
this.setState({ [name]: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Notifications"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/system/notifications"
|
||||
>
|
||||
<System.H1>
|
||||
Notifications <ViewSourceLink file="system/notification.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
The Notification component is used to alert a user of new information.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Imports</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>Import React and the Notification Component.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
import { Notification } from 'slate-react-system';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Notification with status</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.Notification
|
||||
label="Info Notification"
|
||||
description="Here is the description"
|
||||
status="INFO"
|
||||
/>
|
||||
<br />
|
||||
<System.Notification
|
||||
label="Success Notification"
|
||||
description="Here is the description"
|
||||
status="SUCCESS"
|
||||
/>
|
||||
<br />
|
||||
<System.Notification
|
||||
label="Warning Notification"
|
||||
description="Here is the description"
|
||||
status="WARNING"
|
||||
/>
|
||||
<br />
|
||||
<System.Notification
|
||||
label="Error Notification"
|
||||
description="Whoops that doesn't look good"
|
||||
status="ERROR"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>Declare the Notification component with a status.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleOne extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<Notification
|
||||
label="Info Notification"
|
||||
description="Here is the description"
|
||||
status="INFO"
|
||||
/>
|
||||
<br />
|
||||
<Notification
|
||||
label="Success Notification"
|
||||
description="Here is the description"
|
||||
status="SUCCESS"
|
||||
/>
|
||||
<br />
|
||||
<Notification
|
||||
label="Warning Notification"
|
||||
description="Here is the description"
|
||||
status="WARNING"
|
||||
/>
|
||||
<br />
|
||||
<Notification
|
||||
label="Error Notification"
|
||||
description="Whoops that doesn't look good"
|
||||
status="ERROR"
|
||||
/>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Notification with content</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.Notification
|
||||
label="Doge demands your attention"
|
||||
description={
|
||||
<div style={{ display: "grid", gridTemplateColumns: "1fr 5fr" }}>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg"
|
||||
alt="doge"
|
||||
style={{ height: "50px", display: "inline-block" }}
|
||||
/>
|
||||
You can style the description how you like and even add photos or
|
||||
other components.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
Declare the Notification component with components in the description
|
||||
</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`let imgLink= "https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg"
|
||||
|
||||
class ExampleTwo extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<Notification
|
||||
label="Doge demands your attention"
|
||||
description={
|
||||
<div style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 5fr"
|
||||
}}
|
||||
>
|
||||
<img src={imgLink}
|
||||
alt="doge"
|
||||
style={{ height: "50px", display: "inline-block" }}
|
||||
/>
|
||||
You can style the description how you like and
|
||||
even add photos or other components.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Notification with onClose function and timer</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
{this.state.exampleOne ? (
|
||||
<System.Notification
|
||||
label="Notification with a timer and a close function"
|
||||
description="This notification disappears after 1 minute"
|
||||
interval={60000}
|
||||
onClose={() => this._handleChange("exampleOne")}
|
||||
/>
|
||||
) : (
|
||||
<System.P>
|
||||
This notification disappeared after 1 minute. Refresh the page to
|
||||
see it.
|
||||
</System.P>
|
||||
)}
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
Declare the Notification component with an onClose function which is
|
||||
triggered when the x is clicked.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
You can include an interval in milliseconds, after which onClose is
|
||||
automatically called. If the user mouses over the notification, the
|
||||
timer restarts.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class exampleOne extends React.Component {
|
||||
state = { exampleOne: true }
|
||||
|
||||
render() {
|
||||
return(
|
||||
{this.state.exampleOne ? (
|
||||
<Notification
|
||||
label="Notification with a timer and a close function"
|
||||
description="This notification disappears after 5 minutes"
|
||||
interval={180000}
|
||||
onClose={() => this._handleChange("exampleOne")}
|
||||
/>
|
||||
) : (
|
||||
<div>This notification disappeared after 5 minutes</div>
|
||||
)}
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted React Properties</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="Notifications">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Name", width: "128px" },
|
||||
{ key: "b", name: "Type", width: "88px" },
|
||||
{ key: "c", name: "Default", width: "88px" },
|
||||
{ key: "d", name: "Description", width: "100%" },
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
a: "onClose",
|
||||
b: <System.CodeText nowrap>function</System.CodeText>,
|
||||
c: "null",
|
||||
d:
|
||||
"Function called when the 'x' is clicked or the interval (if specified) runs out",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "status",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "INFO",
|
||||
d:
|
||||
"Status which determines the styling and color of the notification. Use INFO, SUCCESS, WARNING, or ERROR",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "interval",
|
||||
b: <System.CodeText nowrap>int</System.CodeText>,
|
||||
c: "null",
|
||||
d:
|
||||
"Number of milliseconds before onClose is automatically called. Interval resets if user mouses over the notification",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: "label",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Label text",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
a: "description",
|
||||
b: (
|
||||
<div>
|
||||
<System.CodeText nowrap>string</System.CodeText>
|
||||
<System.CodeText nowrap>Component</System.CodeText>
|
||||
</div>
|
||||
),
|
||||
c: "null",
|
||||
d: "Description text",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
a: "tooltip",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Tooltip text",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import Group from '~/components/system/Group';
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageTables extends React.Component {
|
||||
state = {
|
||||
@ -12,7 +12,11 @@ export default class SystemPageTables extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage title="SDS: Tables" description="..." url="https://fps.onrender.com/system/tables">
|
||||
<SystemPage
|
||||
title="SDS: Tables"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/system/tables"
|
||||
>
|
||||
<System.H1>
|
||||
Tables <ViewSourceLink file="system/tables.js" />
|
||||
</System.H1>
|
||||
@ -31,7 +35,7 @@ export default class SystemPageTables extends React.Component {
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
{`import * as React from 'react';
|
||||
import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
@ -91,16 +95,45 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Link', type: 'FILE_LINK' },
|
||||
{ key: 'b', name: 'Value', width: '88px' },
|
||||
{ key: 'c', name: 'Tooltip', tooltip: 'A tooltip.', width: '128px' },
|
||||
{ key: 'd', name: 'Copyable', copyable: true, width: '88px' },
|
||||
{ key: "a", name: "Link", type: "FILE_LINK" },
|
||||
{ key: "b", name: "Value", width: "88px" },
|
||||
{
|
||||
key: "c",
|
||||
name: "Tooltip",
|
||||
tooltip: "A tooltip.",
|
||||
width: "128px",
|
||||
},
|
||||
{ key: "d", name: "Copyable", copyable: true, width: "88px" },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'col 1 row 1', b: 'col 1 row 2', c: 'col 1 row 3', d: 'col 1 row 4' },
|
||||
{ id: 2, a: 'col 2 row 1', b: 'col 2 row 2', c: 'col 2 row 3', d: 'col 2 row 4' },
|
||||
{ id: 3, a: 'col 3 row 1', b: 'col 3 row 2', c: 'col 3 row 3', d: 'col 3 row 4' },
|
||||
{ id: 3, a: 'col 4 row 1', b: 'col 4 row 2', c: 'col 4 row 3', d: 'col 4 row 4' },
|
||||
{
|
||||
id: 1,
|
||||
a: "col 1 row 1",
|
||||
b: "col 1 row 2",
|
||||
c: "col 1 row 3",
|
||||
d: "col 1 row 4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "col 2 row 1",
|
||||
b: "col 2 row 2",
|
||||
c: "col 2 row 3",
|
||||
d: "col 2 row 4",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "col 3 row 1",
|
||||
b: "col 3 row 2",
|
||||
c: "col 3 row 3",
|
||||
d: "col 3 row 4",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "col 4 row 1",
|
||||
b: "col 4 row 2",
|
||||
c: "col 4 row 3",
|
||||
d: "col 4 row 4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
@ -117,28 +150,124 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '128px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Default', width: '88px' },
|
||||
{ key: 'd', name: 'Description', width: '100%' },
|
||||
{ key: "a", name: "Name", width: "128px" },
|
||||
{ key: "b", name: "Type", width: "88px" },
|
||||
{ key: "c", name: "Default", width: "88px" },
|
||||
{ key: "d", name: "Description", width: "100%" },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'key', b: 'string', c: 'null', d: 'Column key value' },
|
||||
{ id: 2, a: 'id', b: 'number', c: 'null', d: 'Row ID value' },
|
||||
{ id: 3, a: 'name', b: 'string', c: 'null', d: 'Name of the column' },
|
||||
{ id: 4, a: 'text', b: 'string', c: 'null', d: 'Table content text' },
|
||||
{ id: 5, a: 'data', b: 'string', c: 'null', d: 'Table content data' },
|
||||
{ id: 6, a: 'tooltip', b: 'string', c: 'null', d: 'If not null, a tooltip will be visible' },
|
||||
{ id: 7, a: 'copyable', b: 'boolean', c: 'false', d: 'If true, a copyable icon will be visible' },
|
||||
{ id: 8, a: 'type', b: 'string', c: 'null', d: 'Use FILE_LINK to add a linkable column' },
|
||||
{ id: 9, a: 'width', b: 'number', c: 'null', d: 'Width of the column' },
|
||||
{ id: 10, a: 'action', b: 'string', c: 'null', d: 'Row action' },
|
||||
{ id: 11, a: 'hideLabel', b: 'boolean', c: 'null', d: 'If true, column label will be hidden' },
|
||||
{ id: 12, a: 'children', b: 'string', c: 'null', d: 'Row child value' },
|
||||
{ id: 13, a: 'onNavigateTo', b: 'string', c: 'null', d: 'onNavigateTo function binding' },
|
||||
{ id: 14, a: 'onAction', b: 'string', c: 'null', d: 'onAction function binding' },
|
||||
{ id: 15, a: 'onChange', b: 'string', c: 'null', d: 'onChange function binding' },
|
||||
{ id: 16, a: 'selectedRowId', b: 'number', c: 'null', d: 'ID value of the selected row' },
|
||||
{
|
||||
id: 1,
|
||||
a: "key",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Column key value",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "id",
|
||||
b: <System.CodeText nowrap>number</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Row ID value",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "name",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Name of the column",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
a: "text",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Table content text",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
a: "data",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Table content data",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
a: "tooltip",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "If not null, a tooltip will be visible",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
a: "copyable",
|
||||
b: <System.CodeText nowrap>boolean</System.CodeText>,
|
||||
c: "false",
|
||||
d: "If true, a copyable icon will be visible",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
a: "type",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Use FILE_LINK to add a linkable column",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
a: "width",
|
||||
b: <System.CodeText nowrap>number</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Width of the column",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
a: "action",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Row action",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
a: "hideLabel",
|
||||
b: <System.CodeText nowrap>boolean</System.CodeText>,
|
||||
c: "false",
|
||||
d: "If true, column label will be hidden",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
a: "children",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "Row child value",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
a: "onNavigateTo",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "onNavigateTo function binding",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
a: "onAction",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "onAction function binding",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
a: "onChange",
|
||||
b: <System.CodeText nowrap>string</System.CodeText>,
|
||||
c: "null",
|
||||
d: "onChange function binding",
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
a: "selectedRowId",
|
||||
b: <System.CodeText nowrap>number</System.CodeText>,
|
||||
c: "null",
|
||||
d: "ID value of the selected row",
|
||||
},
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user