filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 14:07:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

slate: list editor adjustments and semantics

Browse Source
This commit is contained in:
@wwwjim 2020-07-09 00:10:06 -07:00
parent fa94d2cdca
commit 6cf20f0fdf
2 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/system/components/ListEditor.js
View File

@ -21,19 +21,20 @@ const expand = keyframes`
}
`;
const INPUT = css`
const STYLES_INPUT = css`
display: inline-block;
width: calc(100% - 80px);
`;
const INPUT_HIDDEN = css`
const STYLES_INPUT_HIDDEN = css`
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
height: 0;
`;
const MODAL_BACKGROUND = css`
const STYLES_MODAL_BACKGROUND = css`
position: fixed;
top: 0;
left: 0;
@ -41,7 +42,7 @@ const MODAL_BACKGROUND = css`
height: 100vh;
`;
const BUTTON = css`
const STYLES_BUTTON = css`
display: inline-block;
text-align: right;
`;
@ -193,7 +194,7 @@ export class ListEditor extends React.Component {
return (
<div>
<div
css={this.state.expand ? INPUT_HIDDEN : INPUT}
css={this.state.expand ? STYLES_INPUT_HIDDEN : STYLES_INPUT}
onFocus={this._handleToggle}
>
<Input
@ -207,9 +208,9 @@ export class ListEditor extends React.Component {
/>
</div>
{this.state.expand ? (
<div css={MODAL_BACKGROUND} onClick={this._handleToggle} />
<div css={STYLES_MODAL_BACKGROUND} onClick={this._handleToggle} />
) : null}
<div css={this.state.expand ? INPUT : INPUT_HIDDEN}>
<div css={this.state.expand ? STYLES_INPUT : STYLES_INPUT_HIDDEN}>
<Input
value={this.state.search}
tooltip={this.props.tooltip}
@ -221,7 +222,7 @@ export class ListEditor extends React.Component {
onSubmit={this._handleAdd}
/>
</div>
<ButtonPrimary css={BUTTON} onClick={this._handleToggle}>
<ButtonPrimary css={STYLES_BUTTON} onClick={this._handleToggle}>
{this.state.expand ? "Save" : "Edit"}
</ButtonPrimary>
{this.state.expand ? <div css={STYLES_LIST}>{options}</div> : null}

44
pages/system/list-editor.js
View File

@ -52,7 +52,7 @@ export default class SystemPageListEditor extends React.Component {
<br />
<System.CodeBlock>
{`import * as React from 'react';
import { ListEditor } from 'slate-react-system';`}
import { ListEditor } from 'slate-react-system';`}
</System.CodeBlock>
<br />
<br />
@ -73,22 +73,32 @@ export default class SystemPageListEditor extends React.Component {
<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}
/>
)
}
}`}
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 />