https://github.com/johnnyxcy/mas-data-mapping
A data mapping component
https://github.com/johnnyxcy/mas-data-mapping
component javascript jsx react react-redux redux redux-toolkit typescript
Last synced: 16 days ago
JSON representation
A data mapping component
- Host: GitHub
- URL: https://github.com/johnnyxcy/mas-data-mapping
- Owner: johnnyxcy
- License: mit
- Created: 2022-07-25T05:58:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-06T08:18:54.000Z (almost 3 years ago)
- Last Synced: 2025-05-07T11:56:57.079Z (16 days ago)
- Topics: component, javascript, jsx, react, react-redux, redux, redux-toolkit, typescript
- Language: TypeScript
- Homepage: https://johnnyxcy.github.io/mas-data-mapping/
- Size: 2.52 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
title: 'MaSDataMapping'
---
MaS Data Mapping
A React component for performing "map" actions
**_Visit this [github page](https://johnnyxcy.github.io/mas-data-mapping)_** 🤓
## ⭐ Feature
- 😸 Perform "map" action in multiple ways
- 👍 Well-implemented **drag and drop** functionality
- 🌈 Customizable styles
## 📦 Installation
```bash
$ git clone [email protected]:Johnnyxcy/mas-data-mapping.git
$ npm install
```
Will be published to npm ASAP 🥹
## Basic Usage
```tsx
/**
* title: Basic Demo
* desc: 👉 Try to drag node in **Available** slot into any slot below
👉 Try to click slot to trigger dropdown selection
👉 Try to input any value in slot
👉 Try to use `ctrl` / `cmd` key to select multiple nodes and drag
👉 Try to use `shift` key to select multiple nodes in the same slot and drag
*/
import React from 'react';
import DataMapping from 'mas-data-mapping';
import { Alert, Divider, Space, Switch } from 'antd';
const demoData = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
const nodes = demoData.map((colName) => ({ id: colName, label: colName }));
const slots = [
{
id: 'SingleRequired',
label: 'SingleRequired',
required: true,
allowMultiple: false,
visible: true,
},
{
id: 'MultipleRequired',
label: 'MultipleRequired',
required: true,
allowMultiple: true,
visible: true,
},
{
id: 'SingleOptional',
label: 'SingleOptional',
required: false,
allowMultiple: false,
visible: true,
},
{
id: 'MultipleOptional',
label: 'MultipleOptional',
required: false,
allowMultiple: true,
visible: true,
},
{
id: 'HiddenSlot',
label: 'HiddenSlot',
visible: false,
},
];
type MappingType = Record;
const initialMapping: MappingType = {};
initialMapping['SingleOptional'] = ['E'];
initialMapping['HiddenSlot'] = ['F'];
export default () => {
const [mappingHistoryList, setMappingHistoryList] = React.useState<
MappingType[]
>([]);
const [showHidden, setShowHidden] = React.useState(true);
const onMappingChange = React.useCallback(
(mapping: MappingType) =>
setMappingHistoryList(mappingHistoryList.concat(mapping)),
[mappingHistoryList],
);
const mappingHistoryAlerts = React.useMemo(
() =>
mappingHistoryList.map((mappingHistory, index) => (
)),
[mappingHistoryList],
);
return (
<>
Show Hidden:
Action History
{mappingHistoryAlerts}
>
);
};
```
## Development
### Clone and install the dependencies
```bash
$ git clone [email protected]:Johnnyxcy/mas-data-mapping.git
$ npm install
```
### Start dev server via scaffolding [umijs/dumi](https://github.com/umijs/dumi)
```bash
npm start
```
### License
`mas-data-mapping` is licensed under [MIT](https://opensource.org/licenses/MIT)