johnnyxcy / mas-data-mapping

A data mapping component

title
MaSDataMapping

MaS Data Mapping

A React component for performing "map" actions

Visit this github page 🤓

⭐ Feature

• 😸 Perform "map" action in multiple ways
• 👍 Well-implemented drag and drop functionality
• 🌈 Customizable styles

📦 Installation

$ git clone [e-mail]:Johnnyxcy/mas-data-mapping.git
$ npm install

Will be published to npm ASAP 🥹

Basic Usage

/**
 * title: Basic Demo
 * desc: 👉 Try to drag node in **Available** slot into any slot below<br />👉 Try to click slot to trigger dropdown selection<br />👉 Try to input any value in slot<br />👉 Try to use `ctrl` / `cmd` key to select multiple nodes and drag<br />👉 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<string, string[]>;
const initialMapping: MappingType = {};
initialMapping['SingleOptional'] = ['E'];
initialMapping['HiddenSlot'] = ['F'];

export default () => {
  const [mappingHistoryList, setMappingHistoryList] = React.useState<
    MappingType[]
  >([]);

  const [showHidden, setShowHidden] = React.useState<boolean>(true);

  const onMappingChange = React.useCallback(
    (mapping: MappingType) =>
      setMappingHistoryList(mappingHistoryList.concat(mapping)),
    [mappingHistoryList],
  );

  const mappingHistoryAlerts = React.useMemo(
    () =>
      mappingHistoryList.map((mappingHistory, index) => (
        <Alert
          key={`mapping-history-${index}`}
          message={`Mapping Updated: ${JSON.stringify(mappingHistory)}`}
          type='info'
          showIcon
          closable
        />
      )),
    [mappingHistoryList],
  );

  return (
    <>
      <div style={{ padding: 12 }}>
        <Space>
          Show Hidden: <Switch checked={showHidden} onChange={setShowHidden} />
        </Space>
      </div>
      <br />
      <DataMapping
        nodes={nodes}
        slots={slots}
        showHidden={showHidden}
        initialMapping={initialMapping}
        onMappingChange={onMappingChange}
      />
      <Divider orientation='left' plain>
        Action History
      </Divider>
      <Space direction='vertical' style={{ width: '-webkit-fill-available' }}>
        {mappingHistoryAlerts}
      </Space>
    </>
  );
};

Development

Clone and install the dependencies

$ git clone [e-mail]:Johnnyxcy/mas-data-mapping.git
$ npm install

Start dev server via scaffolding umijs/dumi

npm start

License

mas-data-mapping is licensed under MIT