Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-10-26 08:06:09 +01:00
Code Issues Packages Projects Releases Activity

add key value entry inputfield component

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-07-08 10:48:32 +02:00
parent 775784a10b
commit b182f5b2d0
12 changed files with 330 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@@ -6,7 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## Unreleased
### Added
- Add branch link provider to access branch links in plugins [#1243](https://github.com/scm-manager/scm-manager/pull/1243)
- Add branch link provider to access branch links in plugins ([#1243](https://github.com/scm-manager/scm-manager/pull/1243))
- Add key value input field component ([#1246](https://github.com/scm-manager/scm-manager/pull/1246))
### Fixed
- Fixed file extension detection with new spotter version

2
scm-plugins/scm-git-plugin/package.json
View File

@@ -20,6 +20,6 @@
},
"prettier": "@scm-manager/prettier-config",
"dependencies": {
"@scm-manager/ui-plugins": "^2.2.0"
"@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT"
}
}

2
scm-plugins/scm-hg-plugin/package.json
View File

@@ -19,6 +19,6 @@
},
"prettier": "@scm-manager/prettier-config",
"dependencies": {
"@scm-manager/ui-plugins": "^2.2.0"
"@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT"
}
}

2
scm-plugins/scm-legacy-plugin/package.json
View File

@@ -19,6 +19,6 @@
},
"prettier": "@scm-manager/prettier-config",
"dependencies": {
"@scm-manager/ui-plugins": "^2.2.0"
"@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT"
}
}

2
scm-plugins/scm-svn-plugin/package.json
View File

@@ -19,6 +19,6 @@
},
"prettier": "@scm-manager/prettier-config",
"dependencies": {
"@scm-manager/ui-plugins": "^2.2.0"
"@scm-manager/ui-plugins": "^2.3.0-SNAPSHOT"
}
}

2
scm-ui/ui-components/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@scm-manager/ui-components",
"version": "2.2.0",
"version": "2.3.0-SNAPSHOT",
"description": "UI Components for SCM-Manager and its plugins",
"main": "src/index.ts",
"files": [

152
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -38310,6 +38310,158 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
</div>
`;
exports[`Storyshots Forms|AddKeyValueEntryToTableField Default 1`] = `
<div
className="AddKeyValueEntryToTableFieldstories__Spacing-d5xy2z-0 dAnpDP"
>
<div
className="AddKeyValueEntryToTableField__InputLevel-kiarql-0 dnNoUR"
>
<div
className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 hsBwOW"
>
<label
className="label"
>
Key
</label>
<div
className="control"
>
<input
className="input"
onChange={[Function]}
onKeyPress={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
</div>
<div
className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 hsBwOW"
>
<label
className="label"
>
Value
</label>
<div
className="control"
>
<input
className="input"
onChange={[Function]}
onKeyPress={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
</div>
<button
className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-2 bvjJvd"
disabled={true}
onClick={[Function]}
type="button"
>
<span
className="icon is-medium"
>
<i
className="fas fa-plus has-text-inherit"
/>
</span>
<span>
Add to table
</span>
</button>
</div>
</div>
`;
exports[`Storyshots Forms|AddKeyValueEntryToTableField Disabled 1`] = `
<div
className="AddKeyValueEntryToTableFieldstories__Spacing-d5xy2z-0 dAnpDP"
>
<div
className="AddKeyValueEntryToTableField__InputLevel-kiarql-0 dnNoUR"
>
<div
className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 hsBwOW"
>
<label
className="label"
>
Key
</label>
<div
className="control"
>
<input
className="input"
disabled={true}
onChange={[Function]}
onKeyPress={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
</div>
<div
className="field AddKeyValueEntryToTableField__StyledInputField-kiarql-1 hsBwOW"
>
<label
className="label"
>
Value
</label>
<div
className="control"
>
<input
className="input"
disabled={true}
onChange={[Function]}
onKeyPress={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
</div>
<button
className="button is-default AddKeyValueEntryToTableField__MarginTopButton-kiarql-2 bvjJvd"
disabled={true}
onClick={[Function]}
type="button"
>
<span
className="icon is-medium"
>
<i
className="fas fa-plus has-text-inherit"
/>
</span>
<span>
Add to table
</span>
</button>
</div>
</div>
`;
exports[`Storyshots Forms|Checkbox Default 1`] = `
<div
className="Checkboxstories__Spacing-sc-1bg8q8e-0 kJtXav"

57
scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx Normal file
View File

@@ -0,0 +1,57 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import styled from "styled-components";
import { storiesOf } from "@storybook/react";
import React from "react";
import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
import { MemoryRouter } from "react-router-dom";
const Spacing = styled.div`
padding: 2em;
`;
storiesOf("Forms|AddKeyValueEntryToTableField", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.add("Default", () => (
<Spacing>
<AddKeyValueEntryToTableField
keyFieldLabel="Key"
valueFieldLabel="Value"
buttonLabel="Add to table"
addEntry={(key, value) => {console.log(key, value)}}
/>
</Spacing>
))
.add("Disabled", () => (
<Spacing>
<AddKeyValueEntryToTableField
keyFieldLabel="Key"
valueFieldLabel="Value"
buttonLabel="Add to table"
addEntry={() => {}}
disabled={true}
/>
</Spacing>
));

109
scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx Normal file
View File

@@ -0,0 +1,109 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useState } from "react";
import styled from "styled-components";
import InputField from "./InputField";
import { AddButton } from "../buttons";
type Props = {
addEntry: (key: string, value: string) => void;
disabled?: boolean;
buttonLabel: string;
keyFieldLabel: string;
valueFieldLabel: string;
errorMessage?: string;
keyHelpText?: string;
valueHelpText?: string;
validateEntry?: (p: string) => boolean;
};
const InputLevel = styled.div`
display: flex;
justify-content: space-between;
`;
const StyledInputField = styled(InputField)`
margin-right: 1.5rem;
width: 100%;
`;
const MarginTopButton = styled(AddButton)`
margin-top: 2rem;
`;
const AddKeyValueEntryToTableField: FC<Props> = ({
keyFieldLabel,
valueFieldLabel,
disabled,
buttonLabel,
keyHelpText,
valueHelpText,
validateEntry,
errorMessage,
addEntry
}) => {
const [key, setKey] = useState("");
const [value, setValue] = useState("");
const isValid = (input: string) => {
if (!input || !validateEntry) {
return true;
} else {
return validateEntry(input);
}
};
return (
<InputLevel>
<StyledInputField
label={keyFieldLabel}
errorMessage={errorMessage}
onChange={setKey}
validationError={!isValid(key)}
value={key}
onReturnPressed={() => addEntry(key, value)}
disabled={disabled}
helpText={keyHelpText}
/>
<StyledInputField
label={valueFieldLabel}
errorMessage={errorMessage}
onChange={setValue}
validationError={!isValid(value)}
value={value}
onReturnPressed={() => addEntry(key, value)}
disabled={disabled}
helpText={valueHelpText}
/>
<MarginTopButton
label={buttonLabel}
action={() => addEntry(key, value)}
disabled={disabled || !key || !value || !isValid(key) || !isValid(value)}
/>
</InputLevel>
);
};
export default AddKeyValueEntryToTableField;

1
scm-ui/ui-components/src/forms/index.ts
View File

@@ -25,6 +25,7 @@
// @create-index
export { default as AddEntryToTableField } from "./AddEntryToTableField";
export { default as AddKeyValueEntryToTableField } from "./AddKeyValueEntryToTableField";
export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField";
export { default as TagGroup } from "./TagGroup";
export { default as MemberNameTagGroup } from "./MemberNameTagGroup";

4
scm-ui/ui-plugins/package.json
View File

@@ -1,12 +1,12 @@
{
"name": "@scm-manager/ui-plugins",
"version": "2.2.0",
"version": "2.3.0-SNAPSHOT",
"license": "MIT",
"bin": {
"ui-plugins": "./bin/ui-plugins.js"
},
"dependencies": {
"@scm-manager/ui-components": "^2.2.0",
"@scm-manager/ui-components": "^2.3.0-SNAPSHOT",
"@scm-manager/ui-extensions": "^2.1.0",
"classnames": "^2.2.6",
"query-string": "^5.0.1",

4
scm-ui/ui-webapp/package.json
View File

@@ -1,9 +1,9 @@
{
"name": "@scm-manager/ui-webapp",
"version": "2.2.0",
"version": "2.3.0-SNAPSHOT",
"private": true,
"dependencies": {
"@scm-manager/ui-components": "^2.2.0",
"@scm-manager/ui-components": "^2.3.0-SNAPSHOT",
"@scm-manager/ui-extensions": "^2.1.0",
"classnames": "^2.2.5",
"history": "^4.10.1",